Uppdatering av Webbkarta

Efter användartesterna av LoFi-prototypen och de resultat som kom med dem gjordes några ändringar på den befintliga webbkartan. Den nya webbkartan kan ses nedan i Figur 13. Version 2 av

webbkartan. För det första så ändrades namnet på sidan Händelser till Ekonomi. För att förtydliga ännu mer vad som fanns på sidan Mål ändrades namnet till Sparmål. Då sidan Konton inte ansågs

användas av användaren så mycket flyttades den till inställningar för att minska innehållet på Ekonomisidan. Utöver de påhittade underliggande noderna skapades nu även så kallade Overlay noder. De skapades för att representera de dialogrutor som finns på respektive sida. Det beslutades att dialogrutor skulle användas istället för att skapa flera sidor för att kunna hålla nere på djupet i

prototypen. Då dialogrutorna ansågs vara viktiga för strukturen i applikationen valdes de därför också att representera dialogrutorna med noder.

Figur 13. Version 2 av webbkartan.

4.3.6 Style guide

För att underlätta skapandet av HiFi-prototypen skapades en style guide. Genom att ha färdiga designelement skulle det vara enklare att få till en enhetlig design av HiFi-prototypen.

Teckensnittet som användes var Open sans, i olika vikter och stilar beroende på rubrik och text (se Figur 14. Style guide del 1). Detta teckensnitt valdes då det har hög läsbarhet på mobilskärmar och inte är för kantigt. Varför olika vikter och stilar användes var för att skapa en hierarki som i sin tur skulle guida användaren (se 2.6.3 Form). Även ikoner skapades under detta arbete (se Figur 14. Style guide del 1). I första hand skapades ikoner för den nedre menyn för att göra det ännu tydligare vad som fanns på varje sida. Ikonerna är en aning rundade för att kännas lite snällare då några av deltagarna, både från förstudien och LoFi-användartestet nämnde att uppskattade runda former. Ikonerna behövde också vara en aning detaljerade för att användarna lättare skulle kunna se vad själva ikonerna representerade. Utöver ikoner för menyn gjordes även en ikon för inställningar (kugghjulet) samt en för att redigera widgets (pennan). Både pennan och kugghjulet används i en rad andra applikationer vilket gör att användarna känner igen vad som händer när man klickar på dem. Dessa ikoner valdes på grund av igenkänning vilket i sin tur skulle leda till att användaren kanske lär känna applikationen snabbare (se 2.6.2 Ikoner). Två andra ikoner skapades också (glasögon och en kalender) men användes inte i HiFi-prototypen då de inte bidrog till något i slutändan.

Figur 14. Style guide del 1.

Beträffande färger nämnde deltagare från tidigare moment att de ville se neutrala grundfärger och färgglada accentfärger (se Figur 15. Style guide del 2). Till bakgrunden valdes en ljusgrå färg för att skapa kontrast mot de vita korten. Texter och ikoner fick färgen Ikon för att skapa en större kontrast mot de vita korten vilket gjorde det enklare att läsa. Knappar och ikoner använde även färgen Ikon när de var inaktiva. Prototypens huvudfärg blev Inkomst. Det är en mintgrön färg som antyder på pengar men utan att göra det för uppenbart. Denna färg används sparsamt genom prototypen, men tillhör själva själen av prototypen. Rubriker vid dialogrutor, aktiva knappar har denna färg. Även inkomster som visas på Händelsesidan har färgen Inkomst. Färgen Utgift används endast i diagram när den visar användarens utgifter och kompletterar färgen Inkomst. Att ha färgstarka kategorier var något som deltagarna i tidigare moment efterfrågade. Kategorifärgerna används endast på kategorier och sparmål. De går i liknande nyanser som Inkomst och Utgift för att inte sticka ut alldeles för mycket.

Övergripande så är alla färger en aning nedmattade. Detta beslut togs för att kontrasten mellan färgen och de vita korten inte skulle bli för stor och således sticka i ögonen för användaren. Detta gjordes helt enkelt för att det skulle vara behagligare att titta på och på så sätt kännas mer professionellt (se 2.6.4 Färg).

