12 puan yazan GN⁺ 2025-02-24 | 3 yorum | WhatsApp'ta paylaş
  • Metin etiketlerini (text labels) güçlü biçimde savunuyor
  • Modern arayüzlerde ikonlar aşırı fazla kullanılıyor ve bu da kullanıcıların ikonların anlamını yorumlamak için çok fazla bilişsel kaynak harcamasına neden oluyor
  • Bunun sonucunda iş hızı yavaşlıyor ve verimsiz deneyim tekrar tekrar yaşanıyor
  • Anlamı yalnızca ikonlarla aktarmak kolay değil ve çoğu ikon metin etiketi olmadan eksik kalıyor

# İkonların yarattığı sorunlar

1. Çoğu ikon anında net bir anlam iletemez

  • “İyi bir ikon”un anlamı yeterince aktarabileceği iddia edilse de, pratikte herhangi bir ikonu yorumlamak bilişsel yük getirir
  • Örneğin, "çöp kutusu ikonu" nispeten açık biçimde Sil(Delete) anlamına gelirken, "kalem ikonu" belirsizdir
    • Yazma? Düzenleme? Çizme? Oluşturma?
  • Bağlam(Context) anlamı tamamlayabilir, ancak bu da yine ek bilişsel yük gerektirir

2. Arayüzdeki ikon sayısı arttıkça gezinmek zorlaşır

  • İşlev sayısı arttıkça yalnızca ikonlarla ayrım yapmak zorlaşır.
  • 5-7 işleve kadar ikonlarla ayırt etmek mümkün olabilir, ancak sayı 15-20 olduğunda kaydet/paylaş/düzenle/oluştur gibi benzer ikonların birbiriyle karışma ihtimali büyür.
  • Benzer işlevlere sahip ikonlar arasındaki ayırt edicilik zayıfladıkça okunabilirlik düşer.

3. İkonların anlamı çoğu zaman yalnızca belirli bir arayüz içinde geçerlidir

  • Kullanıcılar farklı arayüz ortamları (web tarayıcısı, işletim sistemi, uygulamalar vb.) arasında geçiş yaparak çalışmak zorundadır
  • Bir arayüzde kullanılan bir ikon, başka bir ortamda tamamen farklı bir anlama sahip olabilir
  • Özellikle standart ikon setleri (Google Material Design vb.) kullanıldığında, aynı ikon farklı anlamlarda kullanılırsa kafa karışıklığı daha da artar

# Metin etiketlerinin arayüze sağladığı faydalar

1. Yalnızca metin bile daha verimlidir

  • Beynimiz kelimeleri hızlı tanıyacak şekilde optimize edilmiştir.
    • Tanıdık kelimeler harfleri tek tek okumadan anında anlaşılabilir
    • Buna karşılık çoğu ikon, yeni bir görsel dil öğrenmeyi gerektirdiği için daha fazla çaba ister
  • Metin listeleri yukarıdan aşağıya okunabilirken, yalnızca ikon olduğunda yatay ve dikey olarak dönüşümlü tarama yapmak gerekir.
    • Özellikle mobil ortamda benzer görünümlü ikonlar art arda sıralandığında görsel karmaşa büyür.

2. Metin, ikonları daha verimli hâle getirir

  • Metin etiketi eklendiğinde:
    • İkonun anlamı daha netleşir ve gezinme hızlanır
    • Tasarımcının tüm anlamı tek bir ikonla aktarma yükü azalır.

3. İkonlar, metin merkezli arayüzlerde önemli bir görsel unsur olabilir

  • İkonlar görsel çıpa (visual anchor) görevi görür ve metinle birleştiğinde en etkili arayüzü sunar

İkon ve metin arasında denge kurmak

  • İkonlar ile metin etiketleri arasında seçim yaparken, kullanıcının bilişsel yükü dikkate alınmalıdır.
  • Yalnızca ikonlardan oluşan bir UI, ilk bakışta temiz görünebilir; ancak kullanıcıya yorumlama yükü bindirerek verimsiz olabilir
  • Mükemmel ikonu bulmak çözüm değildir.
    Önemli olan, ikon ve metni birleştirerek en iyi deneyimi sunmaktır.

# En iyi UI tasarımı için temel ilkeler

  1. Her şeyi yalnızca ikonlarla ifade etmeye çalışma.
  2. Metin etiketleri eklemek okunabilirliği ve erişilebilirliği artırır.
  3. İkonlar ile metin rakip değil, birbirini tamamlayan unsurlardır.
  4. Uygulamanın ya da web sitesinin genel dijital ortam içinde nasıl kullanıldığını hesaba kat.
  5. Arayüzü, kullanıcının onu ‘yorumlamasını’ değil, ‘anında anlamasını’ sağlayacak şekilde tasarla.

Sonuç: Önemli olan "güzel görünen UI" değil, "anlaşılması kolay UI"dır

  • Yeni ikonlar üretme ya da metin etiketlerini kaldırma isteği doğduğunda, bunu bir kez daha düşünelim.
  • Gerçekten temiz bir tasarım, "basit görünmek" değil, "kolay anlaşılır olmak"tır.

