Flat Tasarımda Tıklanabilirlik İşaretlerini Geri Koymak

Flat tasarım arayüzden gölgeyi, kabartıyı ve dokuyu çıkardı. Bunlar süs değildi; bir yüzeyin basılabilir olduğunu söyleyen işaretlerdi. Geriye kalan düz zeminde kullanıcı neye tıklayacağını tahmin ediyor ve tahmin sık sık tutmuyor. Kaybolan işaretleri sadelikten ödün vermeden geri koymanın birkaç yolu var.

Tıklanabilirlik öğrenilmiş bir sözleşmedir

Mavi ve altı çizili metnin bağlantı, kabartılı dikdörtgenin buton olduğunu kimse doğuştan bilmiyor. Bu işaretler tamamen keyfi. Tarayıcıların ilk sürümlerinde birileri seçti, yıllar içinde milyonlarca sayfada tekrarlandı, sonunda okuma alışkanlığına yerleşti. Kullanıcının bir sayfayı tararken yaptığı şey aslında o sözleşmeyi hatırlamak: şu yüzey basılabilir, şu metin bir yere götürür.

Flat tasarım sözleşmeyi tek taraflı feshetti ama yerine yeni bir madde koymadı. Gölge gitti, çerçeve gitti, altı çizgi gitti; geriye çoğu zaman sadece ufak bir renk farkı kaldı, bazen o bile yok. Kalan boşluğu kullanıcı deneme yanılmayla dolduruyor. Genç kullanıcılar bağlamsal ipuçlarını okumakta daha hızlı, doğru, ama hızlı deneme yanılma da sonuçta deneme yanılma. “Tıkla ve dua et” diye geçiştirilen bu davranış aslında arayüzün kullanıcıya devrettiği bir iş.

Hover, flat tasarımın doğduğu yerde çalışmıyor

Düz arayüzlerin yayılması mobilin yükselişiyle aynı döneme denk geldi. İşin tuhaf tarafı burada: dokunmatik ekranda hover diye bir durum yoktur. Parmak ekrana değene kadar hiçbir ögenin üzerinde değildir, değdiği anda da o zaten bir tıklamadır. Yani ipucunu :hover katmanına bırakan bir arayüz, tam da flat tasarımın uğruna doğduğu cihazda hiçbir ipucu vermez.

Üstünde bir de şu var: tarayıcılar dokunmatikte hover durumunu taklit etmeye çalışıyor ve dokunulan öge, başka bir yere dokunulana kadar hover görünümünde takılı kalıyor. Masaüstünde işareti gizleyen karar, mobilde yanlış işaret veriyor. Hover efektini yalnızca işaret cihazı olan tarayıcılara vermek için @media (hover: hover) sorgusunu kullan; takılı kalma sorununu bu ayırır. Hover ikincil bir katmandır, ana menüde ve ödeme adımlarında işaretin sabit olması gerekir.

Renk tek başına işaret sayılmaz

Erişilebilirlik ölçütlerinin en eskilerinden biri, bilginin yalnızca renkle iletilemeyeceğini söyler (WCAG 1.4.1). Metin içindeki bir bağlantı için pratik karşılığı şu: ya altı çizili olacak, ya da çevresindeki metinle arasında en az 3:1 kontrast bulunacak ve odaklanma ile üzerine gelme durumlarında renk dışında ek bir işaret verilecek. İkinci yol daha zahmetli, üstelik renk farkını göremeyen kullanıcı ilk bakışta yine elde kalır.

Gövde metnindeki bağlantıda altı çizgiyi bırak, text-decoration: underline tek satır ve hiçbir tasarım sistemine ihtiyaç duymaz. Estetik gerekçeyle kaldıracaksan bedelini başka bir işaretle ödemen gerekir; ödemezsen açığı kullanıcı kapatır.

Geri bildirim 0,1 saniyede başlar

Tıklamanın ardından gelen tepkinin eşiği keyfi değil. Jakob Nielsen’in yanıt süresi sınırları 0,1 saniyeyi işlemin anlık algılandığı üst sınır olarak verir. Bunun altında kullanıcı tıklamanın kaydedildiğinden emindir, üstünde şüphe başlar.

Buradan çok somut bir mühendislik kuralı çıkıyor: basılı durum görselini sunucu yanıtına bağlama. Butonun rengini isteğin dönüşünde değiştiren bir arayüz, ağın yavaş olduğu her durumda kullanıcıya ikinci kez bastırır ve çift gönderim üretir. Görsel tepki CSS tarafında, anında; işin sonucu geldiğinde ayrı bir bildirim.

Hangi ögeye ne kadar işaret

Bütün tıklanabilir ögelere aynı vurguyu vermek de bir hata, çünkü o zaman hiyerarşi kayboluyor. Üç kademe çoğu arayüze yetiyor:

• Birincil eylemler (gönder, öde, kaydet): dolgu rengi, belirgin bir kenar, görünür odak halkası. Hiçbiri etkileşime bağlı olmamalı.
• Metin içi bağlantılar: altı çizgi ve kontrastlı renk.
• İkincil eylemler: yalın renk ve ikon yeterli, ama aynı sayfada tıklanmayan bir ögeyle aynı görünümde olmamalı.

Sorun sadelik değil, tekdüzelik

Flat tasarımın gerçek arızası gölgeyi atması değil, tıklanan ve tıklanmayan yüzeyi birbirine benzetmesi. Sadelik kaybedilmedi, ayrım kaybedildi. Az sayıda renk ve düz zeminle de üç kademeli bir işaret sistemi kurulabilir, bunun için gerçekçi dokulara dönmek gerekmiyor.

Kurduğun sistemin çalışıp çalışmadığını anlamanın ucuz yolu da var: arayüzün ekran görüntüsünü birine beş saniye göster, kapat, “nereye tıklardın” diye sor. Cevap senin beklediğin öge değilse sorun kullanıcının dikkatinde değil, işaretlerde.