Case Card

[jeffreylauwers]

We willen graag meer leren over het Case Card component. We zien dit als een component om te linken naar een zaak met daarin wat meta-informatie. 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 op Slack

---

Naam

Case Card

Doel

Toont meta-informatie over een zaak en biedt de mogelijkheid hier naartoe te navigeren.

Gerelateerde componenten

Card as link

Onderzoek

Zie comments.

[jiromaykin]

In OIP (Open Inwoner platform) gebruiken we Cards niet alleen voor Cases maar ook voor andere data:
Structuren:
https://github.com/maykinmedia/open-inwoner/tree/develop/src/open_inwoner/components/templates/components/Card
https://github.com/maykinmedia/open-inwoner/blob/develop/src/open_inwoner/components/templatetags/card_tags.py
SASS:
https://github.com/maykinmedia/open-inwoner/blob/develop/src/open_inwoner/scss/components/Card/Card.scss

[MariekeBrouwer]

Als aanvulling: https://www.figma.com/file/iKGhWhstaLIlFSaND2q7cE/OIP---Designs-(new)?type=design&node-id=9%3A23578&mode=design&t=KfSQWXbv3TURY1pn-1 hier het specifieke figma file.

[jeffreylauwers]

Den Haag

• Storybook
• Figma - Huidig

---

Screenshots / Varianten

Active

Inactive

---

Notities

• Optie voor tonen datum.
• Optie voor tonen Status badge.
• Optie voor inactieve status.

---

Toelichting Rozerin Ayerdem

De case cards worden op dit moment gebruikt in de Mijn Omgeving van de gemeente Den Haag.

Hieronder volgt een samenvatting van de bevindingen uit het onderzoek Generieke Services:

• De cards worden effectief herkend als mappen.
• Het label ‘1 taak open’ functioneert goed. Een respondent gaf aan: “Dit betekent dat er iets moet gebeuren,” terwijl een ander opmerkte: “Oh ja, ik zie dat er nog een taak openstaat. Nou, dan moet ik daar wat mee.”
• We constateren dat gebruikers behoefte hebben aan meer informatie over wat er precies aan de hand is. Zo hebben we een visuele indicator die aangaf dat er een taak openstond vervangen door het label ‘1 taak open’, wat veel beter begrepen wordt. Het principe ‘Don’t make me think’ sluit goed aan bij onze doelgroep.
• Gebruikers uiten twijfels over de getoonde datum, aangezien niet iedereen weet waar deze voor staat. Dit is iets dat we kunnen verbeteren. Er is nooit specifiek onderzoek gedaan naar de vraag of gebruikers überhaupt de datum willen zien. Hoewel wij, ontwerpers, dit handig vinden, met name met het oog op de toekomstige sorteermogelijkheden, zou het zinvol zijn om dit nader te onderzoeken.

En andere aandachtspunten:

• We zijn aan het kijken hoe we ‘veel’ zaken kunnen presenteren. Tonen we bijvoorbeeld nog steeds de case cards of gaan we over naar een ander soort view? En bij welk aantal is dit?
• Op welke manier tonen we de naam van een zaak? Hoe kan een gebruiker een zaak gemakkelijk herkennen? Als je meerdere zaken hebt met dezelfde titel, dan weet je al gauw niet meer bij welke je moet zijn (denk aan: ‘Bezwaar tegen parkeerbon’ -> welke van de 5 parkeerbonnen die ik heb?). Hoe kunnen we een zaaknaam identiek maken zodat het snel vindbaar is?

[jeffreylauwers]

Amsterdam

Maakt gebruik van Case card van Den Haag voor een prototype rondom Erfpacht.

• Figma - Prototype

---

Screenshots / Varianten

---

Toelichting Nico Druif

• Deze werd heel goed herkend en aangeklikt tijdens recent gebruikersonderzoek.
• Wel nog een uitdaging: wat is het maximum aantal case cards dat we tonen als er veel zaken lopen? Dan switchen naar een tabelview?

