Ikonogramm: Unterschied zwischen den Versionen

Aus InfoWissWiki - Das Wiki der Informationswissenschaft
Zur Navigation springen Zur Suche springen
 
(23 dazwischenliegende Versionen von 4 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
 
[[category:Informationsdesign]]
 
[[category:Informationsdesign]]
== Begriffsklärung: ==
+
== Begriffsklärung==
  
 +
[[definition::Ikonogramme (Synonym: Icons) stellen Informationen graphisch stark vereinfacht dar (z.B. Ampelmännchen, Notausgangschilder etc.).]]
 +
Sie sind ein wichtiger Bestandteil einer graphischen Benutzeroberfläche.
 +
Die wichtigsten Icons befinden sich zum Beispiel auf dem Desktop, auf Symbolleisten oder auf Navigationsleisten von Websites.
  
Ikonogramme sind ein wichtiger Bestandteil einer graphischen Benutzeroberfläche.
+
Ihr Einsatz bezweckt beispielsweise einen schnellen Zugang zu Programmen oder Dateien, und sie erfüllen oft die Funktion von [[Link|Hyperlinks]]. Hyperlinks können neben Ikonogrammen auch Textlinks sein. Dem entsprechend sind Ikonogramme Mittel des Labelings und somit auch des Informationsdesigns.
Davon liegen die wichtigesten zum Beispiel auf dem Desktop, auf Symbolleisten oder auf Navigationsleisten von Websites.
 
 
 
Ihr Einsatz bezweckt beispielsweise einen schnellen Zugang zu Programmen oder Dateien und erfüllen in etwa die gleichen Funktionen wie Hyperlinks. Hyperlinks können sowohl Textlinks, also auch Ikonogramme selbst sein.
 
Dem entsprechend sind Ikonogramme Mittel des Labelings und somit auch der Informationsarchitektur.
 
 
 
== Verständnisprobleme im Umgang mit Ikonogrammen: ==
 
  
 +
== Verständnisprobleme im Umgang mit Ikonogrammen==
  
 
'''Zeichen und Symbol'''
 
'''Zeichen und Symbol'''
  
Ikonogramme im Sinne von graphischen Elementen können auf zwei verschiedene Arten dargestellt werden, die sich aus der Existenz von zwei verschiedenen Arten von Zeichen zurückführen lassen.
+
Ikonogramme im Sinne von graphischen Elementen können auf zwei verschiedene Arten dargestellt werden, die sich auf die Existenz von zwei verschiedenen Arten von Zeichen zurückführen lassen.
 
 
''' 1) Natürliche Zeichen:'''
 
 
 
Natürliche Zeichen zeichnen sich durch ihren variierenden Ikonizitätsgrad aus. Das heißt, dass sie im gewissen Sinne die Wirklichkeit abbilden. 
 
Je höher der Ikonizitätsgrad ist, desto
 
naturgetreuer ist das Zeichen dargestellt und umso besser kann es der Nutzer erkennen.
 
Je niedriger der Ikonizitätsgrad ist, desto abstrakter ist das Zeichen und umso schlechter lässt es sich erkennen und in Verbindung mit der Wirklichkeit setzten.
 
 
 
 
 
'''2) Konventionelle Zeichen (Symbole):'''
 
 
 
Symbole werden durch eine soziale Übereinkunft festgelegt (z.B. Verkehrszeichen).
 
Symbole müssen gewissermaßen „gelernt“ werden, da man sie sich meist nicht ableiten kann.Das ist eben auch das Problem bei Symbolen: Werden sie nicht erkannt, so werden sie auch nich verstanden und können den User somit in einem System fehlleiten.
 
  
== Kontextbezug: ==
+
# '''Natürliche Zeichen:''' Natürliche Zeichen zeichnen sich durch ihren variierenden Ikonizitätsgrad aus. Das heißt, dass sie im gewissen Sinne die Wirklichkeit abbilden. Je höher der Ikonizitätsgrad ist, desto naturgetreuer ist das Zeichen dargestellt und umso besser kann es der Nutzer erkennen. Je niedriger der Ikonizitätsgrad ist, desto abstrakter ist das Zeichen und umso schlechter lässt es sich erkennen und in Verbindung mit der Wirklichkeit setzen.
 +
# '''Konventionelle Zeichen (Symbole): '''Symbole werden durch eine soziale Übereinkunft festgelegt (z.B. Verkehrszeichen). Symbole müssen gewissermaßen „gelernt“ werden, da man sie sich meist nicht ableiten kann. Das ist eben auch das Problem bei Symbolen: Werden sie nicht erkannt, so werden sie auch nicht verstanden und können den User somit in einem System fehlleiten.
  
 +
== Kontextbezug==
  
Ein weiteres Problem im Umgang mit Ikonogrammen ist, dass sie ohne Kontextbezug meist nicht verständlich sind.  
+
Ein weiteres Problem im Umgang mit Ikonogrammen ist, dass sie ohne Kontextbezug meist nicht verständlich sind. Ohne Kontextbezug sind sie oft mehrdeutig, also homonym. Der User verfügt über einen großen Interpretationsspielraum. Aber das, was vom User interpretiert wird, muss noch lange nicht das sein, was der Autor vermitteln will. Es kommt also zu Missverständnissen auf der User-Entwickler-Ebene.  
                                         
 
Ohne Kontextbezug sind sie oft mehrdeutig, also homonym. Der User verfügt über einen großen Interpretationsspielraum.
 
Aber das, was vom User interpretiert wird, muss noch lange nicht das sein, was der Autor vermitteln will. Es kommt also zu Missverständnissen auf der User-Entwickler-Ebene.  
 
  
Um diesen Missverständnissen aus dem Weg zugehen, raten Rosenfeld und Morville dazu Icons möglichst nur in Verbindung mit Textlabels zu verwenden, die sie erläutern.
+
Um diesen Missverständnissen aus dem Weg zugehen, raten Rosenfeld und Morville dazu, Ikonogramme möglichst nur in Verbindung mit erläuternden Textlabels zu verwenden.
  
 
== Einsatz von Ikonogrammen: Pro und Contra ==
 
== Einsatz von Ikonogrammen: Pro und Contra ==
 
  
 
''Pro''
 
''Pro''
  
1) '''schnelle Informationsaufnahme''':
+
#'''schnelle Informationsaufnahme: '''"Texte lesen" nimmt mehr Zeit in Anspruch und benötigt eine höhere kognitive Aktivität.
Texte lesen, nimmt mehr Zeit in Anspruch und benötigt eine höhere kognitive Aktivität.
+
#'''Wiedererkennungswert:''' Ist ein Ikonogramm bereits bekannt, lässt es sich schneller erinnern.
+
#'''Internationalität:''' Ikonogramme ohne Textlabels sind international verständlich, da die Problematik der Sprachbarrieren entfällt.
2) '''Wiedererkennungswert:'''
+
#'''„eye-catcher“:''' Ikonogramme fallen auf und heben sich auf einer Website mehr ab als Textlabels.
ist ein Ikonogramm bereits bekannt, lässt es sich schneller erinnern.
+
#'''Platzeinsparung:''' Ikonogramme nehmen auf einer Website weniger Platz in Anspruch als Texte / Textlabels.
 +
  
