Image-Karussells im Webdesign - Nutzen & Best Practices

Es gibt keinen Mangel an Karussell-Diashows im Internet. In der Tat hat dieser Trend nichts anderes getan in den letzten 5-10 Jahren wachsen mit mehr Browserunterstützung als je zuvor. Aber sind Image-Karussells wirklich die Mühe wert? Welche Art von Nutzen erzeugen sie und wie sollten sie in einem Layout produktiv eingesetzt werden??

Ich würde gerne einige teilen gemeinsame Trends, Live-Beispiele und Ideen für Webdesigner, die an Bildkarussellen interessiert sind. Diese dynamischen Schieberegler werden heftig diskutiert, aber ich denke, dass sie einen Mehrwert schaffen, wenn sie im richtigen Kontext erstellt werden.

Produktkarusselle für den E-Commerce

Die Welt des E-Commerce ist voll von rotierenden Karussells auf Homepages und Produktseiten. Das Ziel ist es Aufrechterhaltung einer klaren Informationsdichte mit Fotos und Text erzähle eine einzigartige und doch wertvolle Geschichte um zu helfen, Produkte zu verkaufen.

Es gibt zwei primäre Platzierungen für einen E-Commerce-Produktschieberegler:

1. Auf der Homepage eines Shops
2. Auf einer Produktseite

Beide arbeiten aber unterschiedlich diene das gleiche Ziel - Produkte visuell verkaufen.

Beispiel 1: Au Lit Fine Linens - Startseite

Werfen Sie einen Blick auf die Startseite von Au Lit Fine Linens verwendet ein automatisch drehendes Vollbild-Karussell um verschiedene Produkte wie Bettdecken, Kissen und Bettdecken zu präsentieren.

Die Bilder nimm die volle Breite ein der Homepage und sie gut über der Falte erscheinen. Tatsächlich sollte dieser Schieberegler das erste sein, das Ihre Aufmerksamkeit bei der ersten Landung auf der Seite weckt. Jede Folie führt zu einer anderen Seite auf der Website Kunden durch das Einkaufserlebnis führen.

Dieser Schieberegler kann bei der ersten Landung auf der Seite ein wenig einschüchternd wirken, jedoch mit der Schaltfläche Link und Text überlagern es kann auch sehr ermutigend sein für besucher, die nur eintauchen und einkaufen möchten.

Beispiel 2: Eden Phone Case - Produktseite

Ein genaueres Beispiel finden Sie auf der Eden Phone Case-Produktseite. Es verwendet ein Auto-Rotationsschieber um Bilder des Produkts zu zeigen.

Ich finde das ein wenig “zu viel” in der Welt des E-Commerce. Wenn ich mir ein Produkt anschaue, möchte ich sein beim Umschalten zwischen Bildern.

Die bessere Wahl ist, eine Bildergalerie zu erstellen mit der Kontrolle an den Besucher gegeben. Zum Beispiel wird die Seite Design by Humans verwendet Miniaturbilder für jedes Foto Das ist viel ermutigender und gibt dem Benutzer mehr Kontrolle.

Webportfolio-Karussells

Online-Website-Portfolios sind ein bisschen anders, weil diese Folien Klicken Sie nicht immer auf eine andere Seite. Es ist wahr, dass einige zu einer Fallstudie führen oder über ein Projekt aufschreiben, aber viele Karussells auf Portfolio-Websites sind dazu gedacht zeig visuelle Arbeit.

Beispiel 1: Biboun - Homepage

Der französische Künstler, der unter dem Namen Biboun arbeitet, hat eine Karussell-Schieberegler auf der Startseite Aufmachung von Ausschnitten der Grafik. Die einzelnen Folien führen zu internen Seiten im Portfolio, die ein ganzes Projekt abdecken mit mehreren fotos.

Das ist wahrscheinlich Der beste Weg, einen Slider zu machen auf einer Portfolio-Website. Nur eine zufällige Liste von Arbeiten zu präsentieren, ist sinnlos, es sei denn, diese spezifischen Werke haben einen Grund, präsentiert zu werden.

