10 Anforderungen, damit Homepage-Karussells für Endbenutzer funktionieren (falls erforderlich)

Am Baymard Institute haben wir in den letzten sieben Jahren groß angelegte Usability-Tests sowohl für Desktop- als auch für mobile E-Commerce-Websites durchgeführt. Die Tests zeigen, dass Homepage-Karussells bei Endbenutzern anständig abschneiden können , wenn sie 10 Implementierungsanforderungen einhalten. Ebenso wichtig ist, dass sich die Implementierung von Desktop zu Mobile unterscheiden sollte.

Beachten Sie, dass diese Ergebnisse leicht von der eher schwarz-weißen Antwort „Benutze niemals ein Karussell“ abweichen, die du oft auf Websites wie „ Should I Use A Carousel? “ erhalten wirst. .

Lassen Sie mich nun betonen, dass Benutzertests nicht gezeigt haben, dass selbst ein perfekt implementiertes Karussell ein „Homepage-Retter“ ist, der die Leistung positiv beeinflusst wie kein anderes Design. Es gibt Alternativen zu einem Homepage-Karussell, die sowohl gut funktionieren als auch wesentlich einfacher zu implementieren sind (wir stellen die beste am Ende des Artikels vor).

Wenn man bedenkt, dass den meisten Karussellimplementierungen (einschließlich denen, die von mehreren Plugins erstellt wurden) viele dieser 10 Usability-Details fehlen (was sie geradezu schädlich für die UX macht), kann man verstehen, warum in Diskussionen über Karussells oft starke Formulierungen verwendet werden. Aber zu sagen, dass Homepage-Karussells niemals verwendet werden sollten, stimmt nicht ganz mit unseren sieben Jahren groß angelegter Usability-Tests überein – zumindest im E-Commerce-Kontext.

Weiterführende Literatur zu SmashingMag:

• Eine Untersuchung der Karussellnutzung auf mobilen E-Commerce-Websites
• Karussell-Design von Dropbox dekonstruiert
• Eine definitive Anleitung zum Designmuster für Android-Karussells
• Wie man den mobilen Benutzer vergiftet

In diesem Artikel gehen wir dann auf die 10 Implementierungsdetails ein, die wir gefunden haben und die erforderlich sind, damit Homepage-Karussells bei Endbenutzern akzeptabel funktionieren. Wir skizzieren, wie und warum sich mobile und Desktop-Implementierungen unterscheiden sollten, und schlagen schließlich eine einfachere, problemlose Alternative zu Homepage-Karussells vor.

(Falls Sie nicht über die Ressourcen verfügen, um alle 10 Anforderungen umzusetzen, würde sich unsere Empfehlung an die der meisten anderen anpassen: Verwenden Sie kein Homepage-Karussell, sondern verwenden Sie das am Ende vorgeschlagene alternative Design.)

Startseite Karussells in der Praxis

Karussells sind auf E-Commerce-Websites sehr beliebt – insbesondere auf der Startseite. Tatsächlich zeigt der Benchmark „Homepage & Category“, den wir mit 50 US-amerikanischen E-Commerce-Websites mit den höchsten Einnahmen durchgeführt haben, dass 52 % der E-Commerce-Websites ein Karussell auf ihrer Desktop-Startseite haben. Unser Usability-Benchmark „Mobile E-Commerce“ zeigt, dass Karussells auf mobilen Websites gleichermaßen beliebt sind: 56 % der mobilen E-Commerce-Websites haben eines auf der Startseite.

Ich möchte betonen, dass der Schwerpunkt dieses Artikels nicht auf Karussell-Inhalten selbst liegt, sondern vielmehr darauf, wie man ein Homepage-Karussell durch Design und interaktive Funktionen benutzerfreundlicher macht. Wenn der Inhalt eines Karussells nicht relevant, gut kuratiert und von hoher Qualität ist, wird die Benutzererfahrung schlecht sein, unabhängig davon, wie optimiert die Benutzeroberfläche und Logik sind. Und wenn der Inhalt wie Werbung aussieht, zeigen unsere Tests und Eye-Tracking-Studien, dass die meisten Benutzer den Inhalt aufgrund von Bannerblindheit einfach ignorieren, unabhängig davon, wie relevant er für sie sein könnte.

