UI-Design: Kein Icon ist immer besser als ein missverständliches
Das Interface von GoogleAnalytics erhielt kürzlich ein kleines Update. Insbesondere eines der Icons, die nunmehr dort zur Anwendung kommen, weckte aufgrund seiner ziemlich ungewöhnlichen Darstellung mein Interesse. Icons from hell.
Ein nach unten gerichteter Pfeil, soviel haben wir über die Jahre im Umgang mit digitalen Medien gelernt, beschreibt im User Interface eine dem Anwender zugewandte Aktion, etwa ein Download eines Fotos oder das Sichern einer Datei auf den eigenen Computer. Im Gegensatz dazu assoziieren wir eine nach oben gerichtete Pfeildarstellung mit einer vom User abgewandten Aktion, beispielsweise ein Upload einer Datei in die Cloud oder das Senden einer E-Mail.
Dieses Darstellungprinzip manifestiert sich in allen prägenden UI-Designsprachen – in den Human Interface Guidelines von Apple ebenso wie im Modern UI von Microsoft und auch im Material Design von Google. Ebenso ist im CSS-Framework Bootstrap, quasi Industriestandard in Sachen Webentwicklung, das Icon für Export mit einem nach oben gerichteten Pfeil ausgestattet.
Man kann also sagen, dass in das Interface von GoogleAnalytics ein ziemlicher Exot von einem Icon Einzug gehalten hat. Die Icon-Leiste samt aufgeklapptem Menüpunkt „EXPORT“ schaut wie folgt aus:
Das ungewöhnliche Export-Icon, das entgegen geltenden Webkonventionen einen nach unten gerichteten Pfeil beinhaltet, bedeutet im Ergebnis: die Aussage von Icon und Menü-Bezeichnung widersprechen sich. Darüber hinaus widerspricht das ominöse Export-Icon Googles eigenen Designprinzipien, die für Upload und Download die folgenden Zeichen vorsehen:
So bleibt festzuhalten: Im Bereich User Interface hat sich seit geraumer Zeit folgendes Prinzip durchgesetzt:
Pfeil nach oben = Upload / Exportieren / User sendet (aktiv) / weg vom eigenen Endgerät
Pfeil nach unten = Download / Importieren / User empfängt (passiv) / auf das eigene Endgerät
Dass das hier vorgestellte Export-Icon im Widerspruch zu dem steht, was Google sonst so in Sachen Interface-Design produziert, zeigt beispielsweise der Blick hinüber zu Google Docs, wo ähnliche Funktionen ganz anders anlegt sind (siehe Abb. unten). Ein nach unten gerichteter Pfeil in Verbindung mit der Bezeichnung Export findet sich weder in Google Docs, noch in anderen mir bekannten Anwendungen, Web, iOS, MacOS, Android und Windows eingeschlossen.
Um abschließend einen Lösungsansatz für den durch das Export-Icon verursachten UI-Konflikt aufzuzeigen:
- Alle in der Icon-Leiste enthaltenen Auswahlmöglichkeiten semantisch und in Bezug auf die Gleichheit von Funktionen ordnen
- Aussehen der Icons sowie Funktionsbezeichnungen harmonisieren (ausgehend von der Google-Designsprache)
- Als Vorlage für die Harmonisierung könnte beispielsweise Google Docs unter Android dienen (siehe Abb. unten). Hier werden unterschiedliche Funktionen unter der sinnvollen Menüpunkt-Bezeichnung „Freigeben und exportieren“ gebündelt und die subsumierten Begriffe durch aussagekräftige Icons ergänzt.
Die oben gezeigte Lösung funktioniert zudem deshalb so gut, da in der Übersicht auf den Einsatz zusätzlicher Icons gänzlich verzichtet wird. Denn: Icons sind erklärungsbedürftiger als reine Textaussagen! „Sprache“ ist eindeutiger als , „Code“ ist verständlicher als  und „Publish“ ist präziser als . Insbesondere dann, wenn sich die Aussagen von Icon und Text widersprechen, wie in dem hier vorliegenden Fall, schaden Icons mehr als dass sie von Nutzen sind. Icons sind bei UI-Designern und -Konzeptern aufgrund der geringen Größe und der damit verbundenen Gestaltungsfreiheit äußerst beliebt, für Anwender stellen Icons allzuoft ein ärgerliches Hinderniss dar.
Tatsächlich finde ich als User das neue Icon viel eindeutiger. Denn tatsächlich möchte ich gar nichts “exportieren”, sondern die vorliegenden Daten in einem Format meiner Wahl speichern. Das eingängige Icon zeigt jetzt Usern, die in der Anwedung derartiger Programme weniger firm sind, visuell eindeutig, was sie zu tun haben. Als Ausbilder merkt man nämlich schnell, dass Leute ohne entsprechenden Background dämlich suchen, wenn sie nach einer Speichermöglichkeit suchen, diese jedoch per Icon mit einem wegführenden Pfeil dargestellt wird. “Export” heißt für einen Programmierer eben ewas anderes als für den Durchschnittsuser. Das neue Icon hebt dies ein Stück weit auf.
Ok. Soweit teilen wir die gleiche Auffassung. Nur warum steht neben dem Icon dann „Export“? Wenn ich – als User – die Daten sichern will?
Das ist offensichtlich so. Wenn der Programmierer in die Rolle der Daten schlüpft, verliert er dabei den Fokus aus User-Sicht aus den Augen, und es entsteht ein UI-Konflikt wie dieser.
Icons wie auch die dazugehörigen Bezeichnungen sollten für Programmierer nicht etwas anderes bedeuten als für Nicht-Programmierer. Findest Du nicht auch?
Da schließe ich mich der Frage von violator natürlich an: Seit wann hat Export denn was mit Datenverlust zu tun? Mir scheint hier verwechseln einige Kommentierer Export mit Konvertierung oder Komprimierung/Kompression.
Export: Übertragung von Daten zwischen zwei Programmen; diese ist, sonfern die Übertragung vollständig ist, immer verlustfrei. Wenn Daten exportiert werden, erfolgt eine Übernahme von Daten aus einem Anwendungsprogramm bzw. einem Datenbankverwaltungssystem in ein anders, und zwar eins zu eins, nur eben auf eine Weise, bei der das aufnehmende Programm die Daten verarbeiten kann.
Konvertierung: Umwandlung einer Datei von einem Dateiformat in ein anderes mit Hilfe eines Dateikonverters; diese kann sowohl verlustfrei, verlustbehaftet oder sinnhaft sein.
Komprimierung/Kompression: Techniken zur Codierung von Daten durch Eliminierung von Redundanzen. Bei diesem Vorgang wird die Menge digitaler Daten verdichtet oder reduziert; auch hier wird zwischen verlustfreier und verlustbehafteter Kompression unterschieden. Beispiel: Beim Exportieren einer Photoshop-Datei zu JPEG erfolgt eine Bildkompression, mit dem Ziel, eine Datei zu erstellen, die die weniger Speicherplatz benötigt. Auf diesem Wege gehen Daten verloren. Wohingegen eine verlustfreie Komprimierung mittels Abspeichern als ZIP-Datei möglich ist; hierbei bleiben die Originaldaten erhalten.
Etwas verwundert mich der Diskussionsverlauf schon, denn eigentlich sollte es doch auf der semantischen Ebene ganz klar sein: Verwende ich Bildzeichen + Text, dann sollen ergänzende / spezifizierende und nicht konträre Informationen vermittelt werden. Das ist hier nun ins Gegenteil umgeschlagen, wenn man ein Icon wählt, bei dem ein Pfeil in etwas hineinzeigt und dieses dann mit der Bezeichnung Export (Ausfuhr) koppelt. Insofern hat Achim hier absolut zu Recht darauf hingewiesen.
Schöne Übersicht der Inkonsistenzen bei Google, ich verstehe jedoch die Diskussion in den Kommentaren um die Warte des Programmierers, der Daten oder des Users nicht – deshalb finde ich das Icon auch überhaupt nicht unpassend auch wenn die Inkonsistenzen ggf. ärgerlich sind.
Gerade in Analytics geht es bei einem Export ausschließlich darum die Daten herunterzuladen um dann auf dem Endgerät weiter zu analysieren bzw. zu verarbeiten. Ich erwarte daher als User stets dass die Daten aus der Cloud zu mir kommen (d.h. Pfeil runter). Dementsprechend gibt es bei Analytics sowieso keinen Import und also auch kein Pfeil hoch bei dem Daten hoch in die Cloud geschoben werden könnten.
Deswegen kann es m.E. auch anders als das “Öffnen in”-Icon in Google Docs sein, da es da ja durchaus verschiedene Programme gibt die direkt mit den Daten “da oben in der Cloud” irgendwie weiterarbeiten können, ohne dass ich etwas vorher runterladen muss.
Aus User-Sicht finde ich also das Icon gelungen, im Analytics-Kontext auch das Wort Export. Jetzt bleibt noch der Kommentar
Pfeil nach oben = Upload / Exportieren / User sendet (aktiv) / weg vom eigenen Endgerät
Pfeil nach unten = Download / Importieren / User empfängt (passiv) / auf das eigene Endgerät
der für Programme wie PS sicherlich perfekt passt da Export = Grafik aus Programm raus irgendwo hin. Das gleiche findet auch bei Analytics statt: Tabelle raus um in Excel reinzukommen. Der Unterschied ist m.E. nur, dass nunmal der Vorgang bei PS auf dem Gerät, bei Analytics aber in der Cloud startet.
Es geht daher im Endeffekt nicht um “hin oder weg zum Gerät” sondern “hin oder weg von der Quelle” oder gar “hin oder weg vom User”. Die Diskussion ist also de facto in diesem Fall ob der User den Unterschied versteht ob sein Programm lokal oder in der Cloud läuft. Ich denke, dass kann und muss man ihm zutrauen.
Dafür, dass sich in dieser Diskussion offenbar tatsächlich zwei gänzlich konträre Auffassungen gegenüberstehen, gelingt der Austausch, wie ich meine, bemerkenswert gut. Die Unterschiedlichkeit der Sichtweisen verstehe ich jedenfalls als Informationsgewinn.
Danke an dieser Stelle an alle, die sich konstruktiv einbringen!
Also für mich ist im Web Exportieren = Download = Pfeil runter und Importieren = Hochladen = Pfeil hoch.
Ich hab den ganzen Beitrag auch echt nicht kapiert und in sich widersprüchlich empfunden bis ich folgenden Ansatz gelesen habe:
Interessante Debatte. Ich habe den Artikel auch zuerst nicht verstanden, da ich es gewöhnt bin das Ganze aus Sicht der Anwendung zu sehen (ich exportiere aus der Anwendung).
Nach längerem Nachdenken und Lesen der Kommentare, kann ich den Standpunkt des Autors voll und ganz nachvollziehen.
Dazu ein kleiner Vergleich zu einem Bereich, wo die Wörter Import und Export auch häufiger fallen: Der Handel. Dort wird auch immer die “User”-Perspektive benutzt (Ich exportiere Waren ins Ausland bzw. ich importiere aus dem Ausland.). Dementsprechend exportiere ich auch Daten in die Anwendung und importiere Daten aus der Anwendung.
Nichts desto trotz ist das Icon generell falsch gewählt aufgrund der Option “Google Tabellen”, was weder Import noch Export ist.
Fazit: Gewohnheit sagt, dass Pfeil nach unten teilweise richtig ist, aber die Logik sagt, dass das Wort “Export” an der Stelle falsch gewählt ist.
Ohje, das ist aber eine sehr verworrene Perspektive. Meiner Ansicht nach ist das die falsche Sichtweise, die ein UI garnicht wiedergeben kann. Die UI, also Bezeichnung und Symbolisierung ist ja das Bedienkonzept des entsprechenden Programms und nicht das des Users. Soll heißen, in dem du das Programm bedienst, erteilst du z.Bsp. ein Befehl (an die Anwendung) das eine Datei aus der Anwendung exportiert werden soll. Wohin es exportiert werden soll, ist der Anwendung im aller ersten Bedienungsschritt egal – ob es runtergeladen, als andere Datei gespeichert oder konvertiert wird – kann das Programm ja noch nicht wissen und wird durch den User und aus der Situation heraus in weiteren Schritten befehligt. Der User versetzt sich instinktiv in die Lage des Programms das seine Arbeit macht (und nicht andersrum) – das ist zumindest meine Auffassung.
Anderes Beispiel: Auto! Wenn du Tankst, füllst du ja auch Sprint ins Auto (Import), und kippst nicht Sprit aus (also Export aus dem Zapfhahn). Auch wenn beides faktisch irgendwie stimmen mag ;)
Icons sind schick, jeder will sie haben zur Dekoration des Interface, ganz egal, ob das konkret damit gelabelte auf ein Piktogram herunterbrechen lässt oder nicht. Aber generell finde ich die Updates der Google-Tools (Webmastertool, Adwords) nicht gelungen. Bei beiden springe ich immer wieder zurück zum alten Interface, weil ich selbst dann, wenn ich gewillt bin, etwas Zeit ins Suchen zu investieren, bestimmte Funktionen einfach nicht finden kann. Ich bin mir bis heute nicht sicher, ob die abgeschafft, noch nicht ins GUI implementiert oder einfach bloß zu gut versteckt sind.