Export Icon

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

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

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)

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)

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.

74 Kommentare zu “UI-Design: Kein Icon ist immer besser als ein missverständliches

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

    • Dementsprechend exportiere ich auch Daten in die Anwendung und importiere Daten aus der Anwendung.

      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 ;)

Kommentar verfassen

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