3) '''Internationalität:'''
 
Ikonogramme ohne Textlabels sind international verständlich, da
 
die Problematik mit Sprachbarrieren entfällt.
 
 
4) '''„eye-catcher“:'''
 
Ikonogramme fallen auf und heben sich auf einer Website mehr ab als Textlabels.
 
 
5) '''Platzeinsparung:'''
 
Ikonogramme nehmen auf einer Website weniger Platz in Anspruch als Texte / Textlabels.
 
 
 
''Contra''
 
''Contra''
  
1) '''Unklare Bedeutungen:'''
+
#'''Unklare Bedeutungen: '''vgl. [[#Verständnisprobleme im Umgang mit Ikonogrammen|Zeichen und Symbol]]
vgl. Zeichen und Symbole
+
#'''Mehrdeutigkeit: '''Genauso wie Wörter sind auch Ikonogramme ohne Kontextbezüge oft mehrdeutig und ermöglichen einen großen  Interpretationsspielraum, der zu Missverständnissen führen kann.
 
 
2) '''Mehrdeutigkeit:'''
 
Ikonogramme ohne Kontextbezüge sind oft mehrdeutig und ermöglichen einen großen  Interpretationsspielraum, der zu Missverständnissen führen kann.
 
  
 
== „What people do with icons“ ==
 
