Usability-Problem: Icons in der Hauptnavigation

Vueling.com – Navigation

Nein, ein Freund von Icons bin ich nicht. Nur selten verbessern selbst hübsch gestaltete Icons die Nutzerführung. Je spezifischer die Anwendung, desto ungeeigneter sind Icons, um diese darzustellen. Anders als Bezeichnungen können Symbole fehlinterpretiert werden, weshalb Icons meines Erachtens generell mit spitzen Fingern angefasst werden sollten, insbesondere dann, wenn der Zugang zum Webangebot niedrigschwellig sein soll.

Neulich erschien die mit Icons überfrachtete Hauptnavigation der spanischen Billig-Fluggesellschaft Vueling auf meinem Screen (Abb. oben). In dieser Form sicherlich sehr eigen. Das mag nett aussehen … nur … „nett“ ist die kleine Schwester von …, genau. Icons prägen die Gestaltung der gesamten Website. Zumindest in der Hauptnavigation hätte man sich im Sinne einer anwenderfreundlicheren Umgebung davon lösen müssen, da die Icons die Auswahl und die Bedienung überflüssigerweise erschweren.

Bereinigt könnte das etwa so aussehen: einzeilig, ohne Icons, in der Formulierung einheitlich und möglichst kurz („Sitzplatz wählen“ statt „Wählen Sie Ihren Sitzplatz“).

Vueling – Navigation neu

Ich trau es mich gar nicht zu sagen, weil es so abgedroschen klingt. In der Hoffnung, dass es sich auch bis nach Spanien herumspricht: Weniger ist halt doch oftmals mehr, gerade in Sachen Usability.

