Navigation auf One-Page Websites – Eine Betrachtung mittels Eyetracking
Betrachten wir One-Page Websites zu folgender Frage: Wann ist eine globale Hauptnavigation nötig? Mithilfe einiger Eyetracking-Videos erfahren Sie außerdem, wie wichtig generell die Gestaltung eines Elements zur Wahrnehmung der Funktionalität ist. Bei One-Pages, die auf einen WOW-Effekt mittels der Technik Parallax Scrolling setzen, ist die Animation des Nutzers zum Scrollen essentiell. Kein Scrollen -> Kein WOW-Effekt -> Verschwendete Ressourcen.
Verwenden Sie ungewöhnliche Symbole niemals ohne weitere Beschreibung
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
Eyetracking kinderueberraschung.de ohne Scrollen
Im Video erkennbar: Der Proband erkennt auf kinderueberraschung.de durch den Mouseover-Text die Funktionalität der Elemente. In der Folge wird nicht mehr gescrollt. Der Effekt durch Parallax Scrolling wird so allerdings nicht wahrgenommen.
Es stellt sich die Frage: Nehmen alle Nutzer die Buttons als Navigationselement wahr?
Nein. In unserer Stichprobe nutzten 66% keinen einzigen der runden Buttons. Trotz geringer Stichprobengröße (n=15) zeigt dieses Ergebnis, dass mehr als eine Minderheit die Funktion nicht erkennt. Der Grund liegt darin, dass die Gestaltung keinerlei Erwartungen bezüglich der Funktion erzeugt. Würden Sie eine Pille schlucken, deren Wirkung Sie nicht kennen? Nur wenige Nutzer probieren unklar gestaltete Elemente aus. Wer eigene Symbole verwendet muss deren Verständlichkeit testen.
Schauen wir uns den Blickverlauf eines Nutzers an, der keinen dieser Buttons benutzt:
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
Eyetracking kinderueberraschung.de ohne Scrollen
Der Nutzer klickt zuerst auf das ihm bekannte, oft verwendete Symbol zum Abspielen eines Videos. Die anderen Symbole werden zwar öfters betrachtet, sind aber nicht einmal ein Mouseover wert, da die Funktionalität sich dem Nutzer nicht erschließt.
Je nach Zielstellung – Eine Hauptnavigation ist kein Muss
Die direkte Navigation zu den einzelnen Figuren ist im obigen Beispiel nicht möglich. Allerdings erscheint der Verzicht auf eine Hauptnavigation nicht so problematisch, da das Thema eher spielerischer Natur ist. In einem solchen „Erkundungsszenario“, ohne spezifisches Informationsbedürfnis, wirken sich leichte Schwächen in der Navigation weniger stark auf die User Experience aus. Auf Websites, die Informationen punktgenau präsentieren müssen und voneinander thematisch unabhängige Bereiche besitzen stellt es sich jedoch anders dar.
Wie eine solche Navigation gestaltet sein kann sehen wir auf der Website activatedrinks.com:
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
Eyetracking activatedrinks.com mit Scrollen
Es erfolgt am Anfang kein Klick, der Scrollhinweis wird gesehen. Dieses Verhalten legte die Mehrheit der Testpersonen an den Tag. Doch durch die deutliche Präsenz der Hauptnavigation scrollen die meisten Nutzer nicht bis zum Ende, sondern klicken in die Hauptnavigation. Wer auf die Begeisterung mittels Parallax Scrolling setzt sollte auf eine Hauptnavigation verzichten.
Wie beim ersten Beispiel fehlen auch hier Beschreibungen oder Elemente, die weitere Informationen im Contentbereich erkennen lassen. Die Klickrate der funktionalen Elemente ist sehr gering, da hier die Funktionalität selbst bei Mouseover nicht erkennbar hervorgehoben wird. Es ist nicht ausreichend, dass der Mauszeiger sich verändert.
Informations-One-Pages sollten eine Hauptnavigation besitzen
Für die zielgerechte Navigation kann kaum auf eine Hauptnavigation verzichtet werden. Stellen Sie sich vor, ein möglicher Kunde ist lediglich an den Kontaktinformationen einer Agentur interessiert: Was, wenn diese irgendwo auf einer ellenlangen Seite zu finden sind, und somit der Suche der Nadel im Heuhaufen gleicht?
„Ach, es gab da ja noch Agentur B.“
Neue und veränderte Navigationskonzepte müssen entsprechend der Zielstellung angemessen und fehlerfrei sein
One-Page Websites stellen besondere Anforderungen an die Navigationsstruktur. Solche Websites sind eher Exoten im Web, deren Design und Aufbau sich meist wenig an bekannten Standards orientiert. Gerade weil One-Page Websites meist einen WOW-Effekt erzielen und sich von der Masse abheben sollen, ist die Gefahr groß, dass Informationen und Navigationselemente nicht leicht erfassbar gestaltet sind. In diesem Fall einer schlechten Usability sind Nutzer schnell im Informationsdickicht verloren. Dann können selbst erfahrene Nutzer mit neuartigen, allzu kreativen und nicht intuitiven Informationskonzepten überfordert sein.
Überprüfen Sie deswegen immer (wieder) ihr Navigationskonzept. Am Besten in der Konzeptionsphase, wo die Kosten und Zeit einer Anpassung am geringsten sind. Per Eyetracking können wir hervorragend visualisieren was genau die Nutzer sehen. Aber nur mit gezielten Expertenfragen ist dann zu klären, ob die gesehenen Elemente auch verständlich sind.
Guter Artikel zum Thema Parallax Scrolling und UX! Es ist eine schöne Methode, den Nutzer zum Stöbern zu bringen – wenn sie richtig umgesetzt wird wie eure Beispiele gezeigt haben. Wichtig finde ich auch, dass die Seite dabei schnell laden muss, denn sonst geht der Effekt verloren und wirkt unschön. Das Beispiel von Activate Drinks gefällt mir auch sehr gut.
LG Julia
P.S.: In eurem Artikel ist der Link von Activate Drinks fehlerhaft, das ist die richtige Seite: http://activatedrinks.com/
Vielen Dank für den Hinweis, wir haben den Link korrigiert.
Pingback: 10 Lesetipps der Woche für Shopbetreiber » shopbetreiber-blog.de
Was soll die Seite,
billigste Erläuterungen und Links zu kommertiellen Firmenseiten.
Wäre ja nicht so schlimm, wenn die Firmenseiten etwas mit dem thema zu tun hätten.
Ist das Fake oder nur ungepflegt?
Auf jeden Fall lieblos und unnütz.
mit vollem Interesse gelesen, danke für den post!