Lichtet die Anker

HTML-Sprungmarken genauer betrachtet

In-Page Links oder Anker gehören zu den ältesten Elementen in HTML. Schon zu Zeiten des Netscape Composers boten Sprungmarken eine rechte elegante Möglichkeit, auf bestimmte Stellen innerhalb einer Seite zu verlinken. Anders als bei traditionellen Links liegt das Linkziel eines Ankers nämlich innerhalb des gleichen Dokumentes, wohingegen traditionelle Links zur Verknüpfung unterschiedlicher HTML-Dokumente unter verschiedenen Adressen dienen.
Eine ganze Zeit lang waren In-Page Links unter Webdesignern eher verpönt, galten Sie doch als altbacken und Inkarnationen überholter Designparadigmen.

Doch der Siegeszug des mobilen Internets und die damit einhergehenden notwendigen Designveränderungen verhalfen der klassischen HTML-Sprungmarke zu einer zweiten Blüte. Die Anpassung an neue und vor allem variable Displaygeometrien führte dazu, Textblöcke wieder verstärkt untereinander, statt auf einzelnen Seiten anzuordnen. Klassische Anker erwiesen sich hier plötzlich als ideale Navigationshilfe.

Höchste Zeit also, sich den wiedererwachten Klassiker unter den HTML-Elementen noch einmal genauer anzusehen.

Was Anker so verwirrend macht

In-Page Links haben einen entscheidenden Nachteil: Sie widersprechen den Nutzererwartungen. In der "normalen" Nutzererfahrung ist ein Textlink im Idealfall farbig abgesetzt, manchmal sogar noch unterstrichen und führt den Leser auf eine andere Seite, die Ihm zusätzliche Informationen bietet, welche der Seitenautor für relevant hält.

Optisch unterscheidet sich ein Anker für gewöhnlich in nichts von einem herkömmlichen Link, leitet aber lediglich zu einem anderen Abschnitt auf derselben Seite. Dies kann bei Nutzern in Abhängigkeit von ihrem Surfverhalten zu Verwirrungen führen.

So gibt es beispielsweise Nutzer, die alle Links zuerst in Hintergrund-Tabs öffnen, um ein Dokument zu Ende zu lesen. Handelt es sich bei den geöffneten Links allerdings nur um In-Page Links, sieht der Leser jedes Mal nur Textabschnitte, die er schon kennt, und ist mitunter schnell enttäuscht. Die Wahrscheinlichkeit für eine Rückkehr zur Seite in den nächsten Tagen ist damit vermutlich gesunken.

Wann Anker hilfreich sind

Der Nachteil einer eventuellen Nutzerverwirrung wird zumindest teilweise wieder durch eine Steigerung der Übersichtlichkeit einer Seite aufgehoben. In-Page Links sind immer dann eine große Hilfe, wenn von einer zentralen Stelle aus im Dokument auf verschiedene Unterpunkte verlinkt werden soll. Prominetestes Beispiel für solche Anker sind wahrscheinlich das Inhaltsverzeichnis zu Beginn eines jeden längeren Wikipediaartikels. Jedem Leser ist klar, dass er von hier aus zu den einzelnen Abschnitten innerhalb des Artikels gelangt. An dieser Stelle würde ein Link nach außen jeglichen Nutzererwartungen widersprechen.

Sieht man sich den Unterschied zwischen den erwähnten Textlinks und einem Inhaltsverzeichnis einmal genauer an, so werden bereits einige Charakteristika von Ankern sichtbar, die für die erfolgreiche Verwendung von In-Page Links unerlässlich sind. Doch zuerst wollen wir uns noch einige Beispiele und Begleitumstände anschauen.

Anwendungsbeispiele für Anker

Im Laufe der Zeit haben sich In-Page Links vor allem für folgende Funktionen durchgesetzt:

Inhaltsverzeichnisse: Nicht nur in den bereits erwähnten Wikipediaartikeln dienen HTML-Sprungmarken zur Gliederung langer Textkörper. Am Beginn umfangreicher Textblöcke kann eine Reihe von In-Page Links dabei behilflich sein, den gewünschten Textabschnitt schnell zu finden.

