• Facebook
  • Google+
  • Twitter
  • XING
26.07.2014

Icon Usability

Das Verstehen eines Icons basiert auf früher gemachten Erfahrungen. Da es für die meisten Icons keine Norm gibt, ist es nötig diese mit einem Text zu versehen, der die Bedeutung erklärt und Unklarheiten ausschliesst.

© guy - Fotolia.com

 

by Aurora Bedford (deutsche Übersetzung) - 27.07.2014

 

Zusätzlich zu der Vermittlung der Marke durch Farben und Formen müssen Icons in einer Nutzeroberfläche in erster Linie die Bedeutung aufschlüsseln. Icons sind per Definition eine visuelle Darstellung eines Objekts, einer Aktion oder einer Idee. Wenn das Objekt, die Aktion oder die Idee dem Nutzer nicht sofort klar wird, wird das Icon auf reines Eye-Candy - verwirrend, frustrierend, Eye Candy - und zu sogenanntem Visual Noise reduziert, das die Nutzer daran hindert, eine Aufgabe zu erledigen.

In einer grafischen Nutzerschnittstelle haben Icons (GUI) unter anderem folgende Vorteile:

  • Icons sind gute Ziele. Sie sind in der Regel gross genug, um in einem Touch Interface (engl.) einfach mit dem Finger angeklickt zu werden, und funktionieren zudem auch mit der Maus sehr gut (ganz im Gegensatz zu Textlinks, die bei Touchscreens manchmal unter der sogenannten Read-Tap Asymmetry leiden).
  • Icons sind platzsparend. Icons sind kompakt genug, um in Toolbars, Symbolleisten und vielen anderen Elementen eine Menge Optionen auf relativ kleinem Raum anzuzeigen.
  • Icons können auf einen Blick schnell erkannt werden (bei gutem Design). Insbesondere, wenn es sich um Standardicons handelt, die ein Nutzer schon gesehen und verwendet hat.
  • Icons müssen für internationale Nutzer nicht übersetzt werden, sofern die Icons kulturelle Unterschiede beim Design berücksichtigt haben. (Briefkästen sehen beispielsweise in vielen Ländern ganz unterschiedlich aus, währenddem ein Briefumschlag meistens denselben Look hat. Der Briefumschlag ist also das bessere internationale Icon als ein Briefkasten).
  • Icons können fürs Auge ansprechend sein und die Ästhetik eines Designs erhöhen.
  • Icons unterstützen das Erkennen einer Produktreihe oder eines Produkt-Sets, wenn dieselben Icons und Styles an mehreren Orten verwendet werden.

Trotz dieser potentiellen Vorteile können Icons oft die Usability beeinträchtigen, und zwar dort, wo die Icons ohne Gedanken über deren Nachteile entworfen werden.

"Universelle" Icons sind selten

Es gibt einige Icons, die bei Nutzern eine allgemeine Bekanntheit geniessen. Icons wie "Home", "Drucken" und die Lupe (für die Suche) sind einige davon. Neben diesen Standardicons sind die meisten Icons wegen ihrer unterschiedlichen angewandten Bedeutungen jedoch weiterhin unklar. Das Fehlen von Standards beeinträchtigt das Verständnis von Icons über die Zeit, da Nutzer sich nicht darauf verlassen können, dass ein gewisses Icon auf jeder Website oder Anwendung die gleiche Funktion hat.

Das 3-Linien "Hamburger"-Icon ist ein exzellentes Beispiel eines Icons, das bestrebt ist, allgemein bekannt zu werden. Auf den meisten Nutzeroberflächen wird dieses Icon für die Darstellung des Hauptmenüs genutzt. Einige nutzen dieses oder ein sehr ähnliches Icon aber auch für die Darstellung einer Liste. Das Listenmanagement App "Buy Me a Pie" nutzt das 3-Linien-Icon beispielsweise um eine Liste der oft hinzugefügten Elemente anzuzeigen. Für weitere Verwirrung sorgt auch die Positionierung des Icons. Rechts neben dem Textfeld, wo man in der Regel den „Senden“ Button findet. (Das Textfeld und das Listenicon haben verschiedene Funktionen: Wer nun denkt, dass man Text in das Feld eingeben kann und durch drücken des Menü-Icons eine eingeschränkte Liste mit dazu passenden Objekten findet, stellt fest, dass das nicht funktioniert.)

