Baljangåvan: Omtanke på distans : Hur kan en webbapplikation som säljer enkla gåvor utformas så att den upplevs navigerbar, tillförlitlig och har en effektiv köpprocess?

Linköpings universitet SE–581 83 Linköping

Linköpings universitet | Institutionen för datavetenskap

Examensarbete på grundnivå, 18hp | Industrial Engineering and Management

2018 | LIU-IDA/LITH-EX-G--18/021--SE

Baljangåvan:

Omtanke på distans

–

Hur kan en webbapplikation som säljer enkla gåvor

ut-formas så att den upplevs navigerbar, tillförlitlig och har en

effektiv köpprocess?

The Baljan Gift: Caring from afar

–

How can a web application that sells simple gifts be designed

to be perceived as navigable, trustworthy and have an efficient

buying process?

Felicia D

,

Eirik F

,

Tomas G

,

Sophie L

,

Filip N

,

Marcus O

,

Herman S

,

Joakim S

Handledare : Rita Kovordanyi Examinator : Aseel Berglund

Upphovsrätt

Detta dokument hålls tillgängligt på Internet – eller dess framtida ersättare – under 25 år från publiceringsdatum 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. Ö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 lösningar av teknisk och admi-nistrativ 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 sam-manhang 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 circumstan-ces. The online availability of the document implies permanent permission for anyone to read, to download, or to print out single copies for his/hers own use and to use it unchang-ed for non-commercial research and unchang-educational purpose. Subsequent transfers of copyright cannot revoke this permission. All other uses of the document are conditional upon the con-sent 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 Uni-versity 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/.

c Felicia DAHLSTRÖM, Eirik FUNNEMARK, Tomas GUDMUNDSSON, Sophie LINDBERG, Filip NILSSON, Marcus OLSSON, Herman SVENSK, Joakim SÖRENSEN

Sammanfattning

Syftet med denna studie var att undersöka hur en webbapplikation kan tillfredsställa behovet av att snabbt och smidigt kunna ge enklare gåvor till vänner och bekanta på Linkö-pings universitet. En webbapplikation utvecklades med fokus på de tre nyckelaspekterna navigerbarhet, tillförlitlighet och effektiv köpprocess.

Under studiens gång utfördes användartester av webbapplikationen under olika faser av utvecklingen med de ovannämnda aspekterna som mätvärden. Metoder som användes i samband med användartesterna var Smiths L-formel för att utvärdera navigerbarheten samt Concurrent Think-Aloud Procedure och Retrospective Probing. Resultaten från test-personerna samlades sedan in och användes som underlag för framtida utveckling. Trots att testresultaten låg till grund för utformningen av webbapplikationen ansågs navigerbar-heten vara som lägst efter det sista testet enligt resultaten vilket är något som diskuteras i diskussionskapitlet. Vidare var målet med en effektiv köpprocess att kunna klicka, mata in persondata och ta beslut så få gånger som möjligt för att utföra ett köp, vilket slutligen resulterade i fyra klick, sex inmatningar och två beslut. Slutligen var den upplevda tillför-litligheten för webbapplikationen hög och lyckades uppnå sitt högsta testresultat efter de sista testerna. Slutsatsen indikerar att det krävs kompromisser för att skapa en webbappli-kation som maximerar de tre nyckelaspekterna. Vad som gynnar en parameter missgynnar en annan och prioriteringar kan krävas. I Baljangåvans fall blev resultatet en webbapplika-tion som upplevdes navigerbar och tillförlitlig, samtidigt som köpprocessen hölls så effek-tiv som möjligt.

Abstract

The purpose of this study was to examine whether or not a web application can satisfy the need to give simple gifts to friends and acquiantences, studying at Linkopings Uni-versity, in a quick and simple manner. The web application was developed keeping three key-aspects in mind: navigability, trust and an efficient method of payment.

During the stages of the development, user tests were performed using the afore-mentioned aspects as metrics. Some of the methods used during testing were Smith’s L-formula, to evaluate navigability, as well as Concurrent Think-Aloud Procedure and Restrospective Probing. The obtained test data was gathered and became the foundation for future development. Even though the development was premised on the test data, ho-wever, the experienced navigability showed an all time low in the last test. This is additio-nally explored in the discussion part of this thesis. Furthermore, the objective of an efficient method of payment was to keep the amount of clicks, inputs and decisions needed in or-der to buy a product as low as possible. This ended up being four clicks, six inputs, and two decisions. Lastly, the perceived trust of the web application was high and attained its best result during the last test iteration. The conclusion indicates that compromises are needed in order to develop a web application that maximizes the three key-aspects. There is always a trade-off between the different paramters and priorities are crucial in order to reach a disired balance. The result of this study was a web application with high perceived navigability and trust as well as an efficient method of payment.

Författarnas tack

Vi vill först och främst tacka vår handledare Rita Kovordanyi, som har väglett oss genom detta projekt och kommit med insiktsfulla åsikter och synpunkter. Vidare vill vi tacka Aseel Berglund för kontinuerligt stöd och tillhandahållande av information. Vi vill även passa på att tacka våra opponenter och testpersoner, då vi utan deras insikter inte hade kunnat genomföra denna studie. Ett sista tack vill vi rikta till Baljan, som är den främsta inspirationskällan till detta projekt. Tack!

Innehåll

2.1.1 Betydelsen av en god navigerbarhet inom e-handel . . . 3

2.1.2 Utformning av en webbapplikation för ökad navigerbarhet . . . 4

2.1.3 Hur produkter kan visualiseras och placeras inom e-handel . . . 4

2.1.4 Länkar och menyer . . . 5

2.1.5 Startsida och hemknapp . . . 6

2.1.6 URL-design . . . 6

2.2 Effektiv köpprocess . . . 7

2.2.1 Betydelsen av en effektiv köpprocess inom e-handel . . . 7

2.2.2 Three-Click-Rule . . . 7

2.2.3 Single Page Application . . . 7

2.3 Trovärdighet . . . 7

2.3.1 Betydelsen av en god trovärdighet inom e-handel . . . 7

2.3.2 Faktorer som påverkar konsumentförtroende . . . 8

2.3.3 Trovärdighet i design . . . 9

2.4 Metodteori . . . 9

2.4.1 Utvärdering av navigerbarhet . . . 9

2.4.3 Användarcentrerad utveckling . . . 10 3 Metod 13 3.1 Förstudie . . . 13 3.1.1 Marknadsanalys . . . 13 3.2 Utveckling . . . 13 3.3 Testning . . . 14 4 Resultat 16 4.1 Webbapplikation . . . 16 4.1.1 Startsida . . . 17 4.1.2 Överblick av gåvor . . . 17

4.1.3 Sida för gåva och beställning . . . 18

4.1.4 Status för en order . . . 21

4.1.5 Informationssidor och vanliga frågor . . . 21

4.2 Navigerbarhet . . . 27

4.2.1 Testresultat navigerbarhet . . . 28

4.2.2 Övriga synpunkter från testpersoner . . . 28

4.3 Tillförlitlighet . . . 29

4.3.1 Tillförlitlighet . . . 29

4.3.2 Övriga synpunkter från testpersoner . . . 29

4.4 Effektiv köpprocess . . . 30 4.5 Åtgärder . . . 32 4.5.1 Användartest 1 . . . 32 4.5.2 Användartest 2 . . . 32 4.5.3 Användartest 3 . . . 33 5 Diskussion 34 5.1 Resultat . . . 34 5.1.1 Navigerbarhet . . . 34 5.1.2 Tillförlitlighet . . . 35 5.1.3 Effektiv köpprocess . . . 36 5.1.4 Webbapplikationen . . . 36 5.2 Metod . . . 40 5.2.1 Tester . . . 40 5.2.2 Källkritik . . . 42

5.3 Arbetet i ett vidare sammanhang . . . 43

6 Slutsats 44

Referenser 46

A Appendix A: Marknadsundersökning 50

B Appendix B: Marknadsföringsplan 55

Figurer

2.1 Modell för faktorer gällande konsumentförtroende . . . 9

4.1 Förstasida . . . 17

4.2 Överblick av gåvor . . . 18

4.3 Sida för gåva och beställning . . . 19

4.4 Betalformulär med kort . . . 19

4.5 Betalformulär med Swish . . . 20

4.6 Beställningsbekräftelse . . . 20

4.7 Status för en order . . . 21

4.8 Informationssida . . . 22

4.9 Sida med kontaktinformation . . . 23

4.10 Guidesida . . . 24

4.11 Sidor med vanliga frågor . . . 25

4.12 Överblick av gåvor vid första användartestet . . . 26

4.13 Status för en order vid andra användartestet . . . 27

Tabeller

