DATA VISUALIZATION

Dashboards
Begrijpbare data-interfaces

Wat zijn dashboards?

= tools om data snel en overzichtelijk te interpreteren:

  • 👀 Data monitoren
  • 📈 Inzichten krijgen in trends
  • 🤝 Beslissingen nemen, reageren op veranderingen
  • 🔀 Vergelijken van informatie
  • 🚨 Prioriteiten bepalen 
  • 🤯 Complexe data begrijpen

Dashboard voorbeelden

  • Business intelligence: omzet, sales, voorraad

  • Sportanalytics: spelersprestaties, teamstatistieken

  • CMS & Webdata: bezoekersstatistieken, contentprestaties, pageviews

Dashboards
opbouwen

Dashboards ≠ gewone apps

⚡️Focus op glanceability: snel inzicht, overzichtelijk

🧠 Minimaliseren cognitieve belasting: gebruiker mag niet verdwalen

📊 Data storytelling belangrijker dan UI decoratie

Eenvoud & focus

  • Less is more
    • ​Toon enkel kerninformatie
    • Te veel widgets/grafieken = onoverzichtelijk
  • Focus op beslissende metrics die gebruiker helpen snel handelen
  • Vermijd visuele ruis: kleuren, iconen en tekst moeten doelgericht zijn

KPI-selectie

Key Performance Indicator = meetbare waarde die aangeeft hoe goed een doel wordt bereikt

  • Meet/toont wat er écht toe doet, niet alles wat mogelijk is
  • Helpt beslissingen te sturen: "waar moet gebruiker op letten?"

 

Voorbeeld in CMS-context: pageviews alleen zeggen weinig, conversion rate of time on page zijn vaak waardevoller

KPI-selectie

Hoe beslis & visualiseer je de KPI's van jouw product?

 

Stap 1: Definieer het belangrijkste doel of de gebruikersvraag
Wat moet de gebruiker weten? Waarvoor dient het dashboard?

Stap 2: Verzamel alle mogelijke metrics uit dataset

Stap 3: Filter irrelevante / misleidende KPI’s

KPI-selectie

Stap 4: Maak een KPI-tree

  • 1️⃣ Primaire KPI: hoofdindicator (bv. omzet, goals gescoord)
  • 2️⃣ Secundaire KPI’s: context/aanvullende metrics (bv. assists, expected goals)
  • 📊 Visualisatie: kies grafiektype op basis van data en inzicht

Stap 5: Check of KPI’s direct interpreteerbaar zijn
Labels, units, context

De juiste grafiekkeuze

Kies grafiek o.b.v. doel

  • Gepaste grafiek = snel inzicht begrijpen
  • Verkeerde grafiektype = kan trends verstoppen of gebruikers misleiden
     

👉 Denk bij elke KPI: "Wat wil ik dat de gebruiker meteen ziet?"

vb: vergelijking, verhouding, evolutie, trend…

Vergelijken

Bar chart, Grouped bar, Column chart, Radar
👉 Beperk tot 4 à 6 categorieën. Sorteer.

👉 Alle assen moeten dezelfde eenheid en schaal hebben! 

Trends, evolutie over tijd

* optellend doorheen de tijd

Line chart, area chart
👉 Gebruik alleen area als je cumulatieve* data toont.

Aandeel van het geheel

Stacked bar, pie chart
👉 Gebruik enkel bij duidelijk verschil. Max 5-tal wedges.

Layoutsystemen voor dashboards

Hiërarchie

Header → Summary → Key numbers
Plaats belangrijkste KPI’s prominent, vb: omzet, bezoekers

Detail views / secundaire charts

  • Onderaan of via interactieve flow
  • Bieden extra context of diepere data

🧭 Volg het verhaal van de gebruiker
Begin met "Wat moet de gebruiker weten", geef daarna context, sluit af met detail.

Card based metrics

  • Gebruik blokken voor individuele KPI's of kleine grafieken
  • Makkelijk scanbaar

👉 Geef iedere card een logische titel, consistente grootte, en voorzie genoeg spacing tussen cards.

Dense vs. sparse dashboards

  • Dense = veel data, meerdere KPI’s tegelijk
    Gebruik alleen bij geavanceerde gebruikers

  • Sparse = focus op kernmetrics

 

👉  Bepaal je publiek en pas density daarop aan.

1 scherm vs. multi-level

  • 1-scherm = Alle belangrijke info in één oogopslag

  • Multi-level = Detailinformatie in aparte schermen of pop-ups

 

👉  Combineer: overzicht op hoofdniveau, details via drill-down of tabs.

Visual weight

=  belangrijkheid bepalen door grootte, positie en contrast.

 

👉 Primaire KPI’s bovenaan en in grotere blokken, secundaire metrics kleiner of onderaan.

Grid & spacing

  • Gebruik consistent grid
  • Sneller scanbaar

 

👉  Denk van linksboven naar rechtsonder.

Interactie
& drill-down

Filtering & sorting

  • Zorgt voor focus bij grote datasets
  • Laat gebruiker data dynamisch ontdekken
  • Vb: Filter op periode, team, regio

 

👉 Gebruik duidelijke labels bij filters

👉 Toon actieve filters visueel

👉 Voorkom te veel filters tegelijk → chaos.

Drill-down

  • Ga van overzicht → detail → raw data.
  • Voorbeeld:
    • Dashboard toont eerst team-overzicht
    • Klik op team = individuele spelerstats (nieuw scherm)
    • Klik op speler = matchdetails (pop-up)

 

👉 Geef visuele cues zoals pijltjes, breadcrumbs of hover-tooltips, zodat gebruiker weet dat er meer details zijn.

What-if scenarios / toggles / switch views:

  • Laat gebruiker hypothetische scenario’s testen of verschillende dataperspectieven bekijken
  • Voorbeeld: een toggle kan bijvoorbeeld goals vs assists tonen, zonder scherm te verlaten.

 

👉 Geef duidelijk weer dat er een toggle aan staat of bepaalde view geslecteerd is

Highlights

  • Gebruik hover, active states of kleuraccenten om aandacht te trekken naar belangrijke metrics of recente veranderingen.
  • Voorzie opties om naar een detailview door te klikken of of optioneel meer informatie te tonen.

 

👉 Overdrijf niet, één of twee highlights per scherm volstaat.

State thinking

Loading

Toon visuele feedback dat data geladen wordt, vb:

  • Spinner
  • Skeleton
  • Progress bar

Empty

  • Toon placeholder of melding
  • Voorzie een actie
    vb "Voeg item toe"

Partial

Sommige metrics zijn al beschikbaar, andere soms nog niet.

Vb: info over gespeelde matchen vs. toekomstige matchen

Voorbeeld

Error

Voorzie een duidelijke foutmelding of alert voor data die niet geladen kon worden.

Voorbeeld

Dashboard anti-patterns

 

Opdracht 

  • Download de .fig-file op Canvas
  • Duid via comments/shapes/lines aan wat er niet goed is aan het dashboard (15')
  • Klassikale bespreking

Mini-oefening

Pas deze principes nu toe op weekopdracht 5.

 

Opdracht 

Ga zelf aan de slag en maak een dashboard design voor de BALLR app. Je maakt 1 scherm voor zowel web als mobile. 

 

Volledige briefing op canvas

Weekopdracht 5