Wie man Icons nicht einsetzen sollte!

Icons sind in der digitalen Welt weit verbreitet. Kaum eine App oder Software mit grafischer Benutzeroberfläche kommt ohne die kleinen Symbole aus. Auch auf Websites sind sie sehr verbreitet und beliebt. Richtig eingesetzt bietet Icons auf Websites einige Vorteile:

  • Sie sind einfach und schnell zu verstehen.
  • Sie wirken interessanter als gewöhnlicher Text.
  • Sie helfen die Website-Inhalte zu strukturieren.
  • Sie sind eine gute Orientierungshilfe für den Website-Benutzer.
  • Unter Umständen machen Sie sogar das Lesen überflüssig.
  • Sie können als Eyecatcher benutzt werden und helfen den Lesefluss des Website-Benutzers zu steuern.

Beliebte Anwendungsfelder für Icons auf Websites sind beispielsweise Navigationen oder kleine Teaser, bestehend aus einem Icon und einer textuellen Beschreibung.

Wo es Vorteile gibt, existieren meistens auch Nachteile. Falsch eingesetzte Icons können den Website-Benutzer auch verwirren. Warum ist das so? Die Interpretation eines Icons liegt immer im Auge des Betrachters. Schwierig wird es, wenn ein Icon unterschiedliche Interpretationen erlaubt. Je nachdem welche Erfahrungen und Kenntnisse ein Website-Benutzer besitzt, wird er das Icon möglicherweise anders deuten als andere. Aus diesem Grund muss ein Webdesigner bei der Auswahl der Icons sehr sorgfältig vorgehen. Ansonsten stiftet er beim Website-Benutzer Verwirrung und vertreibt in möglicherweise von der Website.

Wann passt ein Icon gut?

Ob ein Icon passt oder nicht passt, kommt in der Regel auf den Anwendungskontext an. Während die gewünschte Interpretation eines Icons bei gewissen Zielgruppen funktioniert, kann es bei anderen Zielgruppen fehlschlagen. Ein Beispiel: Man benutzt als Icon ein Fingerkreis auf einer Website. Beim Fingerkreis berühren sich Daumen und Zeigefinger einer Hand. In Deutschland oder den USA interpretiert man es als OK-Zeichen. In manchen südeuropäischen Ländern interpretiert man damit eine obszöne Geste, die dem westeuropäischen Stinkefinger gleich kommt. Man vermitteln dem gegenüber eine Null zu sein. Man sieht, je nach Website-Betrachter kann ein Icon unterschiedliche Interpretationen hervorrufen.

Nach all den Jahren haben sich auf Websites einige Icons etabliert und werden häufig (aber auch nicht immer) richtig interpretiert. Beispiele hierfür sind:

Das kleine Haus (im englischen Home) findet man auf vielen Websites. Meistens wird es in der Navigation als Ergänzung zum Link auf die Startseite eingesetzt. Manchmal dient es auch allein als Link, ohne weiteren Text.

Mit der Lupe verbindet man auf einer Website meistens die Suchfunktion. Besonders beliebt sind Textfelder, die sich erst beim Klick auf die Lupe öffnen. In diesem Zusammenhang ein sehr beliebtes und oftmals verstandenes Icon.

In Webshops nahezu unverzichtbar. Der Einkaufswagen. Wer darauf klickt, der kommt zum Warenkorb und kann seine Produkte einsehen. Von da erreicht man dann die Kasse.

Wenn man Icons einsetzt, dann sollte man sehr genau darauf achten, dass die Wahrscheinlichkeit einer falschen Interpretation beim Website-Betrachter möglichst gering ist. Eine hundertprozentig fehlerfreie Interpretation eines Icons ist meiner Meinung nach nahezu ausgeschlossen. Ich selbst habe schon Situationen erlebt, bei denen Icons falsch interpretiert bzw. nicht interpretiert werden konnten, obwohl ich fest mit dem Gegenteil gerechnet habe.

Wie man Icons nicht einsetzen sollte

Neben gut eingesetzten Icons finden sich im Internet zahlreiche Websites mit schlecht eingesetzten Icons. Es ist ein Stück weit paradox, dass insbesondere Webdesigner und Web-Agenturen auf Ihren Websites die größten Fehler bzgl. Icons begehen.

Surft man kreuz und quer durchs das Internet und sucht nach beliebigen Websites von Webdesignern und Web-Agenturen, so lassen sich sehr schnell Beispiele für schlecht eingesetzte Icons finden. Ich habe mich mal exemplarisch auf die Suche begeben und in nicht mal 3 Minuten 3 Beispiele für, in meinen Augen, schlecht eingesetzte Icons gefunden:

Das Smiley. Ein weltweit bekanntes Icon von dem zahlreiche Variationen existieren. Ich interpretiere damit im ersten Moment Freude und Freundlichkeit.

