Effektive Karussells gestalten: Schaffen Sie ein fantasievolles Vergnügen und keine Geisterbahn

Karussells machen es möglich, dass mehrere Inhalte den gleichen begehrten Raum einnehmen.

by Kara Pernice (deutsche Übersetzung) – 14.09.2013

Karussells machen es möglich, dass mehrere Inhalte den gleichen begehrten Raum einnehmen. Das schlichtet interne Streitigkeiten im Unternehmen, aber bei vergrösserter oder verkleinerter Ansicht scrollen die Menschen oft am Karussell vorbei. Ein statisches Hauptmotiv oder die Integration von Inhalten in die Nutzeroberfläche könnten bessere Lösungen sein. Wenn aber das Karussell Hauptmotiv ist, helfen eine gute Navigation und gute Inhalte dabei, es effektiver zu machen.

Das universelle Karussell

Es gibt verschiedene Elemente der Nutzeroberfläche, die man als Karussell bezeichnen kann. Zum Beispiel ein Filmstreifen mit etlichen Bildern, durch die man sich klicken kann (wie auf der Dell-Website).

Oder eine animierte Tour, die mehrere Wegweiser darstellt (wie auf der Nest-Website).

Aber der am meisten verbreitete Typ ist das Karussell mit Funktionsbereichen (wie in diesem Artikel besprochen), das meistens die folgenden Züge aufweist:

Es erscheint oben auf der Startseite.
Es nimmt einen erheblichen Raum des Bereichs oberhalb der Bildschirmkante ein.
Es zeigt mehr als einen Inhalt an der gleichen Stelle (aber immer nur einen aufs Mal).
Es gibt einen Hinweis darauf (oder eine Navigation), dass es mehr als einen herausgestellten Inhalt oder Frame innerhalb des Karussells gibt.
Es enthält in jedem Frame Bilder und etwas Text.
Es gibt Informationen zur Aufgabe oder zur Marke des Unternehmens, herausgestellte Informationen oder zu
Werbeaktionen.

Grösster Nutzen des Karussells

Der grösste Nutzen eines Karussells ist, dass mehr als ein Inhalt den erstklassigen Platz auf der Startseite einnehmen kann. So können Streitigkeiten, wessen Inhalte nun am ehesten diesen Raum einnehmen dürfen, beigelegt werden. Ein weiterer Vorteil liegt darin, dass mehr Informationen im oberen Teil des sichtbaren Bereichs untergebracht werden können und somit mehr Menschen diese Informationen sehen können.

Grösster Nachteil des Karussells

Sie können sich nicht darauf verlassen, dass die Menschen die Informationen im Karussell auf der Website oder im Intranet auch sehen. Egal ob sie die Inhalte auf einem 30- oder 3-Zoll-Bildschirm betrachten, die Nutzer scrollen oft sofort an diesen grossen Bildern vorbei und verpassen alles, was sich dahinter verbirgt, oder zumindest alles, was in anderen Frames als dem ersten ist. Eye Tracking-Forschung und Internetstatistiken zeigen zwar, dass manche Karussells eine gewisse Aufmerksamkeit und Klicks erhalten. Aber meistens werden sie übersehen und mit ihnen die Inhalte, den sie transportieren.

Dazu kommt, dass Designer ein Karussell als Sammlung von Bildern betrachten, der Nutzer aber oft nur das eine Bild wahrnimmt, das als erstes zu sehen ist. Eine Sammlung von Bildern im Karussell kann zusammengenommen einen präzisen Eindruck davon vermitteln, was eine Organisation ausmacht. Sehen aber die Nutzer nur eines der Bilder, können sie ein falsches Bild vom Unternehmen bekommen. Das passiert oft, wenn ein Bild etwas Anstössiges darstellt oder auch nur etwas, das wenig mit dem Geschäft oder den Grundsätzen zu tun hat.

Kann ein Hauptmotiv zum Helden Ihrer Website werden? Ziehen Sie ein Hauptmotiv anstelle des Karussells in Betracht

Die Karussells von heute mit ihren vielen Bildern haben das statische Hauptmotiv verdrängt, das überall im Internet zu finden war. Aber manchmal passt die in die Jahre gekommene Nutzeroberfläche besser als der junge, energiegeladene Nachfolger. Ein Grund dafür ist die Einstellung der Designer. Zu wissen, dass es im Karussell mehrere Frames gibt, die einen Punkt deutlich machen oder die Aufmerksamkeit der Nutzer erregen können, kann die Designer in falscher Sicherheit wiegen. Sie gehen davon aus, dass die Leute alle Bilder ansehen, die das Karussell anbietet und wählen daher unter Umständen schwächere Bilder in der Hoffnung, dies durch Masse wieder wettzumachen. Wüssten die Designer aber, dass sie sich für ein einziges Bild entscheiden müssen, mit einer entsprechenden Stimmung dazu, würden sie sich wahrscheinlich für ein Bild entscheiden, das kraftvoll und demonstrativ ist. Die Nutzer würden sich dann auch auf ein Bild konzentrieren, anstatt ihre Aufmerksamkeit auf viele Bilder aufzuteilen. Ausserdem lenkt ein statisches Bildmotiv die Nutzer wahrscheinlich weniger ab als ein rotierendes Element und verbessert somit die Sichtbarkeit der globalen Navigation, die die Menschen verwenden können, um andere Bereiche der Website zu entdecken.
(Es ist übrigens immer eine gute Idee, wichtige Informationen, die im Hauptmotiv oder im Karussell vorkommen, auch anderswo auf der Nutzeroberfläche unterzubringen, so dass die Menschen, die mit der IA und anderen Seiten interagieren, auch eine Chance haben, diese Informationen zu sehen.) Der folgende Screenshot zeigt zum Beispiel die Homepage von BestBuy.com, wo die Designer ein Hauptmotiv verwenden, um den Werbetext zum Labor Day Savings Event zusammen mit den Daten der Aktion und einer starken, gelben «Shop Now»-Schaltfläche abzubilden.

