Wann sind Akkordeon-Effekte auf Websites sinnvoll?

Immer häufiger findet man im Web sog. Akkordeon-Effekte: Einige Inhalte sind zunächst per JavaScript ausgeblendet und werden erst durch einen Klick auf einen Link eingeblendet. Akkordeon-Effekte sind an vielen Stellen nützlich und sinnvoll. Ihre Verwendung birgt jedoch auch einige Gefahren, die in diesem Artikel näher vorgestellt werden.

Schlanke und übersichtliche Seiten durch ausgeblendete Inhalte

Zunächst einmal sind Akkordeon-Effekte eine tolle Möglichkeit, viel Inhalt auf wenig Raum darzustellen. Es geht dabei um die effektive Nutzung des sog. Screen Real Estate. Akkordeon-Effekte eignen sich bestens, um auf einer Seite detaillierte Inhalte zu unterschiedlichen Themen abzubilden. Häufig haben Informationen für sich genommen einen zu geringen Umfang, um eine eigene Seite zu füllen. Würde man die Informationen jedoch alle auf einer Seite darstellen, wäre die Seite viel zu lang und unübersichtlich. Genau für diesen Anwendungsfall sind Akkordeon-Effekte wie gemacht.

Die vielen voneinander unabhängigen Detailinformationen werden einfach by default ausgeblendet und über ein Akkordeon verfügbar gemacht. Die Seite bleibt so schlank und übersichtlich. Eine praktische Lösung, wie einige von //SEIBERT/MEDIA umgesetzte Beispiele zeigen:

Abb. 13: Akkordeon-Effekte auf den Websites i-wie-ida.de, metafinanz.de und matador-ofen.de

Haben die Akkordeon-Inhalte den richtigen Umfang?

Allerdings muss man sich als Konzeptioner oder Designer immer die Frage stellen, ob eine Seite wirklich zu unübersichtlich wird, wenn alle Inhalte direkt angezeigt werden. Denn nur, wenn das der Fall ist, sollte man Akkordeon-Effekte zum Einsatz bringen. Wenn sich die Inhalte ohne größere Probleme by default vollständig darstellen lassen, sollte man das auch tun.

Akkordeon-Effekte sind auch dann keine gute Wahl, wenn man Inhalte ausblenden will, die für sich genommen so umfangreich sind, dass sie problemlos eine eigene Seite füllen würden. In diesem Fall sollte man eigene Seiten für diese Inhalte anlegen und sie nicht im Akkordeon verstecken.

Nachteile von Akkordeon-Effekten

So praktisch und sinnvoll Akkordeon-Effekte häufig sein mögen, so sind auch einige grundsätzliche Nachteile mit ihnen verbunden. Vier Probleme wollen wir besonders hervorheben.

Nutzeraktivität ist erforderlich
Ein Web-Akkordeon erfordert die Aktivität des Nutzers: Zunächst sind die Inhalte ausgeblendet und müssen vom User aktiv eingeblendet werden. Das birgt die Gefahr, dass die Inhalte verborgen bleiben, weil der Nutzer sie aus irgendwelchen Gründen nicht aufruft: Vielleicht versteht er das Prinzip nicht, vielleicht versteht er den spezifischen Link zum Einblenden nicht, vielleicht ist er schlicht zu bequem zum Klicken, vielleicht übt der Teaser auch keinen ausreichenden Klickreiz aus.

Geringe Keyword-Dichte auf Seiten
Zweitens werden Seiten durch schlechte Akkordeon-Effekte unspezifisch, weil sie sehr viele Inhalte umfassen. Das kann sich negativ auf das Ranking in Suchmaschinen auswirken, weil die Seiten eine geringe Keyword-Dichte aufweisen und von Google unter Umständen nicht als spezifische Quellen zu einem bestimmten Thema eingestuft werden.

Suchbegriff und Seiteninhalt scheinen nicht deckungsgleich
Drittens besteht ein weiteres SEO-Problem darin, dass die per JavaScript ausgeblendeten Inhalte zwar von Suchmaschinen indiziert und oft auch in Form von Kurztexten auf den Ergebnisseiten angezeigt werden. Wenn der Nutzer den Treffer aber anklickt und auf die Zielseite gelangt, ist der gesuchte Begriff für ihn nicht sichtbar. Auch eine seiteninterne Suche nach dem Begriff mit der Tastenkombination Strg+F führt zu keinem Ergebnis. Das kann zu Nutzungsabbrüchen führen, weil die User glauben, auf der falschen Seite gelandet zu sein.

Deaktiviertes JavaScript öffnet gesamtes Akkordeon
Das vierte Problem ist technischer Natur: Wie angesprochen wird für Akkordeon-Effekte in der Regel JavaScript verwendet. Allerdings haben einige User JavaScript deaktiviert. Nun sind die Inhalte ja eigentlich sichtbar und werden lediglich per JavaScript ausgeblendet. Hat ein Nutzer dieses aber deaktiviert, wird direkt der gesamte Inhalt angezeigt - das Akkordeon ist also vollständig geöffnet. In den meisten Fällen sieht das nicht besonders hübsch aus und kann den User verwirren - nicht umsonst hat man sich ja für diesen Effekt entschieden.

Allerdings betrifft dies nur eine relativ kleine Gruppe von Nutzern (in den meisten Fällen deutlich weniger als 10%). Hier empfiehlt es sich jedoch, einen Blick in die Analytics-Daten seiner Seite zu werfen. Von den Usern unseres Blogs haben bspw. 16% JavaScript deaktiviert, Akkordeon-Effekte hätten hier also für eine signifikante Zahl an Nutzern negative Auswirkungen.

Fazit

Akkordeon-Effekte sind moderne und in vielen Fällen sehr gut geeignete Darstellungsformen. Man sollte es jedoch nicht übertreiben und sie wirklich nur einsetzen, wenn es sinnvoll ist. Hierfür können wir zwei Faustregeln formulieren:

  • Sind die per Akkordeon ausgeblendeten Inhalte so umfangreich, dass sie eine eigene Seite rechtfertigen, sollte man sie auch auf eine eigene Seite stellen.
  • Wenn die per Akkordeon ausgeblendeten Inhalte in ihrer Gesamtheit so überschaubar sind, dass sie die Seite nicht „ungenießbar“ machen, sollte man sie direkt auf dieser Seite anzeigen.

Wenn diese zwei Regeln befolgt werden, sind Akkordeon-Effekte in den allermeisten Fällen zielführend. Der angesprochenen Nachteile sollte man sich dabei allerdings bewusst sein. Für ein gutes Design und eine gute Usability muss man manchmal kleine Einschränkungen auf anderen Ebenen in Kauf nehmen.

Weiterführende Informationen

Web-Design-Trends: Mit intuitiver Navigation und informativen Mouseover-Effekten schnell ans Ziel
Informationsarchitekturen: Fünf Probleme durch schlechte Navigation
Reihenfolge-Effekte: Die Link-Position beeinflusst das Klickverhalten


Mehr über die Creative-Commons-Lizenz erfahren