NL Design System
Progress Bar #287
Replies: 5 comments
-
Den HaagNiet als 'los' component maar met de naam 'Form Progress Bar' als onderdeel van de component Form Progress (Storybook) Screenshots / VariantenStorybook NotitiesVisueel is de Progress Bar 2px hoog met lichtgrijze achtergrond. De voortgang wordt aangegeven met groen. |
Beta Was this translation helpful? Give feedback.
-
DSOScreenshots / VariantenDocumentatie website Default Arbitrary Values NotitiesIn de documentatie worden voortgangsindicatoren (Spinner / Progress Bar) in het algemeen beschreven. Daarbij wordt een mooie uiteenzetting gedaan wanneer je welk component zou moeten inzetten:
Specifiek voor de Progress Bar er iets geschreven over
Visueel is de Progress Bar 16px hoog met groene border en witte achtergrond. De voortgang wordt aangegeven met groen. |
Beta Was this translation helpful? Give feedback.
-
DUONiet als 'los' component maar met de naam 'File Progress' als onderdeel van de component File Upload. Screenshots / VariantenDocumentatie website
Notities
|
Beta Was this translation helpful? Give feedback.
-
Open GemeentenScreenshots / VariantenPatternlab Project Information Indicator Project Information Page Notities
|
Beta Was this translation helpful? Give feedback.
-
NijmegenNiet als 'los' component maar met de naam 'Progress Bar' als onderdeel van een meerstappenformulier. Screenshots / Variantennijmegen.nl
NotitiesVisueel is de Progress Bar 16px hoog met lichtgrijze achtergrond. De voortgang wordt aangegeven met donkergroen. De balk heeft afgeronde hoeken. |
Beta Was this translation helpful? Give feedback.
-
We willen graag meer leren over de Progress Bar 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
Progress Bar
Doel
Toont de voortgang van een proces in een balk.
Ook bekend als
Progress, Meter, Linear Progress, Progress Indicator
Gerelateerde componenten
Spinner
Onderzoek
<progress>: The Progress Indicator element - MDNDocumentatie van Mozilla Developers Network over het
<progress>HTML element.A study on tolerable waiting time: how long are Web users willing to wait? - ResearchGate
Uit een onderzoek van Fiona Fui-Hoon Nah bleek dat gebruikers bereid zijn langer te wachten wanneer ze feedback krijgen, zoals een voortgangsbalk. De mediane wachttijd was 22,6 seconden voor gebruikers met een voortgangsbalk, terwijl dit slechts 9 seconden was voor degenen zonder zicht op de voortgang.
Validatie onderzoek Loket Buitenland - PDF (3,6 MB)
Tijdens een gebruikersonderzoek van 1Overheid werd een Progress Bar in een meerstappenformulier gebruikt. In de rapportage is daar het volgende over te genoteerd:
Beta Was this translation helpful? Give feedback.
All reactions