4.1 Resultat av navigerbarhet från det första användartestet . . . 28

4.2 Resultat av navigerbarhet från det andra användartestet . . . 28

4.3 Resultat av navigerbarhet från det tredje användartestet . . . 28

4.4 Resultat för den upplevda tillförlitlighet från de tre användartesterna . . . 29

4.5 Köpprocessen i version 1 . . . 31

4.6 Köpprocessen i version 2 . . . 31

4.7 Köpprocessen i version 3, beslut: Swish-betalning . . . 32

1

Introduktion

Livet som student är för många en stressig tillvaro som utmanar både ekonomi och psyke. Att visa uppskattning för vänner och bekanta kan därför kännas som en utmaning, både eko-nomiskt och tidsmässigt. Utifrån ett antagande att de flesta uppskattar både att ge och att få gåvor ska en webbapplikation utformas, som för studenter och anhöriga möjliggör detta på ett enkelt och prisvärt sätt. Visionen som arbetet drivs av är att utveckla en enkel webb-applikation som går snabbt att använda och som sprider glädje och en känsla av vardagslyx bland studenter på Linköpings universitet.

Försäljning via e-handel har ökat drastiskt de senaste åren och allt fler svenskar väljer att handla via nätet. Enligt en undersökning som DIBS gjort (2017) är de två vanligaste anled-ningarna till att svenskar handlar via nätet tidsbesparing och enkelhet [1]. Likaså spås gåvo-industrins framtid följa samma ökande trend [2]. För att följa dessa trender ska en webb-applikation utvecklas för att tillfredsställa dessa behov. Baljangåvan, vilket är namnet på tjänsten, ska sälja gåvor på en webbaserad handelsplats, med utlämningsställe i studentkafé-et Baljan. Namnstudentkafé-et på tjänsten—Baljangåvan—kommer från den starka kopplingen till kaféstudentkafé-et Baljan, som är ett populärt kafé lokaliserat på campusområdet vid Linköpings universitet. Gåvorna som skickas är produkter från Baljans nuvarande sortiment paketerade i en mind-re pmind-resentlåda. Det kan exempelvis vara en kaffe samt en chokladboll tillsammans med en personlig hälsning.

För att en webbapplikation ska vara framgångsrik måste den vara användbar [3]. Detta ligger till grund för studien, som har som mål att undersöka hur en webbapplikation kan utvecklas så att den upplevs användbar av användaren. För att göra detta kommer använd-barhet undersökas utifrån tre aspekter: webbapplikationens köpprocess, navigeranvänd-barhet och upplevd tillförlitlighet. Studier visar att en användares vilja att genomföra ett köp är starkt korrelerad med hur tillförlitlig sidan upplevs [4]. Dessutom påverkar webbapplikationens betalsätt sannolikheten att en användare slutför sitt köp [1]. Ytterligare påverkas en använ-dare av sidans navigerbarhet, det vill säga hur enkelt det är för använanvän-daren att finna den information vederbörande söker, vilket också kan ha en effekt på den upplevda tillförlitlig-heten. Dessa tre aspekter påverkar alltså en webbapplikations användbarhet, samtidigt som de påverkar varandra. Det har exempelvis visats att en kort köpprocess har negativ påverkan på hur trovärdig användaren upplever webbsidan. En köpprocess som endast kräver ett klick skulle innebära en kort och effektiv köpprocess, men det skulle riskera att navigerbarheten och tillförlitligheten påverkas negativt [5]. På samma sätt skulle en sida med utmärkt

navi-1.1. Syfte

gerbarhet ingjuta förtroende hos användaren, men det skulle troligtvis även förlänga köp-processen. Problematiken kring att utveckla en webbapplikation som tar hänsyn till dessa tre aspekter samtidigt ligger till grund för den frågeställning som studien ämnar att besvara.

1.1

Syfte

Studiens syfte är att undersöka hur en webbapplikation kan tillfredsställa behovet av att snabbt och enkelt kunna ge enklare gåvor till vänner och bekanta på Linköpings universi-tet.

1.2

Frågeställning

Då en webbapplikation där det går snabbt att gå från produkt till köp riskerar att upplevas som mindre tillförlitlig måste avvägningar mellan de olika aspekterna göras. Detta ger fråge-ställningen; hur kan en webbapplikation som säljer enkla gåvor utformas så att den upplevs navigerbar, tillförlitlig och har en effektiv köpprocess?

1.3

Avgränsningar

Rapporten ämnar undersöka hur en webbapplikation kan utvecklas så att den upplevs na-vigerbar, tillförlitlig och har en effektiv köpprocess. Den fokuserar primärt på utformningen snarare än på affärsidén. Då projektets tidsram är begränsad har ytterligare avgränsningar gjorts.

Webbapplikationen kommer endast testas av studenter, och inte utav icke-studenter. Dessutom är antalet personer som testar webbapplikationen begränsat, och ger inte förut-sättningen att göra kvantitativa mätningar av navigerbarheten och den upplevda tillförlit-ligheten. Vidare kommer webbapplikationens betalfunktioner inte implementeras så att de fungerar fullt ut. Fokus kommer istället ligga på upplevelsen av sidan, och inte nödvändigt-vis på den faktiska funktionaliteten.

2

Teori

Följande kapitel kommer att ta upp den teori som behövs som underlag för att besvara fråge-ställningen. Då frågeställningen tar upp navigerbarhet, köpprocessen och tillförlitlighet inom e-handel kommer dessa aspekter att ligga i fokus. Den teori som berör metoden tas upp i av-snittet Metodteori.

2.1

Navigerbarhet

En webbapplikations navigerbarhet kan definieras som hur enkelt det är för användaren att finna den information vederbörande söker genom att röra sig genom applikationen [6]. Det finns dock fler tolkningar av vad navigerbarhet innebär för en webbsida. Annan forskning menar istället att navigerbarhet handlar om hur webbsidor underlättar för användaren att genomföra särskilda uppgifter [7]. Detta resulterar i en definition som är lika mycket baserad på användarens prestation som webbsidans struktur. Det dessa definitioner har gemensamt är tanken om att navigerbarhet handlar om kvaliteten på det navigeringsstöd som ges av ett systemgränssnitt [7].

2.1.1

Betydelsen av en god navigerbarhet inom e-handel

Sannolikheten för en e-butik att bli framgångsrik är starkt kopplat till dess navigerbarhet. Om en webbsida inte är navigerbar riskerar användaren att känna sig förvirrad och frustre-rad vilket kan leda till att användaren lämnar sidan [8]. Nielsen hävdar att e-butiker år 2001 förlorade ungefär hälften av sina potentiella kunder på grund av bristande användbarhet. Som ett resultat av detta menar Nielsen [9] att genomsnittssidan hade kunnat öka sina dåva-rande försäljningar med 79 % genom att vara lättare att använda.

Sundar [7] menar att webbsidor som är mer navigerbara och välstrukturerade omedel-bart kan göra att användaren upplever sidan som mer trovärdig. Vidare visar Hasan [10] att navigerbarhet har större påverkan på användarens känsla angående webbsidan än vad den visuella och informativa designen har. Hasan menar även att en rättfram navigering på webbsidor tenderar att skapa en känsla av belåtenhet hos användaren vilket förbättrar an-vändarens nöjdhet samt sannolikhet att återvända till sidan.

Ett företag bör inte anta att kunder är ointresserade av deras varumärke eller deras pro-dukter baserat på en icke framgångsrik försäljning över internet. I detta scenario är det viktigt

2.1. Navigerbarhet

att noggrant titta på gränssnittet och sättet webbsidan presenteras. Frågan som bör ställas är om kunderna faktiskt vet om vad för produkter som erbjuds på webbsidan [11].

2.1.2

Utformning av en webbapplikation för ökad navigerbarhet

En välstrukturerad webbsida bör vara utformad så att skillnaden mellan dess struktur och användarens förväntningar minimeras. Vidare ska inte användaren tappa bort sig på webbsi-dan för att senare behöva leta sig tillbaka. Skulle användaren hamna på fel sida bör det därför finnas möjligheter att enkelt orientera sig och ta sig tillbaka dit denne tidigare befann sig [12]. För att det lätt skall gå att orientera sig på en webbsida är klarhet i dess strukturer och att gränssnittet hjälper användaren att finna det vederbörande söker väldigt viktigt. Detta bör ej enbart göras genom att berätta för användaren vad som finns att nå från sidan den befinner sig på utan även genom att berätta för användaren om hur sidorna är kopplade och hur de relaterar till varandra, exempelvis om en sida är en underavdelning till en annan sida [7].

