Infografik Userinterfacedesign Piktogramme Icon 02

Icons stellen Objekte, Aktionen oder Ideen visuell dar.

Ist die Bedeutung des Icon für die Nutzenden nicht sofort verständlich, reduziert sich das Icon auf ein überflüssiges Schmuckobjekt, das die Nutzenden beim Erledigen ihrer Aufgabe stört.

Was ist ein Piktogramm?

Ein Piktogramm ist eine leicht zu erfassende bildhafte Darstellung, die der Vermittlung von Informationen dient. Piktogramme bestehen aus abstrahierten Grafiken, manchmal auch in Kombination mit Buchstaben. Da sie keiner Sprache bedürfen, sind sie international verständlich – allerdings ist stets zu bedenken, dass auch die bildlichen Darstellungen jeweils kulturellen Bedeutungen unterliegen. Viele Piktogramme sind nicht von Anfang an selbsterklärend. Die Botschaft der Piktogramme muss zuerst gelernt werden.

Was ist ein Icon?

Das Icon ist ein grafisches Sinnbild für Objekte und Aktionen auf dem Bildschirm. Ziel der Icongestaltung gemäss ISO 9241-210 ist: «Schaltflächen, Icons und Menüeinträge sollten den Benutzer mit einfachen und flexiblen Dialogwegen zum Ziel seiner Aufgabe führen und damit die Anwendung steuerbar machen.»

Vorteile von guten Icons

  • schnelle Wiedererkennung
  • Sprachunabhängigkeit
  • geringer Platzbedarf auf der Bedienoberfläche
  • bessere Verständlichkeit von Produkten
  • intuitive Interaktion
  • verbesserter Zugriff auf Informationen

Einsatz und Gestaltung von Icons sollten stets das Ziel haben, den Benutzer einer Software oder einer Website bei der Steuerung zu unterstützen. In dem Moment, wo etwa zu viele kleine Bilder bei der Navigation zu Verwirrung führen, oder die Aussage der Icons nicht eindeutig ist, kann eine andere Form der Steuerung, beispielsweise durch Texteinträge, durchaus seine Berechtigung haben. Anwendungen, die ausschliesslich mit Icons arbeiten, sind oft schwer zu erlernen. Eine Kombination von Bildern und Text gilt daher als die zuverlässigste und bedienerfreundlichste Art der Softwarenavigation.

William Horton formuliert in seinem Werk «Das Icon Buch» wie folgt: «In der Regel lösen Icons eine der beiden folgenden Reaktionen aus: Entweder hat der Betroffene seine Freude an den cleveren, hilfreichen Bildchen, oder er hält sie für unverständliche Rätsel, frustrierend und sinnlos.»

Icons im User Interface Design

Icons eignen sich durch ihre Grösse gut als Ziele für die Bedienung des User Interfaces. Sie sind kompakt und können Informationen platzsparend darstellen. Gut gestaltete Icons werden von den Nutzenden schell verstanden. Durch ihre Sprachunabhängigkeit müssen sie nicht übersetzt werden und reduzieren den Aufwand bei mehrsprachigen Produkten. Einheitlich gestaltete Icons fördern die Ästhetik und machen das User Interface attraktiv. Markentypisch gestaltete Icons transportieren die Markenwerte und tragen zur unverwechselbaren Markenidentität bei. Im User Interfaces Design dienen Icons oft als Navigationselemente, weshalb es wichtig ist, sich bereits im Vorfeld Gedanken über die verschiedenen Status-Darstellungen zu machen.

Folgende Status sollten pro Icon definiert werden:

  • Normal (Inaktiver Zustand)
  • Hover (Feedback bei Mouseover)
  • Focus (Feedback bei Bedienung mit Tastatur, resp. Tabulator)
  • Active (Aktiver Zustand)
  • Disabled (Sichtbar, aber nicht anklickbarer Zustand)

Spezielle Icons

App Icon

Jede App braucht ein App Icon mit Wiedererkennung um sich im Store und auf dem Homescreen durchzusetzen. Ein App Icon muss sich von den unzähligen anderen Mitbewerbern abheben.

Favicon

Ein Favicon ist ein sehr kleines, 16 × 16 oder 32 × 32 Pixel grosses Icon, Symbol oder Logo, wie es typischerweise in der Adresszeile eines Webbrowsers links von der URL angezeigt wird. Das Favicon dient meist dazu, die zugehörige Website auf wiedererkennbare Weise zu kennzeichnen.

Loader Icon

Im Loader Icon werden häufig Elemente aus dem Logo aufgenommen. Ein Loader Icon dienen zur Überbrückung von Wartezeiten.

Aus der Praxis

Typische Icon Usability Probleme

Für den Einsatz von Icons gibt es keine eindeutigen Standards. Trotzdem gibt es immer mehr Icons, die universell von den Nutzenden eindeutig verstanden werden. Typische Beispiele dafür sind: Haus, Drucker, Mülleimer, Lupe. Je mehr ein neues Symbol, wie z.B. die drei Striche für das Hamburger-Menu, von unterschiedlichen Plattformen und Produkten einheitlich eingesetzt wird, desto schneller wird ein Icon zum Quasi-Standard und von den Nutzenden universell verstanden. Wenn ein Icon wie z.B. der Stern oder das Herz in unterschiedlichen Produkten für ähnliche aber nicht exakt die gleichen Funktionen eingesetzt wird, ist es für Nutzende schwierig, die Bedeutung des Icons zu verstehen und zu lernen. Nutzende interpretieren ein Icon basierend auf ihren gemachten Erfahrungen. Da viele Icons nicht einheitlich verwendet werden, ist es hilfreich und oft zwingend notwendig, das ein Textlabel die Kommunikation unterstützt, und die Mehrdeutigkeit des Icons präzisiert. Denn: unklare Icons verwirren die Nutzenden und die Usability wird verschlechtert.

Icons richtig verwenden

Recherchieren Sie in ihrem Umfeld und bei den Mitbewerbern. Gibt es Quasi-Standards? Werden einzelne Themen von den führenden Mitbewerbern mit den gleichen Icons dargestellt? Dann kann es sehr sinnvoll sein auf diesen «Branchen-Regeln» aufzubauen.

Tipps zur Gestaltung von Icons lesen Sie im Beitrag Icons Design.