Website-Karussell-Schieberegler: Warum, wie und wann sie verwendet werden sollen (einschließlich 13 Beispiele)

Sprechen wir über Website-Karussells, auch bekannt als Schieberegler, auch bekannt als Diashows, auch bekannt als Galerien.

Es scheint, als hätte das gesamte Internet seine eigene Variation, aber gemeinsam meinen wir alle das Designelement mit dem sich bewegenden Inhalt und zeigen oft drei kleine Punkte auf der Unterseite an.

Wenn es um Karussells geht, bist du entweder im Team 👏 oder im Team 🙅. Das erste Team umfasst in der Regel die Kunden, das zweite Team die Webdesigner.

Hier bei Ycode sind wir die Schweiz. Wir glauben, dass Karussells die Mittelstücke sein können, die Ihr Webdesign attraktiver machen, aber auch das Potenzial haben, die Benutzerfreundlichkeit Ihrer Website zu beeinträchtigen.

In diesem Artikel werden wir uns die Best Practices für Karussell ansehen (und was zu vermeiden ist). Da Karussells für viele Gelegenheiten verwendet werden können, zeigen wir Ihnen verschiedene Beispiele für gut gemachte Schieberegler.

Best Practices für Karusselldesign (oder meistens, was nicht zu tun ist)

Obwohl sie auf vielen Websites verwendet werden, können Karusselldesigns leicht die Marke verfehlen. Es gibt ein paar gute Gründe, warum. Beginnen wir mit einigen Dingen, die Sie vermeiden sollten, bevor wir Ihnen mitteilen, welche Best Practices für Karussells Sie verwenden sollten.

👎 Don’ts: Karussell Fehler zu vermeiden

1. Inhalt: Wenn ein Karussell in zu kurzer Zeit zu viel tun möchte, kann dies dazu führen, dass sich die Augen der Website-Besucher drehen. Text kann nicht richtig gelesen werden, Informationen werden verpasst und Besucher verlieren das Interesse.

2. Design: Wenn ein Slider schlecht gestaltet ist und sich nicht in Ihr Website-Design einfügt, kann er als Anzeige verwechselt werden. Infolgedessen scrollen die Leute direkt am Inhalt vorbei. Es heißt Banner Blindness, ein Webdesign-Phänomen, bei dem Menschen Inhalte ignorieren, die einer Anzeige ähneln — bewusst oder unbewusst.

3. SEO: Vermeiden Sie aus SEO-Sicht mehrere H1-Header, wenn Sie Schieberegler als erstes auf der Seite verwenden. Jede Webseite sollte ein H1 in ihrem HTML-Code haben. Wenn Sie aufgrund der unterschiedlichen Folien mehrere H1s verwenden, ist Google möglicherweise verwirrt, welche Keywords für diese Webseite am wichtigsten sind. Außerdem ist die Struktur der Website möglicherweise nicht klar. Beide Faktoren können sich negativ auf Ihr Ranking auswirken.

4. Mobil: Für mobile Geräte ist es am besten, manuelle Schieberegler zu verwenden. Stellen Sie sicher, dass Gesten unterstützt werden (z. B. Wischen mobiler Benutzer, um die nächste Folie anzuzeigen) und dass die Pfeile deutlich angezeigt werden und groß genug sind, um sie zu drücken. Wenn Ihre Folien Text enthalten, überprüfen Sie, ob er auf mobilen Bildschirmen lesbar ist.

5. Rotation: Angesichts unserer begrenzten Aufmerksamkeitsspanne ist es heutzutage schwierig, das Interesse des Benutzers länger als ein paar Sekunden aufrechtzuerhalten. Da wir alle Orte haben, an denen wir sein können, halten Sie den Schieberegler niedrig (weniger als fünf) und geben Sie den Besuchern die Möglichkeit, das Karussell zu steuern, indem sie Schieberegler anzeigen. Dies stellt sicher, dass die Leute nicht sitzen und auf die nächste Folie warten müssen.

👍 Do’s: Karussell Best Practices

1. Halten Sie jede Folie einfach, damit die Informationen innerhalb von Sekunden verdaut werden können.

2. Passen Sie das Design an den Rest Ihrer Website an.

3. Lassen Sie die Leute die Rotation mit klaren Pfeilen steuern.

