Modal Dialog

[jeffreylauwers]

We willen graag meer leren over het Modal Dialog 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

Modal Dialog

Doel

Toont een venster over de pagina om de aandacht op een enkele taak of bericht te vestigen. Interactie met onderliggende pagina wordt geblokkeerd.

Gerelateerde componenten

Alert Dialog, Drawer, Non Modal Dialog

Onderzoek

Analyse van inzichten opgehaald tijdens gebruikersonderzoek bij gemeente Den Haag - Miro
Miro board waar inzichten uit een gebruikersonderzoek van de gemeente Den Haag zijn beschreven. Tijdens het onderzoek werd er een prototype van een meerstappenformulier voorgelegd aan ondernemers. Hierbij werd onder andere het patroon ‘Opslaan en later verdergaan’ doorlopen waar het Modal Dialog component voor werd ingezet. Inzichten: CTA in modal valt op en men gaat er goed mee overweg.

Dialogs and popovers seem similar. How are they different? - Hidde de Vries
Blogpost waarin Hidde de verschillen tussen Dialogs en pop-overs uiteen zet.

Modal & Nonmodal Dialogs: When (& When Not) to Use Them - Nielsen Norman Group
Artikel waarin wordt beschreven wanneer je Modal Dialogs wel en niet hoort te gebruiken.

The Current State of Homepage UX – 8 Common Pitfalls & Best Practices - Baymard Institute
Artikel waarin het inzicht wordt gedeeld dat Modal Dialogs op de homepagina door enkele respondenten als spam wordt ervaren.

Modals and Pop-ups design best practices (with examples) - Youtube
Video waarin Vitaly Friedman best practices van Modal Dialogs (en pop-ups) toont.

modalzmodalzmodalz
Single page website waarin het te overmatig gebruik van Modals Dialogs wordt aangekaart. Aangevuld met alternatieve interactie patronen en best practices voor als je toch besluit een Modal Dialog in te zetten.

Where to Put Focus When Opening a Modal Dialog
Adrian Roselli beschrijft de verschillende afwegingen die je kan maken om te besluiten waar je de focus naar toe brengt bij het openen van een Modal Dialog.

Bekijk het Button group component voor meer informatie

[jeffreylauwers]

Amsterdam

• Storybook
• Figma

---

Screenshots / Varianten

Storybook

Default

Small viewport

With Scrollbar
Content taller than the dialog itself will scroll.

Figma

---

Notities

• Verschil tussen Figma en Storybook wat betreft gedrag Button group bij small viewport.
• Richtlijnen en beschrijving van keyboard navigatie beschikbaar (Storybook).

Bekijk het Button group component van Amsterdam voor meer informatie

[jeffreylauwers]

Den Haag

• Storybook
• Figma - Huidig
• Figma - WIP

---

Screenshots / Varianten

Storybook
Default

Small viewport

Scrollabe

Figma Huidig

Default

Small viewport

Zonder acties

Figma WIP

---

Notities

• Richtlijnen beschikbaar.
• Verschil tussen Figma (Huidig + WIP) en Storybook wat betreft gedrag Heading kleur en Button group bij small viewport.
• Modal dialog in Figma - WIP gelijk aan Utrecht (Figma).

Bekijk het Button group component van Den Haag voor meer informatie

[jeffreylauwers]

DSO Toolkit

• Documentatie website

---

Screenshots / Varianten

Storybook

Confirm

Small viewport

Passive

Active

Loading

With Datepicker

Fullscreen

---

Notities

• Richtlijnen beschikbaar. Inclusief richtlijnen over toegankelijkheid en role (dialog vs. alert dialog).
• Veel verschillende vormen in Storybook.
• Niet duidelijk over en ook een backdrop aanwezig is.

[jeffreylauwers]

DUO

• Documentatie website

---

Screenshots / Varianten

Documentatie website

Modal met backdrop
Deze responsive modal wordt doorgaans het meest gebruikt voor extra informatie en korte gebruikersacties. De backdrop zorgt ervoor dat de focus op de modal komt te liggen. De gebruiker wordt niet afgeleid door informatie achter de modal.

Modal voor afbeeldingen
Deze modal laat een afbeelding vergroot zien.

XL modal

