Wann sind Akkordeons auf einer Website sinnvoll?

Durch Akkordeons resp. Akkordeon-Effekte auf einer Website kann der Inhalt leichter strukturiert und übersichtlicher dargestellt werden. So wird ein User nicht vom vielen Text auf der Website erschlagen. Auf der anderen Seite sollten Akkordeons nicht zu häufig eingesetzt werden, da sie die Website gleichzeitig auch weniger nutzerfreundlich machen können. Wo sollten sie denn am besten eingesetzt werden und wo lässt man am besten die Finger von Akkordeons?

Was ist ein Akkordeon?

Der Name weist schon darauf hin, dass man etwas herauszieht, aufklappt. Ein Akkordeon (oder englisch: Accordion) ist eine Liste im Inhaltsbereich einer Website. Jeder Eintrag dieser Liste verfügt über einen Titel und eine Beschreibung. Der Inhalt, also die Beschreibung, wird durch den Klick auf den Titel eingeblendet. Die Beschreibungen anderer Einträge werden in der Regel versteckt. Manchmal können auch mehrere Einträge parallel geöffnet werden.

Wofür verwendet man Akkordeons?

Akkordeon-Effekte verwendet man vor allem, um Inhalte zu verschiedenen Themen auf einer Seite zu präsentieren, die alleine jedoch nicht gross genug sind, um eine eigene Seite zu füllen. Oftmals lösen wir FAQ-Sections einer Seite mit Akkordeons. Dies macht es für den User einfach, die Übertitel zu überfliegen, ohne durch die Antworten abgelenkt zu werden.

Vorteile von Akkordeon-Menüs

Ein grosser Vorteil von Akkordeon-Menüs ist, dass man Inhalte sehr platzsparend darstellen kann. Der Nutzer sieht nur einen Teil der Inhalte und wird durch den Rest nicht abgelenkt, hat also erhöhte Aufmerksamkeit. Man kann Inhalte gut strukturieren. Es funktioniert auch auf kleinen Bildschirmen (Mobile!) gut.

Nutzer haben die Kontrolle über den Inhalt und können selbst entscheiden, was sie lesen und was sie nicht lesen möchten, indem sie auf die für sie interessanten Titel resp. Fragen klicken. Dies gilt als eine nutzerfreundliche Gestaltung. Dadurch fühlen sich die Informationen weniger überwältigend an. Das klingt wunderbar, oder? Zumindest in der Theorie.

Da die anderen Einträge meist nicht ausgeklappt sind (collapse-Funktion), muss man weniger durch die Seite scrollen, was gerade auch für die Anwendung auf dem Mobile (Smartphone) sehr hilfreich ist. Zudem macht es eine Seite weniger überwältigend mit Inhalt. Durch die Überschriften weiss man auf einen kurzen Blick genau, worum es geht und welche Informationen enthalten sind. Die Informationen sind gut gegliedert.

Als Alternative zu Links auf der Seite sind Akkordeons gut geeignet. Wenn ein User auf einen Link klickt, erwartet er normalerweise, dass sich eine neue Seite öffnet. Passiert dies nicht (und wird es auch nicht angekündigt), dann kann ihn das ganz schön verwirren. Vor allem wenn es darum geht zu wissen, wo genau auf der Seite man sich nun befindet.

Sind Akkordeons also ideal für die Darstellung komplexer Inhalte geeignet? Es gibt leider auch Nachteile davon.

Nachteile

Interaktionskosten sind höher

Manchmal ist mehr halt einfach mehr. Eine lange Seite hat auch seinen Reiz, siehe «Gestaltungsregeln bei Werbemitteln und Websites». Durch ein Akkordeon kann sich eine Seite verkürzen. Ein User muss sich dann aber jeweils entscheiden, was ihn an der Seite genau interessiert und dies aktiv anklicken. Die Interaktionskosten (Anstrengung) werden dadurch gesteigert und die Menschen sind bekanntlich faul. Das Navigieren auf einer Website soll so unkompliziert wie möglich sein und so wenig Mühe wie möglich bereiten. Je mehr wir von einem User verlangen, desto weniger ist er bereit, noch mehr zu geben oder länger auf der Seite zu verweilen.

Es ist also umständlich, auf jede einzelne Überschrift zu klicken, nur um den gesamten Inhalt lesen zu können. Wenn es viele interessante Themen gibt, dann werden die benötigten Klicks auch mehr. In dieser Situation wäre das Scrollen auf der Seite deutlich einfacher und weniger umständlich. Eine Möglichkeit, dieses mühsame Klicken zu umgehen, ist, das Akkordeon so zu programmieren, dass die Einträge per Default bereits geöffnet sind.