I en litteraturstudie av Gherke och Turban [8] presenteras forskning gällande framgångs-faktorer för utformningen av webbapplikationer med avseende på navigerbarhet. För en ef-fektiv navigering i en webbapplikation rekommenderar Haine (1998), enligt Gherke och Tur-ban, att länkar namnges mycket noggrant, att de ej är trasiga samt att namnsättningen på dessa klarar av att svara på två frågor:

• Vad får jag om jag klickar här? • Varför skulle jag vilja ha det?

Angående konsekvent navigering presenterar Gherke och Turban två alternativa synsätt. I Wilsons forskning presenteras att hävda att en webbapplikation bör förse användaren med flera olika sätt att navigera sig fram på. Å andra sidan beskriver Berst att en webbsida istället bör vara konsekvent och bestämma sig för ett sätt att navigera på för att sedan hålla sig till detta.

F-modellen

För att en användare snabbt skall kunna navigera sig fram i en webbapplikation krävs att den är designad på så vis att användaren snabbt ser informationen den söker. En modell som försöker förklara detta är F-modellen. Denna modell beskriver de ögonrörelser som generellt sett förekommer när en människa söker information. Att den heter F-modellen beror på att det tydligt går att observera ett mönster som liknar ett F på värmekartor som visar var på skärmen användare tittar mest. Därav tittar användare först horisontellt högt upp för att suc-cessivt vandra nedåt med blicken samtidigt som bredden minskar och för att sedan övergå till att titta mest vertikalt [13].

2.1.3

Hur produkter kan visualiseras och placeras inom e-handel

Följande avsnitt kommer behandla placering av information på en webbapplikation samt dess layout. Då studien undersöker navigerbarhet av en webbapplikation är det nödvändigt att förstå hur produkter kan visualiseras och placeras inom e-handel, eftersom det kan vara avgörande för hur enkelt användaren hittar vad den söker.

Produkter inom online-shopping

Ett unikt karaktärsdrag för online-shopping är att konsumenter ständigt utvärderar produk-ter och gör avvägningar baserat på produktinformation på webbsidor. Produktinformation ska presenteras i det mest användbara formatet där det inte krävs att användaren ska be-höva konvertera, beräkna, interpolera eller översätta information [14]. I detta fall, där webb-applikationens målgrupp är svenska användare, innebär det att kostnaden ska visas i svenska

2.1. Navigerbarhet

kronor (SEK), samt att texten ska vara på svenska. Produktsidor ska även struktureras på ett sätt som gör det enkelt för konsumenten att jämföra produkter då användare vill kunna ana-lysera likheter, skillnader, trender och förhållanden. Användaren ska kunna jämföra två eller fler produkter utan att behöva memorera en av dem medan den navigerar till den andra [14].

Utformning och visualisering

Människor föredrar hierarkier och tenderar att fokusera på en av hierarkinivåerna i taget. Detta möjliggör för dem att använda sig av en mer systematisk strategi då de genomsöker en sida, vilket i sin tur resulterar i färre antal återbesök på samma data. Som en del av detta fö-redrar även användare när produkter placeras i linje [14]. Kritisk data bör även på ett visuellt sätt utmärkas från resten. Ett exempel på denna typ av data är nyligen förändrad data samt data av hög signifikans. Att visuellt betona data har visat sig effektivast då endast en liten del är framhävd, medan resterande presenteras i ett relativt snarlikt mönster [14].

Det är även viktigt att utforma layouten så att den inte liknar en reklamannons. Trots att ett grafiskt element tydligt urskiljer sig från resten av sidan kan en användare bortse från innehållet. Skälet till detta är att användaren kan uppfatta det som annonsering och såle-des sorterar ut innehållet vid skanning av sidan [14]. Färgkodning kan användas för att ge möjlighet för användaren att snabbt genomsöka, sortera och gruppera element. Element med samma färg kan anses som relaterade till varandra, medan olika färger ger intrycket av skill-nader. Människan kan urskilja över tio olika färger, men för färgkodning av kategorier är det lämpligt att inte använda sig av mer än fem [14].

Filtrering och sortering

Kunder vill även snabbt kunna filtrera de alternativ som finns. Som följd av detta bör al-la filtreringsalternativ presenteras tydligt så att användaren effektivt kan ta fram det som är lämpligast [15]. Exempel på detta är allergier, pris eller innehåll. Studier inom kognitiv psykologi visar att människans uppmärksamhet är en begränsad resurs och att människor tenderar att bli trötta av att utforska en lång lista av element [16].

När det kommer till hur listor ska sorteras bör designern ta reda på om det finns en unik prioritetsordning för just denna produkt och format. Den unika sorteringen kan således på-verka användarens uppfattning kring vikten av olika dimensioner hos produkterna [17]. Om det visar sig att det inte finns en unik prioritetsordning bör produkter sorteras i alfabetiskt eller numerisk ordning [14]. Om produkter placeras i en avtagande ordning baserat på kon-figurationer, kan det skapa en känsla hos konsumenten att det är en konfigurationsförlust att röra sig nedåt. Konsumenter jämför oftast produkter i par där de väger den senare mot den förra och ju längre ner i sorteringen konsumenten kommer, desto sämre upplevs produkterna [18]. Om produkterna placeras i en stigande konfigurationsordning gäller det omvända, kon-sumenten får en känsla av konfigurationsvinst när de observerar fler av produkterna. Baserat på konceptet om förlustovilja antas att den psykologiska inverkan av konfigurationsförlust är större än för konfigurationsvinst. När produkter sorteras baserat på konfigurationer kom-mer kunder att lägga större betydelse av konfigurationerna i en avtagande ordning jämfört med en stigande ordning [18].

2.1.4

Länkar och menyer

Länkar anses vara en viktig del av navigerbarheten; de sammanbinder sidor och låter använ-daren ta sig till nya outforskade delar av webbapplikationen [19]. I Guidelines for Designing Web Navigation skriver Farkas och Farkas [20] att det krävs en tydlig design och informa-tionsstruktur för att underlätta navigeringen för den som använder webbapplikationen. För att åstadkomma detta menar de att placering av en navigationsmeny längst upp på sidan kan öka den upplevda navigerbarheten. På så sätt kan användaren alltid se de viktigaste länkarna

2.1. Navigerbarhet

oavsett var den befinner sig på hemsidan, även om användaren befinner sig djupt ner i webb-applikationen eller om den har scrollat långt ner på sidan. Om det finns länkar som inte syns förrän användaren har scrollat ned så anser Farkas och Farkas att det bör finnas någon typ av grafisk antydan som visar det för användaren. Weinreich [21] med flera bekräftar detta. De har noterat att de allra flesta klickningar som görs sker uppe i den vänstra kvadranten av an-vändarens skärm och bara en bråkdel av alla klickningar som görs sker efter att användaren scrollat horisontellt. Vidare på samma tema hävdar Nielsen [22] att god länkning ökar navi-gerbarhet och det är av yttersta vikt att varje länk tydligt visar var användaren kommer att hamna efter ett klick. För att utöka tydligheten säger Nielsen att tilläggstexter kan användas för länken, antingen under den givna länken eller med tooltips. Rollovers är funktionen där en visuell förändring sker då musen rör sig över ett objekt. Dessa kan förutom att tydligare visa var användaren hamnar verka för att skapa en mindre klottrig visuell upplevelse, långa länkar kan ofta kortas ned utan att navigerbarheten blir lidande.

Ytterligare ett sätt att förbättra navigerbarheten för användaren när det kommer till länkar är att använda sig av link typing, det vill säga se till att varje länk som tillhör samma kategori ser enhetliga ut. Länkar som omdirigerar användaren internt på samma sida har en särskild färg medan länkar som förflyttar användaren till en extern hemsida har en annan färg [20]. Istället för att använda färger och rollovers på länkar diskuterar Calongne [23] huruvida me-taforer förbättrar navigerbarhet. Meme-taforer kan användas för att förbättra navigerbarhet och kraven och därmed minska vikten av att använda rollovers. Exempelvis i en e-butik kan bil-den av en varukorg användas som metafor för att visa att användaren förflyttas till en sida där det går att betala och se en översikt att valda produkter.

2.1.5

Startsida och hemknapp

Det finns olika anledningar till att besöka en webbsida men det första användaren möter är nästan alltid startsidan. Ibland vill användaren ta reda på vad företaget arbetar med, i and-ra fall vill användaren köpa en produkt. Nielsen och Tahar [22] skriver att samma person förmodligen återbesöker webbapplikationen men med med olika anledningar från gång till gång, det är därför svårt att varje gång kunna tillgodose varje användares behov direkt vid startsidan. Utmaningen blir att designa en startsida som gör det möjligt att nå alla viktiga funktioner utan att göra den överfull med information, vilket ofta blir överväldigande för en ny användare. Nielsen och Tahar sammanfattar det med att säga att fokus och klarhet, till-sammans med förståelse för användarnas mål, är nyckeln till att skapa en bra och navigerbar startsida. Whitenton [24] fortsätter på detta tema, hon menar att det är viktigt att alltid kunna ta sig tillbaka till startsidan var än användaren befinner sig på webbsidan. Idag finns det en utbredd norm att ha företagets logga upp till vänster på sidan, att gå ifrån detta kan drastiskt skada den upplevda navigerbarheten.

