Icons sind auf Webseiten oder auch in Apps sehr verbreitet und beliebt. So beliebt, dass wir von manchen Kunden im Laufe ihrer Web-Projekte hören: „Können wir nicht ein paar Icons verwenden? Das sieht doch gut aus, und das macht man jetzt so.“ Icons sind jedoch mehr als schmückende Design-Elemente. Sie erfüllen eine Funktion und müssen daher für den Nutzer schnell verständlich sein. Erfüllt ein Icon dieses Ziel, trägt es maßgeblich zur Benutzerfreundlichkeit und Usability einer Website bei.
Nutzerfreundliche Icons
Ein Icon ist eine auf seine schematische Grundform reduzierte visuelle Darstellung von Dingen oder Aktionen. Viele Icons sind erlernt, manche im besten Fall selbsterklärend. Gute Icons sollten grafisch auf das Nötigste reduziert sein, um leicht verständlich und schnell zu erkennen zu sein. Ebenso sollten sie wiedererkennbar und einprägsam sein. Vor allem im internationalen Kontext wie bei mehrsprachigen Websites müssen Icons einheitlich erkennbar sein. Das ist bei der Gestaltung oder Auswahl eigener Icons zu berücksichtigen. Denn sicher ist, dass nicht verständliche Icons störend wirken und im schlimmsten Fall zum Abbruch von Nutzeraktionen führen oder gar zum kompletten Absprung des Nutzers.
Wirklich universelle Icons sind selten. Dazu gehören beispielsweise die Icons Drucker und Lupe, die für die Aktionen Drucken und Suchen stehen. Wir kennen schon lange Piktogramme als eine ähnliche grafische Reduktion aus der analogen Welt. Insbesondere seit den 70er Jahren entstanden zahlreiche international verständliche Piktogramme. Standardisierte Zeichensysteme sind zum Beispiel auch Verkehrszeichen oder Gefahrensymbole. Daran allein ist zu erkennen, wie wichtig es ist, dass diese eindeutig verständlich sein müssen. Die Internationale Organisation für Normung (ISO) stellt Piktogramm-Sammlungen bereit sowie Gestaltungsgrundlagen für Piktogramme. Dort gibt es ebenfalls ISO-Standards mit international gültigen Vorgaben für User-Interface-Elemente wie Icons.
Usability-Fallen vermeiden
Wann und warum werden Icons denn nun eingesetzt? Sie sollen schnell und einfach den Nutzer durch einen Dialog oder eine Funktion führen und somit beim Navigieren helfen. Ihre Vorteile liegen darin, dass sie platzsparend sind, was vor allem in mobilen Anwendungen zum Tragen kommt. Nutzer erfassen durch gut gemachte Icons sehr schnell Informationen oder Funktionen, da Bilder deutlich schneller vom Gehirn wahrgenommen werden, als Text. Zudem sind sie ästhetischer Teil des Webdesigns.
Trotzdem birgt der Einsatz im Webdesign das Risiko, dass Nutzer Icons nicht verstehen und folglich die Usability leidet. Um das zu vermeiden, ist es absolut legitim, dass der Webdesigner Text-Labels einsetzt. Eine Studie belegte eindeutig, dass ein Icon plus Label weitaus besser gedeutet wird, als unbeschriftete Icons. Es ist eine irrige Annahme, dass die Mehrheit der Nutzer sich die Bedeutung eines Icons durch Ausprobieren erschließen. Der mobile Nutzer ist eher ungeduldig und hat ein Ziel, dass er schnell erreichen möchte. Allerdings hängt es zusätzlich von der Art der Zielgruppe ab, wie digital affin und im Kontext erfahren diese ist, um ein Icon zu verstehen. Im Zweifel ist es nutzerfreundlicher, Labels einzusetzen.
-
Snapseed-App: Icons mit Label
-
Facebook-App: Icons ohne Label
Die Sketchnote
Wir kennen den positiven Effekt aus der Kombination von Text und Bild auch von Sketchnotes, den visuellen Notizen, die Symbole und Strukturen mit Text verbinden. Die bildhaften Notizen vermitteln ebenfalls einen schnellen, leicht verständlichen Zugang zu Themen.
Icons sinnvoll einsetzen
Wenn die eingesetzten Icons beschriftet werden, sollten die Nutzer das Icon vor dem Label oder Text sehen, um eine gute Usability zu gewährleisten. Dafür sollten Labels bei wenig Platzangebot wie beispielsweise in Apps unter den Icons zentriert werden. Ist das Platzangebot gut, zum Beispiel auf einer Website, wird das Label besser rechts vom Icon im Lesefluss platziert. Im Webdesign werden Icons oft auch in Verbindung mit Teaser-Texten genutzt. Hier steht das Icon am besten links vom Text an der Headline oder der obersten Zeile ausgerichtet.
-
Ausrichtung des Icons an Headline und Teaser-Text
-
Ausrichtung des Icons an der Headline
Damit Nutzer Icons möglichst gut verstehen empfiehlt es sich, solche Icons zu nutzen oder zu entwickeln, die von Nutzern schon gelernt sind. Dazu sollte der Webdesigner sich damit auseinandersetzen, was beim Nutzer bereits aus dem Kontext bekannt ist und was in ähnlichen Apps, zum Beispiel denen des Wettbewerbs, benutzt wird. Das kann bei der Zielgruppe als bekannt vorausgesetzt werden, sofern es etabliert ist. Besondere Beachtung benötigt der kulturelle Kontext, wenn Icons international verwendet werden. Das ist häufig bei mehrsprachigen Websites der Fall.
Es muss immer überprüft werden, ob ein gewähltes Icon überhaupt die gedachte Bedeutung transportiert. Ein Icon muss zudem so konkret wie möglich sein, ob mit oder ohne Label. Doppelte Bedeutungen bei Icons kommen immer wieder vor und sind missverständlich. Das Herz und der Stern sind klassische Beispiele für unterschiedliche Bedeutungen in verschiedenen Apps und nur in deren Kontext klar. Das verwirrt Nutzer, was zu weniger oder unerwünschten Aktionen und somit zu Frust beim Nutzer führt.
Icons sollten immer in das Design der Website passen. Es muss konsistent dazu sein in Farbschema und Stil wie zum Beispiel der Strichdicke oder -art.
-
Icon für Suche: dünner Strich
-
Icon für Suche: fetter Strich
-
Icon für Drucker: Holzschnitt-Stil
-
Icon für Drucker: neutraler Stil
Die Größe eines Icons muss die Relation zur Nutzeroberfläche berücksichtigen. Während beispielsweise das Burger-Menü-Icon – drei Linien übereinander – auf mobilem Screen in Relation zur Größe passend erscheint, ist es alleinstehend auf dem Desktop-Bildschirm unter Umständen zu klein, um schnell genug wahrgenommen zu werden. Es ist folglich absolut zulässig und im Sinne der Usability, auf dem Desktop-Bildschirm die Menüpunkte textlich zu benennen und zu platzieren. Das reduziert im Übrigen auch die Anzahl der notwendigen Klicks bei der Navigation. Studien zeigten, dass weniger online-affine Nutzer die Bedeutung des Burger-Menü-Icons schwerer erkennen.
Nutzerfreundliche Richtgrößen von Icons sowie die notwendigen Abstände zwischen Icons sollten ebenfalls berücksichtigt werden, damit der Nutzer per Touch das Icon bequem trifft.
Icons sollten mehr als schmückende Design-Elemente sein und sich dennoch nahtlos in das Webdesign einfügen. Sie sollten immer eine Bedeutung kommunizieren und dem Nutzer helfen, intuitiv und ohne Anstrengung durch eine Website oder App zu navigieren. Gut umgesetzte Icons tragen wesentlich zur Usability einer Benutzeroberfläche bei.
Warum die Usability Ihrer Website auch für die Suchmaschinenoptimierung (SEO) eine wichtige Rolle spielt, erfahren Sie in Lektion 11 unseres Online-Kurses „Die Anatomie des optimalen SEO-Textes“.
Bettina ist Kommunikationswissenschaftlerin (M.A.). Sie war für verschiedene Unternehmen in Marketing und PR tätig. Bei Bambule® übernimmt sie grafische Arbeiten und konzeptionelle Aufgaben.