previous next Up Title Contents Index

3.5.6.4 Icons


Unter einem Icon versteht man im HTML-Publishing eine kleine aktive Graphik, die das Ziel des mit ihr verbundenen Verweises abbildet, anzeigt oder symbolisiert (vgl. Irler 1990, S. 264, Johnstone URL).[59]

Icons werden häufig verwendet, um Navigationsleisten ansprechend zu gestalten. Sie sind auch ein Phänomen des aktuellen Trends, wieder - wie vor Entwicklung der Lautschrift - vermehrt auf Bildkommunikation zurückzugreifen (vgl. Ratzek 1993, S. 357-361).
Die Alternative zu Icons sind gewöhnliche textuelle Verweise oder Schaltflächen, die lediglich mit Text beschriftet sind. Außerdem können Bild und Text kombiniert werden (siehe Abbildungen).


Homepage des FASK * Übersicht der zentralen Einrichtungen * Homepage der Computeranlagen * Informationen zur EDV

Abbildung 3.5.6-9: textuelle Verweise



Mit Text beschriftete Schaltflächen

Abbildung 3.5.6-10: Mit Text beschriftete Schaltflächen http://applenet.apple.com/hi/images/newnavbar.gif



Bild und Text kombiniert

Abbildung 3.5.6-11: Bild und Text kombiniert http://video.cs.vt.edu:90/cgi-bin/ShowPage/worldwar2.html?Whence=Chronology


Für die Verwendung von Icons spricht, daß mit ihrer Hilfe das Layout ansprechender gestaltet werden kann (Luckhardt URL 1). Allerdings besteht die Gefahr, daß sie von den Benutzern nicht verstanden oder falsch interpretiert werden (Schnupp 1992, S. 142).
Textuelle Verweise hingegen sehen weniger schön aus, sind dafür aber leicht verständlich.
Durch die Kombination von Text und Bild können die Vorteile beider Medien vereinigt werden: Icons mit erläuterndem Text sind sowohl schön als auch verständlich. Allerdings bringen beide beteiligten Medien zusätzliche Nachteile mit sich: Graphiken erhöhen die Ladezeit, und Text muß unter Umständen in mehrere Sprachen übersetzt werden. Dies ist dann besonders aufwendig, wenn der Text in die Graphik integriert ist, so daß Änderungen nur mit Hilfe eines geeigneten Graphikprogrammes möglich sind (Nielsen 1995, S. 182) und aus Platzgründen eine Übersetzung mit ungefähr gleicher Buchstabenzahl gefunden werden muß.
In der folgenden Tabelle sind Vor- und Nachteile der verschiedenen Alternativen noch einmal zusammenfassend dargestellt. Welche Faktoren ausschlaggebend sind, hängt von der jeweiligen Nutzungssituation ab.


Ladezeit Internationalität Ästhetik Verständlichkeit
Nur Text + - - +
Text und Bild -
+ +
Nur Bild - + + -

Luckhard URL 1 Ratzek 1993, S. 358 Luckhardt URL 1, Schnupp 1992, S. 141 Bertha 1991, S. 60, Schnupp 1992, S. 142

Tabelle 3.5.6-2: Vor- und Nachteile von Icons und textuellen Verweisen


Schön gestaltete, jedoch zu detailliert ausgearbeitete und schwer verständliche Icons
Abbildung 3.5.6-12: Schön gestaltete, jedoch zu detailliert ausgearbeitete und schwer verständliche Icons http://www.iud.fh-darmstadt.de/iud/wwwmeth/include/iconmed/menuallg.gif, menumat.gif, menunews.gif, menupers.gif, menuserv.gif, selelv.gif


Bei der Gestaltung von Icons ist vor allem auf Verständlichkeit zu achten. Lohse et al. halten Verständlichkeit sogar für ein definierendes Merkmal von Icons: "Icons are used when the meaning of the icon is apparent to the target audience" (Lohse 1994, S. 45). Hardmann hingegen räumt ein, daß es in manchen Fällen auch akzeptabel sein kann, von den Benutzern zu erwarten, daß sie die Icons richtig zu interpretieren lernen (Hardmann 1989, S. 52). Dies gilt vor allem für Informationssysteme, die von einem festen Benutzerkreis regelmäßig konsultiert werden.
Ein weiterer Aspekt ist der Abstraktionsgrad von Icons (siehe Abbildung oben). Untersuchungen haben ergeben, daß abstraktere Icons innerhalb kürzerer Zeit und mit weniger Fehlern erkannt werden als photo-realistische Icons (Sorenson und Webb, zit. nach Lohse 1994, S. 46, Arend und Wandmacher, zit. nach Hofmann 1995, S. 67). Irler und Barbieri (1990, S. 264) befürworten abstraktere Icons auch deshalb, weil sie ihrer Meinung nach weniger vom Inhalt ablenken: "The more elaborate and precise an icon, the more this - perhaps isolated - icon will, however invade the view of a page and constantly occupy a share of the short time memory. Distraction from the concentration on the hypertext content is the consequence" (S. 264). Zu abstrakt dürfen Icons allerdings auch nicht sein, da sonst nur schwer zu erkennen ist, was dargestellt werden soll (Bertha 1991, S. 60).

Minicone Daher wurde für das QM-Handbuch ein mittlerer Abstraktionsgrad gewählt. Die Icons dürften leicht verständlich sein, da es sich fast ausschließlich um Standardmotive handelt (Haus für Homepage, Fernglas für Suche, Fragezeichen für Hilfe). Aus diesem Grund konnte auch auf erläuternden Text verzichtet werden[60]. Der Einsatz von Graphiken schien vertretbar, weil Ladezeiten im Intranet nur wenig problematisch sind. Außerdem werden die Icons im lokalen Cache zwischengespeichert und erhöhen die Ladezeit nur dann, wenn längere Zeit nicht auf das QM-Handbuch zugegriffen wurde.
In der folgenden Tabelle sind die verwendeten Icons zusammengestellt und kurz erläutert. Diese Tabelle wurde sicherheitshalber auch den Benutzern des QM-Handbuchs zur Verfügung gestellt, obwohl eigentlich davon ausgegangen werden konnte, daß die Icons ohne Erklärungen verständlich sind.

Icons im QM-Handbuch
Abbildung 3.5.6-13: Icons im QM-Handbuch


[59] Das Wort "Icon" wird hier nicht im semiotischen Sinn verwendet. In der Semiotik (Lehre von den Zeichen) versteht man unter einem Icon ein Zeichen, das sein Referenzobjekt direkt abbildet (z. B. Diskette  für Diskette) (vgl. auch Ulrich 1975, S. 166, Wenz URL). Ein Pfeil ist nach dieser Definition kein Icon. Im HTML-Publishing kann dagegen ein Icon zu dem Zielknoten des mit ihm verbundenen Verweises nicht nur in ikonischer (abbildender), sondern auch in indexikaler (anzeigender) oder symbolischer (zufälliger) Beziehung stehen.
[60] Allerdings wurden ALT-Tags eingefügt, die ab der Version 4.0 des Netscape Communicator nicht nur dann angezeigt werden, wenn das Laden von Bildern deaktiviert ist, sondern auch, wenn der Benutzer die Maus über ein Bild bewegt (HTML-Auszeichnung: <IMG SRC="../Bilder/Fernglas.gif ALT="Suche">).

previous next Up Title Contents Index