Wie Icons ohne Label die Usability beeinträchtigen

Icons sind eine tolle Möglichkeit ein Interface oder eine Webseite aufzuwerten. Richtig eingesetzt machen sie Navigationen, Aktionen oder Objekte leichter verständlich. Zusätzlich lockern sie die Optik auf und sparen Platz (was gerade im mobilen Kontext von Vorteil ist). Doch trotz der vielen Vorteile können sich Icons auch negativ auf die Usability auswirken. Was du bei ihrem Einsatz beachten solltest, erfährst du hier.

Wofür Icons eingesetzt werden

Icons sollen in erster Linie eine Bedeutung kommunizieren. Sie sind eine visuelle Repräsentation eines Objektes, einer Aktion oder Idee. Diese funktioniert aber nur, wenn sie dem User sofort verständlich ist. Andernfalls sind Icons nicht nur verwirrende, frustrierende Dekoration, sondern visuelles Rauschen, das Menschen von der Erfüllung ihrer Aufgabe abhält.

Die Vorteile von Icons

  • Icons sind normalerweise groß genug, um sie sowohl mit der Maus als auch per Touch-Geste optimal bedienen zu können. Wohingegen Text zwar groß genug zum Lesen, aber zu klein zum Antippen sein kann.
  • Außerdem sind sie so platzsparend, dass sie auf relativ wenig Platz eingesetzt werden können.
  • Sie haben einen hohen Wiedererkennungswert, sofern sie gut gestaltet und bereits zum Standard geworden sind.
  • Icons müssen nicht übersetzt werden, allerdings nur unter Berücksichtigung kultureller Unterschiede (Briefkästen können je nach Land sehr unterschiedlich aussehen, Briefumschläge jedoch sehen gleich aus und eignen sich daher besser für E-Mail-Programme).
  • Sie können ein Design ästhetisch aufwerten.

Der Nachteil – nur wenige Icons sind universell

Tatsächlich gibt es nur sehr wenig universell verständliche Icons. Zum Standard gewordene und international anerkannte Icons sind z. B. das X zum Schließen eines Fensters, das Start- „>” und das Pausensymbol „II” für Audio und Video und das Home- oder Drucken-Icon. Abgesehen von diesen Beispielen sind Icons für Nutzer oft uneindeutig, da sie nicht in allen Interfaces dieselbe Bedeutung haben. Selbst die Lupe kann sowohl „Suchen” als auch „Vergrößern” bedeuten. Da diese Standardisierung fehlt, können sich User nicht darauf verlassen, dass ein Icon immer dieselbe Funktionalität hat. Wie sich in Usability-Tests gezeigt hat, vermeiden Menschen es auf Icons zu klicken, die sie nicht verstehen. Die Funktionalität geht also komplett verloren.

Das Hamburger Icon

Ein sehr gutes Beispiel für ein Icon, das sich als Standard etablieren will, ist das aus drei Linien bestehende Hamburger Icon. Es wird hauptsächlich für Navigationsmenüs im mobilen Kontext genutzt. Dies ist jedoch nicht immer der Fall. Manchmal repräsentiert das Icon (oder ein sehr ähnliches) eine Liste, um z. B. zwischen einer Listen- und einer Kachelansicht zu wechseln. 

Screenshot von Apple Notizen: Listen-Icon sieht aus wie Hamburger-Icon
Abb.: 1: Möglichkeit zwischen Listen- und Kachelansicht zu wechseln (oben links) bei Apple Notizen
Abb.: 2: Möglichkeit zwischen Listen- und Kachelansicht zu wechseln (oben links) bei Apple Notizen

Bei Outlook und Gmail kann man mit dem Klick auf das Hamburger-Icon ein seitliches Menü verkleinern. 

Screenshot von Outlook mit Hamburger-Icon, um Menü einzuklappen.
Abb.: 3: Outlook für den Browser mit Hamburger-Icon oben links.
Screenshot von Gmail mit Hamburger-Icon, um Menü einzuklappen.
Abb.: 4: Gmail mit Hamburger-Icon oben links. Hier in der initialen Ansicht.
Screenshot von Gmail mit Hamburger-Icon: Menü eingeklappt.
Abb.: 5: Gmail mit Hamburger-Icon oben links. Hier die eingeklappte Ansicht.

