Slider auf der Website sinnvoll? Wirkung auf Ladezeit und Conversion

Ist ein Slider auf der Website sinnvoll?

Ein Slider auf der Website ist ein Bereich, der mehrere Bilder oder Botschaften nacheinander am selben Platz zeigt. Auf den meisten Firmenwebsites funktioniert ein einziges, klares Hero Bild mit einer Botschaft besser als ein automatisch wechselnder Slider. Ein Slider auf der Website ist vor allem für Galerien und andere geordnete Inhalte sinnvoll, und nur mit Steuerung durch den Besucher.

Das ist keine Geschmacksfrage, denn die Leitfäden des W3C zur Barrierefreiheit, die Forschung der Nielsen Norman Group und die Dokumentation von web.dev zeigen in dieselbe Richtung. Konkret gilt: Bewegung lenkt ab, Besucher übersehen oft alles nach dem ersten Bild, und ein schlecht gebauter Slider bremst die Seite. Ein Hero Bild ist dabei das große Hauptbild samt Überschrift ganz oben auf der Seite. Deshalb folgt zuerst eine kurze Entscheidungsreihenfolge.

1. Schreiben Sie zunächst jede Botschaft des Sliders auf und wählen Sie die eine, die Besucher zum Handeln bewegt. In der Praxis ist das in den meisten Unternehmen eine einzige Botschaft.
2. Prüfen Sie danach, ob die Inhalte eine echte Sammlung sind, zum Beispiel Fotos von Produkten, Projekten oder Immobilien. Dann kann ein Karussell sinnvoll sein, das Besucher selbst steuern.
3. Schalten Sie Autoplay aus. Geht das nicht, ergänzen Sie stattdessen einen deutlich sichtbaren Pausenknopf.
4. Stellen Sie sicher, dass das erste Bild schnell lädt, denn es ist meist das LCP Element (der größte Inhalt, der im sichtbaren Bereich entsteht).
5. Messen Sie schließlich, welche Folie Besucher anklicken, und entscheiden Sie mit Ihren eigenen Daten.

Unten erklären wir daher die Gründe für jeden Schritt mit offiziellen und primären Quellen. Zunächst klären wir, was ein Slider genau ist.

Was ist ein Slider auf der Website und welche Arten gibt es?

Die Web Accessibility Initiative des W3C definiert ein Karussell als Komponente, die eine Sammlung von Elementen jeweils einzeln zeigt. Im W3C Tutorial zu Karussells steht außerdem, dass man dieselbe Komponente auch Slideshow oder Slider nennt. Typische Einsatzzwecke sind zum Beispiel laufende Nachrichtenzeilen, hervorgehobene Artikel auf Startseiten und Bildergalerien.

In der Praxis begegnen Ihnen fünf Arten:

• Automatisch wechselnder Slider auf der Startseite: große Bilder, die sich im ersten Bildschirm von selbst ändern.
• Karussell mit Steuerung durch Besucher: Folien wechseln nur per Pfeil, Punkt oder Wischen.
• Galerie für Produkte oder Projekte: ähnliche Bilder in fester Reihenfolge.
• Bewertungskarussell: kurze Kundenstimmen, die nacheinander erscheinen.
• Horizontale Kartenreihe: Kategorien oder Leistungen als Karten, die auf dem Smartphone seitlich scrollen.

Die meisten Probleme in diesem Beitrag stammen von der ersten Art, denn die Seite startet die Bewegung, nicht der Besucher. Andererseits tragen die anderen Arten bei guter Umsetzung deutlich weniger Risiko. Wenn wir also „Slider“ sagen, meinen wir meist den automatisch wechselnden Slider auf der Website.

Warum wollen Unternehmen einen Slider auf der Website?

Slider sind aus drei gewöhnlichen Gründen verbreitet. Erstens liefern viele Themes und Baukästen einen fertigen Sliderbereich in ihren Startseitenvorlagen mit. Zweitens wirkt Bewegung auf den ersten Blick beeindruckend. Schließlich möchte jeder die eigene Botschaft im ersten Bildschirm sehen, und das ist der wichtigste Grund.

Der Artikel der Nielsen Norman Group zur Usability von Karussells sagt das offen: Ein Karussell lässt mehrere Inhalte denselben wertvollen Platz teilen und kann den Streit darüber entschärfen, wessen Inhalt Vorrang hat. Anders gesagt ist ein Slider oft eher eine Lösung für interne Machtfragen als eine Designentscheidung.

