Fix Your UX: Teaser Karusselle
Eine Sammlung an Argumenten und Lösungsvorschlägen zum Thema Slider und Teaser Karusselle
Hero-Teaser Karusselle gelten häufig als Lösung für ein inhaltliches Problem. Es fehlt eine Priorisierung der Inhalte was dazu führt, dass Inhalte, Angebote, Produkte, etc. an der gleichen Stelle im UI, vermeintlich gleich prominent dargestellt werden sollen. Ich habe ein paar Argumente gesammelt warum ein Teaser Karussell nicht die Lösung ist und alternative Lösungsvorschläge ausgesucht.
Automatisch rollierende Teaser sind Anti-Pattern
Ein wichtiges Prinzip dass es bei der Gestaltung von User-Interfaces, zu beachten gilt, ist die Vermeidung von sogenannte Anti-Pattern. Es handelt sich dabei vereinfacht gesagt um Verhalten eines Interfaces, die den Nutzer verwirren können bzw. von ihm so nicht erwartet werden. Zu diesen Dingen gehören auch Animationen oder Aktionen die ausgelöst werden, ohne dass der Nutzer interagiert hat. Ein automatisch rollierender Teaser fällt leider in genau diese Kategorie. Die dargestellten Informationen wechseln, ohne dass der Nutzer eine Aktion ausgeführt hat. Verwirrung ist die Folge.
Perfektes Timing ist nicht möglich
Lesegeschwindigkeiten sind von Mensch zu Mensch unterschiedlich. Das perfekte Timing bei der Animation zu treffen um allen Lesegeschwindigkeiten gerecht zu werden, ist quasi unmöglich. Jedes gewählte Timing stößt eine Nutzergruppe vor den Kopf. Der schnelle Leser wartet nicht auf den automatischen Wechsel, der langsame Leser kann nicht fertig lesen, weil der Inhalt sich bereits ausgewechselt hat. Mal ganz abgesehen von dem der gar nicht liest. Studien haben gezeigt dass sich das Leseverhalten von Menschen durch das Internet nachweislich stark verändert hat.
Per klick wechselbare Teaser werden nicht angesehen
Die University of Notre Dame hat Teaser Karusselle getestet bei denen die User per Klick zwischen den einzelnen Slides/Teasern navigieren könnten. Das Ergebnis: Weniger als 1% der User haben sich die Teaser nach dem initial angezeigten Teaser angesehen bzw. überhaupt dorthin navigiert. Das Ergebnis ist also das selbe als hätte man nur einen Teaser angezeigt.
Teaser Karusselle werden vom User ausgeblendet
In User-Tests (1, 2) wurde u.a. herausgefunden, dass Nutzer diese Art der Darstellung teilweise als Display-Ads also Werbung wahrnehmen und komplett aus ihrer Wahrnehmung ausblenden (Stichwort: Banner Blindness).
Usability Experte Lee Duddell hatte nach einer abgeschlossenen Studie zu diesem Thema folgendes dazu zu sagen:
“They are next to useless for users and often skipped because they look like advertisements. (…) Use them to put content that users will ignore on your Home Page.” — Lee Duddell
Teaser Karusselle wirken unfreundlich
Man stelle sich vor man betritt eine Bank (Reisebüro, Aut0haus, etc.). Bevor man überhaupt einen Wunsch äußern kann bekommt man vier Broschüren, zwei Gutscheine und drei Flyer mit den Worten “Keine Ahnung was sie möchten, suchen Sie sich doch selbst was aus.” in die Hand gedrückt. Den Laden hätte man wohl das letzte Mal betreten. Teaser Karusselle machen genau das. Sie zeugen davon, dass sich das Unternehmen wohl nicht mit seinen Nutzern auseinandersetzen möchte und überlässt die lästige Beratungsarbeit den Kunden selbst. Diese Lösung ist also nur dann adäquat, wenn man das Wort “unsympathisch” in die eigenen Markenwerte mit aufnehmen möchte.
Sie sind schwer zu gestalten und noch schwerer gut umzusetzen
Bei der Entwicklung eines Teaser Karussells gibt es mannigfaltige Herausforderungen und technische Hürden. Dazu zählen auch aber nicht ausschließlich die Performance, das Ladekonzept der Seite und die Darstellung im Interface. Es gibt extrem viele Faktoren zu beachten und potenzielle Fehlerquellen die gravierende Auswirkungen auf die Usability haben können. Der Kosten-Nutzen Faktor gerät oft schnell aus dem Gleichgewicht. Es wird getestet, festgestellt dass es nicht funktioniert und dann versucht der Situation technisch Herr zu werden. Zu deutsch: Es wird rumgedoktort. Die Entwicklungskosten laufen über und man verhindert die Exploration von anderen Lösungen, da es bis hierher ohnehin schon so teuer war. Hätte man das Problem inhaltlich gelöst, wäre man bei einem Bruchteil der Kosten gelandet und hätte eine besser funktionierende Lösung.
Apropos Lösungen …
Lösungsvorschläge
Das Beste draus machen
Manchmal ist es unmöglich seinen Kunden, Auftraggeber, etc. davon zu überzeugen dass ein Teaser Karussell nicht die Lösung ist. (Denn die Konkurrenz hat das ja auch!). Dann heißt es, das Beste rauszuholen was geht. Dafür ein paar Tipps die man bei der Umsetzung beachten sollte:
- Schnelle Ladezeiten sind wichtig. Nichts ist schlimmer als ein automatisch rollierendes Teaser Karussell mit Preloader.
- Frequenz der Teaserwechsel niedrig halten oder am besten ganz vermeiden, denn …
- … überlasse dem User die Kontrolle. Z.B. mittels eines Pause Buttons oder Navigationspfeilen die bei Klick die automatische Animation aussetzen.
- Die Pfeile, Punkte, Indikatoren etc. zur Steuerung des Karussells sollen groß genug sein. Dazu zu beachten: Touch Target Sizes
- Je weniger Teaser desto besser
- Unendliches scrollen vermeiden. Also nicht automatisch von vorne starten wenn der User am letzten Teaser angelangt ist.
Alternative Vorgehensweisen
Übersicht schaffen
Anstatt die gleich zu gewichtenden Inhalte in einzelne Teaser in ein Karussell zu verbannen können diese, für gute Übersichtlichkeit, auch auf einer großen prominenten Fläche als Kacheln angezeigt werden. Das stellt das Beste aus beiden Welten dar. Alle Themen werden gespielt und der Nutzer hat eine gute Übersicht.
Bedürfnisse adressieren
Um nicht raten zu müssen was man einem unbekannten Nutzer zeigt, kann man ihn wählen lassen was er sehen möchte. Hilti löst das mit einem prominenten Einstieg für Zielgruppen und richtet den kompletten Content auf die getroffene Auswahl des Users aus. So entgeht man der Argumentationsfalle: Wir wissen ja gar nicht wer auf unsere Seite kommt, also müssen wir alles zeigen.
Insights nutzen
Auf bauwelt.eu wird automatisch nach Jahreszeiten ausgesteuert, welche Teaser mit welchen Themen prominent auf der Startseite angezeigt werden. Kurz nach dem Winter widmen sich viele Hausbesitzer dem Austausch maroder Fenster, kurz vor dem Sommer stehen Gartenthemen im Vordergrund, etc. Genau auf diesen Insights basiert die Auswahl der auszuspielenden Teaser.
Testen
Der no-brainer Tipp. Aber nichts ersetzt echtes User-Feedback. Nein, nichts. Ehrlich. Denn wenn man mit Argumenten nicht weiterkommt, dann meistens mit Zahlen. Echtes User-Feedback einzuholen heißt im Fall des Teaser Karussels, im Live Betrieb User-Tests oder sogar A/B Tests mit alternativen Darstellungen zu fahren und die resultierenden Daten an die Stakeholder zu präsentieren. Wenn jemand jemals ein Teaser Karussell besser testet als irgendeine andere adäquate Darstellungsform bitte Info an mich. I doubt it.
Die strategische Lösung
Wie eingangs erwähnt handelt es sich bei Teaser Karussellen häufig um den “Hack” der angewandt wird um einen inhaltliche Schwäche auszugleichen. Die inhaltliche Schwäche ist hier meistens eine fehlende Priorisierung der darzustellenden Inhalte bzw. ein komplett fehlendes Inhaltskonzept. Aus UX Perspektive wünscht man sich oft dass der Kunde/Auftraggeber sich einfach entscheidet welches Thema das wichtigste ist, um dann nur dieses groß spielen zu müssen. So einfach ist das in der echten Welt aber meistens nicht. Die Lösung ist es leider eben so wenig.
Um dem ganzen Thema inhaltlich zu begegnen, ist es besonders wichtig mit dem Kunden gemeinsam eine Zielsetzung (Strategie) für die Website zu erarbeiten auf die auch er sich immer wieder beziehen kann wenn er die getroffen Entscheidungen nach Innen weiterträgt. Und das bevor der erste Vorschlag für ein Design oder Konzept erstellt wird. Das ermöglicht es die Bedürfnisse des Kunden herauszufinden und Entscheidungsprozesse zu steuern. Die Involvierung des Kunden geht dabei am besten weit über die initiale Strategie hinaus und zieht sich auch durch die spätere Umsetzung und Optimierung der Ergebnisse (Siehe dazu: The Infinity Optimization Process). Nur als Teil der Prozesse fühlt sich der Kunde wohl mit den Ergebnissen und kann diese auch vor seinen Vorgesetzten oder Bedenkenträgern verteidigen. Mit so gewonnenen Insights, Entscheidungen und der gemeinsamen Zielvereinbarung als Basis können stets richtige Lösungen erarbeitet und schreckliche Dinge wie Teaser Karusselle vermieden werden.
Ich bin Florian. Ich denke mir Dinge für Sachen mit Bildschirmen aus und bin Partner bei www.enable.to —Wir sind deine On Demand Digital Unit und bieten dir eine neuartige Kombination aus Beratung und Umsetzung für deine digitalen Projekte. Lass uns rausfinden was wir für dich tun können. ⟶ hello@enable.to
