Overzicht - Mijn berichten - Mijn omgevingen

[ux-fran]

Note

• In deze GitHub Discussion verzamelen we informatie over het patroon: Overzicht - Berichten – Mijn omgeving.
• We zijn op zoek naar best practices en inzichten uit onderzoek. Zo kunnen we toewerken naar patronen en templates die gebruiksvriendelijk en toegankelijk zijn. Vul deze GitHub Discussion vooral aan.
• Er is ook een overkoepelende GitHub Discussion voor Mijn omgeving patronen en templates. Daar vind je alle gerelateerde discussions op een rijtje. Maar ook meer achtergrond over de onderzoeken die in deze discussion worden aangehaald.

Overzicht - Mijn berichten – Minimale inhoud

Op basis van workshops met ontwerpers en gemeenten zijn de volgende elementen benoemd als minimale inhoud van de component Overzicht Berichten.

Basis inhoud

• Component: Page Header
  Bevat gebruikersinformatie en toegang tot profiel/loguit.

• Component: Breadcrumb
  Contextuele navigatie met weergave van hiërarchie: Home › MijnGemeente › Mijn berichten.

• Component: Side navigation

• Component: Alert (optioneel)
  Alleen zichtbaar bij belangrijke meldingen, zoals onderhoud.

• Component: Page Footer
  Bevat vaste content en blijft hetzelfde, ook wanneer een gebruiker is ingelogd.

---

Paginaspecifieke inhoud

• Component: Heading – Mijn berichten
  Moet altijd aanwezig zijn, en label komt overeen met de Side Navigation.

• Component: Tabel – Berichten

  • Maximaal 10 berichten zichtbaar op één pagina.
  • Ongelezen berichten worden vetgedrukt weergegeven.
  • Nieuwe berichten worden gemarkeerd met een dot badge.
  • Bij 0 berichten: een tekstregel zoals "Er zijn geen berichten".
    NOTE: We laten de heading van de tabel voor nu weg omdat de Action-Singel component, waarmee de berichten in de tabel staan uitgebreid gaat worden met extra labelmogelijkheden, waardoor de header op dit moment niet nodig is. (Zie notulen op slack van de MijnServices Check-in op 20 nov 2025 )

• Component: Paragraaf – Aantal berichten
  Weergeeft het totaal aantal berichten, alleen zichtbaar als er meer dan 10 zijn.

• Component: Zoekbalk
  Alleen zichtbaar bij meer dan 10 berichten.

• Component: Filter
  Alleen zichtbaar bij meer dan 10 berichten.

• Component: Paginering
  Alleen zichtbaar bij meer dan 10 berichten.

---

Voorbeeld

Figma voorbeeld - Mijn Berichten

Voorbeeld minder dan 10 berichten

Voorbeeld meer dan 10 berichten

---

Onderzoeksvragen

Dit zijn de vragen die tijdens de Mijn mijn mijn workshop naarboven kwamen. Mocht je in de toekomst een onderzoek uitvoeren waar dit onderwerp in voorkomt, overweeg dan de volgende vragen mee te pakken en de uitkomsten terug te koppelen. Wij zijn reuze benieuwd.

• Wat is de toegevoegde waarde van vetgedrukte styling voor ongelezen berichten versus alleen een dot badge?
• Hoe herkennen gebruikers snel welke berichten nieuw of belangrijk zijn?

Gerelateerde patronen en componenten

Ik moet de juiste links nog leggen

• Objectweergave – Mijn omgeving
• Overzicht - Taken
• Overzicht - Zaken

---

Deel hier je inzichten of link naar onderzoek dat aansluit op het gebruik van de Overzichtspagina voor berichten binnen Mijn omgevingen.

[ux-fran]

Workshop: Mijn Mijn Mijn

Tijdens de Mijn Mijn Mijn workshop onderzochten we samen met UX-designers uit overheidsland hoe de verschillende onderdelen van de Mijn omgeving eruitzien binnen hun organisatie. We verzamelden inzichten via screenshots, stemrondes en discussievragen om samen tot slimme standaarden en templates te komen.

We probeerden antwoord te krijgen op vragen zoals:

• Welke onderdelen zijn essentieel in de Page Header?
• Hoe ziet een goede breadcrumb eruit?
• Wat moet er minimaal op een overzichtspagina zoals “Mijn Zaken” of “Mijn Berichten” staan?
• Welke blokken zijn nodig in een detailpagina van een zaak of bericht?
• Welke onderdelen verdienen standaardisatie, en waar is ruimte voor variatie?

👉 Bekijk het Mijn Mijn Mijn Miro board voor stemmen, discussiepunten, inspiratie en visuele input van deelnemende organisaties.

[TessaViergever]

Over Task Navigation (ActionSingle component i.c.m. Table Header):

• ActionSingle blijven gebruiken, headers verwijderen (is consistent met taken en acties overzicht ook)

Mogelijk losse vervolg actie:

• Onderzoek: is het handig en mogelijk om de resultaten in een <ol> te zetten?
• Kan je met aria markup de table screenreader navigatie nabootsen zonder een table te gebruiken
• Is het het dan nog waard...?
• Verwachting is dat headers dan wel weer goed werken
• Testen met een a11y expert op storybook