Deshalb klären wir diesen Streit bei unserem Webdesign für Unternehmen, bevor das Design beginnt. Zunächst schreiben wir auf, welche eine Handlung Besucher im ersten Bildschirm ausführen sollen. Danach wählen wir eine Botschaft, und die übrigen Botschaften bekommen darunter eigene Abschnitte.

Was sagt die Forschung zu automatisch wechselnden Slidern?

Die Nielsen Norman Group (NN/g) führte eine Usability Studie zu automatisch weiterschaltenden Panels durch, die sich wie ein automatischer Slider auf der Website verhalten. Eine Teilnehmerin suchte auf der Startseite einer Haushaltsgerätemarke nach Angeboten für Waschmaschinen. Das Angebot stand im größten Kasten der Seite, allerdings zeigte dieser Kasten alle fünf Sekunden ein neues Panel. Sie fand das Angebot nie und gab schließlich auf. Sie sagte, sie habe keine Zeit zum Lesen gehabt, denn das Panel wechsle zu schnell.

NN/g nennt mehrere Gründe, warum automatisches Weiterschalten schadet:

• Bewegte Elemente senken die Zugänglichkeit, besonders für Menschen mit motorischen Einschränkungen, die kaum klicken können, bevor der Inhalt verschwindet.
• Außerdem finden Menschen mit geringer Lesekompetenz womöglich nicht genug Zeit, den Inhalt zu lesen.
• Wer in einer Fremdsprache liest, liest langsamer, daher kommt ein kurz eingeblendetes Panel nicht an.
• Panels kommen abwechselnd dran, daher fällt jedes seltener auf. Zum Beispiel war im Fall von NN/g der Rabatt nur 20 % der Zeit sichtbar.
• Weil sich das Element bewegt, halten es Menschen für Werbung und ignorieren es.

Die Lösung von NN/g ist klar: Zeigen Sie ein neues Panel nur, wenn Nutzer es verlangen, und lassen Sie den Inhalt sonst stillstehen. Auch das W3C kommt zu einem ähnlichen Schluss, denn es hält fest, dass Karussells aus Sicht der Usability umstritten sind, weil sich ihre Inhalte schlecht entdecken lassen.

Warum übersehen Besucher die Botschaft im Slider?

Laut dem Karussell Artikel von NN/g scrollen Menschen oft einfach an Karussells vorbei, auf großen wie auf kleinen Bildschirmen. Deshalb verpassen sie die Inhalte aller Bilder außer dem ersten. Der Artikel räumt allerdings ein, dass manche Eyetracking Studien und Webmetriken bei bestimmten Karussells Aufmerksamkeit und Klicks zeigen. Dennoch bleibt die Hauptwarnung: Menschen übersehen Karussells häufig.

Außerdem sehen Gestalter und Besucher etwas anderes. Gestalter sehen ein Karussell als Sammlung von Bildern, Besucher oft nur das eine Bild auf dem Bildschirm. Führt dieses eine Bild in die Irre, kann der Besucher laut NN/g ein falsches Bild von Ihrem Unternehmen bekommen.

Beispielrechnung: Bleibt jede Folie 5 Sekunden sichtbar, muss ein Besucher 15 Sekunden warten, bis die vierte Folie erscheint (3 × 5). Scrollt er früher, sieht er die letzte Botschaft also nie.

Deshalb rät NN/g, wichtige Informationen aus dem Hero Bereich oder Karussell zusätzlich an anderer Stelle der Oberfläche anzubieten. Dann findet auch ein Besucher die Information, der die Folie verpasst.

Wie wirkt sich ein Slider auf der Website auf die Barrierefreiheit aus?

Kernproblem der Barrierefreiheit ist das automatische Wechseln. Das Tutorial des W3C zu Karussells nennt es zuerst: Nutzer müssen die Bewegung anhalten können, weil sie zu schnell oder ablenkend sein kann und Text schwer lesbar macht. Außerdem nennt das Tutorial zwei Gruppen ausdrücklich: Menschen, die Bewegung ablenkt, und Menschen, die mehr Lesezeit brauchen.

