Akkordeons auf mobilen Geräten

Akkordeons sparen Platz auf mobilen Geräten, können aber Verwirrung und übermässiges Scrollen zur Folge haben. Einfache Design-Anpassungen verbessern die Usability dieser UI-Elemente.

 

by Raluca Budiu (deutsche Übersetzung) - 31.05.2015

 

Ein Akkordeon ist ein Designelement, das geöffnet werden kann, um verborgene Informationen anzuzeigen. Im Gegensatz zu Overlays schieben Akkordeons den Seiteninhalt nach unten und werden nicht über dem Inhalt der Website angezeigt.

Tommy.com: Der Preis Filter wurde als Akkordeon implementiert, das sich öffnet und den Inhalt der Seite nach unten verschiebt.

Obwohl die Verwendung von Akkordeons auf Desktop-Computern umstritten ist, sind Akkordeon sauf mobilen Geräten eines der nützlichsten Designelemente, da sie häufig das Problem lösen, viel Inhalt auf einem sehr kleinen Bildschirm anzeigen zu müssen. Gelegentlich können Akkordeons allerdings zu Verwirrung führen - zum Glück kann dieses Problem aber ganz einfach gelöst werden, indem die Funktion der Zurück-Taste des Browsers erweitert wird.

Mini-IA oder warum Akkordeons ideal für mobile Geräte sind

Einer der grössten Vorteile von Akkordeons ist, dass sie es Nutzern ermöglichen, sich einen Überblick zu verschaffen, bevor sie sich auf Details konzentrieren. Ausserdem können sie das gängige Problem überlanger Seiten lösen.

Wenn Nutzer eine neue Website öffnen, verhalten sie sich wie Tiere, die in der Wildnis nach Nahrung suchen: sie versuchen, zu verstehen, welche Dinge die Seite enthält und ob diese Informationen für ihre Ziele relevant sind. Sobald sie diese Frage beantwortet haben, scrollen sie entweder weiter (falls sie glauben, dass die Seite ihre Bedürfnisse erfüllt) oder verlassen die Website, um eine bessere Informationsquelle zu suchen (falls die Seite nicht ihren Erwartungen entspricht). Wenn eine mobile Seite aus vielen unzusammenhängenden Inhalten besteht, müssen Nutzer nach unten scrollen, um die gesuchten Inhalte zu finden - ein mühsamer und frustrierender Vorgang, wenn der Grossteil des Seiteninhalts irrelevant ist. Das Resultat ist, dass Nutzer oft nicht weiterscrollen, sondern die Seite verlassen. Dadurch verpassen sie die Informationen, die ihre Frage beantwortet hätten, da sich diese einfach zu weit unten auf der Seite befinden.

World Wildlife Fund: Die mobile Seite zeigt verschiedene Abschnitte untereinander an. Nutzer von mobilen Geräten können daher nicht wissen, welche Art von Informationen die Seite enthält - zum Beispiel können sie nicht ahnen, dass die Seite eine Beschreibung der Bedrohungen für Tiger oder einen Spenden-Link enthält, sofern sie nicht bis ganz nach unten scrollen. Der oberste Abschnitt "Überblick" motiviert nicht zum Scrollen, wodurch diese Informationen verborgen bleiben.

Wie sieht also die Lösung des Problems aus? Eine gute Website kommuniziert, wovon sie handelt. Das bedeutet, dass ein Inhaltsverzeichnis (bzw. eine Mini-IA) vorhanden sein muss, die auffällt und sofort sichtbar ist, nachdem der Nutzer die Seite geöffnet hat. Ein derartiges Inhaltsverzeichnis hat drei Hauptvorteile:

1. Es informiert Nutzer darüber, welche Dinge auf der Website enthalten sind und ob diese Informationen relevant für ihre Ziele sind.
2. Es ermöglicht Nutzern direkten Zugriff auf den Bereich, der sie interessiert.
3. Es hilft Nutzern, ein mentales Modell der Unterseite - und unter Umständen sogar der gesamten Website - zu erstellen.