Einer der wichtigsten Vorteile von Homepage-Karussells ist, dass sie eine einfache Möglichkeit bieten, große und maßgeschneiderte Bilder einzufügen. Während des Tests haben wir festgestellt, dass große und benutzerdefinierte Bilder auf der Homepage den Benutzern einen guten ersten Eindruck von der Website vermitteln – was die Zeit verlängert, die sie nach der Landung auf einer neuen Website verbringen, bevor sie ihre erste schnelle Entscheidung treffen, ob sie bleiben oder gehen sollen. Mit anderen Worten, wir sehen, dass große, maßgeschneiderte Bilder oft die Absprungraten der Startseite reduzieren und gleichzeitig ein positives Licht auf die Website und die Marke werfen.

Abgesehen davon haben wir auch beobachtet, wie Implementierungsdetails ein Karussell schnell in eine frustrierende und potenziell schädliche Benutzererfahrung verwandeln können. In diesem Artikel haben wir die 10 Implementierungsanforderungen in 4 Gruppen unterteilt:

• Folienfolge und Ziele
• Automatische Rotationslogik auf dem Desktop
• Zwei Funktionen der Karussellsteuerung
• Die Unterschiede auf Touch-Geräten

1. Foliensequenz und Ziele

Die meisten Benutzer sehen nicht alle Folien in einem Homepage-Karussell, selbst wenn es sich automatisch dreht. Sie bleiben einfach nicht lange genug auf der Homepage und schon gar nicht oben auf der Seite.

Während des Tests wechselten unsere Probanden normalerweise zu einer anderen Seite oder scrollten am Karussell vorbei, lange bevor das Karussell alle Folien durchlaufen hatte. Und das war im Fall von automatisch rotierenden Karussells der Fall – offensichtlich zeigten vollständig manuelle Karussells nur die erste Folie, bis die Testpersonen aktiv die Folie wechselten.

Das bedeutet, dass die Reihenfolge der Dias wichtig ist, da das erste Dia viel mehr Belichtung erhält als spätere. In einem sich automatisch drehenden Karussell ist es nicht ungewöhnlich, dass die erste Folie mehr als 50 % der Klicks erhält (siehe Abschnitt „Site 2“ von Erik Runyons „Carousel Interaction Stats“). Eine weitere entscheidende Implikation ist, dass man nicht davon ausgehen kann, dass Benutzer eine bestimmte Folie sehen werden.

Nichts davon ist an und für sich ein Problem – ein Benutzer, der nicht alle Karussell-Folien sieht, ist kein Problem, solange das Karussell nicht die einzige Möglichkeit ist, auf die Funktionen der Website zuzugreifen, und nicht darauf vertraut wird, dies anzuzeigen Produktvielfalt der Website. Viele der Test-Websites in unseren Usability-Studien „Homepage & Kategorie“ und „Mobiler E-Commerce“ bewarben jedoch nur bestimmte Angebote und Website-Features in ihren Karussell-Folien (Produktassistenten, Geschenkfinder usw.), was sich als sehr problematisch herausstellte die meisten Probanden haben diese Folien nie gesehen (sie sind bereits von der Homepage weitergegangen); Daher haben die Probanden nie von diesen ansonsten hilfreichen Tools erfahren, obwohl einige von ihnen aktiv danach gesucht haben. Obwohl es eine großartige Idee sein kann, solche Funktionen in Karussellfolien zu bewerben, sollte dies nicht die einzige Möglichkeit sein, auf sie zuzugreifen.

Imbiss

• Wählen Sie die Reihenfolge der Folien sorgfältig und platzieren Sie die wichtigsten Inhalte auf der ersten Folie.
• Nutzen Sie das Karussell als zusätzliches Highlight wichtiger Website-Features und Informationen, niemals als einzigen Weg zu wichtigen Inhalten.

2. Autorotationslogik auf dem Desktop

