Bestimmt bist Du schon einmal diesen «Geduldspielen» auf Webseiten begegnet, welche Dich fast zur Verzweiflung gebrachten haben. Ich rede von diesen Usability Hindernissen, die meist unabsichtlich in Interaktionen von Webseiten eingebaut sind.
feinfühliges scrollspiel
Zum Beispiel diese neue Scroll-Technik – die momentan gerade ihren Trend feiert – bei welcher man mit minmaler Scroll-Bewegung eine ganze Bildschirmhöhe scrollt. Dies zum Leid aller jener, die Eingabegerät benutzen welches den Fensterinhalt Stufenlos scrollt – was eigentlich der Standart der heutigen Mäuse und Touchpads sein sollte. Diese Technik mag in einigen Fällen berechtigt sein – wenn zum Beispiel jeder Abschnitt die ganze Höhe des Fensters einimmt. Bei den meisten One-Page-Webseiten ist dies aber nicht der Fall und das Scrollen wird zur Geduldsübung.
Die Lösung: Finger weg von eingriffen in die Scrollschritte eurer User.
Geduld mit Dropdown-Menüs
Ein weiteres Geduldspiel ist, wenn ein Menüpunkt in der Navigation unerreichbar zu sein scheint, oder sich das Dropdown schon schliesst bevor man die endgültige Wahl treffen konnte. Als Beispiel bei der Navigation der UBS Webseite:
UBS Navigation
Klassisches Dropdown
Die klassische Lösungsvariante
Um zu verhindern, dass sich Submenüs bei diagonaler Zeiger-Bewegung nicht schliessen, hat man angefangen eine kleine Verzögerung einzubauen, damit der User Zeit den Cursor zum Ziel zu bewegen und nicht Vorsichtig den rechten Winkel mit der Maus abzufahren hat. Diese Technik lässt aber die Navigation träge und unresponsive wirken lässt:
Dropdown mit Verzögerung
Die Amazon-Lösung
Unter anderem auch für das E-Commerce Projekt Naturkostbar haben wir nach einer besseren und benutzerfreundlicheren Lösung gesucht. Fündig wurden wir beim E-Commerce-Riesen Amazon und haben deren Lösung nachgebaut. Amazon löste das Problem, indem sie per Javascript ein art Dreieck bilden, welches aus den Punkten des aktuellen Aufenthaltsort des Mauszeigers und den beiden linken Ecken des Submenüs resultiert. Wenn der User den Cursor nun innerhalb des erzeugten Dreiecks bewegt, bleibt das aktuelle Submenü geöffnet. Bewegt er den Mauszeiger aber vertikal, werden die anderen Menüs aufgerufen – dies ohne Verzögerung.
Generiertes Dreieck
Bewegung vertikal
Diese Technik gehört zu den kleinen aber feinen Details, welche die User nur bemerken wenn sie fehlen und dennoch tragen diese Verbesserungen enorm zur allgemeinen User Experience bei.
