İkonlar Ne Zaman İşe Yarar, Ne Zaman Kullanıcıyı Yavaşlatır

Bir ikonun anlaşılıp anlaşılmadığını tasarımcı değil, kullanıcının duraksaması söyler. Arayüzlerde onlarca sembol dolaşıyor ama öğrenmeye ihtiyaç duymadan tanınan sembol sayısı bir elin parmaklarını zor geçiyor. Geri kalanı kullanıcı için kısayol değil, çözülmesi gereken küçük bir bilmece.

Yer kazandırma iddiası kendi kendini yiyor

İkonların savunmasında iki gerekçe hep yan yana anılır: yer kazandırır ve dilden bağımsızdır. Sonra aynı metin, anlaşılmayan ikonun yanına açıklayıcı bir etiket konmasını önerir. Etiketi koyduğunuz anda ikon yer kazandırmıyor, düğmeyi genişletiyor; dilden bağımsızlık da bitiyor, çünkü o etiket çevrilecek. Geriye tek bir gerçek fayda kalıyor, tanıma hızı.

Karar bu yüzden basit bir yere iniyor. Sembol tek başına ayakta durabiliyorsa avantaj gerçektir. Duramıyorsa ikon dekordur, işi metin yapar. Dekor olması kötü bir şey değil, ama maliyetini bilerek ödeyin: her ikon bir dosya, bir hizalama sorunu ve tasarım sisteminde bakılacak bir kalem demek.

"Evrensel" listesi sanıldığından kısa

Büyüteç, ev, çarpı, çöp kutusu, oynatma üçgeni. Bu beşi evrensel değil, sadece yeterince tekrar edilmiş olduğu için ezberlenmiş. Listeyi uzatmaya çalışınca zemin hemen kayıyor: üç çizgi bir üründe ana menüyü açar, diğerinde satır sürükleme tutamacıdır. Yıldız bir yerde favori, başka yerde puanlama. Kalp beğeni mi, sonra okumak üzere kaydetme mi, siteye göre değişir.

Disket ikonu bu işin en dürüst örneği. Kaydetmeyi hâlâ iyi anlatıyor ama disketi hiç görmemiş bir kuşak var ve onlar için sembol bir nesneye değil, yalnızca alışkanlığa dayanıyor. Yani ikonun gücü çizimin kendisinden değil, kullanıcının o çizimi kaç kez gördüğünden geliyor. Yeni bir işlev icat ettiyseniz, o işlevin evrensel ikonu da yoktur.

Etiket görünür kalsın, hover'a saklanmasın

Üzerine gelince açılan ipucu dokunmatik ekranda yoktur. Parmak "hover" edemez, tıklar; kullanıcı ikonun ne yaptığını öğrenmek için onu denemek zorunda kalır. Geri alınamayan bir işlemse deneme yapmaz, o düğmeyi hiç kullanmaz.

Gezinme çubuğu bunun en kritik yeri. Alt navigasyonda dört ikon yan yana duruyorsa etiketleri kalıcı yazın; kazanacağınız birkaç piksel, kullanıcının yanlış sekmeye girip geri dönmesinden ucuz değil. Bir yönetim panelinde arşivleme işlevini kapaklı kutu ikonuyla vermiştik, kullanıcıların bir bölümü onu silme sandığı için işlevi hiç kullanmadı; sorunun ikonda olduğunu destek sorularından anladık.

Kodda ikonun karşılığı var mı

Görsel etiket koymadığınız her ikon, ekran okuyucu için ya boş bir düğme ya da anlamsız bir işarettir. Yanında görünür metin varsa ikon dekoratiftir ve gizlenmesi gerekir:

<button><svg aria-hidden="true" focusable="false">…</svg> Arşivle</button>

Yalnızca ikondan ibaret bir düğmede ise metin, erişilebilir isim olarak verilir:

<button aria-label="Arşivle"><svg aria-hidden="true">…</svg></button>

title özniteliğine güvenmeyin; kimi tarayıcı ve yardımcı teknoloji birleşiminde hiç okunmaz, dokunmatikte zaten görünmez. Aynı sebeple ikonları yazı tipi olarak yüklemek yerine satır içi SVG tercih edin: font yüklenemediğinde kullanıcının karşısına kutucuk çıkar, SVG'de böyle bir kırılma yok ve rengi currentColor ile devralması da tek satır.

Beş saniye kuralı ne söyler, ne söylemez

Bir işlev için ikon bulmak beş saniyeden uzun sürüyorsa iyi bir ikon çıkmaz, denir. Kulağa hoş geliyor ama ölçtüğü şey tasarımcının çağrışım hızı, kullanıcının anlama hızı değil. Bu ikisi çoğu zaman aynı yöne gitmez: zihninizde apaçık duran metafor, o alan bilgisine sahip olmayan birinde hiçbir kapı açmayabilir.

Daha güvenilir olanı tersten testtir. Beş kişiye ikonu etiketsiz gösterip "bu düğme ne yapar" diye sorun, sonra aynı kişilere işlevi söyleyip ekrandaki hangi ikonun o işlev olduğunu seçtirin. İkinci soruda tereddüt yoksa ikon çalışıyordur. Beş kişilik bir tur için ne araştırma bütçesi ne de laboratuvar gerekir, yarım saatlik iştir.

Aynı ikon her ekranda aynı işi görmez

Mobilde ikon az sayıda öğe arasında durur ve boyutu dokunma hedefi gereği zaten büyüktür, bu yüzden fark edilir. Aynı ikonu masaüstünde geniş bir araç çubuğuna koyduğunuzda çevresindeki içerik onu yutar. Masaüstünde asıl işlevleri metinli düğme olarak vermek, ikonu ise yalnızca sık kullanılan kısayollarda tutmak daha iyi sonuç veriyor.

Yani ikon setini bir kez tasarlayıp iki platforma da olduğu gibi taşımak, tasarruf gibi görünen ama sonradan destek maliyeti olarak geri dönen bir karar. Aynı sembolü kullanın, ama etiket ve boyut kararını her platformda yeniden verin.