Web Tasarımında Kullanılabilirliği Belirleyen Küçük Kararlar
Bir arayüzün kullanılabilirliği çoğunlukla büyük konseptlerde değil, kimsenin toplantıda konuşmadığı ayarlarda kaybedilir. Sayfa başlığının ilk kelimesi, gövde metninin hangi birimle tanımlandığı, mavinin nerede kullanıldığı, küçük görselin nasıl üretildiği. Aşağıdakiler bugün uygulayabileceğiniz, karşılığı ölçülebilen kararlar.
Sayfa başlığı sekmede ve sonuç sayfasında çalışır
Başlığı ayırt edici kelimeyle başlatın, kurum adıyla değil. Kullanıcının onu okuduğu iki yer var: yarım düzine sekme açıkken daralmış sekme başlığı ve arama sonucu. İkisinde de ilk otuz karakterden sonrası kırpılıyor, dolayısıyla şirket adını başa koyarsanız beş sekmenin beşi aynı görünür.
- Sayfayı tarif eden ifade önce, kurum adı sonra.
- Her sayfaya kendi başlığı; şablondan gelen tek başlık, sekme arasında geçiş yapan kullanıcıyı kör eder.
- Hoş geldiniz gibi içi boş kalıpları atın, hiçbir soruyu cevaplamıyorlar.
Yazı boyutunu piksele çivilemeyin
Gövde metnini rem ile tanımlayın, kök boyutu da sabitlemeyin. Tarayıcıların varsayılanı 16 piksel ve bu bir tercih ekranı: az gören kullanıcı bunu 20 ya da 24 piksele çekmiş olabilir. Kök boyutu piksele sabitlediğiniz anda o tercihi eziyorsunuz, üstelik sessizce.
Yakınlaştırma da aynı şeyi çözmez. Sayfa yakınlaştırma satır uzunluğunu ve düzeni birlikte büyütür, yatay kaydırma getirir; kullanıcının istediği ise yalnızca metnin okunur olması. Göreli birim kullandığınızda düzen olduğu yerde kalır, metin büyür.
Mavi bir bilgi taşır, onu boşa harcamayın
Bağlantı olmayan metni mavi yapmayın ve bağlantıyı yalnızca renkle işaretlemeyin. Birincisi kullanıcıya var olmayan bir tıklama vaat eder, ikincisi renk ayrımı yapamayan kullanıcı için bağlantıyı görünmez kılar. Metin içi bağlantıda altı çizili varsayılanı bırakmak en ucuz çözüm, çünkü ek bir işaret üretmeden ikinci bir ipucu sağlar.
Kontrast tarafında hedef net: normal boyutlu metin için arka planla arasında en az 4.5 kat, büyük başlıklarda 3 kat oran. Bunu gözle tahmin etmeyin, renk seçerken bir kontrast hesaplayıcıdan geçirin. Açık gri üzerine açık mavi bağlantı, tasarım dosyasında hoş durup ekranda kaybolan klasik örnek.
Küçük görseli tarayıcıya küçülttürmeyin
Bir görselin küçük halini üretmek iki işlemdir ve sırası önemli. Önce kadraj: görselin anlamını taşıyan bölgeyi kırpın. Sonra ölçek: kırptığınız parçayı hedef boyuta indirin. Sırayı ters çevirip önce ölçeklerseniz, listede yan yana duran kareler içinde ne olduğu seçilmeyen bulanık lekelere döner.
Asıl maliyet ise işaretlemede kaybediliyor. Tek boyutta büyük bir dosya sunup CSS ile 200 piksele indirirseniz kullanıcı yine tam dosyayı indirir; küçülen sadece görünen kutu, aktarılan bayt değil. Sunucuda birkaç türev üretip srcset ile boyut seçimini tarayıcıya bırakırsınız, üçüncü parti bir araca gerek yok, iki öznitelik yetiyor.
Bu kararların ortak tarafı
Dördü de aynı şeyi yapıyor: kullanıcının ya da tarayıcının zaten verdiği bilgiyi ezmemek. Tarayıcı size tercih edilen yazı boyutunu söylüyor, ekran genişliğini söylüyor, bağlantı için yerleşik bir görsel dil taşıyor. Tasarımın işi bunları geçersiz kılmak değil, üzerine kurmak. Erişilebilirlik denetimlerinde çıkan bulguların iyi bir kısmı, geçersiz kılınmış varsayılanlardan ibaret.