Konkret beruht die Regel auf dem Erfolgskriterium 2.2.2 „Pause, Stop, Hide“ der WCAG (Web Content Accessibility Guidelines) 2.2 auf Stufe A. Laut der Erläuterung des W3C zu 2.2.2 braucht bewegter Inhalt einen Mechanismus zum Pausieren, Beenden oder Ausblenden, wenn er automatisch startet, länger als fünf Sekunden dauert und neben anderem Inhalt steht. Dasselbe Dokument führt zudem automatisch ablaufende Präsentationen und Meldungen als Beispiele für sich selbst aktualisierende Inhalte auf.

Allerdings genügt es nicht, nur zu pausieren, solange der Fokus auf dem Karussell liegt. Denn die Erläuterung sagt, dass eine Animation, die nur anhält, solange der Fokus auf ihr liegt, nicht als Mechanismus zum Pausieren gilt. Deshalb empfiehlt das W3C beides: einen sichtbaren Knopf zum Abspielen und Stoppen sowie eine automatische Pause, sobald Maus oder Tastaturfokus das Karussell erreichen.

Laut W3C leistet ein barrierefreies Karussell vier Dinge:

• Nutzer können die Bewegung anhalten und neu starten.
• Jede Funktion klappt per Tastatur, auch der Wechsel zwischen den Folien.
• Menschen mit Screenreader hören, wenn die Folie wechselt.
• Der Tastaturfokus wandert in einer sinnvollen, nachvollziehbaren Reihenfolge.

Was verlangen die WCAG Kriterien von einem Slider?

Die Tabelle fasst die WCAG 2.2 Kriterien zusammen, die Slider direkt betreffen, samt den Schwellenwerten aus dem offiziellen Text. Die Buchstaben A und AA zeigen die Konformitätsstufe. Außerdem ist ein CSS Pixel eine logische Pixeleinheit, die nicht von der Bildschirmdichte abhängt.

Als großer Text gilt in den WCAG Text ab 18 Punkt oder 14 Punkt fett. Legen Sie Text über ein Bild, testen Sie ihn daher mit unserem kostenlosen Kontrastrechner. Das große Ganze erklären wir zudem im Beitrag zu barrierefreien Websites, WCAG und BFSG. Das ist keine Rechtsberatung; bei Rechtsfragen wenden Sie sich bitte an Ihre Anwältin oder Ihren Anwalt.

Wie bremst ein Slider auf der Website die Ladezeit und den LCP?

Der LCP (Largest Contentful Paint) misst, wann das größte Bild oder der größte Textblock im sichtbaren Bereich fertig dargestellt ist. Bei einem Slider auf der Startseite ist das größte Element daher meist das erste Folienbild. Laut web.dev ist ein guter LCP 2,5 Sekunden oder kürzer. Maßstab ist der Wert, den 75 Prozent der Seitenaufrufe nicht überschreiten. Mehr dazu lesen Sie zudem in unserem Beitrag, was der LCP ist und wie Sie ihn verbessern.

Der web.dev Leitfaden zur LCP Optimierung gibt vier Warnungen, die direkt für Slider gelten:

• Der Browser muss das LCP Bild in der ersten HTML Antwort finden. Fügt JavaScript das Bild ein oder legt eine Bibliothek die Adresse in einem Feld ab, das sie erst später füllt, entdeckt der Browser es spät.
• Außerdem findet der Browser ein CSS Hintergrundbild beim Scannen des HTML nicht. Sie müssten es also vorab laden (Preload).
• Laden Sie das LCP Bild niemals verzögert (Lazy Loading). Denn web.dev nennt das eine ausdrückliche Warnung.
• Geben Sie nur ein bis zwei Bildern eine hohe Abrufpriorität (fetchpriority). Folien, die beim Start nicht sichtbar sind, dürfen stattdessen eine niedrigere Priorität bekommen.

In der Praxis sieht das so aus: Das erste Folienbild steht als echtes Bild im HTML und lädt sofort, die späteren Folien warten. Außerdem merkt web.dev an, dass große JavaScript Dateien das Rendern verzögern können, selbst wenn das Bild schon geladen ist, und Slider Bibliotheken tragen zu diesem Gewicht bei. Zu Maßen und Dateigröße lesen Sie unseren Leitfaden zu Bildgrößen für Websites.

Beeinflussen Slider die Suchmaschinenoptimierung, und wie binden Sie die Bilder ein?

Für die SEO (Suchmaschinenoptimierung) zählt nicht, ob es einen Slider gibt, sondern wie Sie ihn bauen. Laut der Bilddokumentation von Google Search Central findet Google Bilder im src Attribut eines Bildelements, CSS Bilder indexiert es nicht. Manche Sliderlösungen legen die Folien zum Beispiel als CSS Hintergrundbilder an. Dann tauchen die Folienbilder womöglich nie in der Bildersuche auf.

