ZDNet klärt die Frage der sinnvollen Kennzeichnung von Verlinkungen im Content und erklärt, warum es zweckvoll ist Links mit verschiedenen Effekten hervorzuheben.
Der HTML-Standard unterscheidet drei separate Zustände von Hyperlinks: normal, active und visited. Browser weisen jedem dieser Zustände normalerweise unterschiedliche Farben zu. Man kann diese Standardeinstellungen aber für jede Webseite auch mithilfe entsprechender Attribute (link, alink und vlink) des <body>-Tags außer Kraft setzen. Noch größere Kontrolle über die Darstellung von Links erzielt man, indem man mithilfe von CSS-Pseudoklassen Selektoren erstellt, mit denen Web-Designer die Darstellung dieser drei Hyperlink-Zustände sowie des hover-Status’ bestimmen können. Diese Pseudoklassen lauten wie folgt:
- Link ist der normale, nicht angeklickte Zustand eines Hyperlinks.
- Active ist ein Hyperlink, der angeklickt wurde und dessen Inhalt gerade vom Browser abgerufen wird.
- Visited ist ein Link zu einer Seite, die kürzlich besucht wurde.
- Hover ist der Hyperlink, über dem sich der Mauszeiger gerade befindet.
Die eindeutige Markierung der unterschiedlichen Zustände von Hyperlinks dient nicht nur dazu, die Hyperlinks vom umgebenden Text einer Webseite abzuheben, vielmehr liefert sie den Besuchern ein optisches Feedback über den Status jedes Links. Ein Link ändert seine Farbe beim Anklicken und zeigt so, dass der Browser dabei ist, die entsprechende Seite zu laden. Links zu bereits besuchten Seiten werden in einer anderen Farbe angezeigt, so dass der Besucher weiß, welche Seiten er schon gesehen hat. Und ein CSS-Style für die hover-Pseudoklasse sorgt für den beliebten Mouseover-Effekt, der einen Hyperlink hervorhebt, wenn der Mauszeiger darüber fährt.
Markieren besuchter Links – eine Frage der Usability
Web-Designer, die sich nicht auf die Standardeinstellungen des Browsers verlassen wollen, erstellen üblicherweise CSS-Styles für die Zustände link und hover der Hyperlinks auf ihren Websites, aber nur selten auch für die beiden anderen Zustände active und visited. Ein häufiger Ansatz für die Markierung von Hyperlinks besteht darin, den visited-Zustand genau so anzuzeigen wie den link-Zustand und den active-Zustand entweder vollständig zu ignorieren oder ihn genau so zu gestalten wie den hover-Status. Dieser Ansatz vereinfacht das Seitenlayout (und das Style Sheet) durch Reduzierung der Anzahl der Textfarben, doch werden möglicherweise wichtige Unterscheidungen zwischen den einzelnen Link-Zuständen dadurch verwischt.
Usability-Guru Jakob Nielsen ermahnt die Leser seiner Alertbox-Kolumne, immer eine eindeutige Farbe und Unterstreichung zu verwenden[1], um Links vom umgebenden Text zu unterscheiden, und stets eine andere Farbe für besuchte Links zu benutzen. Sein Argument ist, dass eine unterscheidbare Markierung besuchter Links wichtig für den zeitlichen Kontext beim Surfen ist, damit Besucher genau wissen, welche Seiten sie schon besucht haben und welche noch nicht. Ohne eine separate Farbe für besuchte Links werden die Besucher einer Website verwirrt und neigen dazu, sich im Kreis zu bewegen und bereits besuchte Seiten erneut aufzurufen. Nielsens Untersuchungen zeigen, dass 74 Prozent aller Websites unterschiedliche Farben für besuchte Links verwenden, weshalb die Besucher sich an diese Konvention gewöhnt haben und sich auf sie verlassen. Nielsens Argumente für eine unterscheidbare Markierung besuchter Links sind nicht von der Hand zu weisen. Es stimmt, dass eine planlose Markierung der Links Webseiten schwieriger zu benutzen macht, besonders auf Websites, in denen die Links schon fast versteckt sind. Allerdings wirken seine Empfehlungen für die Markierung von Links[2] etwas streng und man kann durchaus auch flexibler an die Sache herangehen.
Zuerst einmal sollte man zwischen im Fließtext eingebetteten Links und separaten Links in Navigationsleisten, Linklisten usw. unterscheiden. Nielsen räumt lediglich ein, dass Links in Navigationsleisten eine Ausnahme der allgemeinen Richtlinien darstellen könnten, im Grunde sind sie jedoch eine vollständig andere Sache.
Für Links, die in Text eingebettet sind, kann man eine Kombination aus Farbe, Fettdruck und Unterstreichung (aber nicht alle drei gleichzeitig) verwenden um sie vom umgebenden Text abzuheben. Dabei muss man sich nicht unbedingt an die standardmäßige Link-Darstellung mit unterstrichenem blauen Text halten. Häufig empfiehlt sich ein ähnlicher (hellerer) Farbton wie die primäre Textfarbe statt eine völlig neue Farbe einzuführen. Um zu betonen, dass der Link ein interaktives Element ist, kann man mithilfe eines hover-Styles für einen deutlichen Rollover-Effekt sorgen.
Die separate Markierung für besuchte Links hängt vom Inhalt der Seite ab. Falls der Inhalt darauf abzielt, die Besucher zu kurzen Abstechern auf andere Seiten anzuregen, oder wenn Links auf zugehörigen Inhalt zu verschiedenen Seiten in unterschiedlichen Kontexten erscheinen, sollte man für besuchte Links eine besondere Markierung verwenden. Üblicherweise ist dies eine weitere Variante der primären Textfarbe (normalerweise dunkler als die Text- und Linkfarbe). Wenn dagegen die Navigation der Website ohnehin einfach und klar ist, ohne dass Verwirrung darüber entstehen könnte, welche Seiten schon besucht wurden und welche nicht, kann man besuchte Links genauso wie unbesuchte Links gestalten, um für ein einheitlicheres Erscheinungsbild der Seite zu sorgen.
Wie auch immer man die Links markiert, kommt es vor allem darauf an, auf der gesamten Website konsistent zu bleiben und Verwirrung zu vermeiden, indem man die Markierung nur für Links und nicht für irgendwelchen anderen Text verwendet.
Links in Navigationsleisten, Buttons und Linklisten sind von in den Text eingebetteten Links grundsätzlich verschieden. Wenn ein Link für sich allein oder zwischen anderen Links steht, statt von Text umgeben zu sein, macht der Kontext häufig ausreichend klar, dass es sich hier um einen Link handelt. In solchen Fällen dürfte eine spezielle Markierung unnötig sein. Den meisten Besuchern einer Website wird unmittelbar klar sein, dass es sich bei den Texteinträgen in einer Navigationsleiste um Links handelt, unabhängig davon, wie diese gestaltet sind. Dasselbe gilt für den eingerahmten Text eines CSS-Buttons oder einer Linkliste in einer Sidebar.
Wenn die Navigationslinks durch ihren Kontext eindeutig und unverwechselbar zu erkennen sind, kann man getrost auf die üblichen gestalterischen Hinweise verzichten, die einen Link innerhalb des normalen Textes hervorheben. Stattdessen kann man sich darauf konzentrieren, eine separate Style-Vorlage zu entwickeln, die für diese Navigationslinks sinnvoll ist. Beim Gestalten von Navigationselementen hilft ein deutlicher Rollover-Effekt (hover-Status) die Links als interaktive Elemente hervorzuheben. Eine unterschiedliche Kennzeichnung besuchter Links in einer Navigationsleiste dürfte in den meisten Fällen nicht notwendig oder wünschenswert sein, doch kann eine spezielle Behandlung für den Link auf die aktuelle Seite (ein Sie-befinden-sich-hier-Button) den Besuchern bei der Orientierung auf der Website helfen.
URLs in diesem Artikel:
[1] = http:/
[2] = http:/