Select Page

Examensarbete – Sveriges smartaste ridhus


Verktyg
Sketch, After effects

Mitt examensarbete på YRGO gjorde jag i samarbete med Innovare som driver projektet ”Sveriges smartaste ridhus”. Projektet är ett samarbete mellan svenska ridsportförbundet, Saab och hästsportens  riksanläggningar. På Strömsholms historiska mark bygger man det smarta ridhuset med inspiration från så kallade ”living labs” som innebär att man skapar forskningsmiljöer ute i verkligheten. I ridhuset installeras sensorer som mäter bland annat temperatur, luftfuktighet och damm. Utöver de fasta sensorerna finns även trådlösa sensorer som mäter av ekipagets position på ridbanan för att ryttaren i efterhand ska kunna analysera sina ridvägar. All data, information och lärdom från ridhuset delas i ett öppet ekosystem för att göra det tillgängligt för ridskolor och professionella tävlings- och utbildningsstall runtom i landet. Min roll i projektet var att undersöka hur man kunde visualisera den inhämtade datan från ridhuset och tillämpa den på en instrumentbräda, så kallad dashboard.

Grid

Eftersom en mängd olika data skulle visualiseras på en mindre yta var det viktigt för mig att skapa en grundläggande struktur. Att använda ett grid för att designa dashboarden hjälpte till att effektivt kunna anpassa varje komponent och skapa ett skelett för designen. Jag studerade artiklar i ämnet och kom fram till att ett grid av 12 kolumner var det smartaste alternativet då jag med fördel kunde dela upp de olika komponenterna i lika stora delar, vilket i sin tur gav förutsättningar för responsivitet.

Eftersom dashboarden skulle kunna hantera en större mängd data förstod jag tidigt att den skulle behöva någon slags kalender. Genom min research kom jag fram till att man på de flesta dashboards oftast sorterade data på ”idag”, ”senaste veckan” eller på ett specifikt datum. Då min kund önskade ett sätt att sortera data genom en tidsintervall, alltså från ett specifikt datum och klockslag till ett annat datum och klockslag krävdes det en annan typ av lösning. Jag skissade på olika idéer och byggde upp dem i Sketch för att kunna utföra mina första tester på användare.

Grafer och diagram

5 olika typer av data fanns att visualisera; temperatur, luftfuktighet, damm, positionering, antal ryttare på banan samt information om det rådlösa sensorerna. Jag reflekterade över vilka olika typer av grafer som skulle komma att behövas. För att visualisera temperatur och luftfuktighet skulle ett vanligt linjediagram fungera och för damm skulle det behövas något som kunde introducera en tredje dimension i form av ett punktdiagram. Till positioneringen behövdes någon form av tracking-system och till antalet ryttare på ridbanan tänkte jag mig något slags doughnut-diagram. För att undvika låg läsbarhet på graferna och efter att ha lästen artikel om att alla former av 3D diagram skulle kunna distrahera användaren från att läsa själva datan, valde jag att enbart skapa mina grafer i 2D.

Resultat och insikter

Hur väljer man ut ett anpassat grid för en dashboard?
Jag har insett vikten av att sätta upp regler redan från början för att hålla en konsekvens genom hela designen. Min åsikt är att ett 12 kolumners grid är det bästa alternativet för en dashboard då jag hela tiden hade möjlighet att anpassa komponent efter dess graf.

 

Hur skapar man visualiseringar så att användaren lätt kan förstå informationen på ett korrekt sätt?
Jag hade ambitionen att skapa en uppseendeväckande dashboard med färgglada grafer. Under arbetets gång insåg jag hur mycket viktigare det var att sätta användaren i första hand, skapa en enkelhet och ge utrymme för data som skulle visas. Jag kom fram till att placera den data med mest betydelse på den övre vänstra delen av designen då den naturligt blir mer uppmärksammad eftersom användaren är van vid att läsa från vänster till höger. Detta gjorde också att jag till slut placerade datum och klockslags-väljaren till vänster under logotypen istället för till höger i navigationen.

 

Hur ser processen ut mellan mig som designer, kund och utvecklare och hur jobbar vi tillsammans på ett sätt som får dashboarden att fungera?
Vikten av bra kommunikation är något jag vill belysa. Redan innan projektets början satte vi oss tillsammans och gjorde upp en plan. Vi pratade igenom betydelsen av tydlighet, hur vi skulle döpa dokument, att rätt typsnitt användes och att ikoner skulle finnas lättillgängliga i vår gemensamma mapp samt att alltid skicka med guidelines för att slippa missar i kommunikationen. Vi har haft täta avstämningar i gruppen för att försäkra oss om att vi jobbar i rätt riktning och ibland har vi behövt stämma av uppgifter mellan design och API:et för att få det att fungera. Nu i efterhand önskar jag att vi hade haft tätare kontakt med vår projektledare för att korta ner många timmar av att utreda frågor då sensordata till en början var mycket svår för oss att förstå.