Timing-Richtlinien für das Einblenden von verborgenen Inhalten

Ereignisse, die durch ein Mouseover oder einen Klick ausgelöst werden, müssen genau getimt werden, um eine versehentliche Aktivierung zu vermeiden und sicherzustellen, dass der Nutzer die Kontrolle über die Nutzeroberfläche behält.

 

by Aurora Bedford (deutsche Übersetzung) - 11.01.2015

 

Inhalte und Navigationselemente auf Websiten zu verbergen, ist ein Trend, der ständig an Beliebtheit gewinnt. Grund dafür sind unter anderem das Ziel, möglichst wenige Inhalte anzuzeigen, und der Bedarf, ein Design zu erstellen, dass sowohl auf mobilen Geräten als auch auf Desktop-Computern funktioniert. Obwohl es eine bewährte Vorgehensweise ist, zweitrangige Inhalte zu verbergen (zumindest auf mobile Geräten) und visuelle Übersättigung zu reduzieren, um die kognitive Belastung (engl.) zu minimieren, ist es ebenso wichtig - oder sogar noch wichtiger - sicherzustellen, das verborgene Inhalte nur dann erscheinen, wenn der Nutzer beabsichtigt, diese anzuzeigen.

In diesem Artikel diskutieren wir nicht, ob es eine gute Idee ist, Dinge zu verbergen. Wir werden ausserdem nicht darüber sprechen, ob das Design die Notwendigkeit des aktiven Einblendens der verborgenen Inhalte klar kommuniziert. Wir konzentrieren wir uns ausschliesslich auf die Mechaniken des Anzeigens der verborgenen Inhalte.

(Anmerkung: da wir zeitabhängige Nutzererlebnisse analysieren, werden zur Illustration Videoclips eingesetzt. Abhängig vom verwendeten Browser, müssen Sie den Mauszeiger auf das Standbild halten, um die Steuerungselemente des Video Players zu sehen.)

Beispiele für verborgene Inhalte

Das gängigste Beispiel für verborgene Seiteninhalte ist das Mega-Menü. Das Mega-Menü illustriert auch ein gängiges Problem von verborgenen Inhalten: es agiert oft, als würde es eigenständig denken, und "entscheidet" in unpassenden Momenten, unerwartet aufzutauchen oder zu verschwinden. Es gibt derzeit noch keine Internet-Standards, die festlegen, wie ein verborgenes Untermenü angezeigt werden soll. Nutzer sind daher gezwungen, mit der Positionierung des Mauszeigers oder mit Klicks zu experimentieren, während sie eine Website zum ersten Mal besuchen. Falls das Menü gut implementiert wurde, wird dieser kurze Zweifel keine ernsten Usability-Probleme zur Folge haben. Probleme treten nur dann auf, wenn Mega-Menüs unbeabsichtigt durch eine bestimmte Positionierung der Maus oder durch ein Überqueren des auslösenden Objekts mit dem Mauszeiger geöffnet werden, obwohl die Nutzer gerade versuchen, einen anderen Bereich der Seiteninhalte zu erreichen.

Das Mega-Auswahlmenü der Chairish Website öffnet sich sofort, wenn der Mauszeiger darauf gehalten wird - auch wenn der Mauszeiger nur über das Hauptmenü-Symbol gezogen wird, ohne darauf zu stoppen. Das angezeigte Menü ist so gross, dass es den gesamten Banner-Bereich der Startseite verdecken kann. Das kann jenen Nutzern Probleme bereiten, die den Cursor vom Header-Bereich der Seite in Richtung des Hero-Banners ziehen (zum Beispiel, da sie gerade die Adressleiste oder Buttons des Browsers verwendet haben und jetzt nach unten navigieren, um auf die wichtigste Handlungsaufforderung zu klicken). Der Nutzer muss in diesem Fall mehrere Arbeitsschritte absolvieren, um das Menü zu schliessen und zu den gewünschten Inhalten zu gelangen.

Tooltips, erweiterbare Werbeanzeigen und Handlungsaufforderungen bzw. Info-Kästchen, die über Listenobjekten erscheinen (wie Schnellansichten über Thumbnails auf Produktseiten) sind ein weiteres Beispiel für gängige Elemente mit Mouseover-Interaktion, die Nutzer stören könnten, falls Sie zu schnell ausgelöst werden.

Absicht erkennen

