Bringt der Slider auf der Startseite Ihres Shops etwas? Wann er hilft und wann er stört

Fast jeder Shop hat einen: ein Karussell oben auf der Startseite, das Banner durchlaufen lässt. Es wird zu Projektbeginn beschlossen, mit vier oder fünf Kampagnenbildern gefüllt und dann vergessen. Und so zeigt es leicht monatelang ein Angebot, das längst vorbei ist, ein Bild, das auf dem Smartphone unlesbar ist, oder ein Video, das mehr wiegt als der Rest der Seite.

Die Frage lautet nicht „Slider ja oder nein“, sondern welche Aufgabe dieser Platz erfüllen soll, der sichtbarste im ganzen Shop.

Was man über Karussells weiß

Usability-Fachleute warnen seit Jahren vor einigen Problemen, die immer wieder auftreten:

• Man sieht die erste Folie und kaum mehr. Viele Besucher scrollen oder tippen auf das Menü, bevor die zweite erscheint.
• Die automatische Bewegung lenkt ab und kann das Banner genau dann wechseln, wenn jemand es lesen oder anklicken wollte.
• Es wirkt wie Werbung, und Nutzer lernen, zu ignorieren, was wie Werbung aussieht.
• Mehrere Botschaften konkurrieren: Wenn alles wichtig ist, ist nichts wichtig.

Das heißt nicht, dass ein Karussell nicht funktionieren kann. Es heißt, dass ein Karussell mit fünf allgemeinen Botschaften, die alle drei Sekunden wechseln, wahrscheinlich nicht so viel bringt, wie es Platz einnimmt.

Wann ein Slider wirklich hilft

• Kampagnen mit Datum: Schlussverkauf, Saison, Produkteinführung. Eine klare Botschaft mit Start- und Enddatum.
• Shops mit unterschiedlichen Zielgruppen, die sich schnell orientieren müssen: Gewerbe- und Privatkunden, Herren und Damen, zwei sehr verschiedene Produktlinien.
• Sehr visuelle Produkte, bei denen das große Bild vermittelt, was ein Text nicht kann: Mode, Deko, Möbel.
• Neuheiten, die sich oft ändern, sofern jemand sie tatsächlich aktualisiert.

Und wann etwas anderes besser ist: Verkauft Ihr Shop über einen großen Katalog (Ersatzteile, Verbrauchsmaterial, technische Artikel), will der Besucher auf der Startseite die Suche und die Kategorien. Ein festes Banner mit Ihrem Nutzenversprechen und darunter klare Zugänge zu den Produktfamilien bringt meist mehr als fünf rotierende Bilder.

So machen Sie es richtig

Wenige Folien, jede mit einer Botschaft

Zwei oder drei. Die erste wird am meisten gesehen: Setzen Sie dorthin, was am wichtigsten ist. Jede Folie mit einer kurzen Überschrift, einer unterstützenden Zeile und einem einzigen Button, der auf eine konkrete Seite führt (die Kategorie der Kampagne, nicht die Startseite).

Kein schneller Wechsel

Wenn er automatisch wechselt, dann langsam, und er sollte anhalten, wenn der Nutzer mit der Maus darüberfährt oder tippt. Noch besser, wenn man mit sichtbaren Pfeilen und Punkten navigieren kann.

Daten statt Erinnerungen

Das Angebot, das eine Woche nach seinem Ende noch auf der Startseite steht, ist ein Klassiker. Hat jede Folie ein Start- und Enddatum, lässt sich die Kampagne vorbereiten und verschwindet von selbst.

Text als Text

Eine Überschrift im Bild lässt sich nicht übersetzen, ist auf dem Smartphone nicht lesbar, wenn das Bild verkleinert wird, und ein Screenreader versteht sie nicht. Besser ein sauberes Bild und der Text darüber als HTML, in jeder Sprache.

Das Smartphone: wo Slider am häufigsten versagen

Ein Desktop-Banner im Querformat, auf die Breite eines Telefons verkleinert, wird zu einem schmalen Streifen mit unleserlicher Überschrift. Und wenn das Template nur per CSS beschneidet, lädt das Smartphone das ganze große Bild herunter, um einen Ausschnitt zu zeigen.

Die Lösung: ein Bild pro Gerät vorbereiten (Desktop, Tablet und Smartphone, jeweils mit eigenem Bildausschnitt) und es mit dem Element picture ausliefern, sodass jeder Bildschirm nur sein eigenes lädt. Das ist mehr Designarbeit, aber der Unterschied zwischen einem Banner, das man lesen kann, und einem, das stört.

Performance: was ein Karussell wiegt

• Bilder: das Gewicht aller Folien, wenn alle beim Start geladen werden. Richtig ist, die erste sofort zu laden und die übrigen danach.
• JavaScript: Manche Karussells bringen große Bibliotheken für Animationen mit, die niemand braucht.
• Video: Ein Hintergrundvideo kann am Desktop funktionieren, auf dem Smartphone ist es aber schwer. Wenn Sie es nutzen, dann ohne Ton, komprimiert und mit einer mobilen Version oder einem Bild an seiner Stelle.
• Externe Dienste: Ein Slider, der seine Bilder oder seinen Code von einem anderen Server lädt, fügt Verbindungen und Abhängigkeiten hinzu.

Barrierefreiheit

Ein barrierefreies Karussell lässt sich anhalten, per Tastatur bedienen, hat Alternativtexte bei Bildern mit Inhalt und zeigt die aktive Folie nicht nur über die Farbe an. In Spanien ist die Pflicht zur Barrierefreiheit für viele Onlineshops bereits Realität; außerdem ist, was barrierefrei ist, meist auch für alle bequemer.

Prüfen Sie Ihren in zehn Minuten

1. Öffnen Sie die Startseite auf Ihrem Smartphone. Ist die Überschrift der ersten Folie lesbar?
2. Wirbt eine Folie für etwas, das nicht mehr gilt?
3. Führt jeder Button auf eine konkrete, relevante Seite?
4. Wie viele Folien gibt es? Wenn es mehr als drei sind: Sieht sich jemand die vierte an?
5. Prüfen Sie die Startseite mit PageSpeed Insights: Ist das LCP-Element ein Bild des Sliders, und wie viel wiegt es?
6. Wie viele Klicks erhalten die Banner in Ihrer Webanalyse im Vergleich zu den Kategorien im Menü?

Und wenn der Slider ein altes Modul ist, das mit dem Theme kam, prüfen Sie, ob er noch mit Ihrer PrestaShop-Version kompatibel ist und seine Bilder nicht im Modulordner speichert, wo ein Update sie löschen kann.

So lösen Sie es in PrestaShop

Rekire Slider ist ein Karussell, bei dem jede Folie ein Bild für Desktop, eines für Tablet und eines für Smartphone haben kann, ausgeliefert mit picture, damit der Browser nur eines lädt. Es unterstützt Videofolien in MP4 oder WebM (ohne Ton, in Schleife und ebenfalls mit Quelle pro Gerät), automatische WebP-Kopien, Start- und Enddaten ohne Cronjob, Folienpaare in halber Breite, die auf dem Smartphone die volle Breite einnehmen, und in jeder Sprache platzierbare Texte als reiner Text. Es speichert die Bilder außerhalb des Modulordners, damit ein Update sie nicht löscht, und wird auf der Startseite oberhalb des Inhalts über einen eigenen Hook oder als Widget eingebunden.