Auch der Alternativtext (die Beschreibung eines Bildes in Worten) ist wichtig. Dieselbe Seite erklärt, dass Google Alternativtext zusammen mit Computer Vision und dem Seiteninhalt nutzt, um ein Bild zu verstehen. Trägt ein Folienbild also eine Botschaft, soll der Alternativtext diese Botschaft beschreiben. Stopfen Sie ihn nicht mit Schlüsselwörtern voll.

Die Überschriftenstruktur ist eine weitere häufige Schwachstelle. Denn eine eigene H1 (Hauptüberschrift) für jede Folie verwischt die Hauptüberschrift der Seite. Im Beispielaufbau des W3C steht das Karussell in einem eigenen beschrifteten Bereich, und die Folienüberschriften sind Überschriften einer niedrigeren Ebene. Die Debatte behandeln wir im Beitrag, ob eine Seite mehrere H1 Überschriften haben darf. Unsere Regel hier ist einfach: Halten Sie die Überschrift, die die Seite definiert, außerhalb des Sliders, einzeln und fest.

Warum sind Slider auf dem Smartphone anfälliger?

Auf dem Smartphone ist der Bildschirm klein, die Tippflächen sind eng, und die Seiten sind kurz. Deshalb geht ein Slider leichter kaputt. NN/g rät aus zwei Gründen vom automatischen Weiterschalten auf Mobilgeräten ab: Es bremst die Seite, und Menschen scrollen schnell, sodass sie beim Wechsel einer Folie meist schon weiter unten auf der Seite schauen.

Punkte als Anzeige sind auf dem Smartphone ein schwacher Hinweis, denn NN/g sagt, dass Menschen sie oft nicht bemerken. Zudem müssen die Schaltflächen groß genug sein. WCAG 2.5.8 verlangt für Zeigerziele mindestens 24 mal 24 CSS Pixel, das Kriterium 2.5.5 auf Stufe AAA sogar 44 mal 44. NN/g empfiehlt außerdem, die Bedienelemente innerhalb des Karussells zu platzieren, nicht darunter.

Wischen fühlt sich natürlich an, sollte aber nicht der einzige Weg sein. WCAG 2.5.1 verlangt neben pfadbasierten Gesten wie Wischen eine einfache Alternative per Tippen. Zum Beispiel beschreibt die Erläuterung des W3C ein Nachrichtenkarussell, das Wischen unterstützt und zusätzlich Schaltflächen für Zurück und Weiter bietet.

Prüfen Sie dann mit unserem kostenlosen Mobile Friendly Test, wie Ihre Seite auf dem Smartphone aussieht. Das Tool untersucht das Viewport Tag (die Einstellung, die die Seite an den Handybildschirm anpasst), die Schriftgröße und die Tippflächen.

Bringt ein Slider auf der Website mehr Anfragen?

Eine allgemeine Prozentzahl können wir nicht nennen, und Zahlen ohne Quelle sollten Sie misstrauisch betrachten. Die Primärquellen berichten Usability Befunde: NN/g sagt, dass Menschen Karussells oft übersehen. Derselbe Artikel räumt allerdings ein, dass Eyetracking und Webmetriken bei manchen Karussells Aufmerksamkeit und Klicks zeigen.

Eine Conversion (ein Besucher erreicht ein Ziel wie Formular, Anruf oder Kauf) hängt von Faktoren Ihrer eigenen Website ab: Steht das Angebot auf der ersten Folie, wie lange bleiben Besucher im ersten Bildschirm, wie klar ist die Botschaft und wie schnell lädt die Seite? Achten Sie deshalb auf drei mögliche Schäden:

• Steht Ihr Angebot nicht auf der ersten Folie, sehen es viele Besucher womöglich nie.
• Bewegung zieht Aufmerksamkeit ab, und NN/g merkt an, dass ein ruhendes Hero Bild weniger ablenken kann als ein rotierendes Element.
• Lädt das erste Bild spät, erscheint auch der Call to Action spät.

Kurz gesagt: Die Belege behaupten nicht einseitig, Slider senkten die Conversion. Sie zeigen also, wo das Risiko liegt. Messen Sie die Wirkung daher auf Ihrer eigenen Website, die Methode folgt weiter unten.

