NL Design System
Progress Circle #365
Replies: 4 comments
-
NL Design SystemScreenshots / Varianten
Donut Chart NotitiesDe Progress Circle (ook wel Donut Chart genoemd in het NL Design System) wordt gebruikt om het aantal behaalde, gedocumenteerde stappen van de componenten binnen het NL Design System visueel weer te geven. 
Het is echter geen onderdeel van het design systeem zelf en is hardcoded. Hoewel het niet officieel onderdeel is van design systeem, komt het wel vaak in andere contexten voor. Ik heb deze chart nu nodig voor developer.overheid.nl, maar deze wordt ook dus op nldesignsystem gebruikt om de voortgang van een component implementatie aan te geven. Wat betreft de naam lijkt de Progress Circle inderdaad veel op een Donut Chart, maar er zijn zeker verschillen. Een Progress Circle verschilt op verschillende manieren van een donut chart. Volgens mijn onderzoek blijkt dat de meeste organisaties het een Progress Circle noemen. De definitie van een Donut Chart sluit niet goed aan bij wat ik nodig heb, terwijl de Progress Circle precies past bij de toepassing die ik voor ogen heb. |
Beta Was this translation helpful? Give feedback.
-
DSO ToolkitScreenshots / Varianten
Progress Indicator 
NotitiesDe progress indicator van DSO Toolkit lijkt op een indeterminate progress circle, maar in plaats van de voortgang van behaalde stappen weer te geven, fungeert deze meer als een laadfunctie in de vorm van een cirkel. |
Beta Was this translation helpful? Give feedback.
-
|
My 2 cents: |
Beta Was this translation helpful? Give feedback.
-
✨ Dit component is nu Help Wanted ✨Help je mee hem door de Community stappen te krijgen? |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
We willen graag meer leren over het
Progress Circlecomponent. 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!
Link naar bericht in Slack
Naam
Progress Circle
Beschrijving
Toont de voortgang van een bepaald proces in de vorm van een cirkel.
Ook bekend als
Progress Indicator
Gerelateerde componenten
Progress Bar
Onderzoek
De
Progress Circlewidget in Mendix toont de voortgang in de vorm van een cirkel. Je stelt de voortgang in met drie waarden: Minimum, Maximum en Current. Het label kan een tekst, percentage of aangepaste widget zijn. Je kunt de stijl aanpassen (kleuren, grootte) en er acties aan koppelen, zoals het openen van een pagina of het uitvoeren van een microflow.De
Progress Circlevan Chakra UI is een flexibele component voor het weergeven van voortgang in de vorm van een cirkel. Je kunt de grootte, kleur en dikte van de cirkel aanpassen, evenals de vorm van de uiteinden van de voortgangslijn. Er is ook de mogelijkheid om de voortgang als percentage of tekst weer te geven en de kleur van de voortgang zelf te veranderen. Daarnaast kun je een onbepaalde voortgangsstatus instellen of een aangepaste component maken met extra opties zoals het tonen van waarde-informatie en het aanpassen van de stijl van de achtergrond- en voortgangslijn.De
Progress Circlecomponent in Retool is een visuele cirkelvormige voortgangsbalk die wordt gebruikt om de voortgang van een taak of proces weer te geven. Het biedt verschillende aanpassingsmogelijkheden, zoals het instellen van zichtbaarheid op desktop- of mobiele weergaven, de mogelijkheid om de voortgang als onbekend te tonen (loading state), en de optie om de ruimte te behouden wanneer het component verborgen is. Je kunt ook de uitlijning, marge en stijl van het component aanpassen, en de waarde van de voortgang via JavaScript beheren. Daarnaast is er de optie om de waarde te resetten, te wissen, of het component naar zichtbare gebieden te scrollen.Best Practices for Designing Progress Indicators
Bij deze website laten ze zien hoe
Progress Indicatorswerken. Ze leggen uit hoe ze de gebruikerservaring verbeteren door feedback te geven tijdens wachttijden, bijvoorbeeld bij het laden van een webpagina of het opslaan van een bestand. Zonder voortgangsindicator kunnen gebruikers niet zien of hun actie wordt uitgevoerd, wat leidt tot frustratie. Ze geven ook verschillende soorten voortgangsindicatoren, zoals lineaire en circulaire, en tonen hoe een goede indicator de voortgang, status en resterende tijd van een proces laat zien.How to create progress indicator UI for better usability?
Bij deze website wordt uitgelegd hoe je
Progress Indicatorskunt ontwerpen voor betere bruikbaarheid in apps. Ze behandelen twee soorten indicatoren: onbepaalde (voor taken met onbekende duur) en bepaalde (voor voorspelbare taken). Er worden verschillende stijlen besproken, zoals spinners en voortgangsbalken, en tips gegeven over het kiezen van de juiste indicator op basis van de wachttijd. Belangrijke best practices zijn onder andere het gebruik van duidelijke labels, subtiele animaties en toegankelijkheid. Ze waarschuwen ook voor veelgemaakte fouten, zoals het verkeerd gebruiken van indicatoren en overmatig gebruik van animaties.Honorable Mention
De
v-progress-circularcomponent in Vuetify wordt gebruikt om voortgang visueel weer te geven in de vorm van een cirkel. Je kunt de voortgang controleren met demodel-valueprop. Deze component kan ook in een indeterminate staat worden gezet, wat betekent dat het oneindig blijft animeren om een laadstatus aan te geven. Verder kun je de kleur aanpassen met decolorprop, de grootte en breedte via respectievelijk desizeenwidthprops, en de oorsprong van de cirkel aanpassen met derotateprop. Ook kun je de standaard tekst binnen de loader vervangen door een slot te gebruiken.Beta Was this translation helpful? Give feedback.
All reactions