Icons

Inhaltsverzeichnis

• Allgemeines
• Zeichnerische Gestaltung
• Rahmen
• Farbe
• Beschriftung
• Vereinheitlichung
• Checkliste für gute Icons
• Abschließende Bemerkung

Allgemeines

Untersuchungen von Verkehrszeichen haben gezeigt, daß ikonische Zeichen doppelt so schnell und in doppelter Entfernung "gelesen" werden können wie beschriftete.

Ein weiterer Vorteil von Icons ist, daß man mit ihnen auf weniger Fläche dasselbe wie mit einem Text aussagen kann, also Platz spart.

Sinnvoll ist es, einem Icon eine charakteristische Form zu geben. Damit kann es ein Anwender schneller auffinden und zuordnen - selbst bei einem vollen Bildschirm. Die Fähigkeit sich an graphische Darstellungen zu erinnern und sie wiederzuerkennen ist sehr groß. Lionel Standing hat 1973 in einer Studie z.B. nachgewiesen, daß Testpersonen nach dem Zeigen von 2500 Dias (jeweils 10 Sekunden lang) aus zwei danach gleichzeitig gezeigten Dias mit 85-95%iger Sicherheit das bereits gesehene herausfinden konnten.

Soweit zur Theorie des Icons. Jeder wird sich selbst noch einige weitere Vorteile von Icons gegenüber Texten vorstellen können. Nur, was zeichnet ein gutes Icon aus?

Jedes Symbol muß eine starke und direkte Assoziation mit der gewünschten Bedeutung wecken. Wenn man ein Symbol auswählt, sollte man auf solche zurückgreifen, die den Gedanken, den man mitteilen will, auf natürliche und direkte Weise nahelegt. Am besten nimmt man Symbole, die den Gegenstand selbst zeigen oder ihm zumindest physisch ähneln. Ist das nicht möglich, so sollte man ein verwandtes Objekt darstellen. Nur wenn auch das nicht möglich ist, sollte man eine abstraktere Symbolik heranziehen, wie z.B. Farbe, Form, Position, Muster und Struktur.

	Inhaltsverzeichnis

Zeichnerische Gestaltung

Fotografie

Diese Methode sollte angewandt werden, wenn ein hoher Grad an Detailtreue erforderlich ist, z.B. um berühmte Wahrzeichen darzustellen. Probleme können dabei aber wegen der benötigten Fläche (ein Icon von 32x32 eignet sich höchstens für kleinste Bilder) und der verwendeten Farbanzahl auftreten. Grundsätzlich sollte man auch nur bekannte Objekte so darstellen.

Zeichnung

Das ist die wohl am häufigsten verwendete Methode beim Zeichnen von Icons. Hauptmerkmal sind klar umrissene Konturen und die Darstellung charakteristischer Details im Inneren.

Karikatur

Diese Methode ist der vereinfachten Zeichnung vergleichbar, nur daß hier (daher auch der Name) entscheidende Details gezielt übertrieben werden, hauptsächlich, um die Aufmerksamkeit auf ein kleines, entscheidendes Merkmal zu lenken. Die Karikatur eignet sich gut, um komplizierte Details zu vereinfachen

Umriß

Eine noch stärkere Vereinfachung als bei der Karrikatur oder der Zeichnung. Die Objekte werden nur noch im Umriß dargestellt, und nur auffällige Details im Inneren werden gezeigt. Gut geeignet ist diese Methode für Objekte mit charakteristischem Profil, wie ein Flugzeug oder ein Buch.

Silhouette

Dies ist die einfachste Methode. Es wird eine Form in einer einzigen, vom Hintergrund sich abhebenden Farbe dargestellt. Eingesetzt wird sie, um unwesentliche Details zu verbergen (wie z.B. bei Verkehrszeichen), aber auch bei Objekten, die zu dünn sind, um mit einer separaten Umrißlinie dargestellt zu werden (z.B. ein Kabel mit Stecker).

	Inhaltsverzeichnis

Rahmen