Large modal

Small modal

---

Notities

• Richtlijnen beschikbaar.
• Naast breedte ook classes voor hoogte beschikbaar.
• Button in principe links uitgelijnd, maar lijkt rechts gepositioneerd te worden wanneer footer tekst bevat.
• Sluit button met label.
• Responsive gedrag lijkt te zijn dan bij een small viewport de modal de gehele viewport afdekt, maar kon dit niet heel goed checken.

[jeffreylauwers]

Open Formulieren

• Storybook

---

Screenshots / Varianten

Storybook

Small viewport

---

Notities

• Niet duidelijk over en ook een backdrop aanwezig is.

[jeffreylauwers]

Rotterdam

• Figma

---

Screenshots / Varianten

Figma

Small
Mostly used for text only, like an explanation or a notification after a certain action.

Medium
Used when some additional UI elements are required (e.g. tables).

Large
Only used for heavy duty applications for employees.

---

Notities

• In 3 formaten, documentatie per formaat beschikbaar.

Bekijk het Button group component van Rotterdam voor meer informatie

[jeffreylauwers]

RVO

• Documentatie website
• Storybook
• Figma

---

Screenshots / Varianten

Figma

---

Notities

• Documentatie beschikbaar.
• Component lijkt enkel in Figma beschikbaar.
• Modal dialog lijkt naast sluit optie geen acties (Button group) te bevatten.

[jeffreylauwers]

Utrecht

• Storybook
• Figma

---

Screenshots / Varianten

Storybook

Default

Small viewport

Info

Warning

Error

Figma

---

Notities

Storybook

• Genaamd: Alert dialog
• Lijkt een combinatie van Alert en Backdrop component.

Figma

• Gelijk aan Den Haag - WIP (Figma).

Bekijk het Button group component van Utrecht voor meer informatie

[hidde]

Ik vind het belangrijk om “modal” te zien als eigenschap van “dialog”, wat we doen door het component “modal dialog” te noemen, we vermijden zo alleen “modal” te gebruiken als naam. Als counterpart kunnen we dan los “non-modal dialog” introduceren? Met bij beide duidelijke uitleg, misschien in de richting van een beslisboom, over wanneer je het beste kunt kiezen voor een modal vs een non-modal dialog.

Dit sluit aan bij hoe modals op het web werken: een dialog element in HTML kan met show() als non-modal worden getoond en met showModal() als modal. Non-modal dialogs worden soms ook popovers genoemd, en er is het popover attribuut in HTML dat hier specifiek voor is gemaakt, maar “non-modal dialog” is waarschijnlijk een makkelijkere naam, vanwege het contrast met “modal dialog”.

[rianrietveld]

Discussie tussen onderzoekers over de role="document" in een modal.
Role="document" aan een pop-up toevoegen: WCAG-Audit-Discussions/NL-BE#74

[jeffreylauwers]

✨ Dit component is nu Help Wanted ✨

Help je mee hem door de Community stappen te krijgen?
Modal dialog op het Community bord

[Rozerinay]

Aanpassing Icon positie in Toolbar Button van Modal Dialog

Bij de Toolbar Button in de Modal Dialog gaf Marieke aan graag de volgorde van tekst en icoon te willen omdraaien, van X Sluiten naar Sluiten X. Er was op dat moment alleen ondersteuning voor een icoon aan het begin (icon-start), niet aan het einde (icon-end).

Jeffrey gaf aan dat deze component qua spacing gelijk is aan de algemene Button, en dat het technisch geen probleem is om een icon-end optie toe te voegen. Deze optie is inmiddels toegevoegd.

Bron: uitwisseling tussen Marieke en @jeffreylauwers in de NL Design System Figma bibliotheek.

[eslook]

Gerelateerd aan de Modal Dialog: tijdens de estafettemodeldag van vrijdag 28 november hebben we een werksessie gedaan over de Alert Dialog.

Het eindresultaat hiervan is: we gaan door met Alert Dialog in Help Wanted. Geïnteresseerd in de hoe en wat? Je kan in de Alert Dialog GitHub discussie de samenvatting vinden van de werksessie, plus een link naar de FigJam! Meningen, inzichten, input? Die kan je gewoon reageren in de GitHub discussie!