2.1.6

URL-design

Navigerbarhet handlar inte bara om att hitta rätt på en webbsida utan också om enkelheten av att nå en webbsida. Vid val av URL för sin webbsida rekommenderar Nielsen [19] att följa normen. Det viktigaste är att användaren ska komma ihåg den och det görs enklast genom att följa dessa fyra steg:

• Använd så kort URL som möjligt, det minskar risken för att skriva fel. • Använd lättstavade ord i så stor utsträckning som möjligt.

• Använd endast små bokstäver. En användare bör aldrig behöva oroa sig över skillnaden mellan stora och små bokstäver.

• Undvik specialtecken (tecken som inte är bokstäver eller siffror). Om tvunget, var kon-sekvent och blanda inte användningen av punkt och bindestreck

2.2. Effektiv köpprocess

2.2

Effektiv köpprocess

Baymard Institute [25] har sammanställt statistik från 2011 till 2017 med de främsta anled-ningarna varför konsumenter avslutar en köpprocess. Undersökningen visar att 58,5 % av de tillfrågade avslutade då de kollade bara / var inte redo att köpa. Om detta segment bortses avslu-tade 60 % på grund av extra kostnader, 37 % för att sidan krävde registrering och 28 % för att de ansåg köpprocessen för lång / för komplicerad [25] . För att effektivisera en webbapplikations köpprocess kan dels antal undersökas, dels laddningstiden. Exempelvis kan laddningstiden för att klicka sig vidare till en ny sida vara skälet till varför en användare inte genomför ett köp. Detta har resulterat i att många företag börjat använda sig av långa scroll-sidor; ju snabbare en användare kan tillgängliggöra sig informationen de söker efter, desto mindre är sannolikheten att den avslutar sin process [26].

2.2.1

Betydelsen av en effektiv köpprocess inom e-handel

Ju mer en användare av en webbapplikation måste vänta, eller klicka, desto större risk är det att användaren tappar intresset och väljer att inte genomföra ett köp. Det är således viktigt att minimera antalet klick och väntetid. Detta gäller genomgående för applikationen och inte minst vid köp [26].

2.2.2

Three-Click-Rule

Three-click-rule är en icke-officiell regel för webbdesign som säger att en användare ska kun-na tillgodogöra sig all information på högst tre klick [27]. Detta skulle för en e-butik innebära att det är möjligt att genomföra köpet på högst tre klick. På senare tid har dock kritik väckts mot metoden då flera undersökningar har visat att fler klick än tre inte nödvändigtvis leder till sämre kundnöjdhet eller minskar konverteringsgraden, det vill säga att färre besökare blir kunder. Skälet till kritiken är att framgången av varje klick, samt att den information som nås är relevant, menas vara det primärt viktiga snarare än antalet klick [27].

2.2.3

Single Page Application

En Single Page Application (SPA) är en applikation som består utav endast en sida, vars in-nehålla uppdateras dynamiskt. En traditionell webbapplikation ritar istället om sidan varje gång användaren trycker på en ny länk. Om sidan är stor, servern är upptagen eller om in-ternetanslutningen är långsam, så kan tiden det tar att rita om sidan vara flera sekunder, och användaren får då vänta med att navigera sig vidare tills denne tror att sidan har laddat klart. En SPA kan alltså användas för att minimera laddningstiden när en användare navigerar på en webbapplikation. Dessutom möjliggör en SPA att ett meddelande kan visas medan en ny sida laddas, så att användaren inte behöver gissa sig fram [28].

2.3

Trovärdighet

Trovärdighet kommer i detta sammanhang att avse en användares känsla av tillit till en tjänst och att tjänsten inte missbrukar denna tillit. Följaktligen ska användaren känna sig trygg i användandet av tjänsten och utan misstro kunna förse denna med både personlig information och betalningsinformation. Denna tolkning vilar på definitionen att en e-butiks trovärdighet definieras som en konsuments villighet att förlita sig på försäljaren [29].

2.3.1

Betydelsen av en god trovärdighet inom e-handel

Det är trovärdighet och inte pris som i huvudsak avgör huruvida en konsument brukar en e-butik eller inte [30]. Det är därför väsentligt att inrätta en känsla av trovärdighet för att uppmuntra konsumenter till att använda en e-butik. Vilka faktorer som bidrar till att inrätta

2.3. Trovärdighet

denna trovärdighet är ett ämne för diskussion då faktorerna är betydligt mer abstrakta och subtila än vad som avslöjas vid första anblick. Likväl finns det faktorer som anses mer rele-vanta. Tillfredsställelse av dessa faktorer bidrar bland annat till att uppmuntra användaren till att använda e-butiken igen samt uppmuntrar användaren till att vara lojal mot e-butiken i fråga [30].

Konsumentens förtroende och tillit till den säljande parten i en e-handelssituation har positiv påverkan på ett antal faktorer som ökar omsättning och vinst för en e-handelsaktör [30]:

• Intention för köp (Purchase intention)

• Intention för upprepade köp (Repeat purchase intention) • Nöjdhet (Satisfaction)

• Lojalitet (Loyalty)

Det är därför viktigt för en e-handelsaktör att bygga upp förtroende och tillit hos konsu-menten [31].

2.3.2

Faktorer som påverkar konsumentförtroende

Med konsumentförtroende avses i vilken utsträckning en konsument litar på en försäljande verksamhet att tillgodose konsumentens behov, upprätthålla löften och ta tillvara på konsu-mentens intresse. Nedanstående forskning som presenteras handlar specifikt om konsument-förtroende i kontexten av en konsuments interaktion med en försäljande aktör vid e-handel. Oliveira m.fl presenterar en modell för faktorer av konsumentförtroende som bygger på ti-digare forskning av Chen och Dylan [32] [31]. Chen och Dylans forskning identifierar tre dimensioner hos e-handelsaktören som har positiv effekt på konsumentförtroende:

• Kompetens (Competence) • Hederlighet (Integrity) • Välvilja (Benevolence)

Modellen som presenteras identifierar testbara faktorer som bygger upp meta-faktorer som visas bidra till de tidigare nämnda dimensionerna och i sin tur till övergripande konsument-förtroende och intention för kunden att köpa från e-handelsaktörer. Modellen illustreras i figur 2.1.

De tre meta-faktorer som identifieras är:

• Konsumentegenskaper (Consumer characteristics) • Företagsenskaper (Firms characteristics)

• Interaktioner (Interactions)

Konsumentegenskaperna täcker in konsumentens inställning till e-handel och konsumen-tens allmänna synsätt på förtroende, det vill säga hur trolig konsumenten är att lita på någon annan i en viss situation.

Företagsegenskaperna mäter konsumentens synsätt på företaget eller aktören bakom e-handelsapplikationen. Företagsegenskaperna är inte direkt relaterade till konsumentens upp-levelse under inköpstillfället, utan är baserade på tidigare erfarenhet och kännedom om före-taget som driver e-handelsaffären. Om en konsument har tidigare positiv erfarenhet av, eller kännedom om, företaget bakom e-handelsapplikationen är konsumenten troligare att känna förtroende för e-handelsapplikationen.

2.4. Metodteori

Table 1 Literature review.

Author Models used Dependent variable Constructs

TS ATOS CC REP BR FC L LIPS SQ CS INT C I B OT I (Kim, Ferrin, & Rao,

2008) Trust-based consumer decision-making m. Intention, Purchase X X (McKnight, Choudhury &Kacmar, 2002)

Trust building m. Intention to Follow, Intention to Share Personal Information, Intention to Purchase

X X X X

(Jones & Leonard, 2008) e C2C E-commerce trust X X X

(Palvia, 2009) TAM; TRA Trustworthiness of web vendor; Intention to Participate in

Exchange Relationship with Web Vendor

X X X X X X X X

(Gefen, 2000) e Purchase X

(Crespo & Mosque,

2010)

TPB Intention X

(Flavi!an Guinalau &

Gurrea, 2006)

e Trust X X

(Wang et al., 2007) TPB Behavioural Intention X

(George, 2004) TPB Internet purchasing X X X

(Lin, 2007) TAM; TPB Actual usage X X X

