Navigerbarhet och tillförlitlighet i en webbhandelsapplikation för vinylskivor

(1)

Linköpings universitet

Institutionen för datavetenskap

Civilingenjörsprogrammet - Industriell Ekonomi

Examensarbete på grundnivå

18 hp | VT 2021

LIU-IDA/LITH-EX-G–21/013–SE

Navigerbarhet och tillförlitlighet i en

webbhandelsapplikation för

vinylskivor

Navigability and trust in an E-commerce

application for vinyl records

Ludvig Ehrenpreis Hjalmar Gustafsson Lucas Hultqvist Simon Karlsson Axel Mannerson Erik Parö David Råsberg

Examinator: Aseel Berglund

Handledare: Jesper Jonsson

(2)

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än-digheter 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 doku-mentet kräver upphovsmannens medgivande. För att garantera äktheten, säkerheten och tillgängligheten finns lösningar av teknisk och administrativ art. Upphovsman-nens 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 samman-hang 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 https://ep.liu.se/ .

(3)

Copyright

The publishers will keep this document online on the Internet – or its possible replace-ment – 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 download, 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 adminis-trative 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: https://ep.liu.se/. © 2021 Ludvig Ehrenpreis Hjalmar Gustafsson Lucas Hultqvist Simon Karlsson Axel Mannerson Erik Parö David Råsberg

(4)

Abstract

Today’s consumers increasingly choose subscription services, especially online. Despite this there is a relatively small amount of published theory on the subject of how you develop such a service with the aim of making it navigable and trustworthy. For this reason, it was examined how a subscription service of vinyl records could be developed with these qualities. The results in regard to navigability showed that clarity of links in the web application and a linear page structure had a particularly positive effect. The results as regards to trustworthiness was obtained through a survey where the respondents answered to how trustworthy they considered the web application to be based on pictures from different versions. The survey showed that the web application, in order to be trustworthy, should be implemented with an aesthetically pleasing design in the forms of well thought out colour choices of background and text, without adverts, with symmetrical content as well as with distinct differences in font size between headers and body text. Furthermore, it should be implemented without mistakes such as spelling errors and pictures that fail to load. The content of a web application in form of a subscription service of vinyl records should be relevant for the customer, but the result showed the content aspect did not affect the experienced trustworthiness to the same extent as designs and mistakes.

(5)

Sammanfattning

Dagens konsumenter använder sig allt mer av prenumerationstjänster, framför allt på in-ternet. Trots detta finns det relativt lite publicerad teori för hur en sådan tjänst kan utvecklas med målen att den ska vara navigerbar och tillförlitlig. Med anledning av detta undersöktes hur en webbapplikation för prenumerationstjänster av vinylskivor kan utfor-mas med dessa kvalitéer. För resultatet gällande navigerbarhet visade det sig att tydlighet av länkar i webbapplikationen och en linjär sidstruktur har en särskilt positiv effekt. Re-sultatet vad gäller tillförlitlighet erhölls genom en enkätundersökning där respondenterna besvarade hur tillförlitlig de ansåg webbapplikationen att vara baserat på bilder från olika versioner av den. Enkätundersökningen visade att webbapplikationen, för att vara tillför-litlig, bör implementeras med estetiskt tilltalande design i form av genomtänkta färgval av bakgrunder och text, utan annonser, med symmetriskt innehåll samt distinkta skillnader i textstorlek mellan rubriker och brödtext. Vidare bör den implementeras utan misstag som språkliga fel samt bilder som ej laddas in. Innehållet på en webbapplikation i form av en prenumerationstjänst av vinylskivor bör vara relevant för kunden, men resultatet visade att innehållsaspekten inte påverkade den upplevda tillförlitligheten i samma utsträckning som design och misstag.

(6)

Innehåll

Upphovsrätt i Copyright ii Abstract iii Sammanfattning iv Figurförteckning vii Tabellförteckning x Ordlista xi 1 Inledning 1 1.1 Motivering . . . 1 1.2 Syfte . . . 2 1.3 Frågeställning . . . 2 1.4 Avgränsningar . . . 2 2 Teori 3 2.1 E-handel . . . 3 2.2 Navigerbarhet . . . 4

2.2.1 Tydlighet i vart länkar går . . . 5

2.2.2 Tydlighet i var användaren befinner sig . . . 5

2.2.3 Logisk sidstruktur . . . 5

2.2.4 Site maps . . . 6

2.2.5 Navigationsmeny (Navbar) . . . 7

2.3 Tillförlitlighet . . . 7

(7)

2.3.2 Betydelsen av hög användbarhet . . . 8

2.3.3 Estetisk tilltalande design . . . 9

2.3.4 Tre kritiska tidpunkter . . . 9

2.3.5 Humanisera webbapplikationen . . . 10 2.4 Metodteori . . . 11 2.4.1 Användartester . . . 11 2.4.2 Enkätmetodik . . . 13 3 Metod 15 3.1 Förstudie - Marknadsföring . . . 15 3.2 Implementation . . . 16 3.2.1 Front-end . . . 16 3.2.2 Back-end . . . 16 3.3 Utvärdering. . . 17 3.3.1 Användartester . . . 17 3.3.2 Enkätundersökning . . . 19 4 Resultat 23 4.1 Förstudie . . . 23 4.2 Implementation . . . 27

4.2.1 Navigationsmeny och sidfot . . . 27

4.2.2 Startsidan . . . 27 4.2.3 Skapandet av en prenumeration . . . 28 4.2.4 Orderbekräftelse . . . 30 4.2.5 Om oss . . . 31 4.2.6 Vanliga frågor . . . 31 4.2.7 Min profil . . . 32 4.2.8 Logisk sidstruktur . . . 33 4.3 Utvärdering. . . 34 4.3.1 Användartest . . . 34 4.3.2 Enkätundersökning . . . 42 4.4 Teknisk Beskrivning . . . 53 5 Diskussion 55 5.1 Resultat . . . 55 5.1.1 Förstudie . . . 55 5.1.2 Användartest . . . 56 5.1.3 Navigerbarhet . . . 57

(8)

5.1.4 Tillförlitlighet . . . 58

5.2 Metod . . . 62

5.2.1 Användartester . . . 62

5.2.2 Enkätundersökning . . . 64

5.2.3 Källkritik . . . 65

5.3 Arbetet i vidare sammanhang . . . 66

5.3.1 Teknisk påverkan . . . 66

5.3.2 Samhällspåverkan och etiska överväganden . . . 66

6 Slutsats 67

Litteraturförteckning 69

A Marknadsföringsplan 74

B Enkätundersökning förstudie 89

C Vilsenhet för alla användare under användartesten 97 D Enkätundersökning DisQover: Undersöka tillförlitlighet 99

(9)

Figurer

2.1 Modell över prenumerationstjänster [6] . . . 4

2.2 Exempel på hierarkisk struktur . . . 6

2.3 Exempel på linjär struktur. . . 6

2.4 Exempel på hybridstruktur . . . 6

2.5 Exempel på navigationsmeny med flikar . . . 7

2.6 Exempel på navigationsmeny längst upp på sidan. . . 7

3.1 Kronologisk ordning av utförandet av metoden. . . 15

4.1 Vad är din huvudsakliga sysselsättning? . . . 23

4.2 När du lyssnar på musik, händer det då att du lyssnar på vinyl? . . . 24

4.3 Skulle du vara intresserad av en prenumerationstjänst av vinylskivor? . . . 24

4.4 Skulle du vara intresserad av en prenumerationstjänst av vinylskivor? (en-bart målgruppen) . . . 25

4.5 Om du hade en tjänst som denna, vilka typer av kategorier skulle du vilja kunna välja emellan?. . . 25

4.6 Oavsett om du är intresserad av tjänsten eller ej, vilken eller vilka faktorer anser du vara viktigast för en liknande tjänst? . . . 26

4.7 Om du är intresserad av tjänsten, vad hade du varit intresserad av att kunna köpa som tillval? . . . 26

4.8 Navigationsmeny. . . 27

4.9 Sidfot. . . 27

4.10 DisQovers startsida. . . 28

4.11 Val av prenumeration. . . 29

4.12 Val av musikpreferens. . . 29

4.13 Skapandet av personlig profil. . . 30

4.14 Mejlet som skickas till kunden vid skapandet av en prenumeration.. . . 30

4.15 Sidan ”Om oss”. . . 31

(10)

4.17 Sidan ”Min profil” under fliken ”Prenumeration”. . . 33

4.18 Webbapplikationens logiska sidstruktur. . . 34

4.19 Startsidan utan inloggad användare vid användartest 1. . . 35

4.20 Startsidan med inloggad användare vid användartest 1. . . 35

4.21 ”Pågående prenumeration”-flik i ”Min Profil”-vyn vid användartest 1. . . 36

