Der Slider ist tot - es lebe der Slider!
So viel Mühe wurde investiert, und nun das: die Menschen hassen ihn oder strafen ihn mindestens mit Verachtung! Mit wie viel Aufwand wurde er eingeführt, wie viele Hoffnungen wurden in ihn gesetzt, und nun scheint er endgültig abgestürzt: der Bilderslider, jenes großes Bildelement am Beginn vieler Webseiten, das oft unvermittelt wegrotiert und ein neues Bild zum Vorschein bringt.
Es soll Vielfalt darstellen, Üppigkeit symbolisieren und schafft statt dessen oft: Verdruss!
Wie konnte es so weit kommen? Darum geht es in diesem Blog-Beitrag - und darum, welche Fehler Sie unbedingt vermeiden sollten.
Warum Bilderslider so gefeiert wurden
Noch vor wenigen Jahren gab es eine große Euphorie über die Möglichkeit, wertvolle Fläche auf einer Website doppelt und dreifach zu belegen. Der wertvollste Teil einer Website ist naturgemäß derjenige, den der User als erstes zu sehen bekommt: der obere Teil der Homepage. Hier wollen alle hin, hier will der Betreiber der Website alles anpreisen, was er zu bieten hat.
Im Unterschied zu einem gedruckten Medium kann er das auch: mit einem zeitlich gesteuerten Element, dem Bilderslider. In seiner Ursprungsversion wanderte dazu alle paar Sekunden eine neues Bild mit einer passenden Schlagzeile von rechts in das Sichtfenster und schob dabei das alte Bild hinaus.
Aus einem weiteren Grund erfreute sich das Modell einer großen Beliebtheit: als finaler Kompromiss. Gerade in großen Organisationen mit vielen Abteilungen konnte man so dem Streit aus dem Weg gehen, welche Abteilung denn nun die wichtigste ist: Jeder bekommt seine eigene Folie und das rotiert dann durch.
So weit, so gut - bis dann die Nachteile sichtbar wurden.
Warum Bilderslider so verdammt werden
Nach einiger Zeit konnte man die Nachteile dieser Lösung nicht mehr übersehen - dafür gab es einfach zu viele:
- Viele User scrollen rasch nach unten und sehen also nur das erste Bild. Sie bemerken oft nicht einmal, dass es sich um einen Slider handelt und nehmen also das erste Bild als zentrale Aussage der gesamten Website wahr.
- Wenn die Bilder automatisch wechseln, so tun sich das oft zur Unzeit: Gerade ist der Nutzer an einem interessanten Bild hängen geblieben, er will vielleicht darauf klicken, um mehr zu erfahren - und schon ist es weg. Fortgeschrittenere Slider stoppen, sobald man mit der Maus darüber hovert, aber das funktioniert auf dem Handy schon nicht mehr.
- Der Bilderslider bietet oft zu wenig Orientierung, wo in der Bilderstrecke sich der Nutzer befindet, und was ihn auf den anderen Folien erwartet.
- Vollends schwierig wird es, wenn Menschen ohne Maus durch die Seite navigieren wollen, oder wenn Blinde sich die Seite vorlesen lassen müssen. Die Barrierefreiheit eines Bilderslider ist nicht leicht herzustellen (mehr dazu weiter unten).
- Wenn man nicht aufpasst, wird die Seite langsam, denn es müssen ja viele Bilder parallel geladen werden.
- Und zu guter Letzt tendieren Menschen dazu, rotierenden Bilder automatisch als Werbung einzuordnen und diese generell zu ignorieren.
Was also tun?
Gute und schlechte Bilderslider
Aus Designperspektive fangen die Dinge damit an, erst richtig interessant zu werden: Wie könnte ein guter Bilderslider aussehen?
Es stellt sich heraus: Bilderslider haben immer noch Ihren Einsatzplatz - wenn sie denn gut gemacht sind. Ein paar Regeln haben sich in den letzten Jahren herausgebildet.
- Keine konkurrierenden Informationen auf dem Bilderslider zeigen. Also gerade nicht die verschiedenen Abteilungen einer Firma.
- Statt dessen verschiedene Aspekte einer Sache zeigen. Das erste Bild reicht für einen Grundeindruck, auf den weiteren Bildern kommen weiter Aspekte hinzu. Typisch dafür: Ein Slider, auf dem der Schuh aus verschiedenen Perspektiven gezeigt wird.
- Gute Bilderslider können vollständig vom Nutzer gesteuert werden. Es gibt keine automatische Rotation, statt dessen muss der Nutzer auf entsprechende Buttons drücken.
- Der Nutzer erhält eine klare Orientierung, wie viele Bilder zur Verfügung stehen und auf welchem der Bilder er sich befindet. Das kann auf verschiedene Weisen geschehen: Durch kleine Vorschaubilder, durch Texte, durch Icons. Wichtig ist, dass der Nutzer jeweils vorher ahnen kann, was ein Klick auf eines der Steuerelemente bewirken wird.
- Durch geeignete Auszeichung mit roles und aria-labels wird der Bilderslider auch barrierefrei nutzbar.
- Auf dem ersten Bild ist schon die wichtigste Botschaft zu sehen. Wer einfach weiterscrollt, hat dennoch das Wichtigste wahrgenommen.
Geradezu vorbildlich hat Apple alle modernen Anforderungen an Bilderslider bei der Vorstellung des neuen IPhone 17 umgesetzt.
Es gibt insgesamt sechs Bilder, die verschiedene Aspekte des neuen IPhone zeigen.
Sechs beschriftete Bubbles zeigen, was den User auf den einzelnen Bildern erwartet.
Das aktive Bild ist deutlich zu erkennen, indem die Bubble mit weiterem erklärenden Text angereichert wird.
Zusätzlich kann der User mit den Pfeilen links navigieren; es versteht sich, dass die Navigation auch mit Tasten funktioniert.
Besser kann man es nicht machen!
Was sind die Alternativen?
So gut es ist, Bilderslider an den richtigen Stellen einzusetzen, so dringend ist es Alternativen zu haben für die Fälle, in denen Bilderslider nicht gut funktionieren. Das sind zum Beispiel die erwähnten Abteilungen einer Firma, die alle sichtbar sein wollen.
Hier bietet sich ein Card-Layout an mit kleinen Bild-Text-Elementen, die nebeneinander stehen. So werden alle konkurrierenden Elemente gleichzeitig sichtbar. Auf Hover können zusätzliche Informationen gezeigt werden. Auf Klick landet der Nutzer auf der zugehörigen Einzelseite.
Eine andere Möglichkeit: Hat man genügend Daten über den Nutzer, weil er z.B. angemeldet ist, kann man ihm aus der konkurrierenden Auswahl gleich dasjenige zeigen, was ihn interessieren wird.
So ist der Bilderslider doch nicht tot - aber er lebt nur noch an den Stellen, wo er wirklich Sinn macht und eine Bereicherung für den Nutzer darstellt.
Kontaktieren Sie uns
Wenn Sie Beratung zur Gestaltung eines modernen und gut nutzbaren User-Interfaces brauchen, sprechen Sie uns einfach an. Wir suchen mit Ihnen zusammen die beste Lösung. Tel: 089 381576 400