Das Karussell – Rotation für die Website

Karussell Carousel Ajax

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.

Karussell iPhone

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.

Karussell Carousel

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:

37 Kommentare zu “Das Karussell – Rotation für die Website

  1. Also – ich will Apple nicht in den Himmel loben, die haben eh schon nen leichten Überflug, aber der Vergleich der hier gezeigten Webkarussels mit Apples Coverflow hinkt doch sehr.

    Ich meine, Coverflow hat einige Eigenschaften vom Look&Feel , die man mit AJAX nicht so ohne weiteres hinkriegt:
    – Die Cover (oder andere Elemente in Leopard) sind 3D-gedreht und nur das jeweils aktuelle Element ist parallel zur Bildschirmebene.
    – Die Bedienung erfolgt nicht durch zwei dicke Pfeile links und rechts, sondern durch direktes Draufklicken, Wegschieben und Loslassen (beim iPod Touch und iPhone) oder durch Verschieben einer Scrollbar unter dem Coverflow (iTunes oder Leopard)

    Wenn man das vom Handling-Erlebnis jetzt mit den meisten Webkarussels vergleicht, kommt mir es vor wie der Vergleich eines leichten Sportrennrades mit einem gammeligen Hollandrad ohne Gangschaltung. Das eine flutscht und macht Spaß, das andere ist träge und langweilig.

    Abgesehen davon nehme ich an, dass vieles vom iPhone-Bedienkonzept in Zukunft im Web auftauchen wird – selbst der größte DAU kommt mit dem iPhone schnell zurecht, weil es einfach intuitiv ist und das Bedienkonzept (Anpacken, Wegschieben und Loslassen) größtenteils konsequent umgesetzt ist. Da sehe ich große Chancen für Flash in Zukunft…

    Abgesehen davon ist das Grundprinzip schon wesentlich älter – ich kann mich erinnern, dass der Kannengießer-Clan auf http://www.flashstar.de schon vor 2003 entsprechende Flash-Experimente online hatten.

  2. noch ein Nachtrag: habe gestern folgendes entdeckt:
    Da gibts ne Menge Leute, die sich an dem originalen CoverFlow orientiert haben und das ganz in Flash umgesetzt haben – z.T. auch mit veröffentlichten Quell-Dateien.

    Das große Aber: Leider stößt Flash hier deutlich an seine Performance-Grenzen – so fluffig wie auf dem iPhone läuft leider nicht eine einzige Anwendung. Aber trotzdem Hut ab vor den Flash-Codern!

  3. @Bjoern: mit “funktionieren” meinte ich, dass die Seite im Sinne einer HTML-Webseite benutzbar bleibt, d.h. alle Bilder auch mit deaktiviertem JavaScript angezeigt werden etc.

  4. Eigenwerbung? Ich glaube hier ging es um alles andere als Flash. Das das mit Flash schon seit Version 1 (!) möglich ist, ist klar.

    Es gab schon ähnliches Jahre vor dem AJAX Buzz und der JavaScript Renaissance (war ja mal verteufelt) – wie schon erwähnt DHTML z.B. http://www.dynamicdrive.com/dynamicindex17/virtualpagination.htm – da würde keiner mehr irgendwie Aha sagen inzwischen. Und AJAX und der JS Boom ist beileibe keine Entdeckung von Apple. Die haben nur den frei rumschwirrenden Komponenten ein schönes Facelift gegeben und sich reichlich an den Bibliotheken “vergangen”.

    Auf den JS Trend hat inzwischen jeder aufgesattelt, man kann es – degradable und unobstrusiv eingesetzt – nur ohne Kenntnis der Materie als Barriere auffassen. Flash da ja sogar schon mehr, scließlich benötigt dieses inzwischen solides JavaScript um valide eingebettet zu werden. Da beißt sich die Katze…

Pingbacks