Flat Arayüzlerde Zayıf Gösterge Nerede Maliyet Çıkarır

Flat tasarım tıklanabilirliği yok etmez, kararı kullanıcıya devreder. Bir ögenin tıklanabilir olduğunu anlamak için tahmin gerekiyorsa o tahminin bir süresi ve bir hata payı vardır. Asıl soru flat'in iyi mi kötü mü olduğu değil; hangi ekranda ne kadar gösterge kesintisini kaldırabileceğiniz.

Zayıf gösterge tam olarak neyi pahalılaştırır

Güçlü gösterge, ögenin tıklanabilir olduğunu tıklamadan önce söyler: gövde metninden ayrışan renkte ve altı çizili bağlantı, sınırı belli düğme, imleç değişimi. Zayıf gösterge bu bilgiyi tıklama anına erteler. Nielsen Norman Group'un düz arayüzler üzerine yaptığı göz izleme çalışması, göstergeler zayıfladığında kullanıcıların sayfayı daha uzun taradığını ve bakışlarını daha çok noktada durdurduğunu ortaya koyuyor. Çalışmanın özeti burada.

Tek bir kullanıcıda bu birkaç yüz milisaniyedir, kimse fark etmez. Sorun, aynı kararın tüm arayüze uygulanmasıyla başlar: her ekranda birkaç yüz milisaniyelik tereddüt, çok adımlı bir akışta gözle görülür bir yavaşlamaya ve yanlış tıklamalara dönüşür.

Bilgi yoğunluğu, kararın asıl değişkeni

Zayıf göstergenin bedeli her sayfada aynı değil. Az ögeli ve alışıldık yerleşimli bir ekranda, mesela tek sütunlu bir yazıda ya da ürün detayında, kullanıcı nereye bakacağını zaten biliyor; gölgesiz bir düğme orada kimseyi durdurmaz.

Filtre paneli, veri tablosu, karşılaştırma ekranı gibi onlarca ögenin yan yana dizildiği yerlerde durum tersine döner. Tıklanabilir olanla olmayan aynı görünüyorsa kullanıcı her satırda kararı yeniden verir. Sadelikten fedakârlık edeceğiniz yer burasıdır, giriş sayfası değil.

Hover'ı gösterge saymayın

Tavsiye listelerinin çoğu "hover efekti ekleyin" deyip orada biter. Hover dokunmatik ekranda yoktur. Mobil trafiğin ağır bastığı bir sitede tıklanabilirliği yalnızca imleç üzerine gelince beliren bir gölgeye bağlamak, kullanıcıların çoğunluğu için hiçbir şey yapmamakla aynı kapıya çıkar. Kalıcı kontrastı hover'a dayalı ipucundan daha güvenilir bulurum: biri girdi yöntemi ne olursa olsun çalışır, diğeri fareye bağımlıdır. Hover kalsın, ama ikincil onay olarak.

Kontrastın ölçülebilir tarafı

"Belirgin olsun" ölçülemez, kontrast oranı ölçülür. WCAG üç eşik veriyor ve tartışmayı zevk meselesi olmaktan çıkarmaya yetiyorlar:

• Gövde metni içinde altı çizilmemiş bağlantı kullanacaksanız, bağlantı rengiyle çevresindeki metin arasında en az 3:1 oran gerekir, ayrıca renk dışında ikinci bir işaret (odaklanınca ya da üzerine gelince beliren) bulunmalıdır.
• Düğme ve giriş alanı gibi ögelerin sınırları için arka planla arasında 3:1 aranır.
• Metnin kendisi için AA seviyesinde sınır 4.5:1.

Bu sayıları gözle onaylamayın, ölçün. Tarayıcının geliştirici araçları oranı zaten gösteriyor ve renk paletini seçerken bakmak, tasarım bittikten sonra erişilebilirlik raporuyla uğraşmaktan ucuza gelir.

Ekranı denetlemenin kısa yolu

Tasarımı teslim etmeden önce ekranın gri tonlamalı bir görüntüsünü alın ve konuya yabancı birine sorun: burada neye tıklanır? Renk gidince gösterge ayakta kalıyorsa tamamdır. Kalmıyorsa, sayfayı taşıyan tek şey renk farkıymış demektir ve o fark ışıkta, ucuz ekranda, renk körlüğünde eriyip gider.

Flat kalabilirsiniz. Tıklanabilirliği tahmine bırakmak zorunda değilsiniz; ikisi aynı şey değil.