4.22 ”Personuppgifter”-flik i ”Min Profil”-vyn vid användartest 1 . . . 36

4.23 Genomsnitt av användarnas vilsenhet under användartest 1. . . 37

4.24 Startsidan med inloggad användare ”David” vid användartest 2. . . 38

4.25 ”Hur fungerar det?”-vyn vid användartest 2. . . 39

4.26 ”Pågående prenumeration”-flik i ”Min Profil”-vyn vid användartest 2. . . 39

4.29 Bild 1, manipulerad bild . . . 42

4.30 Bild 2, originalbild . . . 42

4.31 Skillnad i tillförlitlighet mellan Bild 1 och Bild 2. (1 = Inte alls tillförlitlig, 5 = Mycket tillförlitlig) . . . 43

4.38 Vilka aspekter de tillfrågade tyckte påverkade estetiken mest. . . 46

(11)

4.51 Hur annonser på en webbshop påverkar tillförlitligheten. (1 = Påverkar ne-gativt, 3 = Ingen påverkan, 5 = Påverkar positivt) . . . 52

4.52 Vad de tillfrågade tyckte påverkade tillförlitligheten mest. . . 52

E.1 Sidan ”Min profil” under fliken ”Personuppgifter”. . . 122

E.2 Sidan ”Min profil” under fliken ”Orderhistorik”. . . 123

E.3 Sidan ”Min profil” under fliken ”Mina mottagna skivor”. . . 124

E.4 Administratörsidan under fliken ”Prenumeration”. . . 125

E.5 Administratörsidan under fliken ”Kunduppgifter”. . . 126

E.6 Administratörsidan under fliken ”Skicka skivor”. . . 127

(12)

Tabeller

1 Ordlista . . . 1

4.1 Utfall av estetik för bildpar 1 . . . 42

4.4 Resultat av upplevd tillförlitlighet för bildparen i enkätundersökningen . . . 53

C.1 Vilsenhet för användare under användartest 1. . . 97

C.2 Vilsenhet för användare under användartest 2. . . 97

(13)

1

Ordlista

Ord Förklaring

AJAX Asynchronous JavaScript And XML CSS Cascading Style Sheets

CTA Concurrent Think Aloud

Flask Ett mikroweb-ramverk skrivet i Python HTML HyperText Markup Language

jQuery Ett JavaScript-bibliotek JSON JavaScript Object Notation

RP Retrospective Probing (engelska), retrospektiv sondering (svenska) RTA Retrospecitve Think Aloud

Server Ett datorsystem som betjänar andra system SQL Structured Query Language

Stripe En betalningslösning

(14)

Kapitel

1

Inledning

I inledningen motiveras varför det är intressant att undersöka navigerbarhet och tillförlit-lighet för en webbhandelsapplikation för vinylskivor. Vidare beskrivs syftet med arbetet, frågeställningen bestäms och avgränsningarna för rapporten fastställs.

1.1 Motivering

Ökad tillgänglighet och användning av internet har lett till att fler företag väljer att sälja varor och tjänster online. Trenden är tydlig på flera håll i Europa och Sverige är ett av de länder där e-handeln är som mest utbredd1_{. I Riksbankens enkätundersökning om svenska}

folkets betalningsvanor 2020 svarade 66 % av de tillfrågade att de handlat varor eller tjänster på internet de senaste 30 dagarna vilket motsvarar en ökning på drygt 18 % från bara två år tidigare2_{. Detta gör det tydligt att e-handeln är kvar för att stanna och att}

företags närvaro på internet blir allt viktigare för att uppnå framgång.

Den nödvändiga infrastrukturen för att stödja e-handel är idag utbredd och företag har istället börjat rikta sin uppmärksamhet till de psykologiska faktorer som kan påverka hur väl en vara eller tjänst säljer. En av de faktorerna är tillförlitlighet och den har varit grundläggande för affärer sedan den mänskliga historiens begynnelse [1]. En metaanalys utförd av K. Yeolib & P. Robert [2] visar att en webbapplikations upplevda tillförlitlighet har en stark påverkan på kundens intentioner att slutföra ett köp och sannolikheten för återbesök.

Även navigerbarhet är en viktig faktor att ta hänsyn till vid utvecklandet av en e-butik. En navigerbar hemsida leder till att besökaren känner sig trygg och medför en större sannolikhet att ett köp slutförs [3]. Trots tydliga incitament att utveckla hemsidor som är navigerbara och upplevs tillförlitliga visar en global undersökning utförd av CIGI-Ipsos [4] att det är många företag som misslyckas med detta.

1_{SCB, E-handel allt viktigare för svenska företag,}

https://www.scb.se/hitta-statistik/artiklar/2017/E-handel-allt-viktigare-for-svenska-foretag/ (Hämtad 2021-03-29)

2_{Sveriges Riksbank, E-handeln blir allt viktigare,}

https://www.riksbank.se/sv/betalningar–kontanter/sa-betalar-svenskarna/sa-betalar-svenskarna-2020/1.-betalningsmarknaden-digitaliseras/kontanterna-tappar-mark/ (Hämtad 2021-03-29)

(15)

2 Kapitel 1. Inledning

Med utgångspunkt i ovannämnda resonemang undersöktes hur en webbapplikation i form av en e-butik kan utvecklas för att inge tillförlitlighet hos dess användare och vara na-vigerbar. En webbapplikation utvecklades som tillhandahåller prenumerationstjänster för vinylskivor då en sådan webbapplikation anses uppfylla kravet att kunna mätas utifrån aspekterna tillförlitlighet och navigerbarhet. Tillförlitligheten för webbapplikationen hop-pades bli högre eftersom just en prenumerationstjänst skahop-pades. Enligt en studie av Woo & Ramkumar [5] var tillförlitligheten till en e-butik högre hos dem som prenumererade på tjänsten än hos dem som ej var prenumeranter. Prenumerationer på just vinylskivor valdes eftersom det i marknadsföringsplanen A konstateras att affärsidén inte är vidare etablerad. Därmed saknas sannolikt en bredare uppfattning om webbapplikationen ur ovannämnda aspekter. Detta medför att mätningarna av tillförlitlighet och navigerbarhet inte bör på-verkas av tidigare erfarenheter från liknande webbapplikationer.

1.2 Syfte

Syftet med arbetet är således att undersöka hur en webbapplikation i form av en e-butik för prenumerationer av vinylskivor kan utvecklas och designas så den är är enkel att navigera och dess utformning inger tillförlitlighet.

1.3 Frågeställning

Arbetet utförs med intentionen att besvara frågeställningen:

Hur kan en webbapplikation för en prenumerationstjänst av vinylskivor utformas för att den ska vara enkel att navigera i samt generera en känsla av tillförlitlighet?

1.4 Avgränsningar

Följande avgränsningar syftar till att begränsa arbetet till dess väsentliga delar. Detta för att rapportens fokus, i enlighet med frågeställningen, hamnar på de faktorer som påverkar e-butikens tillförlitlighet och navigerbarhet.

Affärsidéns målgrupp är vinyllyssnare i Sverige som har en hög disponibel inkomst. Då denna grupp inte faller inom ett tydligt spektrum avseende kön, ålder och internetvana har arbetet utgått från en diversifierad målgrupp vid utvecklingen av webbapplikationen. Användares upplevelse av den aktuella e-butiken bedöms genom tre användartester samt en enkätundersökning där samtliga testpersoner respektive respondenter är bosatta i Sverige och talar svenska. Vidare fokuserar rapporten på e-butikens utformning, och utvärdering av den, snarare än affärsidén. Avgränsningar till vilka mätverktyg och parametrar som används tas upp i delkapitel 2.4.1 Användartester.

(16)

Kapitel

2

Teori

Detta kapitel ämnar presentera teori relevant för att besvara frågeställningen. Fokus för kapitlet ligger på att presentera teori för tillförlitlighet och navigerbarhet eftersom fråge-ställningen berör dessa områden. Även teori gällande e-handel samt prenumerationstjänster presenteras. Teori som ligger till grund för arbetets metod presenteras i avsnittet metod-teori.

2.1 E-handel

E-handelns utbredning i Sverige har ökat det senaste årtiondet1_{. I en studie utförd av}

Internetstiftelsen2 _{svarade 92 % av de tillfrågade att de handlat något via internet år 2019}

jämfört med 82 % år 2018. Vidare har coronapandemin lett till att var femte svensk vill e-handla i högre utsträckning efter pandemin2_.