Alle Stücke sind exquisit in Bibouns Schieberegler und es nimmt nicht viel Platz ein entweder. Obwohl ich weiß, dass einige Leute die automatisch rotierenden Diashows aus gutem Grund hassen, fällt es mir bei diesem minimalistischen Layout schwer, mich über dieses Designmerkmal zu beschweren.

Beispiel 2: Aaron Blaises Website - Homepage

Das Beispiel auf der Website von Aaron Blaise gefällt mir sehr gut, weil er präsentiert seine Arbeit als Portfolio, nutzt diese Website aber meistens dazu verkaufe seine kunstvideos. Aaron Blaise hat ein paar Jahrzehnte bei Disney gearbeitet, und er hat die Fähigkeit, es zu beweisen.

Während der Homepage-Schieberegler auf seiner Website automatisch rotiert, finde ich ihn nicht unglaublich nervig oder unpassend. Jede Folie hat ein bisschen Inhalt, der für das Bild relevant ist, und es hilft Aaron machen Sie auf seine neuesten Videokurse aufmerksam junge Künstler lernen, spezifische Fähigkeiten zu meistern.

Ein tolles Portfolio-Karussell konzentriert sich auf Visuals, und führt die Besucher weiter in die Website. Wenn Sie diese beiden Dinge erhalten können, wäre ich gegen eine solche Funktion in einer persönlichen Portfolio-Website.

Gemeinsame Designtrends

Wenn Sie sich einige meiner obigen Beispiele ansehen, werden Sie feststellen, dass es im Allgemeinen zwei verschiedene Arten von Schiebereglern gibt: Vollbildschirm und feste Breite.

Diese stilistischen Entscheidungen oft beziehen sich auf das Layout und zu wie viel Inhalt kann es passen. Wenn ein Layout die gesamte Seitenbreite umfasst, ist es sinnvoll, auch den Schieberegler zu vergrößern. Aber das zwingt dich auch dazu Finden Sie qualitativ hochwertige Bilder auf großauflösenden Monitoren sieht das im Vollbild dennoch gut aus.

Ich persönlich bevorzuge den Stil mit fester Breite, wie Sie in den beiden Beispielen des Kunstportfolios sehen werden. Diese sind viel einfacher zu kontrollieren, und sie sind oft nicht so groß - für Besucher leichter zu machen ignoriere sie einfach wenn sie es wünschen.

Berücksichtigen Sie auch den Wert der automatisch vorrückenden Folien und wie schwer kann es sein für Benutzer, um diesen Inhalt zu erfassen. Es gibt eine großartige Fallstudie der Nielsen Norman Group, die zeigt, dass es besser ist keine automatisch vorrückenden Schieberegler.

Ich bin mit diesem Ansatz in dem Sinne an Bord, dass es so ist weniger Speicherintensität mit weniger Animationen und Bewegungen im Browser, und die meisten Leute mögen auch keine automatisch rotierenden Karussells - und Sie sollten es immer tun Für Ihr Publikum sorgen.

Ich kann jedoch nicht sagen, dass es sich niemals lohnt, einen automatisch vorrückenden Schieberegler hinzuzufügen, besonders da Sie mit statischen Schiebereglern arbeiten Bekomme nicht so viele Ansichten, und du musst auch machen Sie Ihre erste Folie zum wichtigsten da viele Benutzer nicht mit der nächsten Folie fortfahren. Die Entscheidung, ob ein Slider automatisch gedreht werden soll oder nicht, ist leider eine Bereich von Versuch und Irrtum.

Was unter allen Umständen zu vermeiden ist

Hier ist eine wichtige Sache, die ich persönlich denke fällt unter “um jeden Preis vermeiden”. Schauen Sie sich den Screenshot unten an oder klicken Sie darauf, und versuchen Sie zu erraten, was es ist.

Die Yozenn Cafe-Website verwendet einen Fullscreen-Schieberegler. Es dreht sich nicht automatisch, was großartig ist, jedoch auch die Folien dienen keinem anderen Zweck als der Dekoration.

Die Bilder nirgendwo verlinken, und sie zeigen eine kleine Handvoll Produkte. Sie könnten alle einfach sein zum Hintergrund der Startseite hinzugefügt ohne den Schieberegler, um Verwirrung und zusätzliche Kilobyte JavaScript zu sparen.

