Dot Badge

[jeffreylauwers]

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

Dot badge

Doel

Stip bij een Link of Button die zonder zichtbaar label de aandacht trekt bij een statuswijziging.

Gerelateerde componenten (niet verplicht)

Data Badge, Number Badge, Status Badge

Onderzoek

Rapport Generieke Services 2023 - Gemeente Den Haag (PDF, 9 MB)
Uit dit gebruikersonderzoek blijkt dat de ‘blauwe bolletjes’ naast een bericht vaak verkeerd werden geïnterpreteerd. Gebruikers dachten dat deze een belangrijk bericht aanduidden, terwijl ze in werkelijkheid ongeopende berichten markeerden. De aanduiding met het blauwe bolletje bij ‘Mijn berichten’ in de zijnavigatie werd daarentegen wel correct begrepen.

Onderzoek Generieke Services - Miro
Miro board dat is gebruikt tijdens het gebruikersonderzoek waarin inzichten te vinden zijn over de Dot Badge.

Badges - Material Design
Material Design gebruikt de 'Small badge' om aan te geven dat er een melding ongelezen is en wordt het meest gebruikt binnen andere componenten, zoals de navigation bar, navigation rail, top app bars, and tabs. Een screenreader kondigt "nieuwe melding" aan.

Badge notifications: why everyone wants to get rid of them - Medium
In dit artikel wordt aangegeven dat notificatiebadges veel aandacht trekken door hun associatie met urgentie en gevaar, wat gebruikers motiveert om actie te ondernemen. Ze activeren cognitieve biases zoals salience (focus op opvallende zaken) en urgency (illusie van urgentie), waardoor apps met badges sneller worden geopend. Tegelijkertijd kunnen deze badges overweldigend en stressvol zijn, wat gebruikers ertoe aanzet om manieren te zoeken om ze uit te schakelen.

[Rozerinay]

Den Haag

• Storybook
• Figma - Huidig
• GitHub

---

Screenshots / Varianten

---

Notities

• Onder de naam: Dot Indicator.
• Is een <span>.
• Positie wordt bepaald met de property position.
• Styling: rode stip met een witte border.
• Richtlijnen beschikbaar.