Icons im UI-Design – Top oder Flop?

Icons spalten die Gemüter von UXern so wie sich die Geschmäcker bei Koriander scheiden.

Die einen sagen:

„Icons verschlechtern die Usability!“

Und berufen sich dabei auf diverse Studien, die den negativen Impact auf die Effizienz von Interfaces gezeigt haben.

Sie betonen, dass Icons nie intuitiv sind und stets erst gelernt werden müssen, was den kognitiven Aufwand erhöht.

Die anderen sagen:

„Icons sind nicht mehr wegzudenken!“

Weil sie seit den 1970er-Jahren fester Bestandteil von Graphical User Interfaces sind.

Einfache, verständliche und selbsterklärende Grafiken sind für unser Gehirn einfacher zu verarbeiten als lange Texte und auch viel ansprechender.

Wie finden Sie in ihren digitalen Produkten eine gute Balance zwischen beiden Positionen?

Wo und wie benutzen wir Icons in Interfaces?

Die drei wichtigsten Aufgaben von Icons sind:

• Mögliche Interaktionen mit dem Interface andeuten
• Inhalte strukturieren/ordnen
• Status/Eigenschaften zeigen

Das Problem: Häufig werden sie rein zur Dekoration – ja, fast schon willkürlich – eingesetzt.

Auch ist das Vokabular oft nicht klar, denn wenn über Icons gesprochen wird, dann sind nicht immer Icons gemeint, sondern oft auch Zeichen, Symbole, Piktogramme, Logos, Embleme, Signets, Siegel, Warenzeichen, Ornamente…

Was also sind Icons und wie grenzen sie sich von anderen Bildern ab?

Im Folgenden soll es um Icons gehen – also Bildzeichen im digitalen Kontext.

Wann und warum sollten wir Icons einsetzen?

Icons sind visuelle Hinweise und helfen uns, wiederkehrende Aktionen, Interaktionen, Inhalte oder Eigenschaften in einem Interface schnell wiederzufinden – sofern sie einfach gestaltet sind.

Die Vorteile von Icons

• meistens platzsparender als Text
• im Bestfall sprachunabhängig, müssen nicht übersetzt werden
• haben eine hohe Affordance, also einen starken Aufforderungscharakter
• wirken sich positiv auf die Ästhetik eines Interfaces aus
• können eine Marke visuell unterstützen

Richtig eingesetzt können Icons also durchaus die Gebrauchstauglichkeit und User-Experience verbessern.

Die Nachteile von Icons

Icons können jedoch auch schnell die Usability verschlechtern. Sind die Icons nicht intuitiv und eindeutig verständlich, sieht man schnell nur noch Fragezeichen bei den Nutzer:innen.

Oft funktionieren Icons auch nicht vollständig sprachunabhängig, wie dieses Beispiel zeigt:

Ich habe vor Jahren eine kleine Studie mit deutschen und chinesischen Industriearbeiter:innen durchgeführt. Das Info-i als Icon für zusätzliche Informationen, wurde zwar von den deutschen Teilnehmer:innen gut verstanden, von den chinesischen allerdings gar nicht, aufgrund ihrer mangelnden oder nicht vorhandenen Englisch-Kenntnisse. Ein Bug-Icon wurde von keiner der beiden Gruppen verstanden, weil die Geschichte des ersten Computerfehlers, ausgelöst durch einen Käfer, den Gruppen nicht bekannt war.

Auch das Hamburger-Icon stellt einige Nutzer:innen vor Probleme.

Icons vs. Text

Nur Icon

Icons können ohne Text-Label eingesetzt werden, wenn die Icons wirklich eindeutig und unmissverständlichen sind, zum Beispiel das Drucker-Icon oder das X-Icon für das Schließen von Anwendungen.

Es gibt aber auch Icons, die früher noch als universell galten und langsam aussterben, wie das Diskette-Icon für Speichern. Genauso werden sich mit der Zeit auch neue Icons etablieren.

Sind Ihre Icons universell verständlich? Ein Usability-Test liefert Aufschluss.

Icon und Text

Wenn das Icon spezifiziert werden muss, also nicht eindeutig genug für die Funktion dahinter ist, braucht das Icon zusätzlich ein Text-Label.

Icons erleichtern in diesem Fall das Verständnis oder Wiederfinden der Funktion innerhalb des Produkts.

Nur Text

Gar kein Icon brauchen jene Inhalte, die nebensächlich oder sekundär sind, also gar nicht besonders auffallen sollen, wenn sie nur selten im Interface vorkommen oder wenn die Übersetzung in eine visuelle Darstellung schlichtweg zu kompliziert ist.

Ein guter Indikator hierfür: Du suchst bei FontAwesome oder einer anderen großen Icon-Bibliothek nach einem passenden Icon und hast nach 5 Minuten noch nichts Passendes gefunden.

Gibt es ein Icon-Limit?

Eine häufig wiederkehrende Frage ist, wie viel Icons maximal eingesetzt werden sollten.

Hier kann ich leider nur die unbefriedigende Antwort geben, die man so oft von UXern hört: Kommt drauf an!

Die Menge an Icons, welche für die Usability und UX eines Produkts sinnvoll ist, hängt von Produktart und Zielgruppe ab. So kann beispielsweise eine Software, die von einer technisch- und digital-affinen Zielgruppe genutzt wird, mehr Icons (ggf. auch ohne Text-Label) einsetzen als etwa eine Website, die von einer älteren Zielgruppe genutzt wird, die selten im Internet unterwegs ist.

Fazit: Best-Practices für den Einsatz von Icons

1. Icons müssen einfach und klar gestaltet sein, um schnell wiedererkannt zu werden.
2. Icons müssen den Konventionen entsprechen, um intuitiv zu sein.
3. Icons sollten auch innerhalb eines Produkts konsistent eingesetzt werden, um den Lernaufwand zu minimieren.
4. Icons werden im Bestfall in Kombination mit Text-Labels verwendet.
5. Teste deine eingesetzten Icons in Usability-Tests.