Alert

[jeffreylauwers]

We willen graag meer leren over de Alert 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 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

Alert

Doel

Belangrijk bericht dat informeert over de huidige activiteit van de gebruiker.

Ook bekend als

Message, Notification.

Gerelateerde componenten

Alert Dialog, Invalid Form Alert, Notification Banner

Onderzoek

Onderzoek Generieke Services - Gemeente Den Haag
Gebruikersonderzoek waarin inzichten over de Alert zijn verzameld. Er is aangegeven dat de ‘groene balk’ met de bevestiging na het uitvoeren van een taak goed opvalt en als zeer prettig wordt ervaren.

Onderzoek Generieke Services - Miro
Miro board dat is gebruikt tijdens het gebruikersonderzoek Generieke Services waarin een inzicht te vinden is over de Alert.

ARIA live regions - MDN docs
Het artikel bespreekt hoe ARIA live-regio’s ervoor zorgen dat dynamische contentupdates toegankelijk worden voor gebruikers van assistieve technologie door gebruik van het aria-live-attribuut.

ARIA: alert role - MDN docs
In dit artikel wordt het gebruik en de toepassing van de aria alert role beschreven. Wanneer deze rol aan een element wordt toegevoegd, stuurt de browser een toegankelijk alert-evenement naar ondersteunende technologieën, die de gebruiker vervolgens kunnen waarschuwen.

Alert Pattern - ARIA Authoring Practices Guide (APG)
Interactief voorbeeld en WAI-ARIA richtlijnen.

Notification Banner - GOV.UK
Notification Banner (vergelijkbaar met de Alert) implementatie bij GOV.UK. Onder 'Research on this component' is genoteerd waar nog nader onderzoek naar moet worden gedaan. Er is ook een Notification banner Discussion waar meer informatie, onderzoek en aanpassingen worden gedeeld. Enkele interessante comments:

• Gebruik van rode kleuren. Rode kleuren zijn effectief voor directe foutmeldingen, maar veroorzaken mogelijk stress als ze onnodig op een dashboard verschijnen.
• Positie van melding. Uit onderzoeken met meldingen voor belastingkredieten bleek dat mensen meldingen bovenaan het scherm vaak over het hoofd zagen; door ze direct onder de <h1>-kop te plaatsen, werden ze veel vaker opgemerkt.
• Accessibility review. Er is een interne toegankelijkheidsbeoordeling gedaan. Daar wordt ingegaan op de blauwe banner, autofocus, gebruik van meerdere banners en de styling.

[Rozerinay]

Amsterdam

• Storybook
• Figma
• Github

---

Screenshots / Varianten

Storybook

Default (warning)

Warning
Display a warning when user action is required.

Error
In case of an error, use the red alert. Provide the user with suggestions on alternative ways to achieve the goal.

Success
Announce the success of a significant action.

Info
An informative message can emphasize matters that are useful to follow.

With List
For clarification, formatted text can be included in the alert.

With Inline Link
Include an inline link in the text to guide the user.

Without Heading
Sometimes, a heading is unnecessary. The icon automatically becomes slightly smaller.

Responsive gedrag

Figma

Warning

Info

Error

Success

---

Notities

• De iconen verschillen tussen Storybook en Figma.
• Heading 1 t/m Heading 4 kunnen in de code worden toegepast, maar dit verandert de zichtbare lettergrootte niet.
• Er is een optie om de Alert met of zonder Heading weer te geven.
• Als er geen Heading wordt gebruikt, wordt het icoon automatisch kleiner.
• De Alert kan worden gesloten via een Icon Button (kruisje).
• Verschillende border kleuren worden gebruikt om het type Alert aan te geven.
• Verschillende iconen worden toegepast om het type Alert te verduidelijken.
• Er is geen achtergrondkleur ingesteld.
• De inhoud kan bestaan uit een Paragraph, Link en List.
• Richtlijnen beschikbaar.

[Rozerinay]

Den Haag

• Storybook
• Figma - Huidig
• Figma - WIP
• Github

