Usability-Semiotik: Richtlinen für die Entwicklung von Icon-Metaphern

Bei der Entwicklung von Icons bestimmt die Metapher Wahrnehmung und Verständnis. Wir präsentieren sieben Richtlinien, die dabei helfen ein homogenes Set von Icons mit hoher Usability zu entwickeln.

Semiotik ist die Lehre von Zeichen und beschreibt Wahrnehmung, Verständnis und Kommunikation von Symbolen. Im Rahmen der Computerwissenschaft ist Semiotik insbesondere bei der Gestaltung von Icons von Bedeutung. Eine perfekte Metapher ist die Voraussetzung, damit Anwender eine Funktion eindeutig mit einer visuellen Darstellung assoziieren. Der folgende Beitrag resümiert einige Richtlinien die aus einer Untersuchung mit über 3000 LibreOffice-Anwendern abgeleitet wurden.

Einleitung

Eine Vielzahl Guidelines unterstützen Designer beim Erstellen von Icons. So definiert der Microsoft Styleguide zum Beispiel präzise, wie Perspektive, Lichtquelle, Schatten, Farbsättigung, Größe und Detaillierungsgrad usw. bei Aero-Icons zu gestalten sind. Eine ähnliche Standardisierung gibt es bei den meisten Projekten, unter anderem auch für das Flat Icon Set von LibreOffice. Und es existieren andere, eher generische Auflistungen mit Tipps zur Gestaltung von Icons, zum Beispiel hier und hier.

All diese Anleitungen dienen primär der Entwicklung eines konsistenten Look-and-Feels. Ein Icon kommt jedoch selten allein. Daher sollte die Integration in ein Set beachtet werden, wodurch die Aspekte Homogenität (die Icons eines Sets sollten als zusammengehörig verstanden werden) und Heterogenität (innerhalb eines Sets muss die Gefahr einer Verwechslung minimiert werden) Bedeutung erlangen. Eine gute Auflistung von Fehlern, die man bei der Gestaltung eines Sets machen kann, gibt es hier.

Damit ein Symbol einer Funktion eindeutig zugeordnet werden kann, ist neben den Aspekten Homogenität und Heterogenität und einer graphisch angemessenen Gestaltung die eindeutige Beziehung zwischen der zugrunde liegenden Funktion und der visuellen Abbildung eine Voraussetzung. Dieser Zusammenhang wird als Metapher bezeichnet.

Bei der Entwicklung eines neuen Sets, sollten zuerst immer die Metaphern definiert werden. Sie müssen die Funktion eindeutig repräsentieren und leicht verständlich sein. Anhand einer Untersuchung zum Icon-Set von LibreOffice fassen wir im Folgenden die wichtigsten Aspekte zusammen.

 1. Definiere für jede Funktion eine individuelle Metapher.

Ein Set soll einerseits homogen sein und die Zusammengehörigkeit der Items zeigen. Anderseits muss Set-intern auch eine ausreichende Differenzierung zwischen den Elementen vorhanden sein, damit es zu keiner Verwechslung kommt. Dieses Problem wird insbesondere dann relevant, wenn eine Metapher für verschiedene Funktionen genutzt wird. In unserer Untersuchung zu LibreOffice wurde dies bei den Icons der Funktionen Format übertragen und Zeichenfunktionen anzeigen deutlich: beide benutzen einen Pinsel zur Darstellung (What is a pencil used for?).

Abbildung 1: Die Metapher „Pinsel“ wird für zwei verschiedene Funktionen genutzt.

2. Hinterfrage auch solche Metaphern, die seit langem genutzt werden.

Viele Metaphern sind im Laufe der Zeit so stark ikonographiert worden, dass sie in den allgemeinen Gebrauch eingegangen sind. Zum Beispiel wird bei Musikgeräten (und entsprechender Software) seit mehr als fünfzig Jahren ein grünes Dreieck für Wiedergabe, ein graues Viereck für Stopp und ein roter Kreis für Aufnahme genutzt. Etwas weniger alt aber dennoch vergleichbar bekannt sind Funktionen, die wir im Bereich der Textverarbeitung untersucht haben. Bei der detaillierten Analyse zu Kopieren/Einfügen (How abstract can an icon be?) sowie Rückgängig/Wiederherstellen (Can a direction in time be displayed by spatial signs?) zeigt sich aber, dass trotz der üblichen Darstellung dieser Icons eine Tendenz zur wechselseitigen Verwechslung besteht.

Abbildung 2: Die Metapher der Icons für Kopieren und Einfügen (hier aus dem Tango-Set) bilden nicht die natürliche Funktion ab.