Wie wählen Sie zwischen Slider, einzelnem Hero Bild, Karussell und Raster?

Die Tabelle vergleicht vier Möglichkeiten anhand von fünf Kriterien. Die Bewertungen deuten die Befunde von W3C, WCAG, NN/g und web.dev aus, nehmen Sie sie also als Orientierung und nicht als Urteil für Ihre Website.

Das Fazit: Für die Startseite ist ein einzelnes Hero Bild bei den meisten Unternehmen die ausgewogenste Wahl. Karussell mit Steuerung und Raster folgen danach. Der automatisch wechselnde Slider auf der Website trägt somit das größte Risiko.

Welche Alternative ersetzt den Slider auf der Website?

Für die meisten Unternehmen lautet die Antwort: ein einzelner Hero Bereich im ersten Bildschirm. Der Hero Bereich besteht aus der großen Überschrift, einem Bild und einer Schaltfläche oben auf der Startseite. NN/g sagt, ein Gestalter, der nur ein Bild wählen darf, wählt womöglich ein stärkeres, und Besucher können sich auf dieses eine Bild konzentrieren.

Ein starker Hero Bereich hat fünf Bausteine:

• Eine konkrete Überschrift in einem Satz, die sagt, was Sie für wen tun.
• Eine kurze Zeile unter der Überschrift, die sie stützt.
• Eine einzige Hauptschaltfläche, zum Beispiel „Angebot anfordern“ oder „Jetzt anrufen“.
• Ein echtes Bild, das Ihr Angebot zeigt.
• Ein kleines Vertrauenssignal, etwa eine echte Referenz oder ein Zertifikat.

Machen Sie aus Ihren anderen Botschaften deshalb keine Folien. Geben Sie stattdessen jeder einen eigenen Abschnitt unter dem ersten Bildschirm, damit Besucher sie ohne Bewegung an Ort und Stelle lesen. Wie Sie den ersten Bildschirm bauen, erklärt unser Beitrag Was ist Above the Fold. Den Aufbau der ganzen Seite zeigt der Beitrag zur Startseite mit Elementen, Hierarchie und Call to Action, und die Schaltfläche behandeln die Beispiele für Call to Action Buttons.

Dasselbe Prinzip gilt zudem für Werbeverkehr. Wenn Sie eine Landingpage erstellen lassen, baut sie auf einer Botschaft und einem Ziel auf. Wer diese Disziplin auf die Startseite überträgt, vereinfacht somit auch den ersten Bildschirm.

Ebenso wenig ist ein Hintergrundvideo ein Selbstläufer. Die Erläuterung zu WCAG 2.2.2 nennt bewegte Bilder und Animationen als bewegten Inhalt, ein Video, das von selbst startet, braucht also eine Pausenfunktion. Außerdem zählt web.dev das Vorschaubild (Poster) eines Videos zu den LCP Kandidaten.

Wann ist ein Slider auf der Website trotzdem sinnvoll?

Ein Slider ist nicht überall falsch. Ein Karussell funktioniert dann gut, wenn die Inhalte eine echte geordnete Sammlung sind und der Besucher die Bewegung steuert. Das W3C nennt Bildergalerien selbst unter den typischen Einsatzzwecken. Diese Fälle passen:

• Produktfotos: verschiedene Ansichten eines Produkts, die Besucher in eigenem Tempo durchsehen.
• Projektgalerien: sinnvoll, wenn Sie Arbeitsproben in fester Reihenfolge zeigen, auch als Vorher und Nachher.
• Fotos von Räumen und Immobilien: Besucher wollen mehrere Ansichten sehen, bevor sie sich entscheiden.
• Erklärungen in Schritten: die Schritte einer Einrichtung oder eines Ablaufs nacheinander.
• Horizontale Kartenreihen auf dem Smartphone: Kategorien oder Leistungen als Karten nebeneinander.

Die Bedingung bleibt gleich: Der Besucher löst die Bewegung aus. Für Karussells ohne automatisches Weiterschalten gibt NN/g zwei Tipps. Nutzen Sie Navigationslinks und Symbole, und schneiden Sie einen Teil des nächsten Bildes an, damit Menschen spüren, dass weitere Inhalte folgen.

In welcher Reihenfolge prüfen Sie Ihren bestehenden Slider?

Beginnen Sie mit der häufigsten Ursache: der ersten Folie. Denn viele Besucher sehen nur sie. In der Praxis stoßen wir mitunter darauf, dass die eigentliche Kampagne auf der dritten Folie liegt, während die erste nur einen Markennamen und einen Slogan zeigt. Prüfen Sie dann der Reihe nach:

