Accordion

[jeffreylauwers]

We willen graag meer leren over het Accordion component. In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie?

Deel hieronder een link naar Figma, Storybook of screenshots. Met deze informatie kunnen we bewijzen dat het component onderdeel moet worden van de NL Design System component library.

Daarnaast wordt het delen van onderzoek gewaardeerd. Dus heb je zelf onderzoek gedaan en zijn er inzichten voor dit component? Dan horen we dit ook graag!

Link naar bericht in Slack

---

Naam

Accordion

Doel

Secties met de mogelijkheid om gerelateerde content te tonen en weer te verbergen.

Gerelateerde componenten

Details, Tabs

Onderzoek

Accordions on desktop - Nielsen Norman Group
Artikel waarin wordt beschreven wat de voor- en nadelen zijn van een accordion en waar je rekening mee moet houden.

Accordions Are Not Always the Answer for Complex Content on Desktops - Nielsen Norman Group
Artikel waarin wordt beschreven dat Accordions niet altijd de juiste oplossing bieden.

Accordions icons - Nielsen Norman Group
Artikel waarin het onderzoek naar iconen voor Accordions wordt beschreven. Helaas is positie niet meegenomen en betreffende de getoonde voorbeelden ook veelal navigatie / menu's.

Accordion - GOV.UK
Onder 'Research on this component' worden bevindingen genoteerd. Er is ook een link naar de Accordion Github discussion waar meer informatie, onderzoek en aanpassingen worden gedeeld.

Collapsible sections - Inclusive components
Artikel waarin een Accordion component uitvoerig wordt beschreven om zo toegankelijk op te zetten.

Don't be afraid of the big long page
Artikel waarin wordt beschreven dat het inzetten van Accordions (of tabs) niet altijd de oplossing zijn.

[MikeClickr]

@jeffreylauwers In het Amsterdam Design System staat een beschrijving: https://www.figma.com/file/9IGm6IdPUYizBNGsUnueBd/Amsterdam-Design-System?type=design&node-id=2927%3A29173&mode=design&t=SfVgJtnxdqw3HzMQ-1
In het Erfpachtportaal dat Nico Druif onlangs presenteerde, zijn 'Toon' en 'Verberg' links toegepast, dat werd niet door iedereen begrepen. Ik vermoed dat chevrons voldoende zijn, mits deze visueel verbonden zijn.

Bij mijn vorige werkgever heb ik ook accordeons voor de G4 ontworpen, een soort G4 Design System met @hidde onder meer.
Elke gemeente had toen zo'n accordeon component, zie een screenshot: https://informaat.nl/nl/cases/wigo4it
Ik heb de gebruikstesten niet meer, maar ze werden goed gebruikt herinner ik me.

[Rozerinay]

Ik heb 2 inzichten gevonden uit ons onderzoek naar denhaag.nl in 2022.

• Accordeons op de productpagina's zorgen ervoor dat de website makkelijker te gebruiken zijn. Sommigen vinden de hoeveelheid tekst op de productpagina's overweldigend op de desktopversie. De accordeons op de mobiele versie maken deze tekst beter hanteerbaar.
• Groene knoppen binnen accordeons werden wel gevonden, maar ook als verwarrend ervaren. Respondenten verwachten een knop of helemaal onderaan of bovenaan op de pagina.

Als je meer wilt weten over dit onderzoek, bekijk dan het Miro bord DH.nl Onderzoek ronde 2 voor gedetailleerde inzichten en bevindingen.

[Rozerinay]

Verder hebben we onlangs onderzoek gedaan naar de formulieren. In dat onderzoek is de productpagina ook onderzocht waar de accordion in voorkwam. Het inzicht dat we daaruit hebben gehaald is:

De accordion bij 'Dit heeft u nodig' maakt het overzicht scanbaar. Als alles gesloten is in de accordion dan zie je alle documenten die je nodig hebt.

[jeffreylauwers]

Amsterdam

• Storybook
• Figma
• Github

---

Screenshots / Varianten