== „What people do with icons“ ==
  
 
+
#'''Decode an icon:''' Der User dekodiert die Botschaft, die hinter dem Icon steckt. Der Dekodierungsprozess ist ein wichtiger Bestandteil in unserem Alltag. Wir dekodieren ständig unbewusst Botschaften. Komplexe Icons werden in simple Teilsymbole im Kopf zerlegt, wenn sie als Ganzes nicht verstanden werden. Nach der Zerlegung versucht man die separaten Bedeutungen der Einzelteile zu kombinieren („Bottom-Up-Prinzip“).
'''1)''' '''Decode an icon:'''
+
#'''Recognize an icon:''' Ähnliche Icons lassen sich besser und schneller erinnern. Icons sollten deshalb auf Erinnerungen und individuelle Erfahrung zurückgeführt werden können.
 
+
#'''Search for an icon:''' Icons sollten auf Erinnerungen oder Erfahrungen zurückgeführt werden, damit es dem User leichter fällt sie zu dekodieren (vgl. „Decode an icon“)
Der User dekodiert die Botschaft, die hinter dem Icon (als Synonym von Ikonogramm) steckt.
+
#'''Activate an icon:''' Ein Icon wird aktiviert und löst eine, vom Nutzer gesteuerte, Aktion aus (z.B. Klicken eines Buttons).
Der Dekodierungsprozess ist ein großer Bestandteil in unserem
 
Alltag. Wir dekodieren ständig unbewusst Botschaften. Komplexe Icons werden in simple Teilsymbole im Kopf zerlegt, wenn sie als Ganzes nicht verstanden werden. Nach der Zerlegung versucht man die separaten Bedeutungen der Einzelteile zu kombinieren („Buttom-Up-Prinzip“).
 
 
 
 
 
'''2)''' '''Recognize an icon:'''
 
 
 
„Ähnliche“ Icons lassen sich besser & schneller erinnern. Icons sollten deshalb auf Erinnerungen & individuelle Erfahrung zurückgeführt werden.  
 
   
 
 
 
 
 
'''3)''' '''Search for an icon:'''
 
 
 
Icons sollten auf Erinnerungen oder Erfahrungen zurückgeführt werden, damit es dem User leichter fällt sie zu dekodieren   (vgl. „Decode an icon“)
 
 
 
 
'''4)''' '''Aktivate an icon:'''
 
 
 
Ein Icon wird aktiviert und löst eine vom Nutzer gesteuerte Aktion aus (z.B. Klicken eines Buttons).
 
  
 
== Wichtige Regeln zum Design von Ikonogramme ==
 
== Wichtige Regeln zum Design von Ikonogramme ==
  
 +
#Ein Designer von Ikonogrammen weiß nie, ob der Nutzer das versteht, was der Informationsdesigner ihm vermitteln will. Um Missverständnisse zu vermeiden, sollten Ikonogramme möglichst mit Kontextbezug dargestellt werden bzw. durch ein Textlabel näher erläutert sein.
 +
#Ikonogramme sollten begrenzte Ausmaße besitzen, d.h. sie dürfen weder zu klein noch zu groß sein.
 +
#Je komplizierter und abstrakter ein Ikonogramm dargestellt wird, desto schwieriger ist es, es zu erkennen und zu dekodieren. Deshalb sollten sie so simpel und deutlich wie möglich gestaltet sein („Weniger ist mehr“).
  
1)
+
== Internet-Quellen ==
Man muss sich immer die Frage stellen, ob der Nutzer auch das versteht, was der Informationsarchitekt ihm vermitteln will.
 
Um Missverständnisse zu vermeiden, sollten Ikonogramme möglichst nicht ohne Kontextbezug dargestellt werden bzw. durch ein Textlabel näher erläutert sein.
 
  
2)
+
*Korolewski, Nina (2002): Wording. Berlin. Online abrufbar unter:  http://www.korolewski.de/texte/storyboard/06_kategorien.html
Ikonogramme sollten in einem begrenzten Raum dargestellten werden, d.h. sie dürfen weder zu klein, noch zu groß sein.
 
  
3)
+
*Luckhardt, Heinz-Dirk: Labels als Mittel der Informationsarchitektur - über die effiziente Repräsentation von Inhalten im WWW, Virtuelles Handbuch Informationswissenschaft. Online verfügbar unter: http://is.uni-sb.de/studium/handbuch/labeling/index.php
Je komplizierter und je abstrakter ein Ikonogramm dargestellt wird, desto schwieriger ist es es zu erkennen und zu dekodieren.
 
