Sticky Header Tasarımı: Alan, Kontrast ve Odak Dengesi
Sabit başlık, ekranın üstünden bir şerit ayırıp onu kalıcı olarak menüye verir. Bu bir takas: erişim kazanırsın, alan kaybedersin. Takasın hangi tarafa düştüğü başlığın yüksekliğine, kontrastına ve kaydırma sırasında nasıl davrandığına bakar. Aşağıdakiler o dört değişkenin pratik ölçüleri.
Önce alan bütçesini çıkar
Telefonda tarayıcı çubukları düştükten sonra elinde kalan görünür alan çoğu cihazda 600 piksel civarında. 64 piksellik bir sabit başlık bunun onda birini alır ve o onda bir bir daha geri gelmez. Masaüstünde oran düşer ama orada da başlık, okuma sırasında gözün doğal olarak takıldığı bandı işgal eder.
Dokunulabilir alan için sık verilen 1 cm x 1 cm tavsiyesi doğru yerden gelir, ancak CSS birimine çevrilmesi gerekir: 1 cm 37,8 CSS pikseline denk düşer, Apple 44 pt, Google 48 dp önerir. 48 pikselden aşağı inmeyen bir dokunma hedefiyle 64 piksellik başlık neredeyse dolmuş demektir. İçine ikinci bir satır, arama kutusu ve kampanya şeridi sığdırmaya çalışıyorsan sorun başlığın tasarımında değil, kapsamında.
Bir de kaynaklarda dolaşan "metni en az 16 pt tut" cümlesi var. Web'in birimi pt değil; 16 pt yaklaşık 21 piksel eder ve o boyut başlığı kendiliğinden şişirir. Kastedilen 16 piksel, yani tarayıcının varsayılan gövde metni.
Şeffaflığın gizli maliyeti kontrasttır
Yarı saydam başlıklar güzel görünür. Sorun şu ki kontrast oranı artık sabit bir sayı değil, altından geçen içeriğe göre kaydırma boyunca değişen bir değer. Beyaz zeminde 8:1 okuyan menü metni, altına koyu bir görsel geldiğinde 2:1'e düşer. Kontrastı ölçerken en iyi durumu değil, sayfadaki en kötü arka planı ölçmek gerekir; WCAG'ın 4.5:1 eşiği o en kötü durum için geçerlidir.
Peki saydamlığı tamamen bırakmak şart mı? Hayır. Arkasına bulanıklık uygulanmış ve opaklığı yeterince yüksek tutulmuş bir taban katman, hem derinlik hissini korur hem de metnin altındaki zemini öngörülebilir kılar. Ölçüsünü gözle değil, sayfadaki en koyu ve en açık iki bölümün üstünde tek tek ölçerek bulursun.
Kısmi sabitlemeyi tam sabitlemeye tercih ederim
Aşağı kaydırırken gizlenen, yukarı kaydırırken geri gelen başlığı sürekli görünen başlıktan daha güvenilir buluyorum: kullanıcı okurken alanın tamamını geri veriyor, menüye ihtiyaç duyduğu anda ise zaten yaptığı hareketle (yukarı kaydırma) onu çağırıyor. Tam sabit başlık ise ihtiyacın olmadığı her saniye de orada duruyor.
Geçiş süresi için sık önerilen 300-400 ms bu senaryoda uzun. Kullanıcı halihazırda kaydırma hareketinin içinde, başlığın ona yetişmesi lazım; 150-200 ms arası bant hem yumuşak görünür hem de gecikmiş hissettirmez. Başlığın kaydırma yönü değişir değişmez değil, küçük bir eşik aşıldıktan sonra tepki vermesi de titremeyi engeller, aksi halde parmağın en ufak salınımı menüyü açıp kapatır.
Hareketi azaltma tercihi açık olan kullanıcılarda geçişi tamamen kaldır. Başlık orada ya vardır ya yoktur, arada animasyon olmaz.
Sabit başlığın kimseye söylenmeyen yan etkisi: odak
Sabit başlıkla gelen en yaygın hata görsel değil, davranışsal. Sayfa içi bir bağlantıya tıklandığında tarayıcı hedef öğeyi görünür alanın en üstüne getirir, sabit başlık da tam oraya oturduğu için hedef başlık başlığın altında kaybolur. Aynı şey klavyeyle gezinirken de olur: Tab ile odaklanan bağlantı ekrana kaydırılır, sabit şerit onu örter, kullanıcı odağın nerede olduğunu göremez. WCAG 2.2 bunu ayrı bir ölçüt olarak tanımlar (2.4.11, Focus Not Obscured).
Çözümü tek satır:
html { scroll-padding-top: 5rem; }Değeri başlık yüksekliğinden biraz büyük tut. Bu tanım hem bağlantı hedeflerine hem de sıralı odak gezintisine uygulanır, yani iki sorunu birden kapatır. Her başlığa tek tek scroll-margin-top yazmaktansa kökte bir kez tanımlamak daha temiz, üstelik ileride başlığın yüksekliği değişirse güncellenecek tek bir yer kalır.
Gerçekten sabit olması gerekiyor mu?
Sabit başlık bir arama motoru sinyali değil; etkisi varsa sayfa içi gezinme oranında görünür, sıralamada değil. Karar da o yüzden ölçümle verilir: başlıktaki öğelere kullanıcılar sayfanın ortasındayken tıklıyor mu, yoksa tıklamaların tamamı sayfanın ilk ekranında mı toplanıyor? İkincisiyse sabitlemenin bedelini boşuna ödüyorsun.
Uzun okuma sayfalarında, tek işlevli formlarda ve kaydırmanın işin kendisi olduğu ekranlarda başlığı serbest bırak. Katalog, panel, çok adımlı arama gibi kullanıcının menüye dakikada birkaç kez döndüğü yerlerde sabitle, ama başlığın içine yalnızca o sık kullanılan işlevleri koy. Ekran alanı geri alınamayan tek kaynak.