4. Haben Sie genug Zeit zwischen den Folien (5-10 Sekunden), oder noch besser, graben Autoplay insgesamt.

5. Weniger ist mehr (sowohl im Design als auch in der Anzahl der Folien).

6. Bevor Sie ein Karussell einfügen, fragen Sie: Wird dies mehr Wert als statischer Inhalt hinzufügen?

Haben Sie zweite Gedanken?

Testen Sie im Zweifelsfall beide Optionen und sehen Sie, welche Option eine höhere Conversion-Rate generiert. Oft fragen Kunden nach Diashows, weil ihnen die Botschaft, die sie in erster Linie bewerben möchten, nicht klar ist. Warum nicht alles zeigen? Sie denken.

Wenn dies der Fall ist, besteht die Arbeit darin, eine fokussiertere Nachricht zu erstellen — ohne einen Schieberegler zu verwenden. Oder wählen Sie den wichtigen USP (Unique Selling Point) und erwähnen Sie die anderen weiter unten auf der Seite. Es ist wahrscheinlicher, dass Personen scrollen, als durch Ihre Folien zu blättern.

Wenn Sie sich entscheiden, dass es ein höllisches Ja ist, wählen Sie jede Folie absichtlich aus. Fügen Sie nicht nur alle Ihre neuen Blogs oder Produkte hinzu, sondern wählen Sie sorgfältig die wichtigsten Inhalte aus, die die meiste Interaktivität bei den Benutzern erzeugen könnten.

13 Website Karussell Beispiele

Nun, da Sie wissen, was nicht zu tun ist, schauen wir uns Karussell Beispiele, die es nageln. Hier sind 13 Beispiele für Website-Karussells, von der Homepage bis zu Produkt- und Bild-Diashows.

Homepage-Karussells

Wenn Sie dachten, die Lager seien bereits geteilt genug, haben Sie keine Homepage-Schieberegler getroffen. Einige Root, um sie direkt oben zu platzieren (oft in Blog-Vorlagen zu sehen), während andere nicht wollen, dass sie irgendwo über der Falte implementiert werden.

Der Grund, warum Leute es vermeiden, ein Homepage-Karussell direkt oben zu platzieren, ist, weil sie glauben, dass dieser Platz für eine klare Botschaft reserviert werden sollte, die den Leser dazu verleitet, nach unten zu scrollen und mehr zu erfahren. Mit Karussells ist es schwierig, eine starke Botschaft zu vermitteln. Außerdem sind Sie sich nicht sicher, ob die Leute alle Folien sehen oder direkt vorbei scrollen.

Es gibt jedoch auch viele Leute, die es lieben, Besucher mit einem Homepage-Karussell zu begrüßen, um sofort vorgestellte Geschichten oder Produkte anzuzeigen.

Beispiel 1: Nicole Gibbons Studio

Das Homepage-Karussell von Nicole Gibbons Studio funktioniert wirklich gut! Das ist aus mehreren Gründen gut.

• Es hat eine gute Funktionalität und Mehrwert. Designerin Nicole zeigt schnell verschiedene Einrichtungsbeispiele direkt beim Betreten ihrer Website

• Die Folien sind manuell, sodass der Benutzer entscheidet, ob und in welchem Tempo er durchblättern möchte

• Es gibt keine Textüberlappung, um die Bilder zu entfernen

Beispiel 2: Urban Skin RX

Wir lieben dieses kompakte Karussell von Urban Skin RX, da es sehr gut zugänglich ist.

Es enthält zwei Folien, die beide attraktiv im gleichen Stil wie der Rest der Website gestaltet sind. Die Rotationszeit ist lang genug eingestellt, um den Text zu lesen. Die großen Schriftarten und die klaren Call-to-Action-Schaltflächen (CTA) machen es leicht zu verstehen, worum es auf der Folie geht.

Hinweis: Wenn Sie durch die Homepage der Marke scrollen, werden Sie feststellen, dass sie auf Personen zugeschnitten ist, die bereits mit Urban Skin RX vertraut sind. Der Fokus liegt auf der Präsentation von Produkten, ohne zu erklären, warum jemand sie überhaupt braucht. Deshalb passt ein Produkt-Slider auf die Seite — sie brauchen nicht den Header-Bereich, um eine klare Botschaft zu zeigen, die Besucher motiviert, mehr zu entdecken.

