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