Änderungen bei quasi standardisierten Lösungen sollten immer nur mit größter Vorsicht vorgenommen werden. Jedoch wurden zu den spezifischen Problemen eine Reihe sehr interessanter Vorschläge in den Kommentaren diskutiert. Zum Beispiel sind die Tastenkürzel Strg+C und Strg+V so bekannt, dass ein Icon auf Basis dieser Informationen gestaltet werden könnte (vgl. Kommentar von #4 von Robert Forsyth).

 3. Auch antiquierte Metaphern können gut funktionieren.

Andererseits bedürfen nicht alle konventionell genutzten Metaphern einer Überarbeitung. Auch nicht unbedingt dann, wenn die zugrunde liegende Funktion mittlerweile nicht mehr auf diese Art und Weise genutzt wird. In unserer Untersuchung zeigte sich dies im Fall von Speichern (About Antiquated Metaphors in Icons). Die Darstellung einer Diskette ist intuitiv mit dieser Funktion verbunden und übertrifft die alternative Darstellung – auch wenn viele Teilnehmer noch nie eine Diskette benutzt haben.

Abbildung 3: Die Metapher Diskette des Oxygen-Sets ist der alternativen Darstellung aus dem Tango-Set überlegen.

 4. Passe den Abstraktionsgrad der Metapher an die Bekanntheit der Funktion an.

Bei der Entwicklung einer Metapher ist der Grad der Abstraktion vom Original von großer Bedeutung. Ein Blitz kann für „schnell“ oder „unmittelbar“ stehen, er kann aber auch Energie bedeuten bzw. als Gefahr verstanden werden. Als eine Richtlinie kann gelten: Je bekannter eine Funktion ist, desto abstrakter kann die Metapher gewählt werden. Hingegen brauchen weniger bekannte Funktionen eine bildliche Unterstützung und explizite Metaphern. Bei LibreOffice gibt es einige selten genutzte Funktionen (unter anderem Navigator: Where does the Navigator lead you?), die entweder weniger prominent platziert werden sollten oder ein weniger abstraktes Icon benötigen.

Abbildung 4: Die Icons für Navigator sind als stilisierte Kompassrose zwar eine gute Abstraktion der (englischen) Funktionsbezeichnung; als Hinweis für das eigentliche „Dokumentenstruktur anzeigen“ sind sie jedoch wenig nützlich.

 5. Vermeide unspezifische Signale wie zum Beispiel Pfeile.

Jeder menschlichen Handlung und jeder Softwareprozedur ist eine Sequenz immanent. Es liegt nahe, diese Sequenz in die Darstellung des Icons zu übernehmen und zum Beispiel das Ablegen von Daten aus dem Arbeitsspeicher in eine Datei durch einen nach unten gerichteten Pfeil abzubilden (vgl. Abbildung 2). Deutlich wird die Vorliebe von Designern für Pfeile auch in den Kommentaren zu den bisherigen Beiträgen: nicht selten werden Lösungen vorgeschlagen, die Pfeile beinhalten. Leicht führt dies jedoch zu einer inflationären Verwendung. Nicht unproblematisch kann die Verwendung von Pfeilen auch bei einer linksläufigen Lokalisierung oder mehrdeutigen Verwendung sein (vgl. Can a direction in time be displayed by spatial signs?). Daher sollte beim Finden der Metapher genau geprüft werden, ob eine Information spezifisch für die darzustellende Information ist.

Abbildung 5: Der Pfeil links mag die Funktion „Steuerzeichen (anzeigen)“ auf den ersten Blick zwar gut beschreiben. Dem eindeutigen „Alinea“-Symbol rechts (das sich durch Bestwerte im Test auszeichnete) ist der Pfeil jedoch unterlegen..

6. Gestalte Metaphern unabhängig von Sprache und Kultur.

Bei der Gestaltung eines Icons muss beachtet werden, dass eine Funktion im Original eine Bezeichnung haben kann, die nicht international verstanden wird. Ein bekanntes Beispiel hierfür ist der Begriff „Burn CD“ oder „CD brennen“ was auf Französisch im Sinne von gravieren („Graveur CD“) übersetzt wird. Ein Icon sollte dementsprechend keine Metapher auf Basis von Feuer nutzen. Ebenfalls werden Farben unterschiedlich verstanden und auch Piktogramme sind nicht zwingend standardisiert. In unserer Untersuchung zu LibreOffice fällt dies zum Beispiel beim Icon der Funktion Hyperlink bei Oxygen auf. Der abgebildete „Link“ ist nur auf Englisch ein Kettenglied und erzielt daher im Test auch nur einen Wert von 8.8 (bspw. ist der Wert mit 8.2 für Antworten auf Deutsch schlechter).

Abbildung 6: Das Icon für Hyperlink des Oxygen-Sets ist nicht sprachunabhängig gestaltet.

 7. Vereinfache wenn möglich.

Ein Icon soll durch die symbolische Darstellung schnell erkannt und nicht mit anderen Icons verwechselt werden. Je einfacher die Darstellung ist, desto besser werden diese Voraussetzungen erfüllt. Zwei Wege führen zu einfachen Lösungen: eine perfekte Metapher, wie zum Beispiel eine Schere für die Funktion Ausschneiden, oder ein Branding bzw. die Etablierung einer eindeutigen Symbolik, wie zum Beispiel das Symbol von Adobe Acrobat für die Ausgabe von PDF Dokumenten. Solche Icons führen zu Bestwerten im Test.

cut
Abbildung 7: Eindeutige Icons zeichnen sich häufig durch eine schlichte Symbolik aus. Das Oxygen-Icon für „Direktes Exportieren als PDF“ erzielt den Höchstwert von 10.