Vermeiden Sie Links innerhalb einer Seite

Zusammenfassung
Im Web haben die Benutzer ein klares mentales Modell von einem Hypertext-Link: Er soll eine neue Seite aufrufen. Links innerhalb der Seite verletzen dieses Modell und erzeugen deshalb Verwirrung.

Kürzlich habe ich am gleichen Tag zwei Anfragen zum gleichen Thema erhalten. Das ist gewöhnlich ein Zeichen dafür, dass das Thema auf breiteres Interesse stösst. Ich habe deshalb beschlossen, eine Kolumne darüber zu schreiben.

Beide Anfragen beziehen sich die Frage, warum es schlecht ist, wenn ein Link ein neues Browserfenster oder ein "Pop-up"-Fenster öffnet. Beide Fragesteller vermuten ausserdem zu Recht, dass diese Argumentation auch auf Links innerhalb einer Seite zutrifft.

Anker-Tags verletzen das mentale Modell der Benutzer

In Websites sind Links innerhalb einer Seite schlecht, und zwar aus den gleichen Gründen, warum PDF-Dateien schlecht sind und warum Mailto-Links, die ohne Warnung E-Mails abfeuern es in die Liste der 10 häufigsten Designfehler des Jahres 2002 geschafft haben.

Die Benutzer haben aufgrund gemachter Erfahrungen ein mentales Modell für das Verfolgen von Links entwickelt, das mehrere Elemente enthält:

1. Das Anklicken eines Links navigiert mich zu einer anderen Stelle.
2. Nach dem Anklicken des Links verschwindet die alte Seite.
3. Im Fenster erscheint eine neue Seite, welche die alte Seite ersetzt.
4. Man sieht als erstes den oberen Teil der neuen Seite.
5. Die "Zurück"-Schaltfläche befördert einen zurück zur alten Seite.

Weil fast alle Klicks so funktionieren, haben die Benutzer die Erwartung, dass das gesamte Web auf diese Weise funktioniert. Es ist ein einfaches Modell, das Sinn macht.

Anker-Tags innerhalb einer Seite verletzen alle fünf Punkte dieses mentalen Modells:

1. Ein Anker-Tag mit dem Ziel innerhalb einer Seite scrollt innerhalb eines Fensters, anstatt den Nutzer zu einem anderen Ort zu navigieren. Das verwirrt die Benutzer: Sie nehmen an, dass sie neue Informationen bekommen, doch wenn sie schon vor dem Klick auf den Link durch die Seite gescrollt sind, bekommen sie Sachen zu sehen, die sie bereits kennen.
2. Die alte Seite verschwindet nicht; sie bleibt im gleichen Fenster bestehen. Trotzdem versuchen die Benutzer, die sich auf einer neuen Seite wähnen, herauszufinden, inwiefern sich die »neuen« Informationen von denen unterscheiden, die sie schon gesehen haben - ein nutzloses Unterfangen.
3. Im Browserfenster wird keine neue Seite angezeigt: Es werden die gleichen Daten angezeigt, nur wird an eine andere Stelle gescrollt.
4. Statt am Anfang der Seite landet man gewöhnlich irgendwo in der Mitte der Seite. Man hat keine Navigationsleiste und keine sonstigen Design-Elemente zur Verfügung, die man am oberen Seitenanfang erwartet.
5. Ein Klick auf die "Zurück"-Schaltfläche bringt einen nicht zur vorigen Seite, sondern zum vorherigen Scroll-Status innerhalb der gleichen Seite. Das kann Benutzer, die schon ans obere Seitenende gescrollt sind, bevor sie auf »Zurück« geklickt haben, doppelt verwirren.

Nachdem sie einige wenige Links innerhalb der Seite und einige wenige „Zurück“-Links gemacht haben, wissen die meisten Benutzer überhaupt nicht mehr, wo sie sich innerhalb der Site befinden. Unsere Studien zeigen auch, dass solche Links normalerweise mehr Zeit verschwenden als sie einsparen, da die Benutzer mehrfach hin- und herklicken und wiederholt das gleiche Material sichten.

Wo Anker-Tags innerhalb der Seite OK sind

Um eine Verwirrung Ihrer Benutzer zu vermeiden, müssen Sie Ausnahmen, die ihrer Erwartung widersprechen, im Vorhinein kommunizieren. Es ist z. B. in Ordnung, Mailto-Links zu verwenden, wenn Sie deutlich anzeigen, dass die Links ein E-Mail-Programm aktivieren und die Benutzer nicht auf eine neue Seite navigieren. Das können Sie durch das Link-Format signalisieren (»donald@duck.com«) oder mit Worten (»E-Mail an den Kundendienst schicken«).

In ähnlicher Weise gilt: Wenn Sie unbedingt Links innerhalb der Seite verwenden wollen, dann sagen Sie es. Fügen Sie beispielsweise eine kurze Anweisung im Sinne von „Wenn Sie die Links anklicken, scrollt die Seite zum relevanten Abschnitt innerhalb der Seite“ hinzu.

Unter dieser Voraussetzung haben Links innerhalb der Seite zwei akzeptable Einsatzfelder. Erstens bei langen alphabetischen Listen: Dort können Sie am oberen Seitenende die Buchstaben des Alphabets anzeigen und jeden mit der passenden Stelle in der Liste verlinken. Zweitens bei den häufig gestellten Fragen (FAQs): Dort können Sie die Fragen am oberen Ende der Seite auflisten und jede Frage mit der weiter unten stehenden Antwort verlinken.

Beide Ausnahmen folgen einem verbreiteten Format: einer langen Liste von Themen mit einer Zusammenfassung am oberen Seitenende, mit Links, welche die Benutzer direkt zum gewünschten Thema bringen.