1. Erste Folie: Erklärt sie Ihr Angebot allein? Wenn nicht, beginnt das Problem hier.
2. Bewegung: Läuft Autoplay, und gibt es einen Stoppknopf?
3. Tastatur: Erreichen Sie Pfeile und Folienlinks mit der Tabulatortaste, bedienen Sie sie mit der Eingabetaste und sehen Sie den Fokusrahmen?
4. Smartphone: Lesen Sie den Text mühelos, treffen Sie die Schaltflächen leicht und gibt es neben dem Wischen eine Alternative?
5. Tempo: Kommt das erste Folienbild mit der Seite oder erst später?
6. Daten: Welche Folie haben Besucher zuletzt angeklickt, und bekommt eine Folie gar keine Klicks?

Zeigen die ersten drei Punkte zwei oder mehr Probleme, ist dann der Wechsel zu einem einzelnen Hero Bild oft die einfachere Lösung als die Reparatur des Sliders.

Wie stellen Sie Tempo und Anzahl ein, wenn Autoplay bleiben muss?

Geschäftsführung oder Partner bestehen manchmal auf einem automatisch wechselnden Slider auf der Website. Dann senken Sie das Risiko. Fügen Sie zunächst einen Stoppknopf hinzu, um WCAG 2.2.2 zu erfüllen. Pausieren Sie danach die Bewegung, sobald Maus oder Tastaturfokus das Karussell erreichen, wie es das W3C empfiehlt.

NN/g rät in zwei Fällen vom automatischen Weiterschalten ab: wenn Sie nicht sicher sind, dass das Timing den meisten das Lesen erlaubt, und wenn der Inhalt wie Werbung aussieht. Für das Tempo gibt es keine Regel, nur einen Richtwert. NN/g nutzt drei Wörter pro Sekunde als Leserichtwert. Beispielrechnung: Eine Folie mit 15 Wörtern braucht allein zum Lesen 15 ÷ 3 = 5 Sekunden. Das Verstehen des Bildes dauert zusätzlich, und langsamere Leser brauchen noch mehr.

Bei der Anzahl empfiehlt NN/g fünf oder weniger Bilder, weil Nutzer sich mit mehr kaum befassen. Außerdem sollte die Schleife weiterlaufen, statt auf dem letzten Bild zu stoppen, und auf Mobilgeräten schalten Sie nie automatisch weiter. Das sind Richtwerte, keine Regeln, testen Sie sie also mit Ihren eigenen Inhalten.

Was gehört auf die Checkliste, wenn Sie einen Slider behalten?

Haken Sie vor der Veröffentlichung jeden Punkt ab. So räumen Sie die häufigsten Fehler gleich zu Beginn aus.

• Die erste Folie trägt allein Ihr Angebot und Ihre Handlungsschaltfläche.
• Autoplay ist aus. Läuft es dennoch, gibt es einen deutlichen Stoppknopf, und die Bewegung pausiert, sobald der Fokus das Karussell erreicht.
• Der Slider hat höchstens fünf Folien, und wichtige Informationen stehen auch an anderer Stelle der Seite.
• Schaltflächen für Zurück und Weiter sowie die Folienanzeige liegen im Karussell und sind deutlich sichtbar und groß genug.
• Sie erreichen jedes Bedienelement per Tastatur und erkennen den Fokusrahmen.
• Neben dem Wischen gibt es Schaltflächen für Zurück und Weiter, die man antippt.
• Text steht im HTML und nicht im Bild, und Text über einem Bild erfüllt die Kontrastkriterien.
• Folienbilder sind echte Bilder im HTML und tragen einen aussagekräftigen Alternativtext.
• Sie laden das erste Bild nicht verzögert, und spätere Folien bekommen eine niedrigere Priorität.
• Die Bilder haben passende Maße und eine kleine Dateigröße.
• Keine Folie hat eine eigene H1, und die eine Hauptüberschrift der Seite steht außerhalb des Sliders.
• Sie markieren jeden Folienlink einzeln und werten die Ergebnisse regelmäßig aus.

Wie messen Sie, was Ihr Slider wirklich bewirkt?

Die Messung umfasst im Prinzip vier Schritte. Die Menüs der Tools ändern sich oft, deshalb nennen wir keine Schaltflächen; suchen Sie die Einstellung in der Hilfe des jeweiligen Tools.

