Das Karussell – Rotation für die Website
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:
33 Kommentare zu 'Das Karussell – Rotation für die Website'
Konstruktive Kommentare bevorzugt
Nichts gegen kurze Einschätzungen. Floskeln wie "sieht aus, als wärs vom Praktikanten" oder "Griff ins Klo" sollten allerdings im Sinne einer sachlich geführten Diskussion vermieden werden. Auch beim Kommentieren darf jeder gerne kreativ werden. Das wird in diesem Blog sogar ausgezeichnet.Unterstützend können die folgenden HTML-Schnipsel verwendet werden.
fett <b>Text</b>
Link integrieren <a href="http://www.beispieldomain.de">Beispieltext</a>
Bild/Grafik einfügen <img src="http://www.beispieldomain.de/grafik.gif">
Themen
- Logos (469)
- Relaunch (250)
- Corporate Design (88)
- Design (112)
- Die gruseligsten Seiten im Netz (19)
- Netzbewegung (127)
- Trend & Wissen (36)
- Fotografie (19)
- Fundstücke (32)
- Motion Design (32)
- Design Tagebuch (109)
- Typographie (41)
- Über den Tellerrand (42)
- Verpackungsdesign (26)
- Werbung (66)
- Wettbewerbe & Veranstaltungen (66)
Partner/Empfehlungen
Reklamelinks
- Lizenzfreie Fotos
- Design Poster kaufen
- Digitaldruck Fabrik
- Tee und Kaffee Fachgeschäft Teebohne
- News
- T-Shirts bedrucken
- Babyaufkleber
In eigener Sache
Archiv
Design Tagebuch
- Beiträge: 1.396 Beiträge
- Stichwörter: 914
- Kommentare: 39.790
- RSS
- Kommentare RSS
- Seitenanfang
[...] 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:
http://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: http://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
Nicht barrierefrei – und tschüß.
Wilkommen im Web 2.0! Das “Karussell” mag auf dem iPod, zum durchstöbern der Alben, noch seine Daseinsberechtigung haben, ist aber auf Webseiten meiner Meinung nach völlig fehl am Platz.
Der echte nutzen an Usability entbehrt sich mir völlig. Im gezeigten Beispiel dauert das durchblättern viel zu lange – die gewünschte Information zu finden ist somit alles andere als Komfortabel. Auch das Karussell von Spiegel ist nicht mehr als eine schlecht funktionierende Spielerei. Wenn ich auf einen der hinteren Kandidaten klicken will, bewegt er/sie sich unter meinem Mauszeiger weg – empfand ich jetzt nicht als besonders Benutzerfreundlich.
Dass ein Karussell starke visuelle Reize erzeugt, möchte ich nicht bestreiten. Die Frage ist nur ob das gut ist. Wenn der Benutzer schon auf meiner Seite ist und Informationen sucht, brauche ich ihn doch auch nicht mehr mit reizerzeugenden blinkenden GIF-Bannern zu bombardieren?!
Auch das Argument, dass es platzsparend ist, zieht im Web – wo der Platz auf dem Monitor des Betrachters kostenlos ist – nicht wirklich. Die meisten Informationen sind immer noch verbogen und müssen mühselig durchgeklickt werden. Ich bin glücklich mit dem Scrollrad meiner Maus, warum sollte ich davon nicht Gebrauch machen dürfen? Wäre DAS nicht wirklich benutzerorientiert? Die ganze Karussell-Idee hat für mich den selben faden Beigeschmack, wie die Flashseiten, die meinen den Scrollbalken neu erfinden zu müssen.
Und Punkt 2 der “Vorzüge” ist…? AJAX? Wohoo, Buzzwords!
Ich denke auch : nicht barrierefrei……..und schon sind die Möglichkeiten wesentlich eingeschränkt
Ob es nun sinnvoll ist oder nicht, ist im Prinzip ziemlich einfach zu definieren: Sorgt ein Karussell für mehr “qualitative Klicks” bzw. Umsatz oder nicht? Beantwortet werden kann das nur durch die, die es einsetzen. Entweder durch direkte Aussagen oder indirekt dadurch, dass Karussells in 1/2/3/… Jahr(en) nicht mehr / immer noch eingesetzt werden. Und die beste Messlatte dafür sind sicherlich Websites, die in irgendeiner Weise mit ihrer Website Geld verdienen (E-Commerce / Ad).
Und das beantwortet dann auch, inwieweit Barrierefreiheit und Usability bei einem Karussell relevant sind. ;-)
Ich finde das ganze ja hübsch usw., aber ich denke nicht, dass es wirklich sinnvoll ist. Ich würde eher sagen, dass es durch die fehlende Barrierenfreiheit und dem ziemlich hohen Risiko, dass man das ganze sehr Nutzerunfreundlich umsetzt, ziemlich unsinnig ist ein Karussell in eine Website zu integrieren.
Durch die gute Optik, die man mit Flash erreichen kann, ist so ein Karussell sicher ein eye-catcher aber meiner Meinung nach, vermittelt es lediglich einen guten ersten Eindruck und wird danach von dem User (falls er wiederkommt oder sich länger auf der Seite aufhält) ignoriert und als unnützlich abgetan.
zählt das auch als karusell?
http://meinlcymbals.com/products
Wenn man da auf Vasen klickt, hat man auch ein “Karusell”… sogar ein selbstlaufendes.
http://www.galerie-hinrich-kroeger.de
Ein schöner Artikel und interessante Beiträge zum Thema (Web) Karussell!
Ich finde den Wunsch nach Barrierefreiheit auch sehr wichtig. Jedoch haben Fernsehanstalten ein großes Interesse daran ihre Inhalte so zu präsentieren, das sie das Thema “Bewegtbild” in irgend einer Form aufgreifen. Ich persönlich hätte bei einer Website für Hörbücher oder ähnliches größere Probleme wenn sie nicht Barrierefrei ist als bei Filmen.
Es ist hier eigentlich nicht das Thema aber als ich das Beispiel Arte gesehen habe konnte ich mir nicht verkneifen das zu kommentieren.
Die Idee der Darstellung der Sendungen in einem Karussel stammt eigentlich von einem anderen Team in dem ich beteiligt war. Wenn man sich meinen Entwurf der Website und die spätere Umsetzung von Arte an sieht, wird einem die ähnliche Art der Präsentation auffallen.
http://www.stylepatrol.com/display.php?Section=Online&Id=49
http://plus7.arte.tv/de/streaming-home/1697480.html
Ich finde Karussels eine schöne Möglichkeit, Websites um Zusatznutzen und optische Gimmicks zu erweitern. Barrierefreiheit ist dabei hauptsächlich eine Frage der intelligenten Umsetzung.
Ein Karussel lässt sich z.B. mit JavaScript durchaus barrierefrei lösen. Stichwort: “degradable JavaScript”. Da es darum geht, die volle Benutzbarkeit in reinem HTML bereit zu stellen, sollte in diesem Fall auf Ajax allerdings verzichtet werden.
Ein gute Demonstration für barrierefrei umgesetzte Karussels sind die statischen Beispiele des jCarousel-Scripts: http://sorgalla.com/jcarousel/
Einfach mal JavaScript deaktivieren und sehen, wie die Beispiele ohne den Karusseleffekt funktionieren! Ich denke, die volle Benutzbarkeit ist hier in jedem Fall gegeben und eine weitere Verbesserung der Barrierefreiheit lässt sich mit ein paar Änderungen in HTML und CSS leicht erreichen.
@david:
Klar kann man fast alles mit html/ajax/js nachbauen. Ist halt nur ne Frage ob man sich das ganze Thema Cross Browser so geben möchte und die Zeit hat so lange für die Entwicklung zu brauchen. Ich bin kein Flash Fanatiker aber in dem Fall von Arte finde ich eine Lösung in Flash angebrachter.
Klar, wenn ich nur ein paar Bildchen horizontal scrollen möchte wie bei gravis dann brauch ich dafür kein Flash. Da stimme ich dir zu!
PS: Was meinst Du mit: “Einfach mal JavaScript deaktivieren und sehen, wie die Beispiele ohne den Karusseleffekt funktionieren!”
Sie funktionieren ohne js doch gar nicht!
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.
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!
@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.
[...] Das Karussell – Rotation für die Website von Design Tagebuch [...]
[...] relauncht wurde. Der Stern berichtet ausführlich. Ein weiterer Auftritt, bei dem übrigens nun ein Webkarussell zum Einsatz kommt. Thema Logos erstellt von Schaffrinna am 02.02.2008 | [...]
Schaut mal hier, da ist das in Flash gelöst (Mitte der Seite):
http://www.ergobaby.eu/de/ergo_baby_products.html
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…
[...] großzügig angelegt, so dass Aktionen und Produktangebote prominent platziert werden können. Eine Karussell-Lösung im Footer und einen aufgeräumteren Header-Bereich, in dem auf den blauen Verlauf nun verzichtet [...]
[...] gespielt. Das nennt man dann Synergie. Die Unterschiede sind marginal. Eine rechts angeschlagene Karussell-Lösung stellt ebenso die globalen Themen in den Fokus wie das links angedockte [...]
[...] fährt auch der ADAC mit im Karussell. An verschiedenen Stellen werden Themen in einem Modul vorgehalten, die sich per Pfeil-Button vor- [...]
[...] ein weiteres Unterscheidungsmerkmal dar. Während Neckermann und auch Quelle auf modische Karussell-Module setzt, verzichtet Otto auf deren [...]
[...] 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 [...]
[...] der gleichzeitig die Funktion hat Image zu transportieren. “Im Fokus” ist eine Karussellösung, die man mittlerweile zwar von zahlreichen Nachrichtensites her kennt, die jedoch in dem Umfeld [...]