DrĂŒcke vor auf Start: Back-To-Top Buttons

19. Oktober 2017

Viele Brettspiele haben es, auch wenn der Spieler es sich seltenst wĂŒnscht: Ereignisse, die den Spieler zurĂŒck zum Spielfeldanfang drapieren. Anders ist es bei Webseiten: Erreicht der Nutzer ein fortgeschrittenes Stadium auf der Seite oder letztlich das Seitenende, sehnt er sich oft danach, schnell zum Seitenanfang zurĂŒck zu kommen. ZurĂŒck zum Start, aber wie?

Navigationsinstrumente und deren Anwendung

Die Antwort gibt der Artikel der Nielsen Norman Group vom 27.08.2017, der sich mit der Notwendigkeit und richtigen Anwendung von Navigationsinstrumenten wie Links oder Buttons befasst, die den User mit einem Klick vom Seitenende zum Seitenanfang fĂŒhren sollen.

Dank des responsive Web-Design ist es möglich, die Darstellung einer Website an das genutzte EndgerĂ€t anzupassen und angemessen anzuzeigen. Das fĂŒhrt jedoch auch dazu, dass Webseiten sich buchstĂ€blich in die LĂ€nge ziehen können. Ist der Besucher ans Ende einer Seite angekommen, stellt sich also die Frage, wie er schnellstmöglich wieder zum Seitenanfang gelangen kann, um beispielsweise das NavigationsmenĂŒ aufzurufen oder auf einer Such-/Ergebnisseite mit vielen Ergebnissen die Suche verfeinern bzw. filtern zu können.

Auf klassische Weise navigiert sich der Nutzer hierfĂŒr durch die Seite mithilfe der Tastatur ĂŒber Tasten wie „Pos1“, „Bild auf“, „Bild ab“, den Pfeiltasten (siehe Abbildung 1) oder Navigation mit der Maus. HierfĂŒr wird jedoch entsprechende Hardware vorausgesetzt und empfiehlt sich fĂŒr Seiten, die weniger als 4 BildschirmseitenlĂ€ngen vorweisen. Auch die zunehmende Verwendung von Tablets, Smartphones und weitere mobilen EndgerĂ€ten, die in der Regel ĂŒber ein Touchscreen gesteuert werden, machen eine andere Möglichkeit der Navigation erforderlich.

Abb1
Abbildung 1: Navigationstasten auf einer Tastatur

Der rechte Weg zurĂŒck

Ein Back-To-Top Bottom sollte jedoch nicht willkĂŒrlich gesetzt werden. Er ist oft in der rechten unteren Ecke des Bildschirms platziert, da User sich daran gewöhnt haben, rechts am Seitenrand vertikal zu navigieren. Sie erkennen oft durch die Andeutung eines Pfeils nach oben, dass sie durch klicken / berĂŒhren des Buttons zurĂŒck zum Seitenanfang gelangen können. Eine Beschriftung „zum Seitenanfang“/“Back to Top“ verringert zusĂ€tzlich eine Fehlinterpretation.

Top
Abbildung 2: „Back-To-Top-Button“

Der Button weist dabei im Idealfall folgende Kriterien auf:

  • Die richtige GrĂ¶ĂŸe
    nicht zu klein: er lĂ€sst sich sonst schwer berĂŒhren / anklicken
    nicht zu groß: er verdeckt sonst (wichtige) Inhalte
  • Die richtige Position
    fester Platz auf der OberflÀche: er lenkt nicht vom Inhalt durch Wandern ab
    keine Redundanz: er wird erst eingeblendet / sichtbar, wenn heruntergescrollt wurde
  • gute Sichtbarkeit
    sich (farblich) vom Inhalt abheben: er wird dadurch schnell gefunden
    verblassen / ausblenden bei Nichtgebrauch: er verdeckt nicht und lenkt nicht ab

Alternative Wege fĂŒhren zum Ziel

Webseiten mit Inhalten unterteilt in mehrere Topics oder Abschnitte die untereinanderstehen, setzen oft unter jedem Abschnitt einen Link/Button, der einen Sprung zum Seitenanfang ermöglicht. Hierbei besteht jedoch die Gefahr, dass durch die Wiederholungen die „multiple links“ schnell ĂŒberlesen oder ĂŒbergangen werden.

Webseiten, die Listen oder Ergebnisse einer Suche anzeigen, verwenden zudem nicht nur am Anfang sondern auch am Ende eine Navigationsleiste wie in Abbildung 3 zu sehen ist. Als Alternative oder Zusatz hilft es auch, Kategorien oder Filter als „mitlaufendendes“ MenĂŒ (fĂŒr gewöhnlich auf der linken Bildschirmseite) anzuzeigen, sodass ein Sprung zum Seitenanfang ĂŒberflĂŒssig wird.

Abb1
Abbildung 3:Navigationsleiste

Soziale Netzwerke oder NewsFeeds verwenden wiederum oft einen Home-Button, um an den Seitenanfang, ihrer Startseite zu gelangen. Dies funktioniert, da der Nutzer hier den Eindruck hat, er bewegt sich auf derselben „Ebene“.

Im Beitrag wird deutlich, dass der Back-to-Top Button eine hilfreiche und beim Nutzer akzeptierte Möglichkeit der Navigation bietet. Je nach Seiteninhalt oder Ausstattung des EndgerĂ€tes bestehen jedoch auch EinschrĂ€nkungen, die beachtet werden sollten. Zu beachten bleibt dabei, dass der Nutzer – im Gegensatz zum Spieler beim Brettspiel – dies selbst steuern kann.

Quelle: https://www.nngroup.com/articles/back-to-top/

Diesen Beitrag bookmarken bei:
Bookmark bei: Yigg Bookmark bei: Webnews Bookmark bei: Technorati Bookmark bei: Mr. Wong Bookmark bei: Linkarena Bookmark bei: Del.icio.us Bookmark bei: Google Bookmark bei: Favoriten Bookmark bei: Facebook

Autor des Beitrags