Terug naar begrippenlijst
Accordeon-menu
Een accordeon-menu (in webdesign vaak simpelweg een accordion genoemd) is een interactief ontwerpelement op een website. De naam is treffend gekozen: net zoals het muziekinstrument in- en uitschuift, zo klapt dit menu ook in en uit. Het bestaat uit een verticale stapel van koppen. Wanneer een bezoeker op een kop klikt of tikt, schuift het menu soepel naar beneden open en wordt de achterliggende tekst of inhoud zichtbaar. Klikt de gebruiker er nogmaals op (of op een andere kop), dan klapt de sectie weer netjes in.
Inhoudsopgave
De redder in nood voor mobiele interfaces
Met de enorme verschuiving naar mobiel winkelen (m-commerce) is de beschikbare schermruimte op smartphones een kostbaar bezit geworden. Lange lappen tekst dwingen de gebruiker tot eindeloos scrollen, wat ten koste gaat van de gebruiksvriendelijkheid (User Experience).
Hier is het accordeon-menu de ideale oplossing. Het fungeert als een visueel filter. In plaats van alle informatie direct over de breedte van het scherm uit te storten, krijgt de bezoeker eerst een compact en scannable overzicht van de hoofdonderwerpen. De gebruiker bepaalt vervolgens zelf welke informatie relevant is en opent alléén die specifieke blokken.
Waar komen we accordeons tegen in een webshop?
Binnen de e-commerce is het accordeon-menu een van de meest gebruikte designpatronen. Je komt ze vrijwel dagelijks tegen op strategische plekken binnen een webshop:
- De FAQ-pagina (Veelgestelde vragen): De absolute klassieker. Tientallen vragen worden netjes onder elkaar gestapeld, waardoor de pagina overzichtelijk blijft en de klant snel zijn antwoord vindt.
- Productpagina’s: Om de conversie hoog te houden, wil je de productpagina clean houden. Technische specificaties, maattabellen, wasvoorschriften en verzendvoorwaarden worden daarom vaak slim wegstopt achter inklapbare accordeontabs.
- Het filtermenu: In de zijbalk van een categoriepagina (zoals bij het kiezen van maten, kleuren of merken) zorgen accordeons ervoor dat het filteren van producten overzichtelijk blijft zonder dat de pagina meters lang wordt.
De impact op SEO: Wat vindt Google ervan?
Lange tijd was er binnen de SEO-wereld (zoekmachineoptimalisatie) discussie over de vraag of zoekmachines tekst die ‘verborgen’ zit achter een inklapmenu wel indexeren. Gelukkig heeft Google hierin duidelijkheid geschept: sinds de volledige overgang naar mobile-first indexing leest de Googlebot de inhoud van accordeon-menu’s perfect uit. De tekst telt dus gewoon mee voor je vindbaarheid.
Sterker nog, omdat Google veel waarde hecht aan een goede mobiele gebruikerservaring en snelle laadtijden, kan het correct toepassen van accordeons indirect juist bijdragen aan een betere positie in de zoekresultaten.
De valkuilen bij het ontwerpen
Hoewel een accordeon-menu fantastisch werkt, moet het wel functioneel worden ingericht om frustratie bij de gebruiker te voorkomen. Een absolute basisregel is het toevoegen van een duidelijk visueel icoontje aan de rechterkant van de kop. Dit vertelt de bezoeker direct dat de tekst klikbaar is. Daarnaast is het belangrijk om kritisch te kijken naar wat je verbergt. Cruciale informatie die iedereen moet zien (zoals de prijs, de bestelknop of de belangrijkste producttitel) hoort nooit in een accordeon thuis. Gebruik het puur voor secundaire, aanvullende informatie.
Veelgestelde vragen
Een dropdown-menu (zoals in de hoofdnavigatie van een website) ‘zweeft’ of valt over de bestaande inhoud van de pagina heen wanneer je erop klikt of hovert. Een accordeon-menu schuift de daadwerkelijke content van de pagina fysiek naar beneden om ruimte te maken voor de nieuwe tekst.
Nee, dat hoeft tegenwoordig bijna nooit meer. Moderne e-commerce platformen zoals Shopify of WooCommerce hebben vaak kant-en-klare accordeon-blokken in hun paginabouwers (page builders) zitten. Werk je met WordPress, dan kun je dit eenvoudig toevoegen via plug-ins of de standaard Gutenberg-editor.
Dat hangt af van de instelling. Er zijn twee varianten: de ‘pure’ accordeon (waarbij er altijd maar één tabblad tegelijk open kan staan; klik je op een nieuwe, dan sluit de oude automatisch) en de ’toggle’ variant (waarbij de gebruiker meerdere tabbladen tegelijk geopend kan hebben). Voor FAQ-pagina’s is de toggle vaak het prettigst.
Alleen als het technisch goed is geprogrammeerd. Voor de toegankelijkheid (web accessibility) moeten de menu’s met het toetsenbord te bedienen zijn en moeten er zogeheten ‘ARIA-attributes‘ in de code zitten, zodat voorleessoftware voor blinden begrijpt of een menu op dat moment in- of uitgeklapt is.
Krijn Elders Senior digital designer
Gerelateerde begrippen
- .htaccess
- .io domein
- Banner
- Branding
- Bruikbaarheidstest
- Call-to-action
- E-commerce
- Favicon
- Hover-animatie
- Interaction to Next Paint
- JavaScript
- Klikfraude
- Letter spacing
- Link farm
- On-page optimalisatie
- Open source
- Placeholder
- Responsive design
- URL-structuur
- Voice User Interface
- Webstructuur
- WPML
- Z-index