Deshalb sollten sie so simple und deutlich wie möglich gestaltet sein („Weniger ist mehr“).
 
  
== Quellen: ==
+
== Literatur ==
 
   
 
   
 +
*Farkas, David K.; Farkas, Jean B. (2002): Principles of Web Design. New York, NY [u.a.].
  
- H.-D. Luckhardt: Labels als Mittel der Informationsarchitektur - über die effiziente Repräsentation von Inhalten im WWW -(Virtuelles Handbuch Informationswissenschaft)
+
*Harms, Ilse; Luckhardt, Heinz-Dirk (2003): Labels als Mittel der Informationsarchitektur - über die effiziente Repräsentation von Inhalten im WWW. In: magazin forschung, hrsg.: Universität des Saarlandes, Band 1, S.39-45.
http://is.uni-sb.de/studium/handbuch/labeling/index.php
 
  
- Wording: Nina Korolewski (2002, Berlin) http://www.korolewski.de/texte/storyboard/06_kategorien.html
+
*Horton, W.K.: The icon book (1994): visual symbols for computer systems and documentation. New York, NY [u.a.].
 
 
== Literatur: ==
 
 
  
- Farkas, David K. ; Farkas, Jean B.: Principles of Web Design(2002)( New York, NY [u.a.])
+
*Wikipedia-Piktogramm: http://de.wikipedia.org/wiki/Piktogramm (zuletzt besucht am 17.08.2010).
  
- Horton, W.K.: The icon book : visual symbols for computer systems and documentation (1994) (New York, NY [u.a.])
+
==Verwandte Begriffe==
  
- Ilse Harms, H.-D. Luckhardt: Labels als Mittel der
+
*[[related::Graphisches Interface]]
Informationsarchitektur - über die effiziente Repräsentation von Inhalten im WWW – (magazin forschung 1/2003, S.39-45)
+
*[[related::Informationsdesign]]
 +
*[[broader::Interface Design]]

Aktuelle Version vom 17. August 2010, 14:36 Uhr

Begriffsklärung

Ikonogramme (Synonym: Icons) stellen Informationen graphisch stark vereinfacht dar (z.B. Ampelmännchen, Notausgangschilder etc.). Sie sind ein wichtiger Bestandteil einer graphischen Benutzeroberfläche. Die wichtigsten Icons befinden sich zum Beispiel auf dem Desktop, auf Symbolleisten oder auf Navigationsleisten von Websites.

Ihr Einsatz bezweckt beispielsweise einen schnellen Zugang zu Programmen oder Dateien, und sie erfüllen oft die Funktion von Hyperlinks. Hyperlinks können neben Ikonogrammen auch Textlinks sein. Dem entsprechend sind Ikonogramme Mittel des Labelings und somit auch des Informationsdesigns.

Verständnisprobleme im Umgang mit Ikonogrammen

Zeichen und Symbol

Ikonogramme im Sinne von graphischen Elementen können auf zwei verschiedene Arten dargestellt werden, die sich auf die Existenz von zwei verschiedenen Arten von Zeichen zurückführen lassen.

  1. Natürliche Zeichen: Natürliche Zeichen zeichnen sich durch ihren variierenden Ikonizitätsgrad aus. Das heißt, dass sie im gewissen Sinne die Wirklichkeit abbilden. Je höher der Ikonizitätsgrad ist, desto naturgetreuer ist das Zeichen dargestellt und umso besser kann es der Nutzer erkennen. Je niedriger der Ikonizitätsgrad ist, desto abstrakter ist das Zeichen und umso schlechter lässt es sich erkennen und in Verbindung mit der Wirklichkeit setzen.
  2. Konventionelle Zeichen (Symbole): Symbole werden durch eine soziale Übereinkunft festgelegt (z.B. Verkehrszeichen). Symbole müssen gewissermaßen „gelernt“ werden, da man sie sich meist nicht ableiten kann. Das ist eben auch das Problem bei Symbolen: Werden sie nicht erkannt, so werden sie auch nicht verstanden und können den User somit in einem System fehlleiten.

Kontextbezug

