So wird ein Karussell draus

Slider sind überall, aber das ist die Bildzeitung auch. Sind sie deswegen eine gute Idee?

Der selbstlaufende Startseitenslider ist ein bisschen wie Heino. Auf der einen Seite wettern verschiedene Gruppierungen gegen ihn, auf der anderen Seite gibt es Downloadzahlen die beweisen, dass er sehr beliebt ist.

Beliebt ist er zumindest auf Unternehmenswebsites aber auch auf Shopstartseiten trifft man ihn häufig an. Das ist ja auch verständlich. Es lassen sich theoretisch nahezu unendlich viele Inhalte auf begrenztem Raum platzieren. Außerdem ist die Website ja auch gleich um einiges interaktiver. Darüber hinaus bringt er Bewegung und wie wir alle schon im Sportunterricht gelernt haben: Bewegung tut gut.

Leider sieht es in der Realität etwas anders aus und gerade unter Entwicklern und Conversion-Optimierern haben diese Slider (ich verwende die beiden Begriffe Slider und Karrussel synonym, da mir meine Lebenszeit zu schade ist, künstlich geschaffene Unterscheidungen dieser Bezeichnungen auswendig zu lernen) inzwischen einen ziemlich schlechten Ruf. In den meisten Fällen zu Recht. Aber wir leben ja nicht in einer schwarz-weißen Welt, darum bauen wir das Karussell heute einmal auseinander.

Klassische Slider sind fast immer ein Problem

Die übliche Implementierung, die wir alle schon zehntausend Mal gesehen haben und alle Entwickler unter uns auch schon mal irgendwo eingebaut haben, bringt mehr als nur eine Handvoll Probleme mit sich.

Autoplay

Diese Probleme beginnen mit dem automatischen Ablauf der Slideshows.

In der Regel werden Slider ja mit Dingen vollgestopft, die die Marketing-Abteilung für Bewerbenswert hält. Es kann aber durchaus passieren, dass sich dies tatsächlich mit dem Interesse der Besucherin deckt. Sie interessiert sich also für das Angebot und versucht es zu erfassen. Genau in diesem Moment verschiebt sich das Ganze zum nächsten Inhalt.

Nun ist sie mit dem Dilemma konfrontiert sich entscheiden zu müssen. »Beschäftige ich mich mit dem neuen tollen Angebot oder mit dem davor?« In der Zwischenzeit hat sich der Slider schon längst weitergeschoben und präsentiert etwas Neues, was die ersten beiden Impulse hoffentlich nicht gleich wieder verdrängt.

Wenn sich Autoplay nicht verhindern lässt, sollte ein Slide lange genug stehen bleiben, damit jeder auch noch so langsame Leser ausreichend Zeit hat den Inhalt zu erfassen. Nicht jeder ist so sehr mit den Inhalten vertraut wie du selbst. Schau dir an, wie lange du für sinnvoll hältst und dann verdoppele die Zeit. Außerdem sollte der Slider stehenbleiben wenn die Maus darüber fährt. Viele Nutzer fahren mit der Maus auf die Inhalte, die sie fokussieren.

Die Nielsen Group hat außerdem herausgefunden, dass Slides die zu sehr nach Werbung aussehen und sich dann auch noch bewegen, häufig direkt von der Bannerblindheit im Kopf der Besucher ausgeblendet werden.

Aber gehen wir einmal davon aus, dass unsere Besucherin den Slider gesehen hat und nun zurück möchte um dem Angebot des ersten Slides zu folgen. Im diesem Fall muss sie jetzt herausfinden, wie sie zurück zu den ersten Angeboten kommt.

Navigation unklar

Da der Art-Director die schönen teuren Marketingfotos aber nicht mit hässlichen Steuerelementen für den Slider verdecken wollte ist das unter Umständen gar nicht so einfach.

Winzig kleine Punkte unter der Grafik genügen einfach nicht als Navigation für einen solchen Slider. Erst recht nicht, wenn sie in hellgrau auf weiß gesetzt sind, vier Pixel durchmesser haben und mit der Maus genau getroffen werden müssen. Bonuspunkte in der Rangliste schlecht zu bedienender Slider gibt es dafür, die Punkte so dicht beieinander zu platzieren, dass sie sich mit einem Touchscreen nicht gezielt ansteuern lassen.

Mindestens einen Satz Pfeile links und rechts darfst du gerne springen lassen. Noch besser ist es, die Navigationselemente zu beschriften. So hat der Besucher die Möglichkeit gezielt Inhalte anzuspringen. Dann ist aber in der Regel eine andere Darstellung als drei kleine Punkte notwendig.

bild
Bild beschriftet die einzelnen Slides mit dem zugeordneten Ressort. Die Art der Inhalte und die Zuordnung zu den Ressorts stehen auf einem anderen Blatt.

Schlecht für Conversions

Der von einer Studie der Website der Universität Notre Dame in die Welt gesetzte Mythos, nur 1% der Besucher einer Website würden überhaupt mit dem Slider interagieren ist nicht ganz richtig. Der Autor postete später eine Klarstellung.

Das Ergebnis ist trotzdem nicht sonderlich aufbauend. Je nach Inhalt und Art der Website fand er keinen einzigen Fall in dem mehr als 10% der Besucher überhaupt mit dem Slider interagierten. In den meisten Fällen lag die Zahl unter 5% und in allen Fällen entfiel die überwältigende Mehrheit der Klicks auf den initialen Inhalt.

