Icons im Webdesign effektiv einsetzen

 in Articles

Icons definieren ein sehr beliebtes und weit verbreitetes Stilmittel für Webseiten. Doch dabei handelt es sich nicht nur um schmückende Design-Elemente. Das Icon übernimmt auch wichtige Funktionen, weshalb es schnell verständlich sein muss. Wird dieses Ziel erreicht, spiegelt sich der Erfolg in der Benutzerfreundlichkeit einer Webseite wider.

Welche Funktionen übernehmen Icons?

Beim Icon handelt es sich um eine visuelle Darstellung, welche auf ihre schematische Grundform reduziert wurde. Damit werden erlernte oder im Idealfall selbsterklärende Dinge oder Aktionen dargestellt. Ein gutes Icon definiert sich über die Eigenschaft, grafisch nur das Nötigste darzustellen, damit der Nutzer ohne Probleme erkennen kann, worum es sich dabei handelt. Doch damit ist es mit den Funktionen der Icons noch nicht getan, denn diese sollten sich gut einprägen und einen Wiedererkennungswert aufweisen. Das ist vor allem im internationalen Kontext wichtig, wenn es sich beispielsweise um eine mehrsprachige Webseite handelt. Dieser Aspekt sollte bei der Gestaltung beziehungsweise bei der Auswahl stets berücksichtigt werden. Hier können Sie sich darauf verlassen dass ein unverständliches Icon als störend empfunden wird und im schlimmsten Fall dafür sorgt, dass der Nutzer seine Aktion abbricht, beziehungsweise komplett abspringt.

Darum wird das Icon überhaupt eingesetzt

Ein Icon dient dazu, den Nutzer durch eine Funktion oder auch einen Dialog zu führen. Letztendlich soll damit das Ziel verfolgt werden, die Navigation des Nutzers zu erleichtern. Dafür bieten sie sich schon aufgrund ihrer platzsparenden Eigenschaften an. Das macht sich vor allem im Zusammenhang mit mobilen Anwendungen bemerkbar. Visualisiert der Nutzer ein gut gemachtes Icon, nimmt sein Gehirn die Information deutlich schneller wahr. Das hat den einfachen Hintergrund, dass unser Hirn Bilder schneller verarbeiten kann, als es in Bezug auf einen Text der Fall ist. Und nicht zuletzt stellen die kleinen Grafiken auch einen ästhetischen Teil des Webdesigns dar.

Wenn der Erfolg zum Misserfolg wird

Dieser Schuss kann aber auch nach hinten losgehen: Handelt es sich um ein schlecht gemachtes Icon, dessen Aussage nicht oder falsch verstanden wird, leidet folglich die Benutzerfreundlichkeit darunter. Deshalb bietet es sich an Text-Labels vom Webdesigner einsetzen zu lassen. Das bedeutet, dass das Icon zusätzlich beschriftet wird. Aus Studien geht hervor, dass beschriftete Icons besser und schneller gedeutet werden. Bitte distanzieren Sie sich an dieser Stelle von der Annahme, dass Ihre Nutzer die Bedeutung Ihrer Icons durch Ausprobieren in Erfahrung bringen. Denn dem ist nicht so. Auch wenn die internetaffine Zielgruppe dabei eine grosse Rolle spielt, ist der User im Allgemeinen doch sehr ungeduldig und möchte sein Ziel schnell erreichen.

Wie lassen sich Icons sinnvoll einsetzen?

Um eine gute Benutzerfreundlichkeit gewährleisten zu können, sollten beschriftete Icons so aufgebaut sein, dass sie vor dem Text, beziehungsweise dem Label zu sehen sind. Ist das Platzangebot – zum Beispiel in mobilen Anwendungen – begrenzt, sollten die Labels darunter zentriert werden. Sofern es sich um ein gutes Platzangebot handelt, ist es besser das Label weiter rechts zu platzieren. Icons werden im Rahmen des Webdesigns auch häufig in Kombination mit einem Teaser genutzt. Dann sollten sie idealerweise links davor platziert werden. Dafür bietet sich die Headline oder die Ausrichtung in der obersten Zeile an.

Empfohlene Beiträge
Website Relaunch