Grupp 2 – Campus

Bra exempel: Fitbit (fitbit.com)

Fitbit är ett exempel på en bra dashboard eftersom att den är utformad med tydlig struktur, värdefull information, fokus på rätt ställen och lätt att förstå även för nybörjare. De använder sig av ikoner som är tydliga och lätta att förstå innebörden av. Informationen är tydligt uppdelad och man kan skilja på vad som tillhör vad. Färgerna gör det också enklare att få en tydlig överblick och ger ett lättsamt intryck.

Dåligt exempel: City dashboard (citydashboard.org/london/)

• 

Denna dashboard ger ett väldigt rörigt intryck. Det är mycket information på en liten yta, många liknande färger på olika ställen och samma typsnitt som gör att det är svårt att veta vart man ska fokusera. Det skulle behövas en tydligare indelning mellan varje objekt och färger som gav tydligare kontraster för att skilja mer på informationen.

Grupp 3 – Campus

Bra exempel: Nordnet (Nordnet.se) 

Nordnets undersida “Marknadsöversikt” skapar en god överblick över mycket information som presenteras samtidigt. Detta uppnås genom att tydligt gruppera in besläktat innehåll i separata block och att använda en tydlig rubriksättning. 

Valet av färger är noga genomtänkt. Rött och grönt används som tydliga markörer för att signalera huruvida ett börshandlat instrument ökat eller sjunkit i värde. Det skapas således tydliga kontraster i gränssnittet då resterande delar av gränssnittet är i mer nedtonade och anonyma färger. 

Dåligt exempel:

TIB (Transformation Improvement Board) använder sig av visuella effekter i pajdiagrammet, vilket förblir onödigt och försvårar för användare att bedöma storleken på diagrammets olika delar. Till höger om pajdiagrammet finns en legend, och under legenden så presenteras ytterligare information som gör att det är svårt att veta vilken data pajdiagrammet egentligen visar. 

Grupp 4 – Campus

Dashboard är ett slags interface patterns som berör omvandlingen av en stor mängd information till en mer pedagogisk och läsbar information. Detta omfattar framförallt presentationer av siffror (vid finans) eller stora mängder text. För att presentera detta på ett bra sätt kan man använda sig av olika färgkoder, grupper, tabeller, listor och grafer.

Bra Exempel: Avanza (Avanza.se)

Avanza är en sida som presenterar information om valutor, räntor, index och aktier. Avanza använder sig av bra färgkoder som uppmärksamma användaren om vilka valutor, index och aktier som har ökat eller minst i värde. På deras ingångssida som syns här ovan presenteras informationen i dova och lugna färger, samt grafen till vänster är en ljusare grön. Detta signalerar ett lugn och säkerhet.

Det finns även en “tidsinställning” som gör att användaren kan enkelt förstå valutor över tid och anpassa efter dag, månad eller år. Grupperingar finns på sidan, där användaren enklare kan se uppdelning av världsindex, nordiska branschindex och branschindex, samt  styckesindelning. Detta bidrar till en ökad förståelse.

