Interactiviteit in datavisualisaties

Waarom interactiviteit?

• Meer context zonder visuele clutter
• Helpt gebruiker:
  • focus te leggen
  • details te ontdekken
  • patronen te interpreteren
• Relevant bij dashboards en data-dense visuals

⚠️ Interactie is functioneel, geen decoratie.

Interactievormen

Hover

Laat tijdelijke extra informatie zien

👉 Zorg dat belangrijke informatie niet enkel beschikbaar is on hover

⚠️ Tap in plaats van hover op mobile

Interactievormen

Click / select

• Gebruiker kan subset of categorieën kiezen
• Active state: Toon duidelijk welke data actief is

Interactievormen

Filters / sliders / toggles

• Segmenteren van data
• Vergelijken van tijdsperiodes of categorieën

Interactievormen

(Micro-)animaties

• Event triggers: klik, scroll, zoom, page load,...
• Entrance effecten: Verhaal stap-na-stap vertellen
• Laat veranderingen, groei of trends duidelijk zien
• Kan transitie tussen datawijzigingen verduidelijken

Voorbeeld met entrance animaties die storytelling versterken

Geanimeerde infographics

https://www.lemonly.com/work?page=1

Nog meer voorbeelden

Tools voor datavisualisatie

Prototyping in Figma

• Interacties en flows simuleren
  hover, click, toggles, overlays, loading screens,...
• Ideaal voor testen van:
  • Structuur
  • Hiërarchie
  • Micro-interacties

Prototyping in Figma

🥺 In Figma kan je geen externe (complexe) data koppelen

🥺 In Figma kan je de inhoud (nog niet) via een CMS of data sheet updaten

💡 We hebben een andere tool nodig om dynamische datavisualisaties te maken (en publiceren).

Dynamische datavisualisatietools

• Maken het mogelijk om zowel:
  • (dynamische) datasets te koppelen,
  • als data te visualiseren
  • én interacties toe te voegen
• Complexiteit varieert, vaak een leercurve

Low code tools

Retool
Bouw interne dashboards bovenop bestaande databronnen
 

🥺 Setup en datakoppeling vergt ervaring en technische kennis.

Low code tools

Bubble.io
Bouw interactieve webapps met data en visuele elementen. 

🥺 Te veel opties om in korte periode mee te leren werken.

Low code tools

Mendix

Enterprise low-code platform voor applicaties en dashboards

🥺 Te (code-)technisch voor korte intro.

BI* & visualisatietools

Tableau

Analyse en dashboards met live data.
 

🥺 Te weinig design vrijheid.

*Business Intelligence

BI* & visualisatietools

Power BI

Integratie met databronnen + berekeningen. Handig voor bedrijfsdashboards.
 

🥺 Heel technisch en niet super overzichtelijk (practice what you preach).

*Business Intelligence

BI* & visualisatietools

Airtable

Combinatie database + eenvoudige visualisaties
 

🥺 Beperkt qua geavanceerde interacties en complexe dashboards

*Business Intelligence

Waarom Infogram?

• Combinatie van ontwerp, data en interactiviteit
• Focus op structuur, interactie en leesbaarheid
• Geen technische kennis vereist
• Kan embed worden in tools als Webflow

Voorbeeld en bronteksten: Zie Canvas

Demo: Infogram