(Mansour, Kooli, &

Utama, 2014)

e Purchase Intention X X X X X

(Hsu et al., 2006) EDT; TPB Continuance Intention X X

(Vijayasarathy, 2004) TAM; TPB; TRA Intention X X X

(Hong & Cho, 2011) e Purchase Intention X X X X

(Teo & Liu, 2005) TRA Willingness to buy X X X

(Connolly & Bannister,

2007)

e Perceived Risk X X X X

(Lian & Lin, 2008) e Attitude towards Online Shopping X

(Grand!on et al., 2011) TPB; TRA Intention X

(Shih, 2004) TAM; TRA User Acceptance X X X

(Yee & Yeung, 2010) e Purchase likelihood X X X X

(Lin, 2007) SOR Purchase Intention X X X X

(Kassim & Abdullah,

2010)

e Customer Loyalty X

(Hassanein & Head,

2007)

TAM Attitude X

(Muylle, Moenaert, &

Despontin, 2004)

Website user satisfaction X

(Zviran, Glezer, & Avni,

2006)

User Satisfaction X

(Paravastu, Gefen, &

Creason, 2014)

EDT Satisfaction X X X

Note: Trust stance (TS); Attitude towards online shopping (ATOS); Consumer characteristics (CC); Reputation (REP), Brand recognition (BR); Firm Characteristics (FC); Likability (L); Lack of integrity, privacy and security (LIPS); Service quality (SQ); Customer satisfaction (CS); Interactions (INT); Competence (C); Integrity (I); Benevolence (B); Overall trust (OT); Intention to purchase (IP).

Website Infrastructure Consumer characteristics (CC) Firms characteristics (FC) Interactions (INT) Trust stance (TS)

Attitude towards online shopping (ATOS) Reputation (REP) Brand recognition (BR)

Likability (L) Lack of integrity, privacy

and security (LIPS)

Service quality (SQ) Customer satisfaction

(CS)

Competence (C)

Benevolence (B)

Overall trust (OT) Intention to purchase (IP) Integrity (I) Dimension of consumer trust H5a,b,c H3a,b,c H4a,b,c H1a,b,c H21a,b,c H6a,b,c H7 Legend

Second order construct First order construct

Fig. 1. Research model.

T. Oliveira et al. / Computers in Human Behavior 71 (2017) 153e164 155

Figur 2.1: Modell för faktorer gällande konsumentförtroende ( c Tiago Oliveira, används med tillstånd) [32]

Interaktionerna mäter de direkta upplevelserna som konsumenten har vid det specifika inköpstillfället och baseras på den upplevda kvalitén av applikationen och dess innehåll.

Studien är genomförd med hjälp av ett frågeformulär, med frågor baserad på tidiga-re forskning, för att undersöka de primära faktotidiga-rerna (i figutidiga-ren benämnda som first order construct). Frågorna mäter kvalitativa åsikter på en sjugradig skala från strongly disagree till strongly agree [32].

2.3.3

Trovärdighet i design

Kvaliteten av en e-butiks innehåll och navigerbarhet har visats ha stor betydelse när det kom-mer till trovärdighet och konsumentförtroende. Trovärdighet har också visats ha ett starkt samband med lojalitet vilket innebär att en e-butik med högt konsumentförtroende upp-muntrar till ett lojalt användande av tjänsten den tillhandahåller [33].

När det kommer till utnyttjandet av en ny eller för konsumenten okänd e-butik så spelar designen en avgörande roll för konsumentförtroende. För nya eller okända e-butiker så är ofta designen det enda verktyg som finns för att manifestera konsumentförtroende. Detta på grund av att nya e-butiker inte har en etablerad kundbas eller rykte. En förtroendeingivande design innebär att e-butiken är visuellt tilltalande samt lätt att använda. Bland dessa två fak-torer så har en visuellt tilltalande e-butik en högre sannolikhet att uppfattas som trovärdig än en e-butik som är lätt att använda [34].

2.4

Metodteori

I metodteorin presenteras de utvärderingsmetoder som studien använder sig av samt de mät-värden som kommer att användas för att undersöka navigerbarhet och tillförlitlighet.

2.4.1

Utvärdering av navigerbarhet

Användningen av länkar på en webbsida är ett oerhört kraftfullt verktyg för att tillåta använ-dare navigera fritt och sovra information utan att behöva läsa allting linjärt. Däremot är det inte alla webbsidor som uppnår sin fulla potential på grund av dålig implementering [35]. Begreppet lostness används för att mäta hur vilsen en användare är vid navigeringen på en hemsida. Att kunna mäta lostness är således instrumentellt när det kommer till att förbättra

2.4. Metodteori

och identifiera webbsidor med bristande navigerbarhet. En metod för att utvärdera naviger-barheten är med hjälp av Smiths L-formel [49, 35], [36]:

L= d  N S ´1 2 + R N´1 2 • L är lostness

• N är antalet unika noder som besöks under uppgiften

• S är det totala antalet noder som besöks under uppgiften, varje återbesök räknas • R är det minimala antalet noder som behöver besökas för att uppfylla uppgiften Med nod menas varje sida eller modal1. Användaren tilldelas en specifik uppgift, exem-pelvis navigera från nod A till nod B. Om användaren lyckas med denna uppgift genom att ta den snabbaste vägen erhålls värdet 0, perfekt navigerbarhet (då N=S=R). Enligt Smiths undersökningar så anses en användare vara vilsen om det erhållna värdet överstiger 0,42 [49]. Det går inte att använda lostness retroaktivt genom att enbart se hur användare navigerat på en sida utan att ha utfört en specifik uppgift. Dataloggar visar inte syftet med användarens navigering. Det är alltså nödvändigt att förse användaren med förutbestämda uppgifter [36]. Klick-analyseringsverktyg kan användas för att erhålla den data som uppstår då en an-vändare klickat på webbsidan. De flesta verktyg är webbaserade där alla har egna meka-nismer och skapar olika rapporter. Typen av verktyg som ska användas väljs baserat på de funktionaliteter som verktyget tillhandahåller. I enkla fall kan de klick och nodbesök som användaren gör manuellt observeras och räknas [37].

2.4.2

Analys av klick

Klick-analysering är en framväxande metod inom webbdesign, där grundtanken är att se hur en användare interagerar med webbsidan genom klick. Denna analysmetod kan bland annat användas för att ta fram underlag kring hur olika typer av användare skiljer sig åt, till exempel mobilanvändare och desktop-användare. Den data som erhålls kan även användas för att förbättra designen samt jämföra olika versioner av hemsidan genom A/B-testning [37]. Vid användning av ett webbaserat analysverktyg erhålls oftast en rapport som visar var och hur ofta en användare har klickat. Oavsett vilket verktyg som används är det viktigt att förstå vad som mäts och hur verktyget ska användas för att uppnå målet. Det är även den data som är relaterad till klicken som är intressant, exempelvis vad för typ av klick det är. Detta kan sedan användas för att jämföra olika versioner av webbapplikationen [37].

Resultat och observationer från tolkningen av data kan användas som grund till föränd-ringar av webbsidan. Testningen jämför olika ändföränd-ringar av originalversionen och studerar dess förbättringar samt försämringar. Det kan finnas ett antal olika sätt att förbättra webb-sidan, vilket innebär att flertalet tester kan genomföras där det bästa används för slutgiltig implementering [37]. Den data som samlats in saknar värde om den inte tolkas rätt och fak-tiskt appliceras på utvecklingen [38]. Slutligen väljs det mest lämpade testet och implemen-teras i originalwebbsidan. Ändringarna som genomförs kan leda till nya mål och processen fortsätter [37].

2.4.3

Användarcentrerad utveckling

Utvecklare har inte säkert en korrekt bild av hur applikationen kommer uppfattas av an-vändarna vilket, enligt Shaik och Pathan, bör tas i beaktande för att få högre kundnöjdhet

1_{En modal är en typ av dialogruta innehållande frågor eller information som användaren ska svara på eller}

2.4. Metodteori

[12]. Användarcentrerad utveckling är en metod som hjälper utvecklarna att identifiera des-sa meningsskiljaktigheter och är en metodik som definieras av att användarrepresentanter får utföra ett på förhand bestämt antal uppgifter, exempelvis att navigera från en del av sida till en annan. För att kunna få återkoppling av målgruppen och förbättra utvecklarnas förståelse för hur användarna upplever webbapplikationen är det essentiellt att de får vara delaktiga i utvecklingsprocessen [39].

Användartest

För att undersöka hur en applikation upplevs kan användartester utföras av potentiella an-vändare [12], [40]. Det blir således viktigt att de undersökningar som görs för att mäta upple-velsen utförs av riktiga användare. Metoderna som utvärderar användbarhet benämns Usa-bility Evaluation Methods (UEM). UEM är enligt Hwang och Salvendy nödvändiga för att se till att en mjukvaruprodukt tillfredsställer användaren [41].