Bichof et al. [6] menar att en modell för e-handel är prenumerationstjänster, där konsu-menten istället för att köpa en produkt betalar för att få använda en viss tjänst eller få en produkt regelbundet. I detta kapitel kommer prenumerationstjänster referera till regel-bunden leverans av en produkt. Bichof et al. [6] hävdar att prenumerationstjänster kan delas upp i kategorierna förbestämda produkter och överraskningar. Om produkten är en överraskningen finns risken att kunden får en produkt som denne inte vill ha [6]. Vidare skiljer också Bichof et al. på prenumerationstjänster som är generella och prenumeratio-nentjänster som bygger på personlig preferens. Detta leder till att prenumerationstjänster kan positioneras enligt modellen i figur 2.1.

För att minska risken att kunden blir missnöjd med tjänsten om denne får en produkt som är oönskad är gratis retur ett bra alternativ [6]. Även förmedling av att tjänsten kan anpassas efter varje enskild kund leder till att kunden känner mindre risk med tjänsten [6]. Bichof et al. [6] menar även att minskning av risk kan åstadkommas genom att meddela innehållet i nästkommande leverans en tid innan leverans så kunden kan säkerställa att

1_{Internetstiftelsen, Svenskarna och internet 2018,}

https://internetstiftelsen.se/docs/Svenskarna_och_inter-net_2018.pdf (Hämtad 2021-03-29)

2_{Internetstiftelsen, Svenskarna och internet 2020,}

(17)

4 Kapitel 2. Teori

leveransen är önskad. Detta kan även öka förväntan hos kunden [6].

Figur (2.1): Modell över prenumerationstjänster [6]

Prenumeration av produkter är på uppgång. Från 2013 till 2018 ökade försäljningen av dessa prenumerationer med 100 % och allt fler företag som säljer direkt till kund väljer att erbjuda ett prenumerationsalternativ [7]. Andonova et al. [7] förklarar att antalet företag som erbjuder en tjänst för prenumeration av produkter överstiger 7000 vilket innebär att det är en hårt konkurrensutsatt marknad.

2.2 Navigerbarhet

Navigerbarhet syftar till att en hemsida är enkel att använda i den mening att det är simpelt att hitta sökt information på sidan [3]. Navigerbarhet kan också beskrivas som att minimera antalet klick till den eftertraktade datan [3]. God navigerbarhet är central i användbarheten av en hemsida [8]. Brist på navigerbarhet kan bidra till att användaren känner sig borttappad och desorienterad [9] vilket ofta leder till att de lämnar sidan [8]. Det råder hög konkurrens för prenumerationstjänster av produkter bland e-handelsföretag [7]. Vid hög konkurrens är det viktigt att differentiera sig från konkurrenterna [10]. Kom-modifiering gör det svårt för företag och framförallt e-handelsföretag att differentiera sig genom pris och produkt [10]. Det är därför av vikt för dessa företag att hitta ett annat sätt att differentiera sig. Genom att skapa en hemsida för e-handel med god navigerbar-het ökar användarens känsla av tryggnavigerbar-het vilket leder till en ökad sannoliknavigerbar-het för köp [3]. Det motsatta stämmer också, e-handelshemsidor som är svåra att navigera kan få kunden att bli missnöjd och köp att utebli [11]. För att uppnå en webbappliaktion som upplevs enkel och navigerbar menar Cao, Zhang & Seydal [12] att utvecklarna av webbapplikatio-nen kan använda sig av diverse navigationshjälpmedel som underlättar för användaren vid navigering. I detta kapitel kommer flera navigationshjälpmedel presenteras.

Wojdynksi & Kalyanaraman [13] tar upp tre dimensioner som påverkar en hemsidas navi-gerbarhet. De är följande:

(18)

2.2. Navigerbarhet 5

• Tydlighet i var användaren befinner sig • Logisk sidstruktur

2.2.1 Tydlighet i vart länkar går

För att uppnå tydlighet i länkar är det viktigt att användandet av länkar är effektivt [13]. Det kan skapas genom att länkordet är tydligt korrelerat med den information som ges när länken används. Det är också viktigt att länkar presenteras på ett tydligt sätt så användaren förstår vad som är klickbart [14]. Detta kan göras grafiskt genom att ge knappen en upphöjd design eller göra länken understruken.

2.2.2 Tydlighet i var användaren befinner sig

Det är också viktigt att användaren vet var i hemsidans struktur den befinner sig [13]. För att uppnå detta kan flertalet navigationshjälpmedel användas [12]. Hudson et al. [15] menar att site maps kan användas för att hjälpa användaren förstå layouten på webbap-plikationen och Robbins & Stylianou [16] hävdar att en permanent navigationsmeny kan hjälpa användaren att inte känna sig desorienterad.

Ett annat hjälpmedel för att informera användaren var den befinner sig är genom att använda breadcrumbs. Breadcrumbs innebär att det med text visas var i hemsidestrukturen användaren befinner sig i nuläget samt vilken väg användaren har tagit dit [17]. Detta gör det lätt för användaren att återvända till en tidigare nivå i hierarkin om denne gått fel [18]. Användningen av detta har blivit vanligt på kommersiella hemsidor och det har visats att det ger en positiv effekt för navigerbarheten [18]. Det finns även en modifikation av breadcrumbs där användaren visas vilka sidor som är åtkomliga framåt från den nuvarande sidan [17]. Blustein, Ahmed & Instone [17] menar att denna variant är väldigt användbar och uppskattad när användaren lärt sig hur konceptet fungerar.

2.2.3 Logisk sidstruktur

Logisk sidstruktur innebär att webbapplikationens olika vyer kategoriseras som noder och vägen mellan noderna kategoriseras som länkar vilket betyder att hela sidan bildar ett nätverk av noder och länkar [14]. Denna struktur kallas för informationsstruktur och är viktig sett från ett utvecklarperspektiv för att ge struktur både för webbapplikationen och för användaren [14]. Hierarkisk-, linjär- och hybridstrukur beskrivs nedan.

2.2.3.1 Hierarkisk struktur

Farkas & Farkas [14] menar att den vanligaste strukturen är den hierarkiska eftersom människor naturligt delar in sin värld kategorisk med underkategorier. I denna kategori visas länkar för större teman inledningsvis och för att hitta den sökta informationen måste användaren klicka sig neråt i hierarkin [19]. Hur detta kan utformas logiskt ses i figur 2.2 Utformningen och effektiviteten av strukturen beror på bredden och djupet av strukturen.

(19)

6 Kapitel 2. Teori

Larson & Czerwinski [20] visade att ökat djup i strukturen leder till att det blir svårare att hitta sökt information. För att få en effektiv hierarkisk struktur bör webbapplikationen utvecklas med balans mellan djupet och bredden [14]. Farkas & Farkas [14] menar även att små webbapplikationer med få noder och länkar är lättare att strukturera än stora hemsidor.

Figur (2.2): Exempel på hierarkisk struktur

2.2.3.2 Linjär struktur

Linjärstruktur eller tunnelstruktur som det också kallas innebär att användaren följer en redan bestämd väg och går från vy till vy. Den logiska strukturen visas i figur 2.3. Struktu-ren är vanlig vid e-handel där kunden följer ett antal steg från val av produkt till betalning [19]. Landley et al. [21] har visat att denna metod tar bort all onödig information och låter användaren endast fokusera på en uppgift, exempelvis en betalningsprocess.

Figur (2.3): Exempel på linjär struktur

2.2.3.3 Hybridstruktur

En kombination av flera av dessa strukturer är också möjlig. Med detta tillvägagångssätt kan webbapplikationen utvecklas så att olika delar av webbapplikationen har olika egenska-per [19]. Den hierarkiska strukturen, som är intuitiv att ta till sig [14], kan kombineras med linjära attribut som passar till en e-handel [19]. Ett exempel på hur detta kan utformas illustreras i figur 2.4.

Figur (2.4): Exempel på hybridstruktur

2.2.4 Site maps

Site maps är ett diagram som visar strukturen över hemsidan [22]. Newman & Landley [22] menade i en studie år 2000 att site maps primärt används internt för utvecklare av

(20)

2.3. Tillförlitlighet 7

hemsidan. Senare har site maps fått ett nytt användningsområde och det används idag för att underlätta för sökmotorer att hitta information på hemsidor [23]. Vaucher & Sahraoui [24] anser att det är viktigt från ett navigerbarhetsperspektiv eftersom sökmotorer då kan hitta information som inte är direkt länkade.

2.2.5 Navigationsmeny (Navbar)

En navgationsmeny tillåter användaren att snabbt byta mellan olika vyer på hemsidan. Denna permanenta meny tillåter användaren att förflytta sig var som helst på sidan oav-sett var användaren befinner sig vilket ökar navigerbarheten [24]. En studie av Burrell & Sodan [25] jämför olika typer av navigationsmenyer. Målet med studien var att med vetenskapliga metoder visa vilken typ av navigationsmeny som föredrogs av användare. Burrell & Sodan ansåg att studien behövdes för att förse utvecklare med testade och veri-fierade riktlinjer angående intuitiv navigation [25]. Studiens resultat visade att det fanns en signifikant skillnad mellan olika placeringar och utföranden av navigationsmenyn [25]. Vidare tyckte användare generellt att en navigationsmeny med flikar, illustrerad i figur 2.5, placerad i hemsidans sidhuvud var enklast att använda. Användare föredrog även att använda en enkel navigationsmeny i hemsidans sidhuvud, en så kallad top navigation bar [25], illustrerad i figur 2.6. Vidare insåg Burell & Sodan [25] att användare tyckte att de två navigationsmenyerna var nästan lika bra, men betydligt bättre än andra alternativ.

