Tabs

[jeffreylauwers]

We willen graag meer leren over het Tabs component. In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie? En wat is het responsive gedrag?

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

Tabs

Doel

Paneel om onderwerpen te groeperen, waarbij er maar één per keer zichtbaar is, met knoppen om te kiezen welk onderwerp wordt weergegeven.

Gerelateerde componenten

Accordion

Onderzoek

Tabs used right - Nielsen Norman Group
Artikel waarin wordt beschreven welke design richtlijnen je moet aanhouden bij het ontwerpen van Tabs.

Tabbed interfaces - Inclusive components
Artikel waarin een Tabs component uitvoerig wordt beschreven om zo toegankelijk op te zetten.

Tabs - BBC GEL
Tab pagina op documentatie website van BBC GEL Design system waarin het tabs component wordt beschreven om toegankelijk in te zetten.

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

[jeffreylauwers]

Amsterdam

• Storybook
• Figma

---

Screenshots / Varianten

Storybook

Default

Responsive gedrag bij small viewport

Figma

Tab states

Tabs component

Responsive gedrag bij small viewport

Responsive gedrag bij small viewport - Alternatief

Tabs switch

---

Notities

• Verschil tussen Figma en Storybook wat betreft responsive gedrag.
• Richtlijnen en beschrijving van keyboard navigatie beschikbaar (Storybook).

[jeffreylauwers]

Den Haag

• Storybook
• Figma - Huidig

---

Screenshots / Varianten

Storybook

Default

Update Tab Content

Responsive gedrag bij small viewport

Figma Huidig

States

Responsive gedrag bij small viewport

Default en Fitted tabs

---

Notities

• Richtlijnen beschikbaar.
• Verschil tussen Figma en Storybook wat betreft responsive gedrag.

[jeffreylauwers]

DSO Toolkit

• Documentatie website

---

Screenshots / Varianten

Storybook

Default

Inactive

Responsive gedrag bij small viewport

---

Notities

[jeffreylauwers]

DUO

• Documentatie website

---

Screenshots / Varianten

Documentatie website

Page tabs
Gebruik een page tab als de inhoud van de tabs een groot deel van de pagina moet vormen.

Responsive gedrag bij small viewport

Inline tabs
Gebruik inline tabs als je de tabs tussen lopende tekst wil zetten, waarbij de inhoud van de tabs beknopt is en in verband staat met de rest van de content op de pagina.

Responsive gedrag bij small viewport

Veel tabbladen
Als het gehele tab-element meer tabs bevat dan passen op de schermbreedte, verschijnt er een tab met de tekst “Meer”. Als de gebruiker op deze tab klikt, verschijnt er een dropdown met de tabs die niet meer op het scherm passen.

Responsive gedrag bij small viewport

---

Notities

• Richtlijnen beschikbaar.
• DUO heeft onderzoek gedaan naar het responsive gedrag van dit component. https://uno.dfront.rijkscloud.nl/#/over-uno/onderzoek-en-design/tabs

[jeffreylauwers]

Open Gemeenten

• Patternlab - TabbedTopTasks-List
• Documentatie website - Pagina accordeon
• Afspraken module (bijvoorbeeld bij maken van een afspraak voor ID kaart)

---

Screenshots / Varianten

Patternlab

TabbedTopTasks-List

Responsive gedrag bij small viewport

Afspraken module

---

Notities

[jeffreylauwers]

Rotterdam

• Figma

---

Screenshots / Varianten

Figma

Responsive gedrag bij small viewport

---

Notities

• Component is 'Under construction'.

[MariekeBrouwer]

we gebruiken ook wel tabs voor verschillende inlogmogelijkheden. Bij het klikken op de tab verdwijnen de particulieren en gaat het dan naar de inlogmogelijkheden voor ondernemers. De tab zelf verkleurt dan en wordt dikker (ook vanwege toegankelijkheidseisen dat het niet enkel met kleur overgedragen mag worden).

[Rozerinay]

✨ Dit component is nu Help Wanted ✨

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

[rroose-rvo]

@jeffrey Ik wil nog even terugkomen op het tabs onderwerp in de Open Hour van gisteren. Ik zag in jouw voorbeeld de subtiele versie van Tabs zoals ook wij die momenteel gebruiken. Uit onderzoek wat wij zelf gedaan hebben blijkt echter dat deze niet door elke gebruiker begrepen worden, ze lijken ook veel op normale links. Ik ben daarom bezig met een minder subtiele versie a la gov.uk, wellicht heb je er iets aan.

[DilemAliyazicioglu]

Bij RVO hebben we meerdere onderzoeken uitgevoerd waarin tabs voorkwamen. In de meeste gevallen bleek dit component niet duidelijk voor alle testpersonen. In een onderzoek dat ik zelf heb uitgevoerd en geanalyseerd, begreep de helft van de testpersonen (4 personen) het component niet. Twee testpersonen ontdekten de tab pas later, en twee konden deze zonder hulp niet vinden.

Op basis daarvan (en op basis van eerdere onderzoeken van collega’s) concludeerden we het volgende: de visuele vindbaarheid van een tabblad is cruciaal; wanneer een tab klein of subtiel is vormgegeven, wordt het gemakkelijk over het hoofd gezien.

[rroose-rvo]

@DilemAliyazicioglu Ik heb dit intern uitgevraagd. Als ik reactie heb kom ik er hier op terug.