Links sichtbar machen

Leider sehen viele Web-Designer die Design-Aufgabe im Vordergrund und halten sich selbst für den Maßstab aller Dinge. Geht es um die Gestaltung und Farbgebung von Hyperlinks, schnappen manche vollends über: Damit die Links das Erscheinungsbild des Textes nicht durch Hervorhebungen beunruhigen, werden sie mit Body-Definitionen oder CSS-Tags in die Form der Umgebung gezwängt.

Dass Besucher bei solchen überstylten Seiten auf der Strecke bleiben, weil sie Links nicht mehr als solche erkennen oder Links nicht finden, nehmen diese Web-Designer offenbar billigend in Kauf: Hauptsache, es sieht alles gut aus.

Erschwerend kommt dazu, dass dem Designer selbst gar nicht auffällt, dass die Links schwer zu finden sind -- er weiß schließlich, wo sie sind.

Schlimme Fehler bei der Link-Gestaltung

• Design: Die Links heben sich farblich überhaupt nicht vom umgebenden Text ab (nicht unterstrichen, gleiche Farbe).
  Ergebnis: Der Besucher muss mit dem Mauszeiger Wort für Wort, Bild für Bild, jede Seite absuchen und darauf achten, ob sich der Mauszeiger in eine Hand wandelt.
• Design: Bereits besuchte und unbesuchte Links sehen genau gleich aus.
  Ergebnis: Der Besucher klickt sich einen Wolf und klickt überflüssigerweise immer wieder auf dieselben Seiten, bis es ihm reicht.
• Design: Links sind nicht auf den ersten Blick als solche erkenntlich (Fettschrift ohne Unterstreichung, unterschiedliche Gestaltung von Links in unterschiedlichen Bereichen der Seite).
  Ergebnis: Der Besucher muss von sich aus herausfinden, wie Links ausgezeichnet sind.
• Design: Links öffnen sich nur, wenn der Besucher JavaScript bzw. Active Scripting aktiviert hat.
  Ergebnis: Surfer mit ausgeschalteter Skriptunterstützung klicken, ohne dass etwas passiert. Meist erhalten sie nicht einmal eine Fehlermeldung.
• Design: Links sind nicht unterstrichen, aber andere Textabschnitte sind es.
  Ergebnis: Besucher klicken auf die unterstrichenen Passagen und wundern sich, dass nichts passiert.

Siehe auch:

Jakob Nielsen, Change the Color of Visited Links: "People get lost and move in circles when websites use the same link color for visited and new destinations. To reduce navigational confusion, select different colors for the two types of links."
http://www.useit.com/alertbox/20040503.html

Gerade noch erträgliche Link-Gestaltung

• Design: Links haben nicht mehr die vom Browser vergebene Standardfarbe, sondern zum Design passende Farbtöne.
  Ergebnis: Besucher muss sich an die Farbgebung gewöhnen. Besuchte Links sollten einen dunkleren Farbton haben, damit der Anwender intuitiv merkt: Hach, die sind wohl nicht so wichtig.
• Design: Links wurden per CSS so präpariert, dass sie nicht mehr unterstrichen sind. Beispiel: die Heise-Hauptseite.
  Ergebnis: Besucher erkennen immerhin noch an der Farbe, dass der Text irgendwie anders sind und lernen durch Ausprobieren, dass dahinter Links stecken.
• Design: Besuchte Links erscheinen genau wie der sie umgebende Text.
  Ergebnis: Wer eine bereits besuchte Seite nochmal besuchen will, findet den Link dorthin erst nach langem Suchen. Eigentlich schon fast ein "schlimmer Fehler".
• Design: Links öffnen grundsätzlich immer ein neues Fenster.
  Ergebnis: Wenn das Verhalten konsistent ist, kann sich der Besucher meist daran gewöhnen. Die meisten Besucher grummeln dabei allerdings.

Bei den Tickermeldungen von Heise Online öffnen sich externe Links (die auf einen anderen Server führen) immer in neuen Fenstern. Interne Links (etwa zu anderen Tickermeldungen) öffnen sich im selben Fenster. Das ist undokumentiert, aber immerhin konsistent.

Tipps zur Link-Gestaltung

Eigentlich mag ich es gar nicht, derart direkte Hinweise zu geben. Aber sei's drum:

1. Stellen Sie sicher, dass sich Links stets vom umliegenden Text abheben -- durch Unterstreichung, Fettschrift oder ihre Farbgebung.
2. Stellen Sie sicher, dass Besucher merken, dass sie einen Link schon angeklickt haben.
3. Heben Sie Links am besten so hervor, dass sie für den Besucher sofort als Links erkennbar sind.
4. Konfigurieren Sie die Unterstreichung der Links nur in Ausnahmefällen weg.

Siehe auch:

Jakob Nielsen, Guidelines for Visualizing Links: "Textual links should be colored and underlined to achieve the best perceived affordance of clickability, though there are a few exceptions to these guidelines."
http://www.useit.com/alertbox/20040510.html