Spinner

[wartburggraaf]

We willen graag meer leren over het Spinner 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!

Naam

Spinner

Doel

Een animatie die aangeeft dat een proces nog bezig is, waardoor een deel van de pagina nog niet volledig is geladen of knoppen niet bedienbaar zijn.

Gerelateerde componenten

Progress Bar

Onderzoek

Loading Spinner - GOV.UK
Discussion over de Loading Spinner. Er wordt gezegd dat uit gebruikersonderzoek naar reiswebsites bleek dat gebruikers baat hadden bij een minimum weergavetijd voor de Spinner. Hierdoor was er ook tijd voor zaken zoals het afvuren van aria-live events op een betekenisvolle manier.

Loading & progress indicators — UI Components series - Medium
Het artikel bespreekt het belang van laad- en voortgangsindicatoren die gebruikers informeren en betrekken tijdens wachttijden. Enkele interessante punten:

• Er wordt aangegeven dat voor korte wachttijden (<1 seconde) geen indicatoren nodig zijn. Voor wachttijden van 1-3 seconden zijn simpele animaties, zoals een Spinner, geschikt. Bij wachttijden van 3-10 seconden zijn Progress Bars nuttig om de voortgang duidelijk te maken.
• Er wordt aanbevolen om één globale voortgangsindicator weer te geven in plaats van meerdere indicatoren die de voortgang voor elke afzonderlijke Card bijvoorbeeld weergeven. Op deze manier kunnen gebruikers de algehele voortgang van het hele proces gemakkelijk begrijpen zonder overweldigd te raken.
• Door verschillende soorten laadindicatoren te combineren, ontstaan unieke en interessante ervaringen. Bijvoorbeeld door een Spinner te combineren met een Progress Bar, of animaties toe te voegen aan een Progress Circle.

Skeleton Screens vs. Progress Bars vs. Spinners - Nielsen Norman Group
In de video worden verschillende soorten laadindicatoren besproken. Hieronder lees je wanneer je welke laadindicator het beste kunt gebruiken:

• Skeleton Screens zijn simpele visuele elementen die het lay-out van een pagina nabootsen en aangeven dat een pagina aan het laden is. Ze kunnen statisch of geanimeerd zijn en worden het best gebruikt voor volledige paginaladingen tussen de 2 en 10 seconden.
• Spinners lijken op Skeleton Screens, maar geven geen indicatie van de wachttijd. Ze zijn geïsoleerde elementen die een herhalende beweging maken en zijn ideaal voor het laden van individuele modules, zoals een video of een kaart op een dashboard. Spinners worden aanbevolen voor wachttijden van minder dan 10 seconden.
• Progress Bars tonen de voortgang van een taak, zoals een bestand dat wordt geüpload of gedownload. Ze zijn het best geschikt voor procesgerelateerde handelingen en worden sterk aanbevolen voor pagina’s die langer dan 10 seconden nodig hebben om te laden, omdat ze gebruikers laten zien hoe lang ze nog moeten wachten.

Making an accessible loading button: Aria-disabled with friends - Bekk Christmas
In deze blog vertelt Bekk dat het ontwerpen van een toegankelijke Loading Button een echte hoofdbreker is. Er is geen eenvoudige one-size-fits-all-oplossing.

Rian geeft in deze opmerking aan dat een Spinner in een submit Button, waarbij de Button tekst daarna wordt aangepast, problematisch kan zijn voor de ondersteuning van screenreaders en het begrip van de gebruiker.

Use “Delivery Date” Not “Shipping Speed” - Baymard Institute
Zie discussie hieronder.

[wartburggraaf]

DSO

De Spinner zien we terug in het component Progress Indicator

• Als onderdeel van Modal in Github
• Documentatie website
• Storybook

---

Screenshots / Varianten

Storybook

Progress Indicator

---

Notities

Toepassing binnen Modal
<span class="dso-progress-indicator-spinner" role="progressbar" aria-labelledby="progress-indicator-label"></span>

[wartburggraaf]

DUO

Documentatie website

---

Screenshots / Varianten

Documentatie website

Naam variant: Spinner
Rationale variant: Een spinner is een visuele, geanimeerde indicator die aangeeft dat (een gedeelte van) een pagina nog bezig is met laden. Hoewel de spinner geen voortgang toont, laat het wel zien dat er iets gebeurt op de achtergrond. Dit voorkomt dat gebruikers te vroeg wegklikken.

---

Notities

Buttons kunnen ook een Spinner bevatten als er met een klik op de knop veel data verwerkt moet worden. De button is tijdens het laden inactief.

[wartburggraaf]

Open Formulieren

• Storybook
• Figma (niet beschikbaar)

---

Screenshots / Varianten

Storybook

Naam variant: Loader
Rationale variant: -

---

Notities

<span class="openforms-loading__spinner"></span>

[sergei-maertens]