Sieht man den Inhalt nicht auf den ersten Blick, dann muss der Titel so spannend und ansprechend gewählt werden, dass der User Lust bekommt, darauf zu klicken. Die Wahrscheinlichkeit, dass der Nutzer Informationen ignoriert oder dass diese untergehen, wird grösser.

Seite ausdrucken

Ein weiterer Nachteil ist die Möglichkeit, die Seite zu drucken. Ein Dokument oder eine Seite lassen sich sehr schwer ausdrucken, wenn es sich um ein Akkordeon handelt. Dies kann bedingen, dass man mehrere Teilstücke nacheinander ausdrucken muss. Für den Druck optimiert ist das definitiv nicht.

Liest ein User bis zum Ende?

Die Annahme, ein Nutzer liest nicht bis zum Ende können wir dank Eye Tracking ziemlich genau überprüfen. Damit sieht man, was ein Nutzer tatsächlich anschaut und liest und wo er nur springt. Above the fold ist extrem wichtig, doch ein User schaut sich auch den Inhalt darunter an (oder liest ihn durch). Natürlich ist die Aufmerksamkeitsspanne begrenzt, doch wenn ein Thema interessiert, dann liest es ein Nutzer auch durch. Ein User liest also unter Umständen eine lange Website mit viel Inhalt genauer. Natürlich sollten wir die Inhalte mit Bedacht priorisieren, doch wenn die Seite gut geschrieben, spannend und relevant ist, dann wird ein User sie bis zum Schluss durchlesen.

Ein User vermeidet nicht viel Inhalt. Ein User kann grosse Informationsmengen bewältigen, wenn sie gut strukturiert sind. Gutes Schreiben ist wichtig, doch Schreiben fürs Web ist nochmal etwas Anderes als für ein offline-Werbemittel. Das Lesemuster (siehe auch: Gestaltungsregeln) unterscheidet sich bei einer Website. Es geht dabei aber nicht um die Flut an Informationen, sondern darum, dass wir im Web anders strukturieren sollten.

Wenn also ein User den meisten Inhalt sowieso sehen muss oder sollte, dann macht es Sinn, den Text nicht in einem Akkordeon darzustellen. Hier eignen sich ein Fliesstext oder Aufzählungen besser, solange der Text gut strukturiert ist.

Wann sollten wir ein Akkordeon denn nun verwenden?

Wenn es nicht genügend Inhalt gibt (nicht genügend Punkte und auch nicht genügend Text), dann rechtfertigt sich ein Akkordeon wohl sowieso nicht. Den gesamten Inhalt zu zeigen, macht die Seite dann zwar etwas länger, aber enthüllt so auch hilfreiche Informationen.

Wenn die Seiten extrem lange sind, dann kann man die Informationen möglicherweise auch über mehrere kürzere Seiten verteilen. Natürlich nur, wo es Sinn macht.

Akkordeons lassen sich gut einsetzen, wenn ein User nur wenige Inhalte oder Informationen auf der Seite benötigt und so vom Rest nicht abgelenkt wird. Oder wenn man nur wenig Platz für viel Informationen hat, wie zum Beispiel auf einem Mobile. Dabei ist es allerdings sehr wichtig, dass ein User auf den ersten Blick den wichtigsten Inhalt erkennt. Ein Akkordeon sollte also immer gut strukturiert sein.

Fazit zu Akkordeons

Akkordeons scheinen eine gute Lösung zu sein für eine Verkürzung von langen Inhalts-Seiten. In vielen Situationen jedoch, in denen der gesamte Inhalt der Seite für die Nutzer relevant ist, ist es eher von Vorteil, alle Inhalte auf einmal zu zeigen, auch wenn die Seiten dann länger werden. Auf dem Desktop ist es leichter, einfach die Seite durchzuscrollen, als zu entscheiden, auf welche Themen man klicken will. Unsere Studien zur Nutzerfreundlichkeit und unsere Eyetracking-Forschung zeigen, dass die Leute scrollen, wenn die Informationen wertvoll und richtig für das Scannen formatiert sind.  

Bevor du auf deiner Website ein Akkordeon einsetzt, setze dich erstmal mit den Vor- und Nachteilen davon auseinander und überlege dir den Einfluss auf die UX, um die Absprungrate niedrig zu halten.