Beispiel 3: Mejuri

Was wir an diesem Karussell aus dem Juweliergeschäft Mejuri lieben, ist, dass es zwei verschiedene Dinge gleichzeitig zeigt, ohne sich überwältigend zu fühlen.

Das gesamte Karussell enthält drei Folien, von denen jede zwei Optionen hat — Sehen Sie sich die Kampagne an oder kaufen Sie den Schmuck ein. Die Progressionslinien sind unten subtil dargestellt, obwohl Sie möglicherweise Adleraugen benötigen, um dies zu erkennen. Dies könnte ein Punkt für die Optimierung sein.

Example 4: Fresh Brothers Pizza

Wer sagt, dass ein Schieberegler die volle Breite einer Seite umfassen muss? Sie können Abschnitte auch in Raster aufteilen und kleinere Schieberegler verwenden, wie auf der Homepage von Fresh Brothers Pizza.

Zugegeben, mit diesem Webdesign-Layout kann es ein bisschen viel werden. Obwohl die Schieberegler Besucherinformationen anzeigen, wird das Auge auf das große Bild links gelenkt. Nicht jeder wird die Schieberegler-Informationen sehen. Da es sich bei den Informationen jedoch um COVID-Maßnahmen und neue Pizzen handelt, die die Leute bei ihrer Bestellung ohnehin sehen werden, ist dies keine große Sache.

Produktkarussells

Produktkarussells sollen die Menschen visuell dazu verleiten, mehr über das Produkt zu erfahren und es hoffentlich zu kaufen!

Diese Arten von Karussells werden normalerweise an einem von zwei Stellen auf E-Commerce-Websites platziert: der Homepage oder der Produktseite. Der Schieberegler kann verschiedene Produkte oder ein Produkt auf unterschiedliche Weise anzeigen (mit seinen Funktionen).

Beispiel 5: Keys Soulcare

Auf dieser Keys Soulcare-Produktseite wird ein Karussell verwendet, um jeden Artikel anzuzeigen, der im Harmony Ritual-Paket enthalten ist. Ein Schieberegler passt perfekt zum Website-Design, da Besucher alle relevanten Informationen sehen können, ohne scrollen zu müssen.

Beispiel 6: KeepCup

Dieses Produktkarussell von KeepCup befindet sich in der Mitte der E-Commerce-Website und ermöglicht Ihnen das einfache Durchsuchen der beliebtesten To-Go-Becher der Marke. Beachten Sie, wie der Name, der Preis, der Kaufknopf und die Pfeile platziert sind — super glatt (Requisiten an die Grafikdesigner).

Example 7: Homesick

Candle company homesick verwendet eine Vielzahl von Slider-Elementen auf ihrer E-Commerce-Website, um ihre Kerzen sowie Bewertungen und Zitate von Marken zu präsentieren.

In der Mitte der Homepage gibt es diese Diashow — eine bewegende Galerie ihrer meistverkauften Kerzen (wir lieben das Duftkonzept!). Sobald Sie den Mauszeiger über einen Bildschieberegler bewegen, wird dieser angehalten und ein etwas anderes Bild angezeigt (z. B. das Anzünden der Kerze).

Beispiel 8: Milk Bar

Die Produktseiten von Milk Bar sind eine Freude, nicht nur, weil die Bilder köstlich sind. Nehmen Sie die Cheerleader-Webseite unten, mit dem Slider-Element links und allen Produktdetails rechts sehen Besucher alles auf den ersten Blick.

Wenn Sie jedoch nach unten scrollen, sehen Sie interaktive Banner und weitere Produktinformationen wie Lieferung, Zutaten, ähnliche Leckereien und ein weiteres Karussell mit Kundenbewertungen.

Inhaltskarusselle

Wenn Sie Ihrer Website ein Inhaltskarussell hinzufügen möchten, denken Sie daran, dass sich der wertvollste Inhalt auf der ersten Folie befinden muss. Die erste Folie erhält immer die meiste Belichtung, und die Impressionen nehmen nach jeder weiteren Folie ab.

Beispiel 9: Art of Tea

Auf der Website unten von Art of Tea sehen Sie viele verschiedene Dinge in einem Vollbild-Schieberegler.