Ein weiteres Problem im Umgang mit Ikonogrammen ist, dass sie ohne Kontextbezug meist nicht verständlich sind. Ohne Kontextbezug sind sie oft mehrdeutig, also homonym. Der User verfügt über einen großen Interpretationsspielraum. Aber das, was vom User interpretiert wird, muss noch lange nicht das sein, was der Autor vermitteln will. Es kommt also zu Missverständnissen auf der User-Entwickler-Ebene.

Um diesen Missverständnissen aus dem Weg zugehen, raten Rosenfeld und Morville dazu, Ikonogramme möglichst nur in Verbindung mit erläuternden Textlabels zu verwenden.

Einsatz von Ikonogrammen: Pro und Contra

Pro

  1. schnelle Informationsaufnahme: "Texte lesen" nimmt mehr Zeit in Anspruch und benötigt eine höhere kognitive Aktivität.
  2. Wiedererkennungswert: Ist ein Ikonogramm bereits bekannt, lässt es sich schneller erinnern.
  3. Internationalität: Ikonogramme ohne Textlabels sind international verständlich, da die Problematik der Sprachbarrieren entfällt.
  4. „eye-catcher“: Ikonogramme fallen auf und heben sich auf einer Website mehr ab als Textlabels.
  5. Platzeinsparung: Ikonogramme nehmen auf einer Website weniger Platz in Anspruch als Texte / Textlabels.


Contra

  1. Unklare Bedeutungen: vgl. Zeichen und Symbol
  2. Mehrdeutigkeit: Genauso wie Wörter sind auch Ikonogramme ohne Kontextbezüge oft mehrdeutig und ermöglichen einen großen Interpretationsspielraum, der zu Missverständnissen führen kann.

„What people do with icons“

  1. Decode an icon: Der User dekodiert die Botschaft, die hinter dem Icon steckt. Der Dekodierungsprozess ist ein wichtiger Bestandteil in unserem Alltag. Wir dekodieren ständig unbewusst Botschaften. Komplexe Icons werden in simple Teilsymbole im Kopf zerlegt, wenn sie als Ganzes nicht verstanden werden. Nach der Zerlegung versucht man die separaten Bedeutungen der Einzelteile zu kombinieren („Bottom-Up-Prinzip“).
  2. Recognize an icon: Ähnliche Icons lassen sich besser und schneller erinnern. Icons sollten deshalb auf Erinnerungen und individuelle Erfahrung zurückgeführt werden können.
  3. Search for an icon: Icons sollten auf Erinnerungen oder Erfahrungen zurückgeführt werden, damit es dem User leichter fällt sie zu dekodieren (vgl. „Decode an icon“)
  4. Activate an icon: Ein Icon wird aktiviert und löst eine, vom Nutzer gesteuerte, Aktion aus (z.B. Klicken eines Buttons).

Wichtige Regeln zum Design von Ikonogramme

  1. Ein Designer von Ikonogrammen weiß nie, ob der Nutzer das versteht, was der Informationsdesigner ihm vermitteln will. Um Missverständnisse zu vermeiden, sollten Ikonogramme möglichst mit Kontextbezug dargestellt werden bzw. durch ein Textlabel näher erläutert sein.
  2. Ikonogramme sollten begrenzte Ausmaße besitzen, d.h. sie dürfen weder zu klein noch zu groß sein.
  3. Je komplizierter und abstrakter ein Ikonogramm dargestellt wird, desto schwieriger ist es, es zu erkennen und zu dekodieren. Deshalb sollten sie so simpel und deutlich wie möglich gestaltet sein („Weniger ist mehr“).

Internet-Quellen

Literatur

  • Farkas, David K.; Farkas, Jean B. (2002): Principles of Web Design. New York, NY [u.a.].
  • Harms, Ilse; Luckhardt, Heinz-Dirk (2003): Labels als Mittel der Informationsarchitektur - über die effiziente Repräsentation von Inhalten im WWW. In: magazin forschung, hrsg.: Universität des Saarlandes, Band 1, S.39-45.
  • Horton, W.K.: The icon book (1994): visual symbols for computer systems and documentation. New York, NY [u.a.].

Verwandte Begriffe

… weitere Daten zur Seite „Ikonogramm
Ikonogramme (Synonym: Icons) stellen Informationen graphisch stark vereinfacht dar (z.B. Ampelmännchen, Notausgangschilder etc.). +