Das automatische Drehen eines Karussells verteilt die Darstellung des Inhalts über die Folien und unterstreicht, dass es sich tatsächlich um ein Karussell handelt. Während manuelle Karussells magere Klickraten von 1 bis 2 % haben (die einzige Statistik, die auf „Should I Use A Carousel?“ zitiert wird), stellte Erik Runyon fest, dass automatisch rotierende Karussells mit 8 bis 10 % Klickraten anständig sein können (siehe seinen Abschnitt „Site 2“). Ein Wort der Vorsicht: Wie bei jeder animierten Grafik lenkt die Autorotation die Aufmerksamkeit von statischen Inhalten ab und legt so die Messlatte für die Qualität und Pflege des Inhalts des Karussells noch höher.

Wenn Sie auf der Grundlage dieser Überlegungen entscheiden, dass die automatische Rotation angemessen ist, haben sich drei Details als entscheidend für die Leistung erwiesen, so dass Sie, wenn Sie sie nicht einhalten können, überhaupt keine automatische Rotation oder kein Karussell implementieren :

• Folien sollten sich nicht zu schnell drehen.
• Die automatische Drehung sollte beim Schweben anhalten.
• Die automatische Drehung sollte nach jeder aktiven Benutzerinteraktion dauerhaft beendet werden.

Folien sollten sich nicht zu schnell drehen

Wenn sich ein Karussell zu schnell dreht, haben die Benutzer nicht genug Zeit, um interessante Folien zu untersuchen. Dies kann Benutzern Unbehagen bereiten, wenn sie versuchen, durch den Text einer Folie zu eilen, bevor sie sich dreht. Eine zu langsame automatische Drehung hat natürlich den gegenteiligen Effekt und langweilt die Benutzer mit Folien, die sie nicht interessieren.

Die Textmenge in einer Folie sollte weitgehend die Dauer der Sichtbarkeit einer Folie bestimmen. Handelt es sich nur um eine kurze Überschrift, haben sich in unseren Tests 5 bis 7 Sekunden als angemessen erwiesen, während für textlastigere Folien längere Dauern benötigt werden. (Die Nielsen Norman Group empfiehlt 1 Sekunde pro 3 Wörter für automatisch rotierende Folien.) Eine Folge davon ist, dass Sie einzelnen Folien möglicherweise eine eindeutige Dauer zuweisen müssen, wodurch einige Folien länger als andere angezeigt werden.

Auto-Rotation muss beim Hover immer pausieren (42 % tun dies nicht)

Oft besteht ein Zusammenhang zwischen der Mausposition eines Benutzers und seinem Fokus auf der Seite (siehe Seite 29 von „Web Information Seeking and Interaction“, PDF). Daher ist eine Folie, über die der Mauszeiger bewegt wird, sicherlich ein Indikator dafür, dass der Benutzer daran interessiert sein könnte, sie zu lesen, und das Karussell sollte pausieren.

Ein noch wichtigerer Grund, die automatische Drehung anzuhalten, wenn der Benutzer mit der Maus über eine Folie schwebt, besteht darin, zu verhindern, dass sich das Karussell zur nächsten Folie dreht, wenn der Benutzer klickt, um die gewünschte zu öffnen. Während Usability-Tests haben wir häufig beobachtet, dass Probanden versuchten, auf eine Folie zu klicken, nur dass sich das Karussell einige Millisekunden vor dem Klick automatisch drehte, wodurch sie auf einer völlig anderen Seite landeten.

Wenn der Benutzer bemerkt, dass er auf der falschen Seite gelandet ist, findet er es normalerweise „ein wenig nervig“, was ihn dazu zwingt, zurück zur Startseite zu gehen und die Folie zu finden, die er öffnen wollte, und erneut zu klicken. Wir haben jedoch auch Fälle gesehen, in denen eine Person nicht bemerkte, was passiert war, und anfing, die unbeabsichtigte Zielseite zu durchsuchen, wobei sie offensichtlich von äußerst geringer Relevanz war.

Das Anhalten der automatischen Drehung beim Schweben ist daher von entscheidender Bedeutung, um zu vermeiden, dass Benutzer auf Umwege geschickt oder möglicherweise sogar irregeführt werden. Leider haben wir bei unserem Homepage-Benchmarking festgestellt, dass 42 % der Desktop-E-Commerce-Websites mit einem Homepage-Karussell derzeit die automatische Drehung nicht anhalten, wenn der Benutzer mit der Maus darüber fährt.