Hamburger-Icon von Buy Me a Pie

Die "Buy Me a Pie" App (hier in der Android Version) nutzt eine Farbenfrohe Version des 3 Linien "Hamburger"-Icons um dem Nutzer eine Liste mit den meistbenutzten Items anzuzeigen. Eine Funktion die sich stark von der eigentlichen Bedeutung (Navigations-Menü) unterscheidet. Die Färbung allein ist viel zu subtil, als dass ein Nutzer sofort erkennen könnte dass dieses Icon eine andere Funktion hat.

Andere Icons die oft missinterpretiert werden sind unter anderem das Herz und der Stern. Diese Icons werden oft dazu verwendet, Favoriten, Lesezeichen oder Nutzerbewertungen anzuzeigen. Nicht nur, dass die tatsächliche Funktion dieser Icons von Seite zu Seite variiert, sie sind auch direkte Konkurrenten zueinander. Das hat zur Folge, dass die genaue Funktion dieser Icons nicht wirklich gelernt und interpretiert werden kann. Das Herz-Icon zum Beispiel gibt auf der Seite "Combadi" den Nutzern die Möglichkeit, eine Reise zu "lieben", speichert diese aber in keiner Liste ab, um sie später wiederzufinden. (Die Nutzer unserer letzten Usability-Studie fanden es nicht gut, dass jeder eine Reise "lieben" kann. Statt nur diejenigen, die diese Reise auch gebucht haben.) Im Gegensatz dazu benutzt die Innenraum-Design Website "Fab" das Herz-Icon dazu, Objekte im Shop als Favoriten zu markieren, um diese später einfach wieder zu finden.

Beispiele für Herz-Icons

Das Herz-Icon auf "Combadi" (unter dem Foto) hat eine sehr eingeschränkte Funktion im Vergleich zum Herz-Icon auf der Website "Fab" (Auf der rechten Seite des Produktnamens), welches das Objekt in einer Favoritenliste speichert. Beide Seiten benutzen dasselbe Icon und eine ähnliche Platzierung auf der Oberfläche für unterschiedliche Funktionen.

Sogar ein leichter Unterschied in der Bedeutung oder Funktionalität hindert den Nutzer daran, das Icon oder dessen Bedeutung zu verstehen, wenn er das Icon das nächste Mal antrifft.

Erst grad letzte Woche haben wir über eine Website Usability-Studie mit einem Uhren-Icon in der Hauptnavigationsleiste berichtet. Obwohl die Grafik selbst ganz einfach als Uhr zu erkennen war, konnte niemand erkennen, was dieses Icon bedeutet, da es in diesem Konzept keine Standardverwendung hatte: Das Uhren-Icon sollte den "Browserverlauf" symbolisieren und öffnete beim Klicken eine Seite mit den zuletzt benutzen Seiten der Website. Kein einziger Teilnehmer der Studie klickte auf die Uhr, um herauszufinden was sie bedeuten könnte. Unklares Icon = Verschwendetes Feature.

Icons benötigen ein Textlabel

Um die Bedeutungslosigkeit eines Icons zu vermeiden, muss dem Icon ein Textlabel angehängt werden um Klarheit zu verschaffen und dessen Bedeutung im Zusammenhang mit der Seite zu erklären. (Auch wenn Sie ein Standard-Icon verwenden, ist es sicherer, wenn eine Beschreibung hinzugefügt wird. Besonders dann, wenn das Icon ein wenig angepasst wurde um die Ästhetik der Seite zu unterstützen oder zu unterstreichen.)

