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.
Ich denke dass dies hier heulen auf großer Ebene ist. Schließlich handelt es sich bei diesem Export um ein Download von verschiedenen Darteiformaten. Also exportiert man die Daten aus Analytics zu einem bestimmten Dateiformat welches heruntergeladen wird, ist schon verständlich mit dem Icon. Für mich wird in diesem Beitrag einiges übertrieben.
Dem ist nicht so. „Excel“, „PDF“ und „CSV“ sind Downloads, ja. Die Übertragung nach GoogleTabellen ist hingegen ein Upload/Weiterleiten der Analytics-Daten hinüber zu GoogleDocs, deshalb macht ein nach unten gerichteter Pfeil in diesem Fall keinen Sinn, sodass ein Konflikt entsteht, der sich auflösen ließe, würde man die Navigation semantisch und nach Funktionen ordnen.
Genau das war auch mein erster Gedanke – Es wird aus einer Webanwendung etwas auf das Endgerät exportiert
Übertrieben nicht, im Designtagebuch geht es doch auch um solche Details.
Sachlich gesehen ist es entweder das falsche Icon zum Wort “Export” oder das falsche Wort zum Icon. Und hier hat Achim den Denkfehler entdeckt. Entweder sollte es “Download [als…]” heißen und ein extra Menüpunkt für Cloud-Upload/Weiterleitung, oder eben ein anderes weniger missverständliches Icon.
So ist es. Schön, dass Du zu denen gehörst, lieber Nata, die die Problematik verstanden haben.
Wenn ich mir die Kommentare anschaue, vor allem die ersten, erscheint mir jeder Austausch zu diesem Thema absolut sinnvoll.
Pfeil nach unten bedeutet Download. Für “Export” würde ich intuitiv einen Pfeil nach rechts verwenden, wenn er im Sinne einer Weiterleitung gemeint ist. Wenn er aber ohnehin einem Download entspricht, schließe ich mich Maurice an.
Sehe das genau so wie mein Vorredner. Ich finde eher, dass dieses Export-Icon tatsächlich sehr gut passt. Gerade auch, weil der Export ja auch Download heißen kann. Z.B. man exportiert nach PDF und speichert dieses PDF dann auf seinem Rechner. Der gezeigt Pfeil-Nach-Unten (File Download) zeigt einen einzelnen Dateidownload… in diesem Fall macht das sinn aber nicht bei einem Multiexport.
Export und Download sind im Wesentlichen dieselbe Aktion — Daten aus der Anwendung heraus auf meinen eigenen Rechner holen. Logischerweise werden sie auch mit einem Pfeil in dieselbe Richtung gekennzeichnet. Mir ist völlig unklar, warum “Export” einen Pfeil nach oben haben sollte. Alles ist genau so, wie es sein sollte.
Ich finde das Icon passend, denn es wird ein Download angeboten. Das Dokument kann in verschiedenen Formaten “abgelegt”, also gespeichert werden.
Passend wäre das Icon, würde die Bezeichnung „Download“ heißen und die Auswahl „GoogleTabellen“ innerhalb der Navigation gesondert gelistet.
Stimme ebenfalls zu, dass ich einen Export eher als Download sehen würde und daher der Pfeil nach unten gut passt. Pfeil nach oben wäre für mich eher Import.
Ich stimme Maurice voll und ganz zu. Dieser Beitrag ist mehr als unsinnig. Ein Export von Google zu mir ist ein Download! Von daher gibt es kein besseres Icon dafür.
Ich schließe mich da Maurice an. Bei allen Aktionen wird eine Datei heruntergeladen daher ist das Icon meiner Meinung nach korrekt.
Man könnte über die Begrifflichkeit nachdenken, “Download” ist aber auch nicht korrekt. Wenn man auf das Icon verzichtet hätte man ein Problem mit der Durchgängigkeit. Hab daher nichts auszusetzen.
Das ist falsch. „Excel“, „PDF“ und „CSV“ sind Downloads, ja. Die Übertragung nach GoogleTabellen ist hingegen ein Upload/Weiterleiten der Analytics-Daten hinüber zu GoogleDocs,
Aber wenn man Google Drive installiert hat, und die Datei auf die eigene Festplatte gespiegelt wird (und in die Drive-Cloud), dann ist es für den Anwender ja doch wieder ein Download auf seine Endgeräte.
Vielleicht ein Pfeil auf 5 Uhr gerichtet? ;)