Wordt gebruikt in veel plaatsen:

• main element als er API calls zijn (bijvoorbeeld https://open-formulieren.github.io/open-forms-sdk/?path=/story/private-api-appointments-steps-5-confirmation--success)
• <button aria-disabled="true"> als er gewacht wordt op netwerk verkeer

in React zouden we dit idealiter ook met Suspense kunnen gebruiken, maar zover zijn we nog niet

[wartburggraaf]

Amsterdam

Figma

---

Screenshots / Varianten

---

Notities

• Onder de naam: Spinner.

[wartburggraaf]

Baymard

Een redelijke oplossing is om aanvankelijk de (minder dan ideale) verzendsnelheid te tonen en vervolgens onmiddellijk bij het laden van de pagina een AJAX-request uit te voeren om de daadwerkelijke leveringsdata op te halen, de verzendsnelheden te vervangen door de datums zodra ze zijn geretourneerd.

Op deze manier worden de laadtijden van het betaalproces helemaal niet beïnvloed door de externe service: als de postservice API snel de geschatte leveringsdatums retourneert, worden de verzendsnelheden min of meer onmiddellijk vervangen, maar als de service toevallig uitvalt of traag is, heeft de gebruiker nog steeds informatie over de verzendopties (het is gewoon niet optimaal).

Als het gaat om het vertrouwen op een externe API om leveringsdatums te berekenen, is de kernafweging dat terwijl de feitelijke datumberekeningen worden vereenvoudigd (hoewel niet geëlimineerd), er fallback-oplossingen beschikbaar moeten zijn om te voorkomen dat de snelheid en stabiliteit van het afrekenen afhankelijk zijn van een extern systeem.

[Rozerinay]

Utrecht

---

Screenshots / Varianten

Publieke website

Pagina: Melding maken

---

Notities

Spinner is heel kort zichtbaar voordat je in het formulier terechtkomt.

[Rozerinay]

Tilburg

---

Screenshots / Varianten

Publieke website

Pagina: Afspraak maken

---

Notities

Spinner is in combinatie met een bericht heel kort zichtbaar nadat je een Checkbox en andere input fields aanklikt.

[rianrietveld]

Naar aanleiding van de vraag van @Rozerinay wat overwegingen

Tijdens de Developer Open Hour bespraken we de Spinner. Om deze Help Wanted te kunnen maken, hebben we meer praktijkvoorbeelden nodig. Yolijn gaf een goed voorbeeld van een loading state in een andere context: de Spinner in een Button.
We zijn benieuwd naar de toegankelijkheid hiervan. Ik las in een artikel dat dit vaak een uitdagend vraagstuk is. Weten onze a11y-experts hier meer over? Is de Spinner in een Button een voorbeeld dat we willen ondersteunen?

Een spinner in een submit button en dan de naam wijzigen kan problematisch zijn voor screenreader support en begrip.
Zie https://adrianroselli.com/2020/12/be-careful-with-dynamic-accessible-names.html
Het gaat niet altijd goed bij de aankondiging voor screen readers.

Plaatsen van essentiele tekst info in de CSS wordt goed ondersteund voor assistive technology maar kan lastig worden als de pagina vertaald moet worden.

De andere oplossing, een tussenscherm met een spinner, heeft weer een ander probleem, zoals ik heb gezien bij Gravity Forms.
Deze is alleen zinvol als het wachten wat langer duurt en dat is afhankelijk van de snelheid van de submit. Screen reader feedback bij hele korte wachtijden voor een tussenpagina kan verwarrend zijn.

[MarjonBakker]

Roselli linkt in zijn artikel over dynamic accessible names naar zijn artikel over Multi-Function Button. Hij gebruikt daar een span met een role=status om de veranderingen van tekst in de button aan hulpsoftware te communiceren. Ik denk dat dat beter zou werken dan alleen op de buttontekst vertrouwen, eens?

[rianrietveld]

Zou iets zijn om uit te testen. De verandering wordt dan uitgesproken. De tekst moet dan wel contextueel kloppen, dat de announcement an sich betekenisvol is.
Voor de developers: Je kunt de role="status" niet rechtsreeks op de button zetten (want die heeft al de role van button), vandaar dat de extra span nodig is.

[Rozerinay]

RVO

Storybook

---

Screenshots / Varianten

Voorbeeld nog niet beschikbaar (op 15-10-2024).

---

Notities

• Onder de naam: Loading spinner.
• Wordt gebruikt bij belangrijke 'verzend'-momenten.
• De gehele applicatie wordt tijdelijk geblokkeerd wanneer de Loading spinner zichtbaar is.
• Richtlijnen beschikbaar.

[Rozerinay]

✨ Dit component is nu Help Wanted ✨

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

[Robbert]

Bij Terraform ben ik 'm tegengekomen in een Status Badge en in een Heading Group.

• Heading Group
• Status Badge