Ein Rahmen zeigt eindeutig die Ausdehnung des Icons. Er teilt also mit, wo das eine Icon endet und wo das nächste beginnt. Für ein interaktives System ist daher der Einsatz von Rahmen sinnvoll, da der Anwender genau sehen kann, wo sich eine aktivierbare Fläche befindet und wo nicht.
Ferner verleihen Rahmen den Icons ein einheitliches Aussehen. Damit sieht die gesamte Oberfläche aufgeräumter aus.

Ein wesentlicher Nachteil ist, daß den Icons ihr charakteristisches Aussehen verloren geht. Damit ist nicht mehr auf den ersten Blick (anhand der Form) erkennbar, welches Icon man wo findet - was natürlich erst bei vollen Oberflächen ein echtes Problem darstellt.
Ferner müssen die eigentlichen Icons natürlich kleiner werden, stellt man den Icons nicht nach Hinzufügen des Rahmens mehr Platz zur Verfügung.

Sofern man keine einheitlichen Rahmen verwendet, kann man den Icons noch eine zusätzliche Bedeutung hinzufügen - bzw. die bisher dargestellte Bedeutung deutlicher herausstellen. Auch kann man Icons auf diese Art und Weise gruppieren. Aber es geht natürlich einer der Vorteile verloren: die Übersichtlichkeit.

	Inhaltsverzeichnis

Farbe

1. Den Entwurf zunächst in Schwarz/Weiß anfertigen.
2. Danach Farben hinzufügen, um die Wirkung zu verbessern.
3. Farben redundant einsetzen. Die Farbe darf nicht das einzige charakteristische Merkmal sein.
4. Kräftige Farbkombinationen wählen. Kontrastschwache Icons büßen ihre Lesbarkeit ein.

• Um die Aufmerksamkeit auf das Objekt zu lenken
• Um das Auffinden zu beschleunigen
• Um das Erkennen zu erleichtern
• Um den Aufbau zu verdeutlichen
• Um das Objekt einzuordnen oder quantitativ zu bestimmen
• Um die Farben selbst darzustellen
• Um das Auge des Anwenders anzusprechen und zu erfreuen
• Um eine Emotion zu verstärken oder zu wecken

	Inhaltsverzeichnis

Beschriftung

Die Beschriftung kann man als Bildunterschrift, als Titel (Bildüberschrift), als Anmerkung (neben dem Icon), als Bildkomponente (im Icon mit enthalten) oder an anderer Stelle (dann aber deutlich machen, daß Text und Icon zusammengehören!) zu finden sein.

	Inhaltsverzeichnis

Vereinheitlichung

	Inhaltsverzeichnis

Checkliste für gute Icons

• Verständlichkeit
  • Läßt das Bild den Betrachter spontan an das gewünschte Konzept denken?
  • Erscheint es zusammen mit einer verständlichen Beschriftung?
  • Ist die Assoziation zwischen dem Bild und dem dargestellten Konzept bei allen Anwendern gleich stark?
  • Basiert die Bedeutung auf einer direkten Assoziation, beispielsweise auf einer physischen Ähnlichkeit? Auf einer ausgeprägten Analogie? Oder auf einer allgemeingültigen Assoziation?
• Eindeutigkeit
  • Wird das Bild nur mit einem Konzept assoziiert?
  • Wird das Konzept nur mit einem Bild assoziiert?
  • Stehen zusätzliche Hinweismittel (Beschriftung, andere Icons, Dokumentation) zur Verfügung, um eine eventuelle Mehrdeutigkeit auszuschließen?
• Informativ
  • Warum ist das Konzept wichtig?
  • Wie paßt dieses Icon mit verwandten Icons zusammen? Welcher Kategorie gehört es an?
  • Wie wichtig ist dieses Icon im Verhältnis zu anderen?
  • Wie interagiert der Anwender mit dem Icon?
  • Was bewirkt das Auswählen des Icons für den Anwender?
  • Wie verfährt der Anwender weiter, nachdem er das Icon ausgewählt hat?
• Unverwechselbar
  • Unterscheidet sich das Icon von anderen?
  • Läßt das Icon deutlich erkennen, in welcher Weise es sich von allen anderen Icons unterscheidet, mit denen es verwechselt werden könnte?
  • Treten die unterscheidenden Merkmale in einem Satz von Alternativen deutlich zutage?