Die Icon-Labels sollten auch ohne Interaktion des Nutzers immer sichtbar sein. Dies gilt besonders für Icons in der Navigation. Verlassen Sie sich nicht auf die Mouse-Over Funktionalität. Diese erhöht nämlich nicht nur die Interaktionskosten (engl.), sondern scheitert gänzlich bei der Verwendung eines Touchscreen-Geräts.

Die Website "Usability.gov" benutzt Icons für Methods, Templates and Documents und Guidelines, die auf jeder einzelnen Seite der Website angezeigt werden. Ich bin mir sicher, wenn ich Sie alle (die gerade diesen Artikel lesen) bitten würde, mir ein Icon zu senden welches "Methoden" symbolisiert, würde ich die unterschiedlichsten Icons erhalten. Wie schon vor Jahren in unseren Designrichtlinien für Homepage-Nutzerfreundlichkeit (engl.) erwähnt: "Wenn Sie lange überlegen müssen, welches Icon Sie in der Navigation verwenden sollen, ist es nur zu wahrscheinlich, dass Besucher die Bedeutung dieses Icons nicht intuitiv verstehen oder erraten können."

Während die mobile Version der Website anerkennt, dass eine Bezeichnung angezeigt werden muss, bleibt das Label auf der Desktop-Version solange versteckt, bis der neugierige Nutzer mit Mouse-Over das Icon anklickt. Mit der Fixierung der Navigations-Icons auf der linken Seite - damit die Navigationselemente auch sichtbar sind, wenn der Nutzer nach unten scrollt - zeigt die Organisation, dass sie glaubt, die Icons seien sinnvoll und nützlich. Das Verstecken der Beschreibung lässt die Icons komplett bedeutungslos erscheinen. Das ist kontraproduktiv zu der Idee des jederzeit einfachen Zugriffs auf Inhalte.

Icons mit Textlabels

"Usability.gov's" Website wird auf mobilen Geräten mit Textlabeln unter dem Icon dargestellt, während auf der Desktop Version die Icons zwar permanent an der gleichen Position bleiben, jedoch keine Bedeutung vermitteln solange man nicht mit der Maus darüber schwebt. Das Zwingen zur Suche der Bedeutung zerstört die ganze Effektivität der auf Icons basierenden Navigation.

Relative Grösse unterstützt die Wahrnehmbarkeit

Man sagt, dass Icons auf mobilen Geräten besser herausstehen als auf Desktopseiten und -anwendungen. Diese Annahme ist einfach zu begründen: Icons (zum Beispiel der Hamburger) funktionieren gut auf dem Handy und es sollte doch dasselbe sein, wenn man diese für den Desktop PC übersetzt. Leider ist dies nicht der Fall! Auf einem mobilen Gerät ist der Display um einiges kleiner: Es gibt weniger Elemente, die um die Aufmerksamkeit des Nutzers kämpfen, was wohl daran liegt, dass das Display kleiner ist und es schlichtweg nicht so viel Platz gibt. Im Gegensatz dazu sind die heutigen Monitore von Desktop PCs ziemlich gross und beinhalten in der Regel einiges mehr an Inhalt, welcher die Aufmerksamkeit eines Nutzers auf sich zieht. Während auf einem Handydisplay zum Beispiel nur ein Logo, ein Foto und ein Header mit einem Icon zu sehen sind und die Chancen für das Icon gut stehen, gesehen zu werden, kann auf einer Desktopseite das Icon am oberen Bildschirmrand schnell übersehen werden. Vor allem auf einer Seite auf der viel attraktiver Inhalt angezeigt wird.