1. Geben Sie jedem Folienlink eine eigene Markierung, zum Beispiel Position der Folie und Name der Botschaft. Ihr Analysetool kann die Klicks dann pro Folie trennen.
2. Nutzen Sie außerdem Heatmaps und Sitzungsaufzeichnungen, um zu sehen, ob Besucher am Slider vorbeiscrollen oder die Pfeile antippen. Wie diese Tools arbeiten, erklärt unser Beitrag zu Heatmaps und Sitzungsaufzeichnungen.
3. Vergleichen Sie danach zwei Versionen (einen A/B Test): die Version mit Slider und die Version mit einem Hero Bild. Nutzen Sie denselben Zeitraum, dieselbe Verkehrsquelle und dasselbe Ziel.
4. Prüfen Sie schließlich mit unserem A/B Test Rechner, ob der Unterschied nur Zufall ist. Haben Sie wenig Verkehr, ziehen Sie daher aus einem kurzen Test keine festen Schlüsse.

Beispielrechnung: Angenommen, die Sliderlinks erhalten in einem Monat 200 Klicks, und Ihre Markierungen zeigen, dass 170 von der ersten Folie kamen. Dann entfallen 85 % der Klicks auf die erste Folie. Diese Zahlen sind ein frei gewähltes Beispiel und zeigen nur die Logik. Eine solche Verteilung deutet darauf hin, dass die übrigen Folien als Dekoration dienen. Entscheiden Sie dennoch nicht anhand eines Monats, und beachten Sie saisonale Schwankungen.

Wie wechseln Sie Schritt für Schritt vom Slider zu einem einzelnen Hero Bild?

Das ist ein Beispielszenario und beschreibt keinen echten Kunden. Stellen Sie sich eine kleine Möbelwerkstatt vor, deren Startseite vier Folien zeigt: eine Aktion, den Ausstellungsraum, den Katalog und Referenzen.

1. Schreiben Sie die vier Botschaften auf und wählen Sie die eine Handlung, die Besucher im ersten Bildschirm ausführen sollen, etwa ein Angebot anfragen.
2. Setzen Sie die Botschaft, die dieser Handlung am meisten dient, in den Hero Bereich: eine Überschrift, eine Zeile, eine Schaltfläche.
3. Platzieren Sie die anderen drei Botschaften unter dem ersten Bildschirm als drei eigene Abschnitte oder Karten.
4. Wählen Sie ein starkes Foto und schreiben Sie den Text ins HTML, nicht ins Bild.
5. Bevor Sie alte Folienlinks entfernen, stellen Sie sicher, dass Besucher die Zielseiten weiterhin auf anderem Weg erreichen.
6. Testen Sie die neue Startseite auf dem Smartphone und mit der Tastatur und messen Sie vor dem Start die Ladezeit.
7. Vergleichen Sie schließlich nach einigen Wochen die Daten zu Klicks und Conversions mit dem früheren Zeitraum.

Der beste Zeitpunkt, einen Slider auf der Website abzuschaffen, ist der Umzug auf eine neue Plattform, denn das Design bauen Sie ohnehin neu auf. Verlassen Sie einen Baukasten wie Wix, hilft Ihnen unser Leitfaden zum Umzug von Wix und zur Übertragung der Domain. Starten Sie den Umzug und die Designänderung allerdings nicht am selben Tag, weil Sie bei einem Problem schwer erkennen, was es ausgelöst hat.

Wie gehen wir vor, wenn Sie Ihre Startseite mit uns umbauen wollen?

Die Entscheidung über den Slider ist nur ein kleiner Teil eines Website Projekts. Talha Aslan und Team gestalten, bauen, migrieren und betreuen Ihre Website. Außerdem behandeln wir die Botschaft der Startseite, die visuelle Hierarchie, die Ladezeit, die Barrierefreiheit und die Messung gemeinsam.

Möchten Sie, dass wir Ihre aktuelle Startseite prüfen oder eine neue Website von Grund auf bauen, können Sie ein Angebot für professionelles Webdesign anfordern. Preise, Pakete oder Lieferzeiten versprechen wir nicht im Voraus. Stattdessen erstellen wir ein Angebot nach Ihrem Umfang. Nennen Sie uns Ihre Website Adresse, Ihr Ziel und die eine Handlung, die Sie im ersten Bildschirm wünschen, dann geht es schneller.