İkonlar Kendi Başına Anlaşılır Değil: İkon Tasarımı Notları

Bir ikonun anlaşıldığını nereden biliyoruz? Çoğu zaman bilmiyoruz. Onu çizen kişi anlamı baştan biliyor, kullanıcı ise tahmin ediyor ve doğru tahmin ettiğinde de genelde ikonu değil, o ikonu daha önce gördüğü uygulamayı hatırlıyor. Aşağıdaki notlar hangi sembole güvenebileceğinize ve bir ikonun arayüzde kodda ne kadar yer kapladığına dair.

Gerçekten evrensel olan kaç ikon var?

Büyüteç arama demektir, çöp kutusu silme, ev ana sayfa, yazıcı yazdırma. Liste sandığımız kadar uzamıyor. Bunların dışındaki neredeyse her sembol öğrenilmiş bir alışkanlık: kalp mi yıldız mı, beğenme mi sonra oku listesi mi, üç noktanın altında menü mü paylaşma mı var.

Peki ya ürününüze özgü bir aksiyon varsa? “Teklifi karşılaştır” ya da “stoktan rezerve et” gibi bir işin evrensel simgesi yok, olamaz da. Böyle yerlerde yeni bir metafor icat etmek yerine kelimeyi yazmak daha hızlı çalışır.

Bu konuda sık rastlanan bir çelişki de var: aynı tavsiye listesi hem “genel kabul görmüş simgelerin dışına çıkma” der, hem “tasarım trendlerini takip et”. Trend dediğimiz şey tam olarak yeni ve henüz öğrenilmemiş simgeler üretiyor. İkisi birden doğru olamaz. İkonun işi anlaşılmaksa trend ikinci sırada kalır.

Etiket mi, ikonun kendisi mi?

Etiketli ikonu, ikonun tek başına sezgisel olduğuna güvenmekten daha güvenilir bulurum. Masaüstünde saf ikonun bir emniyet ağı var: imleci üzerine götüren kullanıcı tooltip görür, yanlış tahminini basmadan düzeltir. Dokunmatikte o ağ yok. Hover diye bir olay olmadığı için mobilde ikon ne anlatıyorsa kullanıcı onunla kalır.

Yerden kazanmak için etiketi atmak cazip görünüyor. Alt navigasyondaki beş ikonun altına yazılan kısa kelimeler ise, kullanıcının yanlış sekmeye girip geri dönmesinden çok daha az yer kaplıyor.

Dokunma alanı, ikonun boyutu değildir

Arayüzde 24 piksellik bir ikon görüyorsanız bu, dokunulabilir alanın da 24 piksel olduğu anlamına gelmez, gelmemeli. WCAG 2.2 asgari hedef boyutunu 24×24 CSS pikselinde tutuyor (2.5.8), gelişmiş kriter 44×44 istiyor (2.5.5). Apple kendi kılavuzunda 44×44 pt, Material 48×48 dp diyor. Pratikte ikon 24 kalır, ona basılan düğme büyür:

.icon-btn { inline-size: 44px; block-size: 44px; display: grid; place-items: center; padding: 0; border: 0; background: none; } .icon-btn svg { inline-size: 24px; block-size: 24px; }

Bunu üç satır CSS ile çözersin, ayrı bir bileşen kütüphanesine gerek yok. Yan yana duran ikon düğmelerinde araya en az 8 piksel boşluk bırakmak da aynı işin parçası; hedefler büyüdükçe birbirine değmeye başlar ve yanlış dokunma oranı artar.

Her ikona alt metin yazmayın

“İkonlara mutlaka alternatif metin ekleyin” tavsiyesi yarım. Ekran okuyucu için belirleyici olan ikonun yanında yazı olup olmaması.

• Metin etiketiyle birlikte duran ikon süstür: aria-hidden="true" alır, <img> ise alt="". Aksi halde kullanıcı aynı şeyi iki kez duyar.
• Yalnız başına duran ikon düğmesinin anlamı düğmeye yazılır: <button aria-label="Sil">.
• Metin resmin adı değil, aksiyonun adıdır. alt="çöp kutusu ikonu" kullanıcıya hiçbir şey söylemez, alt="Sil" söyler.

Ekran okuyucusu olmayan bir ekipte bu farkı görmenin en kolay yolu sayfayı klavyeyle dolaşmak: sekme sekme ilerlerken odaklanılan her düğmenin adı okunabiliyor mu, yoksa sıra “buton, buton, buton” diye mi geçiyor?

SVG’nin asıl avantajı ölçeklenmesi değil

Netlik tek başına yeterli bir gerekçe, ama SVG’yi kazançlı kılan şey ikonun stile bağlanabilmesi. fill="currentColor" yazdığınız anda ikon metnin rengini alır; koyu temada, hover’da, devre dışı durumda ayrı dosya üretmeniz gerekmez. PNG’de her durum için yeni bir görsel ve yeni bir istek demek bu.

Logo ve menü ikonu SVG olsun. PNG’yi fotoğrafik, gerçekten raster olan görseller için saklayın. Onlarca ikonu tek tek inline gömmek yerine bir sprite dosyasına toplamak, HTML’i de şişirmeden aynı esnekliği verir.

İkonu test etmenin en ucuz yolu

Ayrı bir araç kurmadan yapabileceğiniz bir şey var: ikonu bağlamından koparıp beş kişiye tek tek gösterin, “buna basınca ne olur” diye sorun. Beş kişiden ikisi yanlış cevap veriyorsa o ikon yanına bir kelime istiyor.

İki testi daha aynı anda yapın: ikonu 16 piksele düşürüp bakın, detay kalabalığı ilk orada dökülür. Sonra gri tonlamaya çevirin; anlam yalnızca renkten geliyorsa renk körü kullanıcı için o ikon zaten yok.