Gedaan met laden. U bevindt zich op: Interacties niet verbergen Visuele data

Interacties niet verbergen

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

Vragen? Raadpleeg de vorige documentatiehub(opent in nieuw venster) of contacteer ons.

Hieronder staan richtlijnen om interacties in grafieken begrijpelijk en toegankelijk te maken. 

Schrijf de waardes voluit waar mogelijk

Geef zoveel mogelijk waardes direct in de grafiek weer: Probeer zoveel mogelijk waarde-informatie meteen zichtbaar te maken op de grafiek zelf. Dit bespaart gebruikers de moeite om waarden af te lezen vanaf de X en Y-assen. Zie: Zo veel mogelijk data meteen meegeven

Don't

Je moet klikken of hoveren om de waarden te zien en dit wordt nergens duidelijk aangegeven.

Grafiek waar de waardes niet meteen getoond worden, maar verborgen zitten achter een hover.
Do

Geef zoveel mogelijk waardes meteen mee op de grafiek.

Voorbeeld van een grafiek waar de waardes meteen meegegeven worden, zonder dat de gebruiker deze moet ontleden mbv X/Y as.

Indien een interactie nodig is om de waardes te bekijken: geef dit duidelijk aan

  • Gebruik visuele aanwijzingen voor interactie: In sommige grafieken, zoals tijdslijngrafieken, is het moeilijk om alle waardes tegelijkertijd te tonen. Gebruik dan kleine visuele elementen zoals bolletjes, die aangeven dat er een waarde beschikbaar is die via interactie zichtbaar wordt.

  • Leg interactie duidelijk uit: Plaats bovenaan de grafiek een korte instructie, zoals “Klik op de bolletjes om de respectievelijke waarde te zien”. Dit voorkomt verwarring en maakt duidelijk welke acties gebruikers kunnen nemen om toegang te krijgen tot data.

  • Gebruik herkenbare, klikbare punten (bijvoorbeeld bolletjes) op de grafiek die bij interactie de waarde weergeven.

Don't

Gebruiker kan waardes raadplegen door op de lijn in de grafiek te hoveren, maar dit wordt noch tekstueel noch visueel/grafisch duidelijk gemaakt.

Voorbeeld van een grafiek waar niet wordt aangegeven dat een actie nodig is van de gebruiker om waardes te onthullen.
Grafiek geeft niet de indruk dat je meer waardes kan verwachten door er met je muis over te hoveren.
Grafiek waar de waarde slechts verschijnt on hover.
Respectievelijke waardes verschijnen on hover.
Do

Gebruik visuele elementen om aan te geven dat een actie van de gebruiker verwacht wordt om waardes te doen verschijnen.

Grafiek die gebruik maakt van patronen bovenop kleuren om de verschillende datasets te onderscheiden van elkaar. Ook worden interactieve elementen weergegeven als bolletjes.
Bolletjes op de grafiek geven aan dat de gebruiker erop kan klikken.
Weergave van de grafiek met patronen, wanneer de gebruiker op het interactief elementje klikt en de respectievelijke waarde verschijnt.
Respectievelijke waardes verschijnen bij het klikken op zo'n bolletje.

Vermijd on-hover interacties

On-hover interacties zijn minder toegankelijk: Omdat hover-interfaces niet altijd toegankelijk zijn voor alle gebruikers (zoals mobiele gebruikers of mensen die een screenreader gebruiken), worden deze afgeraden. Kies in plaats daarvan voor klikbare elementen.

Deel deze pagina

Neem contact op met het Vlaanderen Design System team. 

Contacteer ons