Hier geht es um ein eher selten verwendeten Element in der Gestaltung. So etwas tun wir gern einmal. So war hier schon die Rede von der Paginierung, dem Warenkorb oder der hr-Linie. Heute ist der „Top-Link“ in unseren Blick geraten. Viele wissen vielleicht gar nicht worum es sich handelt. Die Sache ist banal, es geht sich um einen Link mit dessen Hilfe man zum Anfang einer Seite springen kann. Das ist auch in Zeiten von Mausrädern bequem – auch anständige Kenntnisse der Benutzer jeweiligen ihrer Tastaturen sollte man nicht unbedingt voraussetzen.
Der freundliche Service für den Besucher wird jedoch nur noch selten eingesetzt. Die meisten Gestalter und Blogger verzichten darauf. Das ist einerseits schade, denn der „Top-Link“ kann bereits verhandene, funktionslosen Elemente zu Nutzen verhelfen oder das Design um ein neues, eigenständiges Element bereichern. Andererseits gibt es aber auch Nachteile.
Wohin mit dem „Top-Link?
Sein ureigenes Revier ist der Fußbereich. Hier fühlt er sich am wohlsten. Ob er nun linksbündig, zentriert oder rechtsbündig platziert werden sollte, darüber kann man streiten. Wahrscheinlich spielt es keine Rolle. Der „Top-Link“ ist außerdem in längeren Fließtexten, gern auch FAQs oder Glossaren zu finden. Er trennt Kapitel oder Absätze voneinander und bietet die Möglichkeit rasch zum Seitenanfang und damit zur Navigation zu gelangen.
Der typische „Top-Link“ am Seitenende gibt sich unscheinbar, fast verschämt.
HTML und Einbindung
Es genügt (fast) einen leeren Anker zu verwenden:
<a href="#">top</a>
Doch damit kommen nicht alle Browser zurecht, manche erwarten einen echten Anker. Er wird auf diese Weise definiert und findet seinen Platz direkt unter dem <body>-Tag. Zu sehen ist davon nichts.
<a name="top"></a>
Verlinkt wird dann so:
<a href="#top">top</a>
Dieser Link kann selbstverständlich auch eine Grafik sein.
Wording
Mit „top“ macht niemand etwas falsch. Varianten sind „go to top“ oder „back to top“. Aber „Top“ von was eigentlich? Richtiger wäre „top of page“ „oder start of page“, schließlich geht es um den Anfang einer Page, nicht den einer Site, letzterer wäre dann der Home-Link. Gelegentlich wird aber auch das harmlosere“up“ verwendet. Auch „return to top“ und andere werden eingesetzt.
Nachteile und andere Erwägungen
Usability Altmeister Jakob Nielsen lehnt den „Top-Link“ weitgehend ab. Seiner Meinung nach reicht der Scrollbalken völlig aus, man sollte den User nicht mit weiteren Optionen irritieren. Es sei denn die Seiten wären überaus lang. Ein Umstand den es allerdings eh zu vermeiden gilt – man denke an Lade- und Renderzeitern. Tatsächlich beeinflußt der „Top-Link“ die Navigation mit den Browser-Buttons. Schließlich sind die Ankerlinks ebenso Links wie alle anderen. Mancher sieht Behinderte im Nachteil oder die Gefahr den User zu verwirren.
Vergebene Chancen
Auf der Suche nach vorzeigbaren Beispielen sind uns des Öfteren Elemente begegnet die ein Top-Link hätten sien können, aber doch nur Dekoration waren. Auch wenn ein „Top-Link“ nicht explizit als solcher ausgewiesen ist, kann er als solcher funktionieren.
Dies hätte ein „Top-Link“ sein können, so ist die Illustration ohne Funktion
… und hier wurde es umgesetzt. Die Grafik (Logo + Illustration) führt nach oben
Usability
Der „Top-Link“ ist kein „Home-Link“ und umgekehrt. Der Besucher kann das verwechseln oder missinterpretieren. Vielleicht braucht er am Seitenende keinen „Home-Link“, sondern möchte viel lieber direkt nach oben.
Home statt Top
Hier auf Spanisch
Und noch ein Beispiel aus einem Footer
Samples – Wie machen es die Anderen?
Ein animierter Top-Link
Als Teil einer Navigation. Sieht gut aus, ist aber auf Anhieb kaum in seiner Funktion zu erkennen.
Links und Recherchen zum Thema:
- Usability Advice: „Back to top“ links
- Replicating Browser Behavior: The Top Link
- Nielsen:Within-Page Links for AJAX, „Return to Top“, Skip-Links