Keine besonders gute Quote für den – in der Regel – prominent auf der Startseite platzierten Inhalt. Wenn dann ohnehin jeder auf den ersten Slide klickt, können wir uns die Mühe ja auch sparen und einfach den wichtigsten Inhalt statisch einbauen, oder?

Inhalt unklar

Wenn auf dem ersten Slide ein Sonderangebot ist, der nächste auf die Facebook-Seite verweist und der darauffolgende eine neue Funktion bewirbt, kann ein Nutzer schwer erahnen, was ihn beim nächsten Slide erwartet. Auch wenn 31% der Deutschen Lotto spielen, bevorzugen die meisten bei der Navigation im Internet vorhersehbarere Ergebnisse.

In einem Karussell sollten daher immer nur ähnliche und zusammengehörige Inhalte kombiniert werden. Beispielsweise Nachrichten oder Produkte aus dem Shop. Ein Slider sollte keine Resterampe und kein Auffangbecken für Inhalte sein, die sich sonst nirgends unterbringen ließen.

Zu viel Inhalt

Nicht erst, wenn die Punkte unter dem Slider in eine zweite Zeile umbrechen, ist es zu voll im Karussell. In der Regel sollte nach vier, maximal fünf Slides die Grenze erreicht sein.

Kein Besucher behält noch den Überblick und bei acht Slides und jeweils einer angemessenen Standzeit erreicht ein Durchlauf sonst schnell Kurzfilmlänge. Bei ungleich niedrigerem Unterhaltungswert. Genau wie bei Websiteinhalten insgesamt gilt es auch beim Slider zu priorisieren.

Immer nur was dazuzulegen funktioniert nicht. Entscheide dich im Zweifelsfall für die niedrigere Anzahl an Slides.

Ladezeit

Während ein Slider gern genutzt wird, um die vielfache Menge an Inhalt auf kleinstem Raum zu platzieren geht das in der Regel auch mit einer Vervielfachung der Daten einher, die für diese Fläche geladen werden. In der Regel sind die Slides ja keine reine Textinformation, sondern stark bebildert.

Die Inhalte der Slides weiter hinten, solltest du also erst laden, wenn die Besucherin beginnt mit dem Karussell zu interagieren. So kannst du dieses Problem zumindest eindämmen.


Es gibt also viele Gründe gegen Karussells. Es muss also schon gewichtige Gründe dafür geben, sich einen solchen Slider in die Website einzubauen.

Unternehmenspolitik ist kein Grund für einen Slider. Ich habe es schon häufig erlebt, dass aus Gerechtigkeitsgründen jeder Unternehmensbereich einen Slide bekommen sollte oder in der Vergangenheit bekommen hat. Das mag zwar bequem sein, allen Abteilungen gleich viel Platz auf der Startseite einzuräumen, zeigt aber eigentlich nur, dass hier Faulheit über ein durchdachtes Konzept gesiegt hat.

Eine Website ist kein Gerechtigkeitswettbewerb und keine Ausstellung interner Strukturen. Eine Website sollte ein Ziel verfolgen.

Wie kannst du es besser machen?

Wenn sich am Ende der Slider aber nun wirklich nicht vermeiden lässt, oder er für ein ganz spezielles Problem tatsächlich die beste Lösung ist, gibt es ein paar best practices. Wenn du Wege findest, die oben genannten Probleme zu umgehen, lassen sich durchaus Lösungen finden, die grobe Usability-Schnitzer und Conversion-Killer minimieren.

Ein Beispiel wie so etwas aussehen könnte zeigt zum Beispiel Amazon auf den Kategoriestartseiten.

Es sind nur Inhalte gleicher Art gruppiert, nämlich die Unterkategorien. Es sind nie mehr als fünf Slides, der aktive ist immer in der Navigation hervorgehoben. Wobei diese Kennzeichnung durchaus deutlicher sein dürfte, als das entfernen eines hellgrauen Verlaufs. Darüber hinaus erlauben die einzelnen Menüpunkte das direkte Ansteuern des gewünschten Inhalts. Wenn ich im Slider im Augenwinkel die Soundbars gesehen habe, finde ich diese sofort wieder und muss nicht erst vier andere graue Punkte unter dem Slider durchklicken.

Die einzelnen Slides bleiben relativ lange stehen obwohl immer nur relativ wenig Text auf einem Slide zu sehen ist. Einzig dem Autoplay haben sie sich nicht entledigt.

Über allem steht die Frage, ob der Slider hier die beste Lösung für das Problem ist. Das lässt sich aus der Ferne natürlich schwierig sagen, da ich nicht weiß, welches Problem Amazon mit dem Slider versucht zu lösen. In jedem Fall zeigt sich, dass das du mit entsprechendem Forschergeist Slider bauen kannst, die viele der üblichen Hindernisse umschiffen. Ob es damit gleich eine gute Lösung ist steht auf einem ganz anderen Blatt.

In jedem Fall solltest du den Wunsch nach einem Slider drehen und wenden und kräftig durchleuchten. Er ist nämlich nur selten die richtige Antwort.

Portraitfoto Andreas Dantz

Andreas Dantz

Andreas ist Designer und Berater für Digitales und ist spezialisiert auf Designsysteme & Apps.

Weiterlesen

Sie benötigen Hilfe mit dem Design Ihrer (Web-)App?

Dann zögern Sie nicht und lassen Sie uns herausfinden, ob eine Zusammenarbeit für Beide Seiten ein Gewinn ist.