Es gibt mehrere Möglichkeiten, um eine solche Mini-IA oder ein Inhaltsverzeichnis zu erstellen: Links, sekundäre Navigationsleisten, Menüs oder Akkordeons. Wir behandeln alle Aspekte in unserem neuen Bericht (engl.) zum Nutzererlebnis für mobile Apps und Websites. Heute konzentrieren wir uns aber auf Akkordeons, welche zu den elegantesten Lösungen gehören: sie nehmen am wenigsten Platz ein (da sie gleichzeitig Unterüberschriften sind) und haben das Potenzial, den Nutzer auf der Seite zu halten.

Auf den Medikamente-Seiten zeigt WebMD eine Mini-IA in Form von Akkordeons an (rechts). Leider ist das erste Akkordeon standardmässig geöffnet (links) und verhindert so, dass sich Nutzer einen schnellen Überblick über die Struktur der Seite schaffen können (ohne zu scrollen). Einige Nutzer könnten dadurch glauben, dass es auf der Seite nur um Warnungen betreffend Medikamente geht, und die Seite verlassen, ohne nach unten zu scrollen.

Solche Akkordeons sind nicht nur auf Inhaltsseiten sinnvoll, sondern auch in Formularen. Jeden Abschnitts des Akkordeons nacheinander zu schliessen, kann eine effektive Möglichkeit sein, um Nutzern den Workflow des Formulars zu kommunizieren, ohne sie zu überwältigen (lange Formulare auszufüllen ist auf mobilen Geräten häufig mühsam) und ohne mehrere Seiten laden zu müssen.

Das Kassenformular von Skinnyties.com enthält Akkordeons, die es dem Nutzer ermöglichen, den gesamten Workflow zu sehen, ohne von einem sehr langen Formular überwältigt zu werden.

Potenzielle Schwierigkeiten von Akkordeons

Details in einem Akkordeon zu verbergen, ist eine Technik, die wir für mobile Geräte dringend empfehlen, da sie die Idee verfolgt, sekundäre Inhalte auf sekundäre Seiten zu verschieben. Dennoch können Akkordeons auch Usability-Probleme zur Folge haben.

Verwirrung

Nachdem Nutzer ein Akkordeon öffnen, verschieben Designer diesen Menüpunkt oft ganz nach oben (wie es im unten stehenden WebMD Beispiel der Fall ist), um den Platz, der für den Akkordeon-Inhalt zur Verfügung steht, zu maximieren. Das hat allerdings den Nachteil, dass der Nutzer glauben könnte, eine neue Seite geöffnet zu haben. Das Resultat ist, dass häufig die Zurück-Taste verwendet wird, um zur Ansicht mit den geschlossenen Akkordeons zurückzukehren - was zur Folge hat, dass der Nutzer die aktuelle Seite verlässt.

WebMD.com: Wenn Nutzer das "Side Effects" Akkordeon öffnen, wird der Inhalt ganz nach oben verschoben, was den Eindruck erweckt, dass eine neue Seite geladen wurde. Die Nutzer erwarten daher, dass sie durch einen Klick auf die Zurück-Taste des Browsers zum geschlossenen Akkordeon-Menü zurückkehren können.

Um diese Verwirrung zu verhindern und es Nutzern zu ermöglichen, schnell zu den geschlossenen Akkordeons zurückzukehren, können Sie die Zurück-Taste des Browser als Befehl zum Schliessen des Akkordeons verwenden: falls die letzte Handlung des Nutzers das Öffnen des Akkordeons war, sollte ihn ein Klick auf Zurück wieder zur geschlossenen Akkordeon-Ansicht führen. Das bedeutet, dass Akkordeons genauso behandelt werden, wie Links auf der Website.

Eine weitere Lösung (die den Platz allerdings auf weniger effektive Weise nutzt) ist es, die Illusion einer neuen Seite zu verhindern, indem die Seite beim Öffnen eines Akkordeons nicht nach oben verschoben wird. Diese Lösung hat den Vorteil, dass der Nutzer den Überblick behält.

Zur nächsten Option scrollen