Den Einsatz eines solchen Icons habe ich bei einer erfolgreichen Web-Agentur gefunden. Es wird in Verbindung mit etwas Text eingesetzt. Das Smiley soll gemäß dem zugehörigen Text verdeutlichen, dass die Web-Agentur guten Website-Code programmiert.

Mir persönlich erschließt sich die Verbindung zwischen einem Smiley und gut geschrieben Website-Code nicht. Im Gegenteil, es stiftet eher Verwirrung, weil Icon und Text nicht zusammenpassen. Klar, im weiten Sinne geht es darum, dass der Kunde glücklich ist, weil das technische Grundgerüst seiner Website gut programmiert ist. Das ist aber definitiv nicht das, was das Icon im ersten Moment vermittelt.

Hier handelt es sich offensichtlich um einen Regenschirm. Bei einer Website die mit Regenschirmen zu tun hat, könnte ein solches Icon definitiv Sinn machen.

Dieses Icon habe ich in ähnlicher Form ebenfalls bei einer Web-Agentur gefunden. Es wird als Bestandteil eines kleinen Teaser-Blocks verwendet. In dem Teaser wird dem Website-Benutzer verdeutlicht, dass die Web-Agentur die Pflege und Wartung seiner Website übernimmt. Über einen Call-to-Action-Button kann der Website-Benutzer mehr Informationen aufrufen.

Auch hier hat man ein Icon was überhaupt nicht zum Text bzw. den Inhalten dahinter passt. Die Verbindung zwischen Regenschirm und Website-Pflege kann ich persönlich nicht herstellen. Ok, vielleicht das man den Kunden nicht im Regen stehen lässt? Das ist mir aber bereits zu viel nachgedacht.

Zu guter Letzt eine Aktentasche als Icon. Spontan würde ich an den Einsatz in einem Webshop denken der Aktentaschen verkauft. Eine Reparaturwerkstatt die Aktentaschen repariert könnte ebenfalls in Frage kommen.

Auch dieses Icon stammt von einer Web-Agentur. Auch dieses Icon in Bestandteil eines Teaser. Der zugehörige Text beschreibt, dass die Web-Agentur große und wichtige Unternehmen als Kunden besitzt und schnell und effektiv arbeitet.

Icon und Text passen wieder nicht zusammen. Wieso nicht stattdessen zwei Leute die sich die Hand reichen? Auch das ist zwar alles andere als optimal, aber weitaus besser als eine Aktentasche.

Wie setzt man Icons richtig ein?

Die Vorteile von Icons auf Websites habe ich bereits eingangs beschrieben. Wegen dieser Vorteile werden Icons eingesetzt. Der Interpretationsspielraum macht es aber schwierig, immer das passende Icon zu finden. Als ich mit der Entwicklung von Websites angefangen habe, habe ich sehr gerne Icons eingesetzt. Sie machten es wesentlich einfacher die Website interessanter und cooler aussehen zu lassen. Schnell hatte ich aber das Problem, dass ich für gewisse Inhalte keine passenden Icons finden konnte. Was macht man in solchen Fällen? Ich denke man hat drei Möglichkeiten:

  • Option 1: Man sucht krampfhaft nach einem Icon das noch im entferntesten Sinn passt.
  • Option 2: Man versucht die Inhalte anders zu strukturieren und die Inhalte ohne passendes Icons anders in Szene zu setzen.
  • Option 3: Man lässt die Icons weg und überlegt sich eine alternative Gestaltung. Insbesondere wenn man mehrere Inhalte hat, zu denen keine passenden Icons existieren, macht das Sinn.

Viele Webdesigner und Web-Agenturen scheinen zur ersten Option zu tendieren. Warum? Ich denke es geht einfach darum die Website interessanter und cooler wirken zu lassen. Zudem vermeidet man auf diese Weise den Mehraufwand einer alternativen Gestaltung. Aber gerade bei Webdesignern und Web-Agenturen müsste es ein Bewusstsein für den richtigen Einsatz von Icons geben. Insbesondere wenn es sich um die eigene Website handelt.

Die zweite Option ist sicherlich eine gute Alternative. Sie hängt aber stark von dem Anwendungskontext ab. Meist wird man um die dritte Option nicht herum kommen. Das führt dazu, dass man sich Gedanken um eine alternative Gestaltung machen muss. Vermutlich liegt auch hier der Grund warum die meisten Option 1 bevorzugen.

Mein Fazit

Ich finde als Webdesigner sollte man sich intensiv Gedanken beim Einsatz von Icons machen. Lassen sich keine passenden Icons finden, dann sollte man die Finger davon lassen. Dann heißt es die Ärmel hochkrempeln und sich Gedanken um eine alternative Strukturierung bzw. visuelle Gestaltung der Inhalte machen.