---

Screenshots / Varianten

Storybook

Default

Success

Warning

Error

With Action

With Close

With Action And Close

With Custom Icon

Responsive gedrag

Figma - Huidig

With action

Without action

With action not closeable

Figma - WIP

Informative

Negative

Positive

Warning

---

Notities

• De iconen verschillen tussen Storybook en Figma.
• Heading is niet instelbaar. Er is maar 1 Heading gebruikt.
• Er is geen optie om de Alert zonder Heading weer te geven.
• De Alert kan worden gesloten via een Icon Button (kruisje).
• Verschillende achtergrondkleuren worden gebruikt om het type Alert aan te geven.
• Verschillende iconen worden toegepast om het type Alert te verduidelijken.
• De inhoud kan bestaan uit een Paragraph en Button.
• Richtlijnen beschikbaar.

[Rozerinay]

DSO

• Documentatie website
• Storybook
• Github

---

Screenshots / Varianten

Documentatie website

Storybook

Error

Info

Success

Warning

Without button

Compact (without icon)

Responsive gedrag

---

Notities

• De iconen verschillen tussen Storybook en Figma.
• Heading 2 t/m Heading 6 kunnen in de code worden toegepast, maar dit verandert de zichtbare lettergrootte niet.
• Er is een optie om de Alert met of zonder Heading weer te geven.
• De Alert kan niet worden gesloten.
• Verschillende achtergrondkleuren worden gebruikt om het type Alert aan te geven.
• Verschillende iconen worden toegepast om het type Alert te verduidelijken.
• De inhoud kan bestaan uit een Paragraph, Link en Button.
• Compacte variant heeft een border-inline-start en geen icoon.
• Richtlijnen beschikbaar.

[Rozerinay]

DUO

Documentatie website

---

Screenshots / Varianten

Informatief (inline)
Om een gebruiker te informeren.

Waarschuwing (inline)
Om een gebruiker te waarschuwen.

Fout (inline)
Om een gebruikter te laten weten dat er iets fout is gegaan.

Succes (inline)
Om een gebruikter te laten weten dat een actie geslaagd is.

Sluitbare notificaties
Gebruik alleen als de informatie niet van cruciaal belang is te lezen of erop te reageren.

Toast notificaties
Toasts zijn op tijd gebaseerde notificaties die worden gebruikt om korte berichten weer te geven. Ze verschijnen bovenaan het scherm en verdwijnen na 7 seconden.

Responsive gedrag

---

Notities

• Onder de naam: Notification.
• Er is geen gebruik gemaakt van iconen.
• Heading is niet instelbaar. Er is maar 1 Heading gebruikt.
• Er is geen optie om de Alert zonder Heading weer te geven.
• De Alert kan worden gesloten via een Button (kruisje met 'sluit' tekst).
• Verschillende achtergrond kleuren worden gebruikt om het type Alert aan te geven.
• De inhoud kan bestaan uit een Paragraph.
• Wordt of inline of boven de main container getoond.
• Richtlijnen beschikbaar.

[Rozerinay]

OpenFormulieren

Storybook

---

Screenshots / Varianten

Error Message

Ok Message

Info Message

Warning Message

Responsive gedrag

---

Notities

• Onder de naam: Error Message.
• Er is geen Heading gebruikt.
• De Message kan niet worden gesloten.
• Verschillende achtergrondkleuren worden gebruikt om het type Alert aan te geven.
• Verschillende iconen worden toegepast om het type Alert te verduidelijken.
• De inhoud kan bestaan uit een Paragraph.

[Rozerinay]

OpenGemeenten

• Documentatie website
• Pattern Lab

---

Screenshots / Varianten

Notification

Notification Alert

Notification Information

Notification Success

Notification Warning

Notification Link

Notification Layout 1 Alert

Notification Layout 1 Information

Notification Layout 1 Success

Notification Layout 1 Warning

Responsive gedrag

---

Notities