Mehrere Dinge machen die Inhalte dieses Hauptmotivs effektiv, darunter folgende:

Die Bilder von Fernseher, Laptop und Kühlschrank sind deutlich erkennbar und zeigen die Vielfalt der Produkte im Angebot. Dieses Motiv fesselt die Aufmerksamkeit, ist kommunikativ und reich an Informationen.
Die Schriftart und die Farben passen zu denen, die in der globalen Navigation und im Titel verwendet werden, so dass das Motiv als Teil der Website wahrgenommen wird und nicht als nervige Werbung.

Darüber hinaus helfen diese Merkmale, die Marke Best Buy zu transportieren und die Produkte in den Vordergrund zu stellen, die jeden Tag verkauft werden.

Richtlinien für gutes Karusselldesign

Wenn Sie aber der Ansicht sind, dass das Karussell Ihr Hauptmotiv und Superheld ist, sollten Sie diese Richtlinien befolgen, um es gut zu machen.

1. Stellen Sie Ihr Karussell aus fünf oder weniger Frames zusammen, da es unwahrscheinlich ist, dass die Nutzer sich mit mehr als fünf beschäftigen. Bei einem mobilen Gerät kann es ermüdend sein, sich durch viele Frames zu wischen und es ist für die Nutzer schwierig zu erkennen, welche Themen sie schon angesehen haben, wenn es mehr als fünf sind. Die Beschränkung der Anzahl hilft auch beim Entdecken der Inhalte und auch dabei, sie später im Karussell wiederzufinden.
2. Verwenden Sie knackigen Text und Bilder, die mit den Grundsätzen der Organisation übereinstimmen. Es ist schwierig, kleinen Text zu lesen und kleine Bilder zu erkennen, vor allem auf mobilen Geräten. Und ein hoch aufgelöstes Bild in einen kleinen Bereich zu quetschen ist auch keine gute Idee. Je klarer und deutlicher Text und Bilder sind, desto wahrscheinlicher werden sich die Nutzer engagieren und mit den Aspekten auseinander setzen.

Das Corning Museum of Glass verwendet beeindruckende Bilder und relevanten Text, alles im Einklang mit der Arbeit des Museums.

3. Zeigen Sie, wie viele Frames vorhanden sind und wie weit der Nutzer vorangeschritten ist. Das vermittelt den Menschen ein Gefühl der Kontrolle.

2008 war Coldwell Baker einer der zehn Gewinner unseres jährlichen Intranet-Design-Wettbewerbs. Schon vor Jahren zeigte das Karusselldesign ihres Intranets die folgenden wichtigen Informationen an:

es gibt fünf Frames
der Inhalt jedes Frames ist grundlegend
es ist leicht zu erkennen, welcher Frame ausgewählt ist.

Delta macht den ausgewählten Punkt (am unteren Rand des Screenshots unten) grösser als die beiden anderen, aber der Grössenunterschied ist zu dezent, um wirklich hilfreich zu sein. (Für alle, die es nicht erkennen: der mittlere ist der ausgewählte Punkt und grösser.)

4. Verwenden Sie verständliche und gut erkennbare Icons und Links. In der Navigation sollten Sie darauf zielen, dass die Leute die Auswahl erkennen und sich daran erinnern, wenn sie den Inhalt schon im Hauptframe gesehen haben. Ein Nutzer kann nicht erraten, was hinter einer Zahl oder einem Punkt erscheinen wird, wenn dort geklickt wird, aber er kann sich daran erinnern, dass sich zum Beispiel ein grüner Hintergrund auf einen Artikel über die Umwelt bezieht. Punkte sind vor allem bei mobilen Geräten ungeeignet, da die Menschen diese oft einfach übersehen (und sie bei Android weniger zum Standard gehören als bei iOS).

5. Stellen Sie sicher, dass die Navigation innerhalb des Karussells auftaucht und nicht darunter oder durch die Bildschirmkante abgetrennt wird. Das vermeidet Probleme bei grossen und kleinen Displays.