Aansluitend op de vraag over de datum, en de naam van de zaak:

• "Over de betekenis van de datum werden aannames gedaan. Hier moet duidelijk staan dat dit de datum van de eerste aanvraag is, dus startdatum van de zaak. "
• "In deze tabel is het handig als het adres is vermeld, het soort aanvraag en de aanvrager/contactpersoon" -> dat hier ook behoefte is aan de aanvrager heeft te maken met het feit dat er meerdere mensen vanuit de organisatie achter de knoppen kunnen zitten. Dus de ene keer een medewerker van de ene afdeling, de andere keer een andere medewerker. Dus men wil zien wie deze zaak heeft gestart.

[jeffreylauwers]

Groningen

Maakt gebruik van een algemeen card component met specifieke invulling voor een zaak. Zie comment Jiro en Marieke

• Figma

---

Screenshots / Varianten

Default

Status: Document toevoegen

Status: Uitslag bekend

---

Notities

• Optie voor tonen Status badge.
• Label call-to-action wijzigt per status.

---

Toelichting Jana

Op de vraag of er uit gebruikersonderzoek was gebeleken of er meer data nodig was. En of er ooit onderzocht hoe gebruikers op een weergave met minder data reageren.

In eerste instantie hadden we nog meer data getoond (zie oude screenshot van een detail pagina van een zaak).

Hier kwam na voren dat inwoners niet wisten wat de data betekenden en welke data belangrijkst was. Aansluitend aan Nico hebben we daarom de betekenis van de data aangescherpt en andere worden gebruikt b.v. "Beslissing op zijn laats op" en "aanvraag ingediend op" op i.p.v. eindatum en ontvangstdatum. Inwoners wilden in het onderzoek bovendien graag weten wanneer ze uiteindelijk de uitslag krijgen, dus daarom hebben we dit ook benoemd en in de designs opgenomen. In de Figma files/designs is de bewoording volgens mij nog niet verwerkt.

Nog minder data tonen hebben we niet getest omdat inwoners het prettig vonden om een uitslagdatum te weten en wij ervoor gekozen hebben om de zaken/cards op de overzichtspagina op data te sorteren i.p.v. geen filter/sorteer button te tonen. Hoezo hebben we ervoor gekozen?: Een particulier heeft bij ons volgens data gemiddeld maar 5/6 zaken lopen (parkeerboeten lopen b.v. niet over de gemeente bij ons). Meestal worden alle zaken dus op een pagina getoond en is automatisch sorteren op data (meest recente eerst) onze keuze geweest. De screenshot boven van Jiro is een open/niet afgeronde aanvraag, daar communiceren we twee data en geen zaaknummer omdat inwoners de aanvraag nog moeten indienen. Ook hier moet de bewoording op de de screenshot nog aangepast worden

De feed forward badge is met inwoners getest. De badge verandert ook afhankelijk van de status van de zaak (b.v. upload documenten, bekijk aanvraag of bekijk beslissing). In het verleden zagen we in onderzoek dat inwoners niet begrepen dat ze door klikken op de aanvraag/card op een detail pagina van de zaak terecht kwamen en daar hun documenten kunnen uploaden. Nu is duidelijk voor hun dat ze zo b.v. documenten kunnen uploaden of de uitslag kunnen bekijken. Niemand liep meer tegen dat probleem aan. De flow is dus zeker voor de inwoner verbetert en ook hier is de key duidelijke informatie geven en benoemen wat ze achter te tegel kunnen zien/doen

[alimpens]

De naam Case Card en het doel ('een component om te linken naar een zaak met daarin wat meta-informatie') voelt voor mij nogal specifiek. Is er een reden om niet voor het meer generieke Card te gaan?

[jeffreylauwers]

Hey Aram, klopt dit component is ook specifiek bedoelt in dit geval voor een 'zaak systeem'. We verwachten we dat er ook een meer generiek Card component nodig zal zijn. Hiervoor kan iedereen een Discussion starten.

[jeffreylauwers]

✨ Dit component is nu Help Wanted ✨

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