medamind

Akkordeon - ein nicht unkritisches Pattern

Gerade beschäftige ich mich wieder einmal mit dem Pattern Accordion (zu deutsch natürlich Akkordeon), jenem netten, webzweinulligen AJAX Effekt. So gut mir das Ganze auch persönlich gefällt, so kritisch beurteile ich das Akkordeon als Effekt und Interaktionskonstrukt auch, insbesondere aber muss man zwingend die Grenzen des gelungenen Einsatzes von Akkordeons deutlich machen.

Ich habe mich ein wenig auf die Suche gemacht, was die Usability von Akkordeons angeht und bin immer noch unschlüssig, ob ich das Ganze aufgrund all dessen, was man falsch machen kann, nun für eine Errungenschaft halten soll oder nicht.

Auf den Gedanken, mich näher mit dem Akkordeon auseinanderzusetzen, brachte mit TYPOlight, das nämlich das Akkordeon als so genanntes Inhaltselement anbietet.  Die Frage war also: eignet sich das Akkordeon als Inhaltselement im parallelen Einsatz mit Text und Tabelle (in diesem Kontext ist es innerhalb von TYPOlight eingeordnet)? Ist das Akkordeon nicht grundsätzlich ein sehr vorsichtig zu genießendes interaktives (!) Pattern mit dann doch recht restriktiven Einsatzszenarien?

Wann eignet sich ein Akkordeon Effekt?

Klar, der Akkordeon Effekt, so toll er auch aussehen kann, ist nicht immer überall dort angebracht, wo man ihn gerne unterbringen würde, weil man ihn einfach schön findet und einfach “auch sowas haben möchte”. Man muss sich also durchaus überlegen, ob das Einsatzszenario wirklich geeignet ist. Vor einiger Zeit begegnete mir eine Implementierung, die den Hinweis “klicken Sie hier” trug. Da, so dachte ich mir, läuft definitiv etwas schief…

Der offensichtliche Vorteil von Akkordeons liegt klar auf der Hand: Akkordeons sind eine platzsparende Angelegenheit und eine gelungene Variante, rein kontextuelle Information anzuzeigen. Der große Nachteil wird leider erst klar, wenn die Implementierung falsch gewählt wird oder das Styling nicht stimmt, denn Akkordeons sind grundsätzlich nicht intuitiv verständlich: Akkordeons erfordern daher ein recht sorgsames Handling in Bezug auf Usability.

Allgemein eignen sich Akkordeons immer dann, wenn mehrere Optionen angeboten werden, die der Benutzer ansehen kann oder auch ansehen muss, wenn die Details dieser Optionen aber entweder umfangreich lang wären (und die Seite damit unübersichtlich machen würden) oder aber, wenn die Details nur im Kontext wirklich relevant sind, beispielsweise:

Menüs. Vielfach werden Akkordeons in Menüs eingesetzt und dort sind sie auch gut aufgehoben, denn dort werden sie verstanden. Sieht man sich ein aufklappbares Menü mal im Detail an, wird klar warum: das Akkordeon tut hier seinen Job und arbeitet wie man sich das vorstellen würde. Das Verhalten überrascht nicht, sondern passt sich  dem üblichen Verhalten von Menüs 1:1 an.

Ein bisschen abseits der Menüs bewegt sich übrigens das Beispiel Software. Wir kennen alle diese netten Klappeffekte für Bedienleisten rechts oder links.

FAQ. Eine interessante Implementierung. Schließlich sind Antworten nur interessant, wenn man eine Frage hat - und die Fragen werden einem übersichtlich dargestellt präsentiert. Was will man mehr?

Formulare. Auch hier finde ich Akkordeons prinzipiell gut aufgehoben. Stellen wir uns als gelungenes Beispiel einen Produktkonfigurator vor, - einen, bei dem man sich seine Hardware individuell zusammenstellen kann.

Eine recht umfassende Abhandlung zum Einsatzszenario von Akkordeons findet man beispielsweise auf .

