Inhaltselement "Akkordeon"

Anleitung mit Übung

Über das Inhaltselement

Das Akkordeon ist ein Bedienelement, das Inhalte aufgeklappt anzeigt, sobald der Seitenbesucher darauf klickt.

  • Die anklickbaren Überschriften der Inhalte stehen wie eine Liste untereinander.
  • Wird eine Überschrift angeklickt, klappt der Inhalt des Akkordeonelements auf.
  • Wird eine zweite Überschrift angeklickt, klappt dieser Inhalt auf und das erste Akkordeonelement klappt wieder zu.
  • Im Akkordeonelement soll nur Text stehen.

Verwendung:

  • Für strukturierte Detailinformationen, die
    • die Webseite unübersichlich machen würden und
    • die für eine eigene Webseite nicht umfangreich genug sind.
  • Der Inhalt ist unwesentlich für die Webseite und darf übersehen werden

 

So sieht es aus

Live Ansicht des Inhaltselements

Detailinformationen, die

  • die Webseite unübersichlich machen würden und
  • die für eine eigene Webseite nicht umfangreich genug sind,

können gut in Akkordeons untergebracht werden.

Anm.: Dieses Akkordeon-Element enthält wenig Informationen, die auch so wesentlich sind, dass sie besser ohne Interaktion zu lesen sind. Deshalb stehen sie auch im Text obendrüber noch einmal.

Das Akkordeon dient dazu, umfangreichere Detailinformationen, für die sich aber keine einzelne Seite lohnt, auf einer Seite unterzubringen, ohne diese zu überladen. Bilder hingegen lenken Aufmerksamkeit des Seitenbesuchers auf sich und verlieren diese Funktion in einem Akkordeon.

Unsere Erfahrung zeigt, dass Redakteur*innen dazu neigen, Ihre übervollen Webseiten per Akkordeon "aufzuräumen" und dabei wesentliche Informationen der Webseite zu verstecken. Dabei übersehen sie, dass ein Akkordeon einen Seitenbesucher "Interaktion kostet"; insbesondere wenn eigentlich alle Informationen im Akkordeon relevant sind. Die Wahrscheinlichkeit, dass ein Seitenbesucher eine Seite verlässt, weil sie zu viel Interaktion kostet und er deshalb annimmt, dass die gesuchte Information nicht auf der Seite ist, ist relativ hoch.

Da Akkordeons noch weitere Nachteile haben, haben wir uns entschieden, im Akkordeon keine Bilder mehr zuzulassen. Wenn eine Detailinformation mit Bildern angereichert werden muss, kann sie wahrscheinlich auch auf einer eigenen Seite stehen.

Anm.: Dieses Mal sind die Informationen im Akkordeon ausführlich und klären eine oft gestellte Frage. Die allgemeinen Informationen zum Akkordeon würden sie jedoch überladen. Dies hier ist ein gutes Beispiel für ein Akkordeon.


Schritt für Schritt

Bebilderte Anleitung

Schritt 1:

Zunächst muss an entsprechender Stelle ein Inhaltselement "Accordion"anlegt werden, welches sich unter dem Reiter Interactive befindet.

Schritt 2 und 3:

2. Danach muss eine Überschrift vergeben werden und unter "Accordion-Item" auf Neu anlegen geklickt werden.
3.  Es können nun, der Header und der Text hinzugefügt werden.


TYPO3 Selbststudium

Übung

  1. Legen Sie ein Inhaltselement "Akkordeon" an.
  2. Geben Sie dem Akkordeon die Überschrift "FAQ"
  3. Legen Sie zwei Akkordeon-Elemente an. Füllen Sie sie mit Text aus dem Blindtextgenerator.
  4. Zeigen Sie das Ergebnis im Frontend an.

Kopfarbeit

Betrachten eine Ihrer Seiten (oder eine beliebige Seite) mit relativ vielen Informationen:

  • Sehen Sie Informationen, die auf jeden Fall erfasst werden müssen?
  • Gibt es Informationen, die für manche Seitenbesucher dann doch zu detailliert sein könnten?
  • Dürften diese Informationen übersehen werden?
  • Überlegen Sie grob, wie Sie die Seite neu strukturieren würden. Können hier Akkordeons den Überblick verbessern?