Back-to-Top Buttons: Diese Elemente sind der Klassiker jeder Webseite. Der Zurück-Button prangt für gewöhnlich am Fuß eines längeren Blogbeitrags und führt den Nutzer mit einem einzigen Klick wieder zum Beginn der Seite. Natürlich könnte der Leser auch die Scrollleiste zu diesem Zweck benutzen, aber ganz ehrlich - das macht kein Mensch. Ein Klick auf den Back-to-Top Button erspart eine Scrollorgie und führt schnellstmöglich zurück ins Zentrum des Geschehens, zum Seitenkopf und der Menüleiste.

FAQ-Seiten: Ausführliche FAQ-Seiten (FAQ = frequently asked questions, zu deutsch: häufig gestellte Fragen) profitieren unter Umständen sehr von In-Page Links. Anstelle einer unübersichtlichen Auflistung aller Fragen und Antworten kann eine vorgeschaltete alphabetische Auflistung von Stichworten oder Fragen für ein hohes Maß an Übersichtlichkeit sorgen. Ein Klick auf eines der Stichworte kann dann zu einem Pop-Up oder zu einer kleineren Sammlung von inhaltlich ähnlichen Fragen führen. (Hier wäre dann auch wieder Platz für einen Zurück-Button ...)

Sitemaps: Sitemaps stellen Inhalt und Struktur großer Seiten übersichtlich dar. Neben einer maschinenlesbaren Form im XML-Format sollte eine umfangreiche Webpräsenz immer auch eine menschenlesbare Variante im HTML-Format aufweisen. Verlinkte Stichworte innerhalb der Liste führen den Nutzer beim Klick zur gewünschten Seite.

Der Einfluss der Bildschirmgröße

Wir haben schon angedeutet, dass der Siegeszug des mobilen Internets einen großen Anteil an der Rückkehr der klassischen Sprungmarke hat. Ursprünglich aus einer Zeit stammend, als Bildschirme noch in der althergebrachten Geometrie des 4:3-Querformats gebaut wurden und sich höchstens in der Auflösung unterschieden, sind Anker heutzutage wieder ein wichtiges Strukturelement. Mit abnehmender Bildschirmgröße ist ihre Bedeutung im Vergleich zu damals eher noch gestiegen.

Da sich auf Handydisplays weniger Text darstellen lässt, als auf einem klassischen Desktop, ist eine saubere und kleinschrittige Strukturierung mobil optimierter Texte unerlässlich. Gut gekennzeichnete Sprungmarken können die Orientierung innerhalb eines Textes erleichtern und so zu einer besseren Benutzererfahrung beitragen.

Aufgrund der gestiegenen Wichtigkeit interner Verlinkungen denken wir, dass es Zeit wird, einmal zu formulieren, wie eine Best Practice für den Gebrauch von In-Page Links aussehen könnte.

Vorschlag für eine Best Practice für den Gebrauch von Ankern

1) Achten Sie auf die Textlänge

Längere Textabschnitte können vom Vorhandensein eines oder mehrerer HTML-Anker gewinnen, da diese die Navigation innerhalb des Textes erleichtern. Natürlich ist auch im Internet die Information der Leser ein wichtiges Anliegen von Texten. Allerdings ist auch bekannt, dass längere Texte auf dem Bildschirm deutlich schlechter rezipiert werden als kurze.

Bevor Sie sich also die genaue Position von In-Page Links überlegen, sollten Sie einen Text sehr genau auf mögliche Kürzungen hin untersuchen. Ein kürzerer Text mit gleichem Informationsgehalt ist sehr viel Lesefreundlicher und steigert das Benutzererlebnis deutlich mehr, als eine gute Strukturierung durch interne Links.

Zwischenüberschriften sind ein weiteres Mittel, um den Lesekomfort im Internet zu erhöhen. Ein längerer Text, der durch Zwischenüberschriften gegliedert ist, kommt weitestgehend ohne Sprungmarken aus.

2) Verwenden Sie eindeutige Linktexte

Wenn Sie einen Text durch Zwischenüberschriften gegliedert haben, ist es sinnvoll, dem Text ein Inhaltsverzeichnis voranzustellen. Dieses besteht typischerweise aus einer Reihe interner Textlinks. Bedenken Sie, dass das Inhaltsverzeichnis ein kleines Handydisplay mehr oder weniger vollständig ausfüllt. Formulieren Sie die Linktexte also so, dass sie den Lesern zum klicken und weiterlesen ermutigen

