Flat Tasarımda Zayıf İpuçları ve Tıklanabilirlik Sorunu

Flat tasarımın en çok övülen yanı sadelik, en çok eleştirilen yanı ise butonun buton olduğunun anlaşılmaması. İkisi aynı kararın iki yüzü: gölgeyi, çerçeveyi ve renk geçişini kaldırınca arayüz temizlenir, ama tıklanabilirliği taşıyan sinyaller de o kaldırılanların içindedir. Soru flat'in iyi mi kötü mü olduğu değil, çıkardığınız ipucunun yerine ne koyduğunuz.

Hız savı bugün geçerli değil

Flat tasarımın avantajları sıralanırken ilk sıraya çoğunlukla sayfa hızı yazılır: süsleme yok, grafik yok, sayfa hafif. Bu 2012'de kısmen doğruydu, çünkü buton gölgesi gerçekten bir PNG'ydi ve her biri ayrı bir istekti. Bugün gölge de, degrade de, yuvarlatılmış köşe de stil dosyasında birkaç karakter. box-shadow eklemek ne yeni bir istek doğurur ne de ölçülebilir bir yük getirir. Bir sayfanın ağırlığını görseller, yazı tipleri ve JavaScript belirler; butonun kenarlığı olup olmaması o tabloda görünmez bile.

Yani sadeliği tercih ediyorsanız gerekçeniz hız olmasın. Dikkat olsun: az sayıda vurgu, bakışın nereye gideceğini kolaylaştırır. Bu iyi bir gerekçe, ama yalnızca vurgular doğru öğelerin üstündeyse çalışır.

Kaybolan şey estetik değil, tıklanabilirlik

Göz izlemeyle yürütülen kullanılabilirlik çalışmaları, zayıf ipuçlu arayüzlerde aynı işi yapmak için daha fazla bakış sabitlemesi ve daha uzun süre gerektiğini gösteriyor. Nielsen Norman Group'un flat arayüzler üzerine yaptığı çalışmalar bu belirsizliği ölçmeye çalışan tarafta duruyor. Kullanıcı sonunda butonu genelde bulur; bedeli, o birkaç saniyelik tereddüt ve arada verilen yanlış tıklamalardır.

Bu çalışmalara yöneltilen iki itiraz haklı. Örnek arayüzler seçilirken uç vakalar, kontrastı iyice düşük hayalet butonlar öne çıkarılıyor ve karşılaştırma bir miktar taraflı kuruluyor. Katılımcı sayıları da çoğu zaman genelleme yapmaya yetmiyor. Ama bu itirazlar sonucu çürütmüyor, yalnızca sınırını çiziyor: uç örnek diye küçümsenen o düşük kontrastlı buton, gerçek projelerde fazlasıyla yaygın.

Hover'a yaslanan ipucu dokunmatikte hiç doğmaz

Flat savunusunun ikinci ayağı mobil uyum. Tuhaf olan şu: aynı metinlerde çözüm olarak sunulan şey genelde mikro animasyon ya da üzerine gelince beliren vurgu oluyor. Dokunmatik ekranda üzerine gelme diye bir durum yok. Parmak dokunduğunda karar zaten verilmiştir, ipucunun görevi o karardan önce bitmiştir.

Kural basit: tıklanabilirliği anlatan sinyal duruk halde görünmeli. Hover, focus ve animasyon bunun üstüne eklenen katmanlar; taşıyıcı kolon değil.

Gözle değil, sayıyla ölçün

Tıklanabilir öğenin görünürlüğü tartışmaya açık bir zevk meselesi değil, ölçülebilir bir eşiği var. WCAG 2.1'in 1.4.11 numaralı ölçütü, arayüz bileşenlerinin sınırını belirleyen görsel unsurlar için komşu renge karşı en az 3:1 kontrast ister. Metin için eşik 4.5:1. Beyaz zemin üzerine açık gri kenarlıklı klasik hayalet buton bu eşiği çoğunlukla geçemez, tasarımcının ekranında gayet iyi görünmesine rağmen.

Kenarlık ya da dolguyla ayrılan butonu, yalnızca renk farkıyla ayrılan butondan daha güvenilir bulurum. Renk tek başına iki yerde çöker: kırmızı ile yeşili ayırt edemeyen kullanıcıda ve güneş altında parlaklığı kısılmış telefonda. Biçim farkı ikisinde de ayakta kalır.

Pratikte şu üçünü kontrol etmek çoğu sorunu yakalar:

• Ekran görüntüsünü gri tonlamaya çevirin. Tıklanabilir olan hâlâ ayırt ediliyor mu?
• Kenarlık ve zemin renklerini bir kontrast hesaplayıcıya girin, 3:1 altındaysa düzeltin.
• Sayfayı hiç görmemiş birine ekran görüntüsünü beş saniye gösterip sorun: burada neye tıklardın? Cevap sizin beklediğiniz öğe değilse mesele arayüzde.

Nerede durmalı

Flat tasarım, görsel gürültüyü azaltmak için iyi bir başlangıç noktası. Sorun sadeleştirmenin nerede duracağının belirlenmemesi. İçeriği sadeleştirin, aksiyonu değil. Bir ekranda kullanıcının yapmasını istediğiniz asıl işlem varsa, o öğenin çevresindekilerden açıkça ayrılması sadelikten çalınan bir şey değil, sadeliğin işe yaramasının koşulu.