Tıklanabilir Öğeler: Arayüzde Etkileşim Sinyali Vermek

Bir arayüzde en pahalı yanlış anlaşılma, kullanıcının tıklanabilir bir şeyi süs sanmasıdır. Bunun tersi de var: metnin ortasındaki renkli bir kelimeye boşuna tıklayan kullanıcı, o küçük hayal kırıklığından sonra gerçek bağlantılara da güvenmez. Sinyali nereye koyacağınız, sayfadaki her öğe için ayrı bir karar.

Sinyal her yerde aynı güçte olmak zorunda mı

Değil. Ana navigasyonda konum tek başına yeterli bir işaret; üst şeritteki bir kelimeye kimse "acaba tıklanır mı" diye bakmaz. Kartlarda çerçeve ve boşluk zaten bir sınır çizer. Sinyalin gerçekten çalışması gereken yer, gövde metninin içi: orada bağlantı, kendisiyle aynı satırı paylaşan yüzlerce kelimeden ayrışmak zorunda.

Peki kullanıcı web'in kalıplarını zaten öğrendiyse alt çizgiye hâlâ gerek var mı? Metin içinde var. Renk tek ayırt edici olduğunda, kullanıcının o rengi "bağlantı rengi" diye tanıması gerekir ve bu tanıma her sitede sıfırdan başlar. Alt çizgi böyle bir öğrenme gerektirmez.

Rengin tek başına yetmediği yer

Erişilebilirlik tarafında çoğu kişinin bildiği sayı 4.5:1, yani metnin arka planla kontrastı. Metin içi bağlantılarda asıl bağlayıcı olan başka bir eşik: bağlantı rengi ile çevresindeki gövde metninin rengi arasında en az 3:1 kontrast olmalı, üstüne odaklanma ve üzerine gelme durumlarında renk dışı bir işaret (genelde alt çizgi) belirmeli. Renk körlüğü olan kullanıcı için ilk şart, ekrana bakmayan kullanıcı için ikincisi çalışır.

Bu ikisi birbirini gizler. Koyu gri metnin içinde lacivert bir bağlantı, arka planla kontrast testini rahatça geçer ama gövde metniyle arasındaki fark 3:1'in çok altında kalır. Sayfayı gri tonlamaya çevirip bakmak, bunu ölçmeden görmenin en hızlı yolu: bağlantılar kayboluyorsa renge fazla yüklenmişsiniz.

Butonların kenarlığı ve dolgusu da aynı mantığa giriyor, arayüz bileşenlerinin sınırı için beklenen kontrast 3:1. Kenarlığı açık gri, zemini beyaz olan buton bu eşiği geçemez.

Düz tasarımın bıraktığı boşluk

Gölge ve eğim gittikten sonra butonu buton yapan şey azaldı, geriye dolgu rengi, kenarlık ve boşluk kaldı. Çerçevesi ince, zemini şeffaf olan ghost butonlar bunun en yaygın kurbanı (görünüş olarak zarif buluyorum, sinyal olarak zayıf).

Daha sinsi olanı, tıklanabilirliği hover durumuna saklamak. Ürün görselinin üzerine gelince beliren "sepete ekle" düğmesi masaüstünde çalışır, dokunmatik ekranda hover diye bir durum olmadığı için oradaki kullanıcı o düğmeyi hiç görmez. Etkileşim sinyalinin tamamı bir fare olayına bağlıysa, arayüzün yarısı için sinyal yok demektir.

Sinyalin bir kısmı işaretlemeden gelir

Görsel tarafı çözülmüş bir buton, işaretlemede div ise iş yarım kalır. button ya da a kullandığınızda klavyeyle sıraya girme, Enter ve Space ile tetiklenme, ekran okuyucuya "düğme" diye tanıtılma ve tarayıcının varsayılan odak halkası hazır gelir. Aynı davranışı div üzerinde kurmak için tabindex, role, klavye olay dinleyicisi ve odak stilini elle yazmanız gerekir; dördünden biri her seferinde unutulur, genellikle de klavye tarafı.

Odak halkasını tasarım gerekçesiyle silmek de buna dahil. Silinecekse yerine görünür bir alternatif konur, yoksa klavyeyle gezen kullanıcı sayfada nerede olduğunu kaybeder.

Yalnız ikon nerede yeterli

Çöp kutusu, büyüteç, hamburger menü: bunlar öğrenilmiş birkaç sembol ve etiketsiz kullanılabilir. Onların dışına çıkan her ikon tahmine dayanır. Çark simgesi ayarlar mı, yapılandırma mı, filtreleme mi? Yanına iki kelime yazmak bu tartışmayı bitirir.

İkon butonlarda ikinci sorun boyut. Sadece simgenin göründüğü alan değil, tıklanabilir alan ölçülür ve bunun 24x24 CSS pikselin altına düşmemesi beklenir. Görsel olarak küçük kalması gereken bir ikonun tıklama alanını dolgu ile büyütmek mümkün, sık atlanan bir ayrıntı.

Kontrol etmenin üç hızlı yolu

Tasarımı bitirdikten sonra sayfayı gri tonlamaya çevirin, tıklanabilir olan her şey hâlâ ayırt edilebiliyor mu bakın. Sonra fareyi bırakıp yalnızca Tab tuşuyla sayfayı baştan sona gezin, odak her adımda görünüyor mu izleyin. Son olarak sayfayı bir telefonda açın ve yalnızca dokunarak ilerleyin; hover'a bağlı ne varsa bu adımda ortaya çıkar.

Üçü de birkaç dakika sürüyor ve kullanıcı testine gerek kalmadan sorunların çoğunu veriyor. Geriye kalan tek soru şu: aynı görsel dili sitenin her sayfasında sürdürüyor musunuz? Bir sayfada buton olan biçim, diğerinde başlık olarak duruyorsa kullanıcının öğrendiği kural bozulur ve baştaki güvensizlik geri gelir.