Concurrent Think-Aloud Procedure

Concurrent Think-Aloud Procedure (CTAP) är en av de vanligaste UEM för att mäta användbar-heten [41]. Metoden går ut på att testpersonen använder ett system samtidigt som vederbö-rande tänker högt. Det handlar alltså om att testpersonen sätter ord på sina tankar samtidigt som denne rör sig igenom systemets gränssnitt. CTAP är billig, robust, flexibel och enkel att tillämpa [42].

Ericsson och Simon [43] rekommenderar att låta testpersonen öva på metoden innan upp-giften ges, så att den lär sig att ge sin fulla uppmärksamhet åt den givna uppupp-giften samtidigt som vederbörande uttrycker sina tankar [43].

För att den data som fås under testet ska vara bra och användbar krävs att metoden an-vänds korrekt. Det finns olika åsikter om vad som är det rätta sättet. Ericsson och Simon menar att testpersonen i regel ej ska störas eller kommuniceras med under testet. Det enda fallet då testledaren ska flika in är när testpersonen slutar att prata genom att säga “fort-sätt prata” eller liknande för att inte påverka användarens upplevelse [43]. Boren och Ramey menar att ett annat alternativ är att testledaren för en dialog med testpersonen på ett kontrol-lerat sätt för att i större grad få svar på de frågor som är av intresse [44]. Detta innebär dock att användarens upplevelse riskerar att påverkas vilket kan ha en inverkan på resultatet av undersökningen [43].

Retrospective Probing

Retrospective Probing är en UEM som utförs för att samla in data från deltagarna vid utfö-rande av en studie. Metoden går ut på att fråga användarna ett antal frågor gällande systemet precis efter de har utfört uppgifterna de var ombedda att göra. Svaren på frågorna som ställts visar på hur deltagarna har upplevt uppgiften eller systemet när de får tänka tillbaka på experimentet [45].

De frågor som ställs under användandet av Retrospective Probing kan antingen vara öpp-na eller sluten. Öppöpp-na frågor, meöpp-nar Birns och medarbetare [45], uppmuntrar användare att uttrycka sig fritt om systemet, medan slutna frågor ger ett kort och entydigt svar. Öppna frå-gor kan vara av karaktären vad tycker du mest om med applkationen?, medan slutna fråfrå-gor kan vara sådana som ger ett ja/nej som svar, eller svar som består av en siffra på en angiven skala [45].

Med metoden finns det en begränsning i hur mycket användaren kan komma ihåg, vil-ket gör att resultatet inte alltid blir korrekt. Vid reflektionen kring sina upplevelser riskerar användaren att utveckla nya tankar och teorier, vilket inte ger en korrekt förklaring av an-vändarens upplevelse under experimentet [45].

2.4. Metodteori

Deltagarmängd för användartestning

Vid utförande av användartestning finns det olika teorier angående om hur många deltagare som anses vara en lämplig mängd för att hitta en större del av bristerna av användbarhet i applikationen. Fem deltagare täcker 80 % av bristerna och det är därför ett vanligt antagande att detta är en god mängd [46]. Dock menar AlRoobaea och Mayhew på att det inte finns en lösning på det perfekta antalet deltagare i en användartestning. Beroende på vilken eva-lueringsmetod som används kommer bristerna upptäckas med olika sannolikheter. Vidare förklarar de att mängden deltagare i studien bör öka i förhållande till studiens komplexitet [47].

3

Metod

Följande stycke kommer att redogöra för tillvägagångssättet som användes för att undersöka frågeställningen. Arbetet bestod av tre delar: förstudie, utveckling och testning. Dessa delar tas upp var för sig.

3.1

Förstudie

Syftet med förstudien var att få fram det teoretiska samt funktionella ramverket för utveck-lingen av webbapplikationen. Förstudiens huvudsakliga mål var att undersöka marknadens behov samt arbeta fram en designprototyp av webbapplikationen.

3.1.1

Marknadsanalys

I syfte att undersöka marknadens behov gjordes en marknadsundersökning i form av en en-kät. Enkäten gjordes online med hjälp av ett webbformulär. Enkäten delades på sociala medi-er i olika gruppmedi-er med Linköpingsstudentmedi-er, samt till projektgruppens anhöriga; detta i syfte att rikta enkäten direkt till potentiella kunder samt för att få en stor spridning. Marknads-undersökningens huvudsakliga syfte var att undersöka marknadens intresse för Baljangåvan samt kartlägga preferenser. Svar togs in under sju dagar innan det sedan sammanställdes. Det var totalt 111 personer som deltog i undersökningen varav 76 % studenter och 24 % anhöriga till en student. 60 % av dem var män och 40 % kvinnor. Avståndet till Linköpings universitet för de som själva inte studerar där var för 33 % 0-10 kilometer, för 41 % 10-40 mil och för 26 % längre än 40 mil. Bland studenterna gick 4 % i årskurs 1, 9 % i årskurs 2, 60 % i årskurs 3, 19 % i årskurs 4, 5 % i årskurs 5 och 3 % gick i en annan årskurs. För att se hela sammanställningen, se appendix A.

3.2

Utveckling

Utvecklingen av webbapplikationen gjordes i enlighet med agila arbetsmetoder och bestod av tre iterationer. I slutet av varje iteration utfördes ett användartest som låg till grunden för en uppdaterad kravspecifikation av applikationen. Krav på funktionaliteter uppdaterades i syfte att förbättra webbapplikationens navigerbarhet, köpprocess och upplevda tillförlitlig-het.

3.3. Testning

Det grafiska gränssnittet av applikationen som körs på klienten utvecklades med CSS, Bootstrap, HTML och jQuery. Bootstrap och HTML användes för det visuella gränssnittet och jQuery användes för att göra detta interaktivt samt för att kommunicera med servern. Serversidan av webbapplikationen utvecklades med Python-ramverket Flask. Serverns da-tabas implementerades i SQLite med hjälp av SQLAlchemy och Flask. Jinja2 användes även frekvent för mindre kommunikation mellan front- och back-end.

Utvecklingen av back-end gjordes i början för att stödja utvecklingen av front-end, vilken sedan fokuserades på i huvudsak under utvecklingsprocessens senare skede. När tillräckligt med positiv feedback från användartesterna tillhandahållits lades fokus på att slutföra och förfina back-end-funktionaliteten.

Eftersom laddningstiden kan vara skälet till varför en användare väljer att avbryta ett köp, utvecklades webbapplikationen till en Single Page Application (SPA) [26], [28]. Detta resulte-rade i att webbapplikationens olika sidor saknade unika URL:er och att användaren därmed inte kunde navigera med hjälp av webbläsarens inbyggda navigationsknappar. För att åtgär-da problemet användes modulen page.js. Modulen implementerar funktionalitet som ladåtgär-dar lämpligt innehåll från servern, beroende på vilken resurs användarens webbläsare vill nå. Detta möjliggjorde inte bara navigation med webbläsarens inbyggda knappar, utan uppda-terade även addressfältet i användarens webbläsare, när denne navigerade på sidan. Detta ökar enligt teori navigerbarheten [21].

För att utveckla en webbapplikation med så effektiv köpprocess som möjligt har Three-Click-Rule använts som riktlinje arbetet igenom. På grund av kritiken som riktats mot meto-den ställdes inga krav på att implementera en köpprocess innehållande precis tre klick, utan istället lades fokus på att hålla köpprocessen så kort som möjlig [27].

3.3

Testning

Under projektet genomfördes tre tester —- ett efter varje iteration i utvecklingsprocessen av webbapplikationen. Varje test utfördes av en unik testgrupp bestående av fem personer. Fem personer valdes då det enligt teorin generellt ger ett heltäckande resultat [46]. Varje användar-test utfördes av en person i taget. Kriterierna för en användar-testare var initialt att personen studerar vid Linköpings universitet, har god kännedom om Baljan samt själva inte gör ett utveck-lingsprojekt med motsvarande kravspecifikation. Under det sista testet tilläts även testare som hade gjort ett liknande utvecklingsprojekt tidigare.

I varje test användes de olika testmetoderna CTAP och Retrospective Probing (se avsnitt 2.4.3 och 2.4.3). I enlighet med metodik för navigerbarhet mättes lostness (se avsnitt 2.4.1). CTAP användes för att få resultat som på förhand inte var förutsägbara samt ge förståelse för hur användare upplever webbapplikationen. För att, enligt teorin, ge ett omfattande re-sultat med CTAP fick användaren först träna på metoden genom att utföra ett enkelt sudoku och under processen träna på att berätta och beskriva dess tankar och upplevelser [43]. När användaren ansågs vara van vid metoden började testerna av webbapplikationen.

