Page Number Navigation

[Rozerinay]

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

Deel hieronder een link naar Figma, Storybook, Github of screenshots. Met deze informatie kunnen we bewijzen dat de 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

Page Number Navigation

Doel

Navigatie naar andere pagina's wanneer een grote hoeveelheid informatie is verdeeld over genummerde pagina's.

Ook bekend als

Pagination, Paginator

Onderzoek

In een comment bij GOV UK's Pagination Discussion wordt aangegeven dat het gebruik van paginanummers in plaats van alleen “vorige” en “volgende” knoppen de gebruiksvriendelijkheid aanzienlijk heeft verbeterd, waardoor alle 105 geteste gebruikers de taak succesvol konden voltooien.

In een comment bij GOV UK's Pagination Discussion wordt aangegeven dat de labels ‘volgende’ en ‘vorige’ meer context nodig hebben, zoals ‘volgende pagina’, zodat gebruikers van schermleestechnologieën beter begrijpen wat het doel van de links is wanneer deze buiten hun context worden bekeken.

Pagination Best Practices - Uxcel
In dit artikel worden best practices besproken, zoals het beperken van overmatige paginalinks, zorgen dat knoppen groot genoeg zijn om gemakkelijk aan te klikken, en het duidelijk markeren van de huidige pagina.

Alternatives to Pagination on Product-Listing Pages
In dit artikel wordt verteld dat infinite scrolling gebruikers frustreert doordat de footer onbereikbaar wordt omdat deze steeds verder naar beneden wordt verschoven wanneer nieuwe items automatisch worden toegevoegd.

Infinite Scrolling, Pagination Or “Load More” Buttons? Usability Findings In eCommerce - Smashing Magazine
In dit artikel bespreekt Christian Holst de gebruikersonderzoeksresultaten van het Baymard Institute, waarin wordt aangetoond dat de combinatie van “Load more”-knoppen en lazy-loading een betere gebruikerservaring biedt dan traditionele paginering of infinite scrolling van toonaangevende e-commercewebsites.​

Accessible Components: The Pagination - LinkedIn
In dit artikel biedt Rocio technieken om paginering toegankelijker te maken voor alle gebruikers, met een focus op keyboardinteracties en interacties met schermlezers.

[Rozerinay]

Amsterdam

• Storybook
• Figma
• Github

---

Screenshots / Varianten

Storybook

First page

Second page

Last page

Responsive gedrag (bij verkleinen scherm)

Figma

First page

Second page

Third page

Middle page

Second for last page

For last page

Last page

---

Notities

• Onder de naam: Pagination.
• Button met label + icon wordt gebruikt voor 'Vorige' en 'Volgende'.
• Buttons krijgen underline bij hover.
• Indicatie pagina: huidige paginanummer is bold en de overige pagina's zijn regular.
• Als je op de eerste of laatste pagina bent, heb je slechts één Button: Vorige of Volgende, afhankelijk van je positie.
• Ellipsis wordt gebruikt voor tussenliggende pagina's. Is niet aanklikbaar.
• Aantal zichtbare paginanummers: maximaal 6 in Storybook en 5 in Figma.
• Responsive gedrag: in Storybook komt de 'Volgende' button op de volgende regel te staan.
• Richtlijnen beschikbaar.

[Rozerinay]

Den Haag

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

---

Screenshots / Varianten

Storybook

Default

Disabled

Four items

Five items

Aligned start

Aligned center

Aligned end

Figma - Huidig

---

Notities

• Onder de naam: Pagination.
• Icon (chevron) wordt gebruikt voor 'Vorige' en 'Volgende'.
• Buttons krijgen een andere kleur bij hover.
• Indicatie pagina: huidige paginanummer is bold en de overige pagina's zijn regular.
• Als je op de eerste of laatste pagina bent, is Vorige of Volgende icon disabled, afhankelijk van je positie.
• Ellipsis wordt gebruikt voor tussenliggende pagina's. Is niet aanklikbaar.
• Aantal zichtbare paginanummers: maximaal 5.
• Responsive gedrag: gehele Pagination blijft op 1 regel staan.
• Positie: biedt opties voor de plaatsing van de Pagination aan de linkerkant, in het midden of aan de rechterkant van de pagina.
• Richtlijnen beschikbaar.

[Rozerinay]

DSO

• Documentatie website
• Storybook
• Github

---

Screenshots / Varianten

Storybook

First page

Second page

Fourth page

For last page

Last page

---

Notities

• Onder de naam: Pagination.
• Icon (chevron) wordt gebruikt voor 'Vorige' en 'Volgende'.
• Buttons krijgen een underline kleur bij hover.
• Indicatie pagina: huidige pagina is omcirkeld.
• Als je op de eerste of laatste pagina bent, heb je slechts één Button: Vorige of Volgende icon, afhankelijk van je positie.
• Er wordt géén gebruik gemaakt van ellipsis.
• Aantal zichtbare paginanummers: maximaal 5.
• Eerste en laatste pagina is altijd zichtbaar.
• Responsive gedrag: gecentreerde overflow wrap.