Die meisten Akkordeons werden geschlossen, indem auf das Element geklickt wird, das sie geöffnet hat (obwohl es weitere Variationen gibt, bei denen Akkordeons als Navigationsmenüs verwendet werden).

Manchmal ist der Inhalt eines Akkordeons sehr lang, in welchem Fall es von Vorteil ist, schnellen Zugriff auf eine Schliessen-Taste zu ermöglichen. Im unten stehenden Beispiel von Wikipedia ist der Inhalt des History-Akkordeons sehr lang. Falls Leser nicht weiterlesen, sondern stattdessen ein anderes Unterthema öffnen möchten, müssen sie entweder nach unten scrollen, um das nächste Akkordeon zu finden oder nach oben scrollen, um das History-Akkordeon zu schliessen.

Wikipedia.org: Das History-Akkordeon enthält viel Inhalt, der sich über mehrere Bildschirme erstreckt. Leser, die einen Teil des Texts lesen und dann zu einem anderen Unterthema wechseln möchten, müssen nach oben scrollen, um das History-Akkordeon zu schliessen oder nach unten scrollen, um zu anderen Akkordeons in der Liste zu navigieren.

In derartigen Situationen kann ein ständig angezeigter Akkordeon-Header oder ein anderes schwebendes Element, das es Nutzern ermöglicht, das Akkordeon schnell zu schliessen, die Interaktion beschleunigen und Nutzern einige Mühe ersparen. Im Browser kann die Interaktion beschleunigt werden, indem Akkordeons wie Links behandelt werden und die Zurück-Taste verwendet werden kann, um das Akkordeon zu schliessen, anstatt die vorhergehende Seite zu öffnen.

Um das Problem des Scrollens zu lösen, das notwendig ist, um den Akkordeon-Inhalt zu verlassen, stellte Zappos für Android seinen Nutzern den Button Collapse zur Verfügung, der es ihnen ganz einfach ermöglicht, das Akkordeon zu schliessen und zur gefilterten Liste zurückzukehren. Leider verstanden die Nutzer bei Tests die Funktion des Buttons nicht und verwendeten ihn daher nicht. (Der Begriff "Collapse" macht in diesem Zusammenhang für Nutzeroberflächen-Nerds Sinn, durchschnittliche Nutzer verstehen ihn allerdings eher im Kontext "er kollabierte durch einen Hitzschlag".)

Zappos für Android: Der "Brand" Filter ist ein Akkordeon, das ausgeklappt wird (links). Indem Nutzer auf den Collapse-Button tippen, kehren sie zur gefilterten Liste zurück (rechts).

Amazon verwendet ebenfalls ein Akkordeon - statt einen unbekannten Button anzuzeigen, verwandelt es die Akkordeon-Steuerung allerdings in ein Sticky, das über dem Inhalt angezeigt wird. Diese Lösung ist wesentlich nutzerfreundlicher als jene von Zappos.

Amazon.com: Die Überschrift des Akkordeons Shoe Size wird zu einem Sticky, sobald die Nutzer durch die Liste der Grössen scrollen. Dieses Design vereinfacht das schnelle Schliessen des Akkordeons und die Navigation zur nächsten Option.

Schlussfolgerung

Akkordeons sind ein tolles Instrument für mobile Designs, da sie Informationen bei geringem Platzangebot komprimieren und es Nutzern ermöglichen, den Überblick zu behalten und sich auf die Kernaussage, anstatt auf Details, zu konzentrieren. Wenn der Inhalt des Akkordeons allerdings zu lang ist, könnten Nutzer gezwungen sein, zu lange zu scrollen, um das Akkordeon zu schliessen und die anderen Informationen der Seite zu erreichen. Akkordeons können auch zur Verwirrung von Nutzern beitragen. Zum Glück können diese Probleme ganz einfach durch geringe Designänderungen, wie fixierte Akkordeon-Überschriften und die Behandlung von Akkordeons wie Links, gelöst werden.

In der aktuellen Ausgabe unseres Berichts Nutzererlebnis für mobile Apps und Websites (engl.) erfahren Sie mehr über die Verbesserung der Usability von mobilen Designelementen.

 

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