Die automatische Drehung kann fortgesetzt werden, sobald die Maus des Benutzers die Folie verlässt (dh nicht länger über dem Karussell schwebt), vorausgesetzt, dass der Benutzer nicht anderweitig mit dem Karussell interagiert hat.

Die automatische Drehung sollte nach jeder aktiven Benutzerinteraktion dauerhaft anhalten

Wenn der Benutzer mit dem Karussell interagiert hat, ohne darüber zu schweben (z. B. durch aktives Wechseln einer Folie mit den Steuerelementen des Karussells), sollte die automatische Drehung dauerhaft beendet werden – auch wenn der Benutzer nicht mit der Maus darüber fährt.

Wenn ein Benutzer eine Folie aktiv ändert, indem er auf die nächste oder vorherige Schaltfläche oder den Folienindikator des Karussells klickt, ist die Auswahl wahrscheinlich beabsichtigt und sollte nicht geändert werden, wenn der Benutzer beschließt, andere Teile der Homepage zu überprüfen, bevor er (möglicherweise) zurückkehrt zu ihrer ausgewählten Folie.

Ein Klick unterscheidet sich grundlegend von einem Hover, der bestenfalls zur Messung des Benutzerfokus verwendet werden kann. Ein Klick ist eine aktive Benutzeranfrage und ein starker Indikator für Interesse und Absicht. Stoppen Sie daher die automatische Drehung dauerhaft, sobald der Benutzer aktiv mit dem Karussell interagiert, da er das Karussell möglicherweise absichtlich auf eine bestimmte Folie eingestellt hat.

3. Karussellsteuerungen müssen zwei Funktionen erfüllen

Klare Steuerelemente helfen Benutzern, den Inhalt eines Karussells zu kontextualisieren und die Kontrolle zu behalten. Während des Tests haben wir gesehen, dass Schieberegler zwei Funktionen erfüllen müssen: die aktuelle Folie im Satz anzeigen und Benutzern ermöglichen, hin und her zu navigieren. Eine überraschend große Anzahl von Slider-Designs erfüllt nur eines davon.

Es wurde beobachtet, dass die Anzeige der aktuellen Folie im Satz mehreren Zwecken dient:

• Es weist darauf hin, dass es neben der aktuellen noch weitere Folien gibt, was dazu beiträgt, zu vermitteln, dass es sich um ein Karussell mit mehr Inhalt handelt. Dies unterstützt die Erkundung nachfolgender Folien durch den Benutzer.
• Er gibt an, wie viele Slider das Karussell enthält. Wir haben festgestellt, dass Benutzer eher ein ganzes Karussell durchsehen, wenn ihnen im Voraus mitgeteilt wird, wie viele Inhalte vorhanden sind.
• Es zeigt an, dass das Karussell die letzte Rutsche erreicht hat und zum Anfang zurückkehrt.

Die herkömmliche Art, Folien anzuzeigen, ist eine Reihe von Punkten. Ein Wort der Vorsicht bezüglich des Designs und der Platzierung der Punkte: Wenn Sie kleine Punkte über ein großes, farbenfrohes Bild legen, führt dies normalerweise zu Problemen bei der Auffindbarkeit. Das Platzieren der Punkte außerhalb der Bildfolien ist der einfachste Weg, um Kontrastprobleme zu vermeiden.

Die zweite Komponente der Schieberegler ermöglicht es Benutzern, zwischen Folien hin und her zu wechseln. Das herkömmliche Design besteht aus einfachen Pfeilen. Wir haben jedoch beobachtet, dass Pfeilsteuerelemente von Benutzern übersehen werden, weil sie zu klein sind und keinen ausreichenden Kontrast bieten, wenn sie über ein farbiges Bild gelegt werden. Stellen Sie daher sicher, dass die nächsten und vorherigen Steuerelemente eine anständige Größe haben und dass der Kontrast scharf genug ist.

Wenn Sie mit Pfeilen experimentieren möchten, ziehen Sie ein Design in Betracht, das ihre Funktion verdeutlicht, indem Sie einen Ausschnitt der folgenden Folie zeigen, wie unten bei Amazon zu sehen ist.

