Patroon Zonder Naam

[jeffreylauwers]

Ik heb het idee dat er een mooie kans is om binnen de MijnServices community samen te werken naar een bepaald patroon.

Het ontbreekt me op dit moment alleen nog aan een goeie naam dus voor nu bestempel ik het maar als 'Patroon Zonder Naam'.

Het zijn elke keer 'Links' die een vorm aannemen als componenten zoals 'Cards', 'Actions', 'Balkjes', 'Table-rows'. Er worden stukjes data getoond van de Detailpagina waar de link naartoe leidt. Het heeft allemaal te maken met 'The Scent of information' waar ik eerder al wat schetsen voor maakte in het Figma Schetsboek.

📣 Oproep

Ik ben deze GitHub Discussion gestart of deze verschillende vormen te verzamelen. Met de verschillende vormen bij elkaar kunnen we misschien toewerken naar een patroon waar we gedeelde naamgeving en richtlijnen over kunnen opstellen.

Het lijkt me tof om hier op samen te werken binnen de Community dus deel a.u.b. de vormen die jij denkt dat hier ook bij passen.

[jeffreylauwers]

Voorbeeld templates

Figma bestand

Als balkjes en cards

Large viewport

Small viewport

[jiromaykin]

Open Inwoner

Heeft 2 verschillende Case Cards,:

• Home pagina case-cards (lijken op NLDS cards, maar dan zonder 'hangkastmapje' grafische achtergrond)
• Mijn Zaken overzichtspagina case-cards (zijn uitgebreide cards met statuskleuren e.d.)

Staan wel beiden altijd in Tegel view.

Open Inwoner Mijn Zaken

• Klapt niet om naar lijstweergave als er meer dan 3 (of hoger) aantal zijn,
• bij grote aantallen verschijnt er Pagination op de 'Mijn Zaken pagina
• Openstaande en Afgesloten Zaken staan door elkaar in eht overzicht, maar kan gefilterd worden: op Desktop met Dropdown filter, op Mobiel met een pop-up Modal met checkboxes)

Bronnen voor beide card types

• Storybook Home page case-card single item
• Storybook Home page plugin-sectie, met meer card items
• Figma Home page
• Figma Mijn Zaken overzichtspagina met filtering
• Github Preact/web-component single case-card
• Github Django/HTML universele Card voor gebruik met meer data
• Github pagina template van Mijn Zaken, is na een WCAG audit verbeterd op accessibility: de Heading van de Card moet als eerste in de structuur staan, daaronder pas mag de 'status' komen; dus als die in het design zijn omgedraaid, mag dit alleen met CSS omgekeerd worden, niet in de HTML.

---

Afbeelding - eenvoudige Home page case-cards:

Afbeelding - extra Status labels:

• case-cards met meer informatie in de tegels
• geen 'archiefkastmapjes' achtige vlakken
• bewust geen Tab navigatie
• paginering
• filtering mogelijk in dropdown: openstaande en gesloten zaken staan in eerste instantie door elkaar
• configureerbare kleur voor verschillende soorten 'statussen' die meteen in de open-inwoner case cards zichtbaar zijn (zoals de groene 'success' kleur)

---

Gebruikersonderzoek

Onderzoek door Gemeente Groningen
https://gebruikersonderzoeken.nl/docs/onderzoek-bekijken/mijn-zaken/groningen-mijn-omgeving-homepage/#main

"...Onderzoeksvraag 3 – Is er een verschil in de gebruikerservaring tussen de tegel-en lijstweergave van ‘mijn zaken’ op de homepage?
Het (zaak)nummer wekt in de lijstweergave verwarring op, omdat hier niet wordt aangegeven om wat voor nummer het gaat...."

[joni-png]

Voor het project MijnPlan van Gemeente Den Haag en de VNG hebben we een plan-card ontworpen, die veel lijkt op de case-card. Deze hebben we ook getest met gebruikers, zodra we het onderzoek gepubliceerd hebben zal ik deze toevoegen!