• Onder de naam: Notifications (Patternlab) en Waarschuwingen (Documentatie website)
• Heading is niet instelbaar. Er is maar 1 Heading gebruikt.
• Er is geen optie om de Alert zonder Heading weer te geven.
• De Notification kan niet worden gesloten.
• Verschillende achtergrondkleuren worden gebruikt om het type Notification aan te geven.
• Verschillende iconen worden toegepast om het type Notification te verduidelijken.
• De inhoud kan bestaan uit een Paragraph en Link.
• De 'Layout' variant heeft alleen een icoon en Heading, en geen achtergrond.

[Rozerinay]

Rotterdam

• Storybook
• Figma

---

Screenshots / Varianten

Storybook

Notification

Alert

Warning

OK

Responsive gedrag

Figma

Neutral and closeable

Accomplishment

Warning !

Alert !!!

Responsive gedrag

---

Notities

• Onder de naam: Alert in Storybook en Notifications in Figma.
• De namen van de types verschillen tussen Storybook en Figma.
• Er is geen Heading gebruikt.
• Notification in Figma kan worden gesloten via een kruis icoon.
• Verschillende achtergrondkleuren worden gebruikt om het type Alert aan te geven.
• Verschillende iconen worden toegepast om het type Alert te verduidelijken.
• De inhoud kan bestaan uit een Paragraph en Link.
• In Figma staat documentatie die erop wijst dat deze componenten als Toast of Snackbar ingezet worden.

[Rozerinay]

RVO

• Documentatie website
• Storybook
• Figma
• GitHub

---

Screenshots / Varianten

Storybook

Info

Warning

Error

Success

With heading

With button

With close button

Responsive gedrag

Figma

---

Notities

• Er is een Heading gebruikt, maar in feite is dit een text met het strong element.
• Er is een optie om de Alert met of zonder Heading weer te geven.
• Alert kan worden gesloten via een Button (kruisje).
• Verschillende achtergrondkleuren worden gebruikt om het type Alert aan te geven.
• Verschillende iconen worden toegepast om het type Alert te verduidelijken.
• De inhoud kan bestaan uit een Paragraph, Button en Link.

[Rozerinay]

Utrecht

• Storybook
• Figma
• GitHub

---

Screenshots / Varianten

Storybook

Default

Info

OK

Warning

Error

With Icon

Responsive gedrag

Figma

Informative

Negative

Positive

Warning

---

Notities

• Heading is niet instelbaar. Er is maar 1 Heading gebruikt.
• Er is geen optie om de Alert zonder Heading weer te geven.
• De Alert kan niet worden gesloten.
• Verschillende achtergrondkleuren worden gebruikt om het type Alert aan te geven.
• Mogelijkheid om een icoon toe te passen.
• In Figma worden verschillende iconen toegepast om het type Alert te verduidelijken.
• In Figma worden border kleuren gebruikt om het type Alert aan te geven.
• De inhoud kan bestaan uit een Paragraph.
• De namen van de types verschillen tussen Storybook en Figma.
• Richtlijnen beschikbaar.

[MariekeBrouwer]

Nice! Wij hebben bij het bekijken van de alert eigenlijk nog een aantal vragen/opmerkingen:

• het kan zijn dat het systeem van leverancier meerdere meldingen/alerts genereert. Handig is dan ook dat er een bepaalde spacing zit tussen de verschillende alerts.
• is er ook documentatie beschikbaar over wanneer je wel/niet meldingen van een kruisje voorziet?
• wanneer er directe actie nodig is (op een andere pagina) is een knop handig :)

[Rozerinay]

Dank je wel voor je goede vragen.

Laten we dit zeker bespreken als deze component richting Candidate gaat.

Er is dan ook nog geen documentatie beschikbaar over het wel / niet tonen van een kruisje. Op dit moment heeft alleen DUO documentatie beschikbaar over wanneer je dit doet.

We zouden graag vanuit de community willen horen wanneer dit wordt gedaan.

[Rozerinay]

✨ Dit component is nu Help Wanted ✨

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

[Rozerinay]

✨ Dit component is nu Community ✨

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