Storybook

Figma

---

Notities

• Verschil tussen Figma en Storybook. In Figma border om accordion section.
• Richtlijnen en beschrijving van keyboard navigatie beschikbaar (Storybook).

[jeffreylauwers]

Den Haag

• Storybook
• Figma - Huidig
• Figma - WIP
• Github

---

Screenshots / Varianten

Storybook

Figma WIP

---

Notities

• Richtlijnen beschikbaar.

[jeffreylauwers]

DSO Toolkit

• Documentatie website
• Github

---

Screenshots / Varianten

Documentatie website

Default

Compact

Conclusie

---

Notities

• Richtlijnen beschikbaar.
• 3 varianten, geen richtlijnen gevonden over wanneer welke variant te gebruiken.

[jeffreylauwers]

DUO

• Documentatie website

---

Screenshots / Varianten

Documentatie website

---

Notities

• Onder de naam: Collapse
• Ook varianten voor toepassing binnen Table en zonder achtergrond.
• Accordion-ish element als onderdeel van Video component.

[jeffreylauwers]

Open Gemeenten

• Documentatie website - Accordeon
• Documentatie website - Pagina accordeon
• Veenendaal -Collapsible in productie
• Patternlab - Accordion

---

Screenshots / Varianten

Accordeon
De contentelement ‘accordeon’ gebruiken we op een homepage om zoveel mogelijk onderwerpen gegroepeerd te tonen, in twee klikken naar je bestemming (als het even kan).

Collapsible
Dit is in TYPO3 het tekst en media contentelement dat ingesteld kan worden als collapsible. Eigenlijk een accordeon voor product pagina’s. Wij adviseren webredacteuren om deze alleen te gebruiken als er specifieke informatie in wordt getoond die niet voor iedereen relevant is omdat je met een collapsible informatie verbergt en dat is eigenlijk niet goed.

---

Notities

• Twee soorten accordeons.
• Bij Accordeon kan maximaal 1 section open zijn. Bij Collapsible kunnen meerdere sections open zijn.
• Scroll positie wordt aangepast na openklikken section.
• Accordion-ish element als onderdeel van Mediaplayer component.

[jeffreylauwers]

Rotterdam

• Figma

---

Screenshots / Varianten

Figma

Icon false

Icon true

---

Notities

• Expliciet benoemd dat er 'no rules' zijn wat betreft de inhoud van de sections.
• Accordion-ish element voor FAQ component in Figma.

[jeffreylauwers]

RVO

• Storybook
• Figma
• Github

---

Screenshots / Varianten

Storybook

---

Notities

• Teaser text per section.

[jeffreylauwers]

Utrecht

• Storybook
• Figma
• Github

---

Screenshots / Varianten

Figma

---

Notities

• Chevron stond eerder in een geel blokje rechts uitgelijnd. Daar wil Utrecht van afstappen en het icoon links uitlijnen, vandaar enkel screenshot Figma omgeving.

[jeffreylauwers]

✨ Dit component is nu Help Wanted ✨

Help je mee hem door de Community stappen te krijgen?
Accordion op het Community bord

[Rozerinay]

✨ Dit component is nu Community ✨

Help je mee hem door de Candidate stappen te krijgen?
Accordion op het Candidate bord

[MarjonBakker]

Alles inklappen/uitklappen

Vanuit toegankelijkheid heb ik een vraag over dit component. Ik zie in de discussie hierboven dat er nergens een button zit met een functie 'Alles openklappen'/'Alles dichtklappen'. Het toevoegen van zo'n button heeft meerdere voordelen, bijvoorbeeld:

• Mensen met een motorische beperking hoeven niet meerdere buttons te activeren om alle content te kunnen bekijken.
• Als je content op een pagina wilt vinden met de zoekfunctie van je browser, lukt dat het beste met alle content uitgeklapt.

GOV.UK heeft deze button wel toegevoegd: https://design-system.service.gov.uk/components/accordion/

Is het een overweging waard om dat hier ook toe te voegen?