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

Kompetenter und schneller User-Support für eure Atlassian-Tools zum monatlichen Festpreis Kompetenter und schneller User-Support für eure Atlassian-Tools zum monatlichen Festpreis Kompetenter und schneller User-Support für eure Atlassian-Tools zum monatlichen Festpreis Kompetenter und schneller User-Support für eure Atlassian-Tools zum monatlichen Festpreis
ACHTUNG!
Unsere Blogartikel sind echte Zeitdokumente und werden nicht aktualisiert. Es ist daher möglich, dass die Inhalte veraltet sind und nicht mehr dem neuesten Stand entsprechen. Dafür übernehmen wir keinerlei Gewähr.

2 thoughts on “Wann sind Akkordeon-Effekte auf Websites sinnvoll?”

  1. Ich kann deinem Fazit nur zustimmen. Akkordeon-Effekte sind ansehnlich, werden allerdings oftmals vollkommen falsch eingesetzt. Wenn bspw. einen Bestellen- oder Registrierungsbutton innerhalb einer solchen “Akkordeon-Seite” liegt und somit erst nach dem Aufklappen dieser sichtbar wird, ist es nicht überraschend wenn die Konversion gegen Null geht.

  2. Akkordeon – oder doch lieber klassiches Vinyl?

    Nun, diese Frage beschäftigt nicht nur die Designer – sondern auch diejenigen, die sich mit der strategischen Planung von Websites beschäftigen (hoffentlich zumindest).

    Mein persönliches Fazit fällt da recht klar aus:
    das Akkordeon mach tnur dort Sinn, wo ich viel Content habe – der nicht essentiell wichtig für den (Geschäfts-)Erfolg der Website ist.

    Was ich damit meine? Werfen wir einen Blick auf die gezeigten Beispiele:

    Variante 1 – Shirts
    Meiner Meinung nach, macht der Einsatz dieser graphischen Darstellungsform hier final keinen Sinn. Ein (offensichtlich dahinter verborgenes) Shop-System so darzustellen halte ich für gefährlich. Auch vor dem Hintergrund der erwähnten SEO Schwierigkeiten. Ein Produkt sollte zwingend seine eigene Site haben – auf der auch alle weiteren Möglichkeiten (verschieden Ansichten, Warenkorbfunktionalität etc pp) vorhanden sein sollten (Single Point of Information). Die Stärke des Akkordeon Effektes, viele Informationen auf kleinem Raum darzustellen, wird spätestens hier zur Schwäche.
    Außerdem halte ich sechs Reiter (mit elementaren Inhalten wie Produktansicht, Bestellung und Kontakt) für fragwürdig, da der User nicht alle Reiter sofort erfassen (und bei dem verwendeten Wording) auch nicht unmittelbar verstehen kann.

    Variante 2 – News

    Die “klassische” Form des Stilmittels. Und hier – auch sinnvoll. Vor allem wenn der Inhalt dynamisch ist und immer die neuesten, meist geklicktesten Inhalte offen angezeigt werden

    Variante 3 – Produktdarstellung

    Wie erwähnt – auch hier gilt: Produktdarstellung auf kleinsten Raum… mit den erwähnten SEO Problemen… würde ich so wohl niemanden empfehlen.

    Fazit:

    Nicht jedes sexy & stylisch daherkommende Designelement macht auch tatsächlich auf jeder Site Sinn.

    Neben dem “klassischen Einsatz” bieten sich diese Elemente auch bei “Bühnen” auf der Starsteite an. Sei es um die jeweiligen Zielgruppen auf der Home in die für sie vorgesehenen Kanäle zu leiten, oder um wichtigen Dinge gleichberechtigt Raum zu verschaffen.

    Im Web gibt es leider viel zu viele schlechte Beispiele. Sites bei denen die Akkordeons derart schmal, klein und an den Rand gequetscht wurden, dass man erst handgestoppte Stunden später auf sie stößt. 😉

    Insofern: Augen auf bei der Hausmusik. 🙂

Schreibe einen Kommentar