Vad är det?
En dashboard används för att visa mycket information på liten yta. Informationen kan visas genom diagram av olika slag eller tabeller, det kan visas i form av listor. Ofta går det att klicka vidare på just en specifik information för att få mer information.
När används det?
Det används när stora mängder data behöver sorteras och kategoriseras. Idag används det mer och mer i och med att vi är uppkopplade nästan dygnet runt och vi har nästan konstanta dataflöden som måste processas. Det används extremt mycket i affärsvärlden där siffror rör på sig konstant eller okonstant hela tiden men det kan också röra sig om träningsinfo på en sportklocka, valutakurser på börsen, flygscheman i ett flygtorn eller om du har en egen webbplats och vill se flöden på den. Användarna kommer att ha nytta av kontinuerlig övervakning av den information som visas.
Hur används det?
När dashboards ska användas så gäller det för designern att bestämma vilken information som användaren vill se. Detta är dock inte alltid så enkelt, för det gäller verkligen att hitta den informationen som är viktig så att inte skärmen fylls med irrelevant information som tar uppmärksamheten ifrån det som är viktigt. Information som inte hjälper användaren bör alltså inte vara med eller dämpas. För att en dashboard ska fungera på bästa sätt är det viktigt att den är flexibel och att designern har god kännedom av vad som behövs för varje situation. Till exempel om man använder en träningsklocka vill ju användaren se viss information under träning och annan information efter. Under träningen kanske man vill se sin puls, hur länge man har tränat, och hur långt man har kommit om man exempelvis är ute och löptränar eller cyklar. Efter träning vill man se en sammanfattning av hur träningen gått, vilket tempo man hade, hur lång tid man tränade, vilken puls man hade. Detta är exempel på basala funktioner i en sportklocka. Information som går att få ut är näst intill oändlig och i tillägg går det ofta att köpa till andra manicker som kan kopplas samman, för att få mer information om till exempel en specifik gren.
Det är bra att använda en visuell hierarki för att organisera listor, tabeller och grafisk information på sidan. Man bör försöka att hålla den huvudsakliga informationen på en sida, med lite eller ingen scrollning alls, så att personer kan behålla fönstret på skärmen och överblicka allt samtidigt. Data som är relaterad kan delas in i olika avsnitt.
Användaren bör också kunna se mer detaljer om datan som visas, därför ska det finnas möjlighet att klicka på länkar och grafik för att få reda på mer. Ett exempel är att det dyker upp en ruta för att visa individuell data när muspekaren förs över en grafisk information.
Det är även viktigt att att välja lämplig och väldesignad informationsgrafik för informationen som behöver visas. Mätare, urtavlor, cirkeldiagram och stapeldiagram i 3D är exempel på saker som ofta ser bra ut, men de är sällan de bästa alternativen för att ge en överblick av information. Enkla linje- och stapeldiagram är ofta bättre för att visa information, speciellt om det är tidsbaserad information. Nummer och text visas bra med hjälp av listor och tabeller, i de fall som de inte är relevanta för att visas med hjälp av grafik.
Syftet med ett dashboard är att få en snabb överblick, man vill inte lägga tid på att studera varje del noggrant. När text visas kan det därför vara bra att markera (highlighting) nyckelord och siffror så att de skiljer sig från den övriga texten.
Vissa låter även användare att själva styra över sina dashboard, exempelvis genom att ha flyttbara paneler som gör att användaren själv kan organisera informationen.
Bra exempel
Garmin Connect är en applikation som är kopplad till Garmins alla sportklockor. Det är en oändlig mängd data som en sådan sportklocka kan få ut. I tillägg så är sport väldigt lätt att mäta och därför går det att sätta siffror på nästan allt. Garmin Connect har valt en svart och grått gränssnitt med färger som bryter av för att förtydliga. Dom använder sig av gestaltlagar för att förtydliga datan. Det går också att lägga till och ta bort och anpassa sina paneler genom att flytta dom eller lägga mest relevant panel överst.
På dom två bilderna nedan ser vi hur det ser ut när vi går in i appen. Det är en översikt över dagen, här visas generell information på ett överskådligt sätt och beroende på vad vi vill ta reda på just nu så kan man klicka sig vidare. På bild tre och fyra kan man gå in på en specifik löprunda som gjordes i söndags för att komma år mer specifik data. Det är lätt att skilja data åt och det är lätt att ta sig vidare för att få ut mer information.
Det dashboard som visas ovan är till för influencers i sociala medier såsom Instagram. Med hjälp av detta kan de analysera deras följare och hur se om det går uppåt eller nedåt. Detta är ett bra exempel då hela utformandet är väldigt enkelt och tydligt. Den viktiga informationen visas i fetstilt text vilket gör att man enkelt ser den. Ikonerna förtydligar vad informationen handlar om och den röda mätaren i nere i det vänstra hörnet är en perfekt överblick för ett mål som personen har satt upp, eftersom att den visar tydligt hur långt man har kommit och hur långt det är kvar för att nå målet. Detta upplägg gör det enkelt för användaren att överblicka informationen – vilket är syftet med ett dashboard.
Dåliga exempel
Det dashboard som visas ovan innehåller alldeles för många färger utan någon riktig struktur. Troligen är tanken med detta att varje färg ska representera ett visst ämne – men istället blir det väldigt rörigt med massa färger överallt och dessutom är vissa av färgerna så starka att det blir svårt att se texten som står på de. I rutan längst upp till höger används också en röd färg på en rosa bakgrund, vilket gör att den blir väldigt svår att läsa. Det känns överlag som att det är svårt att få en överblick av informationen i detta gränssnitt, vilket är tanken med ett dashboard. Detta på grund av färgerna som redan nämnt men också för att det är alldeles för mycket information på skärmen. Överst står det en röd text om att “the patient allergy was not reviewed”, vilken är en viktig information men som totalmissas om man inte tittar noga, på grund av att texten inte passar till bakgrunden och smälter in med all annan information. Kanske skulle man kunnat sålla bort det som inte är lika viktigt?
Det dashboard som visas ovan ser till en början ganska bra ut, men en stor miss har gjorts med färgerna. I den första raden är blått = completed, och grönt = abandoned. I den andra raden har helt plötslig den gröna färgen bytts ut till orange – trots att den ändå representerar abandoned. Dessutom används samma färger, blått, grönt och orange – till ett cirkeldiagram där de representerar helt andra saker än innan. Detta gör att man lätt blandar ihop färgerna och inte riktigt vet vad som är vad, och vid en snabb överblick kan man därför lätt missförstå informationen. Färgerna skulle ha använts mer konsekvent och flera färger bör inte representera samma sak.
Eget exempel
Fler bra och dåliga exempel
Fler bra/dåliga exempel på dashboards hittar du här: https://interfacepatternsresource.school.blog/dashboards-bra-och-daliga-exempel/
Källor och länktips
Kapitel 2 och 4 i kurslitteraturen
Mer information om dashboards: https://www.klipfolio.com/resources/articles/what-is-data-dashboard
Exempel på dåliga dashboards med motiveringar: https://carmel.es/2018/10/26/6-examples-of-bad-dashboard-designs/
Exempel på bra och dåliga dashboards: https://www.matillion.com/insights/dashboard-examples-the-good-the-bad-and-the-ugly/?fbclid=IwAR0z_IPzZ8uQB3fvVUjTyjZrD2y-JIp10fpKImX6jEJcaeOPgEGKAvU2EOs
Interface Patterns – Designmönster för användargränssnitt | På svenska 