Der Eröffnungsschieberegler ist ein CTA, um an seinem Partnerprogramm teilzunehmen. Als nächstes gibt es Folien, die neue Teedosen, Beutel, Bündel und Shaker zeigen. Eine Folie ist auch dem Beitritt zu ihrem monatlichen Teeclub gewidmet.

Was dieses Karussell-Webdesign gut macht, ist, dass die Bilder zeigen, worum es bei jeder Folie geht, und der unterstützende Text auf ein Minimum beschränkt ist. Eine Sache, die verbessert werden muss, sind die Tasten. Wenn Sie Schaltflächen auswählen, die nur einen Umriss haben, ist es schwierig, sie klar auf dem Bild zu sehen.

Beispiel 10: Canva Design School

Die Design School-Seite von Canva ist ein gutes Beispiel für einen Fall, in dem ein Karussell effektiver ist als jedes andere Website-Element.

Da auf der Landingpage viel Content zu sehen ist, hilft ein Karussell, die verschiedenen Kurse kompakter darzustellen. Zum Beispiel nimmt der Tutorial-Abschnitt unten viel mehr Platz ein als die Diashow.

Blog-Karussells

Viele WordPress-Vorlagen für Blogs verfügen über ein interaktives Schiebereglerelement, das automatisch die neuesten Artikel anzeigt.

Dies ist zwar eine großartige Funktion, beachten Sie jedoch, welche Artikel angezeigt werden. Einige sind möglicherweise nicht so klickwürdig, werden aber zuerst in Ihrem Homepage-Schieberegler angezeigt, da sie zuletzt veröffentlicht wurden. In diesem Fall ist es besser, die Blogs manuell auszuwählen, von denen Sie glauben, dass sie Besucher zum Klicken verleiten.

Beispiel 11: COCOCOZY

Interior Design Bloggerin Colette Shelton öffnet ihren Blog mit einem Slider, der eine Auswahl ihrer Blogs zeigt. Sobald Sie den Mauszeiger darüber bewegen, wird der Titel des Blogs angezeigt. Auf dem Handy wird das Bild mit dem Titel darunter angezeigt.

Bildkarussells

Bildkarussells werden häufig auf Portfolio-ähnlichen Websites angezeigt, auf denen Teile der Arbeit des Künstlers angezeigt werden. Stellen Sie sicher, dass Ihre Bilder von hoher Qualität sind und für sich selbst sprechen, ohne dass zusätzlicher Text erforderlich ist.

Beispiel 12: Mix Design Collective

Mix Design Collective ist ein Designunternehmen. Da ihre Arbeit sehr visuell ist, ist es sinnvoll, die Website mit der Navigation und einem Foto-Slider direkt darunter zu öffnen.

Die Diashow enthält eine Mischung aus Bildern, von Küchen über Badezimmer bis hin zu Wohnzimmern, sodass die Besucher eine Vorstellung vom Designstil und den Dienstleistungen des Kollektivs erhalten.

Comparison carousels

Schieberegler eignen sich gut, wenn Benutzer schnell eine Vielzahl von Inhalten oder Produkten durchsuchen müssen. Dies ist genau der Fall, wenn Personen Artikel vergleichen. Schauen wir uns einige Beispiele an.

Beispiel 13: Amazon

Das wohl bekannteste Vergleichsbeispiel stammt von Amazon. Auf jeder Produktseite finden Sie ein Karussell mit allen verwandten Produkten, die Sie ebenfalls kaufen können. In diesem Fall ist ein Schieberegler effektiver als statische Bilder, da Benutzer schnell viele ähnliche Produkte durchsuchen können.

Was halten Sie von Website-Karussells?

Wie Sie gelesen haben, können Web-Schieberegler ein Ja bitte oder ein bitte nein sein. Es hängt alles davon ab, wie das Element in Ihrem Webdesign verwendet wird und wie benutzerfreundlich der Schieberegler zu navigieren ist. Stellen Sie sicher, dass jede Folie einen klaren Zweck erfüllt und die allgemeine Benutzererfahrung großartig ist. Wenn Sie sicher sagen können, dass ein Schieberegler das beste Element ist, um den Inhalt anzuzeigen, können Sie loslegen.