Wie können sich Designer also sicher sein, dass ein Nutzer den verborgenen Inhalt tatsächlich anzeigen will?

Das eindeutigste Anzeichen für die Absicht, verborgene Inhalte zu öffnen (oder eine Handlung durchzuführen) ist ein Klick oder ein Tippen auf ein Element. Im Gegensatz dazu setzen Elemente, die reagieren, sobald der Mauszeiger darüber bewegt wird, umfassendere Überlegungen voraus, was die Absichten der Nutzer betrifft. Verborgene Inhalte nach einem Mouseover zu schnell anzuzeigen, kann zu versehentlichem Einblenden führen und das Nutzererlebnis beeinträchtigen. Wenn Nutzer andererseits verborgene Inhalte anzeigen möchten und die Inhalte zu langsam erscheinen, könnte das System schwerfällig wirken, weshalb der Besucher die Geduld verlieren und die Seite verlassen könnte. Aufgrund der langsamen Antwortzeit (engl.) und dem fehlenden sofortigen Feedback könnten Nutzer ausserdem annehmen, dass das Element kein Auslöser mehr ist. Nutzer ähneln dem Goldilock-Prinzip: bei Mouseover-Interaktionen erwarten sie, dass das Timing genau richtig ist.

Was Mouseover-Interaktionen betrifft, ist es ein guter Indikator für die Absichten des Nutzers, wenn die Maus des Nutzers tatsächlich über dem Element stoppt, das als Auslöser dient. Je länger die Pause, desto stärker die Absichtserklärung. Falls der Mauszeiger noch in Bewegung ist, kann keine Absicht zur Aktivierung der verborgenen Inhalte angenommen werden, da die Mausbewegung zu einem anderen Element führen könnte oder einfach durchgeführt wurde, während Inhalte gelesen werden. Falls der verborgene Inhalt andere Elemente der Seite verschiebt oder überdeckt, müssen die Designer besonders vorsichtig sein und ein längeres Stoppen der Maus auf dem auslösenden Element voraussetzen, bevor die verborgenen Inhalte geöffnet werden. Anders ausgedrückt: je störender der Inhalt angezeigt wird, desto genauer müssen Designer die Absichten der Nutzer einschätzen können, bevor die Animation ausgelöst wird. (Anmerkung: das visuelle Feedback zur Interaktivität eines Elements sollte allerdings sofort angezeigt werden - auch wenn der Mauszeiger des Nutzers nicht auf dem Element stoppt. Diese Art von Feedback stellt eine zielgerichtete Auffindbarkeit sicher, sollte allerdings nicht aufdringlich sein und keine Interaktionskosten (engl.) voraussetzen, um ausgeblendet zu werden.)

Ein Teil der Pause des Mauszeigers kann auch in die Animation selbst integriert werden: eine längere Übergangsanimation, die startet, sobald der Nutzer den Mauszeiger auf das auslösende Element hält, relativ langsam fortschreitet und sofort stoppt, falls der Mauszeiger den Zielbereich verlässt, kann die Frustration und Verwirrung der Nutzer reduzieren. Ein erfolgreiches, bekanntes Beispiel ist das Anzeigen von alternativen Produktbildern auf einer Produktseite: es stört nicht, wird ausgelöst, sobald der Mauszeiger über den Zielbereich bewegt wird, dauert einige Zeit und stoppt, falls der Mauszeiger schnell darüber hinweg bewegt wird.

Wenn Nutzer ihren Mauszeiger über Produktbilder einer Unterseite der Herschel Website halten, wird ein alternatives Bild des Produkts angezeigt. Dieses alternative Bild ersetzt das Standard-Bild durch eine überblendete Animation, welche startet, nachdem der Mauszeiger für kurze Zeit im Zielbereich verweilt. Obwohl die Animation nicht unbedingt wartet, bis der Mauszeiger komplett gestoppt wurde, ist das Timing dank der langsamen Übergangsanimation lange genug, um die Absichten des Nutzers zu ermitteln. Dadurch wird Nutzerfrustration verhindert.