Figur (2.5): Exempel på navigationsmeny med flikar

Figur (2.6): Exempel på navigationsmeny längst upp på sidan

2.3 Tillförlitlighet

För att undersöka frågeställningen kommer detta delkapitel presentera teori gällande till-förlitlighet på internet och inom e-handel.

Deutsch [26] definierar tillförlit på följande sätt:

En individ kan sägas ha tillförlit i att en händelse sker om hen förväntar sig dess skeende och hens förväntan leder till ett beteende i vilket hen uppfattar ha större negativa motiverande konsekvenser om hens förväntningar inte sker än positiva motiverande konsekvenser om hens förväntningar sker.

Deutsch menar att tillförlit och risk är två sidor av samma mynt.

Anledningen till varför det är viktigt att en besökare känner hög tillförlitlighet till web-bapplikationen den besöker är på grund av de risker som finns med e-handel. Enligt J.

(21)

8 Kapitel 2. Teori

Riegelsberger & A. Sasse [27] finns det de riskerna som härstammar från internet generellt; om kreditkortsuppgifterna fångas upp, om uppgifterna överförs korrekt och om dess egna interaktioner med systemet är korrekta. Riegelsberger & Sasse [27] menar vidare att det även finns de risker som är relaterade till e-butikens fysiska frånvaro; kommer e-handlaren över huvud taget leverera produkten eller tjänsten, kommer de personuppgifter kunden till-handahåller att hamna hos någon tredje part. Woo & Ramkumar [5] styrker även vikten av tillförlit i deras rapport där de undersöker vilka faktorer som är viktiga vid skapandet av en prenumerationstjänst, i deras fall en prenumerationstjänst för mode och skönhet. Resultatet från deras arbete visade att bland den grupp som prenumererade på tjänsten så var tillförliten till e-butiken högre än bland den grupp som inte prenumererade på tjänsten.

2.3.1 Svagheter i presentationen

Enligt A. Everard & D.F. Galetta [28] kan svagheter i presentationen delas upp i tre separata faktorer; dålig design, ofärdig och misstag. Vid svag presentation kan den upplevda kvaliteten minska, vilket i sin tur leder till att besökaren känner mindre tillit.

Huruvida en design är bra eller inte kan tyckas vara subjektivt för varje besökare. Det finns dock exempel på design som kan tänkas vara sämre även objektivt. Det skulle till exempel kunna vara att bakgrundsfärgen och textfärgen är väldigt lika, vilket medför att det blir svårt att tyda texten, eller att webbapplikationen är inkonsekvent med storleken på texten vilket kan medföra att besökaren av webbapplikationen har svårt att särskilja till exem-pel en rubrik från en underrubrik. När en besökare upplever att designen är mindre bra, kommer detta påverka besökarens helhetsupplevelse för webbapplikationen, och sannolik-heten att besökaren kommer uppleva att applikationen är av god kvalitet kommer minska [28]. Även om det kan vara svårt att avgöra exakt vilka faktorer som utgör en god design, så framkommer det dock från S. Pengnates & R. Sarathys [29] studie att personer som upplevde att designen för en webbshop var god också kände större tillit till den. Studien visade även på att designen var en viktigare faktor för tillförlit än vad användarvänlig-heten i webbshoppen var. BJ Fogg et al. [30] menar att ytterligare faktorer som berör designen som kan påverka en besökare negativt är reklam och annonser. Speciellt upplevs det som negativt om de är distraherande, eller om de är svåra att särskilja från det faktiska innehållet i webbapplikationen.

Faktorer som tyder på att webbapplikationen är ofärdig, eller möjligtvis inte underhålls minskar den upplevda kvaliteten [28]. Dessa faktorer skulle kunna innefatta trasiga länkar, bilder som saknas eller funktioner som inte fungerar.

Everard & Galetta [28] skriver att det finns flera olika typer av misstag som kan förekomma i en webbapplikation. Det kan till exempel finnas faktafel, information som hamnat på fel ställe eller språkliga fel som stavfel och grammatiska fel. Vid denna typ av misstag upplever besökarna i större utsträckning en avsaknad av kvalitet.

2.3.2 Betydelsen av hög användbarhet

Studier visar att användbarhet är en viktig faktor för att skapa trovärdighet hos en an-vändare [31] [32]. Användbarhet definieras enligt ISO 9241-11 [33] som “den utsträckning som specificerade användare kan använda ett system, en produkt eller en tjänst för att

(22)

2.3. Tillförlitlighet 9

uppnå specificerade mål, med ändamålsenlighet, effektivitet och tillfredsställelse, i ett spe-cificerat användningssammanhang”. I en studie från 2014 av Huang & Benyoucef [31] där den upplevda trovärdigheten och användbarheten på olika statliga hemsidor undersöktes visade resultatet att det finns en stark korrelation mellan trovärdighet och användbarhet på en hemsida. Studiens resultat visade att hemsidor som ansågs ha en hög användbarhet värderades som mer trovärdiga än sidor med lägre användbarhet.

Följaktligen är det av intresse att undersöka vilka faktorer som leder till att en användare upplever att en hemsida har en hög användbarhet. Wang & Senecal [34] menar i sin studie att användbarhet kan delas upp i de tre dimensionerna enkelhet-att-navigera, hastighet och interaktivitet. Av dessa dimensioner visade resultatet av studien att enkelhet-att-navigera var det som hade störst inverkan på den upplevda användbarheten, följt av interaktivitet och slutligen hastighet.

2.3.3 Estetisk tilltalande design

En estetisk tilltalande design av en webbapplikationen är inte enbart positivt för att den är visuellt attraktiv. Forskning visar också att en mer estetiskt tilltalande design leder till att besökare känner större tillit till webbapplikationen [35]. I en studie av Robins & Holmes [36] fick 20 testpersoner se 21 olika hemsidor där varje hemsida hade en väldesignad version och en version av lägre kvalité. Båda versionerna av hemsidan hade samma innehåll, det enda som skiljde dem åt var dess design. Resultatet av undersökningen visade att testpersonerna överlag värderade hemsidor som mer trovärdiga ju mer estetiskt tilltalande de uppfattades. Av de 21 hemsidorna värderades den mer estetiskt tilltalande versionen som trovärdigare i 90 % av fallen.

Studiens resultat kan motiveras med att en väldesignad hemsida kan leda till att använ-daren får en känsla av att företaget bakom den har resurser och förmågor att leverera det som efterfrågas [37]. Följaktligen är det relevant att undersöka vilka faktorer som främst bidrar till att en hemsida upplevs som estetiskt tilltalande. I en studie från 2015 menar Seckler et al. [38] att faktorer kopplade till hemsidans struktur har störst inverkan på den upplevda estetiken. Vidare menar Seckler et al. [38] att av de strukturella faktorerna är symmetri den faktor som påverkar den upplevda estetiken mest.

Seckler et al. [38] lyfter även fram att en hemsidas färg är en egenskap som till stor del påverkar den upplevda estetiken. I studien kommer artikelförfattarna fram till att färgen blå ger högst upplevd estetik. Detta styrks av en annan studie som undersökte hur olika färger påverkar den upplevda trovärdigheten av hemsidor [39]. Även där var det färgen blå som påverkade användarna mest [39]. Dessa slutsatser ligger i linje med studierna från Selejan et al. [35] samt Robin & Holmes [36] som menar att en hemsida med en estetiskt tilltalande design leder till att användaren upplever hemsidan som mer trovärdig.

2.3.4 Tre kritiska tidpunkter

För att kunna skapa god tillit till en potentiell kund finns det enligt F. Egger [40] tre kritiska tidpunkter. Dessa tidpunkter är innan besöket, under besöket och efter besöket (specifikt efter ett köp). Det som kan påverkas innan en potentiell kund besökt hemsidan är hur denne upplever varumärket [40].

(23)

10 Kapitel 2. Teori

2.3.4.1 Innan besöket

I de fall personen i fråga aldrig har hört talas om varumärket innan den besöker applika-tionen så är första tillfället att bygga tillit i själva applikaapplika-tionen. Det första en besökare kommer att se när denne besöker webbapplikationen är gränssnittets utseende, färgerna, loggor och kanske en slogan. Därför är det av stor vikt att redan vid detta tillfälle få besö-karen att känna tillit för webbapplikationen[41]. Om besöbesö-karen sedan innan hört talas om varumärket, och dessutom har bra associationer till det, ökar chanserna för att besökaren kommer uppleva webbapplikationen som tillförlitlig [41]. F. Egger [40] nämner även att det är av vikt att webbadressen består av företagsnamnet eller varumärkets namn för att öka chanserna för god tillförlit.