IBM bietet ein einnehmendes Karussell mit klickbaren Bildschaltflächen innerhalb des Karussells. Leider sind die Buttons klein und es gibt keinen beschreibenden Text dazu.

Die Karussellsteuerung auf der Website von Shining Star Therapy ist abgeschnitten, wenn die Website auf dem iPhone betrachtet wird. Eine abgeschnittene Steuerung ist zwar besser als gar keine, aber es wäre natürlich besser, wenn man die ganze Steuerung sehen würde.

6. Wenn Sie einen Navigationsbutton für jeden Frame anbietet (statt Pfeilen, durch die man sich scrollen muss), stellen Sie sicher, dass jeder Button anders aussieht und den Frame repräsentiert.

Die Homepage von John Deere bietet Bilder mit Texten als Buttons, und sie erscheinen innerhalb des Karussells, was sehr hilfreich ist. (Ausserdem gibt es Pfeile, um das Karussell vor- und zurückzudrehen.) Allerdings ist der Text sehr klein und schwer zu lesen und die Bilder, die als Buttons fungieren, sind zu dicht für den kleinen Raum, für den sie vorgesehen sind.

7. Machen Sie die Links und Buttons gross genug zum Lesen und Anklicken. Buttons, die winzig sind, nah beieinander oder vor einem unruhigen Hintergrund stehen, sind nicht leicht zu sehen oder anzuklicken.

Auf der Roku-Website sind die Pfeile rechts und links des Karussells leicht zu sehen und anzuklicken, wenn sie in Frames mit hellem Hintergrund erscheinen, aber fast unsichtbar bei Frames mit unruhigerem Hintergrund.

Nach unten gescrollt…

Automatisches Vorschalten

Automatisches Weiterschalten der Frames eines Karussells leitet die Nutzer durch die Informationen. Aber es gibt einige Fälle, wo das automatische Vorschalten nicht zu empfehlen ist. Schalten Sie nicht automatisch weiter, wenn:

sie nicht sicher sind, dass Sie das Timing richtig treffen, so dass die meisten Menschen die Inhalte innerhalb der vorgesehenen Zeit lesen und verarbeiten können. Manchmal wechseln die Karussells zu schnell und die Nutzer können die Informationen nicht lesen, was frustrierend für sie und nicht gut für die Organisation ist, die versucht einen Punkt zu machen. Manchmal bewegt sich das Karussell auch zu langsam, und der Nutzer ist überrascht, wenn es sich dann doch weiterbewegt.
ihre Inhalte Anzeigen ähneln. Die Nutzer neigen dazu, bewegte Dinge zu ignorieren, wenn sie wie Werbung aussehen (wenn sie nicht gerade in Shopping-Laune sind). Unsere Eye Tracking-Forschung zeigt, dass bewegte Anzeigen von 27% der Nutzer angesehen werden.

Tipps zum automatischen Vorschalten

Auf mobilen Geräten nicht automatisch vorschalten, aus zwei Gründen: (1) es verlangsamt die Website und (2) da die Websites kurz sind, scrollen die Nutzer schnell; sie haben das Karussell schon weitergeschoben, wenn es weiterdreht und sehen den Wechsel gar nicht mehr.
Testen Sie das richtige Timing, oder schätzen Sie zumindest, wie lange der durchschnittliche Nutzer braucht, den Text zu lesen und die Bilder zu verarbeiten. Als Faustregel gehen wir von 3 Worten pro Sekunde aus.
Stoppen Sie nicht beim letzten Frame. Lassen Sie die Frames weiter durchlaufen (und zeigen Sie an, welcher Frame ausgewählt ist).

Tipps für statische (nicht automatisch weiterlaufende) Karussells

Stellen Sie sicher, dass die Nutzer, die sich für das Karussell interessieren, erkennen, dass es mehr als den aktuellen Frame gibt. Zeigen Sie klare visuelle Elemente, die deutlich machen, dass es mehr Inhalte gibt, wie zum Beispiel:

Navigationslinks und Icons (wie oben besprochen)
Abschneiden oder Ausdimmen des Bildes und Anzeigen eines Teils des nächsten Bildes.

Die Skyscanner-App für Windows 8 schneidet den Inhalts am rechten Bildrand ab, um anzuzeigen, dass noch mehr kommt.

Schlussfolgerung

Zusammenfassend sei gesagt: Wenn Sie ein Karussell in der Hoffnung verwenden, dass die Nutzer viele Inhalte sehen werden, sollten Sie wissen, dass einige Leute nur den ersten Frame oder auch gar keinen sehen werden. Stellen Sie sicher, dass wichtige Inhalte auch anderswo in der IA platziert sind und auf einer anderen Seite Ihrer Website. Vielleicht sollten Sie ein statisches Karussell oder ein Hauptbildmotiv verwenden statt eines rotierenden Karussells. Machen Sie die Buttons und Links jeder Karussellnavigation deutlich und gross genug, um sie lesen und anklicken zu können, und heben Sie die Buttons des ausgewählten Frames als solche hervor.