Anasayfa Kullanılabilirliğinde Klasik Hatalar: Hangisi Hâlâ Geçerli
Anasayfa kullanılabilirliği üzerine dolaşan on maddelik listelerin çoğu aynı yere çıkar: Nielsen Norman Group'un 2000'lerin başındaki anasayfa incelemeleri. Maddelerin bir kısmı hâlâ aynı gerekçeyle doğru. Bir kısmının gerekçesi değişti, çünkü tavsiyeyi uygulayan katman artık tasarımcı değil tarayıcı. Birkaçı ise sorun olmaktan çıktı, listede alışkanlıktan duruyor.
Ziyaretçi ne yaptığınızı anlamıyorsa geri kalanı boşa gider
Anasayfadaki en pahalı hata, ziyaretçinin sayfaya bakıp ne satıldığını ya da neyin anlatıldığını çıkaramaması. Bu genelde metnin az olmasından değil, metnin kendi hakkında konuşmasından kaynaklanır. "Yenilikçi çözümler", "sektörde öncü" gibi cümleler her site için doğru olduğundan hiçbir site için bilgi taşımaz.
Sloganın işini yapıp yapmadığını ölçmenin ucuz bir yolu var: anasayfayı konuyu bilmeyen birine beş saniye gösterip kapatın, sonra "bu site ne yapıyor" diye sorun. Bu beş saniyelik testi uzun kullanıcı anketlerinden daha güvenilir bulurum. Anketteki cevap tasarımı inceledikten sonra oluşur, oysa gerçek ziyaretçi o incelemeyi hiç yapmıyor.
Aynı cümlenin kısa hali <title> etiketine de girer. Sekmede ve arama sonucunda görünen metin, markanın adından bağımsız olarak sitenin ne olduğunu söylemiyorsa tanınma işini tek başına logoya bırakmış olursunuz.
Ziyaret edilmiş bağlantı rengi: tavsiye ayakta, uygulaması kısıtlı
Ziyaret edilen ve edilmeyen bağlantıyı ayırmak, arşiv ve liste sayfalarında ziyaretçiyi aynı yazıya ikinci kez girmekten kurtarır. Tavsiyenin kendisi tartışmalı değil; ilginç olan nasıl uygulanabildiği.
2010'dan itibaren tarayıcılar :visited seçicisini sertçe kıstı, çünkü bu seçiciyle stil verip sonucu JavaScript'ten okumak gezinme geçmişini sızdırmanın bilinen bir yoluydu. Bugün :visited üzerinden yalnızca renk özellikleri değiştirilebiliyor: color, background-color, border-color, outline-color ve SVG tarafında fill ile stroke. Yazı kalınlığını değiştirmek, alt çizgi eklemek ya da ::before ile küçük bir işaret koymak çalışmaz. getComputedStyle de size ziyaret edilmemiş halin değerlerini döner, yani ayrımın gerçekten göründüğünü koddan doğrulayamazsınız.
Sonuç olarak "renk farkı koyun" bir tercih değil, kalan tek yol. Bunun pratik karşılığı şu: ayrımın tamamı renge yükleneceği için renk körlüğü olan ziyaretçiyi düşünmek zorundasınız ve iki rengin açıklık ekseninde de ayrışması gerekir. Mavi ile mor çiftinin klasikleşmesi tesadüf değil, o iki renk koyuluk olarak da birbirinden ayrılıyor.
Bulunduğunuz sayfaya bağlantı vermek
Anasayfada duran aktif bir "Ana Sayfa" bağlantısı listenin en küçük maddesi, düzeltmesi de en küçük. Menüdeki öğeyi bağlantı olmaktan çıkarıp seçili göstermek yeterli. Ekran okuyucu tarafındaki karşılığı aria-current="page"; öğe bağlantı olarak kalsa bile bu öznitelik hangisinin bulunulan sayfa olduğunu söyler. Görsel işareti kalınlık veya kenarlıkla vermek, yine tek başına renge güvenmekten iyi sonuç verir.
Arama kutusunun başlığını silmek, etiketini silmek değildir
Kutunun üstündeki "Arama" başlığı, yanında zaten bir arama butonu dururken yer kaplar. Görünür başlığı kaldırmak doğru, ama buradan "etikete gerek yok" sonucu çıkmaz. Ekran okuyucuyla gezen ziyaretçi butonun kutunun yanında durduğunu görmez; alana odaklandığında yalnızca o alanın etiketini duyar, etiket yoksa duyduğu şey "düzenleme alanı" olur.
Çözümü kısa: alana aria-label verin ya da görsel olarak saklanmış bir <label> bırakın. Placeholder metni bu işi görmez, ilk harf yazıldığında kaybolur.
Görsel ya bilgi taşır ya yer kaplar
Stok fotoğrafların sorunu çirkin olmaları değil, hiçbir şey söylememeleri. Toplantı masasında gülen beş kişi, ziyaretçinin kafasındaki "bu ürün ne yapıyor" sorusuna cevap vermez. Ürünün kendi ekran görüntüsü, gerçek üretim fotoğrafı ya da süreci gösteren basit bir şema verir. Anasayfada yer sıkıştığında önce dekoratif görseli atın, metni değil.
Sayı bağlamıyla birlikte gösterilir
Klasik listede finans siteleri için ayrı bir madde var: değişimi yalnızca puan olarak yazmak. Gerekçe tek bir sektöre özgü değil. Bir puanlık hareket, 20 liralık hissede yüzde beş, 400 liralık hissede yüzde çeyrek eder; sayı aynı, anlamı bambaşka.
Aynı hata anasayfa kartlarının her yerinde çıkıyor. "Bu ay 1.200 ziyaret" cümlesi, geçen ayın sayısı yanında durmadıkça iyi habere de kötü habere de yakışır. Mutlak değeri gösterecekseniz yanına oranı, oranı gösterecekseniz yanına tabanı koyun.
Dünkü içeriğe dönüş yolu
Anasayfadan kayan içerik çoğu sitede erişilemez hale gelmiyor, yalnızca bulunamaz hale geliyor. Ziyaretçi dün okuduğu yazının başlığını hatırlamıyor; tarihini ya da hangi bölümde olduğunu hatırlıyor. Tarihe ve kategoriye göre düzenlenmiş sade bir arşiv, anasayfadaki "son yazılar" bloğunu şişirmekten daha çok işe yarar. Düzenli güncellenen bir bölüm varsa oraya doğrudan bağlantı bırakın. Ziyaretçinin arama kutusuna tam doğru kelimeyi yazmasını beklemek iyimserlik.
Listenin tarihi geçmiş maddesi
Ekrana uyum sağlamayan sabit genişlikli anasayfa 2005'te gerçek bir sorundu. Bugün böyle bir sayfayla karşılaşmak için özel çaba gerekiyor, hazır temaların hepsi esnek ızgarayla geliyor. Yerini alan sorun başka: düzen ekrana sığıyor ama masaüstünde satır uzunluğu yüz karakteri aşıyor, mobilde dokunma hedefleri birbirine giriyor, gövde yazısı 14 pikselde kalıyor. Yani ölçüt artık "mobilde bozuluyor mu" değil; telefonda tek elle kullanılabiliyor mu, masaüstünde okunabilir bir satır uzunluğu kalmış mı.