Doch auch in diesem Szenario ist es besser, Links innerhalb der Seite möglichst zu vermeiden. Sie können die Listen zum Beispiel so kurz halten, dass die Benutzer leicht hindurchscrollen können. Nur bei sehr langen Seiten wiegt die eingesparte Zeit die Verwirrung auf, die Links innerhalb der Seite erzeugen können.

Wir haben neulich eine Website getestet, die Informationen zu den fünfzig Bundesstaaten der USA auf einer einzigen Seite aufgeführt hat. Am oberen Bildschirmrand zeigte die Seite eine Karte der USA mit der Anweisung an die Benutzer, ihren Bundesstaat anzuklicken.

Als erstes ist es für gewöhnlich schon eine schlechte Idee, die Benutzer ihren Staat oder ihr Land auswählen zu lassen, indem sie auf eine Karte klicken. Das funktioniert zwar für diejenigen von uns, die in einem grossen Staat wie Kalifornien leben, aber bitte haben Sie Mitleid mit den Landsleuten aus Rhode Island oder Connecticut. (Dieses Argument gilt auch für Europakarten: Da ist es gut für die deutschen Benutzer, aber nicht so ideal für die Belgier.)

Wenn die Nutzer motorisch sicher genug sind, um ihren eigenen Staat anklicken zu können, scrollt unsere Beispielseite an den gewünschten Ort. Wenn die Benutzer beispielsweise auf einen Staat in der Mitte des Alphabets klicken (etwa New York), dann erscheint der Staat am oberen Rand des Fensters, und die Benutzer können ihre Informationen leicht finden. Leider gilt das nicht immer: Wenn sie zum Beispiel Wisconsin anklicken, dann finden sie meist Tennessee am oberen Rand des Fensters, weil die Seite nur so weit hinunterrollt. Das verursacht Verwirrung: "Ich habe Wisconsin angeklickt, und hier steht Tennessee?"

In dem Fall, wo zu jedem Staat nur wenige Daten vorhanden sind, ist es deshalb besser, wenn man die Leute die Seite einfach bis zu ihrem Staat hinunterscrollen lässt. Sicher ist das lästig, wenn man in Wyoming wohnt, aber in Wirklichkeit braucht man weniger Zeit, einfach hinunterzurollen, als dazu, die ungewöhnliche Anweisung zu verstehen, dass man auf die Karte klicken soll. Schliesslich sind die Leute auf eine solche Seite gelangt, in dem sie einen Link wie "Informationen über „Tralala“, geordnet nach Staaten" angeklickt haben; sie erwarten also eine Liste von Staaten und wissen, wo sie ihren eigenen dort finden.

Links zu benannten Anker in anderen Seiten

Die Verwendung benannter Anker, um auf spezifische Stellen einer anderen Seite zu verlinken, ist nicht so schlimm wie Links innerhalb einer einzelnen Seite.

Wenn Sie zu einem benannten Anker auf einer anderen Seite verlinken, halten Sie vier der fünf Erwartungen im mentalen Modell der Benutzer ein: Sie navigieren, die alte Seite verschwindet, eine neue Seite erscheint, und sie können auf "Zurück" klicken, um zur vorigen Seite zurückzugelangen. Das einzige Problem ist die fünfte Erwartung: Anstatt am oberen Ende der Seite zu landen, plumpsen die Benutzer gewöhnlich irgendwo in die Mitte.

Zwar ist es sicher besser, nur 20% des mentalen Modells zu verletzen, aber es ist immer noch eine schlechte Idee, die Erwartungen der Benutzer überhaupt zu verletzen. Wenn Benutzer nach dem Anklicken eines Links irgendwo in der Mitte einer Seite landen, führt das zu Usability-Problemen, weil die Benutzer das Bedürfnis haben, sich zu orientieren, wenn sie auf einer neuen Seite landen. Die Überschrift der Seite, die Einführung, ein Navigationsapparat liefern den wichtigen Kontext für diesen Vorgang.

Trotzdem sind benannte Anker verlockend. Oben auf dieser Seite zum Beispiel habe ich Links zu mehreren Artikeln, weil ich mich auf Punkte beziehe, die dort vorkommen. Im Artikel "Die meist gemachten Webdesign-Fehler des Jahres 2002" beziehe ich mich an einer Stelle auf Fehler Nr. 6, an anderer Stelle auf Fehler Nr. 10. Es könnte zwar von Vorteil sein, direkt zu diesen beiden Abschnitten zu verlinken, doch solche direkten Links haben auch Nachteile.

Sagen wir zum Beispiel, ich verlinke auf einen benannten Anker für Nr. 6, wo es um JavaScript in Links geht. Sicher, Sie sehen diesen Punkt als erstes, aber weiter unten auf Ihrem Bildschirm sehen Sie die Nr. 7, wo es um das Phänomen geht, dass selten gefragte Fragen auf FAQ-Seiten erscheinen. Eine seltsame Fortsetzung der JavaScript-Debatte, finden Sie nicht? Das ist der Nachteil, wenn die Benutzer in der Mitte der Seite anfangen, ohne zu verstehen, worum es in der Seite geht.

Also: Sie sollten benannte Links und Links innerhalb der Seite vermeiden, weil Sie die Erwartungen der Benutzer an Hypertext-Links im Web verletzen. Ein Link sollte eine neue Seite aufrufen. Ein Abweichung von diesem Modell erfordert eine Erklärung; Sie sollten nur dann davon abweichen, wenn das den Benutzern signifikant mehr Zeit erspart, als sie durch das Nachdenken über die anormale Interaktionstechnik verlieren.

Disclaimer ¦ AGB

© 2006 - Institut für Software-Ergonomie und Usability. Alle Rechte vorbehalten