Som bra exempel i kontrast till dåligt exempel, kan ni ta en titta på OMX Stockholm PI ( https://www.avanza.se/index/om-indexet.html/18988/omx-stockholm-pi ) – som är en graf för sammanställningen av aktier i Stockholmsindex. Avanza.se presenterar denna grafen på ett bra och trovärdigt sätt, där användaren kan enkelt, genom interaktivitet följa indexet efter vald inställning av tid.

Dåligt Exempel: Investtech (Investtech.com)

Investtech är ett företag som säljer analyser av börsen till sina användare. Investtech presenterar OMX Stockholm PI på sin sida som ett exempel på utveckling av börsen. Som användaren förstår man man inte vid första anblick att det finns någon interaktivt – som val av dag, vecka, månad eller år, – vilket det gör när användaren klickar på grafen.

Väl inne på grafen ( https://www.investtech.com/se/market.php?CompanyID=46108970 ) är det bra val av färger som rött och grönt. Rött och grönt är bra men färgerna är starka och signalerar snabba förändringar. Grafen har förövrigt för liten storlek av tillhörande text, tecken samt att dem svarta kantiga linjerna är ett moment som stör, stressar och skrämmer. Aktier och siffror är något som skrämmer många människor och kräver att man besitter en vetskap om ämnet för att kunna förstå ekonomi i en större helhet än att enbart kolla på siffror och färger. Investtech kan jag tänka mig presenterar ett bra exempel för personer som är mer kunniga och insatta – kanske riskkapitalister – är dem som besöker avanza.se.

För att kunna ta till sig informationen som ny kund och inte bli skrämd borde investtech presentera en “lugnare” typ av graf så att den framtida kunden inte blir skrämd och lämnar sidan.

Grupp 5 – Campus

Bra Exempel: Kensshoo.com

Den dashboard som kenshoo.com använder för att presentera marknadsinformation efter en analys är ett bra exempel på en dashboard enligt oss. De har använt sig utav visuellt lockande grafik för att presentera informationen samt har en viss interaktivitet på tabellerna för att presentera mer exakt information gällande statistiken. Designen av dashboarden är också anpassningsbar beroende på vilken sektion av dashboarden du befinner dig på men ej anpassningsbar på den aspekt att du själv kan välja vilken typ av information du vill ta del av.

Dåligt Exempel: Worldwidewebsize.com

Denna dashboard är framsidan för webbsidan Worldwidewebsize.com vilket är en webbsida som mäter storleken på internet genom att mäta hur många webbsidor det finns. Informationen som finns på sidan är ganska otillräcklig på grund av att man kan filtrera ut informationen på ett väldigt begränsat sätt. Sidan är ej anpassningsbar och flera kategorier såsom mer specifika dagar, vilka typer av sidor/de sökord de använde vid data insamlingen osv. är något som kan förbättras. Informationen presenteras på ett bra sätt men kan här också förbättras genom mer visuellt lockande design på graferna.

Dåligt exempel:
Statistiska centralbyrån, tycker vi är ett dåligt exempel på en dashboard eftersom det trots det olika rutorna lätt flyter ihop mycket på grund av att det är i samma färg på alla rutorna, hade kunnat funka betydligt mycket bättre genom att använda sig av olika färger för dom olika rutorna eller annat sätt som kan göra att dom särskiljer sig mer från varandra.

Grupp 4 – Distans

Bra exempel: Genom dashboarden på startsidan i Google Analytics får användaren en omedelbar blick över den viktigaste datan som berör den aktuella webbsidan. Informationen är koncentrerad men layouten har samtidigt rikligt med negativt utrymme vilket minskar kognitivt arbete. Titlar är enkla och det finns en tydlig informationshierarki. Även färgkodning har använts för att göra det lättare för användaren att snabbt tolka datan. Anpassningsmöjligheter är tillgängliga och mer detaljerad information är bara ett klick bort.

Dåligt exempel: The Public Health Dashboard är en statlig service som visar information över den allmänna hälsan på populationen i diverse län i Storbritannien. Syftet är, enligt organisationen som tagit fram den, att göra den här informationen tillgänglig för allmänheten. Trots detta använder de fackspråk och förkortningar som saknar datatips med förtydliganden. Här finns också många otydliga titlar och ingen möjlighet att klicka på dem för att få mer information. För att få reda på vad som faktiskt har mätts, måste man lämna dashboarden genom den lokala navigationen. Dashboarden är dessutom stor och kräver mycket scrollande – här finns det heller ingen möjlighet att anpassa eller koncentrera informationen.

Grupp 6 – Campus

Bra exempel: (Wufoo)

Denna dashboard är ett bra exempel då användaren får mer information ju längre ner i dashboarden man analyserar. Den är även gjord så att användaren kan interagera med dashboarden, till exempel att kunna välja det området som är intressant för användaren och sedan kunna välja vilket land eller världsdel som hen vill analysera. Det finns även filter som gör det möjligt för användaren att välja hur mycket data som ska visas och från vilken dag, månad eller år den kommer ifrån.

Dåligt exempel: (Dundas)

Eftersom att Dundas har använt samma färgskala på diagrammen högst upp och längst ner på bilden gör att det blir otydlig information. Man kan tro att dom hör ihop eftersom färgen är densamma, men det är just det dom inte gör. Även att använda 3D-grafik på diagrammen på toppen av webbplatsen gör att informationen är svårläst.