2.3.4.2 Under besöket

F. Egger [40] beskiver i sin rapport de viktigaste aspekterna som påverkar en besökare under tiden den är på hemsidan. När en besökare befinner sig på webbapplikationen är det viktigt att den fungerar bra, oavsett vilken typ av plattform och webbläsare som besökaren valt att använda sig av [40]. Oavsett om besökaren befinner sig på webbapplikationen bara för att lära sig om produkten eller studera utbudet eller om den är där i syfte att genomföra ett köp är det av stor vikt att det går att hitta mycket information om produkten och att det är lätt att hitta denna information. Här är det även viktigt att den information som presenteras är korrekt [40]. Om besökaren skulle upptäcka felaktig information kommer besökaren att uppleva att sidans trovärdighet minskar [40]. Funktioner som minskar arbetet för besökaren, som prisjämförare eller storleksguider, visar för besökaren att företaget bryr sig om sina kunder [40]. Detta kan i sin tur, enligt F. Egger [40], leda till att besökaren känner större tillförlit för applikationen.

2.3.4.3 Efter besöket (köpet)

F. Egger [40] fortsätter sedan att presentera de aspekter som kan påverka en kunds tillförlit till sidan efter att den genomfört köpet. När köpet är genomfört vill konsumenten få en bekräftelse på att köpet har registrerats av företaget. Detta bör ske direkt på sidan men även i form av ett bekräftelsemejl. För att mejlet ska bidra till tillförlit kan det innehålla en kvittens av köpet, där belopp och varor tydligt framkommer, information för att kunna spåra paketet, om det som köpts ska skickas någonstans, samt kontaktuppgifter till före-taget [40]. Sedan är det av stor vikt att kunden får hem rätt varor, att varorna förpackats på ett bra sätt och att varorna är hela. Till sist menar F. Egger [40] att det även ska vara möjligt för kunden att göra returer på sina köp och att processen för att genomföra en retur ska framkomma tydligt.

2.3.5 Humanisera webbapplikationen

För att lättare kunna skapa förutsättningar för tillförlit i en ny relation, i detta fall relatio-nen mellan besökare och webbapplikation, är det viktigt att besökaren kan få information om den andre parten [27]. Den fysiska kontakten saknas i denna typ av relation och därför är det gynnsamt för både parter om utvecklarna av webbapplikationen försöker replike-ra de faktorer som spelar roll i ett fysiskt möte. Detta kan enligt Riegelsberger & Sasse

(24)

2.4. Metodteori 11

[27] till exempel vara att inkludera bilder och kontaktuppgifter på de personer som ar-betar på företaget, såväl som att ha en chattfunktion med verkliga människor istället för chattrobotar.

2.4 Metodteori

I detta delkapitel beskrivs teorin bakom de metoder som användes för att besvara fråge-ställningen.

2.4.1 Användartester

Användartester är ett sätt att, genom användare, utvärdera en produkt [42]. Testen ämnar att identifiera problem eller aspekter att förbättra i systemet men även mäta hur nöjd användaren är med produkten [43]. Det exakta utförandet av testerna skiljer sig åt men de går generellt till så att användaren försöker lösa några givna uppgifter under överseende av en observatör eller moderator som iakttar och antecknar om det sker något intressant [44]. Något som skiljer de olika sätten från varandra är om användaren sitter tyst och löser uppgifterna eller om denne på olika sätt får beskriva sitt agerande och sina tankar. Innan användartesten utförs är det viktigt att de som designat systemet utför uppgifterna för att säkertställa validiteten samt undersöka om uppgifterna är väl utformade och relevanta. Om antalet klick eller nodbesök som behövs för att slutföra uppgifterna mäts möjliggörs tydligare kvantifiering av resultaten från användartesterna. Teori kring hur detta kan göras presenteras i delkapitel 2.4.1.1.

2.4.1.1 Vilsenhet

Att användare känner sig vilsna och desorienterade på en hemsida är ett vanligt förekom-mande problem [44]. Utvecklare kan genomföra användartester och mäta tiden det tar att utföra uppgifter för att utvärdera navigerbarheten i applikationen, men resultaten är svå-ra att tyda och bedöma [45]. På grund av detta utvecklade Smith [45] en formel för att kvantifiera användarens vilsenhet:

L= r (N S − 1) 2_{+ (}R N − 1) 2 _(2.4.1) där L = vilsenhet

N = antalet unika noder besökta S = totala antalet noder besökta

(25)

12 Kapitel 2. Teori

Formeln går ut på att jämföra användarens lösningsgång av uppgiften med den optimala, kortaste, lösningsgången [45]. L ökar med ökande vilsenhet och L = 0 för den optimala lösningsgången. Smith [45] menar att värden på L under 0.4 visar att användaren inte var vilsen medan värden på L över 0.5 visar att användaren definitivt var vilsen. Värden på L mellan 0.4 och 0.5 måste tolkas tillsammans med annan data från testet. Den hjälpdata som får tillgås är uttryck av irritation, som huvudkli eller svordomar, från användaren. Gwizdka & Spence [46] menar att jämförelse med optimala vägen överlag är det bästa tillvägagångssättet att mäta hur bra användare lyckas med en uppgift.

Användartester kompletterade med Smiths formel för vilsenhet [45] kan alltså användas för att kvantifiera navigerbarheten i en applikation.

2.4.1.2 Concurrent Think Aloud (CTA)

Concurrent think aloud, framgent kallat CTA, innebär att användare under tiden den försöker lösa uppgifterna tänker högt och beskriver sitt agerande. Eftersom en människa naturligt behöver någon typ av återkoppling i en konversation [42] är moderatorns roll i CTA att stötta användaren via så kallade back-channels, det vill säga vara en aktiv lyss-nare [42]. Moderatorn ska agera på detta sätt för att upprätthålla användarens fortgående ström av verbala tankar [42]. CTA introducerar dock några svårigheter i användartester. Guan et al [47] identifierar tre huvudsakliga begränsningar. Det första problemet är att användarens förmåga att lösa uppgifterna och därav prestation kan påverkas av CTA. För det andra riskerar det faktum att användaren måste prata konstant och verbalisera tankar samtidigt som användaren försöker lösa uppgifter att tudela uppmärksamheten och påver-ka koncentrationen negativt. Den sista stora begränsningen, enligt Guan et al. [47], är att sättet som användaren tar sig an uppgifternas olika delar kan påverkas av att användaren måste lägga energi på att verbalisera varje val denne gör.

2.4.1.3 Retrospective Think Aloud (RTA)

Retrospective think aloud, framgent kallat RTA, är ett sätt att bedriva användartester som innebär att användaren får lösa alla uppgifter i tystnad och därefter prata om sina upplevelser [48]. Användaren kan prata med eller utan stimuli, men Stefano et al. [48] menar att stimuli behövs för att få uttömmande redogörelser från användaren. Praxis är att användaren får kolla på en inspelning av när denne löste uppgifterna och samtidigt berätta om de problem som stöttes på [47]. RTA löser vissa av problemen hos CTA eftersom användaren får rikta all sin fokus åt uppgifterna, men ny problematik introduceras. Stefano et al. [48] menar att användare vid RTA-användartester riskerar att glömma bort detaljer och att handlingar dessutom hinner påverkas av långtidsminnet eftersom användaren inte redogör för sina handlingar direkt.

2.4.1.4 Concurrent Think Aloud kontra Retrospective Think Aloud

Användartester där användaren, när uppgifterna utförs eller när uppgifterna är klara, får yttra sina tankar används för att användaren ska få förklara problem eller varför vissa uppgifter var svåra. Detta görs för att moderatorn och utvecklarna ska få insikter i hur en användare upplever systemet. Användartester är ett sätt för utvecklarna att göra

(26)

utveck-2.4. Metodteori 13

lingen mer användarcentrerad [49]. Det finns fördelar och nackdelar med de olika sätten att utföra användartesten, men enligt Stefano et al. [48] menar forskare generellt att det inte finns någon signifikant skillnad på användares förmåga att utföra uppgifter och tiden att utföra uppgifterna mellan CTA och RTA. Däremot är tidsåtgången för en RTA-session dubbelt så lång som den för CTA eftersom användaren vid RTA direkt efter genomfört test får iakta en inspelning från när användaren löste uppgifterna. Dessutom menar Stefano et al. [48] att användardatat, de verbala tankarna, från RTA är mindre exakt än det från CTA. På grund av detta rekommenderar Stefano et al. [48] CTA framför RTA. Stefano et al. [48] tar stöd i forskning av Kuusela et al. [50] vars slutsats är att CTA är överlägset RTA.

