Grundregeln der Icongestaltung

In der Vergangenheit habe ich mich intensiv mit der Icongestaltung sowie dem Interfacedesign auseinander gesetzt. Folgend möchte ich eine kurze Einführung der Grundregeln zur Konzeption und Gestaltung von Icons niederlegen.

Was ist im Interfacedesign unter “Icon” zu verstehen?
[das; deutsch: Symbol, Piktogramm, Sinnbild]

Bei dem EDV Begriff Icon handelt es sich um eine sinnbildliche Darstellung für ein Objekt vorwiegend bei grafischen Benutzeroberflächen wie dem Betriebssystem Windows, Anwendungsprogrammen oder Webseiten. Diese Icons stellen zum Beispiel Objekte wie Anwendungsprogramme, Verknüpfungen, Dateien, Laufwerke und Datenträger dar. ZUm Anfertigen solcher Icons benötigt man einen sogenannten Icon-Editor.

Icon-Beispiel von famfamfam.com:

Gründe für Icons
- macht Produkte leichter verständlich - teilweise sogar intuitiv
- erleichtert das Lernen
- verringert den Bedarf an Informationsvermittlung per Handbuch
- verbessert den Zugriff auf Informationen
- erhöht die Motivation der Anwender.
- Erfüllung der Benutzererwartung
- Schnelle Wiedererkennung
- Sprachenunabhängigkeit
- Kompatibilität mit anderen GUI-Applikationen
- Geringer Platzbedarf auf der Bedienoberfläche

Gründe gegen Icons
William Horton formuliert in seinem Werk Das Icon Buch wie folgt: “In der Regel lösen Icons eine der beiden folgenden Reaktionen aus: Entweder hat der Betroffene seine Freude an den cleveren, hilfreichen Bildchen, oder er hält sie für unverständliche Rätsel, frustrierend und sinnlos.”

Einsatz und Gestaltung von Icons sollten stets das Ziel haben, den Benutzer einer Software oder einer Internetseite bei der Steuerung zu unterstützen. In dem Moment, wo etwa zu viele Bildchen bei der Navigation zu Verwirrung führen, oder die Aussage der Icons nicht eindeutig ist, kann eine andere Form der Steuerung, beispielsweise durch Texteinträge, durchaus seine Berechtigung haben.
Anwendungen, die ausschließlich mit Icons arbeiten, sind oft schwer zu erlernen.
Eine Kombination von Bildern und Text gilt daher als die zuverlässigste und bedienerfreundlichste Art der Softwarenavigation.

Quellen:
http://www.tanner.de/de/fachportal-technische-dokumentation-redaktionssysteme/artikel/grafik/icons_gestalten.html
http://www.doku.info/viewarticle.php?art=74

Grundregeln der Icongestaltung

Definition Icon Gestaltung
Sie können komplexe Zusammenhänge verdeutlichen, ermöglichen ein schnelles und intuitives interagieren und sind über Sprachgrenzen hinweg verständlich. Bei der Entwicklung von International zu verwendenden Symbole achten wir darauf dass diese im jeweiligen Kulturkreis allgemein verständlich sind und nicht gegen dort übliche Sitten verstoßen. so dürfen beispielsweise in den arabischen Ländern keine nackten Körperteile gezeigt werden, dies gilt als obszön…
Um den Lernaufwand des Anwenders so gering wie möglich zu halten, entwickeln wir zu beginn der jeweiligen Entwurfsphase einen Symbol-Baukasten und die dazugehörige Icon-grammatik.
Durch die Kombination der Grundelemente können somit verschiedenste Sachverhalte erklärt werden, ohne dass der Benutzer ständig neue Symbole erlernen muss.

Quelle: http://wachenfeld-golla.de/spektrum/icon-gestaltung/

Faustregel
Norm EN ISO 9241-10
Die Norm EN ISO 9241-10 sollte sich jeder gute Icongestalter als obersten Grundsatz immer wieder in Erinnerung rufen: “Schaltflächen, Icons und Menüeinträge sollten den Benutzer mit einfachen und flexiblen Dialogwegen zum Ziel seiner Aufgabe führen und damit die Anwendung steuerbar machen.”

