Dashboard eksempel

Dynamisk Dashboarddesign

Bedste praksis inden for moderne dashboarddesign.

Jakob Normann
Author: Jakob Normann
sep. 4. 2023
Share:

Dashboarddesign er en hyppig efterspørgsel inden for applikationsudvikling i disse dage. Og med god grund. Det nuværende tempo i erhvervslivet kræver informerede beslutninger og hurtig handling. Virksomhedsledere drømmer om en simpel visning, der præsenterer relevante oplysninger, viser tendenser, påpeger potentielle risici og holder medarbejderne opdaterede om, hvad der sker. Det er her, bedste praksis inden for dashboarddesign vil hjælpe dig med at levere.

For mig giver et godt dashboard hurtigt overblik over de oplysninger, der er vigtigst for brugeren i det øjeblik, han eller hun kigger på dem. Det betyder, at konteksten skal tages i betragtning, når man designer et dashboard til en forretningsapplikation, og det skal tilbyde en nem måde at navigere direkte til forskellige væsentlige punkter i forhold til den pågældende kontekst.

Definer dit formål og hold dig til sagen

Ligesom enhver anden visning i din applikation bør dashboarddesignet være baseret på kontekst og tjene et specifikt formål og dette formål bør styre dine designbeslutninger. Det lyder måske indlysende, men hvis du gør det forkert, vil indsatsen være spilt, når du designer dit dashboard. Der er mange meninger om, hvordan man kategoriserer dashboards baseret på deres formål (analytisk, strategisk, operationelt osv.). For det meste vil disse to generelle typer dog være et godt sted at starte.

Operationelt dashboard

Et operationelt dashboard handler om at levere kritisk information til brugere, der er involveret i tidsfølsomme opgaver. Derfor er hovedmålene med det operationelle dashboard at præsentere afvigelser i data for brugeren hurtigt og tydeligt og give et overblik over aktuelle ressourcer og deres nuværende status. Dashboardet er designet til at hjælpe brugerne med at handle proaktivt og effektivt.

Designmål (operationelt):

  • Tidsfølsomt
  • Øjeblikkelig handling
  • Nem navigation til kritiske detaljer

Analytisk dashboard

I modsætning til det operationelle dashboard, giver et analytisk dashboard brugeren et godt overblik over information som grundlag for analyse og beslutningstagning. Det analytiske dashboard er mindre tidsfølsomt og ikke fokuseret på umiddelbarhed. Det bør snarere være designet til at hjælpe brugerne med at få den bedste forståelse af de tilgængelige data, så de kan analysere tendenser og træffe informerede beslutninger.

Designmål (analytisk):

  • Længere tidsperioder
  • Trends og analyser
  • Digital rapport

Den type dashboard, der skal implementeres i din applikation, bør bestemmes af brugerens kontekst – ofte defineret af brugerens rolle. En applikation kan tjene flere formål og vil derfor ofte kræve dashboards designet til hvert af disse. Ledere på højt niveau kan have brug for analytiske dashboards, hvorimod ledere på lavere niveau og andre brugere kan være bedre tjent med et mere operationelt dashboard.

Standardsoftware har en tendens til at blande de to, for at være "relevant" for et bredere publikum. Dette er ofte i modstrid med brugerens faktiske behov. Medarbejdere, der skal reagere hurtigt på bestemte begivenheder, bliver eksponeret for unødige analyser. Og omvendt bliver topledelsen mødt med et detaljeniveau, som kan forstyrre det større billede.

Repræsentation af data

Dashboards er i bund og grund en kombination af diagrammer, sammensatte lister, og iøjnefaldende repræsentationer af udvalgte værdier. At vælge den rigtige datarepræsentation er afgørende for dashboardets funktion og værdi. Datarepræsentation er delvist en kulturelt betinget, og derfor bør du overveje, hvordan forskellige typer data normalt repræsenteres i din organisation, før du lægger dig fast på et dashboarddesign. Hvis du starter fra bunden, er her nogle forslag baseret på, hvad brugerne har brug for at se.