Användaren fick en på förhand bestämd uppgift som påbörjades vid ett givet läge i webb-applikationen. Exempelvis kunde en uppgift vara att ta reda på hur Baljangåvan fungerar och sedan genomföra ett köp av en produkt. För alla givna uppgifter se appendix C. Testledaren pratade endast för att uppmana användaren att fortsätta dela sina tankar och upplevelser, för att påverka testpersonen i minsta möjliga mån [44]. I enskilda fall hölls en dialog, i enlighet med Boren och Rameys [43] alternativ, mellan testledaren och testpersonen för att få djupare, och mer intressanta svar. Det testpersonen sa under testet skrevs ned och samlades in. Var an-vändaren klickade för att utföra uppgiften registrerades manuellt, både antalet unika noder och antalet besökta noder. Det minsta antalet noder som behövdes besökas för att utföra upp-giften beräknades på förhand. Detta gjordes för att mäta lostness och därmed kunna bedöma navigerbarheten i de olika processerna på sidan med ett kvantifierbart tal [37].

3.3. Testning

Retrospective Probing utfördes då användaren var klar med att utföra de givna uppgif-terna. Detta för att kunna bekräfta eller dementera hypoteser i utvecklingen samt samla in, mellan användartestarna, jämförbara resultat. I enlighet med frågeställningen var frågornas fokus navigerbarhet, förtroende samt köpprocessen. Frågorna som ställdes var både öppna och slutna, som enligt och kunde exempelvis lyda “Är du nöjd med betalningsmöjligheterna eller hade du velat ha fler alternativ?” och “På en skala från ett till sex: hur stort förtroende upplever du att Baljangåvan som organisation inger?”. För alla frågor som ställdes se ap-pendix C. Att ställa öppna frågor ger enligt Birns m.fl [45] reflekterande svar, medan slutna frågor ger korta och enkelt jämförbara svar.

Efter att testerna genomförts med en testgrupp sammanställdes och analyserades resulta-ten och nya mål sattes upp. Utifrån resultatet reviderades kraven för webbapplikationen för att förbättra sidans navigerbarhet och upplevda tillförlitlighet.

4

Resultat

Resultatet utifrån de olika parametrarna som undersöktes i studien presenteras nedan. I webbapplikationen presenteras bilder och kommentarer av webbapplikationens struktur och funktionalitet. Efterföljande avsnitt presenterar data från användartesterna där navigerbar-het, tillförlitlighet och köpprocessen låg i fokus.

4.1

Webbapplikation

Funktionaliteten i webbapplikationen har främst implementerats relaterad till rapportens frå-geställning. Denna applikation har sedan testats genom användartester där resultat har tagits fram för att besvara rapportens frågeställning. Dessa resultat presenteras i nästkommande underkapitel. Detta underkapitel avser att ge läsaren en förståelse av den utvecklade proto-typen och dess funktionalitet.

Applikationen, Baljangåvan, låter en användare köpa en gåva som sedan mottagaren får hämta på studentkaféet Baljan på Linköpings universitet. I webbapplikationen kan använ-daren, förutom att genomföra ett köp, även läsa på och få mer information om den fiktiva organisation som står bakom webbapplikationen (Figur 4.8), samt få information om en på-gående orders status (Figur 4.7).

Prototypen inkluderar även funktionalitet i form av ett administratörsgränssnitt till för att användas av personal i Baljan. Denna funktionalitet har dock inte utvecklats med syfte att besvara rapportens frågeställningar och kommer därför inte presenteras närmare i denna rapport.

En typisk köpprocess inkluderar sex stycken steg där användaren: 1. Kommer in på applikationens startsida (Figur 4.1)

2. Navigerar till sidan med gåvor (Figur 4.2)

3. Läser om en eller flera gåvor och dess innehåll (Figur 4.3)

4. Matar in beställarens och mottagarens personuppgifter (Figur 4.3) 5. Genomför betalningen (Figur 4.4, 4.5)

6. Får se en bekräftelse på beställningen, både via webbapplikationen men också via e-post. (Figur 4.6)

4.1. Webbapplikation

4.1.1

Startsida

Startsidan innehåller text och ikoner som övergripande förklarar webbapplikationens syfte och en intresseväckande videofilm på en kaffekopp som fylls på. Från startsidan kan använ-daren dels navigera via menyraden i toppen av sidan, och dels via länkarna i sidfoten. Båda dessa navigationskomponenter visas på de flesta övriga sidor i webbapplikationen.

Figur 4.1: Förstasida

4.1.2

Överblick av gåvor

Sidan med gåvor visar bilder på varje gåvopaket som Baljangåvan erbjuder, samt priset som en ikon i bildens högra överkant. När användaren för muspekaren över bilden visas namnet på gåvan och muspekaren indikerar för användaren att bilden är klickbar.

4.1. Webbapplikation

Figur 4.2: Överblick av gåvor

4.1.3

Sida för gåva och beställning

När användaren har klickat på en bild för en gåva visas en modal sida där mer information om gåvan presenteras. Här får användaren ta del av mer information om vad som ingår i gåvan, allergener samt att gåvan slås in i ett paket. Användaren har härifrån inte möjlighet att navigera via menyraden eller sidfoten då klick utanför modalen stänger stänger den.

Längre ned i den modala sidan finns också beställningsformuläret där användaren fyller i uppgifter om sig själv och mottagaren. Webbapplikationen använder således ingen form av varukorg utan är optimerad för att snabbt genomföra en beställning. Användaren väljer även här betalmetod och slutför sedan beställningen.

