Skip to content

Usability-Problem: Icons in der Hauptnavigation

Vueling.com – Navigation

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.

Achim Schaffrinna

Achim Schaffrinna ist Designer und Autor. Hier im Design Tagebuch, 2006 von mir gegründet, schreibe ich über die Themen Corporate Identity und Markendesign. Ich konzipiere und entwerfe Kommunikationsdesign-Lösungen und unterstütze Unternehmen innerhalb von Designprozessen. Designanalyse ist Teil meiner Arbeit. Kontakt aufnehmen.

Dieser Beitrag hat 27 Kommentare

  1. 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.

  2. 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.

  3. Astrid, das ist in der Tat interessant. Wie widersprüchlich die von Marcel Licht vertretene Haltung ist, lässt sich leicht ablesen. Die Behauptung, ohne Icons würde ein Menü „viel komplexer und anstrengender aussehen“ ist schon sehr gewagt. Wie soll das gehen? Das ist unlogisch. Text + Icons bedeutet im Vergleich zur reinen Textversion: mehr Zeitaufwand bei der Erfassung. Dass es vielleicht subjektiv betrachtet weniger hübsch ist, spielt dabei keine Rolle.

    Die Sammlung, die auf konversionskraft zusammengestellt wurde, ist natürlich fein. Nur die damit verbundene Aussage ist es nicht. Ich würde es so umformulieren: statt „manchmal kann ein Text zielführender sein.“
    wäre meine Empfehlung: „meistens ist reiner Text zielführender“

  4. Achim, ich stimme dir voll und ganz bei folgender Aussage zu:

    “Je spezifischer die Anwendung, desto ungeeigneter sind Icons, um diese darzustellen.”

    (wie mach ich eigentlich diese hübschen Quotes?)

    Bei allgemeinen Dingen find ich Icons speziell auf kleinen Bildschirmen angenehmer als Text.
    Home, Speichern, FAQ, Suche, Settings, etc. bei solchen Beispielen kann ich problemlos mit Icons arbeiten, die wenig bis keinen Interpretationsspielraum offen lassen, da sie von den meisten Usern mittlerweile verstanden werden.
    Bei “Passagierdaten”, “Preis sichern”, oder anderem Quatsch wirkt das schon sehr bemüht. “Gepäckstück hinzufügen” find ich auch einfach falsch, da gehört für mich ein Koffer mit einem Plus hin.

  5. Es kommt auch immer drauf an, wie die Wahrnehmung des Einzelnen ist und wie viel Zeit man sich lässt. Da heute aber alles ganz schnell sein muss und bloß kein Zeichen zu viel um die armen, burnout-gefährdeten Leute nicht zu überfordern, sollte man demnächst vielleicht auch auf Farben und Bilder verzichten. Das ist einfach zu viel…

    Ich finde, man darf dem hektischen Zeitgeist durchaus entgegenwirken und von den Benutzern (vielmehr ‘Menschen’) erwarten, sich etwas mit ihrer Umwelt auseinanderzusetzen. Dennoch liegt diese Kritik in der Natur der ‘Usability’, ist diese doch ein Produkt eben dieser hektischen Zeit…

    Übrigens machen die Icons, wie ich finde, bei den beiden anderen Menüs durchaus Sinn, sie gliedern die Punkte und machen es übersichtlicher.

  6. Ich seh das ganz pragmatisch:
    Wenn ein Icon erklärenden Text benötigt, ist es unnütz und sollte weggelassen werden.
    Icons machen nur Sinn, wenn Sie Text ersetzen können, Platz sparen oder z.B. Sprachbarrieren überbrücken (und von mir aus, auch zu dekorativen Zwecken).
    Ich finde es legitim dem Rezipienten in bestimmten Fällen einen Lernprozess zuzumuten, das ist z.B. bei den GUIs von Mobilgeräten z.Tl. unumgänglich, dort aber schnell erreicht (Wenn die GUI Konzeption dahinter gut ist)…

Schreibe einen Kommentar

Die Netiquette ist zu beachten. Vor dem Hintergrund einer transparenten, sachlich-fairen Debatte wird die Nutzung eines Klarnamens empfohlen.

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

An den Anfang scrollen