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.
Was passiert bei einem Import? Eine Datei wird an den Server gesendet und somit hochgeladen und importiert -> Warum dann beim Import Pfeil nach unten? Genau so beim Export.. warum Pfeil nach Oben? Wahrscheinlich wurde das von euch verwechselt aber so wie es im Moment da steht ist es einfach falsch.
Das ist kein User Centered Design, was in Deinem Kommentar zum Ausdruck kommt, sondern Server Centered Design. #Denkfehler
Hier einmal die entsprechenden Icons aus dem von mir genannten Bootsrap-Framework:
Hier werden beim Export und Import aber auch Server symbolisiert bzw. irgendwas rechteckiges mit LED, dass man mit einem Server gleichsetzt. Das ist genau das, was NetzBlogR schreibt.
Bei Google wird aber eine Art Postkorb gezeigt, “der bei mir auf dem Schreibtisch steht”.
Also macht Google alles richtig!
Ein gutes Beispiel dafür, wie missverständlich Icons sind. Das ist übrigens die Kernaussage des Artikels. Was Sie nämlich als Server deuten, ist zunächst einmal – ganz allgemein – eine Festplatte. Es geht um Hardware, und damit ist explizit auch der eigene Rechner eingeschlossen, der bekanntlich auch LED besitzt. „Der User“ unterscheidet nicht zwischen externem Server und eigenem PC, Webworker offenbar sehr wohl.
Dass viele Kommentierer die genannten Designsprachen und definierten Webstandards leugenen, überrascht mich. Im User Centered Design steht der User im Mittelpunkt, und nicht die Serverhardware.
Es geht hier nicht um Leugnen oder ähnliches.
Es gibt hier einen Widerspruch zwischen Theorie und Praxis.
Das zeigt ja auch die große Anzahl an Kommentierern , die Ihnen widersprechen.
Ich akzeptierte Ihre Meinung, dass es theoretisch falsch ist, aber warum sehen Sie nicht ein, dass es Otto-Normal-Verbraucher genauso verstehen, wie Google es meint.
Interessanter Punkt. Ich möchte bestreiten, dass es sich bei den Anwendern von GoogleAnalytics um den Otto-Normal-Verbraucher handelt. Das sind Webmacher, Webworker, Webdesigner, etc. Fachleute. Und es sind Fachleute, Webdesigner und Webworker, die für das Interface von GoogleAnalytis verantwortlich sind. Mein Eindruck ist, dass hier Fachleute die eigene, von Server-Technik bestimmte INTERNE Sichtweise zum User-Prinzip erklärt haben. Das ist – und war seit je her – mit die wichtigste Ursache für UI-Konflikte. Denn so erreicht man nicht den User mit seinen Bedürfnissen. Den kümmert nicht welche Daten von welchem Server irgendwo hin befödert werden. Er möchte die Info auf seinem Schreibtisch (#Metapher).
Und nur weil Fachleute Daten bewegen, sollte es dafür keine eigene Icon-Fachsprache geben. Wenn das Schule machte, führte dies nur zu noch mehr Missverständnissen auf Seiten der User.
So nun mein letzter Kommentar für heute :-)
Wer sagt das??? Muss man als Benutzer nun erst irgendwelche “Übersetzungen-von-Icon-in-Bedeutung” lesen, damit man weiß, was der Designer wirklich meinte oder sollte nicht nur mit Bauchgefühl herangehen?
Dass es sich bei dem Boostrap-Export-Icon explizit um die Darstellung eines Servers handelt, lässt sich deshalb nicht eindeutig sagen, da die Darstellung zu vereinfacht ist. Der kleine Balken samt Pixelpunkt könnte einen Server darstellen, in jedem Fall können wir davon ausgehen, dass hiermit etwas Technisches, eine Hardware gemeint ist.
Um die Bedeutung eines Icons zu verstehen, müssen wir die visuelle Darstellung erst in eine Sprache übersetzen. Aber genau daran scheitern User oftmals, weil sie es mit Zeichen zu tun bekommen, die für sie missverständlich oder sogar unverständlich sind. Server? Festplatte? PC? Eben. Dann lieber kein Icon, als ein missverständliches.
Vorschlag zur Güte: Ein Pfeil nach oben wäre dann richtig, wenn sich darunter nicht das gezeigte Ablagefach, sondern ein Server befände. Von dem holt man dann tatsächlich die Daten weg. :-)
Je mehr Kommentare hier ankommen, desto klarer wird, dass du dich hier leider total verrannt hast. Deine Argumentation geht komplett an der Realität und dem Verständnis der Anwender vorbei.
Vielleicht kannst du ja mal einen Artikel darüber schreiben, ob das Scrollen eines Fensters, das bewirkt, dass ich den unteren Teil sehen kann, “hochscrollen” oder “runterscrollen” heißt.
Das war jetzt natürlich nicht ganz erst gemeint. Es soll nur zeigen, dass es immer auf den Standpunkt des Benutzers ankommt. Und für einen Benutzer ist ein Export definitiv ein Download.
Und die in den genannten UI-Designsprachen definierten Standards einschließlich Bootstrap, auf die ich mich im Artikel beziehe, gehen demnach ebenso an der Realität vorbei. Worauf begründest Du denn Deine Annahme, Dein Verständnis? Eigene Erfahrung?
Mit einer solchen Pauschalaussage kommt man nicht weiter.
Hierin liegt genau das Problem. Es ist toll, dass es einen Standard gibt. Aber wenn der Standard nicht das wiederspiegelt, was der Benutzer denkt bzw. mit einem Icon verknüpft, dann ist das Icon einfach falsch. Bzw. in diesem Fall ist das Icon richtig.
Ja, ich habe selber Erfahrung, da ich seit 20 Jahren Programme schreibe und dadurch natürlich auch Masken designe.
Hierbei hatte ich mal das Problem, dass ich einen Button hatte, der die Funktion hatte, dass eine Rechnung als “bezahlt” markiert wird und gleichzeitig den Zustand “bezahlt” durch einen “Gedrückt-Effekt” widergespiegelt hat. DAS! war ein Problem! :-)
Aber nicht ein Icon, dass für die Benutzer korrekt ist!
Das Icon kann bleiben. Nur gehört dann der Begriff „Export“ gegen „Import“ oder besser noch „als Datei herunterladen“ ausgetauscht sowie „Google Tabellen“ müsste separat gelistet werden.
Also jetzt verdrehen wir aber alles.
Wenn da jetzt “Import” stehen würde, dann wüsste keiner mehr was passiert.
Beim Export empfängt der User und die Software sendet. Ergo, importiert ein User Dateien in eine Software ist das ein Upload. Exportiert er die Datei, ist das ein Download.
Genau so ist es. Findet das Icon auch passend. Achim beschreibt dass man es mit einem Download assoziiert. Ich downloade über diesen Button ja eine PDF oder Excel-Datei. Also passt es doch?! Und dafür jetzt so ein Fass aufzumachen finde ich etwas übertrieben…
Ich würde eher sagen dass der Begriff Export hier dein Problem ist und nicht das Symbol. Denn der Button macht nichts anderes als ein Speichern- oder Download-Button, nur dass die Daten in einem anderen Format abgelegt werden. Aber sie werden eben bei mir abgelegt und nicht bei jemand anderem (außer bei Google Tabellen, falls das evtl. in der Cloud landet, damit kenn ich micht nicht so aus)
So kann man das natürlich auch sehen. Eins von beidem ist jedenfalls falsch. Und das Menü ist semantisch ungeordnet. „Google Tabellen“ gehört hier nicht hinein.
Danke, war im Begriff genau das zu schreiben.
Problem ist hier, dass der Begriff Export aus der Sicht des Servers ist, das Icon jedoch die Anwendersicht wiedergibt. Ist das nicht eine Text/Bild-Schere? Habe das Wort hier gelernt. :-)
Auf den Punkt gebracht! Genau das ist das Problem.
Also für mich passt das Icon. Es impliziert für mich den Download der angezeigten Daten vom Server auf meinen Rechner. Ein Pfeil nach oben würde für mich bedeuten, dass die Daten von meinem Rechner auf den Server geladen werden…das hätte dann aber nichts mit Export zu tun, sondern wäre für mich ein Import. Daher passt es für mich und ich würde es wahrscheinlich genauso umsetzen.
Aber schöne Diskussion hier :-)
Ich finde das Icon auch nicht flasch. Meine (unbedeutende) Sicht der Dinge:
Wenn ich in der Google-Analytics-Oberfläche arbeite, bediene ich von meinem lokalen Endgerät ein entferntes. Will ich nun Inhalte von Google Analytics “weiterreichen”, sehe ich “export” als die korrekte Bezeichnung hierfür (keinesfalls “import”). Gleichzeitig “hole” ich mir in diesem Fall die Daten ja aber vom entfernten auf mein lokales Gerät, ergo ist auch der Pfeil nach unten zumindest nicht verkehrt. Würde da, wie von Achim weiter oben vorgeschlagen, “import” stehen, fände ich das ziemlich schräg.
Nur mal ein Gedankenspiel: Würde da NUR ein Icon sein, also ganz ohne Text – welches würdet ihr für die dahinter verborgenen Funktionen wählen? Pfeil nach oben oder Pfeil nach unten?
Und dann dasselbe in der Nur-Text-Version: “export” oder “import”?
In Kombination, da würde ich fast wetten wollen, kommt dann genau die von Google umgesetzte Variante raus. :-)
Das ist eine verkürzte Darstellung. Meinen Vorschlag habe ich im Abschnitt „Um abschließend einen Lösungsansatz für den durch das Export-Icon verursachten UI-Konflikt aufzuzeigen“ ausführlich umrissen.
Ja, richtig, da habe ich deine Aussage etwas zusammengerafft wiedergegeben. Tut mir leid, das war keine böse Absicht. Ausführlich stand da:
Ich wollte damit ausdrücken, dass von den dort genannten, durchaus plausiblen Vorschlägen für mich das “import” als einziger nicht akzeptabel wäre.
Ich stelle mir gerade die Diskussion beim Google Analytics Team vor. Die einen wollen ein anderes Icon, die nächsten eine anderes Wort oder mehrere Buttons. Bis einer aufsteht und sagt: „ach egal, wir packen alles zusammen, nehmen ein allgemein gültiges Logo mit einer verständlichen Bezeichnung und dann schauen wir wie die Klickzahlen sind.“
„Yeah, lasst uns Tischkicker spielen!“
thumb_up
sentiment_very_satisfied
Tolle Diskussion hier. Mein Senf: Export = Download aus User-Sicht, also Pfeil nach unten ist richtig.
Das Icon wäre schon richtig, die Bezeichnung aber mit “Save As” passender bzw wäre ein diagonaler Pfeil auch eine Möglichkeit gewesen.
Die Idee den Vorgang aus der Perspektive des Servers zu illustrieren halte ich für unsinnig. Der Nutzer bedient das Interface und somit sollte es auch seine Perspektive einnehmen.