När beställningen är lagd så presenteras en orderbekräftelse för användaren för att visa för beställaren att ordern har mottagits. Orderbekreftelsen får beställaren även via mejl. Sam-tidigt som detta sker skickas även ett SMS till mottagaren som informerar mottagaren om att hen har en gåva att hämta ut i Baljan. Sms valdes utifrån marknadsundersökningen (se bilaga A. När gåvan sedan blir uthämtad av mottagaren så får beställaren en notifiering om detta via mejl.

4.1. Webbapplikation

Figur 4.3: Sida för gåva och beställning

4.1. Webbapplikation

Figur 4.5: Betalformulär med Swish

4.1. Webbapplikation

4.1.4

Status för en order

Sidan orderstatus ger användaren en möjlighet att söka upp sin order genom det ordernum-mer som är angivet i, bland annat, mejlet som skickas till användaren. På denna sida visas vilka steg som ordern har genomgått och vilka som kvarstår. Genom denna sida kan använ-daren spåra sin beställning och få information om vad som händer med ordern just nu.

Figur 4.7: Status för en order

4.1.5

Informationssidor och vanliga frågor

Användaren kan även få mer information om den fiktiva organisation som står bakom Baljan-gåvan och få svar på vanliga frågor genom dessa sidor.

4.1. Webbapplikation

4.1. Webbapplikation

4.1. Webbapplikation

4.1. Webbapplikation

Figur 4.11: Sidor med vanliga frågor

Prototypen har testats vid ett antal tillfällen under utvecklingsprocessen och resultaten av dessa tester har påverkat den vidare utvecklingen av applikationen. Ett exempel på en så-dan förändring är färgschemat och det allmänna grafiska utseendet. Vid de första användar-testerna såg sidan ut som figur 4.12 visar och som efter användartester kom att ändras till utseendet som presenteras i figur 4.2.

4.1. Webbapplikation

4.2. Navigerbarhet

Figur 4.13: Status för en order vid andra användartestet

4.2

Navigerbarhet

Resultatet från testerna som gäller navigerbarhet presenteras i respektive tabell nedan. Alla testare var mellan 20 och 30 år, där majoriteten studerade vid den tekniska fakulteten. I det första användartestet var fyra testare män och en kvinna, i det andra var tre män och två kvin-nor, och i det sista var fyra män och en kvinna. Resultatet från det första användartestet (se tabell 4.1) visar på ett genomsnittligt lostness på 0,10 samt att testpersonerna själva upplevde en genomsnittlig navigerbarhet på 5,1 på en skala från 1 till 6. Det andra användartestet (se tabell 4.2) gav ett genomsnittligt lostness på 0,10 samt att testpersonerna i genomsnitt själva bedömde navigerbarheten till 5,7. I det sista användartestet (se tabell 4.3) blev det genom-snittliga lostness 0,07 medan användarna själva i genomsnitt gav webbapplikationen 5,0 i navigerbarhet. Inga användare misslyckades med att genomföra testerna och inte heller vi-sar siffrorna att de var vilsna. Enligt Smith är användaren vilsen för värden över 0,42 [49].

4.2. Navigerbarhet

4.2.1

Testresultat navigerbarhet

Test 1

Testperson Lostness Upplevd navigerbarhet

1 0,17 5,0 2 0,00 5,5 3 0,00 4,0 4 0,17 6,0 5 0,17 5,0 Medelvärde 0,10 5,1

Tabell 4.1: Resultat av navigerbarhet från det första användartestet

Test 2

Testperson Lostness Upplevd navigerbarhet

1 0,00 6,0 2 0,00 5,0 3 0,00 6,0 4 0,28 6,0 5 0,22 5,5 Medelvärde 0,10 5,7

Tabell 4.2: Resultat av navigerbarhet från det andra användartestet

Test 3

Testperson Lostness Upplevd navigerbarhet

1 0,00 5,0 2 0,00 5,0 3 0,33 5,0 4 0,00 5,0 5 0,00 5,0 Medelvärde 0,07 5,0

Tabell 4.3: Resultat av navigerbarhet från det tredje användartestet

4.2.2

Övriga synpunkter från testpersoner

Under användartestarna kom det fram olika synpunkter som skulle kunna förbättra webb-applikationens navigerbarhet. För fullständiga kommentarer se appendix C.

Användartest 1

• Klickbara bilder som inte länkade någonstans

Det fanns bilder på hemsidan som indikerade att de var klickbara men som inte ledde testaren till en ny sida. Detta upplevdes förvirrande av en del testpersoner.

• Länkade genvägar

På vissa sidor tyckte testare att genvägar till andra delar av hemsidan hade kunnat implementeras.

• Direkt till köp via startsida

En del testare tyckte att gåvosidan borde ha gått att nå från startsidan på ett tydligare sätt än genom navigationsmenyn.

4.3. Tillförlitlighet

• Inte så tydliga textfärger

På en del länkar var kontrasten mellan bakgrundsfärgen och textfärgen låg vilket gjorde det svårläst.

• Direktlänk till gåvor

En del testare tyckte att det borde funnits fler sätt att navigera till gåvosidan från start-sidan utöver att använda navigationsmenyn.

• Oklarhet kring ordvalet “sök order”

Det framkom att formuleringen “sök order” kunde omformuleras till “orderstatus“.

Användartest 3

• Onödigt många klickningar för att få fram information

En del testare tyckte att det på guidesidan krävdes onödigt många klick för att få infor-mationen. Istället hade informationen kunnat visas direkt.

• Direktlänk till gåvor från startsida

En del testare tyckte att gåvosidan borde ha gått att nå från startsidan på ett tydligare sätt än genom navigationsmenyn.

• Bristfällig interaktivitet

Några testare tyckte att webbapplikationen kunde varit tydligare med att visa var an-vändaren kunde klicka.

4.3

Tillförlitlighet

Tabellen nedan visar resultaten för upplevd tillförlitlighet från användartesterna. Den tillfrå-gade fick gradera, från 1 till 6, hur förtroendeingivande vederbörande upplevde Baljangåvan som organisation. Medelvärdet av svaren räknades sedan ut efter varje test. Det första testet gav ett genomsnittligt värde på 4,8 i skalan, som sedan minskade till 4,6 vid det andra testet och tillslut ökade till 5,6 vid det tredje testet.

4.3.1

Tillförlitlighet

Tillförlitlighet

Testperson Test 1 Test 2 Test 3

1 3 4 6 2 6 3 6 3 5 6 6 4 6 5 6 5 4 5 4 Medelvärde 4,8 4,6 5,6

Tabell 4.4: Resultat för den upplevda tillförlitlighet från de tre användartesterna

4.3.2

Övriga synpunkter från testpersoner

Under användartestarna kom det fram olika synpunkter som skulle kunna förbättra webb-applikationens tillförlitlighet. För fullständiga kommentarer se appendix C.

Användartest 1

• Bekräftelse av betalningen

Vid det första testtillfället kom testpersonen till en blank sida efter att köpet genomförts, vilket det var flera som reagerade på och tyckte att en bekräftelsesida skulle visas.

4.4. Effektiv köpprocess

• Priset syntes inte innan valet av gåva gjordes

Vid gåvosidan fanns det inget sätt att se produktpriset förrän gåvan klickades på. Det gjorde det svårt att jämföra priserna mellan produkterna.

• Sidan såg inte så professionell ut

Oenhetliga typsnitt och färgkombinationer samt avsaknad av startsida gjorde att an-vändarna upplevde sidan som icke-professionell.

Användartest 2

• Sidfoten fungerade ej som förväntat

Sidfoten var inte korrekt implementerad vilket gjorde att den inte alltid befann sig längst ner på sidan. Detta ledde till att testpersoner upplevde att webbapplikationen var mindre tillförlitlig.

• Testare kände inte till betalmetoden Stripe

Som följd av att webbapplikationen inte beskrev vad betalsättet Stripe innebar, upplev-de testare att Baljangåvan ingav ett lägre förtroenupplev-de än vad som annars haupplev-de ingivits. • Simpel och oenhetlig design

Designen var oenhetlig sidor och väldigt simpel vilket testpersonerna tyckte drabbade Baljangåvans tillförlitlighet.

• Mer detaljerad ordersökning

Ordersökningssidan var inte enhetlig med resten av sidan. Det fanns även oklarheter kring vad sidan innebar då den benämndes som “sök order“.

Användartest 3

• Inlogg för att se tidigare ordrar saknas

Då webbapplikationen inte gav möjlighet för köpare att logga in på sidan kunde an-vändaren inte se en historik över sina tidigare ordrar.

• En logga för Baljan saknas

Testpersoner upplevde att sidan hade ingivit större förtroende om Baljans logga hade visats på sidan.

4.4

Effektiv köpprocess

Webbapplikationen vid varje testtillfälle definierar en version. Nedan visas de steg som kräv-des för att genomföra ett köp på kortast möjliga sätt för de tre versionerna. Baserat på 2.4.2 valdes data för varje klick att delas in i klick för att navigera (klick), klick som behövdes för att genomföra en inmatning (inmatning) och klick som innefattade en avvägning (beslut).

De olika parametrarna definieras som följande; ett klick är när en användare klickar på en länk eller en knapp, en inmatning är när användaren fyller i ett inmatningsfält som inte genererar ett klick och ett beslut är när användaren gör ett val. Alla dessa behöver utföras för att fortsätta köpprocessen. De klick som krävdes var för att ta sig till produktsidan, välja produkt, gå vidare till betalning samt betala. Dessa var samma i alla versioner. Även anta-let beslut som användaren behöver fatta var lika många i varje version. Beslutens karaktär skiljde sig dock åt. Att Swish fanns som betalmetod i sista versionen gav ett nytt beslut för användaren. Detta hade gett tre beslut vid kortbetalning men genom att ta bort funktionen att spara kortuppgifter förblev antalet beslut i köpprocessen två stycken. Textinmatningarna krävdes för att applikationen skulle hämta in tillräcklig information av köparen och vilken in-formation som krävdes skiljde sig något mellan versionerna. Totalt antal textinmatningar var som lägst vid det sista testet om betalningsmetoden Swish valdes (sex inmatningar), medan den var högre i övriga fall. Med hänsyn till de tre parametrarna var det betalning med Swish

4.4. Effektiv köpprocess

vid test 3 som gav minst antal klick, inmatningar och beslut och därför den mest effektiva köpprocessen.

Version 1

1. Klicka på produkter.

2. Välja en produkt genom att klicka på den.

3. Mata in avsändarens namn, mottagarens mobilnummer samt meddelande. 4. Klicka på “Pay with card“.

5. Mata in avsändarens e-postadress, kortnummer, utgångsmånad för kort och CVC-kod. 6. Välj om uppgifterna ska kommas ihåg genom att klicka i en ruta, annars behålls de ej. 7. Klicka på “Betala“.

Version 1

Antal klick 4

Antal inmatningar 7

Antal beslut 2

Tabell 4.5: Köpprocessen i version 1

Version 2

1. Klicka på gåvor.

2. Välj en gåva genom att klicka på den.

3. Mata in avsändarens namn, mottagarens namn, mottagarens mobilnummer samt med-delande.

4. Klicka på “Betala med kort“.

5. Mata in avsändarens e-postadress, kortnummer, utgångsmånad för kort och CVC-kod. 6. Välj om uppgifterna ska kommas ihåg genom att klicka i en ruta, annars behålls de ej. 7. Klicka på “Betala“.

Version 2

Antal klick 4

Antal inmatningar 8

Antal beslut 2

Tabell 4.6: Köpprocessen i version 2

Version 3

1. Klicka på gåvor.