3 yorum

 
ndrgrd 2025-02-26

İkonlar yalnızca tek bakışta anlaşılabildiği durumlarda kullanılmalı; ayrıca uzun basıldığında yardımcı metni gösteren bir özelliğin de mutlaka gerekli olduğu görünüyor.

 
nemorize 2025-02-24

Yalnızca ikon kullanılan durumları son derece sınırlıyoruz.

  • Açıkça anlaşılır bir ikonu, açıkça anlaşılır bir konuma yerleştirdiğimiz durumlar (ChevronLeft sol üstte, Vertical3Dots sağ üstte)
  • İlgili ikonun görüntülenmesi için kullanıcının etkileşimi gerekiyorsa ve aynı etkileşim alanında aynı ikon etiketle birlikte gösteriliyorsa (bildirimleri kapatma eyleminde ilgili öğede BellOff ikonu)
  • Ardından açıkça anlaşılır sayısal veriler geliyorsa (beğeni, beğenmeme, zaman)
  • İlgili ikonun veya ikon grubunun amacını açıklayan tooltip, eğitim vb. üzerinden ikonun kullanımını açıklayan bir işlev içeriyorsa
    ** Müşteri özellikle istiyorsa haha;
 
GN⁺ 2025-02-24
Hacker News görüşleri
  • Denge önemli. Menüde bazı ikonlar olursa bunlar sabit referans noktaları hâline gelir ve menüye kendine özgü bir "şekil" kazandırır
    • Tüm menü öğelerinde ikon olması kafa karıştırıcıdır
  • 1990'lardan beri UI araştırmaları, etiketlerin tanınabilirlik açısından ikonlardan daha iyi olduğunu gösteriyor
    • Günümüzde ekran teknolojileri daha iyi olsa da, tasarım trendleri ve yerelleştirme konusundaki tembellik nedeniyle metni kaldırma eğilimi var
    • Kullanılabilirlik yönergeleri olsa bile göz ardı ediliyor. Çünkü UI tasarımı sezgi temelli bir mesleğe dönüştü
    • Örneğin Apple'ın iOS Human Interface Guidelines belgesi, sekme çubuğunda ikonlar ve metin etiketlerinin birlikte bulunması gerektiğini açıkça belirtiyor
    • Birçok tasarımcı bu yönergeleri okumuyor
  • Pek çok araştırmanın Avrupa ve ABD'de farklı şekilde yeniden üretileceği yönünde bir tahmin var
    • ABD'deki yol işaretleri çoğunlukla metinden oluşur
    • Avrupa'da çok sayıda küçük ülke bulunduğu için piktogramlar kullanılır
    • Avrupalılar, Amerikalılara kıyasla piktogramlardan anlam çıkarmada daha başarılıdır
  • Dünyanın büyük kısmı çok uzun zaman önce fonetik yazıya geçti
    • Fonetik yazı, piktogramlardan üstündür
    • İkonlar isteğe bağlıdır, metin ise zorunludur
  • Belirli bir konuyla meşgul olduğumda, bunun ertesi gün HN'de karşıma çıkması sık oluyor
    • 27 aylık oğlum için küçük bir çizim uygulaması yaptım; başlangıçta sadece ikon kullandım ama bu onda kafa karışıklığı yarattı
    • Metin etiketleri ekleyince görsel karmaşa azaldı
  • İkonlar sorun değil ama üzerine gelince tooltip ya da alternatif metin tarzı bir etiket yoksa bu durum hayal kırıklığı yaratıyor
    • Yeni bir yazılımı öğrenmek yavaşlıyor ve belge ya da video eğitimleri aramak gerekiyor
  • UX Myth — ikonların kullanılabilirliği artırdığı efsanesi
  • İkonlardan ve bunların yaygınlaşmasından hep nefret ettim
    • Metni savunuyorum ama bu pek iyi karşılanmıyor
    • Birçok kişi, insanların yavaş okuyucu olduğu yönünde yeni bir hipotez ortaya atıyor
    • Menüdeki tüm etiketleri okumak yaklaşık 1 saniye sürer
    • Metni yorumlamak, ikonları yorumlamaktan daha hızlı olmadığı bir durum yoktur
    • Yavaş okurları dikkate almak gerektiği konusunda hemfikir olmaya başladım
  • Metni boşluk tarafından silikleştirilmekten korumak istiyorum
    • Metin etiketleri küçük ve etraflarında yeterli alan var
    • Metni öne çıkarabilir ve görsel taramayı kolaylaştırabilirsiniz
    • Nihai çözüm, kullanıcıların tasarımcıların hatalarını görmezden gelebilmesini sağlamaktır
    • Metin tanımanın, ikon tanımaktan daha kolay olduğunu vurguluyor
    • İkonlar daha az yer kaplar ve daha verimlidir
  • "Bir resim bin kelime eder ama çoğu zaman biri yeterlidir" sözünü duydum