Diagrammer (relationer)

Relationer

  • Punktdiagram
  • Boblediagram
  • Netværksdiagram

Punktdiagrammer er nyttige til korrelations- og fordelingsanalyse. Boblediagrammer hjælper med at introducere den tredje dimension i diagrammet. Et netværksdiagram er tilrådeligt, når selv den mindste forbindelse mellem datapunkter er af betydning.

 

Diagrammer (sammenligning)

Sammenligninger

  • Kolonnediagram
  • Søjlediagram
  • Linjediagram
  • Grupperet søjlediagram
  • Polarområdediagram
  • Linjediagram (kategorier)

Det er meget nemmere at sammenligne et eller flere værdisæt i form af diagrammer end at se på tal i en tabel. Kolonne- og linjediagrammer er nok de mest populære. Her er et par ting, du skal huske på, når du vælger typen af datarepræsentation. Når en af ​​dine dimensioner er tid, bør den være på X-aksen, da tiden i diagrammer flyder fra venstre mod højre. Når du bruger et vandret eller lodret søjlediagram, kan du prøve at sortere kolonner efter den største værdi i stedet for at sortere dem tilfældigt. Når du bruger linjediagrammer, bør du undlade at vise mere end fem værdier for at holde visualiseringen skarp, og når du bruger søjlediagrammer, anbefales det at vise højst syv værdier for at sikre klarhed.

compositions

Kompositioner

  • Cirkeldiagram
  • Donutdiagram
  • Trædiagram
  • Heat Map
  • Stablet kolonnediagram
  • Stablet arealdiagram

Cirkel- og donut diagrammer har et dårligt ry inden for datavisualisering. Disse diagrammer er blandt de mest populære, men også de mest misbrugte i datavisualiserings-værktøjskassen. De er ret vanskelige at læse, især når flere komponenter er inkluderet, der deler meget lignende værdier. Grundlæggende har den menneskelige hjerne svært ved at differentiere værdier baseret på vinkler og felter, og at kombinere de to gør det endnu sværere.

distribution

Fordeling

  • Spredningsdiagram
  • Histogramdiagram
  • Klokkekurvediagram

Fordelingsdiagrammer kan hjælpe dig med at illustrere afvigelser, normale tendenser og informationsområdet i dine dataværdier. For at vælge den mest passende datarepræsentation kan det være nyttigt at stille dig selv disse enkle spørgsmål:

  • Hvor mange variabler vil du vise i et enkelt diagram?
  • Vil du vise værdier over en periode eller blandt elementer/grupper?
  • Hvor mange datapunkter er nødvendige for at vise hver variabel?

Konsekvent navngivning

Følg klare og konsistente navngivningskonventioner. Brug ensartet datoformatering i hele din applikation, inklusive dine dashboards. Afkort store værdier, hvilket gør dem lettere at læse. Da hovedformålet med et dashboard er at få det rigtige budskab igennem ved et hurtigt blik, tæller hver eneste lille detalje. Den måske største fordel ved at bruge et klart og præcist framework er datakonsistens. Hvis dine data navngives på samme måde i hver af dine applikationer, vil det være meget lettere for brugerne at fordybe sig.

Layout Grids

Brug af layout grids kan hjælpe dig med at opnå optimal justering, samt en konsistent og intuitiv struktur for dit design med mindre indsats. Grids er dybest set "usynlige" linjer, der styrer placeringen af ​​elementer. De hjælper med at understøtte dashboardets sammensætning på en rationel og struktureret måde, hvilket er vigtigt, når man organiserer meget information inden for et begrænset område.

Når du træffer beslutninger om informationshierarkiet, skal du huske, at det øverste venstre hjørne af skærmen får mest opmærksomhed. Prøv at placere nøgleinformation fra venstre mod højre. Når læserne er færdige med den første række, vil de naturligt gå ned til næste række – tegneseriestil.

