Hereinspaziert, hereinspaziert zur Vorstellung der Webkomponente des Jahres 2007. Steigen Sie ein und fahren Sie mit. Das muss man gesehen haben. Wir drehen heute noch eine Extrarunde auf dem Karussell.
Noch nie wurde diese Art der Rotation von Inhalten so oft gesichtet, wie im abgelaufenen Jahr. Apple hats mal wieder vorgemacht. Im iTunes-Store lassen sich die Cover der Alben schon eine ganze Weile lang per Links- und Rechtspfeil umblättern. Dieser Blättervorgang vollzieht sich so elegant und smart, dass man sich dabei erwischt zu klicken, obwohl einem die angewählte Musikrichtung gar nicht zusagt. Große Relaunchs, wie der des Time-Magazins, verstärkten den Schneeballeffekt und machten das kleine Tool immer öfter zur gern verwendeten Komponente in einem Webauftritt.
Was ist ein (Web)Karussell und was kann es?
Zusammenfassend lässt sich das Karussell auf den folgenden Nenner bringen. Ein Karussell ist eine Komponente, in der eine Liste mit Elementen (vorzugsweise Bilder) enthalten ist, die sowohl horizontal als auch vertikal dargestellt werden kann. Die Navigation erfolgt jeweils in beide Richtungen (links-rechts und oben-unten) und kann zudem mit und ohne einer Animation z.B. einem Blendeneffekt angelegt werden. Es gibt unterschiedliche Techniken darunter Ajax, Flash, JavaScript und DHTML.
Aufwendigere Versionen, wie die von Amazon oder Defacto, kommen zusätzlich in 3D-Anmutung und gerne auch mit Spiegeleffekt daher. Nichts, was man nicht auch schon vor Jahren in Flash-Anwendungen zu Gesicht bekommen hat, aber die Verbreitung solcher ergänzenden Tools ist aktuell auffällig. Dank iPhone kann man sich ein Karussell sogar in der Hosentasche stecken, denn auch das darauf installierte Betriebssystem verfügt über die smarte Blätterfunktion.
Die Vorzüge
Punkt 1:
Die Haptik ist einfach genial.
Punkt 2:
Was mit Flash und reinem JavaScript schon lange möglich ist, bekam dank Ajax (Asynchronous JavaScript and XML) und der leichten Implementierung einen richtigen Schub. Hier ein Beispiel eines Karussells, das per Ajax generiert wird.
Punkt 3:
Auf der Suche nach alternativen Möglichkeiten in die Tiefe einer Website einzusteigen, vereint die vorwiegend mit Bildern befüllte Webkomponente geradezu ideale Eigenschaften. Sie ist raumsparend, erzeugt starke visuelle Reize und die Bedienung ist nicht nur einfach, sie macht sogar Spaß. Einen smarteren benutzerorientierten Schnelleinstieg kann man sich kaum vorstellen.
Diese drei Faktoren verhalfen dem Karussell in kurzer Zeit zu einer enormen Beliebtheit. Bei der Recherche war ich teilweise überrascht, wo bereits überall die Bildrotation zum Einsatz kommt. Ob in der Mediathek des ZDFs, als Blätterfunktion bei MyVideo oder als Schnellauswahl bei Opel, die Vorzüge dieser Komponente wissen viele zu schätzen. Eines ist klar, auch in diesem Jahr wird sich das Karussell weiterdrehen und an immer neuen Stellen im Netz erscheinen. Die Herausforderung wird darin auf Seiten der Konzepter, Designer und Entwickler liegen, jeder neuen Anwendung eine eigene Note zu verpassen.
Ein wunderbares Beispiel dafür, dass ein Karussell auch mit aktuellen Themen bestückt werden kann, ist das Präsidentschaftskandidaten-Karussell von Spiegel Online anlässlich der bevorstehenden Wahlen in den USA.
Hier einige Beispiele der Karussell-Komponenten innerhalb Websites
Individuelle Horizontal-Lösungen
|
Navigation per Scrollbalken
“Pseudo 3D”
|
Weitere zahlreiche Beispiele sowie eine Dokumentation finden sich hier:
[…] diese Blätterfunktionen hat Achim Schaffrinna auf seinem Blog Design Tagebuch unter dem Titel Das Karussell – Rotation für die Website veröffentlicht. Er geht darin wunderbar auf die verschiedenen Spielarten dieser Zugangsart ein und […]
Ich weiß nicht, ob das noch als Karussel zählt, aber eigentlich ist das beschriebene Konzept hier nur etwas weitergedacht:
https://www.opdenhoevel.de/
Teilweise finde ich jedoch diese Karussels total unpraktisch, zum Beispiel bei buch.de, wirklich Bücher finden kann ich damit nicht.
Es passt zwar nicht immer auf jede Website und verbessert auch nicht unbedingt in jeder Hinsicht die Navigation – ein Hinkucker ist es jedoch auf jeden Fall.
Also ob man (mal wieder) Apple als “Vormacher” in diesem Zusammenhang bezeichnen muss… auf der Seite von Logitech z.B. kam dieses Karusell schon vor Jahren das erstemal zum Einsatz. Dort diente es zur Produktauswahl. Auch auf anderen Seiten habe ich das schon gesehen … noch bevor es bei iTunes auftauchte.
mein persönliches drama ist, das durch ajax dhtml verschwunden ist!
gibt aber schlimmeres im webauthor alltag :P
http://www.sqoops.de geht sogar einen Schritt weiter und baut die komplette Artikel-Navigation darauf auf (auch mal die Regler für Preis und Bewertung verschieben).
Das “Karussell” ist vom Usability Aspekt her eigentlich überhaupt nichts neues. Es ist nicht mehr als eine einfache horizontale Scrollfunktion (die man auch in HTML realisieren kann) plus nette Grafikspielerei die im 3D Look daherkommt. Einen konkreten Vorteil gegenüber der horizontalen Scrollfunktion hat das nicht.
Der einzige Grund warum man das gerade überall sieht ist der: “weil Apple das auch hat”.
Das gleiche gilt auch für den Spiegel-, den Glas- und den gebürsteten Metall-Effekt. An allen Ecken und Enden wird Apple kopiert und imitiert. Die ganze “Web2.0 Optik” ist zum großen Teil von Apple inspiriert.
Mir kommt es manchmal so vor, Apple ist ein Orientierungspunkt und Überzeugungsargument für unsichere Gestalter (und Kunden). Wenn man aussieht wie ein Apple Produkt kann man ja nix falsch machen. Apple-Design findet schließlich jeder gut.
Horizontal scrollen klebt. Und da diese Karussells zu oft an Stellen verwendet werden, wo man “normale” Navigationen besser benutzen könnte, habe ich inzwischen eine leichte Abneigung dagegen entwickelt…
Für mich immer noch eines der am schönsten umgesetzten bzw. animierten Karusells ist das auf Jumpman23.com: https://www.nike.com/jumpman23/
(Links oben “Air Jordans” auswählen und auf einen Schuh klicken.)
Also ich finde das Karussell eigentlich eine ganze nette Sache, wenn man damit dezent umgeht!
Das für mich am besten realisierte Karussel liegt für auf Perooz