Notification Banner

[Rozerinay]

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

Notification Banner

Doel

Toont een informerend bericht dat niet direct is gerelateerd aan de inhoud van een pagina.

Ook bekend als

Alert Banner, Banner

Gerelateerde componenten

Alert

Onderzoek

Notification banner - GOV.UK.
Er wordt onder andere beschreven dat

• Men de notificatie kan missen als deze te vaak wordt ingezet.
• Dat de notificatie direct boven de H1 gepositioneerd moet worden.

Onder 'Research on this component' wordt daarnaast beschreven dat ze graag beter willen begrijpen of het helpt om de notificatie te sluiten, hoe hoe dat dan zou moeten gebeuren. Er is ook een link naar de Notification Banner Github discussion waar meer informatie onderzoek en aanpassingen worden gedeeld.

[jeffreylauwers]

Amsterdam

Amsterdam heeft een component genaamd 'Alert'. Deze is bij de Alert GitHub Discussion vastgelegd.

In de documentatie van de Alert wordt onder andere beschreven dat men de oranje Alert direct onder de Header zou moeten plaatsen voor belangrijke en urgente informatie. Als voorbeelden worden systeemuitval of wijzigingen in de openingstijden van een stadskantoor aangedragen.

[jeffreylauwers]

Den Haag

Den Haag heeft een component genaamd 'Alert'. Deze is bij de Alert GitHub Discussion vastgelegd.

In de documentatie van de Alert wordt onder andere beschreven dat:

• De component bovenaan de pagina of sectie worden geplaatst waarop ze van toepassing zijn
• De component onder de pagina- of sectie Heading worden geplaatst.
• De component gebruikt kan worden voor meldingen om gebruikers te informeren over belangrijke wijzigingen, actuele omstandigheden, updates of veranderingen in de systeemstatus.

[jeffreylauwers]

DSO

• Documentatie website
• Storybook
• GitHub

---

Screenshots / Varianten

Storybook

Danger

Danger with heading

Error

Info

Info compact non removable

Info compact

Rich info

Rich warning

Warning

---

Notities

• Onder de naam 'Banner'.
• Documentatie beschikbaar. Daar wordt onder andere beschreven dat:
  • Banners verschijnen helemaal bovenaan het scherm en verschuiven de inhoud eronder. Ze laten algemene meldingen zien over het product of systeem, maar niet over specifieke gebruikersacties.
  • Ze blijven staan totdat de gebruiker ze verwijdert, of als de status die de banner veroorzaakte is opgelost. Banners kunnen optioneel een button of link bevatten, bijvoorbeeld naar meer informatie. Er mag slechts één banner tegelijk te zien zijn.
  • Banners blijven staan totdat de gebruiker ze verwijdert of als de status, die de banner veroorzaakte, is opgelost. Banners hebben altijd een ARIA role="alert", zodat een screenreader ze meteen voorleest wanneer ze verschijnen. Screenreaders en andere hulptechnologie starten vaak bij de <h1>, dus zonder role="alert" worden ze gemist.

[jeffreylauwers]

DUO

DUO heeft een component genaamd 'Notification'. Deze is bij de Alert GitHub Discussion vastgelegd.

In de documentatie van de Notification component wordt onder andere beschreven dat:

• Een notificatie kan betrekking hebben op de actie die de gebruiker op dat moment uitvoert. In dat geval dient de notificatie inline getoond te worden.
• Wanneer een notificatie betrekking heeft op de gehele DUO omgeving (algehele storing), dan wordt de notificatie onder de navigatie getoond. In dat geval plaats je de notificatie als eerste element boven de main container.

[jeffreylauwers]

OpenGemeenten

OpenGemeenten heeft een component genaamd 'Waarschuwingen' (Notification in code). Deze is bij de Alert GitHub Discussion vastgelegd.

In de documentatie van de Notification component wordt onder andere beschreven dat:

• De component gebruikt kan worden om bezoekers te waarschuwen voor of wijzen op een bepaalde situatie.
• Het in sommige gevallen kan zijn dat de situatie dermate kritiek is dat de melding op elke pagina van de website getoond moet worden. En dat men in dat geval gebruik kan maken van een Calamiteit component. Momenteel is dit component niet beschikbaar.

Toevoeging van Martijn:

Hierbij een oud ontwerp van hoe het eruit ziet op mobiel. Dit is een melding die zo belangrijk is dat die op iedere pagina staat, deze kun je wel inklappen (x) maar nooit wegklikken (in tegenstelling tot een alert). Omdat het ook mogelijk is dat er meerdere meldingen onder elkaar komen te staan (“afspraak maken niet mogelijk” en “gemeentehuis staat in brand”) hebben we ervoor gekozen om als tekst “toon alle gesloten meldingen” voor de link te gebruiken om de melding weer te laten zien.

[jeffreylauwers]

RVO

RVO heeft een component genaamd 'Alert'. Deze is bij de Alert GitHub Discussion vastgelegd.

Er is op dit moment geen documentatie beschikbaar waaruit blijkt of dit component ook als Notification Banner ingezet kan worden.

[jeffreylauwers]

Utrecht

Utrecht heeft een component genaamd 'Alert'. Deze is bij de Alert GitHub Discussion vastgelegd.

In de documentatie van de Alert component worden gerelateerde componenten uiteengezet. Er wordt onder andere beschreven dat:

• Alert zo snel mogelijk wordt aangekondigd.
• Notification banner ook snel wordt aangekondigd, omdat het één van eerste onderdelen van de pagina is als je de banner plaatst aan het begin van de page header. Je kunt de banner overslaan een skip link.

Er is echter geen implementatie van de Notification Banner component te vinden.

[jeffreylauwers]

Zijn dit ook Notification Banners?

Op dit moment vraag ik mij af of berichten die zelfs boven de Page Header staan ook Notification Banners zijn.

NL Design System

Valsplat

React Native

Docusaurus