Alert Dialog

[jeffreylauwers]

We willen graag meer leren over de Alert Dialog 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 gewaardeerd als je onderzoeksresultaten deelt. Is dit component getest met eindgebruikers of meegenomen in een toegankelijkheidsonderzoek? Deel dan vooral de inzichten die je hebt opgedaan!

Link naar bericht in Slack

---

Naam

Alert Dialog

Doel

Opent een venster waarin de gebruiker een actie moet uitvoeren om verder te gaan. De rest van de pagina is tijdelijk geblokkeerd.

Gerelateerde componenten

Alert, Modal Dialog, Non Modal Dialog

Onderzoek

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.

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.

UI Modes & Modals – Nielsen Norman Group
Korte video waarin wordt uitgelegd hoe UI Modes & Modals tijdelijk de interactie met de rest van de interface beperken. Benadrukt dat modals effectief kunnen zijn voor focus, maar ook snel de flow van de gebruiker kunnen verstoren als ze onnodig worden ingezet.

Alert Fatigue in User Interfaces – Nielsen Norman Group
Video over hoe te veel waarschuwingen, modals en pop-ups leiden tot 'alert fatigue', waardoor gebruikers belangrijke meldingen gaan negeren. Adviseert terughoudendheid in het gebruik van modals en duidelijke hierarchie in meldingstypes.

Popup Problems – Nielsen Norman Group
Korte video over veelvoorkomende problemen met pop-ups: ze onderbreken de gebruiker, worden vaak als opdringerig ervaren en kunnen toegankelijkheidsproblemen veroorzaken. Biedt suggesties om ze minder storend en relevanter te maken.

Open Dialog – Scott O’Hara
Scott O’Hara gaat diep in op de toegankelijkheidsaspecten van het <dialog>-element in HTML. Hij bespreekt het gedrag, de valkuilen, en hoe ontwikkelaars modals correct kunnen implementeren.

Modal Dialogue – GOV.UK Design System
De GOV.UK-componentgids beschrijft hoe modale dialogen binnen overheidswebsites moeten worden toegepast: enkel bij kritieke acties, altijd met toetsenbordnavigatie en een duidelijke manier om te sluiten. Richt zich sterk op toegankelijkheid en consistent gebruik.

[veslav3]

Deze is geïmplementeerd door Amsterdam: https://designsystem.amsterdam/?path=/docs/components-containers-dialog--docs

[eslook]

Dat lijkt zo, echter dat is een Modal Dialog, niet een Alert Dialog. Dit zie je aan dat je de modal altijd kan sluiten zonder een actie te ondernemen, in plaats van dat je een actie moet ondernemen voordat je de dialog mag sluiten.

[eslook]

Utrecht

• Storybook
• GitHub

---

Screenshots / Varianten

Storybook

Info (Default)

Warning

Error

---

Notities

• Onder de naam: Alert Dialog.
• Bestaat uit content en een optionele icon.
• Bevat drie varianten (error, info, warning), waarvan info de default is.
• Responsive gedrag: geen verandering.
• Richtlijnen beschikbaar in de README middels GitHub en Storybook.

[JJGrootveld]

KVK

Screenshots / Varianten

Storybook

Documentatie in Figma

Component in Figma

Onderzoek naar dit component

• De blauwe "Info" variant van het Notification component wordt in een aantal van onze onderzoeken makkelijk over het hoofd gezien tenzij zij echt bewust de pagina scannen en op zoek zijn naar informatie.

[eslook]

@JJGrootveld ik vraag me af of dit meer een Alert is dan een Alert Dialog? De Alert (ook bekend als Message, Notification) is een component dat bijvoorbeeld inline gebruikt word, of in een deel van het scherm verschijnt zonder de interactie met de onderliggende pagina te blokkeren.

Ik denk ook niet dat het een Modal Dialog is of een Non Modal Dialog is, omdat de enige interactieve elementen het kruisje zijn en tekst links. Dit komt meer over met de Alert, in vergelijking met deze twee die het kruisje, tekst links, en de interactieve buttons in de footer heeft.

Hoe zie jij dit?

[JJGrootveld]

Je hebt gelijk! Dit is meer een notification/alert component omdat er geen directe actie aan verbonden is. Ik had de vergelijking alleen visueel gemaakt; maar ik denk toch relevant omdat de toevoeging van de acties binnen ons component veel wordt aangevraagd. Dus ik ben ook benieuwd of we een pivot moeten maken naar een alert dialog, maar dan wordt de context groter.

Op dit moment is het uitsluitend een informatief component richting de gebruiker, maar met acties en de alert dialog zoals hij hier wordt ingestoken: "Opent een venster waarin de gebruiker een actie moet uitvoeren om verder te gaan. De rest van de pagina is tijdelijk geblokkeerd."; is dan al eigenlijk fundamenteel anders. En dan vinden jullie dus ook aangezien het een apart component voorstel is.

Ik ben zelf vooral heel benieuwd hoe DS gebruikers (vooral ook in design/Figma) de juiste keuze gaan maken tussen de alert en alert dialog. Dat is mijn terughoudendheid bij het splitsen van de componenten.

[eslook]

DSO

• Documentatie website
• Storybook via documentatie website
• GitHub

---

Screenshots / Varianten

Storybook

Confirm

Small viewport

Passive

Active

Loading

With Datepicker

Fullscreen

---

Notities

• Bestaat onder de naam Modal. Kan toegepast worden zowel als Alert Dialog als Modal Dialog.
• Richtlijnen beschikbaar. Inclusief richtlijnen over toegankelijkheid en role (dialog vs. alert dialog).
• Veel verschillende vormen in Storybook.
• Zie ook dezelfde comment in Modal Dialog.

[eslook]

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

