Kötü UI Tasarımı: Yedi Hata ve Onlara Önerilen Yanlış Çözümler
Kötü arayüz nadiren tek bir büyük hatadan doğar. Genelde küçük kararların birikmesidir: bir ikonun içeriğin üstüne binmesi, menünün köşeye sıkışması, hata mesajının neyin bozulduğunu söyleyip ne yapılacağını söylememesi. Aşağıdaki yedi örnek sık görülenler, ama asıl mesele şu: çoğunda tavsiye edilen çözüm, hatanın kendisi kadar sorunlu.
Örtüşen ve kayan elemanlar
İçeriğin üstünü kapatan bir ikon, kaydırınca yer değiştiren bir aksiyon butonu, metnin son satırına oturan sabit bir çerez bandı. Bu hatalar tasarım dosyasında görünmez. Belirli bir ekran genişliğinde, belirli bir metin uzunluğunda ortaya çıkarlar, o yüzden de tasarımcının ekranında hiç görünmeden yayına giderler. Tek çare gerçek içerikle test etmek: en uzun ürün adı, en uzun kullanıcı adı, iki satıra taşan başlık. Lorem ipsum ile bu sınıf hata yakalanmaz.
Bilgi yığını ve ölü altbilgiler
Arama sonucu ekranı her alanı aynı anda gösterdiğinde kullanıcı hiçbirini okumaz. Sonuçları ayrıştırmanın yolu daha fazla filtre eklemek değil, satır başına düşen bilgiyi kesmek: iki satır, bir görsel, bir aksiyon. Gerisi detay sayfasında durur.
Altbilgideki tıklanamayan şehir listesi ayrı bir vaka ve buradaki standart tavsiye kendi içinde çelişiyor. "Şehir adlarını bağlantıya çevir" demek listeyi kısaltmaz, sadece tıklanabilir kılar; bir paragraf önce bilgi yığınına karşı çıkıp altbilgiye 81 tıklanabilir öğe yerleştirmek tutarlı değil. Bir kurumsal sitede bu listeyi bağlantıya dönüştürmek yerine tek bir "Tüm iller" sayfasına indirmiştik, altbilgi üç satıra düştü ve kimse eksiğini aramadı.
Yanlış önceliklendirme ve tıkışık yerleşim
Arama kutusunun köşeye sıkışması ile sayfanın reklamla dolması aynı hatanın iki yüzü: ekranda neyin ne kadar yer kaplayacağına kullanım sıklığı değil, iç politika karar vermiş. Bir ekranda hangi öğenin en büyük olduğuna bakın, o ürünün gerçek önceliğini görürsünüz. Kullanıcının günde on kez yaptığı iş en görünür yerde değilse, tasarım değil öncelik listesi bozuktur.
Mobilde masaüstünü sıkıştırmak
Masaüstü düzenini olduğu gibi daraltmak duyarlı tasarım sayılmıyor. Mobilde parmak ucu yaklaşık 44 piksellik bir dokunma alanı ister, yan yana üç buton bu alanı tek başına yer. Yapılacak iş küçültmek değil eleme: mobilde ikincil aksiyonları menüye alın, birincil olanı tam genişlikte bırakın.
Sık görülen dört hata daha
- Sayfadan sayfaya değişen buton, yazı tipi ve renkler.
- Yalnızca hamburger ikonunun arkasında duran ana navigasyon.
- "Bir hata oluştu" diyen, hangi alanın hatalı olduğunu söylemeyen mesajlar.
- Kayıt formunda ilk adımda istenen, sonra hiç kullanılmayan alanlar.
Kontrast: WCAG bir tavan koymaz
Aşırı parlak renkler ve göz yoran kontrast için verilen standart tavsiye WCAG'ye uymaktır, ama WCAG bu şikayeti hiç görmez. Kontrast ölçütleri alt sınırdır: normal metin için 4.5:1, büyük metin ve arayüz bileşenleri için 3:1, AAA seviyesinde 7:1. Saf siyah üzerine saf beyaz 21:1 verir ve her seviyeden rahatça geçer. Yani bir tasarımın "WCAG uyumlu" olması, uzun okumada göz yormayacağı anlamına gelmiyor.
Doğru kurulum şu: WCAG'yi taban al, üst sınırı kendin koy. Gövde metninde saf siyah yerine koyu gri kullanmak, arka planı kırık beyaza çekmek oranı 21:1'den 15:1 bandına indirir ve hiçbir ölçütü ihlal etmez. Erişilebilirlik denetimi geçmek ile okunabilir olmak iki ayrı iş, ve ikincisini ölçen otomatik araç yok.