Component: Progress list

[Rozerinay]

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

Link naar bericht in Slack

---

Naam

Progress list

Doel

Toont de voortgang van een reeks stappen en biedt indien nodig extra details over een stap.

Ook bekend als

Progress, Progress indicator

Onderzoek

Onderzoek Status Component van MijnZaken - Gebruikersonderzoeken
Onderzoek naar het 'Status' component door gemeente Den Haag en Utrecht.

Onderzoek Generieke Services - Miro
Miro board dat is gebruikt tijdens het gebruikersonderzoek waarin inzichten te vinden zijn over de progress list.

Contactformulier voor WMEBV - Gebruikersonderzoeken
Onderzoek waarin een inzicht te vinden is over de progress list.

Status Trackers and Progress Updates: 16 Design Guidelines - NN Group
Artikel waarin ontwerprichtlijnen worden gedeeld voor de status tracker.

Nieuw ontwerp Zakelijk erfpachtportaal - gemeente Amsterdam
In dit onderzoek is te lezen dat de Progress list handig wordt gevonden, mits er een indicatie te zien is van wanneer de volgende stap wordt bereikt.

[Rozerinay]

Den Haag

• Storybook
• Figma - Huidig

---

Screenshots / Varianten

Storybook

Default

Collapsible

Collapsible with expanded step

Without substeps

With metadata

With expanded metadata

With warning

With error

Non collapsible step

Figma - Huidig
Large viewport

Small viewport

---

Notities

• Onder de naam: Process steps.
• Icoon: arrow down (arrow up bij active)
• Richtlijnen in Figma beschikbaar.
• In Figma is een sub step date te vinden. Deze komt niet voor in Storybook.
• In Figma is een disabled state te vinden dat is afgeleid van de Progress indicator. Deze komt niet voor in Storybook.
• In Storybook is de step meta ook (deels) beschikbaar als link. In Figma niet.
• De nested step markers verschillen in Storybook en Figma.

[Rozerinay]

DUO

• Documentatie website

---

Screenshots / Varianten

Basic

Compacte tijdlijn

Grote tijdlijn

---

Notities

• Onder de naam: Timeline.
• De stappen lopen in chronologische volgorde (van oud naar nieuw).
• De variant 'Compacte tijdlijn' komt het meest overeen met het Progress list component, omdat de de voortgang van een reeks stappen wordt getoond.
• De variant 'Compacte tijdlijn' is niet interactief.
• Het ontwerp van de variant 'Basic tijdlijn' verschilt in Vanilla JS en Angular.
• Er wordt gebruik gemaakt van een badge om de status weer te geven.
• Documentatie beschikbaar per variant.

[Rozerinay]

Utrecht

• Storybook

---

Screenshots / Varianten

Storybook

Default

---

Notities

• Onder de naam: Process steps.
• Is gebaseerd op de white-label component die bij Gemeente Den Haag is ontwikkeld.

[jiromaykin]

In OpenInwoner hebben wij een accordeon-like component voor alle verschillende 'statuses' van een aanvraag.
De laatste stap heeft een andere kleur; afhankelijk van de soort status (afgehandeld/in behandeling/actie vereist/etc/etc.
Aanvragen die nog in behandeling zijn, hebben een iets andere extra vorm; die tonen een 'toekomstige' status zonder uitklapbaar status bericht.

PY code hier: https://github.com/maykinmedia/open-inwoner/blob/develop/src/open_inwoner/templates/pages/cases/statuses.html

[Rozerinay]

Amsterdam

Geen specifiek component gevonden in Figma of Storybook. Nico Druif van gemeente Amsterdam geeft dat de Progress list in het Erfpacht ontwerp staat.

---

Screenshots / Varianten

Figma

Active

Done

Future

---

Notities

• Onder de naam: Status.
• Bestaat alleen in design.
• De stappen lopen in chronologische volgorde (van oud naar nieuw).
• Bevat op de plek van de datum ook een link.

[Robbert]

Amsterdam heeft ook zo'n component in de Storybook van de Amsterdam App, die @VincentSmedinga deelde:

Links:

• Storybook: Timeline component

default:

multiple expanded:

not expanded:

[Rozerinay]

Logius

Rene Olling geeft aan een uitwerking van het component te zien is in het MijnZaken prototype waar Anton Olivier van Logius aan werkt.

---

Screenshots / Varianten

Figma

---

Notities

• Bestaat alleen in design.
• De stappen lopen in chronologische volgorde (van oud naar nieuw).
• Hoofdstappen kunnen in- en uitklapbaar zijn.
• Bevat extra details over een stap.
• Kan substappen bevatten.
• Er wordt gebruik gemaakt van een 'Lees meer…' link in een substap.
• Kan buttons bevatten.
• Heeft datums van wanneer een stap is bereikt en een toekomstige datum.

[Rozerinay]

OpenInwoner

• Figma

---

Screenshots / Varianten

Figma

Active

Caution

Error

---

Notities

• In Figma onder de naam: Progress indicator.
• In code: Statuses.
• Bestaat in design en in Python.
• De stappen lopen in chronologische volgorde (van oud naar nieuw).
• Hoofdstappen kunnen in- en uitklapbaar zijn.
• Extra details over een stap zijn te zien bij het uitklappen.
• Kan buttons bevatten.
• Heeft datums van wanneer een stap is bereikt.

[jiromaykin]

OpenInwoner

• Figma https://www.figma.com/design/R4KuAAWc284izFHbushcbH/OIP-Design-System?node-id=1076-12005&t=JbeszloWumZpeRNJ-11)

@Rozerinay Dat is niet het juiste Figma project voor OIP - die is erg verouderd.
Dit is het correcte Open-Inwoner Figma project met de progress-list achtige statuslijst: https://www.figma.com/design/iKGhWhstaLIlFSaND2q7cE/OIP---Designs-(new)?node-id=184-6289&t=XOX4FGYhpg7hTkxi-0