2.4.1.5 Retrospective Probing (RP)

Retrospective probing, framgent kallat RP, innebär att moderatorn direkt efter ett an-vändartest ställer frågor till användaren [51]. RP blottar ofta dåliga upplevelser med sy-stemet som är framstående i minnet hos användaren [51]. Att ställa öppna frågor gör att användaren fritt kan uttrycka sina intryck av systemet. Svårigheten ligger i att ställa struk-turerade men samtidigt icke-ledande frågor [51]. Styrkorna med RP är enligt Birns et al. [51] att det ger en heltäckande bild av användarens upplevelse, och att användarens svar baseras på samtliga uppgifter i användartestet.

2.4.1.6 Testanvändare

I en utvecklingsgrupp, och till och med bland vissa företag, finns det ofta bara en an-vändbarhetsexpert som ansvarar för användartester [52]. Många av dem kämpar med en begränsad budget och tvingas därför använda mindre grupper än önskat i användartester [52]. Ofta använder användbarhetsexperten bara fem personer i sina användartester och tar stöd i forskning av Nielsen [53] & Virzi [54] som menar att det räcker. Men enligt en nyare studie gjord av Faulkner [52] riskerar ett användartest med fem användare att hitta endast 55 % av felen hos produkten. Ökar antalet testanvändare till 10 personer ökar också antalet fel som hittas och i Faulkners studie [52] hittar 10 personer minst 80 % av felen.

2.4.2 Enkätmetodik

Ett sätt att samla in data är genom enkäter. Det finns flera saker som är av vikt att tänka på när en enkät ska konstrueras. Enligt U. Jakobsson & A. Westergren [55] är det viktigt att de som gör enkäten beskriver vilken information de vill kunna få ut från enkäten. Det är även av stor betydelse i vilken ordning frågorna ställs i enkäten [55]. Exempelvis bör känsliga frågor undvikas i början, då det kan avskräcka respondenten från att svara på frågorna .Istället bör enkäten börja med lättsammare frågor, som exempelvis frågor om respondentens bakgrund, för att sedan avsluta enkäten med de mer känsliga frågorna, om sådana avser finnas med [55]. Vidare bör enkät inte heller hoppa mellan ämnen. Frågor på samma ämne bör komma i block, så kallade frågeblock, och ordningen för frågeblocken bör läggas i en logisk ordning. Vidare menar U. Jakobsson & A. Westergren [55] att korta enkäter är att föredra framför långa. Detta för att minimera risken för stora bortfall bland respondenterna, vilket kan uppkomma om det tar för lång tid att genomföra enkäten.

(27)

14 Kapitel 2. Teori

Val av svarsalternativ bör också väljas med omsorg. Det kan finnas öppna eller slutna svarsalternativ, där öppna ger respondenten möjlighet att skriva fritt, och därmed ge ett mer nyanserat svar [55]. De slutna svarsalternativen är ofta lättare att besvara och kan också vara lättare att analysera. Det går även att ha en hybrid av öppna och slutna svarsalternativ där de första alternativen är slutna, och sedan ges ett öppet svarsalternativ där respondenten kan svara fritt [55]. Fördelen med detta alternativ är att alla kan svara på frågan på något sätt. Ett ytterligare alternativ, presenterad av U. Jakobsson & A. Westergren [55], på svarsalternativ är att ha skalor, till exempel rangdordningsskalor eller instämmande skalor.

Beronde på vilken typ att data som fås av enkäten kan den analyseras på olika sätt. Kvotska-levariabler, det vill säga variabler som har en absolut nollpunkt, till exempel ålder eller vikt kan beskrivas med aritmetiskt medelvärde och spridningen kan beskrivas med stan-dardavvikelse [55]. Det kan även intervallsvariabler, som innefattas av temperaturer som Celsius och Fahrenheit där intervallet mellan varje skalsteg är lika långt. Om responsdatan är av typen namngivna kategorier, såsom kön och blodgrupp utgör detta nominalskala [55]. Nominalskala går att beskrivas med typvärde och median, och spridningen med kvartiler eller kvartilavstånd.

(28)

Kapitel

3

Metod

Detta kapitel ämnar redogöra för tillvägagångssättet som användes för att besvara fråge-ställningen. Kapitlet är uppdelat i tre huvuddelar: förstudie, implementation samt utvärde-ring. I förstudien presenteras marknadsundersökningen som togs fram för att få en inblick i den relevanta marknaden. Implementationsdelen behandlar utvecklingen av webbapplika-tionen som användes för att undersöka frågeställningen och delen om utvärdering beskriver metodiken som användes för att testa och utvärdera den utvecklade webbapplikationen.

Figur (3.1): Kronologisk ordning av utförandet av metoden.

3.1 Förstudie - Marknadsföring

För att få en inblick i hur den relevanta marknaden ser ut samt vilken efterfrågan som existerar utfördes en marknadsundersökning. En digital enkät skapades med syfte att un-dersöka behovet av tjänsten samt identifiera vilka funktioner som efterfrågas av potentiella kunder. Enkäten skapades i enlighet med U. Jakobsson & A. Westergren [55] då den hölls kort och var uppdelad i två frågeblock. Det första frågeblocket innehöll frågor om respon-denterna samt deras intresse för vinyl och det andra frågeblocket innehöll frågor gällande önskemål kring tjänstens utformning. Enkäten delades både i gruppmedlemmarnas sociala medier och i en grupp för vinyllyssnare. Svar togs in under tre dagar innan undersökningen stängdes och svaren sammanställdes. Totalt var det 288 personer som deltog i undersök-ningen och alla frågor tillsammans med resultatet finns bifogat i bilaga B.

(29)

16 Kapitel 3. Metod

Utöver detta gjordes en marknadsföringsplan för att ytterligare undersöka behovet av tjäns-ten samt konkurrenssituationen på marknaden. Marknadsföringsplanen inleddes med en NABC-analys, sedan analyserades omvärlden med Porters femkraftsmodell och därefter gjordes även en SWOT-analys av erbjudandet. Efter det analyserades vilka kundsegment som bör fokuseras på och utifrån alla dessa analyser och undersökningar skapades till slut en marknadsmix för erbjudandet. Marknadsföringsplanen finns bifogad i bilaga A.

3.2 Implementation

Nedan beskrivs arbetsgången för utvecklingen av webbapplikationen. Implementationsde-len beskriver även vilka verktyg som använts samt hur systemet för webbapplikationen är uppbyggt. Syftet med att utveckla webbapplikationen var för att kunna besvara frågeställ-ningen.

3.2.1 Front-end

För att bygga upp den visuella delen av webbapplikationen användes märkspråket HTML51

för att skapa webbapplikationens struktur samt CSS2_{för att ge webbapplikationen det}

utse-ende som önskades. Vidare användes scriptspråket JavaScript3 _{samt JavaScript-biblioteket}

jQuery4 _{för att bygga in funktionalitet. För att skapa en snabb och responsiv}

webbappli-kation som fungerar på flertalet plattformar med olika skärmstorlek användes ramverket Bootstrap5_{. Vidare användes AJAX för att möjliggöra kommunikation till och från}

ser-vern6_{. Webbapplikationen byggdes som en Single Page Application (SPA) vilket innebär}

att den endast behöver laddas en gång och därefter uppdateras bara delar av webbappli-kationen när det behövs [56].

3.2.2 Back-end

Back-end refererar till den kod som körs på servern. Det är de delar av applikationen som möjliggör att den sätts i drift men som inte kan nås av användaren. Back-end ansvarar också för att servera de filer som utgör Front-end till användaren. I utvecklandet av den ak-tuella webbapplikationens back-end har det Python-baserade microweb-ramverket Flask7

använts. Flask tillåter kommunikation mellan klientsidan och serversidan vars databaser hanterades av Flask-SQL8_{. Till Flask användes också modulerna Bcrypt}9 _för

lösenords-hantering samt JWT-Extended10 _{för hantering av JSON Web Tokens}11_{. Vidare användes}