Knapparna som skapades var antingen runda eller rundade för att designen skulle vara sammanhållen med resterande grafiska elementen i prototypen (se Figur 16. Style guide del 3). En menyknapp skapades för Översiktsidan och var en “flytande knapp”. Det innebar att den behöll sin position oavsett om användaren scrollade eller inte. I menyknappen placerades tre vertikala streck, vilken är ett vanligt sätt att visa komprimerade menyer på mobila enheter. När användaren klickar på den gröna menyn dyker två alternativ upp. Dessa alternativ fick en vit ruta bakom sig för att skapa en större kontrast mellan alternativen och bakgrunden. Det hade annars inte gått att se vad det stod i menyn. Dialogknapparna följer ett mönster som många andra applikationer använder sig av. Att avbryt finns på vänster sida och Spara på höger. Detta beslut togs så användaren snabbt kan klicka på rätt knapp.

Figur 16. Style guide del 3.

4.4 Detaljeringsfas

Sista momentet i denna designprocess är detaljeringsfasen. Utifrån den information som samlats in under tidigare faser skapades en slutlig HiFi-prototyp.

4.4.1 HiFi-prototyp

Efter utvärderingen av LoFi-prototypen samt framställningen av style guiden skapades en HiFi- prototyp. Designarbetet utgick från LoFi-prototypen men ändringar gjordes som grundades i de resultat som erhölls från utvärderingen av LoFi-prototypen (se 4.3.4 Användartestning och värdering). Även åsikter gällande design och utseende hämtades från förstudien (se 4.1.1 Intervjuer och

Affinitetsdiagram) med hänsyn till att brukskvaliteterna skulle ha rätt förutsättningarna att uppnås. Själva framställningen av HiFi-prototypen liknar den process som beskrevs i 4.3.3 LoFi-prototyp med några få undantag. HiFi-prototypen skapades även den i prototypverktyget Figma men skillnaden var att den bestod av en hög detaljeringsgrad. Detta innebar att den designades med färg och form med avsikt att likna en slutgiltig produkt. Då applikationens helhetsupplevelse samt hur den kändes att ha i handen skulle undersökas beslutades det att använda olika övergångar och animationer. Tanken var att det kunde bidra till att användaren upplevde att applikationen blev Smidigare med mjuka övergångar när sidor byttes samt när dialogrutor dök upp.

Då prototypverktyget Figma bara kunde hantera responsivitet till en viss grad behövde HiFi-

prototypen skapas i flera olika storleksförhållanden för att kunna passa deltagarnas olika mobiler, då användartestet skedde på distans. Till en början gjordes bara en prototyp som var anpassad efter testledarens mobil för att det skulle vara möjligt att testa den under arbetets gång. Därefter

kontaktades deltagarna som hade rekryterades, för kommande moment, för att efterfråga vad de hade för typ mobiltelefoner. Därefter gjordes en efterforskning om vilka storleksförhållanden dessa mobiler hade. Det slutade med tre likadana HiFi-prototyper med olika storleksförhållanden. Dessa

förhållanden var 16:9, 18.5:9 och 19:9. För att kunna se om storleken på prototypen passade deltagarnas mobiler, skapades 3 statiska bilder med ovanstående storleksförhållanden. Tanken med dessa bilder var för att se så att det tänkta storleksförhållandet passade deltagarens mobil, utan att den var för stor eller för liten. Om storleken exempelvis var för stor skulle prototypen åka runt på skärmen när användaren drog sitt finger, vilket skulle störa under användartestet.

Allmänt vad gäller prototypen, lades ikoner till i den undre navigationsbaren för att användaren skulle få en tydligare bild av vad som fanns under varje flik. Applikationens accentfärg, Inkomst, användes för att visa användaren vilken flik i navigationsbaren hen befann sig på. Resterande flikarna förblev grå. En ändring gjordes i den övre delen av applikationen och det var att namnet Evision lades till. Tanken var inte att namnge applikationen, utan namnet användes för att visa var en logotyp kunde placeras, därför är själva namnet Evision irrelevant. En detalj som en deltagare nämnde i

användartestet för LoFi-prototypen var att knapparna Spara och Avbryt i dialogrutorna borde byta plats, vilket gjordes i denna prototyp.

Figur 17. HiFi-prototyp Översikt. Figur 18. HiFi-prototyp Ekonomi.

Upplägget på Översiktsidan liknar till största del den som presenterades i LoFi-prototypen (se Figur 17 HiFi-prototyp Översikt). Den största skillnaden är designen och hur användaren hanterar widgets. Ser man till designen så består widgetarna av vita, rundade kort för att stå ut från bakgrunden.

