Skip to content

UI-Design: Kein Icon ist immer besser als ein missverständliches

Export Icon

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:

Export Icon
Export Icon

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:

Upload / Download Icon
Upload / Download Icon

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.

Google Docs (iOS)
Google Docs (iOS)

Um abschließend einen Lösungsansatz für den durch das Export-Icon verursachten UI-Konflikt aufzuzeigen:

  1. Alle in der Icon-Leiste enthaltenen Auswahlmöglichkeiten semantisch und in Bezug auf die Gleichheit von Funktionen ordnen
  2. Aussehen der Icons sowie Funktionsbezeichnungen harmonisieren (ausgehend von der Google-Designsprache)
  3. 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.
Google Docs (Android)
Google Docs (Android)

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.

Dieser Beitrag hat 75 Kommentare

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

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

      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.

    2. Genau das war auch mein erster Gedanke – Es wird aus einer Webanwendung etwas auf das Endgerät exportiert

    3. Ü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.

      1. Sachlich gesehen ist es entweder das falsche Icon zum Wort „Export“ oder das falsche Wort zum 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.

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

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

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

  5. Ich finde das Icon passend, denn es wird ein Download angeboten. Das Dokument kann in verschiedenen Formaten “abgelegt”, also gespeichert werden.

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

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

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

    1. Bei allen Aktionen wird eine Datei heruntergeladen

      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,

      1. 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? ;)

  9. Wenn, so wie bereits erwähnt, “Export” bedeutet, dass man eine Datei aus Google Analytics in ein Format exportiert, das einem dann selbst in anderen Anwendungen zur Verfügung steht, dann finde ich das Icon nicht falsch angewendet, da es sich dabei durchaus im weitesten Sinne um einen Download handelt. Natürlich gäbe es für so eine Art des Exportes wahrscheinlich alternative Icons, die man hätte ausprobieren können. Ein Pfeil nach rechts wäre einen Test wert, da er zunächst von der Konnotation eines Up- oder Downloads befreit ist und eher an “Weiterleiten” erinnert, wobei man sich dann natürlich wieder streiten kann, ob die Umwandlung der Ursprungsdatei oder der Export oder der Dowload oder wie auch immer man es sehen möchte, überhaupt mit einem Richtungspfeil versinnbildlicht werden kann.

    In diesem speziellen Fall scheint es kein absolutes “richtig” oder “falsch” zu geben, da es von der Betrachtungsweise des Nutzers abhängt, wie man die Funktion versteht. Letztendlich ist es eine Art Download, welcher gleichzeitig auch als ein Export zu verstehen ist. Man stolpert in diesem Fall also bereits über das gewählte Wort und nicht zwingend über das Icon bzw. sollte nicht das Icon als Bösewicht hier verstehen.

    1. Ein Pfeil nach rechts wäre einen Test wert, da er zunächst von der Konnotation eines Up- oder Downloads befreit ist und eher an „Weiterleiten“ erinnert

      Ein guter Vorschlag!

      1. Heh, das war schon mein Vorschlag ;-)
        Wir sind uns doch alle einig, dass hier Begriff und Icon nicht zusammenpassen. Es gibt doch nur zwei Möglichkeiten: 1. Ich löse einen Download aus. Dann passt das Icon aber der Begriff ist falsch. 2. Ich löse eine Weiterleitung (Export) aus. Dann passt der Begriff aber das Icon ist unsinnig. Da die Aktion eher der einer Weitergabe entspricht, ist ein Pfeil nach rechts die elegenteste Lösung.

  10. In der heutigen Welt, in der man Export mit einem Download gleichsetzen kann, passt das doch sehr gut. In dem Dropdown-Menü sind 3 von 4 ein lokaler Export (oder auch ganz plump Download). Ich persönlich verwende den Export ebenfalls exakt so in UI-Konzepten. Frei nach dem Motto: Speichern in der Cloud (und das automagically) und Lokal nur noch per Export. Die Zeiten des Speicherns in modernen Webanwendungen neigen sich meiner Meinung nach dem Ende zu.

Kommentare sind geschlossen.

An den Anfang scrollen