Ein gutes Icon sagt mehr als tausend Worte – oder?

Was bedeutet eigentlich Icon?

Als Icon wird ein Symbol oder Piktogramm bezeichnet, welches durch einen gegebenen Kontext mit Bedeutung aufgeladen wird und eine wahrnehmbare Ähnlichkeit mit dem darzustellenden Objekt bzw. der Handlung aufweist. Die Ähnlichkeit kann wörtlich genommen werden, wie beim kleinen Mülleimer-Icon auf dem Desktop oder metaphorisch, wie die Verwendung eines Kaffeetassensymbols für die Darstellung einer Pause. Es gibt allerdings auch Icons, die augenscheinlich keine Ähnlichkeit zur dargestellten Handlung vorweisen, wie z. B. der Play-Button. Dennoch wird er von den meisten Menschen verstanden, da das Icon mittlerweile allgemein erlernt ist. Hier zeigt sich auch die Herausforderung: Icons funktionieren wie eine Sprache aus Bildern und müssen ebenso wie die gesprochene Sprache von Nutzenden beherrscht bzw. verstanden werden. Ist dies nicht der Fall, können sie im schlechtesten Fall für Verwirrung und Missverständnisse sorgen. Eine Icon-Palette sollte daher mit Bedacht konzipiert und gestaltet werden.

Wie finden wir das passende Symbol für ein Icon?

Um ein passendes Icon zu gestalten, muss zuerst ein tiefes und umfassendes Verständnis für die darzustellende Interaktion aus Sicht der Nutzenden geschaffen werden. Die Recherche vor dem Entwurf ist also besonders wichtig. Dabei sollten u. a. die beabsichtigte Bedeutung bzw. die gewünschte Aktion (können Nutzende das Symbol im Kontext auch tatsächlich verstehen?) und bereits existierende Darstellungen des Konzepts beachtet werden. Es kann durchaus sinnvoll sein, inhaltlich auf bestehende Iconsymbole zurückzugreifen, da diese bereits bekannt und erlernt sind.

Wichtig ist, dass das Icon-Set einer Marke oder eines Produkts konsistent ist – also einem einheitlichen Icon-Stil entspricht. Bei der Wahl des Stils sollten sowohl allgemeine Anforderungen der Oberflächen (z. B. iOS oder Android) als auch das spezifische Konzept des UI-Layouts berücksichtigt werden.

Wie können sinnvoll eingesetzte Icons die User Experience verbessern?

Obwohl sie leicht übersehen werden können, spielen Icons eine entscheidende Rolle im Design. Richtig eingesetzt können sie Nutzende leiten, Ideen und Informationen vermitteln und Inhalte strukturieren. Ein großer Vorteil von Icons ist, dass sie eine gemeinsame visuelle Sprache darstellen und somit Sprachbarrieren effektiv und einfach überwinden können. Dies ist besonders wichtig, wenn unterschiedliche Nationalitäten auf Informationen angewiesen sind, wie z. B. an Flughäfen, bei Messen oder auch in Mobilitäts-Apps.

Ebenso können Icons helfen, das Interesse zu erregen und die Aufmerksamkeit der Nutzenden durch Schwerpunkte auf dem Screen gezielt zu steuern. Insbesondere allgemein erlernten Icons können eine Navigation oder Eingabe verständlicher und effizienter gestalten. So ist beispielsweise für Nutzende sofort ersichtlich, dass sich hinter einem Pfeil im Menü weitere Inhalte verbergen.

Im Zusammenhang mit Text können Icons helfen, Inhalte schneller auf einen Blick zu differenzieren. Gibt es z. B. zwei Buttons mit den Interaktionen “Löschen” und “Bearbeiten”, kann ein zusätzliches Icon die beiden Aktionen deutlicher voneinander trennen.

Nicht nur die User Experience kann sich durch einen gezielten Einsatz von Icons verbessern – auch die Form- und Bildsprache einer Marke oder eines Produkts kann durch einen visuellen Iconstil transportiert und verstärkt werden. Die Voraussetzung ist, dass dieser im gesamten Erscheinungsbild einheitlich und widerspruchsfrei eingesetzt wird.

Wann verzichten wir lieber auf Icons?

Icons sind bekannt für ihre Einfachheit und die Fähigkeit, Konzepte schnell zu vermitteln. Nutzende sollten daher in der Lage sein, sofort erkennen zu können, was das Symbol aussagt. Existieren zu viele ähnliche Icons, kann es passieren, dass Nutzende die Symbolik nicht auf Anhieb verstehen und zuordnen können. In diesem Fall sagt ein kurzer Text mehr aus als ein Icon.

Auch Icon Darstellungen von ähnlichen Interaktionen können bei der Nutzung für Verwirrung sorgen. So lassen sich z. B. Interaktionen wie “kopieren” und “in die Zwischenablage kopieren”, visuell nur schwer voneinander abgrenzen. Werden diese dennoch rein symbolisch dargestellt, müssen Nutzende viel eigene Transferleistung erbringen, um die gewünschte Handlung zu finden.

Icons können Sprachbarrieren überwinden, dennoch ist es bei der Konzeption eines Iconsets wichtig, sich über relevante kulturelle Unterschiede zu informieren. Eventuell existieren Symbole, welche in unserem Umfeld allgemein erlernt sind, aber in anderen Gebieten der Welt nicht funktionieren, da sie nicht bekannt sind. Soll ein Produkt international genutzt werden, ist es wichtig diese Herausforderung bei der Recherche besonders zu berücksichtigen.

Testen, testen, testen

Wie bei jedem guten Design liegt der Schlüssel zu einer hervorragenden User Experience im Testen mit echten Nutzenden. Um sicher zu gehen, dass die entwickelten Icons auch tatsächlich die gewünschte Effizienz und Verständnishilfe bewirken, können sie in Usertests auf den Prüfstand gestellt und gegebenenfalls verfeinert werden.