Widgetarna har även blivit mer detaljerade och innehåller mer information än de gjorde i LoFi- prototypen. Diagrammen består mestadels av staplar och linjer. Detta för att ögat tolkar informationen enklare på sätt (se 2.9.1 Diagram). För att redigera widgets har den tidigare “redigera”-knappen bytts ut mot en flytande meny. Denna ändring gjordes på grund av att alla deltagare i användartestet av LoFi-prototypen hade svårt att hitta den knappen (se 4.3.4 Användartestning och värdering). Tanken var från början att användaren skulle trycka på och hålla nere en widget för att aktivera

redigeringsläget, men då Figma inte tillät denna form av interaktion beslutades det att lägga till en meny istället. Klickar användaren på den nya menyn får hen upp två alternativ. Det ena alternativet var att Lägga till widgets och det andra alternativet var att Redigera widgets (se Bilaga 9. HiFi- prototyp, Figur 26b. Grön meny). Väljer användaren att Redigera widgets förminskas korten en aning och kryss-symboler uppkommer på varje widget för att indikera att de går att ta bort. Väljer

användaren att Lägga till Widgets så poppar det upp en dialogruta med olika widgets i en lista. Här kan användaren i sin tur bocka för de widgets som hen vill se på sin Översiktsida.

På sidan Ekonomi (tidigare Händelser) finner användaren fortfarande undersidorna Händelser och Kategorier (se Figur 18. HiFi-prototyp Ekonomi). Undersidan Händelser har i princip samma layout som i LoFi-prototypen med några ändringar. Alla transaktioner har även de fått vita kort, precis som widgetarna på Översiktsidan. Detta för att skapa en sammanhållen design genom hela prototypen. I denna version har även varje transaktion fått sin kategori utskriven så att användaren inte behöver förlita sig på att komma ihåg vilken färg som betyder vad. Detta var också nödvändigt för att förtydliga vilka kategorier som ingick i en betalning när användaren hade delat upp den. När användaren delar upp en betalning syns två kategorier under betalningen som även visar hur mycket pengar som har spenderats på vardera kategori. På samma sätt applicerades denna metod på hur kombinerade betalningar visas upp (se Bilaga 9 HiFi-prototyp, Figur 26m. Kombinerade betalningar). Skillnaden är dock att kombinerade betalningar uppvisas med ett längre indrag, så att användaren kan skilja på uppdelade betalningar och kombinerade betalningar snabbt. Kategorier efterliknar också LoFi-prototypen till största del. Även här används de vita korten för varje kategori (se Figur 19. HiFi- prototyp Kategorier). För att användaren ska slippa att scrolla i listan för att få fram procentsatsen på en kategori i cirkeldiagrammet, gjordes diagrammet interaktivt (se 2.9.1 Diagram). Detta innebär att användaren kan hålla in på en del av cirkeldiagrammet med tummen för att få upp procentsatsen för den specifika biten (se Bilaga 9. HiFi-prototyp, Figur 26o. Nya kategorier).

Figur 19. HiFi-prototyp Kategorier. Figur 20. HiFi-Prototyp Budget. Figur 21. HiFi-prototyp Sparmål.

Ingen stor förändring har skett på Budgetsidan från LoFi-prototypen förutom att style guiden har applicerats (se Figur 20. HiFi-Prototyp Budget). Det övre diagrammet har uppdaterats lite från originalet genom att hela mätaren följer samma rundade hörn samt att den är färgkodad för att ge användaren en tydligare bild om hur hen ligger till totalt bland alla sina budgetar. Är mätaren på grönt ligger användaren bra till och har större möjlighet att klara av budgeten. Är mätaren istället på rött indikerar den att användaren riskerar att överstiga sin budget innan månaden är över. Ett annat tillägg som gjordes på denna sida var när användaren skapade en ny budget. I dialogrutan för att skapa en ny budget lades Konsumentverkets referensvärden för eget boende in (se Bilaga 9. HiFi-prototyp, Figur 26r. Skapa ny budget samt 2.2 Kostnadsberäkningar). Dessa värden fungerar som en guide för hur mycket som är rimligt att lägga på boende, fritid etcetera. Tanken var att användare som inte har så mycket erfarenhet av att ta hand om sin egen ekonomi skulle få en uppfattning om hur de skulle lägga upp sin budget genom att ha dessa referensvärden i åtanke.

