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“).
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.
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).
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.
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)
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.
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.
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.
@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.
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.
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.
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.
Habe da kürzlich in einem anderen Blog eine genau gegenteilige Meinung zu Achims Ausführung gelesen …
https://www.konversionskraft.de/conversion-optimierung/navigations-optimierung-mit-icons.html
Jetzt bin ich ganz verwirrt. ;) Nein, wenn Icons gut gemacht sind erfüllen sie auf komplexen Seiten z. B. Globetrotter einen guten Zweck.
Schau dir einmal die Webseite im Spanischen an. Dort gibts keine Zweizeiler uns es sieht schon deutlich aufgeräumter aus – trotz Icons.
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“
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.
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.
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)…
@Uwe S: Libreoffice hatte nach nem Update mal neue Icons, was mich auch erst irritiert hat. Ich hab damals das Speichern-Icon auch erstmal gesucht. Hab halt wie sonst auch eben ein Diskettensymbol erwartet. Was war es am Ende? Ein grüner Pfeil nach unten, der auf irgendwas graues zeigt. Für mich idiotisch, das hätte genauso gut ein Downloadsymbol sein können. O_o
Da ist dann die Frage ob man etablierte Icons beibehalten sollte oder ob man die der Zeit anpasst, was eben dazu führt dass man die Zeichen erstmal neu lernen muss.
Ich sehe da kein reines “Icon oder nicht” Problem. Die Räume zwischen den Icons wie auch ihr Stand zum Text ist so unterschiedlich, dass sich keine Ordnung einstellen mag.
Das mit den veralteten Bildzeichen ist in der tat eine Krux:
Sage mir jemand bitte ein besseres Zeichen für den Begriff “Idee” als die vermaledeite Glühbirne!
Grumpf – Dicker Griff ins Klo.
Ich bin ein Fan von Icons. Jetzt kommt jedoch ein ABER. Icons sollten nicht in auffälliger oder sogar dominanten Form genutzt werden. Eine Fluggesellschaft möchte natürlich eine nutzerfreundliche Oberfläche mit selbsterklärender Navigation. Ich bin der Meinung, dass eine minimalistischere Darstellung / einfarbig sogar besser gewesen wäre.
Liebe Grüße
Icons find ich gut. Sie unterstützen die Übersichtlichkeit. Allerdings sind sie in diesem Fall viel zu kompliziert um schnell erfasst zu werden. Sie bringen auch Unruhe hinein weil sie völlig unterschiedliche Formen und Formate haben. Besser wäre, wenn sie viel reduzierter und in einem einheitlichen Rahmen stehen würden.
Ich finde Icons generell nicht schlecht. Man darf nur nicht dem Irrglauben anheim fallen, dass sie zur Verbesserung der Usability dienen sollen. Das ist nur bei Shops hilfreich, um Kategorien besser zu unterscheiden, die ohne Icon schwerer zu definieren sind. Flyeralarm macht das zum Beispiel recht gut. Auch der Telefonhörer ist ein super Signal und viel schöner als ein “Tel.:”.
Bei Vueling kommen die Icons sympathisch rüber und das ist Ihr Zweck. Der besser lesbare Alternative-Entwurf ohne Icons wirkt dagegen deutlich kühler und unpersönlicher. Die Seite hat ja keinen Bildanteil und die Icons wirken als illustratives Element der “Bleiwüste” entgegen. Lesbarkeit ist sehr wichtig, aber bei Top-Usability letztendlich unfreundlich zu wirken ist auch keine Lösung.
Grundsätzlich ist die Umsetzung der Bilder hier nicht besonders gelungen. Allerdings finde ich auch den Lösungsvorschlag von Achim nicht gelungen, offen gestanden. Das ist zu viel Text, ich persönlich hab meine Schwierigkeiten, in der zweistufigen Menüführung hier etwas zu finden da überall Text in der gleichen Größe ist.
Hier finde ich helfen gut strukturierte Symbole schon. Das sieht man ja auch bei Verkehrszeichen – in den USA wird alles ausgeschrieben.
“No Parking at any time
except delivery 7am – 8am” oder so
Da ist das deutsche / europäische durchgestrichene Symbol leichter zu erkennen.
Dass es diese Icons geworden sind, und keine anderen, könnte dem Selbstzweck geschuldet sein, den auch andere Kommentatoren hier formulieren: “Ich finde ja Icons grundsätzlich […]” ist zwar als Meinung nett, aber nicht relevant.
Die Icons hätten im Hinblick auf ihre Bedeutung und nicht zum Selbstzweck gestaltet werden sollen. Warum liegt das Gepäckstück auf einem extra Gepäckwagen? Warum ist der Sitzplatz von vorne illustriert? Ist der Online-Check-in nur über ein Notebook möglich? usw.
Da hätte etwas weniger Information in den Icons gereicht.
Ungeachtet dessen sind die Menüpunkte auch zu kompliziert formuliert und ganze Menüpunkte redundant. Was bitte ist ein Preiskalender? Es handelt sich immer noch um eine normale Flugsuche, nur in einer kalendarischen Darstellung statt listenbasierend.
Man könnte also nicht nur Menüpunkte kürzen und Icons vereinfachen / weglassen, sondern auf ganze Menüpunkte verzichten.
Ich finde die Umsetzung mit den Icons in Ordnung und eine gelungene Abwechslung zu all diesen langweiligen Seiten mit Menüpunkten in Textform, von denen man sich die meisten sowieso nicht ansehen will.
Icons, das ewige Thema. Allein, was hilft die ganze Diskussion, wenn am Ende des Tages der (beratungsresistente) Kunde sagt: “Keine Zeit, kein Geld, aber machen Sie doch mal noch ein paar kleine Bildchen rein. Sieht mit der Schrift so nackig aus und ich habe das auf anderen Webseiten gesehen. Schauen Sie mal hier…”
Grmppfff…