Warum Textbeschriftungen nötig sind (warum Icons allein nicht ausreichen)

• Befürwortet Textbeschriftungen (text labels) nachdrücklich
• Moderne Interfaces sind mit Icons oft überladen, sodass Nutzer zu viele kognitive Ressourcen dafür aufwenden müssen, deren Bedeutung zu entschlüsseln
• Dadurch werden Arbeitsabläufe langsamer, und ineffiziente Nutzungserfahrungen wiederholen sich
• Bedeutung allein über Icons zu vermitteln ist nicht einfach, und die meisten Icons sind ohne Textbeschriftung unvollständig

# Probleme, die Icons verursachen

1. Die meisten Icons vermitteln ihre Bedeutung nicht sofort eindeutig

• Es wird oft behauptet, ein „gutes Icon“ könne seine Bedeutung ausreichend transportieren, aber in der Praxis ist mit der Interpretation jedes Icons eine kognitive Belastung verbunden
• Zum Beispiel bedeutet ein „Mülleimer-Icon“ relativ klar Löschen (Delete), aber ein „Bleistift-Icon“ ist mehrdeutig
  • Schreiben? Bearbeiten? Zeichnen? Erstellen?
• Kontext kann die Bedeutung ergänzen, erfordert aber ebenfalls zusätzliche kognitive Anstrengung

2. Je mehr Icons es in einem Interface gibt, desto schwieriger wird die Orientierung

• Mit wachsender Zahl an Funktionen wird es schwieriger, diese allein durch Icons voneinander zu unterscheiden
• Bis zu 5–7 Funktionen lassen sich noch per Icon unterscheiden, aber bei 15–20 steigt die Verwechslungsgefahr zwischen ähnlichen Icons für Speichern/Teilen/Bearbeiten/Erstellen stark an
• Wenn sich Icons mit ähnlichen Funktionen zu wenig unterscheiden, leidet die Lesbarkeit

3. Icons haben oft nur innerhalb eines bestimmten Interfaces Bedeutung

• Nutzer bewegen sich zwischen verschiedenen Interface-Umgebungen wie Webbrowsern, Betriebssystemen und Apps
• Ein Icon, das in einem Interface verwendet wird, kann in einer anderen Umgebung eine ganz andere Bedeutung haben
• Besonders bei standardisierten Icon-Sets wie Google Material Design nimmt die Verwirrung zu, wenn dasselbe Icon mit unterschiedlicher Bedeutung verwendet wird

# Vorteile von Textbeschriftungen im Interface

1. Text allein ist oft effizienter

• Unser Gehirn ist darauf optimiert, Wörter schnell zu erkennen
  • Vertraute Wörter können sofort verstanden werden, ohne die Buchstaben einzeln zu lesen
  • Die meisten Icons hingegen erfordern mehr Aufwand, weil erst eine neue visuelle Sprache erlernt werden muss
• Eine Textliste kann einfach von oben nach unten gelesen werden, während bei reinen Icons horizontal und vertikal im Wechsel gescannt werden muss
  • Gerade auf Mobilgeräten führt eine Reihe ähnlich aussehender Icons leicht zu visueller Verwirrung

2. Text macht Icons effizienter

• Wenn Textbeschriftungen ergänzt werden:
  • wird die Bedeutung der Icons klarer und die Orientierung schneller
  • sinkt für Designer die Last, sämtliche Bedeutung nur über ein einzelnes Icon transportieren zu müssen

3. Icons können in textzentrierten Interfaces ein wichtiges visuelles Element sein

• Icons können als visuelle Anker (visual anchor) dienen und bieten in Kombination mit Text das effektivste Interface

Das Gleichgewicht zwischen Icons und Text finden

• Bei der Entscheidung zwischen Icons und Textbeschriftungen sollte die kognitive Belastung der Nutzer berücksichtigt werden
• Eine UI, die nur aus Icons besteht, mag anfangs aufgeräumt wirken, kann aber ineffizient sein, weil sie Nutzern die Last der Interpretation aufbürdet
• Die Suche nach dem perfekten Icon ist nicht die Lösung
  → Wichtig ist die Kombination aus Icons und Text, um die bestmögliche Erfahrung zu bieten.

# Zentrale Prinzipien für optimales UI-Design

1. Nicht versuchen, alles nur mit Icons auszudrücken
2. Das Hinzufügen von Textbeschriftungen verbessert Lesbarkeit und Barrierefreiheit
3. Icons und Text stehen nicht in Konkurrenz, sondern ergänzen sich gegenseitig
4. Berücksichtigen, wie eine App oder Website im gesamten digitalen Umfeld genutzt wird
5. Interfaces so gestalten, dass Nutzer sie nicht „interpretieren“, sondern „sofort verstehen“

Fazit: Nicht eine „gut aussehende UI“, sondern eine „leicht verständliche UI“ ist wichtig