• Bestaat onder de naam Modal. Kan toegepast worden zowel als Alert Dialog als Modal Dialog.
• 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.
• Zie ook dezelfde comment in Modal Dialog.

[eslook]

Tijdens de estafettemodeldag van vrijdag 28 november hebben we een werksessie gedaan over de Alert Dialog. Hier vind je de FigJam.

Context

Het verschil tussen de Modal Dialog en de Alert Dialog is dat je met de Alert Dialog verplicht bent om een actie te ondernemen voordat je verder gaat (bijvoorbeeld annuleren of accepteren), terwijl je met de Modal Dialog ook zonder actie te ondernemen de modal kan sluiten (middels bijvoorbeeld escape of de sluit knop).

De Modal Dialog is op dit moment al Community. De Alert Dialog is onderweg naar Community. Maar hier is de vraag naar voren gekomen:

“Moet Alert Dialog wel een los component zijn van Modal Dialog, of is Alert Dialog een implementatie van Modal Dialog?”

Originele discussie op Slack:
https://codefornl.slack.com/archives/C7KDQRXMZ/p1760687089821019

Activiteiten

• Klassikaal verduidelijken wat de verschillen zijn tussen de gerelateerde componenten: Alert Dialog, Modal Dialog, Non-Modal Dialog, Alert, Note (Spotlight Section) ter voorbereiding op de sessie.
• Individueel stickies plaatsen over hoe jij de toekomst van de Alert Dialog ziet:
  • Alert Dialog en Modal Dialog moeten 2 aparte componenten zijn, want...
  • Alert Dialog moet een implementatie zijn van Modal Dialog, want...
  • Ik heb een andere gedachte, namelijk...
• Klassikaal de stickiesbespreken om discussie op te starten.
• Individueel stickies plaatsen over welke verschillende varianten of stories van de Alert Dialog en Modal Dialog jij wilt zien.
• Klassikaal de stickies bespreken.
  • Allereerst om scenario's uit te werken en te beslissen welk component deze toe doet.
  • Vervolgens enkel om de kleur aan te passen om te weergeven bij welk component deze hoort.
  • De stickies uitbreiden aan de hand van discussies.
  • Vraagteken stickers geplaatst waar nog onderzoek voor gewenst is.

Dit zorgde geleidelijk voor duidelijke punten.

Wegneempunten

1. Alert Dialog vs Modal Dialog

Stelling:
De keuze voor de een of de ander kan besloten worden met de vraag: is de dialog dismissable? Zo ja, dan is het een Modal Dialog. Zo nee, dan is het een Alert Dialog. Hoe beslis je als UX designer of de dialog dismissable is? Word de dialog getriggerd door de gebruiker, is het onderdeel van de user flow, dan is het een Modal Dialog. Word de dialog getriggered door het systeem, bijvoorbeeld aan de hand van de sessie, dan is het een Alert Dialog.

Dit is bewezen tijdens de werksessie “varianten en stories sorteren naar Alert Dialog vs Modal Dialog”

Met deze stelling gaan wij verder. Deze stelling kan op Community niveau door de Community aan de tand gesteld worden.

2. Verbeteren van de documentatie

• We willen de omschrijvingen van de gerelateerde componenten verbeteren -> Verbeter component omschrijving Alert Dialog en gerelateerde componenten documentatie#3163.
• We willen een artikel over hoe je kiest tussen de twee componenten -> Artikel keuzehulp tussen Modal Dialog en Alert Dialog documentatie#3162.

3. Potentieel onderzoek

• Meerdere dialogs tegelijk zie sticky
• Image Light Box zie sticky
• Gedrag na login timeout zie sticky
• Gewenst gedrag voor toetsenbord gebruikers en screenreader gebruikers zie sticky
• Formulier in (alert) dialog zie sticky
• Links in alert dialog zie sticky
• Alert dialog met <details> zie sticky
• Stelling over dismissable zie sticky

4. Keuze voor enkel component versus twee componenten

• Wij kiezen voor de duidelijke scheiding tussen de twee componenten.
• Afwijkingen zijn mogelijk, en toegestaan, want het is Help Wanted.
• Aan de hand van de Community implementaties kunnen we leren hoe dit uiteindelijk uitpakt in Candidate. Het is ook goed mogelijk dat dit uiteindelijk betekent dat Modal Dialog en Alert Dialog worden samengevoegd naar Modal Dialog in Candidate, als ervaring uit de Community blijkt.
• We hebben al getest in deze werksessie met varianten en stories (use cases / situaties). Meer zullen vanuit de Community moeten komen tijdens de Community fase.

De scheiding van deze twee componenten komt niet vaak voor in andere libraries. Echter NL Design System legt een focus op toegankelijkheid, waardoor er een expliciet verschil is tussen de twee componenten. Dit is ook in lijn met hoe NL Design System de verschillende inputs opsplitst: Text Input, Password Input, Date Input, File Input, Number Input, etc.

5. Gerelateerde componenten op de website

• Voor de korte termijn, voor deze specifieke componenten, willen we op de website noteren welke componenten gerelateerd zijn. Deze relaties staan al in de GitHub backlog/discussie. Uit ervaring met de community blijkt dat het handig is om bekend te zijn met deze groep van componenten, om een goede keuze te kunnen maken voor een component -> Voeg gerelateerde componenten toe als tekst voor Alert Dialog en gerelateerde componenten documentatie#3160.

Voor de lange termijn is dit idealiter een betere oplossing, echter is daar op dit moment geen plan voor, ook omdat de website word herbouwd in de nabije toekomst.

[eslook]

✨ Dit component is nu Help Wanted ✨

Help je mee hem door de Community stappen te krijgen?
Alert Dialog op het Community bord