Eine gute Möglichkeit, den Kontrast sicherzustellen, besteht darin, die Helligkeit des Bildbereichs zu erkennen, in dem die Steuerelemente erscheinen sollen, und dann die Farben der Steuerelemente entsprechend zu ändern. Kenneth Cachia von Google hat für genau diesen Zweck sogar ein kostenloses Skript namens BackgroundCheck erstellt. (Aber kopieren Sie nicht den Rest seines Karussells, da dies gegen mehrere unserer anderen 10 Anforderungen verstößt.)

Während das herkömmliche Entwurfsmuster für Karussellsteuerungen eine Reihe von Punkten ist, um die aktuelle Folie in dem Satz anzuzeigen, und Pfeile zum Vor- und Zurückbewegen, erreichen andere Entwürfe die gleichen Ziele. Ein hervorzuhebendes Design ist das „Inhaltsverzeichnis“, das in Amazons Karussell unten zu sehen ist.

Das Inhaltsverzeichnis ist ein besonders interessantes Muster, da es zwei der größten Schwächen herkömmlicher Punkte und Pfeile anspricht. Erstens kombiniert es die Anzeige des aktuellen Schiebers und des manuellen Schiebereglers in einer einzigen UI-Komponente. Zweitens bietet es Informationen, indem es den Benutzern einen Ausschnitt dessen zeigt, was als nächstes kommt, und es den Benutzern so ermöglicht, auf sinnvolle Weise zwischen den Folien zu springen. Luke Wroblewski teilt mit, dass Amazon festgestellt hat, dass dieses Muster gut funktioniert.

4. Auf Touch-Geräten ist alles anders

Während unserer jahrelangen Studie zur Benutzerfreundlichkeit mobiler E-Commerce-Websites haben wir festgestellt, dass Homepage-Karussells auf Touch-Geräten ganz andere Anforderungen stellen als auf Desktop-Geräten – so unterschiedlich, dass die gesamte Interaktionslogik, die für Desktop-Geräte (in Abschnitt 2 oben) beschrieben wurde ) ist auf Mobilgeräten ungültig. Außerdem gelten neue Anforderungen. Auf Touch-Geräten sind uns insbesondere die folgenden drei Implementierungsdetails wichtig:

• Das Fehlen des Schwebens macht die Verwendung der Autorotation ungültig.
• Wischgesten immer unterstützen.
• Optimieren Sie das Artwork des Karussells für mobile Bildschirme.

Das Fehlen des Schwebeflugs macht die Verwendung der automatischen Drehung ungültig (31 % verstehen es falsch)

Erstens ist das automatische Drehen von Folien nur dann eine gute Idee, wenn das Gerät des Benutzers den Schwebezustand unterstützt. Dies ist von entscheidender Bedeutung, da wir anhand des Schwebezustands auf das potenzielle Interesse eines Benutzers an einer bestimmten Folie schließen können.

Wir können den Schwebezustand als Hinweis darauf verwenden, dass der Benutzer am Inhalt einer Folie interessiert ist und die Folie nach dem Lesen des Textes möglicherweise öffnen möchte. Daher sollte die automatische Drehung vorübergehend angehalten werden, damit der Benutzer den Text zu Ende lesen und vermeiden kann, versehentlich auf die falsche Folie zu klicken.

In der Praxis bedeutet dies, dass die automatische Rotation für mobile Websites oder Touch-Geräte nicht geeignet ist, einfach weil es keinen Hover-Zustand gibt, um die kritische Rotationspause auszulösen. Ohne eine Möglichkeit, den Fokus des Benutzers auf die Seite abzuleiten, ist es unmöglich zu wissen, ob der Benutzer eine bestimmte Folie liest oder im Begriff ist, auf die aktuelle Folie zu klicken. Die automatische Rotation könnte einen Folienwechsel auslösen, nur Millisekunden bevor der Benutzer auf das Karussell klickt, was dazu führt, dass er die falsche Seite öffnet – wie mehrfach in unserer mobilen Usability-Studie beobachtet.