Sie sollten sich auf jeden Fall über die relative Grösse eines Icons im Vergleich zu den anderen sichtbaren Elementen auf dem Monitor Gedanken machen. In einem typischen Header auf einem Handydisplay beansprucht das Hamburger-Icon ungefähr 20-25% der verfügbaren Displaybreite. Wenn diese Seite auf einem mobilen Gerät mit grösserem Display geöffnet wird, bleibt das Icon in der Regel in derselben Grösse. Daraus folgt dass dieses Icon auf dem Desktop oder grossen Tablets (besonders im Querformat) bedeutend an Grösse verliert und weniger auffällt als die anderen Elemente, die auf dem Display angezeigt werden. Dieses Problem kann auf grossen Displays (wo üblicherweise reichlich Platz besteht) bekämpft werden, indem man diesen Navigationseintrag sichtbar macht und diesen nicht in ein Icon einschliesst. Wenn man Navigationseinträge erstellt werden nicht nur die Menüoptionen deutlicher angezeigt, man verhindert ausserdem jene Usability-Probleme, die dann entstehen, wenn man die globale Navigation versteckt (engl.).

relative Grösse eines Icons

Upworthy.com: Der Raum der dem "Hamburger"-Icon gewidmet wird, beläuft sich bei der Version für mobile Geräte auf ungefähr 20% der Navigationsleiste (links). Wenn man die Website aber mit dem Desktop-PC besucht, bleibt die Grösse des Icons dieselbe, obwohl die Navigationsleiste deutlich ausgedehnt wird. In der Desktopansicht "schrumpft" das Icon auf 3.5% der verfügbaren Breite der Navigationsleiste. (Und diese Messung ignoriert den Rand um den gesamten Inhalt). Dieser Unterschied und die Menge an Inhalt die auf der Desktopseite die Aufmerksamkeit auf sich lenken machen es leicht, das Icon zu übersehen.

Tipps für Icon-Design

Wenn Sie sich dazu entscheiden, Icons in Ihrem Design zu verwenden, sollten Sie zuerst ihre Forschung machen! Machen Sie sich mit den Icons vertraut, die Sie auf den Websites ihrer Mitbewerber finden oder mit den Icons auf den Plattformen die sie anstreben. Diese Icons werden für Ihre Besucher am einfachsten zu identifizieren sein, da sie wahrscheinlich schon Erfahrung damit gemacht haben.

Wenn Sie neue Icons designen müssen, halten Sie sich an folgende Richtlinien um diese so einfach und verständlich wie möglich zu gestalten:

  • Halten Sie das Design simple und schematisch. Reduzieren Sie den Anteil an grafischen Details. Konzentrieren Sie sich auf die Charakteristik und nicht auf ein hochrealistisches Bild in der Annahme, dass dieses von Nutzern leichter erkannt wird.
  • Nutzen Sie die 5-Sekunden-Methode: Wenn es mehr als 5 Sekunden dauert bis Ihnen ein möglicherweise geeignetes Icon einfällt, ist es unwahrscheinlich dass ihre Nutzer dieses Icon schnell identifizieren und dessen Bedeutung erkennen können.
  • Testen Sie die Icons auf Erkennungsgrad (engl:): Bitten Sie verschiedene Leute darum, die Bedeutung ihrer Icons zu erraten.
  • Testen Sie die Icons auf Erinnerungsgrad: Bitten Sie dieselben Leute ein paar Wochen später die Funktion der Icons zu nennen, wenn Sie ihnen nur sagen, was die Icons repräsentierten.

Und verwenden Sie immer gut sichtbare Textlabels! Wie Bruce Tognazzini einst sagte: "Ein Wort hat den Wert von 1000 Bildern."

Lernen Sie mehr über wichtige Entscheidungen für das Design von Oberflächen für verschiedene Displaygrössen in unserem ganztägigen Trainingskurs: Das Skalieren von Nutzeroberflächen (engl.). Mehr über Navigationskomponenten und Stile für Menüs lernen Sie am Informationsarchitektur: Tag 2 (engl.).

 

© Deutsche Version. Institut für Software-Ergonomie und Usability AG. Alle Rechte vorbehalten.

Kommentare auf diesen Beitrag

    Keine Kommentare

Kommentar hinzufügen

Die mit * gekenzeichneten Felder sind zwingend auszufüllen