Status Badge

[Rozerinay]

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

Status Badge

Doel

Label dat informeert over een status en de aandacht trekt met een signaalkleur.

Ook bekend als

Badge

Gerelateerde componenten

Data Badge, Dot Badge, Number Badge

Onderzoek

Rapport Generieke Services 2023 - Gemeente Den Haag (PDF, 9 MB)
Uit dit gebruikersonderzoek blijkt dat de Status Badge heel goed werkt. Het wordt makkelijker begrepen dan het gebruik van enkel iconen.

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

Badges: How I Used System Thinking and Research to Evolve a Small But Essential UI element
Onderzoek naar de kleuren en het ontwerp van een Status Badge.

Tag - GOV.UK
Tag implementatie bij GOV.UK. Bij de Tag Discussion wordt meer informatie, onderzoek en aanpassingen gedeeld. Enkele interessante comments:

• De component gebruikte voorheen hoofdletters in vetgedrukte tekst voor de tags. Dit is gewijzigd omdat onderzoek heeft aangetoond dat hoofdletters moeilijker te lezen kunnen zijn, met name voor langere tagtekst.
• De component gebruikte voorheen witte tekst op een donkere achtergrond. Onderzoek van meerdere teams wees uit dat sommige gebruikers deze zagen als knoppen en probeerden erop te klikken. Het ontwerp is gewijzigd om dit te voorkomen door een lichtere achtergrondkleur en donkerdere tekst te gebruiken.

[Rozerinay]

Amsterdam

Bekijk ook de toevoeging van Amsterdam in de Data Badge Discussion

[Rozerinay]

DSO Toolkit

• Documentatie website
• Storybook
• Github

---

Screenshots / Varianten

Storybook

Attention

Danger

Error

Info

Outline

Plain

Primary

Success

Warning

---

Notities

• Onder de naam: Badge.
• Beschikbaar in 9 statussen.
• Iedere status heeft een unieke kleur.
• Bestaat uit een message.
• Richtlijnen beschikbaar (documentatiewebsite).

[Rozerinay]

DUO

Bekijk ook de toevoeging van DUO in de Data Badge Discussion

[Rozerinay]

Rotterdam

• Storybook
• Figma
• Github

---

Screenshots / Varianten

Storybook

Light blue

Blue

Dark blue

Green blue

Red

Dark yellow

Figma

---

Notities

• Onder de naam: Status Badge.
• Is onderdeel van de component Badge, net zoals Data Badge.
• Beschikbaar in 6 statussen.
• Iedere status heeft een unieke kleur. De statussen hebben toevallig een kleur als naam, zoals: 'Light blue'.
• Heeft in code de property status (string) én appearance (string), waarbij je bij de appearance kan kiezen uit een badge.

[Rozerinay]

Utrecht

• Storybook
• Figma
• Github

---

Screenshots / Varianten

Storybook

Default

Neutral

Success

Warning

Error

Safe

Danger

Active

Inactive

Valid

Invalid

Figma

Default

Informative

Negative

Positive

Warning

---

Notities

• Onder de naam: Status Badge.
• Beschikbaar in 11 statussen in Storybook en 5 statussen in Figma.
• Statussen in Storybook en in Figma verschillen van elkaar.
• De statussen hebben verschillende kleuren, waarvan sommigen dezelfde kleur hebben, zoals 'safe' en 'active'.