Department of Science and Technology Institutionen för teknik och naturvetenskap
Linköping University Linköpings universitet
LiU-ITN-TEK-G--20/036--SE
Ett designkoncept för att
hjälpa studenter få en bättre
översikt över sin
privatekonomi
Linnea Karnel Mjörnheim
2020-06-05
LiU-ITN-TEK-G--20/036--SE
Ett designkoncept för att
hjälpa studenter få en bättre
översikt över sin
privatekonomi
Examensarbete utfört i Grafisk design och kommunikation
vid Tekniska högskolan vid
Linköpings universitet
Linnea Karnel Mjörnheim
Handledare Camilla Forsell
Examinator Jonas Löwgren
Upphovsrätt
Detta dokument hålls tillgängligt på Internet – eller dess framtida ersättare –
under en längre tid från publiceringsdatum under förutsättning att inga
extra-ordinära omständigheter uppstår.
Tillgång till dokumentet innebär tillstånd för var och en att läsa, ladda ner,
skriva ut enstaka kopior för enskilt bruk och att använda det oförändrat för
ickekommersiell forskning och för undervisning. Överföring av upphovsrätten
vid en senare tidpunkt kan inte upphäva detta tillstånd. All annan användning av
dokumentet kräver upphovsmannens medgivande. För att garantera äktheten,
säkerheten och tillgängligheten finns det lösningar av teknisk och administrativ
art.
Upphovsmannens ideella rätt innefattar rätt att bli nämnd som upphovsman i
den omfattning som god sed kräver vid användning av dokumentet på ovan
beskrivna sätt samt skydd mot att dokumentet ändras eller presenteras i sådan
form eller i sådant sammanhang som är kränkande för upphovsmannens litterära
eller konstnärliga anseende eller egenart.
För ytterligare information om Linköping University Electronic Press se
förlagets hemsida
http://www.ep.liu.se/
Copyright
The publishers will keep this document online on the Internet - or its possible
replacement - for a considerable time from the date of publication barring
exceptional circumstances.
The online availability of the document implies a permanent permission for
anyone to read, to download, to print out single copies for your own use and to
use it unchanged for any non-commercial research and educational purpose.
Subsequent transfers of copyright cannot revoke this permission. All other uses
of the document are conditional on the consent of the copyright owner. The
publisher has taken technical and administrative measures to assure authenticity,
security and accessibility.
According to intellectual property law the author has the right to be
mentioned when his/her work is accessed as described above and to be protected
against infringement.
For additional information about the Linköping University Electronic Press
and its procedures for publication and for assurance of document integrity,
please refer to its WWW home page:
http://www.ep.liu.se/
Linköpings Universitet | Examensarbete
Grafisk design och kommunikation
VT 2020
Ett designkoncept för att hjälpa studenter
få en bättre översikt över sin privatekonomi
Linnéa Karnel Mjörnheim
Handledare Camilla Forsell
Examinator Jonas Löwgren
Sammanfattning
Allt fler studenter anser sig missnöjda med sin ekonomiska situation. Att inte ha kontroll över sin ekonomi kan skapa stress som i sin tur går ut över studierna. Detta arbete är därför ämnat för att undersöka hur ett designförslag för en budgetapplikation, skräddarsydd för studenter, kan se ut. För att hjälpa till att besvara syftet ställdes även fyra forskningsfrågor.
Designprocessen bestod av fyra faser - Förstudie, Konceptfas, Bearbetningsfas och Detaljeringsfas. Informationen som kunde erhållas från dessa faser resulterade slutligen i en HiFi-prototyp. Under hela arbetes gång berättade studenter om funktioner och grafiska element som de fann viktiga i en
budgetapplikation. De funktioner som de ansåg vara viktiga var bland annat att kunna skapa egna kategorier, kombinera och dela betalningar samt att kunna skapa budgetar. Vad gäller grafiska element så var färg, diagram och ikoner viktiga.
I slutet av arbetet, vid användartestet av HiFi-prototypen berättade studenterna att diagrammen i applikationen hjälpte dem att tolka informationen som presenterades. Alltså fick studenterna en bättre överblick med hjälp av visualiserad data. Vid samma användartest konstaterades det även att
studenterna fick en positiv upplevelse av applikationen samt att de skulle vilja använda den regelbundet. Därför kan den slutgiltiga HiFi-prototypen ses som ett giltigt svar till hur ett designförslag för en budgetapplikation, skräddarsydd för studenter, kan se ut.
Abstract
More and more students feel dissatisfied with their financial situation. Not having control over your finances can cause stress and affect studies negatively. This thesis is therefore intended to explore what a design proposal for a budget application, made for students, might look like. To help answer the thesis objective, four research questions were established.
The design process consisted of four phases - Pre-study, Concept phase, Processing phase and Detailing phase. The information that was obtained during these phases resulted in a HiFi-prototype. Throughout these phases, students expressed which functions and graphic elements that they found important in a budget application. The functions they considered important were for instance, creating their own categories, combining and sharing payments and being able to create budgets. In terms of graphic elements they found colour, diagrams and icons to be important.
At the end of the design process, during the user test of the HiFi-prototype, the students expressed that the diagrams in the application helped them to interpret the information presented. Therefore, the students got a better overview with the help of visualized data. From the same user test it could also be gathered that the students had a positive experience of the application and that they would like to use it regularly. Therefore, the final HiFi-prototype can be seen as a valid result to what a design proposal for a budget application, made for students, can look like.
Innehållsförteckning
1. Inledning ... 9
1.1 Syfte & forskningsfrågor ... 9
1.2 Avgränsningar ... 9
2. Teori ... 10
2.1 Människor och ekonomi ... 10
2.2 Kostnadsberäkningar ... 10 2.3 Dagens budgetapplikationer ... 10 2.4 Interaktionsdesign ... 10 2.5 Användarupplevelse ... 11 2.6 Grafiskt Användargränssnitt ... 11 2.6.1 Gränssnitt för mobil ... 11 2.6.2 Ikoner ... 12 2.6.3 Form ... 12 2.6.4 Färg ... 12 2.7 Navigering av gränssnitt ... 13 2.8 Användarmönster ... 13 2.9 Informationsvisualisering ... 14 2.9.1 Diagram ... 14 3. Metod ... 15 3.1 Förstudie ... 15 3.1.1 Semistrukturerade intervjuer ... 15 3.1.2 Affinitetsdiagram ... 15 3.2 Konceptfas ... 16 3.2.1 Personas ... 16 3.2.2 Brukskvaliteter ... 16 3.3 Bearbetningsfas ... 16 3.3.1 Webbkarta ... 16 3.3.2 Gränssnittsskissning ... 16 3.3.3 LoFi-prototyp ... 17
3.3.4 Användartestning och värdering av LoFi-prototyp ... 17
3.3.5 Style guide ... 18
3.4 Detaljeringsfas ... 18
3.4.2 Användartestning och värdering av HiFi-prototyp ... 18
4. Utförande ... 20
4.1 Förstudie ... 20
4.1.1 Intervjuer och Affinitetsdiagram ... 20
4.2 Konceptfas ... 22 4.2.1 Personas ... 22 4.2.2 Brukskvaliteter ... 24 4.3 Bearbetningsfas ... 24 4.3.1 Webbkarta ... 24 4.3.2 Gränssnittsskissning ... 25 4.3.3 LoFi-prototyp ... 28
4.3.4 Användartestning och värdering ... 31
4.3.5 Uppdatering av Webbkarta ... 35
4.3.6 Style guide ... 36
4.4 Detaljeringsfas ... 38
4.4.1 HiFi-prototyp ... 38
4.4.2 Användartestning och värdering ... 41
4.4.3 Möjliga förbättringsområden ... 50
5. Slutsats och diskussion ... 52
5.1 Slutsats ... 52 5.2 Diskussion av resultat ... 53 5.3 Metodkritik ... 54 5.4 Källkritik ... 56 5.5 Vidare studier ... 56 Referenslista ... 57 Bilagor ... 59 Bilaga 1. Intervjufrågor ... 59 Bilaga 2. Affinitetsdiagram ... 60 Bilaga 3. Gränssnittsskissning ... 61 Bilaga 4. LoFi-prototyp ... 65
Bilaga 5. Inledande frågor för LoFi-prototyp ... 68
Bilaga 6. Användartest för LoFi-prototyp ... 69
Bilaga 7. LoFi-prototyp på dator ... 70
Bilaga 8. Avslutande frågor för LoFi-Prototyp ... 71
Har du någon annan kommentar som vi inte har tagit upp?Bilaga 9. HiFi-prototyp ... 71
Bilaga 11. Användartest för HiFi-prototyp ... 77 Bilaga 12. SUS-enkät ... 78
Figurförteckning
Figur 1. Affinitetsdiagrammet från förstudien. ... 21
Figur 2. Primärpersonan Johan Johansson. ... 23
Figur 3. Sekundärpersonan Johanna Johansson. ... 23
Figur 4. Version 1 av webbkartan. ... 25
Figur 5. Skiss över huvudsidan Översikt. ... 26
Figur 6. Del av skiss för sidan Händelser. ... 27
Figur 7. Del av skiss för huvudsidan Budget. ... 27
Figur 8. Del av skiss över huvudsidan Mål. ... 28
Figur 9. Översiktsida LoFi. ... 29
Figur 10. Händelsersida LoFi. ... 29
Figur 11. Budgetsida LoFi. ... 30
Figur 12. Målsida LoFi. ... 30
Figur 13. Version 2 av webbkartan. ... 36
Figur 14. Style guide del 1. ... 37
Figur 15. Style guide del 2. ... 37
Figur 16. Style guide del 3. ... 38
Figur 17. HiFi-prototyp Översikt. ... 39
Figur 18. HiFi-prototyp Ekonomi. ... 39
Figur 19. HiFi-prototyp Kategorier. ... 41
Figur 20. HiFi-Prototyp Budget. ... 41
Figur 21. HiFi-prototyp Sparmål. ... 41
Figur 22. Gränssnittsskissning och värdering av huvudsidan Översikt. ... 61
Figur 23. Gränssnittsskissning och värdering av huvudsidan Händelser. ... 62
Figur 24. Gränssnittsskissning och värdering av huvudsidan Budget. ... 63
Figur 25. Gränssnittsskissning och värdering av huvudsidan Mål. ... 64
Figur 26. Översikt... 65 Figur 27. Redigeringsläge. ... 65 Figur 28. Lägg till. ... 65 Figur 29. Ny översikt. ... 65 Figur 30. Händelser. ... 65 Figur 31. Alternativ. ... 65
Figur 32. Dela upp. ... 65
Figur 33. Uppdelad ... 65 Figur 34. Kombinera. ... 66 Figur 35. Kombinerad 1. ... 66 Figur 36. Kombinerad 2. ... 66 Figur 37. Konton. ... 66 Figur 38. Kategorier. ... 66 Figur 39. Ny kategori. ... 66
Figur 40. Nya kategorier. ... 66
Figur 41. Budget. ... 66
Figur 42. Budgetalternativ. ... 67
Figur 43. Ändra budget. ... 67
Figur 44. Ny Budget. ... 67
Figur 45. Sparmål. ... 67
Figur 47. Nytt sparmål. ... 67
Figur 48. Översiktsidan. ... 72
Figur 49. Grön meny. ... 72
Figur 50. Redigeringsläge. ... 72
Figur 51. Redigerad Översiktsida. ... 72
Figur 52. Lägg till widget. ... 72
Figur 53. Inställningar. ... 72
Figur 54. Händelser. ... 73
Figur 55. Ändra händelser 1. ... 73
Figur 56. Dela upp betalning. ... 73
Figur 57. Ändra händelser 2. ... 73
Figur 58. Kombinera betalning. ... 73
Figur 59. Kombinerade betalningar. ... 73
Figur 60. Kategorier. ... 74
Figur 61. Skapa ny kategori. ... 74
Figur 62. Nya kategorier. ... 74
Figur 63. Budget. ... 74
Figur 64. Skapa ny budget. ... 74
Figur 65. Sparmål. ... 74
Figur 66. Skapa nytt sparmål 1. ... 75
Figur 67. Skapa nytt sparmål 2. ... 75
Figur 68. Nytt sparmål. ... 75
Tabellförteckning
Tabell 1. Resultat från användartesten på LoFi-prototypen. ... 32Tabell 2. Resultat från användartesten på HiFi-prototypen. ... 43
Tabell 3. Resultat av SUS-enkät. ... 47
Tabell 4. Affinitetsdiagram, Utseende och Funktioner. ... 60
Tabell 5. Affinitetsdiagram, Egenskaper och Motivationer. ... 60
1. Inledning
En vanlig uppfattning om studenter är att de ofta har ont om pengar. Trots att detta är en stereotypisk bild av studenter kan den ändå stämma till viss del. Även om studenter anser sig ha bättre ekonomi idag än för två sedan, anser ändå två av tre att det är svårt att endast leva på studiemedel
(Allastudier.se, 2019). 2018 skrev även CSN i ett pressmeddelande att det var färre studerande som var nöjda med sin ekonomiska situation jämfört med resultatet 2015 (CSN, 2018).
Känslan av att inte ha kontroll på sin ekonomi kan bli ett stort stressmoment som i sin tur kan påverka studierna. Detta är en känsla som skulle kunna mildras med hjälp av att ha en bra överblick av sin ekonomi. I dag finns en rad olika budgetapplikationer som kan hjälpa personer att få kontroll över sin privatekonomi. Dessa applikationer är utformade för olika preferenser och ändamål. Dock finns ingen applikation som riktar sig enbart till studerande och deras preferenser.
Informationen från föregående stycken gav upphov till en idé om att ta fram ett designförslag för en budgetapplikation skräddarsydd för studenter. Tanken med denna budgetapplikation är inte att generera en större inkomst, utan att ge studenter en bättre överblick över sin ekonomi. Detta kan förhoppningsvis leda till att studenter får bättre kontroll på sin ekonomi. Detta arbete kommer att undersöka studenters nuvarande vanor när det kommer till privatekonomi samt vilka olika funktioner och egenskaper de skulle föredra i en budgetapplikation. Denna information kommer i sin tur att ligga till grund för den prototyp som kommer att utvecklas. Målet med detta designförslag är att,
förhoppningsvis, hjälpa studenter att få bättre kontroll över sin ekonomiska situation, genom att skapa förutsättningar till en bättre överblick av sin ekonomi.
1.1 Syfte & forskningsfrågor
Syftet med detta arbete är att ta fram ett designförslag för en budgetapplikation skräddarsydd för studenter. Resultatet kommer att presenteras i form av en high-fidelity prototyp. Detta syfte mynnar ut i följande forskningsfrågor:
- Hur kan gränssnittet utformas för att ge studenter en positiv användarupplevelse samt få dem att vilja använda applikationen regelbundet?
- Vilka funktioner är viktiga för studenter? - Vilka grafiska element är viktiga för studenter?
- Kan studenter få en bättre överblick över sin privatekonomi med hjälp av en visualisering av ekonomisk data?
1.2 Avgränsningar
Detta arbete avgränsas genom att fokus kommer att ligga på budgetapplikationens utseende och användarupplevelse. Arbetet kommer alltså inte involvera varumärkesdesign. Dock kommer en style guide skapas för att designen ska vara enhetlig. Detta arbete kommer också att endast ta fram ett slutgiltigt designförslag för en budgetapplikation. Ingen riktig applikation kommer att göras, utan endast en prototyp med ett designförslag. Prototypen kommer endast designas för Android-telefoner.
2. Teori
2.1 Människor och ekonomi
Beteendeekonomi är ett forskningsområde där människors sätt att ta ekonomiska beslut studeras. Inom ekonomin vill man gärna tro att människor är rationella och överväger alla beslut med den information som finns tillgänglig. Men faktum är att människor inte är så rationella som vi gärna vill tro
(Molander, 2017). Molander (2017) fortsätter med att beskriva Richard Thalers teori om mental bokföring. Denna teori menar att vi människor skapar separata konton i våra medvetanden för att enklare kunna ta ekonomiska beslut, exempelvis ett konto för hushållsutgifter, ett för nöjen och så vidare. Oftast uppstår personliga regler som hindrar en person från att använda pengar, som är dedikerade till ett specifikt konto, för utgifter som tillhör ett annat konto. Ibland kan detta leda till
extra kostnader då vissa hellre tar ett lån, än att spendera pengar från “fel konto” (Molander 2017).
2.2 Kostnadsberäkningar
Varje år beräknar Konsumentverket hur mycket pengar som är rimligt att lägga på vissa
hushållsområden för att kunna hålla en rimlig levnadsnivå. Dessa hushållsområden kan exempelvis vara hemförsäkring, livsmedel, personlig hygien och hemutrustning (Konsumentverket 2019). Dessa kostnadsberäkningar uppdateras regelbundet då hushållens vanligaste utgifter samt vad som räknas som en rimlig levnadsnivå förändras över tid. Konsumentverkets kostnadsberäkningar utgår från insamlade priser från varor som är nödvändiga för att klara av vardagen och är oberoende av hushållets inkomster. Dessa beräkningar är dock väldigt grundläggande då exempelvis kulturella skillnader, sjukdomar och funktionsvariationer inte omfattas av beräkningen. Dessa
kostnadsberäkningar kan i sin tur användas som referensvärden vid privat ekonomisk planering samt för budgetrådgivning hos kommunala budget- och skuldrådgivare (Konsumentverket, 2019).
2.3 Dagens budgetapplikationer
I dag finns det en rad olika budgetapplikationer för olika ändamål som riktar sig till olika personer. Oftast riktar de olika applikationerna in sig på ett specifikt område, exempelvis budget, sparande, pengaröverföring eller lån. Funktionaliteterna skiljer sig en del mellan dessa applikationer, vissa av applikationerna behöver manuell inskrivning av information medan andra applikationer sköter det automatisk på grund av att användaren har lagt in sitt bankkort (Advisa, 2018).
2.4 Interaktionsdesign
Interaktionsdesign handlar om att förändra och förbättra människors sätt att interagera och kommunicera genom att skapa goda användarupplevelser med interaktiva produkter. Nuförtiden används interaktionsdesign som ett paraplybegrepp för en rad olika fält inom området, dock ligger fokus på hur man utformar användarupplevelser (Preece et al., 2016). Ett system som utvecklas utan en tanke på hur människor ska använda den må ha själva funktionaliteten men då blir användarna inte tillfredsställda av att använda den. Interaktionsdesign går helt enkelt ut på att försöka öka de positiva faktorerna i en användares användarupplevelse, exempelvis att användaren känner sig engagerad, samtidigt som de negativa faktorerna reduceras, exempelvis att användaren upplever frustration
(Preece et al., 2016). Inom interaktionsdesign krävs därför en bra förståelse av vem användaren är, vilka problem de stöter på samt hur dessa problem går att lösa. Alltså är huvudmålet inom
interaktionsdesign att skapa produkter, tjänster eller miljöer som i sin tur är lätta att lära, effektiva och som ger en tillfredställande användarupplevelse för användaren (Preece et al., 2016).
2.5 Användarupplevelse
Användarupplevelse (eng. user experience - UX) är ett brett begrepp som ibland kan skilja sig åt beroende på vem som beskriver det. Enligt författarna Tullis & Albert (2013) karaktäriseras begreppet användarupplevelse av en användare som interagerar med ett gränssnitt av något slag samtidigt som det läggs stor vikt på användarens upplevelser, vilket i sin tur går att mäta. Preece et al.:s (2016) beskrivning av användarupplevelse är liknande, men de fokuserar mycket på en persons nöjdhet vid interaktion med en produkt. Det handlar om intrycken personen får, både av helheten samt av de små detaljerna.
Ordet “uppleva” definieras som “vara med om, pröva på; känna, reagera, uppfatta” (Sjögren &
Györki, 2010) och är därför ingenting som går att framkalla direkt hos en människa. Det går alltså inte att skapa själva användarupplevelsen hos en användare men det går att skapa förutsättningarna runt användaren, så att en användarupplevelse uppstår hos användaren (Preece et al., 2016). Enligt Norman och Nielsen (u.å) kan användarupplevelse också beskrivas på detta sätt: ““User experience”
encompasses all aspects of the end-user's interaction with the company, its services, and its products”. Enligt författarna handlar alltså användarupplevelse inte bara om interaktion mellan slutanvändare och produkt. Det innefattar också interaktion mellan slutanvändaren och företaget samt företagets tjänster. Trots de olika uppfattningar som finns om begreppet användarupplevelse så kan den stora helheten beskrivas som ett intresse av hur personer interagerar med gränssnitt eller produkter, samtidigt som personens känslor, tankar och uppfattningar tas i beaktande (Tullis & Albert, 2013).
2.6 Grafiskt Användargränssnitt
Med ett grafiskt användargränssnitt gynnar man interaktionen mellan människor och system då det fungerar som en kontaktyta mellan dessa parter. Användargränssnitt består av menyer, texter, ikoner och andra grafiska element vilket i sin tur gör det enklare för användaren att navigera och tolka systemets information (Preece et al., 2016).
2.6.1 Gränssnitt för mobil
Det finns en del svårigheter när det gäller att designa gränssnitt för mobila enheter. Då skärmen på en mobil enhet är begränsad krävs noga planering av skärmutrymmet för att alla komponenter som kontrollerar enheten skall få plats. Dessutom behöver komponenternas storlek tas i beaktande för att användaren exempelvis skall kunna läsa text och trycka på knappar (Preece et al., 2016). När
gränssnittet presenterar för mycket information för användaren kan det uppfattas som rörigt. Därför är det viktigt att endast ta med de viktigaste funktionerna samt att gömma undan mindre viktiga
funktioner i komprimerade menyer, som i sin tur kan fällas ut (Shneiderman et al., 2018). Dock nämner Preece et al., (2016) att det finns risk för att det blir otydligt för användaren hur dessa funktioner skall utföras, om de är gömda.
2.6.2 Ikoner
En ikon är en avbildning av ett objekt eller en person (McCloud, 1994) och används för att förtydliga, informera och attrahera (Preece et al., 2016). För att oerfarna användare enklare skall kunna lära sig ett gränssnitt kan ikoner användas istället för text. Detta beror på att ikoner inom gränssnittsdesign brukar efterlikna olika funktioner, aktiviteter, objekt och applikationer vilket innebär att användare inte behöver kunna tekniska termer. Utifrån ikonerna kan användaren alltså se vad som kan komma att ske när hen klickar på en ikon. En fördel när det kommer till ikoner är att göra dem så kompakta som möjligt då de tar mindre plats. På så sätt är det möjligt att placera ut dem på fler positioner (Preece et al. 2016).
2.6.3 Form
Det är av stor vikt hur fotografier, illustrationer, texter, ikoner och rubriker placeras på en yta oavsett om det är i tryckt eller digitalt format. Genom placering av olika element på en yta skapas en form som guidar mottagaren från början till slut. Dock är det formen i relation till innehållet som förmedlar budskapet (Bergström, 2016).
Bergström (2016) fortsätter med att förklara att för många formelement på en yta inte är optimalt. Detta kan förvirra mottagaren och skapa onödig stress. Sådana situationer kan uppstå när exempelvis en hemsida har en allt för krånglig och tung navigation. När en yta, exempelvis hemsida, är intuitiv och alla element och placeringar är berättigade, först då har man uppnått en bra formgivning (Bergström, 2016).
När grundformen för ytan ska designas kan ett gridsystem med fördel användas. Med ett gridsystem menas att ytan delas in i rader och kolumner för att det ska vara enklare att placera in innehåll och element på konsekvent sätt (Bergström, 2016). Genom att använda sig av ett gridsystem kan designern planera ytan utefter vad som attraherar och fångar målgruppen. Med hjälp av placering av rubriker och andra grafiska element, olika teckenstorlekar och färger kan en visuell hierarki skapas som i sin tur leder ögat rätt (Arvola, 2014).
2.6.4 Färg
Författarna Shneiderman et al. (2018) berättar i sin bok, Designing the User Interface, om hur färg kan attrahera och ibland även kan öka effektiviteten av en applikation. Att använda färg som en
kodningsteknik kan hjälpa användaren med igenkänning vilket i sin tur snabbar på
inlärningsprocessen. Dock kan färg vara till belastning om den inte används på rätt sätt, exempelvis användning av kontrasterande färger. Färgkontraster kan höja budskapet men det kan också vara obekvämt att titta på samt ge mottagaren uppfattningen av att avsändaren inte är professionell. (Bergström, 2016).
För att kunna skapa välbalanserade färgkombinationer kan färgteori vara till hjälp, då det består av ett antal guidade principer. Färgteori handlar helt enkelt om att ta fram färger vars samspel är estetiskt tilltalande samtidigt som kombinationerna är behagliga att se på. Författarna Morioka och Stone (2006) rekommenderar att färghjulet RYB (eng. Red-Yellow-Blue) används, vilket består av
primärfärgerna Röd, Gul och Blå, samt färgkombinationer däremellan. Det finns redan förutbestämda färgharmonier som utgår från RYB vilka alla uppfattas på olika sätt. Dessa kombinationer är bland
annat: Komplementär, Analog, Monokrom, Triad, Splitt-komplementär och Dubbelsplitt-komplementär (Morioka & Stone, 2006).
2.7 Navigering av gränssnitt
Det räcker inte bara med att gränssnittet ser bra ut, utan användaren måste även kunna navigera inom det för att kunna utföra sina ärenden. En applikation vars struktur är djup och kräver många klick för att nå målet beskriver Tidwell (2011) som ett möjligt frustrationsmoment för användaren. För att slippa frustrationen hos användaren finns det olika sätt att hjälpa användaren att navigera. Ett bra sätt att börja på är att korta ner antal steg som krävs för att utföra en uppgift, så långt som möjligt. Tidwell (2011) nämner också modellen Hub and spoke vilket används flitigt på mobiltelefoner. Från
startsidan, som här fungerar som en slags hub, kan alla undersidor nås. Huben är alltså det enda sättet för att kunna nå undersidor. Undersidorna fokuserar endast på ett ämne var, vilket i sin tur gör att undersidorna kan utnyttja utrymmet till fullo (Tidwell, 2011).
En annan navigationsmodell som Tidwell (2011) tar upp är Fully connect. Denna modell innebär att användaren kan ta sig till vilken sida som helst, från vilken sida som helst. Alltså är alla sidor länkade till varandra. Detta görs möjligt av exempelvis en navigationsbar, som finns tillgänglig på varje sida (Tidwell, 2011).
2.8 Användarmönster
Tidwell (2011) skriver om några användarmönster, vilka beskriver mänskliga beteenden, som uppstår vid interaktion. Genom att ha dessa beteenden i åtanke vid interaktionsdesign skapar man bättre förutsättningar för användare. Detta kan således effektivisera utförandet av användarnas dagliga uppgifter. Nedan beskrivs ett urval av de användarmönster som Jenifer Tidwell skriver om, i sin bok Designing Interfaces (2011):
Utforska säkert (eng. Safe Exploration)
Med Safe Exploration menas att användaren känner sig säker och kan testa sig fram i gränssnittet utan att oroa sig för att råka ut för större konsekvenser. Dessa konsekvenser kan bestå av
frustrationsmoment som i sin tur gör användaren omotiverad till att utforska gränssnittet. När användaren känner sig säker bidrar det till bättre inlärning av gränssnittet samtidigt som det är mer troligt att användaren upplever systemet som positivt (Tidwell, 2011).
Omedelbar återkoppling (eng. Instant Gratification)
Användarmönstret Instant Gratification anspelar på människans behov av bekräftelse. Användare som tidigt får feedback från systemet att de gjort en korrekt handling, är mer benägna till att fortsätta använda systemet (Tidwell, 2011).
Spatialt minne (eng. Spatial memory)
Spatial memory handlar om positionering av objekt, exempelvis knappar, och användarens minne. Det är större chans att användaren återfinner ett objekt på grund av dess position snarare än dess namn. På grund av att det spatiala minnet är så starkt är det viktigt att tänka på att inte placera objekt som förekommer i andra system, såsom menyer och knappar, på udda placeringar. Det kan alltså underlätta användningen om dessa objekt har liknande placeringar i olika system, då användaren lättare kan känner igen sig (Tidwell, 2011).
2.9 Informationsvisualisering
Informationsvisualisering handlar om att representera och illustrera abstrakt data, genom olika
tekniker. Detta har i sin tur som uppgift att öka människors förståelse för presenterad data och därmed kunna visualisera (mentalt föreställa sig) den (Spencer, 2014). Det kan både vara numerär och icke-numerär data som kan presenteras med hjälp av olika tekniker såsom bland annat punktdiagram, träd och kartor (Preece et al. 2016).
2.9.1 Diagram
Diagram kan hjälpa användaren att få en överblick av data samtidigt som datan på så sätt enklare kan jämföras och värderas. Dock passar olika diagram för olika datatyper och det gäller att anpassa diagrammet efter datan för att uppnå bästa resultat (Wallgren & Wallgren, 2008). Olika typer av diagram tolkas även olika av ögat vilket innebär att vissa diagramtyper är enklare att förstå än andra. Diagram som visar ytor, volymer, och lutningar och vinklar är oftast svåra för ögat att tolka. De består oftast av former, vilket lätt skapar illusioner för ögat. Ögat kan heller inte göra någon kvantitativ bedömning av dem, dock kan ögat oftast rangordna dem i storleksordning (Wallgren & Wallgren 2008). Dessa är svåra just för att de inte har någon referenspunkt mot en x- eller y-axel. Längder, olika lägen (punkter) på identiska skalor och olika lägen (punkter) på samma skalor är lättare för ögat att tolka. Dessa innehåller x- och y-axlar vilket gör det enklare för ögat att tyda informationen då den kan använda dessa axlar som referens.
Dagens teknik gör det enklare att interagera med digitala diagram vilket medför att användaren enklare kan få fram ytterligare information om diagrammet. Jenifer Tidwell (2011) menar på att när det kommer till ett välgjort, statiskt diagram vars syfte är att visas på en skärm kan det bli ännu bättre med hjälp av interaktivitet. Detta ger användaren full kontroll över vilken information som ska visas samt hur informationen skall utforskas (Tidwell, 2011). För att kunna skapa ett diagram som är bra och lättförståeligt bör budskapet vara klart och tilltalande. Även kunskap om hur bra målgruppen kan hantera och läsa av diagram behövs (Wallgren & Wallgren, 2008). Enligt Jenifer Tidwell krävs det att designern har en bra förståelse för vad målgruppen behöver lära sig, för att kunna skapa ett bra diagram.
3. Metod
Metoden för detta arbete följer till stor del den designprocess som Mattias Arvola beskriver i sin bok Interaktionsdesign och UX (2014). Designprocessen är uppdelad i tre moment, Konceptfas,
Bearbetningsfas och Detaljeringsfas. Dock finns det vissa undantag i detta arbete som avviker från Arvolas designprocess. Då världen just nu är inne i en kris med en ny virussjukdom, Covid-19, innebär det att en del av metoderna i detta arbete, specifikt där människokontakt ingår, blev omöjliga att genomföra på ett optimalt sätt. Därför har vissa delar i Arvolas designprocess ersatts med
genomförbara alternativ.
3.1 Förstudie
Förstudien för detta arbete gick ut på att ta reda på målgruppens nuvarande beteenden samt vilka funktioner de skulle uppskatta i en budgetapplikation. Förstudien genomfördes med hjälp av
semistrukturerade intervjuer med studenter samt genom kartläggning av respondenternas svar i form av ett affinitetsdiagram. Resultaten från denna förstudie låg sedan till grund för det fortsatta arbetet och för en första prototyp.
3.1.1 Semistrukturerade intervjuer
För att ta reda på studenters förhållande till privatekonomi gjordes semistrukturerade intervjuer. Med denna metod kan förståelsen av studenternas erfarenheter och tankar öka, på individnivå. I
semistrukturerade intervjuer ställs fördefinierade frågor vars ordning väljs ut av intervjuledaren allt eftersom intervjun fortlöper. Intervjuledaren tar då hänsyn till om deltagaren tidigare besvarat en kommande fråga eller om deltagaren börjar närma sig ett nytt ämne så att en röd tråd kan följas genom hela intervjun. Trots att de olika intervjuerna får olika ordning på frågorna skall ändå alla frågor besvaras av alla deltagare. I de semistrukturerade intervjuerna ställdes både öppna och slutna frågor till deltagaren. Öppna frågor ger deltagaren möjlighet att utveckla sina egna svar, medan slutna frågor har förutbestämda svarsalternativ, oftast ja och nej. Genom att tillåta deltagaren att utveckla sina svar, genom exempelvis följdfrågor, kan ny information komma fram (Preece et al, 2016). På grund av de begränsningar som Covid-19 medförde kunde inte ett fysiskt möte ske, därför gjordes istället intervjuerna på nätet via en videochatt.
3.1.2 Affinitetsdiagram
För att strukturera upp och kategorisera den data som genererades av intervjuerna med studenterna, skapades ett affinitetsdiagram. Ett affinitetsdiagram är ett hierarkiskt diagram som består av data som är uppdelad i olika grupperingar. Dessa grupperingar ger en insyn i användarnas problem och behov och ger således upphov till krav som bör uppfyllas för att tillfredsställa användarna (Holtzblatt, et al. 2005). På detta sätt erhölls en bättre överblick av deltagarnas avsikter samt en djupare förståelse av deras problem (Arvola, 2014).
3.2 Konceptfas
Konceptfasen är den första delen i Arvolas (2014) designprocess och fungerade som en påbyggnad på förstudien i detta arbete. I Arvolas konceptfas sker undersökningar och efterforskning för att ta reda på vilka problem som finns samt hur de ska lösas. I detta stadie av arbetet undersöktes även målgruppens avsikter samtidigt som tydliga mål sattes för projektet.
3.2.1 Personas
En persona är en fiktiv person som är utformad efter information och fakta om målgruppen. Personan beskrivs med hjälp av intressen och får en personlighet som speglas av målgruppen (Arvola, 2014). Arvola (2014) berättar också att detta är till fördel då målgruppens problem och behov konkretiseras. Preece et al. (2016) menar på att målgruppen blir därmed enklare att förstå samt att problemet blir lättare att diskutera. För att öka förståelsen om målgruppen i detta arbete, skapades en primär och en sekundär persona. Informationen som samlades in under förstudien användes som inspiration och låg sedan till grund för en primär och sekundär persona.
3.2.2 Brukskvaliteter
Som en del av konceptfasen togs ett antal brukskvaliteter fram. Med brukskvaliteter menas adjektiv- eller substantivfraser som beskriver en upplevelse som användarna ska känna när de använder den interaktiva prototypen (Arvola, 2014). Detta är en typ av effektmål, men med denna metod kan effekterna oftast mätas genast. Därför valdes brukskvaliteter framför långvariga effektmål, då det annars kunde ta år för effekterna att synas (Arvola 2014).
3.3 Bearbetningsfas
Bearbetningsfasen handlar om att ta fram funktioner och innehåll som grundas på den information som uppkom under konceptfasen. Fokus ligger på att skissa upp olika koncept på gränssnittets utformning. Även fokus på hur interaktionen ska fungera är viktigt i detta stadie (Arvola, 2014).
3.3.1 Webbkarta
Som en början på bearbetningsfasen skapades en webbkarta. Webbkartan visar upp en översikt av prototypens sidor samt länkarna mellan dem. De olika sidorna illustreras av noder, vars storlek beror på användarnas intresse, och länkarna mellan sidorna illustreras av streck (Arvola, 2014). Genom att rita upp en webbkarta skapas en uppfattning om hur prototypen är uppbyggd och hur navigeringen ser ut.
3.3.2 Gränssnittsskissning
För att ha en grund till en low fidelity prototyp gjordes skisser av gränssnittets layout. Skisserna representerar en avskalad version av gränssnittets flöde och producerades för enkelhetens skull med papper och penna. Arvola (2014) poängterar att vid skissning av gränssnittsflöden kan designern lätt glömma bort att utveckla andra designalternativ. För att undvika detta misstag värderades därför varje skiss av författaren, med hjälp av plus-minus-listor för att i sin tur undersöka andra designalternativ. Plus-minus-listorna bestod av följande fyra markeringar:
● +: markering av positiva attribut och kommentarer.
● -: markering av negativa attribut och kommentarer
● ?: ifrågasatte vissa designval och tog upp möjliga förbättringar
● !: markering av starka designval
3.3.3 LoFi-prototyp
För att tidigt kunna testa tankar och idéer som uppkommit samt de resultat som utvunnits från förstudiens intervjuer rörande gränssnittet, skapades en low fidelity prototyp (hädanefter kallad LoFi-prototyp). LoFi-prototyper har vanligtvis en låg detaljeringsgrad vilket innebär att färg och form inte prioriteras i prototypen (Arvola, 2014). Fokus låg därför istället på att fastslå funktioner och
navigation. För enkelhetens skull brukar LoFi-prototyper skapas av papper och användartesterna sker vid ett fysiskt möte för att kunna samla in så mycket data som möjligt. På grund av virussjukdomen Covid-19 var det inte optimalt att utföra användartester med personer i samma rum vilket resulterade i att prototypen skapades i ett digitalt format istället för analogt. Denna ändring var nödvändig för att kunna utföra användartester med deltagare över internet. Den digitala prototypen hade samma låga detaljeringsgrad som en fysisk och skapades med hjälp av prototypverktyget Figma (Figma, u.å). Figma liknar Adobe XD eller Adobe Illustrator i den mån att verktyget också använder sig av vektorgrafik. Trots de möjligheter som kom med en digital prototyp, exempelvis animationer och övergångar, så användes inte dessa funktioner. Detta val gjordes för att den digitala prototypen skulle efterlikna en fysisk LoFi-prototyp så mycket som möjligt.
3.3.4 Användartestning och värdering av LoFi-prototyp
För att utvärdera funktionerna och navigeringen i prototypen utfördes användartester. Denna del var till för att säkerställa att funktioner, navigation och layout i gränssnittet höll en viss kvalité. Därför rekryterades deltagare som har tidigare erfarenhet av UX-design och grafisk design för att testa LoFi-prototypen. Vanligtvis sker användartester vid ett fysiskt möte men på grund av Covid-19 var detta inte möjligt, därför valdes en alternativ metod som kunde genomföras på distans.
Idag finns en rad olika program och applikationer som gör det möjligt att utföra användartester via internet. Metoden kallas för Remote Usability Testing och var en fördel i denna situation då deltagarna inte behöver ta sig till en specifik plats (Shneiderman et al., 2018). Användartesterna utfördes via konferensverktyget Zoom. Detta för att deltagarna skulle kunna visa vad som hände på sin skärm samtidigt som hen visade sitt ansikte under testets gång. Genom att deltagaren visade sitt ansikte kunde en bättre kontakt erhållas mellan deltagaren och testledaren. Innan själva användartestet fick deltagarna ta del av ett samtyckesdokument samt svara på några inledande frågor gällande
demografi och vad de hade för tidigare erfarenheter (se Bilaga 5. Inledande frågor för LoFi-prototyp). Vid själva användartestet mättes deltagarnas nivå av framgång (eng. level of success) för varje
uppgift. Deltagarna blev tilldelade 0, 1 eller 2 beroende på om de misslyckades med att utföra uppgiften, klarade uppgiften med problem eller hjälp, eller slutförde uppgiften utan problem. Enligt Tullis & Albert (2013) kan data missas vid få nivåer och därför fördes också kvalitativa anteckningar om hur deltagarna navigerade sig och vad de tänkte under testets gång. Utöver användartestet fick deltagarna även svara på några inledande frågor om ålder, utbildning och erfarenhet gällande UX-design samt i vilken utsträckning de använder mobila applikationer. Deltagarna fick även några
avslutande frågor angående hur de upplevde LoFi-prototypen (se Bilaga 8. Avslutande frågor för LoFi-prototyp).
3.3.5 Style guide
Inför detaljeringsfasen och produktionen av HiFi-prototypen skapades en style guide. Färgscheman, typsnitt, ikoner och knappar sattes ihop i ett dokument så att en enhetlig design kunde skapas för HiFi-prototypen. Arvola (2014) menar att genom att skapa en style guide kan känslan i designen förstärkas.
3.4 Detaljeringsfas
Detaljeringsfasen är den tredje och sista fasen i Arvolas (2014) designprocess. I detta stadie ligger större fokus på gränssnittets design och interaktionens känsla.
3.4.1 HiFi-prototyp
Som en avslutande del i denna arbetsprocess skapades en high fidelity prototyp (hädanefter kallad HiFi-prototyp). Denna prototyp var av hög detaljeringsgrad och tillverkades digitalt med hjälp av prototypverktyget Figma (Figma, u.å). Med hög detaljeringsgrad menas att prototypen kommer att fokusera på känslan i interaktionen samt det grafiska i prototypen (Arvola, 2014). Style guiden applicerades på denna prototyp och då prototypen var av hög detaljeringsgrad användes även animationer och övergångar. Endast de sidor och funktioner som var relevanta för detta arbete och användartestet tillverkades för prototypen. Arvola (2014) menar på att endast de nödvändiga delarna som bidrar till att framföra prototypens budskap samt gör det möjligt att testa prototypen bör byggas. På grund av att det är väldigt tidskrävande att bygga en helt funktionell prototyp togs beslutet att endast tillverka de delar av prototypen som var nödvändiga för detta arbete. Då användartesterna behövde ske på distans på deltagarnas mobiler, skapades prototypen i flera olika storleksförhållanden. Detta beslut togs då Figma endast kunde hantera responsivitet till en viss grad och prototypen behövde passa flera olika mobilmodeller.
3.4.2 Användartestning och värdering av HiFi-prototyp
I detta användartest deltog målgruppen för att säkerställa att interaktionen, funktionerna och designen passade just dem. På grund av Covid-19 var det inte möjligt att utföra användartesterna vid 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). Deltagarna utförde därför användartesterna på sina mobiler med hjälp av applikationerna Zoom och Figma Mirror. Figma Mirror är en mobilapplikation som kan visa upp prototyper och som går att använda vid användartestning. Användartestet var uppdelat i tre moment. Det första momentet bestod av demografiska frågor (se Bilaga 10. Inledande frågor för HiFi-prototyp). Andra momentet bestod av själva användartestet där deltagaren fick utföra förutbestämda uppgifter (se Bilaga 11. Användartest för HiFi-prototyp). Även vid detta test mättes deltagarnas nivå av framgång (se 3.3.4 Användartestning och värdering av LoFi-prototyp) samtidigt som kvalitativa anteckningar skrevs ner. Tredje momentet bestod av en SUS-enkät (eng. System Usability Scale) (se Bilaga 12. SUS-enkät) med en avslutande diskussion. I detta arbete användes en SUS-enkät översatt till svenska av Malin Fabbri (2013). SUS-enkäter används flitigt när den upplevda användbarheten av en produkt ska mätas. Enkäten består av 10 påståenden där varje
påstående har en femgradig skala (Tullis & Albert, 2013). Deltagaren ska då gradera varje påstående, 1 till 5 där 1 står för “Jag håller absolut inte med påståendet” och 5 står för “Jag håller absolut med
påståendet”, utifrån hens upplevelse. Varannan fråga är positivt formulerad respektive negativt
formulerad (Tullis & Albert, 2013). Efter att deltagaren hade fyllt i SUS-enkäten räknades det slutgiltiga värdet ut genom att slå ihop värdena för varje påstående. Enligt Tullis & Albert (2013) innebär ett värde på över 70 att resultatet är acceptabelt. Ligger värdet på under 50 är det inte acceptabelt och bör åtgärdas. Värdena mellan 50 och 70 fungerar som en slags marginal. Efter SUS-enkäten fördes en diskussion mellan deltagaren och testledaren angående deltagarnas SUS-gradering, för att få ytterligare information kring deras åsikter.
4. Utförande
Nedan följer en detaljerad beskrivning om hur arbetet utfördes.
4.1 Förstudie
Under förstudien erhölls en bättre förståelse om målgruppen med hjälp av intervjuer och
affinitetsdiagram. Av dessa metoder framkom information om målgruppens nuvarande problem samt vad de hade velat se för funktioner i en budgetapplikation.
4.1.1 Intervjuer och Affinitetsdiagram
I förstudien intervjuades fyra studenter, alla från olika utbildningar vid Linköpings Universitet. Deltagarna var antingen en bra bit in i eller i slutet av sin utbildning. De utbildningar som representerades var Kognitionsvetenskap, Grafisk Design och Kommunikation, Innovativ
programmering och Civilingenjör i Datateknik. Innan intervjuns början fick deltagaren ta del av en samtyckesblankett som innehöll information om anonymitet, vad arbetet handlar om, vad som kommer hända och vad den insamlade datan kommer att användas till. Efter att deltagaren godkänt samtyckesblanketten började intervjun med en liten enkät som samlade in demografisk information om deltagarnas kön, ålder och utbildning. Därefter fick deltagaren svara på 11 frågor (se Bilaga 1. Intervjufrågor). Ordningen på frågorna blev dock olika för de olika deltagarna då vissa omedvetet svarade på kommande frågor när de besvarade sin nuvarande fråga. Dessa frågor handlade bland annat om deltagarnas vanor kring privatekonomi samt vilka funktioner och vilket utseende de hade velat se i en budgetapplikation.
Deltagarna som deltog i detta moment uttryckte ingen större ekonomisk oro utan de kände att de hade sina rutiner för att kontrollera sin ekonomi och på så sätt kände de sig lugna. Studenterna som deltog i intervjuerna studerade antingen sista året eller var en bra bit in på sin utbildning och hade på så sätt haft tid på sig att bygga upp rutiner som passade just dem. Dock angav de ändå ett intresse för att se statistik över sin ekonomi och på ett bättre sätt kunna kategorisera sina utgifter. Vidare berättade deltagarna om funktioner de finner viktiga för att kontrollera sin ekonomi, så som att kunna skapa sina egna kategorier, se statistik samt att kunna koppla ihop swish med utgifter. Beträffande en
budgetapplikations utseende ville deltagarna se neutrala grundfärger, färgkodning samt runda former. De berättade också om frustrerande moment som uppkommer i deras nuvarande ekonomiska rutiner såsom att det är tidskrävande att manuellt fylla i en budget, att deras nuvarande bankapplikationer har för breda kategorier och att inkommande swishbetalningar visas som en falsk inkomst.
För att göra informationen mer överskådlig gjordes ett affinitetsdiagram (se Bilaga 2.
Affinitetsdiagram). De viktigaste anteckningarna från intervjuerna skrevs upp på post-it-lappar som därefter kategoriserades in i grupper beroende på deras relation till varandra (se Figur 1. Bild över affinitetsdiagrammet). Därefter namngavs grupperingarna utifrån vilket tema de genomsyrade. Sex kategorier uppkom som fick de beskrivande namnen: Utseende, Funktioner, Egenskaper,
Motivationer, Studenters nuvarande metoder och Frustrerande moment. Nedan följer en kort
beskrivning av varje kategori, för att ta del av alla anteckningar för varje kategori (se Bilaga 2. Affinitetsdiagram).
Figur 1. Affinitetsdiagrammet från förstudien.
Kategorin Utseende fokuserar på hur budgetapplikationen skulle vara designad utseendemässigt enligt deltagarna. Här tog deltagarna upp att de ville se rundare former, neutrala grundfärger och färgkodade kategorier. Deltagarna tyckte även att applikationen borde se professionell ut samtidigt som färg och form bidrar till en viss lekfullhet.
Kategorin Funktioner tar upp vilka funktioner som deltagarna skulle vilja använda sig utav i en budgetapplikation. Deltagarna tog upp funktioner såsom att kunna skapa egna kategorier, dela upp köp i flera kategorier samt kombinera swishbetalningar.
Egenskaper beskriver vilka attribut som deltagarna ville att en budgetapplikation bör ha. Här beskrev
deltagarna många egenskaper som kan kopplas till upplevelser såsom att applikationen ska kännas smidig, intuitiv och vara enkel att använda.
Kategorin Motivationer tog upp vad som motiverar deltagarna till att ha kontroll på sin ekonomi. Det som motiverade deltagarna var bland annat att kunna se en tydlig progression, spara upp till en buffert samt att se hur mycket man spenderar och på vad.
Studenters nuvarande metoder beskriver vad deltagarna hade för nuvarande metoder när det
kommer till att ha uppsikt över sin ekonomi. Många av deltagarna berättade att de använder sig av sina bankers tillhörande applikationer för att ha kontroll på sin ekonomi men att det också finns ekonomiska rutin som gör att deltagarna vet vad som är rimligt att lägga pengar på och inte. Två av deltagarna nämnde också att de skapar en budget med hjälp av Excel-dokument.
Frustrerande moment relaterar till de problem och moment som deltagarna fann frustrerande när de
skulle hålla reda på sin ekonomi. De frustrerande momenten kunde bland annat vara att det är tidskrävande att ha kontroll på ekonomin, speciellt att mata in data manuellt. Andra frustrerande moment var att bankernas kategorier kändes för breda och att det var förvirrande hur swishbetalningar visades upp i respektive bankapplikation.
4.2 Konceptfas
Under konceptfasen konkretiserades målgruppens problem och behov utifrån den information som samlats in under förstudien. Under denna fas skapades personor och brukskvaliteter för att förtydliga vilka personlighetstyper målgruppen består av samt hur de bör uppleva designförslaget.
4.2.1 Personas
Efter förstudien erhölls en tydligare bild av målgruppen samt deras problem. Som tidigare nämnts i 4.1.1 Intervjuer och Affinitetsdiagram var studenterna från förstudien antingen en bra bit in i eller i slutet av sin utbildning. Detta gjorde att de över tid skapat egna ekonomiska rutiner som i sin tur gjorde att de kände sig lugna i sin ekonomiska situation. Dock nämnde två av deltagarna att de kanske skulle haft ett större behov av en budgetapplikation, i syfte att ha kontroll på sin ekonomi, när de för första gången flyttade hemifrån och fick ta hand om sin egen ekonomi. Trots att alla deltagarna kände ett ekonomiskt lugn tyckte de ändå att det var givande och intressant att ha kontroll på sin ekonomi. Genom dessa intervjuer framkom att studenterna befann sig i olika skeden av sina utbildningar, och sina liv, och hade olika ekonomiska behov. För att representera både studenter som har svårt att ha kontroll på sin ekonomi och studenter som känner ekonomiskt lugn men ändå finner ekonomi intressant skapades därför en primär och en sekundär persona.
Vid skapandet av den primära och sekundära personan användes informationen som samlades in under förstudien som inspirationskälla. Dessa två personor fick därefter en egen personlighet samt en
uppsättning mål som kunde kopplas till applikationen.
De rubriker som beskriver varje persona är Information, Personlighet, Biografi, Motivationer och
Frustrationer. Informationen beskriver demografisk information om personan, såsom ålder, kön och
utbildning. Personligheten beskriver personans karaktärsdrag som i sin tur ger upphov till ett visst beteende. Att sätta en personlighet på personorna ansågs viktigt för att kunna anpassa prototypens användarmönster så att den skulle kunna passa fler personlighetsdrag. Biografin ger en kortfattad bakgrundshistoria till personan, vilket sammanfattar de andra rubrikerna. Det är tänk att biografin ska låta designern lära känna personen bättre. Motivationer talar om vad det är som lockar personorna till att utföra ekonomiska handlingar. Frustrationer beskriver ekonomiska situationer och problem som personan helst vill undvika.
Primärpersonan Johan Johansson, som syns i Figur 2, är en nybliven läkarstudent som nyligen flyttat hemifrån. Hans problem är att han inte riktigt vet vart hans pengar tar vägen. Han har aldrig haft ett större ekonomiskt ansvar och det börjar han märka nu när han bor utan föräldrarna. Johan behöver ett enkelt och intuitivt sätt att hålla koll på sin ekonomi då han ofta känner sig osäker.
Figur 2. Primärpersonan Johan Johansson.
Sekundärpersonan Johanna Johansson, som syns i Figur 3, studerar tredje året på utbildningen Civilingenjör i maskinteknik. Hon känner sig bekväm i sin ekonomiska situation men tycker att det är intressant och givande att se statistik över sin ekonomi. Dock tycker Johanna att det finns vissa frustrationsmoment i de ekonomiapplikationer hon använder idag, till exempel att swish-inbetalningar visas som en inkomst. Då hon också försöker att vara lite mer hälsosam saknar hon ett sätt att kunna dela upp ett köp i olika kategorier. Hon köper ju inte alltid bara mat på mataffären utan vill på ett tydligt sätt kunna se vad som läggs på mat och vad som läggs på godis. Johanna motiveras av att se progression och vill då ha en applikation som tydligt visar framsteg.
4.2.2 Brukskvaliteter
Utifrån förstudien och personorna Johan Johansson och Johanna Johansson togs sex brukskvaliteter fram. Genom att undersöka intervjuerna i förstudien och personorna kunde ett antal önskade
upplevelser tas fram. Dessa utgår från intervjudeltagarnas önskemål och vad som passar personornas personligheter. Dessa brukskvaliteter fungerar som mål som kan mätas med den slutgiltiga prototypen. De sex brukskvaliteter som togs fram är:
● Professionell men inte tråkig: denna brukskvalitet speglar vad användaren ska känna
angående utseendet av applikationen. Användaren skall känna att det är en seriös applikation samtidigt som den inte tråkar ut användaren.
● Intuitiv: anspelar på vad användaren ska känna när det kommer till navigering och
funktioner. Målet är att användaren skall kunna navigera sig i applikationen och använda sig av funktioner utan att behöva resonera medvetet.
● Smidig: beskriver mer den känsla som användaren ska känna när hen har applikationen i
handen. Denna brukskvalitet anspelar på ett samspel mellan funktioner, sidor, övergångar och placeringar av element.
● Översiktlig: denna brukskvalitet anspelar på innehållet i applikationen. Användaren skall
känna att hen får en bra översikt över den information som visas upp och därmed kunna ta del av informationen snabbt.
● Anpassningsbar: anspelar också på innehållet i applikationen. Med denna brukskvalitet är
målet att användaren skall känna att hen kan skräddarsy applikationen utefter hens önskemål.
● Enkel att använda: anspelar på helhetsupplevelsen av applikationen. Detta innebär att
användaren skall kunna navigera sig runt i applikationen utan att känna sig frustrerad eller stöta på problem.
4.3 Bearbetningsfas
Under bearbetningsfasen togs funktioner och innehåll fram, för att sedan kunna skapa en struktur för prototypen. Avslutningsvis skapades sedan en LoFi-prototyp som användartestades och värderades.
4.3.1 Webbkarta
Efter att målen sattes upp, i form av brukskvaliteter, skapades en webbkarta med sidor som innehöll funktionaliteter som deltagarna i förstudien ansåg vara viktiga, samt funktionaliteter som skulle underlätta för personorna (se Figur 4. Version 1 av webbkartan). Det bildades då fyra huvudsidor:
Översikt, Händelser, Budget och Mål. Även sidan inställningar skapades men då den inte är
uppbyggd på samma sätt som de resterande sidorna räknas den inte som en huvudsida. På sidan
Översikt, som också fungerar som en startsida, finns det snabb ekonomisk information och statistik
som går att anpassa utifrån vad användaren själv vill se. Händelser är en samlingssida för undersidorna händelser, konton och kategorier. På huvudsidan Händelser är det alltså möjligt att växla mellan dessa tre undersidor utan att lämna huvudsidan. Sidan Mål innehåller användarens sparmål, och här kan även nya sparmål skapas. På sidan Budget syns aktiva budgetar samtidigt som man kan skapa nya. Inställningar behandlar applikationens inställningar exempelvis notifikationer. Webbkartan byggdes upp med hjälp av noder och streck, där noderna representerar sidor och strecken länkar. Ju större nod desto mer intressant är sidan för användaren. Översiktsnoden är den största då
denna även fungerar som en startsida. Det är även här användaren kommer finna all sin information samlad. Händelsenoden är näst störst då den innehåller användarens transaktioner. Denna sida innehåller en rad olika funktioner, såsom dela upp och kombinera betalningar. Detta gör att användaren kan komma att spendera en hel del tid här. Budget- och Målnoderna är relativt lika i storlek. Användaren ansågs endast behöva tillgång till dessa sidor antingen för att skapa nytt eller redigera sina budgetar och sparmål, vilket antas inte hända så ofta. Förutom de vanliga noderna och strecken har en ny sorts nod skapats för detta arbete. Dessa nya noder (hädanefter kallade
underliggande noder) representerar de underliggande sidorna händelser, konton och kategorier. Dessa underliggande noder är något ljusare i färg och sitter ihop med en huvudnod. Detta för att kunna visa att dessa tre noder egentligen kan ses som en sida, alltså huvudsidan Händelser. Beslutet att använda navigationsmönstret Fully connect (se 2.7 Navigering av gränssnitt) togs för att göra applikationen så ytlig som möjligt för att användaren enkelt skulle kunna få en överblick av applikationen, vilket i sin tur förhoppningsvis underlättar användningen för användaren.
Figur 4. Version 1 av webbkartan.
4.3.2 Gränssnittsskissning
Efter att den övergripande strukturen tagits fram med hjälp av en webbkarta påbörjades skissning av budgetapplikationens gränssnitt. Minst en gränssnittsskissning gjordes av varje huvudsida som sedan värderades av författaren med hjälp av +, -, ? och !. + representerade positiva attribut och
kommentarer medan - representerade negativa attribut och kommentarer. Kommentarer som
ifrågasatte vissa designval och tog upp möjliga förbättringar markerades med ett ?. Starka designval markerades med !. Då vissa designval innebar små förändringar gjordes endast en skiss av vissa sidor. Skissen hade alltså nästan sett likadan ut som föregående förutom en liten ändring. Därför valdes dessa små designalternativ att markeras med hjälp av ?. Värderingen som gjordes på dessa skisser utgick ifrån de brukskvaliteter som togs fram i 4.2.2 Brukskvaliteter. Målet med dessa skisser var att försöka välja ut funktioner som samspelade med varandra, samtidigt som layouten var viktig. Det var
även viktigt att ha användaren i åtanke så att element inte placerades på svårt oåtkomliga ställen. För att ta del av alla skisser som gjordes se Bilaga 3.
Figur 5. Skiss över huvudsidan Översikt.
Översikt
Vid skissning av Översiktsidan experimenterades det mycket med olika typer och placeringar av menyer (se Figur 5. Skiss över huvudsidan Översikt). Ett exempel var en hamburgarmeny i övre vänstra hörnet. Detta är en vanlig metod som användare är vana vid på exempelvis hemsidor. En positiv egenskap med hamburgarmenyn är att den kan innehålla fler länkar och då den går att komprimera kan den enkelt gömma dessa länkar. Dock var placeringen inte optimal då användaren i sin tur behöver sträcka sig över hela skärmen med tummen för att kunna klicka ner menyn.
Placeringen går alltså mot brukskvaliteten Smidig. Då det bara fanns fyra huvudsidor kändes en hamburgarmeny överflödig då det skulle resultera i fler klick för användaren än om länkarna var synliga hela tiden på skärmen. Därför utforskades ett designalternativ som innehöll en statisk
navigationslist på botten av skärmen. Navigationslisten var senare den meny som valdes på grund av lätt åtkomst vilket uppfyllde kravet för Smidig. Denna meny krävde också få klick för att kunna navigera sig vidare vilket uppfyllde kravet om Enkel att använda.
Förutom att undersöka olika menyförslag gjordes lite olika förslag på layouter för själva innehållet på sidan (se Bilaga 3. Gränssnittsskissning). Av skisserna som gjordes för innehållet var det ingen som tillgodosåg båda kraven om Anpassningsbar och Översiktlig förutom den första Översiktskissen. I denna skiss är tanken att användaren skall kunna redigera, lägga till och placera ett urval av widgets och på så sätt kunna skräddarsy sidan för sitt eget behov.
Några av skisserna hade storleksmässigt större informationsrutor vilket gjorde att det fanns mindre risk för att det skulle överväldiga användaren. Dock kändes det svårare att få en snabb överblick om bara två diagram och/eller informationsrutor syntes på sidan. Trots risken att sidan skulle bli
överväldigande valdes skissen som innehöll widgets. Då tanken var att sidan skulle vara så pass anpassningsbar kan användaren själv välja hur mycket hen vill se på Översiktsidan.
Händelser
Figur 6. Del av skiss för sidan Händelser.
Händelsesidan skall innehålla användarens transaktioner, kategorier och konton (se Figur 6. Del av skiss för sidan Händelser). Det gjordes inte flera skisser av denna sida då fokus låg på att visa funktioner och hur interaktionen kunde designas. Beslutet att fokusera på funktioner och interaktion togs på grund av att det inte ansågs finnas så många olika sätt att presentera transaktioner på. Bland annat skissades en ny funktion fram som tillåter användaren att kombinera utgifter med inkommande swishbetalningar. Detta var en funktion som studenterna från förstudien då saknade (se 4.1.1
Intervjuer och Affinitetsdiagram). Det skissades även på hur användaren skulle interagera med denna sida för att det skulle kännas så naturligt som möjligt. Alltså skulle det vara en lösning på kravet
Intuitivt. Ett förslag var att dra en betalning till en annan och på så sätt kombinera betalningarna.
Detta visade sig senare vara omöjligt att utforma i prototypen, vilket gjorde att enkla klick och popup-menyer användes istället.
Budget
Under Budgetsidan skapar och hanterar användaren alla sina budgetar (se Figur 7. Del av skiss för huvudsidan Budget). Här gavs två olika alternativ på hur budgetarna skulle kunna visas upp. Det första alternativet bestod av rutor med lister som fylldes på i samma takt som användaren köpte något inom den kategorin. På så sätt kan användaren tydligt se hur mycket av budgeten som har använts och hur mycket som finns kvar av den. Det ger en bra Översikt. Ett annat alternativ bestod av mindre rutor som i sin tur tog upp mindre plats. Dock var det svårt att visuellt visa hur mycket som hade använts och hur mycket som var kvar av budgeten. Detta gjorde det svårare att snabbt få en uppfattning om hur användaren låg till med sin budget. För att tydligt kunna visa information för användaren valdes därför de större budgetrutorna. Utöver hur själva budgetarna skulle presenteras diskuterades det även om någon slags grafik behövdes som sammanfattade för användaren hur hen låg till med alla budgetar sammanlagt. Detta var något som senare fördes vidare till LoFi-prototypen.
Mål
Figur 8. Del av skiss över huvudsidan Mål.
Huvudsidan Mål låter användaren att skapa och hantera Sparmål (se Figur 8. Del av skiss över
huvudsidan Mål). Här fanns funderingen om det skulle öppnas en ny sida när användaren hanterade ett sparmål. Men för att göra prototypen så Enkel att använda som möjligt togs beslutet att inte lägga till mer djup. Därför gjordes valet att använda dialogrutor istället. Målet var att användaren tydligt skulle kunna se progression på sina sparmål och därför gjordes skisser på stora diagram som visade hur långt användaren hade kommit på sitt sparmål. Det ritades även ett alternativ som innehöll mindre rutor. Det positiva med detta alternativ var att sparmålen tog mindre plats men i och med att rutorna var mindre fanns det inte lika mycket plats för information, vilket gjorde att användaren i sin tur inte fick lika snabb Översikt. Då en användare förmodligen inte har så många aktiva sparmål samtidigt är utrymme på skärmen inget problem. Därför valdes de större diagrammen för att kunna visa användaren mer information på ett ställe.
4.3.3 LoFi-prototyp
När gränssnittsskissningen och värderingen av skisserna var klara påbörjades en digital LoFi-prototyp. Vid skapandet av LoFi-prototypen låg de skisser som ansågs företräda flest brukskvaliteter till grund för arbetet. Prototypen skapades i prototypverktyget Figma och utformades för att ha en låg
detaljeringsgrad. Detta för att fokus låg på funktioner och navigation i prototypen. Layouten byggdes upp med hjälp av vanliga former (kvadrater, rektanglar cirklar) som fanns tillgängliga i
prototypverktyget. Genom att använda enklare former för att bygga upp gränssnittet, istället för att skapa en design med färg och illustrationer, sparades tid. Då målet var att efterlikna en analog pappersprototyp så mycket som möjligt beslutades det att den digitala LoFi-prototypen inte skulle innehålla några animationer eller övergångar trots att det var möjligt med hjälp av prototypverktyget. Då det inte är möjligt att skapa snygga övergångar eller visa animeringar på en pappersprototyp var det inte rimligt att använda dessa resurser på den digitala LoFi-prototypen.
De huvudfunktioner som valdes ut för denna prototyp var: widgets som innehöll olika typer av statistik och information, detaljerad kategorihantering, kombinera inkomster och utgifter, budgetering samt sparmål. Just dessa funktioner valdes främst på grund av att deltagarna från förstudien uttryckte en önskan om liknande funktioner (se 4.1.1 Intervjuer och Affinitetsdiagram) samt att dessa funktioner gav förutsättningarna för att brukskvaliteterna kunde uppnås och således minska personornas
frustrationsmoment.
Figur 9. Översiktsida LoFi. Figur 10. Händelsersida LoFi.
Det beslutades att skapa en navigationsbar i botten av gränssnittet så att användaren smidigt kan navigera mellan de fyra huvudsidorna med en hand. Tanken var alltså att ha navigationsbaren så pass tillgänglig för användaren så att hen inte skall behöva anstränga tummen. Navigationsbaren gjordes även lite större på höjden för att i det fortsatta arbetet ge plats för ikoner som skulle förtydliga sidnamnet ännu mer.
Översikt är den sida som användaren först får se när hen öppnar upp prototypen (se figur 9. Översikt). Översiktsidan designades för att ge användaren en enkel och snabb översikt över sin ekonomi vid första anblick utan att behöva klicka runt. Sidan består av olika widgets där användaren själv kan bestämma vilka widgets hen vill se samt hur de ska vara arrangerade, vilket i sin tur bidrog till att brukskvaliteten Anpassningsbar (se 4.2.2 Brukskvaliteter) kunde uppstå. Användaren kan alltså komma in i ett redigeringsläge av widgets genom att klicka på Redigera-knappen uppe i det vänstra
hörnet. Ovan på sidan finns också ett större diagram, som användaren även här kan redigera, för att visa ekonomisk data som kräver mer plats, exempelvis diagram med tidsaxlar.
Sidan Händelser visar användarens transaktioner från de konton hen hade lagt till (se figur 10.
Händelser). Här kan användaren se sina inkomster och utgifter samt hantera sina transaktioner genom att: ändra kategori, dela upp och kombinera. Att ändra kategori på en transaktion innebär att
användaren kan byta kategori på en betalning till en som anses mer passande enligt användaren. Därefter kommer applikationen (prototypen) att automatiskt sätta samma kategori för senare betalningar som kommer från samma företag. Detta för att spara tid för användaren så att hen inte behöver byta kategori varje gång en betalning sker. Tanken med denna funktion var att den skulle bidra till applikationens Anpassningsbarhet och Smidighet då den lät användaren välja egna
kategorier om det behövdes samt att kategorierna automatiserades till största del. Användaren behöver heller inte mata in alla händelser manuellt, utan tanken är att detta sker automatiskt, då användaren länkar sitt bankkonto till applikationen.
På sidan Händelser kan användaren också välja att gå vidare till undersidorna Konton och Kategorier. Konton visar upp vilka bankkonton som användaren anslutit till applikationen och här är det också möjligt att radera och lägga till nya bankkonton. Undersidan Kategorier visar upp en sammanställning av alla de kategorier som användaren skapat samt hur mycket pengar som lagts på varje kategori. För att ta del av dessa undersidor se Bilaga 4. LoFi-prototyp.
Figur 11. Budgetsida LoFi. Figur 12. Målsida LoFi.
Sidan budget innehåller de budgetar som användaren har skapat (se figur 11. Budget). Här kan alltså användaren sätta en pengagräns på en redan skapad kategori, som i sin tur fungerar som en budget. För att tydligt visa användaren hur mycket pengar som har lagts på en kategori användes staplar som fylldes i allt eftersom användaren lade mer pengar på kategorin. Genom att använda dessa staplar kan användaren få snabb visuell information om hur mycket pengar som har lagts ut av det totala
