Kostenlose & unverbindliche Beratung: 030 / 544 870 24
Birgit Bärnreuther
Wir beraten Sie unverbindlich und helfen Ihnen gerne bei Ihrer nächsten Usability-Herausforderung!

030 / 544 870 24

(Mo bis Fr von 9 bis 18 Uhr)

oder per E-Mail an

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?

Zeichen Alle Symbole, Piktogramm und Icons sind Zeichen. Aber nicht alle Zeichen sind Symbole, Piktogramme und Icons. Im weiteren Sinne ist bspw. Rauch auch ein Zeichen für Feuer.
Symbol Symbole sind Sinnträger, meist konkrete Gegenstände bzw. reale Objekte, die für eine abstrakte Sachen/ eine Bedeutung stehen. So steht bspw. die weiße Taube für Frieden.
Piktogramm Ein Piktogramm ist ein Bildzeichen und erteilt Anweisungen, Hinweise oder Verbote. Klassische Beispiele sind Straßenschilder, Gefahrenkennzeichnungen und Waschhinweise.
Icon Ein Icon ist ein Bildzeichen in grafische Benutzeroberflächen/ im Webdesign, die in der Regel Inhalte, Funktionen oder Aktionen kennzeichnen. Also bspw. die Mülleimer, der für die Aktion Löschen steht.
Wortmarken, Signets und Logos Wortmarken, Signets und Logos dienen als Firmen- bzw. Markenzeichen in der analogen und digitalen Welt. Auch hierzu könnte man noch mal ein Kapitel füllen

Zeichen und ihre Bedeutungen: Was sind Zeichen, Symbole & Icons?

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.

Scaling UX Teams

UX-Design-Teams effizient und nachhaltig auf- und ausbauen

E-Book mit UX-Design-Methoden-Übersicht

Sie haben sich entschieden in UX zu investieren, aber fragen sich, wo ihr Geld am besten angelegt ist? Sollten Sie neue Leute einstellen? Oder bestehendes Personal aus- und weiterbilden? Oder die UX-Design-Projekte an externe Dienstleister abgeben?

Lesen Sie unser E-Book, wenn Sie

  • Sie eine Entscheidungshilfe brauchen, ob sie UX-Design outsourcen oder inhouse lösen sollen.
  • Ihr Unternehmen noch kein UX-Team hat, Sie jedoch eines aufbauen möchten.
  • Sie wissen wollen, was Sie beim Outsourcing von UX-Design beachten sollten, um eine gute Zusammenarbeit zu gewährleisten

Jetzt herunterladen

Über den Autor

Claudia Sinnig

Senior UX-Specialist

Claudia begleitet unsere Kunden seit 2014 in allen Phasen des Human-Centered-Design-Prozesses von der Projektplanung bis zum finalen Design. Sie hat bereits über 60 unserer Kunden aus Bereichen wie Industrie, B2B-Software und E-Commerce bei der UX-Optimierung unterstützt, darunter BMW, BOSCH, SIEMENS und Melitta.

Kontaktieren Sie Claudia