[Rozerinay]

DUO

Documentatie website

---

Screenshots / Varianten

Werking t/m 6 pagina's

Werking meer dan 6 pagina's

Responsive gedrag

---

Notities

• Onder de naam: Pagination.
• Button met label + icon wordt gebruikt voor 'Vorige' en 'Volgende'.
• Buttons krijgen een andere achtergrondkleur bij hover.
• Indicatie pagina: huidige paginanummer heeft een achtergrondkleur.
• Als je op de eerste of laatste pagina bent, heb je slechts één Button: Vorige of Volgende, afhankelijk van je positie.
• Ellipsis wordt gebruikt voor tussenliggende pagina's (meer dan 6). Is niet aanklikbaar.
• Aantal zichtbare paginanummers: maximaal 6.
• Responsive gedrag: gehele Pagination blijft op 1 regel staan. Huidige pagina en laatste pagina zijn dan altijd zichtbaar.
• Richtlijnen beschikbaar.

[Rozerinay]

OpenGemeenten

PatternLab

---

Screenshots / Varianten

Pagination

Pagination next

Pagination previous

---

Notities

• Onder de naam: Pagination.
• Button met label + icon wordt gebruikt voor 'Vorige' en 'Volgende'.
• Geen paginanummers weergegeven. In plaats daarvan wordt in 1 regel de huidige en laatste pagina aangegeven.
• Als je op de eerste of laatste pagina bent, is Vorige of Volgende disabled, afhankelijk van je positie.
• Responsive gedrag: gehele Pagination blijft op 1 regel staan en 'Vorige' en 'Vorige' veranderen naar een arrow icon.

[Rozerinay]

Rotterdam

Figma

---

Screenshots / Varianten

Pagination with only 3 pages (page 2 is active)

Pagination with more than 3 pages (page 2 is active)

Variant explanation

---

Notities

• Onder de naam: Pagination.
• Icon (chevron) wordt gebruikt voor 'Vorige' en 'Volgende'.
• Buttons krijgen een andere achtergrondkleur bij hover.
• Indicatie pagina: huidige paginanummer is bold en heeft een achtergrondkleur.
• Ellipsis wordt gebruikt voor tussenliggende pagina's (meer dan 4). Is niet aanklikbaar.
• Aantal zichtbare paginanummers: maximaal 4.
• Richtlijnen beschikbaar.

[Rozerinay]

RVO

• Documentatie website
• Storybook
• Figma
• Github

---

Screenshots / Varianten

Storybook

3 pages, first page active

5 pages, first page active

30 pages, first page active

30 pages, second page active

30 pages, fourth page active

30 pages, fifth page active

Responsive gedrag

Figma

---

Notities

• Onder de naam: Pagination.
• Button met label + icon wordt gebruikt voor 'Vorige' en 'Volgende'.
• Buttons krijgen een andere achtergrondkleur en worden bold bij hover.
• Indicatie pagina: huidige paginanummer is bold.
• Als je op de eerste of laatste pagina bent, heb je slechts één Button: Vorige of Volgende, afhankelijk van je positie.
• Ellipsis wordt gebruikt voor tussenliggende pagina's (meer dan 3). Is niet aanklikbaar.
• Aantal zichtbare paginanummers: maximaal 6.
• Responsive gedrag: gecentreerde overflow wrap. Volgende button komt op volgende regel te staan.
• Richtlijnen beschikbaar.

[Rozerinay]

Utrecht

• Storybook
• Figma
• Github

---

Screenshots / Varianten

Storybook

Responsive gedrag

Figma

Publieke website

First page active

Last page active

More than 5 pages

---

Notities

• Onder de naam: Pagination.
• Verschillende versies in Figma. Uitwerking in Figma en Storybook lopen uiteen. Onderstaande notities gaan uit van de uitwerking in Storybook.
• Button met label wordt gebruikt voor 'Vorige' en 'Volgende'.
• Buttons krijgen een andere achtergrondkleur bij hover.
• Indicatie pagina: huidige paginanummer heeft een achtergrondkleur.
• Als je op de eerste of laatste pagina bent, heb je slechts één Button: Vorige of Volgende, afhankelijk van je positie.
• Geen gebruik van ellipsis.
• Aantal zichtbare paginanummers: maximaal 5.
• Responsive gedrag: overflow wrap. Volgende button komt op volgende regel te staan.

[Marwaxhello]

Developer Overheid

• Documentatie website
• GitHub
• Website (page met page-number-navigation)

---

Screenshots / Varianten

Page Number Navigation

Notities

• Onder de naam: Pagination list.
• Button met icon wordt gebruikt voor 'Vorige' en 'Volgende'.
• Buttons krijgen een andere achtergrondkleur bij hover.
• Indicatie pagina: huidige paginanummer heeft een achtergrondkleur.