Dirk Steinborn - Watamu Design Berlin  


           [usability]    [interface]    [wahrnehmung]    [webdesign]        [kontakt]    [links]              
                                                                                          I                                                          
Hintergrund / Farbe       Text       Links       Navigation       Layout                

Animationen       Formulare       Metaphern       Ladezeiten



Link-Gestaltung


Links können auf einer Website verschiede-
ne Funktionen erfüllen. Sie dienen zum ei-
nen als inhaltliche Querverweise , zum an-
deren aber auch der Navigation. Die Form der Links kann sehr unterschiedlich sein: Wörter /Wortgruppen, Bilder, Symbole oder Animationen. Links sind ein Kernstück des Hypertextsystems wie dem Internet (vgl. Tergan, 1997; S. 124-128).

Textbasierte Links

Als ein universelles Erkennungszeichen von Links gilt das Unterstreichen des jeweiligen Wortes. Durch die Verwendung von Casca-ding Style Sheets (CSS) ist es heute mög-lich, Links auch ohne Unterstreichung dar-zustellen, meist aus ästhetischen Gründen. Unsere Wahrnehmung wird in erheblichem Maße durch Erwartungen geprägt, entstand-en durch Lernprozesse beim Surfen im In-ternet und bei den meisten Benutzern sehr verfestigt. Aus diesem Grund sollten textbasierte Links

zugunsten einer besseren Usability weiter-
hin unterstrichen werden, da das deren Auffinden erleichtert. An dieser Stelle wirkt zusätzlich das Gesetz der Ähnlichkeit. Wenn wir gelernt haben, daß ein unter-
strichenes Wort für einen Link steht, ordnen wir alle weiteren unterstrichenen Wörter dieser Kategorie zu. Darum ist es positiv, wenn alle Links auf einer Seite die gleichen äußeren Merkmale (Unterstreichung, glei-
che Farbe, gleiche Schriftform) besitzen.

Blauer Text ist eigentlich schlechter lesbar als die Farben Rot und Schwarz auf weis-
sem Grund. Dies liegt an der geringeren Zahl von Rezeptoren für das blaue Licht-
spektrum (vgl. Nielsen, 2000; S. 64). Trotz-
dem wird Blau gewöhnlich Darstellung von Links verwendet, weil es sich um eine Kon-
vention im Webdesign handelt. Ist ein Link rot /violett gefärbt, bedeutet das, daß man diesen bereits angeklickt oder besucht hat.




Diese Konventionen steuern - genau wie die Unterstreichung - die Erwartungshaltungen des Benutzers. Werden die beiden Farben so verwendet, ist es für den Benutzer ein-
facher, sich zu orientieren. Er weiß immer, was er schon gesehen hat und was nicht.
Aus einer Studie geht diesbezüglich hervor, daß zwischen dem erfolgreichen Erledigen einer Aufgabe und den konventionellen Far-ben für Links ein Zusammenhang von r=0.4 besteht (vgl. Nielsen, 2000; S. 62).

Eine Forderung lautet häufig, zwischen in-
ternen und externen Links, welche zu einer anderen Website führen, zu unterscheiden. Es ist von Vorteil, aus den oben genannten Gründen, dies nicht über eine Änderung der Farben zu erreichen. Es gibt andere Mög-
lichkeiten, beide Arten von Links unter-
schiedlich darzustellen. Wichtig ist nur die Konsistenz. Für eine bewußte Wahrneh-
mung ist Aufmerksamkeit eine notwendige Bedingung. Daher müssen Links in der La-

ge sein, Aufmerksamkeit zu erwecken. Das kann z.B. mit der Darbietung neuer Informa-
tionen geschehen. Aus diesem Grund ist es nicht sinnvoll, Links mit "klicken Sie hier" zu bezeichnen, da diese Wortgruppe keine neue Information enthält (vgl. Nielsen, 2000; S. 51-55). Außerdem steigert es die Usa-
bility, wenn man über die Folgen einer Akt-
ion vorher informiert und nicht im unklaren gelassen wird (ähnlich dem Link "weiter"). Dies kann man durch eindeutige Wortwahl der Links erreichen. Einige Browser bieten die Option, Erklärungstexte einzublenden, wenn die Maus sich über einem Link befin-
det. Hat man außerdem mehrere Links mit der Bezeichnung "klicken Sie hier" oder "hier klicken" besucht, kann man sich kaum noch daran erinnern, was sich dahinter ver-borgen hat. Das liegt u.a. daran, daß die Informationen lediglich in unserem Kurzzeit-
gedächtnis. Eindeutige Linkbezeichnungen erleichtern das Erinnern, weil es sich dann um unterstütztes Wiedererkennen handelt.



           Link / Link / Link / Link

           LINK / LINK / LINK / LINK

Mögliche Linkdarstellungen durch Variation der Schriftform




Symbole

