Karusselle, Bühnen, Slider – es gibt viele Namen für die großen Flächen mit rotierenden Inhalten, die sich vor allem auf der Startseite vieler Websites finden. Aus Usability-Sicht werden diese Interface-Pattern häufig sehr kritisch betrachtet und nicht wenige Experten fordern, sie ganz zu entfernen.

 

Trotzdem gibt es sie schon lange und auch weiterhin kommen Karusselle häufig zum Einsatz. Ein kurzer Blick auf die 10 umsatzstärksten deutschen Online-Shops  zeigt, dass sechs von ihnen auf der Startseite ein Karussell einsetzen. Nicht zuletzt werden sie gerne verwendet, um möglichst viele Stakeholder gleichzeitig zufriedenzustellen – so kann jeder mit seinen Inhalten auf die Startseite.

 

Auch ich habe schon häufig in Usability-Tests Probleme mit Karussellen beobachten können. Trotzdem möchte ich sie nicht grundsätzlich verdammen. Die größten Probleme können durch eine gute Umsetzung verhindert werden. Deshalb möchte ich Ihnen heute einige Tipps geben, um die Usability Ihres Karussells zu verbessern.

 

Usability: Orientierung und Navigation

Bei vielen Karussellen fällt es den Nutzern schwer, sich zu orientieren und die gewünschten Inhalte anzusteuern. Sie müssen immer erkennen können, wie viele Inhalte es gibt und bei welchem Inhalt sie sich gerade befinden. Zudem sollten Nutzer immer das Gefühl haben, die Kontrolle über die Website zu besitzen und somit das Karussell auch manuell steuern zu können.

Meine Guidelines dazu:

  • Zeigen Sie durch einen Indikator, wie viele Elemente das Karussell hat. Häufig sind das runde Punkte, die unten mittig angeordnet sind.
  • Noch besser ist es, wenn sie nicht nur Punkte verwenden, sondern auch kurz in Textformbeschreiben, um welchen Inhalt es sich handelt (siehe Abb. 1). So können die Nutzer sich einen Überblick verschaffen, ohne durch alle Inhalte einzeln durchzugehen. Wenn sie etwas interessiert, können sie es direkt ansteuern.
  • Der Indikator – ob nur ein Punkt oder mit kurzer Bezeichnung – muss für den aktiven Inhalt hervorgehoben werden. So können die Nutzer klar erkennen, wo sie sich gerade befinden.
  • Für die manuelle Navigation muss der Indikator zudem klickbar sein und direkt den entsprechenden Inhalt des Karussells anzeigen.
  • Ein Klick auf den Indikator, wenn dieser Inhalt bereits aktiv ist, sollte direkt zur Zielseite führen. Manchen Nutzern erschließt sich die Interaktion mit Karussellen nicht sofort. So können sie trotzdem zum gewünschten Inhalt gelangen.
  • Zusätzlich zu den Indikatoren sollte es möglichst auch eine Vor- und Zurück-Navigation in Form von Pfeilen geben.
  • Die gesamte Navigation des Karussells muss sich von dessen Inhalten klar abheben, um deutlich für die Nutzer erkennbar zu sein. Gleichzeitig darf die visuelle Zugehörigkeit nicht verloren gehen. Die Nutzer müssen verstehen, welches Element der Startseite mit dieser Navigation gesteuert wird.
conrad-karussell

Abb. 1: Conrad beschreibt die Inhalte des Karussells jeweils kurz in der Navigation.

Automatischer Wechsel und Animationen

Häufig wird gerade der automatische Wechsel der Inhalte eines Karussells kritisiert. Und tatsächlich passiert es Nutzern häufiger, dass sie gerade dann klicken, wenn gerade ein neuer Inhalt erschienen ist, und somit zur falschen Zielseite gelangen.

Meine Guidelines dazu:

  • Automatischer Wechsel nach dem Laden der Seite ist okay, aber nur wenn sie auch die folgende Guidelines beachten. Der automatische Wechsel verdeutlicht den Nutzern, dass es noch weitere Inhalte gibt und regt sie zur Interaktion an.
  • Der automatische Wechsel darf nicht zu schnell erfolgen. Die Anzeigedauer sollte sich nach dem Inhalt richten – wenn es mehr zu lesen gibt, sollte der Inhalt auch länger angezeigt werden. Somit muss im Zweifelsfall die Anzeigedauer auch für jeden Inhalt einzeln konfiguriert werden. Generell ist alles unter 5 Sekunden zu kurz.
  • Bei Mouseover sollte der automatische Wechsel pausieren, damit Nutzer nicht gerade im falschen Moment klicken. Nach Mouseout kann es dann weitergehen.
  • Sobald ein Nutzer das Karussell einmal manuell steuert, sollte der automatische Wechsel permanent deaktiviert werden. Es ist zu diesem Zeitpunkt klar, dass die Interaktion mit dem Karussell verstanden wurde und der Nutzer die volle Kontrolle haben sollte.
  • Die Animation des Übergangs zwischen den Inhalten sollte zu der Ausrichtung der Inhalte passen. Wenn die Indikatoren in der Navigation horizontal angeordnet sind, sollten die Inhalte auch horizontal in den Sichtbereich hinein- und herausfahren. Ist die Navigation dagegen vertikal, muss auch die Animation nach oben und unten erfolgen (siehe Abb. 2).
