Data Summary

[Rozerinay]

We willen graag meer leren over het Data Summary component. In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie?

Deel hieronder een link naar Figma, Storybook of screenshots. Met deze informatie kunnen we bewijzen dat het 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

Data Summary

Doel

Lijst met eigenschappen en bijbehorende data over een onderwerp.

Ook bekend als

Data List

Gerelateerde componenten

Description List, Form Summary

Onderzoek

Bold of Regular
We zijn op zoek naar een rationale achter de keuze voor Bold of Regular voor de 'Key' of 'Value'. Over het algemeen lijkt de 'Key' bold te worden weergegeven en de 'Value' regular. Echter kan het omgekeerde ook voorkomen (Amsterdam, DSO).

Bij Amsterdam lijkt hier nog geen definitieve richtlijn voor te zijn. Zie comment van Nico Druif in Slack

Vragen rondom dit punt werden ook gesteld op UX stackexchange:

• When displaying statistics to a user, is it better to bold the data or the label?
• Description and Value, which should be bold?

Daar wordt o.a. het volgende benoemd:

So a rule of thumb:
Long lists (>5 items) seen rarely (<10 a month): Bold the label.
Short lists (<5 items) seen frequently (>10 a month): Bold the information

[jeffreylauwers]

Den Haag

• Storybook
• Figma - Huidig
• Figma - WIP

---

Screenshots / Varianten

Default

With caption

---

Notities

• Onder de naam: Description list én Data list.
• HTML wel op basis van dl, dt, en dd.
• Documentatie beschikbaar voor Content guidelines en Do's and Dont's.
• In Figma de optie om horizontaal en verticaal uit te lijnen.
• Bij een small viewport wordt de lijst verticaal getoond.

Update: Op basis van gebruik verplaatst van discussion voor het Form Summary component naar deze discussion.

[jeffreylauwers]

DSO Toolkit

• Documentatie website
• Storybook

---

Screenshots / Varianten

Default

Vertical

Emphasize description

Vertical emphasize description

Bordered

---

Notities

• Onder de naam: Definition list
• HTML wel op basis van dl, dt, en dd.
• Richtlijnen voor gebruik
• Veel opties
  • Horizontal of verticaal uitlijnen
  • Nadruk op term of beschrijving
  • Verdelingen over kolommen
  • Borders of niet
• Bij een small viewport wordt de lijst verticaal getoond.

Update: Op basis van gebruik verplaatst van discussion voor het Description list component naar deze discussion.

[jeffreylauwers]

DUO

Documentatie website

---

Screenshots / Varianten

Default

Horizontaal

Met lange titel

Collapsible definition list

---

Notities

• Onder de naam: Definition list
• Documentatie over wanneer wel en niet te gebruiken.
• Documentatie per variant.
• Bij een small viewport wordt de lijst verticaal getoond.

Update: Op basis van gebruik verplaatst van discussion voor het Form Summary component naar deze discussion. In de documentatie van DUO wordt wel expliciet genoemd dat dit component ook gebruikt kan worden aan het eind van een formulier om antwoorden te controleren en mogelijk wijzigen. Zie ook het template 'Overzichtspagina'. Daarom een verwijzing naar deze comment opgenomen in discussion voor de Form Summary component.

[jeffreylauwers]

OpenGemeenten

• Documentatie website
• Patternlab

---

Screenshots / Varianten

Openingstijden

---

Notities

• Voor het component: Openingstijden en locatie
• HTML wel op basis van dl, dt, en dd.
• Bij een small viewport wordt de lijst verticaal getoond.

[jeffreylauwers]

RVO

• Storybook
• Figma

---

Screenshots / Varianten

Data list

---

Notities

• Onder de naam: Data list.
• HTML wel op basis van dl, dt, en dd.
• Bij een small viewport wordt de lijst verticaal getoond.

[jeffreylauwers]

Amsterdam (interne applicaties)

Comment van Mike Alders verplaatst van discussion voor het Description list component naar deze discussion.

Ik ben voorstander dat labels regular font krijgen en de waarden/values bold font.
Rationale: de waarden/values zijn belangrijkste voor de gebruiker om te scannen.

Nadeel is dat i.g.v. combinatie van inputvelden en description list inconsistentie kan optreden. In Amsterdam zijn de labels van inputs juist bold. Echter, in de meeste situaties worden data lists los van een formulier getoond.
Zie bijgaande geanonimiseerde voorbeelden.

[jeffreylauwers]

Utrecht

• Storybook
• Figma

---

Screenshots / Varianten

Default

Action link

Action button

---

Notities

• Onder de naam: Data list.
• HTML wel op basis van dl, dt, en dd.
• Documentatie beschikbaar over:
  • wanneer te gebruiken;
  • verschillende soorten data optimaal weer te geven;
  • vertalen van data
  • rtl toepassing

Update: Op basis van gebruik verplaatst van discussion voor het Form Summary component naar deze discussion. In de documentatie (Storybook) staat het volgende:

De data list component gebruik je onder andere voor:

• een overzicht van gegevens uit een formulier, in een controle-stap voor het verzenden
• een overzicht vooringevulde gegevens, aan het begin van een formulier
• een overzicht van bekende gegevens, bijvoorbeeld in een profiel-pagina

Daarom een verwijzing naar deze comment opgenomen in discussion voor de Form Summary component.

[jeffreylauwers]

Dit component wordt ook wel eens Data list genoemd. Maar de naam Datalist wordt in HTML al gebruikt voor iets anders...

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

[jeffreylauwers]

Tijdens de Open Dag van september de naamgeving van de componenten Summary List en Description List besproken. Uiteindelijk zijn we uitgekomen op Form Summary, Data Summary en Description List.

[jeffreylauwers]

✨ Dit component is nu Help Wanted ✨

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