Ich würde argumentieren, dass dieses Hintergrundgleitfeature einer ohnehin beengten Website keinen großen Nutzen bringt. Wenn die Bilder Links oder Begleittext hätten, wären sie zumindest relevanter.

Fühlen Sie sich frei, Bilder in Ihrem Kopfzeilenbereich zu verwenden, die die gesamte Seite belegen, wenn auch verlinken Sie nicht und bieten Sie keine echten Informationen dann verwandeln sie sie nicht in ein Karussell.

Interaktive Funktionen

Die Art und Weise, wie Benutzer ein Karussell navigieren, beeinflusst das Design selbst. Es gibt eine Vielzahl von Navigationsstilen, aber das sind die beliebtesten:

• Punktbasierte Navigation
• Pfeilnavigation
• Miniaturnavigation
• Listen Sie Links oder Überschriften auf

Das häufigste ist das Punktnavigation die Sie auf Hunderten moderner Websites finden.

Beispiel 1: Chic at Home - Homepage

Chic at Home ist ein großartiges Beispiel Drei kleine Punkte unter dem Schieberegler Navigation bezeichnen. Jedes Bild wird automatisch durchlaufen und der zugehörige Punkt in der Serie wird mit schwarz gefüllt. Die anderen zwei leeren Punkte bezeichnen mögliche Folien für Benutzer zum Durchsuchen.

Das ist ein beliebtes Designmuster dass viele Benutzer bereits erkennen. Es fällt in die gleiche Kategorie wie das Hamburger-Menü, was viele Designer jedoch nicht mögen Benutzer erkennen es bereits, und wissen instinktiv, wie man es benutzt.

Beispiel 2: Pure Cycles - Homepage

Die Homepage von Pure Cycles verwendet a Kombination aus Punkt- und Pfeilnavigation. Auf diese Weise haben Benutzer jedoch die Vorwärts- und Rückwärtsnavigation siehe auch die “insgesamt” Navigation durch Punktverbindungen in der Unterseite.

Ich finde die Punktverknüpfungen in diesem Beispiel wirklich schwer zu sehen. Die Schwierigkeit bei visuellen Folien besteht darin, dass viele Elemente nicht leicht zu unterscheiden sind, also Pfeile und Punkte leicht in den Hintergrund übergehen.

Beispiel 3: IGN - Homepage

Auf der Homepage von IGN finden Sie eine weitere automatisch drehendes Karussell das nutzt Titellinks für die Navigation. Dies ist sehr häufig für Verleger, die dies möchten Schlagzeilen verkaufen anstatt Produkte. Jeder Link führt zu der einzelnen Folie, die letztendlich erfolgt führt zur Artikelseite.

Diese Links könnte durch Thumbnails ersetzt werden, oder sogar Thumbnails aus jeder Geschichte - aber die Der visuelle Aspekt wird im Karussell gezeigt, Wenn Sie also das Miniaturbild weglassen, sparen Sie tatsächlich Platz.

Verschiedene Websites verwenden aus verschiedenen Gründen unterschiedliche Navigationsstile. Betrachten Sie die Ziele Ihrer Besucher, und Design für die beste Benutzererfahrung.

Die zentralen Thesen

Sie sollten darauf abzielen echten Wert oder zusätzliche Informationen erzeugen mit einem Karussell. Dies können Informationen sein, die der Besucher zuvor nicht hatte, oder sie können zu Seiten führen, die der Besucher möglicherweise nicht anders gefunden hat.

Vermeiden Sie automatisch rotierende Karussells und Verwenden Sie sie nur auf wichtigen Zielseiten (Die Homepage ist ein Beispiel). Solange das Karussell hat einen Zweck, und sieht nicht aus wie eine Anzeige, Ihr Design sollte gut funktionieren.

Wenn Sie nach mehr Informationen über Webkarusselle suchen, lesen Sie einige der folgenden Beiträge:

• Karussells von Brad Frost
• 8 UX-Anforderungen für die Gestaltung eines benutzerfreundlichen Homepage-Karussells
• Karussell-Benutzerfreundlichkeit: Entwerfen einer effektiven Benutzeroberfläche für Websites mit Inhaltsüberlastung