Sidan Sparmål (tidigare Mål) fick heller inte någon större ändring gällande layouten (se Figur 21. HiFi-prototyp Sparmål). Den största skillnaden här är när användaren skall skapa ett nytt sparmål. Användaren har nu möjlighet att presentera sitt mål med hjälp av diagram, animationer eller bilder istället för bara diagram. Genom att låta användaren välja hur sparmålet skall visualiseras, anpassades sparmålet efter hur användaren själv föredrar att läsa av och tolka information.

4.4.2 Användartestning och värdering

I detta användartest deltog 10 studenter med något skilda utbildningar. Fördelningen på utbildningar såg ut såhär: 3 personer från Civilingenjör i Datateknik, 2 personer från Civilingenjör i

Mjukvaruteknik, 2 personer från Kognitionsvetenskap, 1 person från Högskoleingenjör i Maskinteknik, 1 person från Högskoleingenjör i Elektroteknik och 1 person från Innovativ programmering. Alla studenter var vid testtillfälle en bra bit in i eller i slutet av sin utbildning.

Detta användartest utfördes för att säkerställa att interaktionen, funktionerna och designen passade målgruppen, vilket innebar att erfarenhet av UX-design inte var en prioritet som i föregående test. På grund av Covid-19 var det inte möjligt att utföra användartesterna i ett fysiskt möte, vilket hade varit optimalt. Därför utfördes även dessa tester med hjälp av Remote Usability Testing (se 3.3.4

Användartestning och värdering av LoFi-prototyp).

En dag innan testet fick deltagarna ett meddelande om att ladda ner mobilapplikationerna Zoom och Figma Mirror, så att de kunde förbereda sig inför testet. Vid början av testtillfället fick deltagarna ta del av ett samtyckesdokument innehållande information om vad detta examensarbete handlar om, hur testet kommer gå till, personliga rättigheter och hur den insamlade datan skulle komma att hanteras och användas. Användartestet var uppdelat i tre moment och i det första momentet fick deltagarna fylla i en demografisk enkät. Det andra momentet var själva användartestet.

Deltagarna fick logga in på Figma Mirror med en redan innan skapad användarprofil och på så sätt ta del av prototypen. Med hjälp av Figma Mirror kunde testledaren styra vad deltagaren skulle se i Figmas applikation. Därefter fick deltagarna skärmdela sina skärmar på mobilen via Zoom så att testledaren kunde se och spela in allt som hände på deras skärmar. Då det inte gick att ha på mobilens kamera samtidigt som deltagarna delade sina skärmar uppmuntrades de att tänka högt då testledaren inte kunde se deras ansiktsuttryck. Det var även viktigt för deltagarna att tänka högt innan de klickade sig runt i prototypen på grund av att det inte var möjligt att stänga av så kallade Hot-Spots i Figma Mirror. Hot-spots fungerar så att klickbara objekt lyser upp på skärmen när användaren klickar någonstans där det inte går att klicka. Det fungerar alltså som ledtrådar till användaren om var det går att klicka på skärmen. Detta kunde ge vilseledande resultat som exempelvis hur snabbt deltagarna lär känna applikationen. Därför var det viktigt att deltagarna “tänkte högt” och talade om för testledaren hur de resonerade innan de klickade på skärmen.

Innan testet började fick deltagarna en testprototyp skickad till sina mobiler som bara innehöll en sida och som inte var klickbar. Detta gjordes för att kunna testa så att storleksförhållandet på prototypen passade deltagarens telefon. Därefter fick deltagarna lösa 8 uppgifter (se beskrivning nedan), en efter en i prototypen. Här graderades deltagarnas nivå av framgång (eng. level of success) vid varje uppgift samtidigt som kvalitativ data skrevs ner i form av hur de navigerade sig och vad de tänkte under testets gång. Deltagarnas nivå av framgång markerades med antingen 0, 1 eller 2 beroende på om de hade misslyckats med uppgiften, klarat uppgiften med problem eller hjälp, eller klarat uppgiften utan problem.

I det tredje och sista momentet fick deltagarna fylla i en SUS-enkät (eng. System Usability Scale) som senare diskuterades mellan testledaren och deltagaren. Efter att deltagaren hade fyllt i SUS-enkäten gick testledaren snabbt igenom den och ställde sedan frågor till deltagaren angående hur de hade resonerat och vad som hade påverkat dem när de graderade påståendena. Även följdfrågor ställdes såsom exempelvis “hur kan det förbättras?”, “är det något som du saknar?” och “vad var det som du

Resultat av användartest