1_{W3Schools, HTML Introduction https://www.w3schools.com/html/html_intro.asp (Hämtad 2021-03-29)} 2_{W3Schools, CSS Tutorial https://www.w3schools.com/css/default.asp (Hämtad 2021-03-29)}

3_{W3Schools, JavaScript Tutorial, https://www.w3schools.com/js/default.asp (Hämtad 2021-03-29)} 4_{W3Schools, jQuery Tutorial, https://www.w3schools.com/jquery/default.asp (Hämtad 2021-03-29)} 5_{W3Schools, Bootstrap, https://www.w3schools.com/bootstrap/default.asp (Hämtad 2021-03-29)} 6_{W3Schools, AJAX, https://www.w3schools.com/js/js_ajax_intro.asp (Hämtad 2021-03-29)}

7_{The Pallets Projects, Flask Documentation, https://flask.palletsprojects.com/en/2.0.x/ (Hämtad 2021-03-29)} 8_{The Pallets Projects, Flask-SQLAlchemy, https://flask-sqlalchemy.palletsprojects.com/en/2.x/ (Hämtad}

2021-03-29)

9_{Pypi, Flask-Bcrypt, https://pypi.org/project/Bcrypt-Flask/ (Hämtad 2021-03-29)}

10_{Pypi, JWT-Extended, https://pypi.org/project/Flask-JWT-Extended/ (Hämtad 2021-03-29)} 11_{JWT, JSON Web Tokens https://jwt.io/introduction (Hämtad 2021-03-29)}

(30)

3.3. Utvärdering 17

verktyget Stripe12 _{för att möjliggöra en implementation av betalningslösningar.}

3.3 Utvärdering

Nedan beskrivs metodiken som användes för att testa och utvärdera den utvecklade web-bapplikationen. Här presenteras metoden för användartesterna och enkätundersökningen i detalj.

3.3.1 Användartester

Webbapplikationen utvecklades i tre iterationer där varje iteration resulterade i en funk-tionell webbapplikation. Vid avslutningen av första iterationen var webbapplikationen ut-vecklad i sin helhet. Som avslutning på varje iteration utfördes ett användartest där an-vändarna fick utföra 8 uppgifter innehållande webbapplikationens samtliga vyer samt 6 retrospektiva frågor ställdes efter de utförda uppgifterna. Användarnas lösningsgång jäm-fördes sedan med den kortaste och deras vilsenhet kvantifierades med Smith’s formel [45] för att utvärdera navigerbarheten. Utvecklingen i iteration 2 och 3 utgick från resultaten av föregående användartest för att, genom designförändringar, utveckla webbapplikationen användarcentrerat. Webbapplikationens vyer förändrades inte till antalet eller syfte, utan endast designmässigt.

3.3.1.1 Vilsenhet

Under samtliga användartest spelades skärmen in för att möjliggöra att i efterhand sätta värden på variablerna i Smith’s formel för vilsenhet, beskriven i avsnitt 2.4.1.1, och därmed kvantifiera navigerbarheten. Detta innebär att användarnas lösningsgång under användar-testen iakttogs för att jämföra deras med den kortaste lösningsgången. Uppgifterna hade på förhand utförts av utvecklingsgruppen för att avgöra den kortaste lösningsgången. Även ljud fångades upp för att användarens verbala tankar skulle kunna utvärderas i efterhand samt komplettera Smith’s formel vid behov.

Användarnas mått av vilsenhet [45] sammanställdes efter varje iteration, totalt på hela testet men även på varje uppgift. Att sammanställa användarnas vilsenhet på individuella uppgifter underlättade identifieringen av problemområden med applikationen. Målet med de tre användartesterna och utvecklingsiterationerna var att tidigt uppfatta var fokus be-hövde ligga. Samt genom denna förståelse utveckla webbapplikationen med målsättningen att ingen användare uppfattades vilsen under användartest 3.

När de tre iterationerna och användartesten var utförda utvärderades webbapplikatio-nens navigerbarhet. Detta gjordes genom att sammanställda användarnas vilsenhet enligt Smith’s formel [45].

(31)

18 Kapitel 3. Metod

3.3.1.2 Concurrent Think Aloud och Retrospective Probing

Användartesten som utfördes var av typen CTA, se avsnitt 2.4.1.2, och ämnade hitta problem och förbättringsområden hos webbapplikationen. RP, se avsnitt 2.4.1.5, använ-des som komplement eftersom användarens reflektioner då påverkas av sidan i sin helhet. Användarnas tankar från CTA och RP användes för att utveckla webbapplikationen använ-darcentrerat och därmed öka navigerbarheten och användarens tillförlit för applikationen. Användarnas tankar under CTA och RP samlades in och de kommentarer som berörde grundläggande funktionalitet eller navigerbarhet och tillförlitlighet presenteras i resulta-tet. Dessa kommentarer låg till grund för de åtgärder som utfördes på webbapplikationen mellan användartesten. Resterande kommentarer behandlades inte och presenteras inte under resultat eftersom de ansågs vara irrelevanta för rapporten.

3.3.1.3 Testanvändare

För att säkerställa att övervägande delen av problemen hittades utfördes varje användartest av cirka 10 personer i enlighet med teorin presenterad i avsnittet testanvändare, 2.4.1.6. Grupperna speglade, genom diversifierad ålder och kön, webbapplikationens målgrupp. För att möjliggöra jämförelse av navigerbarheten och vilsenheten mellan de olika iterationerna av webbapplikationen genomfördes samma uppgifter under alla tre användartest. Dessutom var användare endast med i ett användartest, detta för att lärdomar och kännedom om vårt system inte skulle ha någon påverkan på resultatet.

Användartest 1

Användartestet utfördes av 10 personer, 4 kvinnor och 6 män, i åldrarna 19-60 år Användartest 2

Användartestet utfördes av 8 personer, 3 kvinnor och 5 män, i åldrarna 17-48 år. Användartest 3

Användartestet utfördes av 7 personer, 2 kvinnor och 5 män, i åldrarna 22-53 år.

3.3.1.4 Uppgifter och frågor

Uppgifterna som användarna utförde var följande:

• Uppgift 1: Hitta information om hur du startar en prenumeration.

• Uppgift 2: Starta en prenumeration för två skivor i månaden och 3 månader bind-ningstid. Du vill att skivorna ska vara Jazz från 40-talet och Punk från 90-talet. • Uppgift 3: Vad kostade din order?

• Uppgift 4: Logga ut från ditt konto och logga in med email test@test.se och lösenordet test.

• Uppgift 5: Hur många skivor från 70-talet har denna användare?

• Uppgift 6: Byt genre och årtionde för en av skivorna i användarens prenumeration. • Uppgift 7: Du har flyttat och behöver därför byta adress.

(32)

• Uppgift 8: Vilken roll har Simon Karlsson hos DisQover?

Frågorna som användes vid retrospektiv sondering var ett urval av följande:

• Var på sidan letar du först efter information du söker?

• Är det lättare att hitta rätt på webbapplikationer med sidor fulla av information eller på sidor med fler sidor och mindre doser av information?

• Var det tydligt vart länkar gick och hamnade du där du trodde att du skulle hamna? • Kände du dig vilsen i sidstrukturen, eller visste du var på sidan du befann dig? • Om du fick ändra något med webbapplikationen, vad hade du ändrat och varför? • Har du några övriga tankar du vill dela med dig av?

3.3.2 Enkätundersökning

För att svara på frågan om webbapplikationen ansågs tillförlitlig publicerades en digital enkät i slutet av iteration 3 då webbapplikationen ansågs vara färdig. Enkäten publicerades på internet, framför allt på Facebook, men även direkt till släkt och vänner. Ingen data samlades in om respondeterna, men då enkäten inte publicerades i specifika Facebook-grupper bör respondenternas bakgrund såsom ålder, kön och utbildning vara blandade. Anledningen till att en enkät valdes beror på att tillförlitlighet är ett subjektivt begrepp vilket kan vara svårt att göra en konkret mätning av. En enkät är då lämplig eftersom den undersöker en större grupp människors upplevelser och försöker dra slutsatser utifrån de gemensamma resultaten [57]. Enkäten var uppdelad i tre delar där tillförlitligheten under-söktes utifrån tre aspekter: design, innehåll samt misstag. Den här typen av uppdelning bygger på A. Everard & D.F. Galettas studie [28] där liknande parametrar undersöktes för att kunna dra slutsatser om kvalitet och trovärdighet. I enkäten bifogades skärmdumpar på den slutgiltiga versionen av webbapplikationen som jämfördes med manipulerade versioner av samma webbapplikation. För respondenten var det aldrig uttalat vilken av bilderna som var från den riktiga webbapplikationen och vilken som var manipulerad. De manipulerade versionerna kunde skilja sig från originalversionen på olika sätt. I de manipulerade ver-sionerna hade de faktorer som enligt teorin skulle bidra till högre tillförlitlighet bortsetts till viss grad. Under delen för design hade sådant som färger, symmetri och textdesign manipulerats och i delen om innehåll manipulerades tillgängligheten till information. Un-der delen om misstag hade stavfel, felaktiga bilUn-der och missvisande information lagts till. Respondenterna fick sedan svara på frågor gällande de bilder de såg. Då bra design i stor grad är subjektivt och olika personer kan anse samma design vara olika bra ställdes frågor till respondenten om denne tyckte att någon av bilderna de fick se var mer eller mindre estetiskt tilltalande.

3.3.2.1 Åtgärder för att manipulera bilderna

Nedan presenteras de åtgärder som vidtogs för att manipulera slutversionen av webbap-plikationen. Alla bilder på de olika versionerna av webbapplikationen finns presenterade i kapitel 4.3.2 samt bilaga D. De bilder som motsvarar den manipulerade versionen är Bild

(33)

20 Kapitel 3. Metod

1, Bild 4, Bild 5, Bild 8, Bild 10, Bild 11, Bild 14 och Bild 17 och 18 som tillsammans utgör Bildpar 2 i sista jämförelsen i enkäten. Syftet med ändringarna i Bild 1, Bild 4 samt Bild 5 var att undersöka hur olika designaspekter påverkar den upplevda tillförlitligheten. Ändringarna på Bild 8 samt Bild 10 ämnade att undersöka hur innehåll på webbappli-kationen påverkar den upplevda tillförlitligheten. Slutligen syftade ändringarna i Bild 11, Bild 14 och Bild 17 och 18 att undersöka hur misstag på webbapplikationen påverkar den upplevda tillförlitligheten.

Design

Bild 1: Denna bild skiljer sig från slutversionen av webbapplikationen, Bild 2, genom att i navigationsmenyn högst upp har allt innehåll placerats så långt till vänster som möj-ligt, istället för den symmetriska navigationsmeny som presenteras i Bild 2. Textrutan under logotypen i mitten av skärmen har även den vänsterjusterats samt förflyttats så att den inte längre ligger i mitten ur en horisontell synvinkel. Knappen med texten ”Starta prenumeration!” har ändrats från färgen vit till färgen röd. Denna färgändring har även bakgrundsfärgen för kundomdömmena genomgått.

Bild 4: Denna bild skiljer sig från slutversionen, Bild 3, på så sätt att rubriken ”Skapa prenumeration!” har vänsterjusterats istället för centrerats och rubrikstorleken har mins-kats så att den har samma storlek som den förklarande texten under rubriken. Färgen på framstegsfältet har ändrats från blå till svart. Knappen för att skapa konto har ändrats från att vara grå när ingenting på sidan fyllts i till att vara röd. Även sidfoten har ändrats från slutversionen. Det understa fältet i sidfoten är i Bild 4 röd istället för den mörkblåa färgen på Bild 3. I sidfoten har även länkarna till DisQovers sociala medier tagits bort och DisQovers logga placerats så att den inte längre ligger centrerat sett ur en vertikal synvinkel. De ändringar som gjordes på navigationsmenyn i Bild 1 tillämpades även på Bild 4.

Bild 5: Denna bild skiljer sig från Bild 6, slutversionen av webbapplikationen, genom att det lagts in annonser på högra delen av sidan. Knappen med texten ”Starta prenumeration!” har gjorts mer genomskinlig och färgramen runt videoklippen för hur man skapar en pre-numeration har ändrats från en nyans av blå till svart. Utöver detta har samtliga ändringar som gjordes på sidfoten i Bild 4 även tillämpats på Bild 5. Så även för navigationsmenyn som manipulerats på samma sätt som i Bild 1 och Bild 4.

Innehåll

Bild 8: Denna bild skiljer sig från Bild 7, slutversionen av webbapplikationen, genom att porträttbilder på de anställda har tagits bort från ”Om oss”-sidan.

Bild 10: Denna bild skiljer sig från bild 9, slutversionen av webbapplikationen, genom att antalet frågor som finns presenterade i vyn ”Vanliga Frågor” har minskat samt att svaren på frågorna är mindre utförliga.

Misstag

Bild 11: Denna bild skiljer sig från slutversionen av webbapplikationen, Bild 12, genom att tidstämpeln för transaktionen som är listad under ”Orderhistorik” är odefinierad.

Bild 14: Denna bild skiljer sig från slutversionen av webbapplikationen, Bild 13, genom att felstavningar har lagts in i texten samt att vissa bilder och viss text inte laddas in korrekt.

(34)

Bild 17 och 18: Bildparet som utgörs av Bild 17 och 18 skiljer sig från slutversionen, bildparet som utgörs av Bild 15 och 16, på så sätt att de genrer som går att välja mellan när man ska starta sin prenumeration skiljer sig mot de genrer som det står att det ska gå att välja i "Vanliga frågor". Det betyder att det presenteras felaktig information i Vanliga frågor i den manipulerade versionen, till skillnad mot slutversionen där informationen i Vanliga frågor är korrekt.

3.3.2.2 Frågorna

De frågor som ställdes i enkätundersökningen presenteras nedan. Design

Följande fyra frågor ställdes till jämförelsen av bildpar 1-3, det vill säga bild 1-6, där det som manipulerats var designaspekter:

• Skulle du påstå att någon av dessa bilder är mer estetiskt tilltalande? • Om ja på frågan tidigare, vilken av bilderna?

• På en skala 1 till 5, hur tillförlitlig tycker du att den här webbshoppen verkar baserat på Bild X? (1 = ”Inte alls tillförlitlig”, 5 = ”Mycket tillförlitlig”)

• På en skala 1 till 5, hur tillförlitlig tycker du att den här webbshoppen verkar baserat på Bild Y? (1 = ”Inte alls tillförlitlig”, 5 = ”Mycket tillförlitlig”)

Följande fråga ställdes efter jämförelserna av bildparen ovan och ämnades besvaras mer generellt:

• Vilken/vilka aspekter skulle du säga påverkar en webbshops estetik?

Svaralternativ: Allmänna färgval, Textfärger kontra bakgrundsfärg, Symmetriskt in-nehåll, Annonser, Bilder, Typsnitt, Storlek på text och rubriker, Mängden innehåll på en sida, Annat...

Innehåll

Följande två frågor ställdes till jämförelsen av bildpar 4 och 5, det vill säga bild 7-10, där det som manipulerats var innehållsaspekter:

Misstag

Följande två frågor ställdes till jämförelsen av bildpar 7 och 8, det vill säga bild 11-14, där det som manipulerats var antalet misstag:

(35)

22 Kapitel 3. Metod

Följande tre frågor ställdes där två bildpar skulle jämföras med varandra, det vill säga bild 15-18, där det som manipulerats var antalet misstag:

• På en skala 1 till 5, hur tillförlitlig tycker du att den här webbshoppen verkar baserat på Bildpar 1? (1 = ”Inte alls tillförlitlig”, 5 = ”Mycket tillförlitlig”)

• På en skala 1 till 5, hur tillförlitlig tycker du att den här webbshoppen verkar baserat på Bildpar 2? (1 = ”Inte alls tillförlitlig”, 5 = ”Mycket tillförlitlig”)

• Vad var anledningen till att du upplevde de olika bildparen som lika / olika mycket tillförlitliga?

Avslutande frågor

Följande två frågor ämnades besvaras mer generellt:

• Skulle du säga att annonser på sidan påverkar hur tillförlitlig du anser att en webb-shop är? (Om du inte tycker det påverkar alls, välj 3) (1 = ”Har negativ påverkan”, 5 = ”Har positiv påverkan”)

• Vilken aspekt skulle du säga påverkar din tillförlit till en webbshop mest?

Svarsalternativ: Att den är estetiskt tilltalande, Att den är enkel att navigera runt i, De påverkar lika lite/mycket, Annat...

För att utvärdera resultatet från enkätundersökningen beräknades medelvärdet, medianen samt den skattade standardavvikelsen på upplevd tillförlitlighet för respektive bild. Däref-ter jämfördes dessa värden för bilderna tillhörande ett visst bildpar för att kunna avgöra ifall förändringarna ledde till en skillnad i upplevd tillförlitlighet.

(36)

Kapitel

4

Resultat

I följande kapitel presenteras resultatet från förstudien, implementationen samt testningen som gjordes.

4.1 Förstudie

Förstudien utfördes med hjälp av en enkätundersökning (se bilaga B) där syftet var att påvisa en efterfrågan på tjänsten samt samla in information som låg till grund för imple-mentationen av webbapplikationen. Undersökningen besvarades av 288 personer och för att kunna säkerställa att en god andel av svaren erhölls från målgruppen samlades även information in om respondenterna och resultatet visas i figur 4.1 - 4.3.

(37)

24 Kapitel 4. Resultat

Figur (4.2): När du lyssnar på musik, händer det då att du lyssnar på vinyl?

Figur (4.3): Skulle du vara intresserad av en prenumerationstjänst av vinylskivor?

Målgruppen som togs fram för tjänsten i marknadsföringsplanen (se bilaga A) var personer i Sverige med en hög disponibel inkomst som lyssnar på vinyl. I denna undersökning definieras målgruppen som arbetande som lyssnar på vinyl. Andelen av respondenterna som tillhörde målgruppen var 36,8% och deras intresse av tjänsten visas i figur 4.4.