27 Kommentare zu “Usability-Problem: Icons in der Hauptnavigation

  1. Ich stimme dir voll und ganz zu, Achim. Die Icons erschweren allein dadurch das Erfassen der Inhalte, dass das Auge zwischen Bild- und Textelementen hin und her pendelt und man, vielleicht auch nur unbewusst, versucht zu enträtseln: „Was soll dieses Icon mir sagen? Aha, Sitzplatz wählen…“ Stünde dort hingegen nur Text, würde man diesen sofort lesen und ohne Umwege verstehen. Außerdem empfinde ich die Icons als permanent in Dauerkonkurrenz zum Logo und anderen Bildelementen auf der Seite (z.B. zum großen „Preiskalender“-Icon unten links, das ja weniger Icon ist, sondern mehr Illustration).

  2. in dem speziellen fall finde ich die umsetzung auch etwas unglücklich. die icons einfärbig statt gelb+weiß zu machen würde schon viel bringen.

    generell würde ich icons in der hauptnavi aber nicht ablehnen. speziell wenn es um usability in programmen geht (und weniger bei nur gelegentlich benutzten websites) helfen icons sehr wohl. wenn die mal gelernt sind – und je besser die icons gestaltet sind umso schneller geht das – dann bringt das sehr wohl einen entscheidenden vorteil, besonders in der geschwindigkeit.

    die user brauchen nicht mehr zu lesen, sonder erkennen auf einen blick, wo sie hinwollen.

    die hier besprochene website verfolgt aber imho einen klar marketing-orientierten ansatz: es darf ruhig etwas weniger praktisch sein, dafür nett anzusehen (zweifärbige und teilweise zu detailreiche icons) und weniger knappes und sachliches wording, dafür direkte und freundlichere ansprache.

  3. die user brauchen nicht mehr zu lesen, sonder erkennen auf einen blick, wo sie hinwollen

    Genau das ist der Irrglaube, der nach wie vor verbreitet ist. Bildzeichen werden nicht wie Text gelesen und sogleich verstanden, sondern interpretiert. Sie bieten stets die Gefahr der Fehlinterpretation. Selbst so einfache Zeichen wie ein Drucker- oder E-Mail-Symbol werden von Menschen zum Teil nicht korrekt erkannt!

    Bilder sagen zwar sprichwörtlich mehr als Worte. Icons sind jedoch keine Bilder, sondern verdichtete Bildzeichen, die, zumal in Kleinstformat, leicht misszuverstehen sind. Ich lehne Icons auch nicht prinzipiell ab, es sollte jedoch einen triftigen Grund geben, auf ein solches Symbol zurückzugreifen. Ein solcher ist etwa ein geringes Platzangebot (Beispiel Menüsymbol ≡ innerhalb Anwendungen mobiler Endgeräte)

  4. Icons sind beim „Erstbesuch“ oft nicht nützlich – außer sie sind in ihrer Gesamtheit extrem gut konzipiert und umgesetzt, aber das ist wesentlich aufwendiger als „mach da mal 10 Icons hin!“.

    Icons sind bei wiederkehrendem Besuch (nach Lerneffekt) oft nützlich, da schneller erfassbar als Text – wenn sie gut gemacht sind. (Das selbe könnte man natürlich auch über Farben oder Verortung erreichen – alles was visuelle Orientierung schafft, ohne Text zu brauchen.)

    Vueling kombiniert komplexe Icons mit recht viel Text in einem zu kleinen zweispaltigen Dropdown-Menü … ob da primär die Icons dran schuld sind dass das unübersichtlich ist, kann hinterfragt werden.

  5. In diesem Zusammenhang fällt mir immer das „Speichern“ Symbol ein. Wer weiß noch was das ist – oder war?

    Wäre da heutzutage eine Wolke nicht angebrachter? Wäre doch auch nett anzusehen. Ich glaube gute Icons sind in allen Fällen wirklich hilfreich. Richtig gute Icons sind aber eine Menge Arbeit.

  6. Icons können sehr wohl zur Benutzerführung sinnvoll eingesetzt werden, allerdings sollte man hier grundsätzlich große Sorgfalt bei der Gestaltung gerade in Bezug auf den Benutzerkreis und die kulturelle Prägung walten lassen. Die hohe Popularität der „Ikonisierung“ innerhalb der Navigationsgestaltung ist dem Bereich Mobile geschuldet. Hat man sich doch hier stark zur Vereinfachung durch Symbole hingegeben, was zu allererst dem Platz und der Darstellungsfähigkeit kleiner Displays geschuldet ist oder vielmehr war! In diesem Bereich funktioniert dies sehr gut!
    Die Übertragung in der Gestaltungselemente innerhalb der Hauptnavigation ist in dem Fall der Airline auch nur logisch, da die Buchungsseite auch stark durch mobile Nutzer frequentiert ist und man so eine hohe Wiedererkennung der Bedienungselemente auf beiden Seiten gewährleistet.
    Man kann dies also auf keinen Fall losgelöst voneinander betrachten und nur die Gestaltung der Desktopvariante der Webseite beurteilen.

  7. @carlito: Ich muss dir zustimmen, im vorliegenden Fall funktioniert es nicht gut, allgemein aber schon.

    Es ist ja wissenschaftlich erwiesen, dass man Farben und Bilder grundsätzlich schneller aufnimmt, als Texte. Natürlich erfordert das in komplexen Systemen oft ein vorheriges „Erlernen“ der Bilder, das lohnt sich aber bei oft genutzten Anwendungen. Obwohl ich ein Fan cleaner Gestalung bin, trauere ich sogar noch immer den farbigen Icons in der Seitenleiste des OS-X-Finders hinterher. Früher ging der Sprung zum Schreibtisch einfach immer schneller. Heute merke ich teilweise, wie ich kurz verharre. Relativ oft verklicke ich mich außerdem bei der Dropbox und Air-Drop. Und das nicht wegen der ähnlichen Symbole, sondern wegen des ähnlichen Namens ;)

    @UweS: Das Thema Skeomorphismus ist ja im Zuge von iOS 7 umfassnd diskutiert worden. Trotzdem finden sich auch hier viele Symbole aus dem Alt-Tag (mieser Wortwitz … sorry) wieder. Allein der Telefonhörer der „Telefonfunktion“ ist ja schon ein Relikt aus der Vorzeit. Trotzdem haben ihn auch die jüngsten Nutzer frühzeitig als Icon gelernt. Ich persönlich finde „veraltete“ Abbildungen als Reminiszenz oft schön. Wenn es eine völlig innovative Lösung gibt, wie die wunderbare Wasserwaage in iOS 7, begrüße ich das, aber es muss nicht auf Teufel komm raus alles immer erneuert werden.

  8. In der Kombination Wort und Bild wird es meiner Meinung nach weniger zu Fehlinterpretationen kommen. Icons zeigen im besten Fall doch noch eine weitere Botschaft, die textlich evtl. nicht oder nur unzureichend gelöst werden kann. Ob man jetzt bei diesem Beispiel zu Icons greifen muss, ist zu diskutieren. Sobald die Icons etwas sehr Komplexes erklären müssen, stößt man an gestalterische Grenzen. In der Kombination sind aber weitaus mehr Möglichkeiten verfügbar. Aber ich stimme Achim zu, dass textlich auch schon aus SEO-Gründen noch einiges geschehen müsste.

  9. Also ich muss sagen mich irritieren die Icons gar nicht so sehr. Ich finde auch nicht, dass sie jetzt total irreführend sind. Ich glaube gerade Menschen mit Leseschwäche haben mit den Icons einen guten zusätzlichen Anhaltspunkt zum Verstehen. Ich finde sie jedenfalls hilfreich. Sprache kann nämlich genauso ungenau sein. Sieht man sich die spanische Version an, stellt man fest, dass die Zeilenumbrüche vor allem durch die Übersetzung entstehen.

  10. Icons sollten generell nur Zeichen beinhalten, mit denen der Nutzer vertraut ist. Dies betrifft alle Zeichen, die international normiert sind, aber auch alle Zeichen, die der Nutzer in seiner ersten Computerstunde kennenlernt. Das Problem mit der Diskette führt dazu, dass eine Vielzahl von Symbolen im Umlauf sind, die eine Speicherfunktion abbilden; von der Cloud mit einem Pfeil nach oben, bis hin zum Stift, der eigentlich für Bearbeiten steht. In den beliebten Icon Fonts wird das Speichern immer noch als Diskette dargestellt und unabhängig davon, ob das Medium noch bekannt ist, sollte es als universelles Symbol zur lokalen Speicherung beibehalten werden.

    Der Einsatz von Icons auf Websites ist generell nicht mehr zeitgemäß. Icons kamen auf den Desktop, weil die Bildschirmauflösung gering war, wenngleich die Grafikfähigkeiten eines Computers besser wurden. Eine Textdarstellung hätte schlicht mehr Platz gekostet; eine grafische Darstellung hingegen wurde durch Mehrfarben-Unterstützung leicht erkennbar und demonstrierte die Leistungsfähigkeit eines Systems.

    In der Technik der Gegenwart sind Auflösung und Grafikfähigkeit kein Problem mehr. Eine reine Textdarstellung ist deshalb vorzuziehen, weil der Bildschirm sonst mit kleinen, nicht allgemein bekannten Grafiken überladen wird, die die Übersicht stören, der Nutzer nicht erfassen kann und ihn deshalb auch verwirrt. Eine Beschriftung, die aus Substantiv + Nomen besteht, ist hingegen sehr leicht zu erfassen und findet ausreichend Platz. Auch hat in den üblichen Desktop-Programmen nicht jede Funktion ein eigenes Icon bekommen, sondern nur die üblichen, die in einer Aktionsleiste ständig sichtbar sind.

    Zu den allgemein bekannten Funktionen, die jederzeit durch ein übliches Symbol zugeordnet werden können, gehören:
    – Fett, kursiv, unterstrichen schreiben
    – Schriftfarbe
    – Bild einfügen
    — Bildgröße anpassen
    — Bild zuschneiden
    – Löschen
    – Aufklappen / absteigend sortiert
    – Zuklappen / aufsteigend sortiert
    – Linksbündig, zentriert, rechtsbündig, Blocksatz
    – Drucken
    – Rechtschreibkorrektur
    usw. usf.

Antworten auf Christoph Langguth Antworten abbrechen

Folgende HTML-Elemente können verwendet werden: <b> <i> <img src="meineurl"> <a> <blockquote>