Nachdem der Inhalt angezeigt wurde, sollte es eine kurze Verzögerung geben, bevor Inhalte wieder verborgen werden, falls der Mauszeiger den Zielbereich des Mouseover-Elements verlässt. Nur so kann sichergestellt werden, dass das Mouseout absichtlich erfolgte und der Nutzer nicht mehr zu den Inhalten zurückkehren möchte. Falls diese Empfehlung ignoriert wird, könnte das sogenannte diagonale Problem von Mega-Menüs auftreten, bei dem der Pfad zu Inhalten in einem Auswahlmenü voraussetzt, dass der Mauszeiger den Zielbereich des Elements verlässt. In solchen Situationen kommunizieren die fortdauernde Bewegung der Maus und das Zurückkehren in den Zielbereich innerhalb eines angemessenen Zeitraums die Absicht des Nutzers, den geöffneten Inhalt weiterhin sehen zu wollen. Nutzer sollten nicht gezwungen werden, mit der Maus keine Linien zu überschreiten.

Die linke Navigation mit einem Untermenü im Schubladenstil der LA Times Website ist ein perfektes Beispiel für das diagonale Problem, das bei Menüs, die durch Mouseovers aktiviert werden, auftreten kann. Während versucht wird, den Mauszeiger vom übergeordneten "Entertainment"-Menü zu einem Unterpunkt des "Sections"-Bereichs zu bewegen, verlässt der Pfad des Cursors für kurze Zeit den Zielbereich von "Entertainment" und führt über "Sports", was zur Folge hat, dass sich das Untermenü ändert und stattdessen das "Sports"-Untermenü angezeigt wird.

Timing-Richtlinien

Wenn verborgene Elemente auf einer Website geöffnet werden, muss die Geschwindigkeit der Animation angepasst werden, damit die Nutzer das Gefühl haben, die Nutzeroberfläche unter Kontrolle zu haben. Visuelles Feedback zur Interaktivität eines Elements (über eine Veränderung der Hintergrundfarbe, der Textfarbe oder des Stils) muss innerhalb von 0.1 Sekunden erscheinen, um das Gefühl einer sofortigen Antwort zu wahren und dem Nutzer zu kommunizieren, dass das Element durch ein fortdauerndes Mouseover oder einen Klick ein Ereignis auslösen wird. Danach kann die Absicht des Nutzers, entsprechende verborgene Inhalte anzuzeigen, entweder sofort - nach einem Klick oder Tippen - oder nachdem die Bewegung des Mauszeigers pausiert wurde und dieser rund 0.3-0.5 Sekunden im Zielbereich verweilt, angenommen werden, wonach der verborgenen Inhalt auf der Seite dargestellt werden kann. Erst wenn der Nutzer ausserhalb des Zielbereichs klickt oder tippt, oder wenn der Mauszeiger den Zielbereich und den geöffneten Inhalt länger als 0.5 Sekunden verlässt, kann eine Absicht zum Verbergen der geöffneten Inhalte angenommen werden.

Für Klick- und Tipp-Interaktionen sind die Timing-Richtlinien relativ einfach:

1. Zeigen Sie nach einem Klick oder Tippen visuelles Feedback an und beginnen Sie nach 0.1 Sekunden, den verborgenen Inhalt anzuzeigen.
2. Zeigen Sie die geöffneten Inhalte so lange an, bis der Nutzer ausserhalb des geöffneten Bereichs klickt oder tippt.

Für Mouseover-Interaktionen müssen die Timing-Richtlinien in mehrere Schritte unterteilt werden, welche die Geschwindigkeit des visuellen Feedbacks und des Anzeigens verborgener Elemente inkludieren:

1. Der Mauszeiger erreicht den Zielbereich: zeigen Sie innerhalb von 0.1 Sekunden visuelles Feedback an.
2. Warten Sie 0.3 - 0.5 Sekunden.
3. Falls der Cursor im Zielbereich gestoppt wurde, zeigen Sie den entsprechenden verborgenen Inhalt innerhalb von 0.1 Sekunden an.
4. Zeigen Sie das verborgene Element so lange an, bis der Cursor den auslösenden Zielbereich oder den geöffneten Inhalt länger als 0.5 Sekunden verlassen hat.

Wenige hundert Millisekunden könnten bedeutungslos erscheinen, sie sind allerdings ausschlaggebend, sofern Sie nicht das nächste "Minesweeper" produzieren möchten. Falls Sie stattdessen auf nahtlose Mouseover-Interaktionen abzielen, kann das zehntelsekundengenaue Timing Nutzern Mühe (und Frustration) ersparen und ein reibungsloses Nutzererlebnis sicherstellen.

 

© Deutsche Version. Institut für Software-Ergonomie und Usability AG. Alle Rechte vorbehalten.