Dashboard design: sådan bygger I et dashboard, folk faktisk bruger

Mandag morgen klokken ni. Fire personer har hver brugt en time på at trække tal ud af e-conomic, webshoppen og to regneark, så ledelsen kan se, hvordan sidste uge gik. Tallene passer ikke helt sammen, og halvdelen af mødet går med at finde ud af hvorfor. Et halvt år senere har nogen bygget et dashboard med 27 grafer, og nu er der ingen, der åbner det. Begge situationer er almindelige, og begge handler om design. Et dashboard er et værktøj til at træffe beslutninger hurtigere, og designet afgør, om det lykkes.

Hvad kendetegner et godt dashboard design?

Et godt dashboard kan læses på fem sekunder. Brugeren skal kunne se, om alt er, som det skal være, og hvis ikke, hvor problemet er. Det kræver tre ting: få og velvalgte tal, en tydelig rækkefølge efter vigtighed, og en sammenligning ved hvert tal, fx mod sidste måned, budget eller mål. Et tal uden sammenligning er bare et tal. "412 ordrer" siger ingenting, men "412 ordrer, 8 % under sidste uge" siger, at nogen skal undersøge noget. Det fjerde kendetegn er, at dashboardet fører et sted hen: et klik på et tal viser detaljerne bag eller den handling, der skal tages.

Hvilke typer dashboards findes der?

Den kundevendte type overses ofte, men den har tit den største effekt. Når kunderne selv kan se status på en ordre, en levering eller en faktura, forsvinder en stor del af de opkald, der starter med "jeg ville bare høre". Det er typisk en del af en kundeportal, hvor dashboardet er forsiden efter login.

Hvordan vælger I de rigtige KPI’er til dashboardet?

Start med de beslutninger, brugeren skal træffe, og find først derefter de data, der understøtter dem. En lagerchef beslutter, om der skal sættes ekstra folk på i morgen. En salgschef beslutter, hvilke tilbud der skal følges op i dag. En ejer beslutter, om der skal ansættes. Hver beslutning har et eller to tal, der afgør den, og de tal er jeres KPI’er. Den hurtigste måde at finde dem på er at interviewe brugerne om, hvad de kiggede på sidst, de traf beslutningen. Vores guide til brugerinterviews har en interviewguide, I kan tilpasse.

1. Hvilken beslutning hjælper tallet med at træffe?
2. Hvem træffer beslutningen, og hvor ofte?
3. Hvad sammenligner vi med: sidste periode, budget, mål eller gennemsnit?
4. Hvornår er tallet godt, og hvornår kræver det handling? Skriv grænserne ned.
5. Hvilket system kommer tallet fra, og hvem ejer definitionen?
6. Hvad er det første, brugeren vil klikke på for at se mere?

Hvordan opbygger man layoutet på et dashboard?

Folk læser en skærm oppefra og ned og fra venstre mod højre. Det vigtigste tal hører derfor hjemme øverst til venstre, og jo længere ned I kommer, jo mere detaljeret bliver indholdet. En klassisk og velfungerende opbygning er en række med tre til fem store tal øverst, så to eller tre grafer, der forklarer udviklingen, og nederst en liste eller tabel med de konkrete ting, der kræver handling. Hold samme opbygning på tværs af visninger, så brugeren ikke skal lære et nyt layout for hver afdeling.

• Ét budskab pr. kort: et tal, en graf eller en liste, med en overskrift der siger, hvad det viser.
• Sammenligning ved hvert tal: pil, procent og den periode, der sammenlignes med.
• Farve betyder noget: brug neutral grå til det normale og farve kun til afvigelser.
• Konsistente perioder: alle kort viser samme tidsrum, medmindre andet står tydeligt.
• Luft mellem kortene: tætpakkede dashboards ser travle ud og læses langsommere.
• Filtre øverst og samlet: periode, afdeling, produktgruppe, og vis altid hvilke filtre der er aktive.
• Tidspunkt for sidste opdatering og datakilde, synligt men diskret.

Hvilken graf skal I bruge til hvilke data?

Pas på med rødt og grønt som eneste signal. En del mænd har nedsat farvesyn, og WCAG kræver, at farve ikke er den eneste måde at formidle information på, og at grafiske elementer har tilstrækkelig kontrast. Kombinér derfor farve med pile, ikoner eller tekst som "under mål". Skriv tal med det format, brugerne forventer, og afrund aggressivt: 1,2 mio. kr. læses hurtigere end 1.204.388 kr., og præcisionen hører til i detaljevisningen.

Hvilke fejl ser vi oftest i dashboards?

• Forfængelighedstal: sidevisninger og antal brugere i alt, der kun kan gå op.
• Forskellige perioder på samme skærm, så tallene ikke kan sammenlignes.
• Forkortelser og interne navne, som nye medarbejdere ikke forstår.
• Grafer uden akser, enheder eller forklaring på, hvad en søjle er.
• Ingen tom tilstand: et nyt dashboard uden data ligner en fejl.
• Langsom indlæsning: et dashboard, der tager 15 sekunder, bliver ikke åbnet.

Mange af fejlene er sproglige. Overskriften på et kort bør sige, hvad tallet betyder, fx "Ordrer afsendt samme dag", i stedet for et internt kodenavn. Tomme tilstande og forklaringer på grænseværdier er microcopy, og vi har samlet principperne i guiden om UX writing og microcopy.

Hvad koster et dashboard? BI-værktøj eller indbygget i jeres system

Timetallet i tabellen bygger på typiske seniorpriser på 800–1.400 kr. i timen. Tag et konkret eksempel: en grossist med 15 medarbejdere har ordrer i webshoppen, fakturaer i e-conomic og lagertal i et regneark. Et dashboard med seks KPI’er, en ordreliste og daglig opdatering kræver integration til e-conomic og webshoppen, en lille database og en side med login. Regnearket erstattes samtidig af en lagerfunktion i samme system. Det er et klassisk første projekt, der passer ind i en mellemstor webpakke, og hvis I vil se hele prisbilledet, så læs hvad en webapp koster.

Hvordan designer og bygger vi dashboards hos Ceptiv?

Vi starter med beslutningerne og brugerne, før vi taler om grafer. Derefter laver vi en klikbar prototype med rigtige eller realistiske tal, så I kan mærke, om dashboardet svarer på de rigtige spørgsmål, før der bygges integrationer. Design og udvikling sidder i samme team, så grafer, grænseværdier og tomme tilstande bliver bygget præcis som designet. Mange af vores dashboards erstatter regneark, der er vokset fra virksomheden, og det har vi skrevet mere om under udskift Excel med et skræddersyet system. Når I er klar, kan I få en fast pris inden for 24 timer.