Kötü İkonlar: Simge Ne Zaman Anlam Taşır, Ne Zaman Taşımaz

İkonlar arayüzde yer kazandırdıkları için sevilir. Kazanılan yer çoğu zaman anlamdan çalınır: kullanıcı simgeye bakar, ne işe yaradığını tahmin eder, tahmin tutmazsa yanlış yere tıklar. Kötü ikon çirkin ikon değildir; işlevini söylemeyen ikondur.

Gerçekten evrensel olan ikon sayısı çok az

Herkesin ortak okuduğu simge listesi kısadır: büyüteç arama, ev anasayfa, çöp kutusu silme, yazıcı çıktı, artı ekleme. Bu listenin dışına çıktığınız anda anlam öğrenilmiş olur, yani kullanıcı o simgeyi sizin ürününüzde ne yaptığını görerek öğrenir. Roket, sihirli değnek, elmas, pusula gibi simgeler hiçbir şeyi hatırlatmaz; sadece güzel durur.

En çok yük bindirilen simge yıldızdır. Aynı üründe yıldız bazen favoriye ekler, bazen puan verir, bazen “yeni” rozeti olur, bazen şablonu işaretler. Dört ayrı işi tek simgeyle anlatan bir arayüz, kullanıcıya her ekranda yeniden tahmin ettirir. Bir simgenin ürün içinde tek bir karşılığı olsun; ikinci bir işi varsa o iş başka bir simgeyi hak ediyordur.

“Yer kazandırır” iddiası etiketle birlikte çöküyor

İkon savunmasının iki bacağı vardır ve bu iki bacak birbirini deviriyor. Önce ikon ekran alanı kazandırdığı için önerilir, hemen ardından “yanına mutlaka etiket koyun” denir. Etiketi koyduğunuzda kazandığınız alan geri gider. Geriye kalan asıl fayda başka: tanıdık bir simge, metni okumadan hedefi bulmayı hızlandırır. Bu da ancak kullanıcı aynı düğmeye günde onlarca kez basıyorsa işe yarar.

Karar bu yüzden basit. Editör araç çubuğu, tablo satırındaki düzenle düğmesi, oynatma kontrolleri gibi yüksek tekrarlı yerlerde ikon tek başına durabilir. Nadiren kullanılan, geri alınamayan ya da para harcatan işlemlerde etiket zorunludur. Kullanıcının yılda iki kez bastığı bir düğmede simge tanıma pratiği hiç oluşmaz.

Dokunma hedefi ayrı bir hesap

Apple kendi arayüz kılavuzunda 44×44 pt, Material 48dp alt sınırını verir. 16 piksellik bir simgeyi boşluksuz yerleştirdiğinizde hedef bu sınırın epey altında kalır ve parmakla ıskalanır. Etiketi düğmenin içine aldığınızda tıklanabilir alan kendiliğinden büyür, yani etiket erişilebilirlik tarafında da çalışır.

İkon tek başına erişilebilir değildir

Ekran okuyucu simgeyi görmez. İçinde yalnız bir SVG olan düğme “düğme” diye okunur, o kadar. Çözüm tarayıcı eklentisinde değil, işaretlemenin kendisinde:

<button aria-label="Sil"> <svg aria-hidden="true" ...></svg> </button>

Görünür etiket varsa aria-label gerekmez, simgeyi aria-hidden ile gizlemek yeter. title özniteliği bu işi görmez: dokunmatik cihazda hiç açılmaz, klavyeyle gezinende güvenilmezdir. Bu iki satır, erişilebilirlik vaat eden üçüncü parti betiklerin ikon tarafında yapacağı işin tamamını yapar (o betiklerin çoğunu gereksiz buluyorum).

Beş kişilik tanıma testi

İkonun anlaşılır olup olmadığı tartışmayla değil ölçmeyle biter ve ölçmek ucuzdur. Simgeyi bağlamından çıkarıp tek başına gösterin, “bu düğme ne yapar” diye sorun, cevabı yazdırın. Beş kişiden üçü kaçırıyorsa simge yanlıştır, kullanıcı değil.

İkinci tur için işlev adlarını bir liste hâlinde verip eşleştirin; hangi iki simgenin birbirine karıştığı burada ortaya çıkar. Testi kendi ekibinizle yapmayın. Arayüzü aylardır gören bir geliştirici simgeyi tanımaz, hatırlar.

Set tutarlılığı pazarlık konusu değil

Bir ikon setini ayıran şey çizgi kalınlığı, çizim ızgarası ve köşe yuvarlaklığıdır. İki farklı setten simge karıştırdığınızda bunu kullanıcı adlandıramaz ama fark eder; arayüz derme çatma görünür. Tek set seçin ve dışına çıkmayın.

Sette olmayan bir simgeye ihtiyaç duyduğunuzda iki yolunuz var: aynı ızgarada kendiniz çizmek, ya da o işlemi simgesiz bırakıp metin düğmesi yapmak. İkincisi daha sık doğru cevaptır. Anlatması zor bir işlemi simgeye sıkıştırmaya çalışmak, o işlemin zaten simgeye uygun olmadığının işaretidir.