Der von uns durchgeführte Usability-Benchmark für den mobilen E-Commerce ergab, dass 56 % der mobilen E-Commerce-Websites ein Homepage-Karussell haben, 31 % der mobilen Websites ein Karussell mit automatischer Drehung haben und 25 % ein manuelles Startseiten-Karussell haben. Mit anderen Worten, fast die Hälfte der mobilen Websites mit einem Karussell haben den Anfang einer akzeptablen Implementierung, da ihre mobilen Karussells nicht automatisch rotieren.

Wischgesten immer unterstützen (12 % nicht)

Zweitens, unterstützen Sie Tastenberührungsgesten – insbesondere das Wischen, da Benutzer erwarten, dass „Galerien“ auf Touch-Geräten so navigiert werden. Dies bedeutet nicht, dass Sie keine traditionellen Karussell-Schnittstellensteuerelemente wie Schaltflächen „Weiter“ und „Zurück“ und Folienindikatoren implementieren sollten. Wir haben jedoch festgestellt, dass Karussellsteuerungen zusätzlich zur Unterstützung von Wischgesten bereitgestellt werden sollten. Unser mobiler E-Commerce-Benchmark hat ergeben, dass 12 % der mobilen Websites Wischgesten für ihre Bildergalerien im Allgemeinen nicht unterstützen (obwohl die Konformität höher ist als bei Bildzoom-Gesten auf Produktseiten, die 40 % nicht vollständig unterstützen).

Randnotiz: Verlassen Sie sich auch auf dem Desktop nicht ausschließlich auf Wischgesten, denn diese sind nicht offensichtlich. Desktop-Websites benötigen ebenfalls anklickbare Karussell-Steuerelemente.

Grafik für Mobilgeräte optimieren

Eine Sache, die wir bei der Überprüfung mobiler Websites mit einem Homepage-Karussell häufig beobachtet haben, ist, dass Grafiken von der Desktop-Website wiederverwendet werden. Dies ist kein Problem, solange man sicherstellt, dass jeder Text in den Folien lesbar bleibt, wenn er auf einen winzigen mobilen Bildschirm herunterskaliert wird, der im Hochformat gehalten wird. Beim Benchmarking und Auditieren mobiler Websites (insbesondere responsiver Websites), sogar der mobilen Websites von Unternehmen jenseits der 100-Millionen-Dollar-Online-Umsatzmarke, sehen wir gelegentlich, dass für den Desktop erstellte Grafiken einfach verkleinert und auf Mobilgeräten wiederverwendet werden.

Schließlich scheinen mobile Benutzer weniger Geduld mit langsam ladenden Karussells zu haben. Dies liegt wahrscheinlich daran, dass sie normalerweise nichts anderes als das Karussell auf ihrem Bildschirm sehen können, im Gegensatz zum Desktop, wo der Benutzer normalerweise Navigationsmenüs und andere Inhalte scannen kann, während er 1 bis 5 Sekunden darauf wartet, dass der Inhalt des Karussells geladen wird. Stellen Sie daher neben der Gewährleistung der Lesbarkeit sicher, dass das Gewicht der Folienbilder für die Bandbreite eines Mobilgeräts optimiert ist.

Die 10 Karussellanforderungen

Über die Qualität und Relevanz des Inhalts hinaus müssten das Design und die Logik eines Homepage-Karussells alle 10 der folgenden Anforderungen erfüllen, um ernsthafte Usability-Probleme zu vermeiden:

1. Alle Plattformen: Ordnen Sie die Folien sorgfältig an, da die erste Folie ein Vielfaches der Belichtung als nachfolgende Folien erhält.
2. Alle Plattformen: Das Karussell sollte niemals die einzige Möglichkeit sein, auf die Funktionen und Inhalte einer Website zuzugreifen.
3. Desktop: Verwenden Sie die automatische Drehung nur, wenn die Ablenkung der Aufmerksamkeit von anderen Homepage-Elementen durch die animierte Grafik akzeptabel ist.
4. Desktop: Drehen Sie Folien in moderatem Tempo – 5 bis 7 Sekunden reichen normalerweise für eine Folie mit nur einer Überschrift aus. Wenn die Menge der Textinformationen zwischen den Folien unterschiedlich ist, wird normalerweise eine eindeutige Rotationszeit für jede Folie gefordert (ein Detail, das fast nie eingehalten wird).
5. Desktop: Autorotation beim Hover anhalten, um zu vermeiden, dass eine Folie geändert wird, die der Benutzer wahrscheinlich gerade liest oder anklicken wird.
6. Desktop: Beenden Sie die automatische Drehung dauerhaft, nachdem der Benutzer auf die Bedienelemente der Benutzeroberfläche des Karussells geklickt hat.
7. Alle Plattformen: Zeigen Sie immer die aktuelle Folie im Set an und ermöglichen Sie Benutzern, vor und zurück zu navigieren. Herkömmlicherweise bedeutet dies, Punkte und Pfeile zu verwenden, die groß genug sind und einen Kontrast zum darunter liegenden Bild bilden. Zumindest auf dem Desktop kann dies auf andere Weise erreicht werden, beispielsweise durch die Verwendung des „Inhaltsverzeichnis“-Designs.
8. Touch-Geräte: Aufgrund des Fehlens eines Hover-Zustands (und damit einer Möglichkeit, die automatische Drehung zu pausieren), führen Sie niemals eine automatische Drehung auf mobilen Websites oder für Touch-Geräte durch.
9. Touch-Geräte: Unterstützung von Wischgesten zusätzlich zu allen anderen UI-Steuerelementen.
10. Mobilgeräte: Stellen Sie sicher, dass der Text in Folien noch lesbar ist, wenn Sie Bildmaterial vom Desktop aus verkleinern.

Wir können jetzt anhand dieser langen Liste von Fallstricken sehen, dass die meisten Homepage-Karussells schlecht funktionieren, einfach weil sie unzureichend implementiert sind. Beispielsweise halten 42 % der sich automatisch drehenden Desktop-Karussells beim Hover nicht an. Wenn wir außerdem das überzeugendste Beispiel aus „Should I Use A Carousel?“ betrachten, das von der Nielsen Norman Group ausgeliehen wurde, verstößt das getestete Karussell (mindestens) gegen zwei der wichtigsten Regeln: Es ist die einzige Möglichkeit, auf diesen Inhalt zuzugreifen (verletzende Regel 2), und die automatische Drehung wird beim Hover nicht angehalten (Regel 5) – außerdem wird das Karussell über der Hauptnavigation und dem Header platziert. (In einem nachfolgenden Artikel bietet die Nielsen Norman Group eine differenziertere Perspektive auf Karussells.)

Wenn Ihnen alle 10 Anforderungen zu viel Arbeit machen oder die Investition einfach nicht wert wäre, dann würden wir empfehlen, was die meisten anderen raten: Verwenden Sie überhaupt kein Karussell. Verlassen Sie sich stattdessen auf die unten dargestellte Alternative.

Eine Alternative zu Karussells

Während unserer Usability-Tests haben wir festgestellt, dass eine allgemein gut funktionierende Alternative zu Homepage-Karussells darin besteht, einfach statische „Folien“ als separate Abschnitte auf der Homepage anzuzeigen.

Die Wiederverwendung von Folien als statische Inhaltsabschnitte, die über die Homepage verteilt sind (je nach Wichtigkeit), hat eine Reihe von Vorteilen:

• Es beseitigt die automatische Rotation und die Karussellsteuerung zum Wechseln von Folien, wodurch es sich besonders gut für mobile Websites eignet.
• Es passt sehr gut dazu, wie Benutzer mit Homepages interagieren. Wir haben während des Tests festgestellt, dass 70 % der mobilen Benutzer die Homepage zunächst scrollen und scannen, um herauszufinden, auf welcher Art von Website sie gelandet sind. Das Bewerben einer Handvoll Schlüsselpfade, jeder mit maßgeschneiderten Bildern, sorgt für eine viel besser scanbare Homepage als ein Karussell-Schieberegler (entweder manuell oder automatisch gedreht).
• Es ist deutlich günstiger zu implementieren als ein Karussell, das alle 10 Anforderungen erfüllt. Zugegeben, je nach Organisation kann sich die Aktualisierung des Inhalts der Homepage als teurer erweisen als der Austausch einer Karussellfolie.
• Die Organisation wird die Notwendigkeit einer strengen Kuration von Inhalten viel eher erkennen (im Gegensatz dazu, viele Inhalte in ein Karussell zu werfen, nur weil es Platz dafür bietet).