3) Kennzeichnen Sie Anker

Bereits erwähnt haben wir die Schwierigkeiten, die sich aus dem identischen Aussehen von Ankern und externen Links ergeben. Nutzer können mitunter verwirrt sein, wenn Sie hinter einem Link ein externes Ziel erwarten, tatsächlich aber nur innerhalb einer Seite weitergeleitet werden.

Dieses Dilemma lässt sich lösen, indem Sie interne und externe Verlinkungen optisch unterschiedlich gestalten. Dies kann entweder durch eine deutlich unterschiedliche Farbgebung erfolgen oder durch einen kurzen Zusatz, der klar darauf hinweist, dass der betreffende Link auf ein Ziel innerhalb des Dokumentes verweist.

Die meisten Screen-Reader, die sehbehinderten Menschen bei der Benutzung des Internets helfen, mach dies übrigens automatisch. Steuert der Benutzer einen Anker an, so erhält er im Regelfall eine akustische Rückmeldung, dass es sich um einen internen Link handelt.

Bieten Sie diesen Service all Ihren Benutzern, indem Sie In-Page Links optisch deutlich anders gestalten.

4) Machen Sie dem Leser klar, wo er sich befindet

Auch wenn der Linktext eines Ankers genau der Zwischenüberschrift eines Textabschnittes entspricht, sollten Sie dem Leser unmissverständlich klarmachen, dass er sich immer noch auf Ihrer Seite befindet. Hierzu können Sie den Anker so platzieren, dass nicht die entsprechende Überschrift ganz oben auf der Seite zu stehen kommt, sondern noch ein kleiner Teil des vorhergehenden Abschnittes. Alternativ können Sie etwas Leerraum vorsehen. Wichtig ist bloß, dass die Überschrift nicht zu nah am oberen Bildrand angezeigt wird, da sie dort leicht übersehen wird, was mitunter zu Verwirrungen führen kann.

5) Benutzen Sie Sticky Links

Wenn Sie Ihrem Text ein Inhaltsverzeichnis mit internen Links voranstellen, verschwindet dies recht schnell nach Lesebeginn aus den Augen des Nutzers. Alternativ bringen Sie das Inhaltsverzeichnis in einer Seitenleiste unter und verwenden Sticky Links. So bleibt das Inhaltsverzeichnis jederzeit für den Leser sichtbar, steht aber aufgrund seiner Randlage nicht direkt im Zentrum der Leserinteresse.

6) Denken sie an eine Rückkehrmöglichkeit

Den Back-Button hatten wir schon erwähnt. Dieser Button kann zwei Funktionen übernehmen:

• Er bringt den Leser zurück zum Seitenanfang.
• Er bringt den Leser zurück zum letzten gelesenen Abschnitt.

Machen Sie sich die beiden unterschiedlichen Funktionen dieses Navigationselementes klar und nutzen Sie sie einheitlich. Ein inkonsistentes Nutzererlebnis an dieser Stelle verwirrt den Leser unnötig.

7) Das Akkordeon als Alternative

Neben klassischen Ankern hat sich in den letzten Jahren das sogenannte Akkordeon etabliert. Es erlaubt ebenfalls eine übersichtliche Darstellung langer Inhalte. Allerdings zeigt ein Akkordeon immer nur einen Teil des jeweiligen Textes. Die anderen muss der Nutzer selbst frei klicken. Deshalb kann ein Akkordeon bei aller Übersichtlichkeit mitunter dazu führen, dass Leser große Textteile einfach überlesen.

Fazit

Anker sind ein sehr altes HTML-Element, das eigentlich aus vergangen geglaubten Tagen des Internets stammt. Die gravierenden Änderungen von Bildschirmgröße und -geometrie, die die mobile Revolution mit sich gebracht hat, bescherten den internen Verlinkungen einen erneuten Aufmerksamkeitsschub. Richtig eingesetzt dienen Sprungmarken dazu, lange Texte auf kleinen Displays lesefreundlich zu gestalten.