• Wann immer die Versuchung entsteht, neue Icons zu entwerfen oder Textbeschriftungen zu entfernen, sollte man noch einmal darüber nachdenken.
• Ein wirklich aufgeräumtes Design ist nicht etwas, das „einfach aussieht“, sondern etwas, das „leicht zu verstehen“ ist.

[ndrgrd]

Ich denke, dass man Icons nur dann verwenden sollte, wenn sie auf einen Blick verständlich sind, und dass es unbedingt eine Funktion geben sollte, mit der sich per langem Drücken ein Hilfstext anzeigen lässt.

[nemorize]

Wir beschränken Situationen, in denen nur Icons verwendet werden, extrem stark.

• wenn ein eindeutiges Icon an einer eindeutigen Position platziert wird (ChevronLeft oben links, Vertical3Dots oben rechts)
• wenn für die Anzeige des betreffenden Icons eine Nutzerinteraktion erforderlich ist und im selben Interaktionsbereich dasselbe Icon zusammen mit einer Beschriftung angezeigt wird (beim Deaktivieren von Benachrichtigungen das BellOff-Icon für das entsprechende Element)
• wenn unmittelbar danach eindeutige numerische Daten folgen (Gefällt mir, Gefällt mir nicht, Zeit)
• wenn eine Funktion vorhanden ist, die den Zweck des Icons oder der Icon-Gruppe durch Tooltipps, Tutorials usw. erklärt
  ** wenn Kund:innen es verlangen lol;

[GN⁺]

Hacker-News-Kommentare

• Ausgewogenheit ist wichtig. Wenn ein Menü einige Icons enthält, dienen sie als Ankerpunkte und geben dem Menü eine eigene „Form“.
  • Wenn alle Menüpunkte Icons haben, wirkt es verwirrend.
• UI-Forschung zeigt seit den 1990er Jahren, dass Labels für die Erkennung besser sind als Icons.
  • Heute gibt es zwar bessere Display-Technologien, aber wegen Designtrends und träger Lokalisierung gibt es eine Tendenz, Text zu entfernen.
  • Selbst wenn es Usability-Richtlinien gibt, werden sie ignoriert. UI-Design ist zu einem gefühlsgetriebenen Beruf geworden.
  • Zum Beispiel schreiben Apples Human Interface Guidelines für iOS ausdrücklich vor, dass die Tab Bar Icons und Textlabels enthalten soll.
  • Viele Designer lesen diese Richtlinien nicht.
• Es gibt die Vermutung, dass viele Studien in Europa und den USA unterschiedlich reproduziert würden.
  • Verkehrsschilder in den USA bestehen überwiegend aus Text.
  • Europa nutzt wegen seiner vielen kleinen Länder Piktogramme.
  • Europäer erfassen die Bedeutung von Piktogrammen besser als Amerikaner.
• Der Großteil der Welt ist schon vor langer Zeit zu Lautschriften übergegangen.
  • Lautschriften sind Piktogrammen überlegen.
  • Icons sind optional, Text ist Pflicht.
• Wenn man mit einem bestimmten Thema beschäftigt ist, taucht es oft am nächsten Tag auf HN auf.
  • Ich habe für meinen 27 Monate alten Sohn eine kleine Zeichen-App gebaut und zunächst nur Icons verwendet, aber das hat ihn verwirrt.
  • Als ich Textlabels hinzugefügt habe, wurde die visuelle Verwirrung geringer.
• Icons sind in Ordnung, aber ohne Tooltips beim Hover oder Labels im Stil von Alt-Text fühlt es sich frustrierend an.
  • Das Erlernen neuer Software wird langsamer, und man muss nach Dokumentation oder Video-Tutorials suchen.
• UX Myth — der Mythos, dass Icons die Usability verbessern.
• Ich habe Icons und ihre Verbreitung schon immer gehasst.
  • Ich setze mich für Text ein, aber das kommt nicht gut an.
  • Viele Leute stellen die neue Hypothese auf, dass Leser langsam seien.
  • Es dauert ungefähr 1 Sekunde, alle Labels eines Menüs zu lesen.
  • Es gibt keinen Fall, in dem das Interpretieren von Text langsamer ist als das von Icons.
  • Ich bin zu der Einsicht gekommen, dass man langsame Leser berücksichtigen sollte.
• Ich möchte Text gegen Leere verteidigen.
  • Textlabels sind klein und haben genügend Raum um sich herum.
  • Man kann Text hervorheben und das visuelle Scannen erleichtern.
  • Die ultimative Lösung ist, Nutzern zu ermöglichen, die Fehler der Designer zu ignorieren.
  • Es wird betont, dass Texterkennung leichter ist als Icon-Erkennung.
  • Icons brauchen weniger Platz und sind effizienter.
• Ich habe den Ausdruck gehört: „Ein Bild ist tausend Worte wert, aber oft reicht eines.“