Tja, und da sind außer dem Menü schon gleich ein paar “abers”, die man hinterherschicken muss, denn man kann viel, viel falsch machen… insbesondere aber im Kontext “Text”. Eigentlich bin ich ja schon fast geneigt zu sagen, nach diesen vier typischen Einsatzszenarien wäre sowieso Schluss, aber es gibt schließlich auch Variationen - also Akkordeon im Inhalt? Einfach so? Geht das? Und was gilt es zu beachten?

Akkordeon im Inhalt - einfach so? Beachtenswertes

TYPOlight führt das Akkordeon also als Inhaltselement und verleitet dazu, es falsch einzusetzen oder falsch zu gestalten und damit ratlose Benutzer zurückzulassen. Grundsätzlich geht es aber natürlich schon, wenn man mehrere Aspekte beachtet oder sich wenigstens ein paar Gedanken macht. Für mich gehören dazu:

Umfang und Inhalt

1. Akkordeons machen erst dann Sinn, wenn es mehr als zwei Fächer gibt
2. sie können hingegen unübersichtlich werden, wenn es zu viele Fächer gibt (ich denke aber nicht, dass hier die 5+/-2 Chunks Regel Beachtung finden muss)
3. inhaltlich bewegt sich das Akkordeon im Text eher auf der Ebene “falls es Sie interessieren sollte”
4. ein einzelnes Fach sollte keinen Roman beinhalten
5. Inhalte sollten annähernd gleich umfangreich sein, so dass sich aufgeklappte Akkordeons in ihrer Größe nicht zu sehr voneinander unterscheiden

Verhalten und Design

1. die Titel der  Akkordeonelemente (bei TYPOlight heißen sie übrigens Toggler) müssen bei Mouse Over wenigstens durch einen passenden Mauszeiger angezeigt werden (pointer: cursor;)
2. der Titel sollte präsent gelayoutet werden und so auch die volle Breite des gesamten Akkordeons kennzeichnen
3. geschlossene Fächer können durch ein Plussymbol, geöffnete durch ein Minussymbol markiert werden
4. man sollte sich überlegen, ob sich das erste Element bereits als geöffnet präsentiert
5. der Inhalt eines Fächers sollte in irgendeiner Form als zugehörig zum Titelelement, also dem gesamten Fächer gelayoutet werden und sich von anderen Titeln (zusammengeklappten Elementen) räumlich abheben
6. damit: einzelne Fächer sollten räumlich getrennt werden, egal ob zusammengeklappt oder nicht

Layoutwünsche

Ich habe hier mal rudimentär ein Akkordeon in TYPOlight umgesetzt. Leider kann ich mit Bordmitteln nicht abfangen, was ich gerne gemacht hätte: das geöffnete Togglerelement anders zu stylen (-) als die geschlossenen (+) - so wurde es eben dann ein Pfeil.

“Klicken Sie hier…” - es ist schade, wenn ein User Interface nur durch Erklärungen verstanden werden kann.  Da gerade das Akkordeon viel Fingerspitzengefühl erfordert, wenn es um Usability und Design geht, kann ich mir vorstellen, kommt es hier ganz gerne mal zu einer Gratwanderung zwischen Kundenwünschen, eigenem ästhetischem Empfinden und der Notwendigkeit, den Besuchern ein verständliches Konstrukt anzubieten.

Ein typisches Beispiel dafür, dass nicht alles, was möglich ist und nochdazu innovativ aussieht, auch wirklich eine gelungene Sache ist. Ein typisches Beispiel vor allem auch dafür, dass es gelegentlich vielleicht sogar sinnvoll ist, auf ein Feature zu verzichten, wenn nicht ganz klar ist, dass der Nutzer einen echten Benefit daraus ziehen kann.

Im Prinzip- und genau das muss man sich eigentlich klar machen, ist das Akkordeon auf abstrakter Ebene ein Navigationselement - in diesem Fall Navigation innerhalb kleiner Text-  oder Bildabschnitte. Wird es auch so behandelt, dann ist es okay.

Bildnachweis: das Menu Akkordeon oben stammt aus einer zum Buch Designing Web Interfaces, von Bill Scott und Theresa Neil, Copyright 2009 Bill Scott and Theresa Neil, ISBN 978-0-596-51625-3