Zudem ist das Icon eher unter jüngeren Nutzern bekannt. 

Icons brauchen ein Textlabel

Um die Bedeutung von Icons im jeweiligen Kontext zu verdeutlichen, sollte man sie mit einem Label beschriften. Dadurch kann die Usability stark verbessert werden. Eine Studie hat ergeben, dass 88 % der Probanden die Funktionalität bei Icons mit Label korrekt vorhergesagt haben. Bei unbeschrifteten, aber bekannten Icons gelang dies nur noch 60 % und bei App-spezifischen Icons nur noch 34 Prozent der Testpersonen (https://www.usertesting.com/blog/user-friendly-ui-icons). Es ist also sogar bei Standard-Icons sicherer ein Label zu verwenden.

Diese Beschriftungen sollten jederzeit sichtbar und nicht erst bei Mouseover („hovern“) angezeigt werden, zumal dies für Touch-Devices sowieso nicht möglich ist.

Bei internationalen Produkten muss auf unterschiedliche Wortlängen geachtet werden. Dies kann zu Problemen führen.

Tipps für den Einsatz von Icons

Du solltest Icons nie unbedacht einsetzen. Recherchiere zuerst welche innerhalb deiner Nutzerschaft bekannt sind. Schau dir dazu deiner Konkurrenten und typische Plattformen deiner Zielgruppe an.

  • Wähle ein simples und schematisches Design: Verzichte auf eine zu realistische und detaillierte Darstellung, sondern konzentriere dich auf die Grundformen eines Objektes. Zu viele grafische Feinheiten sind bei kleiner Größe schwer zu erkennen.
  • Nutze die 5-Sekunden-Regel: Du solltest nicht länger als 5 Sekunden brauchen um ein passendes Icon zu finden. Ein Icon, das du erst nach langer Suche auswählst, wird seine Bedeutung wahrscheinlich nicht effektiv vermitteln.
  • Achte bei internationaler Zielgruppe auf international einheitliche Icons.
  • Icons sollten ausreichend groß sein. Für eine optimale Bedienung per Touch-Gesten sollte das Icon mindestens 44-48 Pixel groß sein (bei einer Umrandung von ca. 10 Pixel).
  • Der Abstand zwischen zwei oder mehr Icons muss groß genug sein (min. 8px).
  • Teste Icons auf Erkennbarkeit, indem du Menschen fragst, wofür diese stehen.
  • Teste Icons auf Wiedererkennbarkeit, indem du die selben User ein paar Wochen später fragst, ob sie sich an die Bedeutung erinnern können.
  • Nutze stets ein sichtbares Label. 

Wahrnehmbarkeit von Icons in Relation zur Bildschirmgröße

Icons sind auf mobilen Endgeräten meist auffälliger als auf Desktop-Geräten. Das führt zu der Fehlannahme, dass ein Icon, welches mobil gut funktioniert auch auf Desktop überzeugen wird (wie z. B. das Hamburger Icon). Das liegt daran, dass auf einem kleinen, mobilen Screen viel weniger Elemente miteinander konkurrieren als auf einem großen Desktop-Screen. Auf letzteren kann ein User also viel schneller ein Element übersehen abhängig davon welcher Teil des Bildschirms die Aufmerksamkeit auf sich zieht. 

Positionierung von Icons und Labels

Bei Navigations-Icons (insbesondere für Apps) positioniert man die Labels am besten unterhalb:

Spiegel Online App mit Labels unter den Icons.
Abb.: 6: Der Spiegel-App mit beschrifteten Menü-Icons

Wenn Icons genug Platz zur Verfügung haben werden Labels idealerweise rechts, im natürlichen Lesefluss zum Icon positioniert. So können sie das visuelle Scannen der Nutzeroberfläche unterstützen, da sie vor dem Label gesehen werden. 

Screenshot aus Outlook mit Labels rechts neben Icons.
Abb.: 7: Outlook Kalender mit Labels rechts von den Icons

Fazit

Es ist gar nicht so schwer Icons nutzerfreundlich einzusetzen. Ich bin in meiner Arbeit auch immer wieder auf das Problem gestoßen passende Icons zu finden. Das Gute ist aber, wenn du Labels verwendest, kannst du nicht viel falsch machen.

Quellen