Gedaan met laden. U bevindt zich op: Zoveel mogelijk data meteen meegeven Visuele data

Zoveel mogelijk data meteen meegeven

De documentatie van het Design System is nog in bèta en wordt stapsgewijs aangevuld.

Het uitgangspunt hier is om data meteen en zo inzichtelijk mogelijk te tonen, zonder dat de gebruiker moet “nadenken” of extra stappen moet ondernemen om de informatie te verkrijgen. 

Bespaar de gebruiker tijd en moeite

Toon belangrijke data direct en expliciet op de grafiek:

  • Geef cruciale gegevens direct weer bij grafiekelementen (bijvoorbeeld labels op data-punten in een lijn- of staafdiagram).
  • Voeg waarden toe bovenop de staven of punten, zodat de gebruiker deze niet uit de assen hoeft af te leiden.
  • Maak gebruik van kleuren, iconen of stijlen om directe visuele associaties te bieden, zoals stijging of daling.

Minimaliseer het gebruik van hover-interacties:

  • Vermijd het verbergen van waarden achter hover-interacties, omdat deze niet altijd intuïtief zijn en moeilijk kunnen zijn voor mobiele gebruikers.
  • Geef waar mogelijk de informatie meteen zichtbaar weer. Als extra details nodig zijn, bied dan hover-informatie als aanvulling, niet als vereiste.

Gebruik visuele indicaties bij interactieve elementen

Signaleer een klik-interactie duidelijk:

  • Als een gebruiker moet klikken om waarden te zien, moet dit duidelijk visueel aangegeven worden. Voor dergelijke elementen waar een actie vereist is, zoals een lijnpunt in een grafiek, kan je markeringen gebruiken.
  • Overweeg symbolen als markering (bijvoorbeeld kleine cirkels of vierkanten bij data-punten) die laten zien dat er aanvullende informatie beschikbaar is na een klik.
  • Zorg ervoor dat deze visuele aanwijzingen duidelijk genoeg zijn, zonder de leesbaarheid van de grafiek te overbelasten.

Lees hier meer over het niet verbergen van interacties.

Hanteer een ‘Don’t Make Me Think’-aanpak

Verplaats de mentale belasting zoveel mogelijk van de gebruiker naar het ontwerp. Elk element moet een logische en onmiddellijke toegang tot de benodigde data bieden.

Don't
  • Burger moet waarde aflezen op X/Y -as
  • Kleuren in zwart-wit (bepaalde kleurenblindheid) zijn moeilijk te onderscheiden
  • Geen legende
Do
  • Waardes meteen meegeven bovenaan de balken, zodat de gebruiker dit niet zelf moet ontleden
  • Donkere basiskleur en lichtere tinten ervan blijven goed onderscheidbaar in zwart-wit
  • Spatie tussen de balken
  • Legende aanwezig