Einheitlichkeit
Alle Icons einer Anwendung sollten in Form und Stil einheitlich gestaltet sein.
Das entbindet selbstverständlich nicht davon, Icons unverwechselbar zu definieren.

Standardisierung
Nach Möglichkeit sollte sich die Gestaltung an gewachsenen Standards orientieren. Windows setzt durch seinen hohen Verbreitungsgrad in dieser Hinsicht Maßstäbe. Betrachten Sie z. B. das Symbol zum Speichern einer Datei.
Es ist allen Windows-Anwendern bekannt - das sind gewiss recht viele - und jeder kennt die Funktion, die sich hinter dem Icon verbirgt.

Übertreibung
Ein Stilmittel bei der Gestaltung aussagekräftiger Icons ist die Übertreibung, um das Wesentliche der mit dem Icon verknüpften Funktion deutlich zu machen. Ein Ausschnitt aus einem Dialogfenster von Microsoft Word XP verdeutlicht das:

“Im Fenster Nummerierung und Aufzählungszeichen wird das Format der Listennummerierung festgelegt. Die unterschiedlich formatierten Zahlen stehen daher übertrieben groß im Vordergrund, während der Listentext, hier nur mit Strichen angedeutet, in den Hintergrund rückt.”

Kontextbezug
Der Kontext, also das Umfeld, in dem das Icon auf der Bedienoberfläche erscheint, spielt eine wesentliche Rolle. Es gibt hervorragende Icons, die jedoch ihre Klarheit und Unverwechselbarkeit nur im Kontext mit anderen Symbolen erlangen.

Zielgruppenorientierung
Oft ergibt sich die Bedeutung eines Icons erst im Zusammenspiel von Kontext und individueller Betrachtung. Deshalb ist die Zielgruppe beim Entwurf eines Icons stets mit einzubeziehen. So können beispielsweise Symbole, die in unseren Kulturkreisen eine ganz bestimmte Bedeutung haben, in einem anderen Kulturkreis völlig andere Assoziationen hervorrufen.

Farbwahl
Verwenden Sie nur wenige Farben, dafür aber klare Formen. Zu viele Farben stören oftmals den körperhaften Gesamteindruck. Bedenken Sie außerdem: Briefkästen sind nicht überall gelb.

Quelle: http://www.doku.info/viewarticle.php?art=74

Vorgehensweise bei der Gestaltung
1. Definieren Sie die Nutzung und den Zweck des Icons.
2. Beschreiben Sie die Zielgruppe, und berücksichtigen Sie dabei ihre Vorkenntnisse und Erfahrungen.
3. Sammeln Sie Ideen.
4. Skizzieren Sie das Icon auf Papier.
5. Testen Sie die Skizze bei Vertretern der Zielgruppe, indem Sie das Icon zeigen und nach seiner Bedeutung bzw. Funktion fragen.
6. Erstellen Sie das Icon mit einem geeigneten Editor.
7. Führen Sie erneut Nutzertests durch, bei denen Sie die Erwartungen und Wahrnehmungen der Benutzer sowie die Erlernbarkeit des Icons prüfen.
Quelle: http://www.doku.info/viewarticle.php?art=74

Hier eine Antwort auf die Frage “Was ist überhaupt ein Icon?“:
Icon ansich: http://de.wikipedia.org/wiki/Icon
Icon PC: http://de.wikipedia.org/wiki/Icon_%28Computer%29

Quelle der Recherche bzw. der Originaltexte:
http://www.mediengestalter.info/forum/29/ap-07-mediendesign-nonprint-icon-gestaltung-79760-1.html
http://www.webstyle-times.de/artikel/webdesign/usability-barrierefreiheit/icon-gestaltung.html

Bild: Simplicio - A free icon set

Random Posts

About this entry

You’re currently reading “Grundregeln der Icongestaltung,” an entry on Question the validity

Published:
09.09.08 / 6pm
The author:
Rene
Category:
GFX, Mediengestaltung, Webdesign
Comments:
No comments - Have your say!
Related Posts:

Random Posts

Find more interesting stuff from "qtv":