Praxisguide
Sogenannte Slider, Karussells oder Bilderbühnen findet man heutzutage prominent platziert auf sehr vielen Startseiten von Online-Shops, Kategorieseiten und auch Landingpages. Sind Slider aber wirklich sinnvoll?
In diesem Praxisguide zeigen wir Argumente gegen den Einsatz von Slidern sowie sinnvolle Alternativen. Falls Sie nicht auf Slider verzichten können oder wollen, beschreiben wir bestimmte Anforderungen, welche sie erfüllen sollten.
Autor
Julian Kleinknecht
Sogenannte Slider, Karussells oder Bilderbühnen findet man heutzutage prominent platziert auf vielen Online-Shops (insbesondere auf der Startseite, siehe Abbildung 1) und auf „normalen“ Websites (siehe Abbildung 2). Der Inhalt der meist großflächigen Bilder wechselt häufig automatisch.
Abbildung 1: Großer Slider auf der Startseite von home24.de
Abbildung 2: Slider im sichtbaren Bereich einer normalen Website
Ein häufiger Grund für die Popularität von Slidern sind politische Motive. Verschiedene Teams möchten ihre Produkte beworben sehen. Slider scheinen es allen recht zu machen.
Auf „normalen“ Websites kommen Slider häufig zum Einsatz, da sie im verwendeten Template enthalten sind. Der Einsatz von Slidern wird häufig nicht hinterfragt, sondern die einzelnen Slides einfach befüllt.
Auf Slider sollte verzichtet werden
Slider sind jedoch keine gute Wahl. Sie funktionieren aus zwei einfachen Gründen nicht:
Das nächste Kapitel liefert ausführliche Gründe hierfür.
Anforderungen an Slider
In vielen Unternehmen können Slider nicht entfernt werden. Dann sollte wenigstens sichergestellt sein, dass sie so benutzerfreundlich wie möglich umgesetzt sind. Die wichtigsten Anforderungen lauten:
Im 3. Kapitel stellen wir diese Anforderungen ausführlicher und mit Umsetzungsbeispielen vor.
Statische Teaser statt Slider
Statische Teaser sind eine bessere Wahl als Slider. Statische Teaser sind für Besucher einfacher zu bedienen und verursachen Ihnen weniger Arbeit.
Das 4. Kapitel zeigt verschiedene Möglichkeiten, wie sie umgesetzt werden können.
In den meisten Fällen sind Slider nicht sinnvoll. Die Gründe hierfür können einfach zusammengefasst werden:
Ist ein Slider auf Ihrer Website vorhanden oder planen Sie einen solchen zu integrieren? Dann überprüfen Sie in einem A/B-Test, ob Alternativen besser funktionieren (siehe 4. Kapitel).
Falls A/B-Tests bei Ihnen nicht sinnvoll sind, entfernen Sie den Slider auch ohne A/B-Test. In vielen A/B-Tests unserer Kunden und anderer Tester hat sich gezeigt, dass Slider schlechter funktionieren als statische Teaser. Sie haben negative Auswirkungen die Click-through-Rate und die Anzahl der Conversions.
Manche Besucher übersehen Slider schlicht, da sie sie für Werbebanner halten. Hierfür gibt es mehrere Gründe:
In Usability-Tests bezeichnen Tester Slider häufig als „Werbung“. Dies deutet darauf hin, dass Slider als etwas wahrnehmen, das nicht zur eigentlichen Website gehört.
Durch die Vielzahl an Werbebannern auf anderen Websites haben Besucher gelernt, diese einfach zu ignorieren. Dieses Phänomen wird „Bannerblindheit“ genannt.
Der wichtigste und einfachste Grund gegen Slider sind jedoch deren geringe Klickraten. Wenn man sich die Verteilung der der Klicks auf einzelnen Slides ansieht, entfallen in den meisten Fällen mehr als 90 % der Klicks auf das erste Slide. Nur sehr wenige Besucher klicken auf die anderen Slides.
Es scheint verschiedene Gründe zu geben, weshalb Slider nicht angeklickt werden:
Der in die Gestaltung der hinteren Slides investierte Aufwand ist meistens nicht gerechtfertigt. Sparen Sie sich die Arbeit.
Der Praxisguide „Slider und Teaser automatisch messen“ zeigt Schritt für Schritt, wie Sie die Verwendung Ihrer Slider messen können. Diese Daten können helfen Andere im Unternehmen davon zu überzeugen, dass Slider nicht sinnvoll sind.
Weiterbildung per eLearning.
Keine Anmeldung notwendig
In Usability-Tests äußern sich Tester häufig kritisch, dass Slidern zu schnell wechseln. Bevor Tester einen Slide gesehen, gelesen und verstanden haben, wurde dieser schon wieder ausgeblendet.
Eine einfache Möglichkeit besteht darin, die Geschwindigkeit des Sliders zu reduzieren (siehe Kapitel 3.4)
Aber auch dieser Ansatz führt zu Problemen:
Die meisten Slider enthalten eine Slider-Navigation, um zwischen den Slides zu wechseln. Besucher können hierdurch zu einem vorigen Slide zurückkehren, falls dieses automatisch ausgeblendet wurde. Besucher können außerdem zwischen den Slides blättern, um für sie passende Slides zu finden.
Die Bedienbarkeit der Slider-Navigation ist jedoch häufig problematisch:
In vielen Unternehmen ist es nicht realistisch, dass Slider – besonders auf der Startseite – entfernt werden. Wie zu Beginn beschrieben, verhindern Slider dort politische Auseinandersetzungen, wessen Produkte auf der Startseite platziert werden. Wenn Slider nicht entfernt werden können, sollten sie wenigstens so gut wie möglich implementiert sein.
Der erste Slide erhält mit Abstand die meiste Aufmerksamkeit. Platzieren Sie also die wichtigsten Aktionen, Kategorien, usw. an dieser Stelle.
In manchen Unternehmen werden neue Slides automatisch an vorderster Stelle platziert. Stellen Sie diese Regel in Frage! Überlegen Sie stattdessen bei jedem neuen Slide, wie wichtig er im Vergleich zu den anderen Slides ist.
Besucher haben nur wenige Sekunden Zeit, einen Slide zu lesen und zu verstehen. Platzieren Sie deshalb so wenig Text wie möglich und formulieren Sie so, dass man ihn ohne Nachdenken versteht.
Negatives Beispiel
Auf der Startseite in Abbildung 3 hat der Besucher fünf Sekunden Zeit, diesen Slide zu lesen. Dann wird zum nächsten gewechselt. Dies ist nicht genug Zeit, um Überschrift, Call-to-Action sowie die lange Produktbezeichnung zu lesen. Weniger Inhalt wäre hier besser.
Abbildung 3: Überladene Teaser auf der Startseite
Positives Beispiel
Besser macht es Mirapodo in Abbildung 4. Die Überschrift „Slipper unter 50E“ kommuniziert klar, was einen nach dem Klick erwartet.
Abbildung 4: Klare Überschrift auf dem Slide
Manche Besucher sind sich nicht bewusst, das Slider angeklickt werden können. Platzieren Sie einen Call-to-Action auf den Slides. Besuchern wird dadurch unmittelbar kommuniziert, dass sie das Slide anklicken können.
Beachten Sie hierbei diese Anforderungen:
Negatives Beispiel
Abbildung 5: Nicht sofort erkennbarer Call-to-Action
Bei Zalando ist der Call-to-Action links unten platziert. Er ist über de Hälfe der Breite der Seite gestreckt. Dies führt dazu, dass er nicht sofort als Button erkannt wird. Vielleicht wird er gar nicht als Teil des Slides wahrgenommen.
Positives Beispiel
Bei Baur wird der Call-to-Action durch das kontrastreiche Gelb klar vom Rest des Slides abgehoben. Der Pfeil nach rechts unterstützt den Eindruck, dass es sich um einen Button handelt.
Abbildung 6: Klar erkennbarer Call-to-Action
In Remote-Usability-Tests hat sich gezeigt, dass Besucher oft das Gefühl haben, dass sie keine Kontrolle über den Slider haben. Dieser Kontrollverlust führt zu einer negativen Benutzererfahrung.
Geben Sie Besuchern das Gefühl der Kontrolle über die Website. Eine Slider-Navigation hilft hierbei. Besucher können mit ihr selbst zwischen den Slides wechseln.
Die kleinen am unteren Rand platzierten Punkte (siehe Abbildung 7) sind sowohl schwierig zu erkennen als auch schwierig zu verwenden – man muss die kleinen Punkte genau treffen. Sie sind nicht empfehlenswert.
Abbildung 7: Schwierig zu verwendende Slider-Navigation
Pfeile links und rechts im Slider (siehe Abbildung 8) stellen eine andere Möglichkeit dar. Sie werden oft mit den kleinen Punkten kombiniert. Klickt der Besucher auf einen Pfeil, wird zum nächsten bzw. vorigen Slide gewechselt.
Diese Pfeile haben den Nachteil, dass sie oft nicht sofort gesehen werden. Außerdem ist Besuchern nicht ersichtlich, was sich auf den nächsten Slides verbirgt. Die meisten Besucher kommen mit einem konkrete Ziel auf einen Online-Shop, und haben kein Interesse sich durch wahrscheinlich unpassende Angebote zu klicken.
Abbildung 8: Pfeile links und rechts bei otto.de
Falls Sie aktuell solche Pfeile verwenden, achten Sie darauf, dass ein Klick nach rechts auf dem letzten Slide dazu führt, dass wieder das erste Slide angezeigt wird.
Eine mittlerweile häufig eingesetzte Alternative zur Kombination aus Punkten und Pfeilen ist eine Mini-Navigation bestehend aus Tabs, wie sie zum Beispiel bei buch.de zum Einsatz kommt.
Abbildung 9: Tabs sind eine gute Alternative u Punkten und Pfeilen
Die Tabs sind größer als die kleinen Punkte und können damit besser angeklickt werden. Außerdem erhalten Besucher, im Gegensatz zu den Pfeilen, unmittelbar einen Überblick über die dargestellten Themen.
Wenn Sie also auf Slider nicht verzichten wollen oder können, dann setzen Sie eine solche Mini-Navigation ein.
Achten Sie darauf, dass die Navigation auch von Besuchern gesehen wird bzw. gesehen werden kann. Bei Esprit sind die Links so weit unten platziert, dass man sie bei einer (weit verbreiteten) Auflösung 1600×900 erst nach einer Scroll-Bewegung sieht.
Abbildung 10: Die Tabs sind für die meisten Besucher nicht sofort sichtbar
Ein Besucher möchte auf einen Slide klicken. Der Slide wird jedoch kurz vor dem Klick gegen einen anderen ausgetauscht. Der Besucher landet daher auf der falschen Seite. Dies ist ein großes Ärgernis für Besucher.
Wirken Sie solchen negativen Benutzererlebnissen entgegen. Der Slider sollten beim MouseOver und Klick auf die Slider-Navigation pausieren.
Bewegt ein Besucher seine Maus über den Slider, ist dies ein Zeichen, dass er sich mit diesem beschäftigt. Wenn sich nun der Slide automatisch gewechselt, muss der Besucher unnötige Anstrengungen unternehmen, um zum vorigen Slide zurückzukehren.
Ein Klick auf die Slider-Navigation ist ein eindeutiges Signal, dass der Besucher den Slider selbst bedienen möchte. Der Slider sollte pausiert werden.
Die meisten Slider wechseln zu schnell. Gerade für neue Besucher, die sich erst einmal auf einer Website orientieren müssen, sind die häufig verwendeten fünf Sekunden viel zu wenig Zeit.
Schätzen Sie deshalb, wie lange ein Besucher braucht, um einen Slide zu lesen und zu verstehen. Erhöhen Sie diese Zeit um mindestens zwei Sekunden, da viele Internet-User langsamer als Sie lesen werden.
Halten Sie die Anzahl der Slides gering und überschaubar. Mehr als fünf Slides überfordern Besucher. Es gibt einfach nicht genug Aufmerksamkeit zu „verteilen“.
Die wenigsten Besucher sehen sich alle Slides an. Laden Sie deshalb beim Seitenaufruf nur die ersten beiden Bilder. Dies spart Ladezeit.
Sobald die Seite komplett geladen ist oder sobald das zweite Slide erreicht wurde, laden Sie die restlichen Slides.
Slides weiter hinten werden mit hoher Wahrscheinlichkeit nicht gesehen. Stellen Sie deshalb sicher, dass diese Inhalte auch auf eine andere Weise erreichbar sind. Integrieren Sie einen Link in die Navigation oder den Footer.
Bewerben Sie zum Beispiel einen Küchenplaner, dann platzieren Sie einen Hinweis darauf auch in der Navigation. Gibt es eine Aktion wie „20 % Rabatt für Neukunden“, dann weisen Sie darauf – für neue Besucher am besten seitenübergreifend – hin.
Im zweiten Kapitel haben wir argumentiert, dass auf Slider verzichtet werden sollte. Bessere Alternativen zu Slider sind:
Idealerweise führen Sie A/B-Tests durch, statt einen Slider direkt zu ersetzen. Im Vergleich zu anderen Tests sind diese A/B-Tests einfacher umzusetzen.
Der Praxisguide „Die optimale Startseite für Online-Shops“ diskutiert die Frage, welche verschiedenen Themen aus Teaser auf der Startseite von Online-Shops kommuniziert werden sollten.
Die einfachste Alternative zu einem Slider sind statische Teaser. Wie in einem Slider können diese bestimmte Aktionen bewerben, Produkte bewerben oder Produktkategorien hervorheben.
Wir empfehlen mehrere kleinere Teaser neben- oder untereinander zu platzieren (siehe zum Beispiel Abbildung 11). Es ist wahrscheinlicher, dass einer der Teaser für den jeweiligen Besucher relevant ist, als wenn nur ein großer Teaser (siehe Abbildung 12) dargestellt wird.
Abbildung 11: Mehrere Teaser auf der Startseite eines Online-Shops nebeneinander
Abbildung 12: Großer statische Teaser
Statt einer solchen vertikalen Aufteilung können die Teaser auch in den bekannteren Kacheln aufgeteilt werden (siehe Abbildung 13).
Abbildung 13: kleinere Teaser auf der Startseite eines Online-Shops
Abbildung 14: Statische Teaser auf einer normalen Website
Auf vielen normalen Websites dienen Slider nicht dazu, Besucher auf andere Unterseiten zu leiten. Stattdessen werden die Vorteile oder Alleinstellungsmerkmale des Unternehmens auf mehreren Slides kommuniziert. In Abbildung 15 werden in den weiteren 4 Slides weitere Eigenschaften des Unternehmens angepriesen. Besucher müssen sich alle Slides ansehen, um zu verstehen, weshalb sie sich für das Unternehmen entscheiden sollen.
Abbildung 15: Startseite einer „normalen“ Website mit Slider
Der Slider sollte in diesem Fall entfernt werden und die Alleinstellungsmerkmale des Unternehmens auf einen Blick sichtbar sein. In Abbildung 16 können die drei Vorteile (eigene Domain, einfache Verwaltung, 100 % sicher) sofort verstanden werden.
Abbildung 16: Vorteile des Unternehmens ohne Slider