• Einprägsam
  • Stellt es, wenn möglich, konkrete Objekte in Aktion dar? Werden Aktionen als Operationen an konkreten Objekten dargestellt?
  • Ist das Bild eindrucksvoll und lebendig?
  • Haben Sie es in der Benutzeroberfläche, in der Dokumentation und in Schulungskursen durchweg einheitlich verwendet?
  • Ist das Icon eindeutig durch eine Beschriftung gekennzeichnet?
  • Ist sein Platz im Schema der Benutzeroberfläche klar?
• Kohärent
  • Geht klar hervor, wo ein Icon endet und ein anderes beginnt?
  • Stellt das Icon ein einheitliches Bild dar und nicht eine Sammlung aus Punkten, Linien und anderen visuellen Objekten?
  • Lenkt das Design die Aufmerksamkeit des Betrachters auf den Inhalt des Icons?
  • Sind weniger bedeutende Elemente dem Hauptgegenstand eindeutig untergeordnet?
  • Dienen die Ränder dazu, die darin enthaltenen Objekte zu vereinheitlichen?
• Bekannt
  • Sind die Objekte im Icon den Anwendern bekannt?
  • Sind die Objekte am Arbeitsplatz oder in der häuslichen Umgebung des Anwenders gebräuchlich?
  • Können die Anwender ihr Wissen über das reale Objekt auf dessen Verwendung im Icon anwenden?
• Lesbar
  • Wird das Icon immer mit einem ausreichenden Vordergrund/Hintergrund-Kontrast angezeigt?
  • Werden ausreichend breite Linien und Formen verwendet?
  • Ist das Icon stets unter den tatsächlichen Betrachtungsbedingungen lesbar, beispielsweise auch an weniger guten Monitoren, an schlecht eingestellten oder blendenden Bildschirmen usw.?
  • Sind die Icons im tatsächlichen Betrachtungsabstand lesbar? Kann der Anwender die Icons immer noch auf dem Bildschirm erkennen, wenn er seine Füße auf den Tisch legt, die Tastatur auf den Schoß nimmt und sich zurücklehnt?
  • Können Anwender mit weit verbreiteten Sehschwächen (beispielsweise Kurzsichtigkeit, Astigmatismus, Weitsichtigkeit und Farbenblindheit) das Icon erkennen?
  • Haben Sie alle Farb- und Größenkombinationen getestet, in denen das Icon angezeigt wird?
• Zahlenmäßig wenige
  • Liegt die Anzahl der willkürlich gewählten Symbole unter 20?
  • Falls eine große Anzahl von Icons benutzt wird, setzen sich diese Icons aus einer kleinen Anzahl bekannter Bilder zusammen?
  • Werden alle Icons in einer leicht zugänglichen Online-Dokumentation oder in Handbüchern erläutert?
  • Sind all diese Icons erforderlich? Stellen sie wirklich die beste Methode dar, um den Anforderungen zu genügen?
• Kompakt
  • Ist jedes Objekt, jede Linie, jedes Pixel in dem Icon notwendig?
  • Ist der Rahmen erforderlich? Oder könnte dieser Raum anders besser genutzt werden?
  • Sind Icons wirklich kompakter als ähnlich wirkungsvolle Beschriftungen?
• Ansprechend
  • Werden in dem Bild saubere Kanten und Linien verwendet?
  • Sind die Bestandteile optisch ausgewogen und stabil?
  • Ist das Icon so proportioniert, daß es in den vefügbaren Platz hineinpaßt?
  • Werden in dem Bild harmonische Farben, Muster und Tonwerte verwendet?
• Ausbaufähig
  • Kann das Bild kleiner gezeichnet werden? Ist es dann noch zu erkennen?
  • Erfüllt das Bild sowohl in Schwarzweiß als auch in Farbe seine Funktion?
  • Kann das Bild als Element einer ikonischen Sprache verwendet werden?
  • Kann das Bild zu einem Rahmen umgestaltet werden, mit dem andere Objekte umgeben werden?
  • Kann das Bild als Emblem, Warenzeichen oder dekoratives Element auf Verpackungskartons, in Handbüchern und in Broschüren verwendet werden?

	Inhaltsverzeichnis

Abschließende Bemerkung