esprit-karussell

Abb. 2: Bei Esprit erfolgt die Animation der Inhalte entsprechend der vertikalen Ausrichtung der Karussell-Navigation. Die Inhalte sind ansprechend, schlicht und klar gestaltet.

 

Inhalte des Karussells

Generell beachten Nutzer die Inhalte der Karuselle kaum und klicken noch seltener darauf. Viele Nutzer haben vor dem automatischen Wechsel schon weitergescrollt oder die Seite gewechselt und sehen die Inhalte erst gar nicht. Darüber hinaus wirken schlecht gestaltete Inhalte gerade bei animierten Karussellen häufig wie Werbung und fallen deshalb der so genannten „Banner Blindness“ zum Opfer.

Meine Guidelines dazu:

  • Überlegen Sie, den zu Beginn gezeigten Inhalt für jeden Nutzer zufällig zu bestimmen – außer es gibt gute Gründe, dass ein bestimmter Inhalt immer zuerst gesehen werden sollte. Sie können davon ausgehen, dass die Aufmerksamkeit der Nutzer für die einzelnen Inhalte nach dem initial gezeigten drastisch abnimmt.
  • Inhalte eines Karussells sollten immer optionale, zusätzliche Einstiege sein. Das Karussell darf nicht der einzige Weg zu einer wichtigen Seite für die Nutzer sein, denn sonst werden viele von ihnen ihr Ziel nicht finden. Stellen Sie somit immer auch die Auffindbarkeit über die Hauptnavigation sicher. Und wirklich zentrale Inhalte sollten einen permanenten Platz auf der Startseite bekommen.
  • Die Gestaltung der einzelnen Inhalte sollte allgemeinen Richtlinien fürs Web folgen. Schreiben Sie nicht zu viel Text und verwenden Sie einen eindeutigen Call-to-Action. Die Gestaltung sollte ansprechend sein, aber nicht marktschreierisch wirken. Verzichten Sie auf zu viele bunte Elemente und Auszeichnungen (siehe Abb. 2).

Karusselle auf mobilen Websites

Auf mobilen Websites und generell für Touch-Geräte gilt es, einige Besonderheiten zu beachten. Eine komplette Betrachtung würde hier zu weit führen, aber Folgendes sei zur Usability von Karussellen gerade auf Smartphones gesagt:

  • Unterstützen Sie die Swipe-Geste zum Wechseln zwischen den Inhalten. Sie ist für die Nutzer absolut gewohnt und erlaubt das einfache Navigieren des Karussells.
  • Indikatoren für die Inhalte sind weiterhin notwendig, aber für Text ist in der Navigation kein Platz. Auch das Anklicken der Indikatoren zur Navigation muss nicht zwingend möglich sein.
  • Überlegen Sie gut, ob ein automatischer Wechsel wirklich notwendig ist. Durch den fehlenden Mouseover auf Touch-Geräten klicken Nutzer womöglich im falschen Moment.

Fazit:  Karusselle mit Bedacht einsetzen und wenn, dann richtig

Generell sollten Sie Karusselle nur auf Ihrer Startseite einsetzen, wenn es auch vernünftige Gründe dafür gibt. Wenn Sie einen anderen Weg finden können, die nötigen Inhalte zu präsentieren, dann ist zu überlegen, ob dieser nicht sinnvoller ist.

Wenn Sie ein Karussell verwenden, achten Sie bitte auf eine gute User Experience. Ansonsten verärgern Sie schnell Ihre Nutzer und erreichen keine gute Conversion Rate. Schlussendlich können Sie nur durch Studien mit echten Nutzern – etwa Usability-Tests im Labor – herausfinden, ob Ihr Karussell verständlich ist. Durch Einhaltung der von mir beschriebenen Guidelines sind Sie aber schon auf einem guten Weg.

 

Quellen und weiterführende Links: