Linköpings universitet SE–581 83 Linköping
Linköpings universitet | Institutionen för datavetenskap
Examensarbete på grundnivå, 18hp | Datateknik
2021 | LIU-IDA/LITH-EX-G--2021/001--SE
En studie i upplevd användbarhet
med avseende på navigerbarhet
hos en digital marknadsplats för
gårdsförsäljning
A study in perceived usability with regard to navigability in a
di-gital marketplace for farm sales
Frida Dolk
Sofie Drugge Eneroth
Patrik Habbe
Philip Löfgren
Axel Malmborg
Felix Nordgren
Eric Schadewitz
Handledare : János Dani Examinator : Aseel Berglund
Upphovsrätt
Detta dokument hålls tillgängligt på Internet - eller dess framtida ersättare - under 25 år från publice-ringsdatum under förutsättning att inga extraordinä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. Över-fö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 till-gängligheten finns 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 änd-ras eller presenteänd-ras 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 period of 25 years starting from the date of publication barring exceptional circumstances.
The online availability of the document implies permanent permission for anyone to read, to down-load, or to print out single copies for his/hers own use and to use it unchanged for non-commercial research and educational purpose. Subsequent transfers of copyright cannot revoke this permission. All other uses of the document are conditional upon 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/.
© Frida Dolk
Sofie Drugge Eneroth Patrik Habbe
Philip Löfgren Axel Malmborg Felix Nordgren Eric Schadewitz
Sammanfattning
Studier visar att intresset för att handla lokalt ökar, samtidigt som antalet köp av mat-produkter via e-handel växer. Syftet med denna studie var att lägga grunden för en digitalisering av gårdsförsäljning. För att uppnå detta undersöktes frågan ”Hur ska en di-gital marknadsplats för gårdsförsäljning utformas för att upplevas ha en god användbarhet med avseende på navigerbarhet?”. En webbapplikation med fokus på användbarhet och navigerbarhet utvecklades, där arbetet utfördes i två iterationer med användartester i slu-tet av iterationerna. Användartesterna utfördes med de beprövade metoderna Concurrent Think-Aloud Procedure, System Usability Scale och Retrospective Probing.
Studiens slutsats visar på att en användares tidigare erfarenheter och förväntningar på en webbapplikations design och funktionalitet har en stor påverkan på webbapplikatio-nens upplevda användbarhet och navigerbarhet. Relevanta och väldesignade filtrerings-och sorteringsalternativ har upplevts bidra till en ökad användbarhet. Även bekräftande animationer då användaren utför uppgifter har konstaterats öka användbarheten. Vidare visar studien att oväsentliga funktioner bör undvikas att implementeras, då de upplevts försämra webbapplikationens navigerbarhet.
Abstract
Studies show that the interest in purchasing locally produced products is increasing, at the same time as the amount of purchases of grocery prodcuts online is steadily growing. The purpose of this study was to lay the foundation for a digitalization of farm sales. In order to achieve this, the question ”How should a digital marketplace for farm sales be designed to be perceived as having good usability with regard to navigability?” was examined. A webapplication with focus on usability and navigability was developed, where the development took place over two iterations with user testing at the end of each iteration. The tests were constructed according to the methods Concurrent Think-Aloud Procedure, System Usability Scale and Retrospective Probing.
The study concludes that a users prior experiences and expectations on the design and fun-ctionality of a webapplication has a large impact on its perceived usability and navigability. Well designed and relevant filtering and sorting options has been perceived as benefitial for the usability of a webapplication. Confirmatory animations when the user performs tasks have been ascertained to increase usability. However, the study shows that unnessecary functions should be avoided, as they are detrimental to the perceived navigability of the webapplication.
Författarens tack
Vi vill tacka vår handledare János Dani som genom projektet stöttat oss och hjälpt oss att reda ut diverse frågetecken som kommit upp under processens gång. Vi vill även tacka vår kursledare Aseel Berglund för både stöd och feedback av idéer under arbetets tidiga stadie. Dessutom vill vi rikta ett stort tack till de som opponerat på arbetet och även till våra testper-soner som bidragit med sina insikter och åsikter. Tack så mycket!
Innehåll
Sammanfattning iii Författarens tack iv Innehåll v Figurer viii 1 Inledning 1 1.1 Syfte . . . 2 1.2 Frågeställning . . . 2 1.3 Avgränsningar . . . 2 2 Teori 3 2.1 Användbarhet . . . 3 2.1.1 Betydelsen av användbarhet . . . 3 2.2 Navigerbarhet . . . 3 2.2.1 Betydelsen av navigerbarhet . . . 42.3 Användbarhet och navigerbarhet . . . 4
2.4 Navigationsstruktur . . . 4
2.5 Utveckling av en webbapplikation för en ökad navigerbarhet . . . 6
2.5.1 Sidlayout . . . 6
2.5.2 Three-Click rule . . . 7
2.5.3 Filtrering och sortering . . . 7
2.5.4 Sökfunktion . . . 7
2.5.5 Länkar och menyer . . . 8
2.5.6 Breadcrumbs . . . 8
2.5.7 Specifikt för e-handel . . . 9
2.5.8 Köpprocessen i e-handelsappliktioner . . . 9
2.6 Metodteori . . . 9
2.6.1 Concurrent Think-Aloud Procedure . . . 9
2.6.2 Likertskala . . . 10 2.6.3 SUS . . . 10 2.6.4 Retrospective probing . . . 10 2.6.5 Iterativ utveckling . . . 11 2.6.6 Antal testpersoner . . . 11 3 Metod 12 3.1 Förstudie . . . 12 3.1.1 Marknadsundersökning . . . 12 3.1.2 Marknadsföringsplan . . . 13
3.2 Teknisk utveckling av webbapplikationen . . . 13
3.3.1 Allmän beskrivning . . . 14 3.3.2 Användartest 1 . . . 14 3.3.3 Användartest 2 . . . 15 4 Resultat 16 4.1 Förstudie . . . 16 4.1.1 Marknadsföringsplan . . . 16 4.1.2 Marknadsundersökning . . . 16 4.1.3 Prototyp . . . 17 4.2 Iteration 1 . . . 18
4.2.1 Teknisk utveckling av webbapplikationen . . . 18
4.2.2 Användartest 1 . . . 23
4.2.3 Förbättringsåtgärder . . . 27
4.3 Iteration 2 . . . 28
4.3.1 Teknisk utveckling av webbapplikationen . . . 28
4.3.2 Användartest 2 . . . 32
4.3.3 Förslag till förändringsåtgärder . . . 37
5 Diskussion 38 5.1 Resultat . . . 38 5.1.1 Navigationsstruktur . . . 38 5.1.2 Startsida . . . 39 5.1.3 Produktvy . . . 40 5.1.4 Sökfunktion . . . 41
5.1.5 Filtrering och sortering . . . 41
5.1.6 Betalning . . . 42
5.1.7 Varukorg och leverans . . . 42
5.1.8 Navigationsmeny och sidfot . . . 42
5.1.9 Min sida . . . 43 5.1.10 Breadcrumbs . . . 43 5.1.11 Användartester . . . 44 5.2 Metod . . . 45 5.2.1 Användartester . . . 45 5.2.2 Iterativ utveckling . . . 48 5.2.3 Källkritik . . . 49
5.3 Arbetet i ett vidare sammanhang . . . 49
5.3.1 Teknisk påverkan . . . 49
5.3.2 Påverkan på individen och samhället . . . 50
5.3.3 Ekonomisk påverkan . . . 50
6 Slutsats 51 6.1 Förslag för framtida studier . . . 52
Litteratur 53 A Marknadsföringsplan 57 B Marknadsundersökning 81 C Användartest 1 91 D Användartest 2 94 E SUS-test - Formulär 97
F Retrospective Probing - Formulär 101
G Resultat från användartest 1 105
Figurer
2.1 Hierarkisk struktur . . . 5
2.2 Linjär struktur med flervägsalternativ . . . 5
2.3 Nätverksstruktur . . . 5
4.1 Den framtagna prototypen för Matladan . . . 17
4.2 Startsida . . . 19
4.3 Produktvy . . . 19
4.4 Siffra som visar antalet varor i varukorgen . . . 20
4.5 Produktvy med filter . . . 20
4.6 Varukorg . . . 21
4.7 Betalningssida . . . 21
4.8 Sidfot . . . 22
4.9 Frågor och svar . . . 22
4.10 Sökvy . . . 23
4.11 Resultat av SUS-test för iteration 1 . . . 24
4.12 På en skala ett till fem: hur enkelt upplevde du att det var att navigera på sidan? . 26 4.13 På en skala ett till fem: vad är din inställning till e-handel? . . . 27
4.14 Knappar för att lägga till och ta bort antal av en produkt . . . 28
4.15 Priset vid varukorgen uppe till höger före, under och efter en vara har lagts till. . . 29
4.16 Uppdateringar i vyn för varukorgen efter iteration 2 . . . 29
4.17 Markeringar i menyn var användaren befinner sig samt sökfuktionen utan den extra sökknappen . . . 30
4.18 ’Du sökte på:’ samt breadcrumbs uppe till vänster . . . 31
4.19 Sidfot med kundinformation . . . 31
4.20 Vyn för kvitto som visas efter ett köp har genomförts . . . 32
4.21 Resultat av SUS-test för iteration 2 . . . 34
4.22 På en skala ett till fem: hur enkelt upplevde du att det var att navigera på sidan? . 36 4.23 På en skala ett till fem: vad är din inställning till e-handel? . . . 36
Tekniska definitioner
Single Page Application (SPA): En webbsida där enbart delar av sidans innehåll laddas om då användaren byter vy. Detta sker istället för standardmetoden där en webbläsare laddar om hela nya sidor, vilket tar längre tid än inladdning av enbart delar av sidan.
AJAX-anrop: AJAX är ett samlingsnamn för de tekniker som används på många webbsidor för att hämta och skicka data asynkront. Detta kan användas effektivt på Single Page Appli-cations då det möjligör hämtning av data utan att ladda om hela sidan.
Agila arbetsmetoder: En arbetsflödesmetodik där målet med arbetet definieras under pro-jektets gång. Ofta delas arbetet upp i mindre delar, iterationer, som planeras i detalj en åt gången.
Responsiv webbsida: En webbdesign som tillåter layouten att ändras beroende på vilken storlek på skärmen som användaren har.
Dropdown: En rullgardinsmeny som visar en lista på olika alternativ när den är aktiv, men bara ett alternativ när den är inaktiv.
Produktbacklogg: En lista på alla enklare aktiviteter som ska genomföras i ett projekt. Denna lista är dynamisk och kan förändras under arbetets gång.
Microsoft Teams: En tjänst framtagen av Microsoft för samtal och videochatt med andra per-soner via en dator. Tjänsten kan även användas för att dela filer eller chatta med användare i samma team. Deltagare i ett samtal kan välja att dela ljud, dela webbkamera-video eller dela sin skärm med hjälp av fjärrstyrning.
Teamviewer: En programvara som används för fjärråtkomst och fjärrkontroll av datorer och andra enheter. Med hjälp av Teamviewer tillåts en part styra en annan parts dator, till exempel använda webbläsaren eller andra program.
Zoom: En tjänst från Zoom Video Communications för samtal och videochatt med andra personer via datorn. Deltagare i ett samtal kan välja att dela ljud, dela webbkamera-video eller dela sin skärm.
1
Inledning
I och med att människor i Europa lägger allt större fokus på hållbarhet har efterfrågan på att handla mer närproducerad mat ökat [25]. En undersökning av Leiper [22] från 2017 gjor-des på lantbrukare och konsumenter gällande marknadsplatser för lantbruksförsäljning. De undersökta kunderna anger att de viktigaste anledningarna till att de vill handla på denna typ av marknadsplats är för att ge stöd åt lokala lantbrukare och den lokala ekonomin. Rap-porten menar vidare att anledningen till att många av de undersökta kunderna ändå väljer bort alternativet beror på att de vill ha ett bredare och mer konsekvent utbud samt bättre öppettider. Orsaken till att många lantbrukare väljer bort att delta på denna typ av marknad beror till stor grad på att de inte har tid att engagera sig tillräckligt. Sammanfattningsvis anser både säljare och konsumenter att tidsåtgången är för stor för att delta på dessa typer av marknadsplatser regelbundet. Enligt en rapport gjord av studenter från University of California Agriculture and Natural Resources [36] påverkas kunders vilja att handla lokalt av tidskonsumtion och bekvämlighet, där viljan ökar vid en minskad tidskonsumption eller en ökad bekvämlighet. Trots den ökade trenden inom samhället att handla mer lokalt, anser många konsumenter att processen är för komplicerad och tidskrävande för att kunna göra det regelbundet.
Samtidigt som intresset för att handla lokalt ökar, växer även antalet köp av matproduk-ter via webbhandel exponentiellt [16]. Med avseende på de trender och behov som finns i samhället utformades affärsidén, att bygga en webbapplikation för försäljning av råvaror direkt från lantbrukare. Tjänsten, Matladan, ska förenkla handel av lokala råvaror och främja den hållbarhetstrend som råder i samhället genom att erbjuda en tjänst som ökar kunder-nas möjlighet att handla lokalt. Matladan syftar alltså till att bidra till att minska andelen importerade matvaror vilket i sin tur minimerar klimatavtrycket på den svenska mathandeln. I en förstudie gjord inför projektet skickades en enkät ut för att undersöka intresset av en webbapplikation för försäljning av lokala råvaror. I enkäten svarade 92,6% att de hade varit intresserade av en sådan webbapplikation. Vidare fick de tillfrågade svara på en skala 1-5 hur mycket tjänsten hade ökat deras vilja att handla lokala råvaror och svaret resulterade i ett genomsnitt på 3,69. Detta tyder på ett stort intresse för webbapplikationen.
1.1. Syfte
Matladan erbjuder en plattform där lantbrukare kan lägga upp de råvaror de vill sälja och där köparen upplever att de på ett användbart sätt kan köpa de råvaror de vill. Som tidi-gare nämnt påverkas kunders vilja att handla lokalt av bekvämlighet, och med det i åtanke kommer användbarhet och navigerbarhet att ligga i fokus vid implementation av tjänsten då det är viktigt att tjänsten är lättnavigerad för att öka bekvämligheten för kunden. Detta ökar chansen för att fler kunder kommer att använda sig av tjänsten.
Visionen för Matladan är att ändra sättet människor handlar mat i framtiden, främja miljön och stödja den lokala lanthandeln.
1.1
Syfte
Syftet med arbetet är att lägga grund för en digitalisering av gårdsförsäljning och på så sätt främja det växande hållbarhetsinstresset, ta tillvara på det ökade intresset för lokalt odlad mat samt stötta de lokala lantbrukare.
Detta görs genom att utforma en webbapplikation för lantbrukare och konsumenter där säl-jaren kan lägga ut olika råvaror till försäljning på en öppen marknadsplats. På denna digitala marknad kan sedan köparna på ett snabbt och säkert sätt köpa de råvaror som finns tillgäng-liga för försäljning. För att få en snabb process för köparen krävs det att webbapplikationen har en god användbarhet med avseende på navigerbarhet.
1.2
Frågeställning
Hur ska en digital marknadsplats för gårdsförsäljning utformas för att upplevas ha en god användbarhet med avseende på navigerbarhet?
1.3
Avgränsningar
Avgränsningarna som har gjorts i rapporten innefattar en begränsning till lantbrukare och konsumenter från Sverige. Dessutom kommer inte webbapplikationen att vara tillgänglig för allmänheten under projektets gång, förutom för utvecklarna och för ett antal utvalda testper-soner. Därtill begränsas mätningar av upplevd användbarhet med avseende på navigerbarhet enbart utifrån köparens perspektiv och inte utifrån säljarens perspektiv. Dessa avgränsning-ar är gjorda för att tydligt kunna analysera syftet och rapportens frågeställning utifrån ett perspektiv, alltså konsumentens, då frågeställningen blir mer specifik, och analysen mindre komplex.
2
Teori
I detta kapitel behandlas den relevanta teori som utgjort grunden till den webbapplikation som har utvecklats. Först introduceras och definieras begreppen användbarhet och naviger-barhet. Sedan förklaras sambandet mellan dessa. Slutligen presenteras den teori som legat till grund för metoden, vilket först berör navigationstruktur och sedan hur en webbapplikation bör utformas för en ökad navigerbarhet.
2.1
Användbarhet
Enligt Internationella standardiseringsorganisationen [34] kan användbarhet definieras som vilken grad en produkt kan användas av en specifik användare i en förbestämd situation, för att kunna åstadkomma specificerade syften på ett funktionellt och resultatrikt sätt som tillfredsställer användaren.
2.1.1
Betydelsen av användbarhet
Användarens upplevelse av en webbapplikations användbarhet har en stor betydelse för om användaren väljer att återvända eller inte, vilket är något som visas i en studie av Venkatesh och Agarwal [38]. Denna studie lät 757 kunder besöka och bedöma användbarheten i ett fler-tal olika webbapplikationer i skilda branscher, för att efter ett halvår utvärdera om kunderna hade valt att självmant återvända till webbapplikationen för att handla. Resultatet av studien var att det kunde noteras en påvisad korrelation mellan den upplevda användbarheten och kundens vilja att återvända till webbapplikationen för att handla. Mer upplevt användbara webbapplikationer gör kundens köpbeetende mer aktivt, enligt författarna.
2.2
Navigerbarhet
Navigerbarhet kan definieras som hur lätt det är för en användare av en webbapplikation att hitta specifik information genom att läsa på en specifik sida samt röra sig runt i webbappli-kationen [42]. Det finns även studier som definierar navigerbarhet som det stöd användaren får av webbapplikationen för att kunna genomföra specifika uppgifter [20]. Dessa två defini-tioner ger tillsammans att navigerbarhet både innefattar strukturen och stödet från webbap-plikationen samt användarens prestation då denne rör sig på webbapwebbap-plikationen.
Naviger-2.3. Användbarhet och navigerbarhet
barhet påverkas alltså av utformningen av gränssnittet mellan användaren och allt innehåll på webbapplikationen.
2.2.1
Betydelsen av navigerbarhet
I rapporten Determinants of Successful Website Design: Relative Importance and Recom-mendations for Effectiveness [13] har Gehrke och Efriam kategoriserat faktorer som de menar avgör om en webbapplikation är framgångsrik eller inte. Av dessa kategorier är navigation ef-ficiency, navigationseffektivitet, en av de viktigaste. Om navigationen inte är användarvänlig och effektiv kan det leda till att kunden lämnar webbapplikationen och inte återkommer. Hasan [14] menar att en webbapplikations navigerbarhet har större påverkan på en kunds upplevelse än den visuella eller informativa designen. Hasan menar vidare att en webbap-plikation med bristande navigerbarhet kan göra användaren irriterad. Om en kund stöter på ett problem som skapar en sådan irritation är det sannolikt att kunden inte fullföljer köpet. En sådan upplevelse kan minska användarens förtroende för webbapplikationen i framtiden och sänka dess tillförlitlighet, välvilja och integritet i användarens ögon. Användare föredrar webbapplikationer med en navigationsdesign som är mer direkt och trivial [14]. En enkla-re navigationsdesign kommer att spara kunden tid och klick, vilket enligt Hasan minskar sannolikheten att de känner sig vilsna och lämnar webbapplikationen.
2.3
Användbarhet och navigerbarhet
I en studie av Palmer [26] undersöks och definieras ett antal huvudaspekter som påverkar en webbapplikations användbarhet. Dessa aspekter är navigerbarhet, sidinnehåll, interakti-vitet, begränsad fördröjning och en responsiv webbdesign. I Palmers studie testades ett antal webbapplikationer baserat på ovanstående faktorer i tre separata, mindre delstudier. En av de specifika hypoteserna som testades var att "webbapplikationer med bättre navigerbarhet ger en högre uppfattad framgång hos användaren". I det resultat som presenteras framgår att studi-en pekar på att navigerbarhet i hög grad avgör användbarhetstudi-en. Detta resultat stärktes av samtliga tre studier. Detta menar Palmer beror på att en god navigerbarhet gör det lättare för användaren att finna det som söks på webbapplikationen. Således finns en stark koppling mellan navigerbarhet och användbarhet där navigerbarhet utgör den starkaste komponenten som avgör en webbapplikations användbarhet.
2.4
Navigationsstruktur
Med hjälp av hyperlänkar och menyer bildas en webbapplikationens struktur. Att utforma en webbapplikations struktur logiskt är användbart för att förbättra dess navigerbarhet [8]. I regel gäller att ju mer komplex en webbapplikations struktur är, desto mindre navigerbar upplevs den [42]. Dessutom finns det belägg för hur mätningen av en webbapplikationens struktur indirekt mäter navigerbarhet på samma webbapplikation [42]. Länkarna på en webbapplikation agerar som bågar mellan de olika undersidorna på en webbapplikation, där undersidorna i sin tur representeras som noder. Det finns olika typer av strukturer som kan appliceras på en webbapplikations design, bland annat hierarkiska, linjära och nätverks-strukturer [12].
Den hierarkiska strukturen (se figur 2.1) är den mest naturliga att utgå ifrån då den på ett enkelt sätt kategoriserar information och har en tydlig uppbyggnad mellan olika nivåer [12]. En hierarkisk struktur kan byggas upp med både djup och bredd, där en djup struktur har fler nivåer med färre länkar, medan en bred struktur är grundare men delsidorna har fler bågar.
2.4. Navigationsstruktur
Figur 2.1: Hierarkisk struktur
En linjär struktur (se figur 2.2) har samma start och slut, men olika vägar dit [12]. Linjära strukturer lämpar sig för webbapplikationer med en bestämd sekvens av noder.
Figur 2.2: Linjär struktur med flervägsalternativ
Logiska strukturer i form av nätverk (se figur 2.3) är strukturerade utan någon hänsyn till varken djup eller bredd [12]. Sociala medier är ofta byggda efter nätverksstrukturer, där noder representeras av användarnas profiler.
2.5. Utveckling av en webbapplikation för en ökad navigerbarhet
Att användaren vet var den befinner sig i strukturen är av största vikt för en webbapplika-tions navigerbarhet. Enligt Wojdynski och Kalyanaraman [39] bör det möjliggöras för använ-daren att veta var på webbapplikationen denne befinner sig och hur denne kan orientera sig fram på webbapplikationen. Genom att ange relationen mellan olika delar av en webbappli-kation, blir det enklare för en användare att förstå hur denne nått sin nuvarande position och vilka delar av webbapplikationen som är tillgängliga från den positionen. I sin artikel [39] kallar Wojdynski och Kalyanaramans detta för Logic of structure och påvisar att det har stor påverkan på användarens upplevelse av navigerbarhet och hur trovärdigt webbapplikatio-nens innehåll är.
2.5
Utveckling av en webbapplikation för en ökad navigerbarhet
En välstrukturerad webbapplikation bör utvecklas så att skillnaden mellan användarens krav och förväntningar gentemot webbapplikationens faktiska struktur överensstämmer [32]. Det ska även vara lätt att navigera på webbapplikationen och risken för att tappa bort sig ska vara minimal. Vidare gäller också att om användaren tappar bort sig på webbapplika-tionen ska det finnas möjligheter att gå tillbaka ett steg till var användaren tidigare befann sig. För en god navigation krävs det att webbapplikationen utvecklas med en klar struktur och olika gränssnitt som hjälper användaren att hitta det den söker [39]. Detta innebär bland annat att användaren ska kunna få tydlig information om vilka sidor som kan nås från en viss punkt. Det ska också vara enkelt för användaren att förstå hur dessa sidor är samman-kopplade. Ett exempel på detta är att tydligt ange om en sida är en underkategori till en annan.
För en effektiv navigering på webbapplikationer krävs det enligt Gehrke och Turban [13] att länkar namnges noggrant, att länkarna ej är trasiga och att namnsättning på dessa svarar på två frågor:
• Var kommer jag om jag klickar här? • Får jag ut något av att klicka här?
2.5.1
Sidlayout
Enligt U.S. Department of Health and Human Services (HHS) bör webbapplikationer i största mån vara utformade på ett sådant sätt att informationen är enkel för användaren att tolka [15]. Detta uppnås till stor del med en genomarbetad sidlayout. HHS förklarar också att viktig information ska placeras längst upp på webbapplikationen, för att underlätta informationssökning för användaren. Enligt HHS bör det dessutom vara tydligt uppdelat vad som är kategorier, rubriker och underavsnitt. Detta medför att användaren kan sortera informationen och dra slutsatser om vilken information som är viktigast.
I de fall där den information som användaren är ute efter inte får plats på en sida, går det enligt HHS att välja mellan att länka till nya sidor eller göra sidan scrollbar [15]. Vidare förklarar de att om sidan istället går snabbt att ladda bör länkar användas för att dela upp informationen i bitar till förmån för en lång scrollbar. HHS skriver också att det gäller att element på webbapplikationen bör anpassas efter storleken på webbläsarfönstret. Detta för att undvika horisontell scrollning eller att information blir förvrängd. Dessutom bör desig-nen undvika att dela in text i flera parallella kolumner, eftersom det avsevärt saktar ned användarens läshastighet. Att tilläggas till ovan är också, enligt Kalbach och Bosenick, att placeringen av navigationselement till höger eller vänster inte är avgörande för hur snabbt en användare hittar den information som eftersökes [21]. På grund av webbläsarens na-vigationsknappar, som ligger i övre vänstra hörnet på webbläsaren, menar författarna att
2.5. Utveckling av en webbapplikation för en ökad navigerbarhet
placering av navigationselement föredras till vänster. Prototypikalitet och webbdesign
Enligt Tuch et al. [37] är prototypikalitet inom psykologin "hur väl ett objekt är representativt för en klass av objekt". Författarna menar att prototypikalitet är uppbyggt av egna erfaren-heter, mentala bilder och modeller. I en studie utförd av Roth et al. [31] menar författarna att internetanvändare har, efter att ha använt internet i många år, byggt upp en mental modell för hur de uppfattar att en webbapplikation av en viss kategori skall se ut. I studien illustre-ras hur användare förväntar sig att vissa typiska objekt på webbapplikationer skall placeillustre-ras, beroende på vilken typ av webbapplikation det är. Frångås denna mentala modell uppfattas det som presenteras som mindre estetiskt [37].
För en e-handelssida förväntas navigationslänkar, information om företaget och externa län-kar ligga till vänster [31]. Vidare bör logotypen och namnet på företaget vara centrerat eller till vänster högst upp på sidan, med en funktion att återvända till startsidan på i princip samma plats. Samt en sökfunktion strax under eller till höger om logotypen. I det övre hög-ra hörnet bör kundvagnen och knappar för att logga in återfinnas [31]. Längst ned på sidan förväntar sig användaren finna information om användarvillkor, sekretessmeddelande och någon funktion för att återvända till toppen av sidan [31].
2.5.2
Three-Click rule
Porter och Miller förklarar att då en användare tar sig runt på en webbapplikation, så behöver denne oftast klicka med musen för att ta sig till nya platser och finna ny information [27]. De menar att ett inofficiellt riktmärke för hur många musklick som krävs för att användaren ska tillgodose sig all viktig information är ”Three-Click Rule”. Zeldman [41] beskriver att regeln innebär att en webbutvecklare ska utforma sin webbapplikation så att användaren kan ta sig till sitt mål från startsidan med tre musklick. Porter och Miller skriver också att det som gör att ”Three-Click Rule” är viktig att ta hänsyn till, är att om informationen är otillgänglig finns en stor risk att användaren söker sig vidare till en annan webbapplikation i stället [27]. Författarna tar även upp att det finns invändningar mot teorin som säger att det inte finns någon korrelation mellan antal klick och benägenhet att ge upp sökandet. Det kan bro på att det finns aspekter som väger tyngre än antal klick, exempelvis hur informationsflödet ser ut samt antydningar i information som talar om att man närmar sig sitt mål.
2.5.3
Filtrering och sortering
Studier inom kognitiv psykologi hävdar att människors uppmärksamhet är en begränsad re-surs och att det därav finns en risk att de tröttnar av att leta på en för lång lista av produkter [17]. Detta kan undvikas genom att använda sig av filtrering. Filtreringen bör presenteras så att användaren på ett effektivt sätt kan filtrera sig utifrån de parametrar som den önskar [28]. Exempel på filtrering i arbetets kontext är köttprodukter, vegetariska produkter, laktos-fria produkter etc. Detta innebär till exempel att kunden kan välja att enbart se vegetariska produkter. Listor bör även vara sorterbara. Parametrar att sorteras efter bör väljas genom att utvecklaren tar reda på vilka prioriteringar av egenskaper som gäller för de element som finns på webbapplikation. Detta ska kunden ha möjlighet att sortera efter för att ge en positiv påverkan på användarens uppfattning av webbapplikationen [19]. Exempel på sorteringsal-ternativ är efter pris, popularitet etc.
2.5.4
Sökfunktion
En sökfunktion är ett viktigt element på en webbapplikation för att förbättra webbapplika-tionens navigerbarhet [40] och bör finnas på nästintill alla typer av webbapplikationer [12].
2.5. Utveckling av en webbapplikation för en ökad navigerbarhet
Sökfunktionen är oftast det första verktyget en besökare använder på webbapplikation [10]. Användarna har ofta en förväntan på att sökfunktionen ska fullgöra samma verkningsgrad som en kommersiell sökmotor, vilket ofta inte uppfylls [40]. En sökfunktion bör fungera med både ord och meningar, samt kunna hantera stavfel. Att optimera sökfunktionen efter de nyckelfraser som förväntas bli sökta på är också av betydelse för en webbapplikations navi-gerbarhet [12]. För en digital marknadsplats kan exempelvis dessa nyckelfraser vara de mest populära varorna. Det bör också vara möjligt att kunna göra en sökning på hela webbappli-kationen eller endast enskilda delar av den [12]. Dessutom är det lämpligt att i första hand kunna sortera resultaten efter en sökning med avseende på relevans. I andra hand bör sor-tering på övriga parametrar som kan vara relevanta för webbapplikationen, exempelvis pris för en e-butik finnas [40]. Om användaren dessutom kan sortera resultaten efter egen önskan är det också av positiv betydelse för webbsapplikationens navigerbarhet.
2.5.5
Länkar och menyer
För användaren är länkar och menyer viktiga verktyg för att kunna navigera på en webbap-plikation, eftersom de sammankopplar webbapplikationens olika undersidor samt skapar genvägar för information [12]. Författarna skriver också att en av de främsta egenskaper-na för en egenskaper-navigerbar länk är att den bör vara konstruerad så att den tydligt visar var den kommer ta användaren någonstans vid interaktion. För att underlätta navigeringen för an-vändaren krävs även fler egenskaper av en länk. Författarna menar att en av de viktigaste egenskaperna är att länken är tydligt markerad, för att användaren enklare ska uppfatta möjligheten att ta sig vidare mot sitt mål. Wojdynski och Kalyanaraman [39] betonar vikten av att tydligt visa hur målet relaterar till den information användaren i stunden har framför sig.
Om länkarna på en webbapplikation är svårfunna kan det ge en känsla för användaren att en återvändsgränd på webbapplikationen är nådd. För att motverka uppfattningen av en återvändsgränd bör länkar vara formaterade så att tydligheten bevaras, exempelvis med en blå färg eller med en beskrivande text [12]. Enligt Wojdynski och Kalyanaraman [39] finns ingen stark korrelation mellan länkstrukturen och om webbapplikationen upplevs som navigerbar. Dock bidrar god länkstruktur på en webbapplikation till att användare behöver mindre tid för att ta sig till rätt plats. Användaren kan då enklare bilda sig en uppfattning om den underliggande informationen, redan innan interaktionen med länken har skett [39]. Antal menyval och omfånget av dessa kan hjälpa användaren att navigera effektivt på web-bapplikationen. Utseendet av menyer på en webbapplikation har också betydelse för na-vigerbarhet. Faktorer som färg, typsnitt och position på menyer kan avgöra navigerbarhet [23]. Dessutom är menyers utformning av betydelse. En sekventiell meny med alternativ kan minska navigerbarhet jämfört med en expanderbar meny [24]. Användare har ofta en mental bild av hur en webbapplikation är uppbyggd. Om denna modell överensstämmer med den faktiska webbapplikationen påverkar det hur användaren interagerar med innehållet. Dess-utom påverkar det hur lätt användaren anser att det är att hitta rätt information, bland annat i menyer [39].
2.5.6
Breadcrumbs
Enligt Blustein et al. [4] är Breadcrumbs en text som visar var i webbapplikationens hierarki användaren befinner sig. Detta innebär att användaren kan se vilka underkategorier som användaren valt för att komma till den plats användaren just nu befinner sig. Detta hjälper användaren att uppfatta var i hierarkin denne befinner sig och gör att användaren snabbt kan gå upp i hierarkin genom att trycka på kategorier högre upp i hierarkin. Det hjälper även användaren att förstå vilka val den kan ta från den aktuella positionen. Breadcrumbs ökar
2.6. Metodteori
framförallt en webbapplikations navigerbarhet då den innehåller många olika hierarkinivåer [4].
2.5.7
Specifikt för e-handel
Enligt U.S. Department of Health and Human Services (HHS) [15] är ett av konsumenters huvudsyften med att handla produkter på nätet att enkelt kunna jämföra olika varor och dess egenskaper med varandra. Detta innebär att en e-handels design behöver anpassas efter detta syfte. HHS skriver också att för att konsumenten ska kunna navigera enkelt på sidan krävs det att all information om produkterna på sidan anges i deras mest lämpliga form. Detta innebär att konsumenten inte ska behöva översätta ord eller konvertera valutor när denne använder e-handelssidan. Vidare betonar HHS att allt innehåll ska presenteras på sin enklaste form för konsumenten.
2.5.8
Köpprocessen i e-handelsappliktioner
Det är viktigt att en e-handelsapplikation specifikt arbetar med att göra köpprocessen intuitiv och enkel, enligt Song och Zahedi [33]. De menar att om köpprocessen upplevs som svår-navigerad, kommer konsumenterna inte vilja handla från e-handelsapplikationen i lika hög grad. Detta beror på att när en konsument handlar digitalt försvinner möjligheten att fysiskt interagera med produkten i butik. Likaså försvinner möjligheten för säljaren att påverka hur konsumenten blir bemött i butiken. Detta gör att höga krav ställs på webbapplikationens design och funktionalitet. Utformningen av e-handelsapplikationen behöver skapa en känsla av kontroll och säkerhet hos användaren för att kunna konkurrera med handel i fysisk butik. Ranganathan och Ganapathy [29] presenterar ett sätt att ge konsumenten en ökad känsla av kontroll, vilket är att ha en FAQ på applikationen. FAQ står för Frequently Asked Questions och är en samlingssida med sammanställda vanliga frågor och svar på dessa. De menar att detta ger användaren en möjlighet att utöka sin kunskap om köpprocessen och inger således en ökad känsla av trygghet och kontroll. I en FAQ ges ofta svar på frågor om betalning, retur och leverans.
2.6
Metodteori
I följande avsnitt behandlas den teori som ligger till grund för utförandet av metoden. De metoder som tas upp nedan är: Concurrent Think-Aloud Procedure, SUS, Retrospective pro-bing och Iterativ utveckling. Slutligen diskuteras antal testpersoner som är lämpligt för att kunna besvara frågeställningen.
2.6.1
Concurrent Think-Aloud Procedure
En metod som kan användas för en kvalitativ studie av användarupplevelsen är enligt Birn et al. [3] Concurrent Think-Aloud Procedure (CTAP). Att genomföra en studie med CTAP in-nebär att testpersonen ska dela sina tankar högt och ofiltrerat under tiden som testpersonen använder ett system och interagerar med gränssnittet. Under tiden som testpersonen tänker högt och testet pågår så skriver testledaren ned alla ofiltrerade tankar som sägs. Fördelarna som Birns et al. [3] lyfter med denna metod är att den är billig, enkel och anpassningsbar. Nackdelarna presenteras vidare som att metoden inte är helt naturlig och därför kan göra att testpersonerna presterar långsammare då de pratar samtidigt och får svårare att fokusera på uppgiften. Detta innebär att CTAP inte bör användas med någon typ av utvärdering av pre-stationstiden. Ericsson och Simon [11] menar att ett sätt att minska risken för att testpersonen störs av att behöva prata högt är att låta denne öva på en annan uppgift innan den faktiska
2.6. Metodteori
uppgiften ges. Det ger testpersonen ökad möjlighet att vänja sig vid metodiken. Vidare skri-ver Ericsson och Simon även att testpersonen ska genomföra testet ostört, med undantag för om tystnad uppstår. Då kan testledaren be testpersonen att fortsätta prata. Boren och Ramey [5] menar i kontrast till detta att det är möjligt för testledaren att interagera mer med testper-sonen under testet och fortfarande få ett trovärdigt resultat. De skriver att förberedda frågor eller en strikt dialog med testpersonen kan möjliggöra för testledaren att öka sannolikheten att få svar på de relevanta frågorna för frågeställningen.
2.6.2
Likertskala
Enligt Cooper och Johnson är en likertskala ett sätt att bygga upp en formulärsfråga för att systematiskt samla in åsikter [9]. Respondenten svarar på ett påstående med hjälp av en nu-merisk skala. Denna skala är vanligtvis numrerad från 1 till 5 men andra numreringar före-kommer också. Författarna menar att likertskalan är ett bra verktyg ur de aspekter att den är enkel att använda och kan ge en tydlig indikation gällande resultatet. Dessutom menar de att likertskalan är lätt att applicera på olika typer av undersökningar. Vidare skriver Cooper och Johnson att en negativ aspekt med metoden är hur resultatet ska tolkas i de fall då respon-denten svarar neutralt. De belyser därmed vikten av att formulera frågorna till likertskalan på ett tydligt och genomtänkt sätt för att kunna göra korrekta tolkningar av resultatet.
2.6.3
SUS
SUS, eller System Usability Scale, är ett frågeformulär skapat år 1986 av John Brooke på Digital Equipment Co. Ltd, för att undersöka om användare uppfattar ett system som an-vändbart [7]. SUS är uppbyggt likt en likertskala, ett frågeformulär där respondenten får ange hur mycket denne håller med om ett påstående [6]. Svarsskalan sträcker sig från 1 till 5, ”håller inte alls med” till ”håller fullständigt med”.
Enligt John Brooke [7] finns det olika teorier om hur frågorna skall läggas upp för att formuläret skall få så rättvisa svar som möjligt. Den traditionella modellen består av tio påståenden, där positiva och negativa påståenden uppträder i alternerande följd [6]. Vidare skriver Brooke att frågorna alterneras för att förbygga något som kallas ”responsive bias”, där respondenten ger svar baserat på andra faktorer än vad som är relevant för påståendet. Påståendena är dessutom utvalda så att de är ”extrema” i sin natur, vilket innebär att frågan är formulerad på ett sådant sätt att det framkallar en slags konsensus i hur respondenterna förhåller sig till påståendet.
När respondenten besvarat formuläret, sammanställs det och konverteras till en SUS-skala, som varierar mellan 0 och 100 [6]. Sedan beräknas SUS-skalan och sammanställs genom att värdet på vardera udda numrerad fråga (1, 3, 5, 7, 9) subtraheras med 1. Värdet för de jämnt numrerade frågorna (2, 4, 6, 8, 10) subtraheras var och en från 5. Därefter summeras dessa värden och multipliceras med 2,5. Generellt sett indikerar ett resultat på ungefär 73 och över en användbar webbapplikation, och ett värde mellan 0 och 60 som ett icke-godkänt resultat, eller som icke användbar [7].
2.6.4
Retrospective probing
En metod för att samla in data för analys vid en studie är Retrospektiv Probing. Birns et al. [3] beskriver att metoden främst används för att undersöka användbarhet hos ett system, men kan även anpassas för att specificera vissa områden av användbarhet. Vidare förklaras att metoden innebär att användaren först får utföra ett antal uppgifter i systemets gränssnitt, för att sedan besvara frågor om systemet. Svaren på dessa frågor kan sedan användas för att analysera hur användarens upplevelse i systemet var. Författarna förklarar att frågorna
2.6. Metodteori
antingen kan vara öppna eller slutna och fyller olika syften. Öppna frågor ger användaren en större frihet i att uttrycka sina åsikter, medan de slutna frågorna kan ge enklare och entydigare resultat. De slutna frågorna ställs på ett sådant vis att de antingen kan besvaras med ja eller nej, eller en siffra på en skala. De öppna frågorna besvaras med fri text.
Birns et al. [3] lyfter även att metodens svaghet ligger i att användaren inte alltid minns sina egna tankar, vilket kan ge inkorrekta svar från användaren. Det finns också en risk att an-vändaren reflekterar vidare över sin upplevelse efteråt och därför anger andra svar efteråt än vad som upplevdes under själva testet.
2.6.5
Iterativ utveckling
När en utvecklare ställs inför ett problem att lösa menar Adams et al. [1] att det ofta finns mer än ett tillvägagångssätt att angripa problemet på. Vidare förklarar författarna att iterativ utveckling eller iterativ design är en utvecklingsteknik som används för att kontinuerligt förbättra en design eller produkt. Den iterativa utvecklingen är cyklisk och ingår ofta i agila utvecklingsmetodiker. Input från användare möjliggör en stegvis förbättring av en prototyp under varje cykel [1]. Därmed kan iterationer ses som en process där en dåligt eller sämre utformad prototyp kan struktureras om och i slutändan resultera i en välstrukturerad lösning på problemet.
Iterativ utveckling har sina för och nackdelar [30]. När det kommer till utveckling av web-bapplikationer visar Rico [30] på att iterativ utveckling tillsammans med användarfeedback leder till ökad kvalitet av webbapplikationer. De menar även på att det finns kopplingar mellan agila metoder och iterativ utveckling som utöver kvalitet bidrar till ökad kostnadsef-fektivitet, kundnöjdhet och produktivitet.
Svårigheten i att använda sig av iterativ utveckling är att det kan vara svårt att identifiera precis vad det är som bör förbättras med systemet [2]. Utvecklaren måste ha möjlighet att skilja på vad som är subjektiva åsikter och vad som är faktiska problem med utformningen av systemet. Det finns även en risk att nya problem uppstår i samband med att utvecklaren löser andra befintliga problem [2].
2.6.6
Antal testpersoner
Antalet testpersoner som krävs för att få en god indikation på hur användbart ett system är kan skilja sig tämligen markant mellan olika studier [18]. Hwang och Salvendy samman-ställde i sin rapport "Number of People required for Usability Evauluation: The 10±2 Rule"[18] 102 artiklar om användartester och artiklarnas korrekta indikation på navigerbarhet i relation till populationens storlek. De valde sedan ut 27 stycken som uppfyllde ett antal kriterier de utformat. Med hjälp av regressionsanalys studerade de 36 datapunkter från dessa 27 artiklar. De kom fram till att 10 ± 2 stycken testpersoner behövs i ett generellt scenario, där testperso-nerna inte har någon särskild utbildning inom området och oberoende av testmetod, för att upptäcka åtminstone 80% av problemen.
Särskilt för SUS-testet är det relativt enkelt att tidigt dra en slutsats om systemet upplevs användbart eller inte, även med en liten population [7]. Exempelvis ger en population på 8-12 personer cirka 80% till 100 % korrekt indikation. Detta överensstämmer väl med Hwang och Salvendys [18] slutsats om 10 ± 2 stycken testpersoner.
3
Metod
I följande kapitel behandlas det tillvägagångsätt som användes för att besvara frågeställning-en. Först gjordes en förstudie, därefter utfördes två separata iterationer i form av ett utveck-lingsarbete. Varje iteration avslutades med ett användartest.
3.1
Förstudie
Förstudien inleddes med att genomföra en marknadsundersökning. Denna undersökning gjordes med syftet att undersöka efterfrågan på en webbapplikation för gårdsförsäljning. För-studien avslutades sedan med att en prototyp togs fram. Denna prototyp skapades utifrån de viktigaste aspekterna med avseende användbarhet och navigerbarhet. Marknadsundersök-ningen kompletterades också med en marknadsföringsplan.
3.1.1
Marknadsundersökning
För att få en bild av efterfrågan och behovet av webbapplikationen på marknaden genom-fördes en marknadsundersökning via en digital enkät. En länk till enkäten delades i olika grupper för studenter på Linköpings universitet samt till författarnas närstående. Marknads-undersökningen syftade till att ta reda på hur behovet såg ut för tjänsten och mer specifikt vilka typer av varor som de tillfrågade skulle vara intresserade av. Efter en vecka samman-ställdes resultaten från undersökningen. Totalt sett deltog 81 personer i marknadsundersök-ningen där majoriteten, 66.7%, tillhörde ålderspannet 18-25 år. De övriga åldersspannen var fördelat enligt 26-35 år: 12.3%, 36-50 år: 6.2%, 50-65 år: 9.9% och äldre än 65 år: 4.9%.
Enkäten inleddes med att samla in information om de tillfrågade. Därefter följde ett antal ge-nerella frågor om personernas inställning till att handla lokalt och deras vanor kopplade till detta. Även personernas upplevda brister med köpprocessen i fysiska gårdbutiker behandla-des. Dessutom ställdes mer specifika frågor om intresset för webbapplikationen och hur den potentiellt skulle kunna förändra de tillfrågades vanor att handla lokalt. Se Appendix B för enkäten och enkätsvaren.
3.2. Teknisk utveckling av webbapplikationen
3.1.2
Marknadsföringsplan
För att vidare studera behovet för tjänsten, kartlägga konkurrenter samt identifiera målgrup-pen för applikationen skapades en marknadsföringsplan. Marknadsföringsplanen bestod av en intern och extern analys av förutsättningarna för webbapplikationen. Syftet med den ex-terna analysen var att analysera företagets omvärld för att kunna identifiera potentiella hot och möjligheter för affärsidén. Den interna analysen utfördes i syfte att kartlägga företagets egna förutsättningar och därmed företagets styrkor samt svagheter. Dessutom stärktes mark-nadsföringsplanen med en NABC-analys för att identifiera vad som gör idén värdefull för potentiella kunder samt ge en helhetsbild av erbjudandet. Slutligen presenterades marknads-mixen för erbjudandet med komponenterna produkt, pris, plats och påverkan. Marknadsfö-ringsplanen finns i Appendix A.
3.2
Teknisk utveckling av webbapplikationen
Utvecklingen av webbapplikationen genomfördes i två iterationer genom agila arbets-metoder. I slutet av varje iteration utfördes användartester för att samla in data om hur användarna upplevde systemet. Återkopplingen användes sedan för att förbättra webbap-plikationens användbarhet med avseende på navigerbarhet. En sammanställning av den nytillkomna responsen gjordes. Denna sammanställning analyserades sedan och resultera-de i en uppdaterad produktbacklogg. Den respons som kom från en överväganresultera-de resultera-del av testpersonerna och berörde kritiska aspekter ur ett användbarhetsperspektiv prioriterades högst. Dessa kritiska aspekter framkom genom att testpersonerna uttryckte starka negativa åsikter och känslor i samband med användartesterna, vilket då tolkades som mest angelägna. Genom hela utvecklingsarbetet har Three Click Rule varit en målsättning för hur användaren ska kunna ta sig runt på webbapplikationen och denna regel har varit ett krav för alla olika navigationsvägar på webbapplikationen, förutom då användaren går från en vy till varu-korgen och sedan igenom betalningsprocessen. För att uppfylla kravet på Three Click Rule användes en nätverksstruktur som grund till webbapplikationens navigationsstruktur. Detta medförde att webbapplikationen utvecklades på så sätt att användaren kunde ta sig mellan majoriteten av alla tillgängliga vyer med ett klick. Vid implementationen av produktkate-gorisering utökades även nätverksstrukturen med en hierarkisk struktur som delade upp produkttyperna i underkategorier och gårdarna utifrån geografisk placering. Ett ytterligare tillägg som gjordes till strukturen var att även linjära navigationsvägar lades till för att ge flervägsalternativ till samma slutmål för användaren.
Den första iterationen fokuserade på att skapa en webbapplikation utifrån en prototyp som utformades utifrån rapportens teoridel (2). Denna prototyp utvärderades inte under an-vändartesterna utan skapades enbart i syfte att ligga till grund för den första iterationens im-plementation med placeringen av de olika komponenterna. I slutet av den första iterationen genomfördes användartest 1. Resultatet från användartest 1 analyserades och sammanfatta-des, för att sedan utgöra grunden för arbetet i iteration 2. Till sist avslutades denna iteration med användartest 2.
3.3
Användartester
Användartesterna genomfördes enligt presenterad metodteori (2.6). Dessa tester utfördes ef-ter varje ief-teration och bestod av Concurrent Think-Aloud Procedure, ett SUS-test samt Retro-spective Probing med fokus på användbarhet och navigerbarhet. I följande avsnitt beskrivs de gemensamma delarna för båda användartesterna och sedan beskrivs de unika faktorerna för varje användartest.
3.3. Användartester
3.3.1
Allmän beskrivning
Att studera hur användaren upplevde webbapplikationens avändbarhet med avseende på navigerbarhet var i fokus vid utformandet av användartesterna. Testgrupperna bestod av totalt 15 personer för båda användartesterna. Detta når upp till minimikravet på 10±2 personer för att få tillräckligt bra indikationer om förbättringsområden från testet, enligt Hwang och Salvendy [18]. Sammansättningen av testpersoner i gruppen valdes för att täcka ett brett åldersspann. Som en förberedande uppgift fick testpersonerna prova Concurrent Think-Aloud Procedure genom att prata högt medan de löste ett enkelt sudoku. Detta för att öva på att prata samtidigt som en uppgift genomfördes. Därefter fick testpersonerna tillgång till webbapplikationen med ett antal uppgifter att genomföra med uppmaning om att samtidigt tala högt om sina tankar, enligt metodiken för CTAP. Uppgifterna skiljde sig åt mellan användartesterna, se 3.3.2 respektive 3.3.3. Testuppgifterna valdes ut för att utvärdera en stor del av webbapplikationens funktionalitet och även för att kunna identifiera brister till nästa iteration eller framtida möjligheter för förbättring.
Testpersonerna genomförde testet enskilt, med enbart sällskap från testledaren. Testen ge-nomfördes i majoriteten av testfallen på distans via Teams eller Zoom med hjälp av Teamvi-ewer. Några enskilda fall av testen genomfördes lokalt på testledarens dator. Ledaren pratade enbart om denne behövde uppmuntra testpersonen att fortsätta prata för att undvika att på-verka testpersonen i sina resonemang. Hur testpersonen valde att ta sig an uppgiften samt vad testpersonen sa skrevs ned. Direkt efter att uppgifterna hade genomförts gjorde testper-sonen ett SUS-test. De tio frågorna i SUS-testet utgick från det frågeformulär som tagits fram av Brooke [7] men översattes till svenska för att passa den svenska testgruppen. Frågorna be-stod av påståenden om testpersonens upplevelse på webbapplikationen utifrån likertskalor, se Appendix E. Efter SUS-testet fick testpersonen fylla i ett formulär för Retrospective Pro-bing med fokus på användbarhet och navigerbarhet. Frågorna hade en varierande karaktär och bestod av både öppna frågor likt: ”Om du tycker det behövs, vilken ytterligare funktio-nalitet skulle du uppskatta?” och slutna frågor som: ”Kändes betalningsprocessen intuitiv och säker?”. Två av frågorna var även påståenden med en tillhörande likertskala. Dessutom behandlade frågorna även testpersonens upplevelse av sökfältet och sidomenyn samt filtre-ringsalternativen. Testpersonen fick även svara på om det fanns något som fungerade mindre bra eller på ett oväntat sätt. Frågorna valdes ut för att komplettera resultatet från SUS-testet med kvalitativ data, se Appendix F för exakta frågor. SUS-testet och frågorna för Retrospecti-ve Probing var likadana för bägge användartesterna.
3.3.2
Användartest 1
I användartest 1 deltog 15 testpersoner varav 10 män och 5 kvinnor. Testpersonerna fick totalt genomföra 12 uppgifter. Uppgifterna valdes ut i syfte att undersöka vilka komponenter som användes för att hitta utvalda produkter. Till en början fick testpersonen i uppgift att skapa ett konto och logga in. Sedan följde ett antal uppgifter där testpersonen skulle lägga till oli-ka slags produkter i varukorgen genom att använda sig av olioli-ka komponenter. Testpersonen fick även korrigera antalet produkter i varukorgen samt genomföra ett köp. Slutligen fick testpersonen i uppgift att genomföra en reklamation av en order. För en utförligare beskriv-ning av uppgifterna, se Appendix C. Efter att uppgifterna genomförts gjorde testpersonen ett SUS-test (Appendix E), följt av ett Retrospective Probing formulär med mer specifika frågor (Appendix F).
3.3. Användartester
3.3.3
Användartest 2
I användartest 2 deltog 15 testpersoner varav 11 män och 4 kvinnor. Testpersonerna fick totalt genomföra 21 uppgifter. Dessa uppgifter omformades och utökades efter första iterationen, dels infördes det fler uppgifter där testpersonen skulle hitta specifik information på webbap-plikationen och dels lades uppgifter till för att testa ny funktionalitet som tillkommit under den senaste iterationen. Den största förändringen av testuppgifter var att uppgifterna omfor-mulerades för att möjliggöra en större frihet för testpersonens egna tolkningar av hur uppgif-ten borde genomföras. Anledningen till att denna justering gjordes från användartest 1 var att testgruppen till övervägande del bestod av samma testpersoner som då redan hade en viss erfarenhet av att interagera med webbapplikationen. En bedömning som då gjordes var att testuppgifterna behövde försvåras något, för att kunna hitta ytterligare förbättringsom-råden med webbapplikationen. Den första uppgiften som testpersonerna fick genomföra var att hitta leverans- och företagsinformation. Nästa uppgift var att skapa ett konto och logga in på webbapplikationen. Sedan följde ett antal uppgifter med fokus på att lägga till och ta bort produkter från varukorgen samt hitta produkter enbart baserat på olika attribut. Vidare gavs testpersonen i uppgift att påbörja en betalning, avbryta denna för att sedan återuppta betalningsprocessen efter att ha lagt till ytterligare varor. Avslutningsvis fick testpersonerna likt användartest 1 reklamera en lagd order. För att ta del av de kompletta uppgiftsbeskriv-ningarna, se Appendix D. Likt tidigare användartest, utfördes sedan ett SUS-test direkt efter uppgifterna (se Appendix E) samt att testpersonen fick fylla i ett formulär för Retrospective Probing (se Appendix F).
4
Resultat
I följande kapitel redovisas resultatet av förstudien och respektive iteration. I varje iteration beskrivs den tekniska utvecklingen utifrån de aspekter som varit betydelsefulla för att be-svara frågeställningen. Sedan behandlas resultatet från respektive användartest, följt av de förbättringsförslag som tagits fram utifrån resultatet från användartesterna.
4.1
Förstudie
I följande avsnitt redovisas resultatet av förstudien. Det består av utfallet från marknadsfö-ringsplanen samt det resultat som erhållits av marknadsundersökningen. Till sist presenteras en prototyp av webbapplikationen som baserats på teorin från kapitel 2.
4.1.1
Marknadsföringsplan
Marknadsföringsplanen togs fram med syftet att undersöka hur erbjudandet ska differentiera sig på marknaden gentemot de identifierade konkurrenterna. Dessutom presenterades en plan utifrån marknadsmixen för hur lanseringen av erbjudandet ska genomföras. Genom marknadsföringsplanen framkom det att anledningen till att det finns ett behov för tjänsten är både befolkningens ökade miljömedvetenhet och det ökade intresset för att handla lokala råvaror. Dessa trender tillsammans med det faktum att lantbrukare väljer bort att delta på fysiska marknadsplatser på grund av tidsbrist skapar ett behov för tjänsten. Efter en analys i marknadsföringsplanen identifierades inga direkta konkurrenter utan endast substitut, se marknadsföringsplanen bifogad i Appendix A.
4.1.2
Marknadsundersökning
Resultatet från marknadsundersökningen visade på att det generella intresset för att handla lokala råvaror var stort och 92% av respondenterna var positivt inställda till en webbappli-kation för försäljning från gårdar. Grunden till respondenternas intresse för att handla lokalt var främst att stötta lokala lantbrukare samt att värna om miljön. Kött, mejeriprodukter samt frukt och grönsaker var de produkttyper som flest var intresserade av att handla via webbap-plikationen. Intresset för spannmålsprodukter och hantverk var betydligt lägre. Majoriteten av de tillfrågade handlar i nuläget varor från lokala gårdar någon gång per år eller mer sällan.
4.1. Förstudie
De huvudsakliga svårigheterna som de tillfrågade upplever med försäljning från gårdar el-ler fysiska marknadsplatser för gårdsförsäljning var tillgänglighet, dåliga öppettider samt att processen var tidskrävande. Alla respondenter ansåg att en webbapplikation för försäljning av lokala råvaror i någon mån hade påverkat deras köpfrekvens positivt. Resterande svar och en sammanställning av marknadsundersökningen finns i Appendix B.
4.1.3
Prototyp
Det första steget i utvecklingsprocessen var att skapa en prototyp utifrån den teori som be-handlats i teoriavsnittet, se figur 4.1. Syftet med denna prototyp var att använda den som en utgångspunkt för den grundläggande designen för webbapplikationen. Fokuset låg på att placera ut relevanta komponenter som sökrutan, logotyp, varukorg och menyn på de platser som teorin beskrev. Att namnge länkar på ett tydligt sätt var ytterligare en prioritering vid utformandet av prototypen. Prototypen utgjorde en grund tillsammans med produktback-loggen för utvecklandet av den första iterationens webbapplikation.
4.2. Iteration 1
4.2
Iteration 1
Utvecklingsarbetet under iteration 1 utgick från de tekniska och funktionella krav som togs fram under planeringsarbetet för iterationen. Utvecklingsarbetet utgick även från den teori som tagits fram för att besvara frågeställningen.
4.2.1
Teknisk utveckling av webbapplikationen
Under iteration 1 utvecklades den första versionen av webbapplikationen. Den togs fram som en single-page application för att få en snabb och responsiv webbapplikation samt för-enkla utvecklingsarbetet. I slutet av iteration 1 bestod webbapplikationen av flera funktioner och vyer. Det fanns startsida som agerade som en introduktion till webbapplikationen. En produktvy togs fram som nåddes både genom ett sökfält i mitten av webbapplikationen och genom ett navigationssfält till vänster på webbapplikationen. Dessutom utvecklades en vy för kundvagnen samt en vy för betalning. Högst upp på webbapplikationen fästes ett sidhuvud med Matladans logga uppe i vänstra hörnet. I fältet fanns även alternativen ”Logga in” och ”Registrera dig”, samt en kundvagn till höger.
Enligt teorin om Three Click Rule var det möjligt att nå alla delar av webbapplikationen med tre klick eller färre. Ett undantag var dock betalningsprocessen som hade en linjär struktur och krävde att användaren klickade fyra gånger för att ta sig genom processen. Överlag utformades navigationsstrukturen enligt en nätverksstruktur där användaren kunde nå ma-joriteten av alla vyer oberoende av aktuell position på webbapplikationen. Utöver detta fanns det inslag av en hierarkisk struktur i form av produkternas underkategorier och gårdarnas indelning utifrån dess geografiska placering. För att nå produktvyn kunde antingen sökfältet eller den vänstra sidomenyn användas vilket även gav uppbehov till en linjär struktur med alternativa vägar för en användare att nå ett slutmål.
Startsida
Startsidan, se figur 4.2, förklarade bland annat fördelarna med att handla på Matladan, samt länkade nya användare till ”Så funkar det”-vyn, som förklarade hur ett köp på Matladan fungerar. Till vänster på sidan återfanns ett navigationsfält. I navigationsfältet fanns olika alternativ som gav användaren möjlighet att navigera runt på webbapplikationen. Under ”Produkter” kunde användaren välja en huvudkategori av produkter. Vid klick på en hu-vudkategori togs användaren till en produktvy där varor som matchade den valda kategorin sågs i vyn. Alternativet ”Producenter” gav användaren en möjlighet att hitta varor från ett visst län eller en viss gård. Med hjälp av sökfunktionen kunde användaren söka bland hela Matladans sortiment. De hade även möjlighet att välja vilken region de ville söka inom. Regionerna återfanns i en dropdown, och bestod av alla Sveriges län plus ett alternativ för ”Hela Sverige”. Vid ett klick på ”Sök” togs användaren till produktvyn, där alla produkter som matchade användaren sökord och valda region visades.
4.2. Iteration 1
Figur 4.2: Startsida
Produktvy
I produktvyn listades de produkter som låg ute till försäljning, se figur 4.3. Produkterna re-presenterades med en bild, titel, plats, lagerstatus, pris, datum samt en kort produktbeskriv-ning. Det fanns en dropdown med filtreringsalternativ som användaren kunde använda för att lättare hitta en viss kategori av produkter. När en produkt lades till i varukorgen uppda-terades en siffra till höger om varukorgs-symbolen för att kunden skulle veta att varan hade lagts till. Denna siffra motsvarade det totala antalet varor som låg i varukorgen, se figur 4.4.
4.2. Iteration 1
Figur 4.4: Siffra som visar antalet varor i varukorgen
Genom att trycka på ”filtreringsalternativ” kunde användaren öppna en meny som visade de olika kategorier som fanns att filtrera på, se figur 4.5. I menyn var det möjligt att kryssa i en hel kategori eller olika underkategorier. Under kategorierna fanns två knappar, en för att applicera filtren och en annan för att rensa samtliga applicerade filter.
Figur 4.5: Produktvy med filter
Varukorgsvy
I varukorgsvyn kunde användaren se vilka varor som ligger i varukorgen och information relaterat till dessa, se figur 4.6. Information om antal produkter, pris och totalpris visades för varje produkt. Antalet produkter visades i en textruta som användaren kunde redigera genom att skriva in antalet önskade varor och sedan trycka på ”ändra-knappen” till höger. Genom att trycka på papperskorgsikonen som låg i linje med varje produkt var det möjligt att ta bort produkter från varukorgen. Det fanns även ett alternativ som tömde hela varukorgen genom att trycka på knappen med motsvarande text. Centrerat under listan av produkter kunde användaren trycka på ”Gå vidare till betalning” för att komma till betalsidan.
4.2. Iteration 1
Figur 4.6: Varukorg
Betalningsvy
Vyn för betalning implementerades med hjälp av Stripe checkout API1, se figur 4.7. Använda-ren skrev in sina kortuppgifter i respektive textfält och tryckte sedan på ”Betala” längst ned på sidan. De kortuppgifter som användaren skrev in skickades till Stripes API som sedan skötte hela transaktionen. Till vänster kunde användaren se en bild på Matladans logotyp och totalpris för ordern.
Figur 4.7: Betalningssida
4.2. Iteration 1
Sidfot
I sidfoten, se figur 4.8, hittade användaren kontaktinformation, besöksadress, länkar till Mat-ladans sociala medier och en knapp för att ta sig till toppen av sidan. Sidfoten var alltid placerad längst ned på webbapplikationen och fanns i samtliga vyer.
Figur 4.8: Sidfot
Frågor och svar
”FAQ” står för ”frequently asked questions” eller ”vanligt förekommande frågor”. Använda-ren kunde nå denna vy, se figur 4.9, genom navigeringsfältet till vänster. Sidan innehöll svar på vanliga frågor som användaren kunde ha, exempelvis om hur leveransen fungerar.
4.2. Iteration 1
Sidhuvud
Centralt i sidhuvudet låg sökrutan med tillhörande regionslista, se figur 4.10. I sökrutan skrev användaren ett sökord som sedan jämfördes mot strängar i databasen för produkter. Endast produkter från den region användaren hade ställt in i regionslistan visades. Användaren kun-de även välja att söka på samtliga regioner genom att välja ”Hela Sverige” i listan.
Figur 4.10: Sökvy
4.2.2
Användartest 1
Efter iteration 1 utfördes det första användartestet. Användartestets syfte var att undersöka testpersonernas uppfattning av webbapplikationens navigerbarhet. Testet undersökte även vad testpersonerna hade för förslag angående förbättringsområden för att öka användarens upplevelse på webbapplikationen.
CTAP
Under användartestet utfördes CTAP - Concurrent Think-Aloud Procedure, där testpersoner-na högt fick säga sitestpersoner-na spontatestpersoner-na reaktioner under användartestets gång. Testpersonertestpersoner-na fick även säga hur de gick tillväga för att nå fram till lösningen för den givna uppgiften. Nedan listas de tankar som var mest signifikanta under genomförandet av användartesten:
• Det fungerade inte att använda sig av ”Enter” vid det tillfälle som användaren ville logga in
• Användare hade svårt att förstå hur stort antal av produkten som lades i varukorgen då användaren tryckte på knappen ”Lägg i varukorgen”
• Användarna upplevde det inte som intuitivt att behöva trycka på “Lägg till vara” flera gånger för att lägga till flera av samma vara
• Filtreringsverktygets funktionalitet levde inte upp till användarens förväntan och för-svann vid några tillfällen
• Användare upplevde det inte som intuitivt att behöva trycka på knappen “Ändra” efter att kvantiteten ändrats i textrutan
4.2. Iteration 1
• Användarna upplevde en avsaknad av respons efter genomförd reklamation och tyckte att det var svårt att veta om den gått igenom
• Användarna var missnöjda med att varukorgen inte tömdes efter genomfört köp • Användarna kunde inte hitta sina genomförda ordrar bland orderhistoriken
• Användarna upplevde att det var lätt att hitta till vyn för att logga in och även till vyn för registrering
• Användarvillkoren var svåra för användaren att hitta och på grund av dess utseende förstod inte användaren att de var klickbara
SUS-test
Efter testpersonerna avklarat testuppgifterna fick de besvara ett SUS-test och resultatet från SUS-testet illustreras i figur 4.11 nedan.
Figur 4.11: Resultat av SUS-test för iteration 1
1: Jag tror att jag skulle vilja använda den här hemsidan regelbundet 2: Jag tycker att hemsidan är mer komplicerad än vad den behöver vara. 3: Jag tycker att hemsidan är lätt att använda.
4: Jag tror att jag skulle behöva personlig teknisk support för att kunna använda hemsidan. 5: Jag tycker att de olika funktionerna på hemsidan fungerar väl tillsammans.
6: Jag tycker att det finns många saker som inte är konsekventa på den här hemsidan. 7: Jag tror att de flesta skulle kunna lära sig den här hemsidan ganska snabbt. 8: Jag tycker att den här hemsidan är besvärlig att använda.
9: Jag känner mig väldigt säker och trygg (på vad jag gör) när jag använder hemsidan. 10: Jag behöver lära mig ganska mycket innan jag kan börja använda hemsidan.
