Action

[ux-fran]

We willen graag meer leren over de Action 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

Action

Doel

Een component om aan te geven dat er nog een actie (of taak genoemd) uitgevoerd kan of moet worden.

Onderzoek

Generieke Services schetsboek - Gemeente Den Haag
In dit Figma schetsboek is inspiratie en schetsen te vinden die het ontwerpproces van de Action component weergeven. Het bevat verschillende use cases, zoals ‘niet-verplichte taken’ en ‘verstreken deadline’.

Generieke Services onderzoek - Gemeente Den Haag
In Figma is informatie verzameld vanuit verschillende organisaties, die inzichten bieden in manieren van notificeren. Dit omvat onder andere hoe een ‘taak’ (oftewel de Action component) technisch geïmplementeerd kan worden en in welke scenario’s deze effectief ingezet kan worden.

Generieke Services concept - Gemeente Den Haag
In Figma is uitgebreide informatie beschikbaar over de taak: hoe deze eruitziet, hoe deze werkt, en verschillende scenario’s waarin de Action component wordt gebruikt. Denk bijvoorbeeld aan de inhoud van de Action, en waar deze zich bevindt in de 'Mijn omgeving' wanneer een gebruiker een betaling aan de gemeente moet uitvoeren.

Rapport Generieke Services 2023 - Gemeente Den Haag (PDF, 9 MB)
Uit dit gebruikersonderzoek blijkt dat de Action (taak) goed functioneert. Enkele inzichten:

• Gebruikers begrijpen dat er een actie van hen wordt verwacht, dat er een taak openstaat en dat ze hiermee aan de slag moeten.
• Het oranje waarschuwingsicoon met uitroepteken trekt effectief de aandacht naar een naderende deadline.
• Het plaatsen van het oranje waarschuwingsicoon naast de deadline, in plaats van voor de taaknaam, blijkt beter te werken omdat de samenhang duidelijker wordt.

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

GOV.UK Task List - GOV.UK
Task list implementatie bij GOV.UK waarbij op een vergelijkbare wijze omgegaan wordt met actions/tasks die van de gebruiker verwacht worden. Bij de Task list Discussion wordt meer informatie, onderzoek en aanpassingen gedeeld.

Actionable notifications - Carbon Design System
Actionable notifications in het Carbon Design System, een component dat in grote lijnen vergelijkbaar is met de Action component.

[ux-fran]

Research nov 2024

Gekeken in diverse files van Amsterdam, Open formulieren, DUO, Open Gemeenten en daar verder iets vergelijkbaars gevonden.

Heb ik wat gemist of weet jij (de lezer) misschien nog een organisatie of andere gemeente met een vergelijkbaar component, vul gerust aan!

[ux-fran]

Gemeente Rotterdam

Documentatie website

---

Screenshots / Varianten

Single action

Responsive gedrag

Mijn Loket

---

Notities

• Onder de naam: Single action.
• De Action component van Den Haag is hier hergebruikt. Bekijk de notities van Den Haag voor meer details.

[ux-fran]

DSO

• Documentatie website
• Storybook
• GitHub

---

Screenshots / Varianten

Storybook

Default

With warning

Responsive gedrag

---

Notities

• Onder de naam: Action List.
• Opgebouwd uit dso-action-list-item.
• Bestaat uit een lijst met daarin een Step Counter en een Accordion. In deze Accordion staan de taken die uitgevoerd moeten worden. Het is niet zichtbaar of er call-to-actions in staan.
• Er worden geen deadlines weergegeven.
• De content van een Action List Item kan een Heading of een Button bevatten.
• De werking van deze component verschilt van de ‘Action’ component van Den Haag: visueel is hij anders vormgegeven en er is geen directe call-to-action zichtbaar om de taak uit te voeren.

[ux-fran]

Den Haag

• Storybook
• Figma
• GitHub

---

Screenshots / Varianten

Default

Hover

Focus

With Date

With Date Relative

With Date Warning

List

Responsive gedrag

---

Notities

• Bestaat uit ‘content’ en ‘details’. De ‘content’ bevat de naam van de taak, terwijl de ‘details’ de deadline en de arrow Icon aangeven.
• De gehele component is aanklikbaar.
• Kan al dan niet een deadline bevatten.
• Bij een deadline van minder dan 2 dagen wordt de variant ‘Date Warning’ toegepast.
• Arrow Icon staat altijd aan de rechterkant. Als er geen deadline is, staat deze op small containers in de rechteronderhoek.
• Richtlijnen beschikbaar.