Hvis dashboardelementer er indbyrdes afhængige, skal du sørge for at etablere et naturligt flow fra en datavisualisering til den næste, så brugerne ikke behøver at gå frem og tilbage for at forstå budskabet.

Konsistent struktur

Når Grid'et er defineret, kan du begynde at arbejde på de widgets, der skal indeholde information, diagrammer og tabeller. Sigt efter widget-containere, der tilbyder god fleksibilitet. Kort understøtter for eksempel en bred vifte af indhold og kan nemt justeres ved hjælp af et gitter. Det vigtigste ved kort er, at de er meget manipulerbare og et godt valg til responsivt design. Det betyder, at du kan designe og implementere til enhver enhed ved hjælp af den samme kodebase.

En anden fordel ved kort er det konsistente layout af kontroller og data inde i containeren. Placer navnet i øverste venstre hjørne eller midten, og juster visningsindstillinger eller handlinger til øverste højre hjørne, hvilket giver masser af plads til det faktiske indhold. Når alle elementer har en konsistent struktur, er det meget nemmere for brugerne at få et hurtigt overblik og arbejde med grænsefladen.

Brug af disse layoutprincipper har yderligere fordele i form af fleksibilitet, når det kommer til responsivt design og tilpasning. Mens kort skalerer i forhold til skærmstørrelsen, forbliver alle hovedkomponenter forankret til bestemte placeringer. Dette er også fordelagtigt for udviklere..

Brug af White Space

White Space, eller negativt rum, er området mellem elementer i en designkomposition. Udviklere er sjældent klar over vigtigheden af ​​det negative rum, men designere lægger stor vægt på det. Og med god grund. Hvis det hvide rum er fraværende eller ubalanceret, lider læsbarheden, strukturen går tabt, og i sidste ende ender du med en forfærdelig brugeroplevelse. Lad dig ikke fange af widget-mani og forsøge at presse så meget information ind som muligt. Husk formålet, og vis kun de elementer, der rent faktisk tjener det.

Personalisering frem for tilpasning

Generelt forventer brugerne, at det indhold, de bliver præsenteret for, er relevant for deres individuelle behov. Personalisering og tilpasning er teknikker, der kan hjælpe dig med at sikre, at brugerne ser, det der er vigtigt for dem.

Personalisering udføres normalt af systemet selv. Helst bør applikationen være indstillet til at identificere brugere og levere det indhold, den oplevelse og den funktionalitet, der matcher deres rolle.

At tilbyde brugerne muligheden for at tilpasse dashboardelementer kan virke som en charmerende idé. Oftest er det dog blot en undskyldning for ikke at have gjort sig den ulejlighed, at finde ud af, hvad hver brugergruppe reelt har brug for at se for at arbejde effektivt.

Brug tabeller med tillid

Når du integrerer datatabeller eller -lister, skal du sørge for, at de tilbyder interaktion, så brugeren kan få adgang til hele datasættet og de underliggende poster. En datatabel er en fin løsning, når du har brug for at vise mange informationer for et større antal elementer. De udnytter pladsen godt, og responsive tabeller giver mulighed for store datamængder, selv på små enheder. Fra et udviklersynspunkt giver de også god mening, og brugerne er typisk trygge ved at arbejde med lister, da de er vant til at arbejde i regneark.

Tålmodighed vil blive belønnet

Da dashboards er en af ​​de mest visuelt interessante visninger i en applikation, er det ofte en af ​​de første ting, designere og udviklere kaster sig over. Jeg vil dog anbefale, at du modstår fristelsen og gør det stik modsatte. I bedste fald er et dashboard en oversigt over de vigtigste oplysninger i applikationen i forhold til brugerens kontekst. Det trækker på data fra forskellige dele af applikationen i et forsøg på at filtrere og udtrække essensen. Derfor er det meget bedre, at vente med at designe dashboards i slutningen af ​​applikations-udviklingsprocessen, og da det vil give meget bedre resultater, vil din tålmodighed blive belønnet...