Uppg.1 Uppg.2 Uppg.3 Uppg.4 Uppg.5 Uppg.6 Uppg.7 Uppg.8

Person 1 2 2 1 1 1 2 2 1 Person 2 1 1 1 1 2 2 2 1 Person 3 1 2 2 1 0 2 1 1 Person 4 1 2 1 1 2 2 1 1 Person 5 1 1 2 1 2 2 2 1 Person 6 1 1 2 1 2 2 2 1 Person 7 0 1 2 1 2 2 2 1 Person 8 1 2 2 1 2 2 2 1 Person 9 1 2 2 1 2 2 2 1 Person 10 1 2 2 1 1 2 1 1

Tabell 2. Resultat från användartesten på HiFi-prototypen.

Nedan kommer en sammanfattning av hur de 10 deltagarna klarade uppgifterna, en uppgift åt gången.

Uppgift 1 - Byta widgets

Person 1 var den enda deltagaren som lyckades att slutföra uppgiften utan svårigheter. Hen hittade den gröna flytande menyn och började att redigera widgetarna med en gång. Hen tog först bort Inkomst- och Utgifts-widgetarna och la därefter till den önskade widgeten Senaste händelser. Person 1 kändes självsäker genom hela uppgiften och det gick väldigt snabbt.

8 av 10 deltagare slutförde uppgift 1 med svårigheter eller hjälp. Det var många av deltagarna som inte riktigt förstod vad uppgiften uppmanade dem att göra. Person 10 beskrev det som: “Jag ser inkomster och utgifter så jag tänker att jag vill klicka på någonting där, men jag förstår inte riktigt vad

senaste händelser är”. 4 av deltagarna trodde först att det var det översta diagrammet som skulle bytas

ut och då de såg de tre prickarna under antog de att det gick att svepa vänster för att byta diagram.

Person 5 beskrev det såhär: “Jag ser att det står inkomster och utgifter på den högsta grafen och så ser

jag att det finns tre stycken prickar under, så jag tänker att det är en svepmeny, så jag tänker att jag sveper till höger för att se om jag kan se någonting annat”. 2 av deltagarna valde först att klicka på en widget för att de om det hände något. 1 av deltagarna tänkte att det var något som behövdes ändras i inställningarna och tryckte därmed på kugghjulet i övre hörnet. 1 av deltagarna valde att först utforska alla flikar. Alla deltagare valde att klicka runt ganska mycket och undersöka applikationen efter sitt första försök. Alla deltagare verkade en aning stressade och förvirrade men till slut hittade de den gröna menyn. Efter att den gröna menyn hade hittats kunde de flesta deltagare lösa uppgiften utan problem. De dock verkade fortfarande en aning förvirrade. Person 9 hade redan varit inne på den gröna menyn en gång men trodde att det var fel att ta bort widgetarna. Hen menade på att det hade

varit enklare om widgetarna endast hade hanterats från dialogrutan “jag trodde att det var fel att börja

ta bort saker, jag vill nog helst ha den här menyn med en gång”.

1 av 10 deltagare slutförde inte uppgiften. Person 7 började med att svepa på diagrammet högst upp på sidan men när det inte gick försökte hen att klicka på inkomstkortet istället. När det inte heller gick sade Person 7 “nä, okej men då känns det som att jag ska gå in på inställningar” och klickade på kugghjulet. När det inte fanns någonting där som passade valde Person 7 att gå vidare till fliken

Ekonomi där en användares transaktioner fanns. “Här ser jag ju mina senaste händelser” sade Person 7

och ansåg att hen var klar med uppgiften.

Uppgift 2 - Dela upp

6 av 10 deltagare slutförde uppgift 2 utan svårigheter eller hjälp. Då många av deltagarna hade

utforskat applikationen en del var de säkra på vart de skulle. “Då går jag till ekonomi för där såg jag att där fanns alla mina köp” sade Person 3 och gick därefter till Ekonomisidan. Hen gjorde sedan

precis som de andra 6 deltagarna och klickade på de tre prickarna vid betalningen och delade upp den utan problem.

Resterande 4 deltagare slutförde uppgiften med svårigheter. 3 av dessa deltagare klickade på widgets i tron att det skulle gå att ta sig vidare den vägen. Person 6 sade “Jag har svårt att förstå var någonstans jag ska.. det är antingen utgifter eller.. Jag testar att klicka på utgifter så ser vi vad som händer”.