Symbole oder ikonische Zeichen (Icons) sind grafische Darstellungen, welche sich auf ein bestimmtes Objekt beziehen. Es verkörpert ähnliche Qualitäten und Bezieh-
ungen wie das Modell, welches wir von dem realen Wahrnehmungsobjekt besitzen (vgl. Eco, 1972; S. 213). Das heißt, sehen wir ein Symbol, gilt dies als Hinweis auf einen Gegenstand und die Operationen, welche man mit diesem verknüpft. Das Symbol ei-
nes Druckers weist uns auf diesen hin und läßt erwarten, daß sich dahinter der Druck-
befehl verbirgt. Icons sind seit den Anfängen der grafischen Interfaces Bestandteil der Benutzeroberfläche, sie sollen eine ein-
fachere Bedienung gewährleisten und so oft wie möglich verwendet werden (vgl. Raskin, 2001; S. 202). Bei der Abbildung eines Druckers ist dies weitestgehend gegeben. Auf Websites verwendet man die Icons ebenfalls zum besseren Verständnis der Links. Wer aber häufig im Internet surft, wird feststellen, daß manche Icons die Usability

eher herabsetzen (Manhartsberger & Musil, 2002; S. 180-183). Unsere Wahrnehmung wird zum Teil durch Schemata bezüglich bestimmter Objekte, deren Beziehungen und deren Verwendung gesteuert, welche im semantischen Langzeitgedächtnis abge-
speichert sind. Solche Schemata werden durch kulturelle /individuelle Erfahrungen gebildet. Daher sind sie bei den Menschen unterschiedlich im Gedächtnis verankert, was zu Schwierigkeiten bei der Interpretat-
ion von Symbolen führen kann. Ein Symbol vereinfacht die Bedienung nur, wenn es sich selbst erklärt und nicht zu abstrakt ist. Wenn für ein Symbol erst ein Erklärungs-
text nötig ist, kann man auch gleich auf die-
ses verzichten. Im Internet ist es meist bes-
ser, textbasierte Links zu benutzen (vgl. Raskin, 2001; S. 199-203). Die Beispiele der Abbildung verdeutlichen, wie unklar Symbole wahrgenommen werden können. Das erste soll Flohmarkt und das zweite Kundendatenbank bedeuten.




Symbole
Mehrdeutige Symbole beim Webdesign (Quelle: http://www.Abi-books.com)




Bilder

Es gibt eine gewisse Konvention, daß man auf ein Bild klickt, um dieses zu vergrößern. Daher ist es gut, auf Bilder als Links zu ver-
zichten. Nur das Logo einer Organisation benutzt man als Link für die Weiterleitung zur Homepage /Startseite. Manche Nutzer wissen jedoch nicht, daß das Logo dazu dienen kann (vgl. Nielsen, 2000; S. 178). So ist es wohl günstiger, einen textbasierten Link zu setzen. Um "Bilder" handelt es sich auch, wenn Schaltknöpfe verwendet werden. Häufig trifft man diese bei Formularen oder Auswahlen an. Im Prinzip gelten alle bisher


besprochenen Gestaltungsregeln auch für diese Art von Links. Sie müssen auffallen, konsistent dargestellt und verwendet wer-
den. Es ist besser, textbasierte, also be-
schriftete, Knöpfe zu gebrauchen als solche mit Symbolen. Von Vorteil bei der Ver-
wendung von Schaltknöpfen ist es, diese dreidimensional zu zeichnen, damit sie de-
nen der realen Welt ähneln und der Schalt-
knopf sich besser vom Hintergrund abhebt. Ein so gestalteter Knopf kann demzufolge als Hinweisreiz verstanden werden. Die 3D-
Darstellung sug-geriert, daß man darauf klicken kann (vgl. Bickford, 1998).



Literatur

Bickford, P. (1998). Human Interface Online - Graphical Babylon. Online-Dokument: http://devedge.netcape.com
/viewsource/bickford_hio/htm

Eco, U. (1985). Einführung in die Semiotik.
München: Fink.

Manhartsberger, M., Musil, S. (2002). Web Usability. Bonn: Galileo

Nielsen, J. (2000). Erfolg des Einfachen. München: Markt + Technik

Raskin, J. (2001). Das intelligente Interface. München: Addisson Wesley.

Tergan, S.-O. (1997). Hypertext und Hypermedia: Konzeption, Lernmöglichkeit, Lernprobleme. In: Issing, L.J., Klimsa, P. (Hrsg.). (1997). Information und Lernen mit Multimedia. Weinheim: Beltz



               Hintergrund / Farbe       Text       Links       Navigation       Layout

                                          Animationen       Formulare       Metaphern       Ladezeiten       Anfang dieser Seite



              [usability]    [interface]    [wahrnehmung]    [webdesign]        [kontakt]    [links]

           Dirk Steinborn © 2002
               www.design-usability.de