Linköpings universitetSE–581 83 Linköping

013-28 10 00 , www.liu.se

Linköpings universitet | Institutionen för datavetenskapExamensarbete på grundnivå, 18hp | TDDD83 Kandidatprojekt datateknik

2017 | LIU-IDA/LITH-EX-G--17/029--SE

ChiliChallenge– Utveckling av en användbar webbapplika on

ChiliChallenge– Development of a web applica on with good usability

Grupp 4: Carolina Broberg, Oscar Ek, Linus Gålén, Anders Kratz,Andreas Niki dis, Fredrik Rundberg, Jakob Sanne, Johanna Trouvé

Handledare : Erik BerglundExaminator : Aseel Berglund

http://www.liu.se

Upphovsrä

De a dokument hålls llgängligt på Internet – eller dess fram da ersä are – under 25 år från publice-ringsdatum under förutsä ning a inga extraordinära omständigheter uppstår. Tillgång ll dokumen-tet innebär llstånd för var och en a läsa, ladda ner, skriva ut enstaka kopior för enskilt bruk och a an-vända det oförändrat för ickekommersiell forskning och för undervisning. Överföring av upphovsrä envid en senare dpunkt kan inte upphäva de a llstånd. All annan användning av dokumentet kräverupphovsmannens medgivande. För a garantera äktheten, säkerheten och llgängligheten finns lös-ningar av teknisk och administra v art. Upphovsmannens ideella rä innefa ar rä a bli nämnd somupphovsman i den omfa ning som god sed kräver vid användning av dokumentet på ovan beskrivnasä samt skydd mot a dokumentet ändras eller presenteras i sådan form eller i sådant sammanhangsom är kränkande för upphovsmannensli erära eller konstnärliga anseende eller egenart. För y erli-gare informa on om Linköping University Electronic Press se förlagets hemsida h p://www.ep.liu.se/.

Copyright

The publishers will keep this document online on the Internet – or its possible replacement – for aperiod of 25 years star ng from the date of publica on barring excep onal circumstances. The onlineavailability of the document implies permanent permission for anyone to read, to download, or toprint out single copies for his/hers own use and to use it unchanged for non-commercial research andeduca onal purpose. Subsequent transfers of copyright cannot revoke this permission. All other usesof the document are condi onal upon the consent of the copyright owner. The publisher has takentechnical and administra ve measures to assure authen city, security and accessibility. According tointellectual property law the author has the right to be men oned when his/her work is accessedas described above and to be protected against infringement. For addi onal informa on about theLinköping University Electronic Press and its procedures for publica on and for assurance of documentintegrity, please refer to its www home page: h p://www.ep.liu.se/.

© Grupp 4: Carolina Broberg, Oscar Ek, Linus Gålén, Anders Kratz, Andreas Niki dis, Fredrik Rund-berg, Jakob Sanne, Johanna Trouvé

http://www.ep.liu.se/http://www.ep.liu.se/

Sammanfattning

This report examines how a web application in e-commerce is created with a focuson good usability. The usability areas studied are navigability, reliability and how aneffective purchasing process is designed. Based on established theory of usability, a webapplication that sells chili peppers has been created. User tests have been used as anevaluation method to review if usefulness has been achieved. During the project, threequalitative tests have been made and based on the results of these, along with establishedtheory, functionality and design have been changed to improve usability. The conclusionindicates that it is possible to create an application that is considered useful in terms ofthe three main areas.

Denna rapport undersöker hur en webbapplikation inom e-handel skapas med fokus pågod användbarhet. De användbarhetsområden som studerats är navigerbarhet, pålitlig-het och hur en effektiv köpprocessen utformas. Utifrån etablerad teori om användbarhethar en webbapplikation som säljer chilifrukter skapats. Användartester har använts somutvärderingsmetod för att granska om användbarhet åstadkommits. Under projektet hartre kvalitativa tester gjorts och utifrån resultatet av dessa, tillsammans med etableradteori, har funktionalitet och design ändrats för att förbättra användbarheten. Slutsatsenindikerar att det är möjligt att skapa en applikation som anses ha bra användbarhetutifrån de tre huvudområdena.

Författarnas tack

Vi vill tacka vår handledare Erik Berglund för många goda och insiktsfulla samtal. Detta stödhar varit mycket värdefullt under projektet. Vidare vill vi tacka Aseel Berglund för alla godatips och information. Vi vill även passa på att tacka våra opponenter och användartestare , dåderas kommentarer och insikter hjälpt oss att driva projektet vidare. Sist men inte minst skaMattias Sundmark ha ett stort tack för hans insatser under demonstration av ChiliChallenge.

iv

Innehåll

Sammanfattning iii

Författarens tack iv

Innehåll v

Figurer vii

Tabeller viii

1 Inledning 11.1 Syfte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21.2 Frågeställning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21.3 Avgränsningar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

2 Teoretisk referensram 32.1 Webbapplikation och Rich Internet Applications (RIA) . . . . . . . . . . . . . . . 42.2 Användbarhet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42.3 Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42.4 Pålitlighet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92.5 Effektiv köpprocess . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112.6 Teori för användbarhetstestning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142.7 Enkätundersökning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172.8 Brainwriting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

3 Metod 193.1 Förstudie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203.2 Implementation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203.3 Utvärdering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

4 Resultat 234.1 Förstudie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244.2 Implementation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244.3 Utvärdering och testgrupper . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

5 Diskussion 385.1 Resultatdiskussion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395.2 Metoddiskussion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

6 Slutsats 50

Litteratur 52

A Appendix A: Användbarhetstester 57

v

A.1 Uppgifter för användbarhetstest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58A.2 Resultat av användbarhetstest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59A.3 Enkätresultat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

B Appendix B: Marknadsföringsplan 65B.1 Inledning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66B.2 NABC-analys . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66B.3 Omvärldsanalys . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67B.4 Mikroomgivningen (Porters femkraftsmodell) . . . . . . . . . . . . . . . . . . . . . 68B.5 SWOT-analys . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69B.6 TOWS-analys . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70B.7 Marknadsstrategi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71B.8 Marknadsmål . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72B.9 STP-Analys . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72B.10 Marknadsmix . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73B.11 Statistik Marknadsundersökning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

vi

Figurer

2.1 Anledningar till varför användare lämnar köpprocessen . . . . . . . . . . . . . . . . . 122.2 Förhållanden mellan olika användbarhetsmått . . . . . . . . . . . . . . . . . . . . . . 14

4.1 Prototyp till . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244.2 Navigationsmeny 1, Startsida oscrollad . . . . . . . . . . . . . . . . . . . . . . . . . . . 254.3 Navigationsmeny 2, Startsida scrollad . . . . . . . . . . . . . . . . . . . . . . . . . . . 254.4 Navigationsmeny 3, Köpprocessen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254.5 Navigationsmeny 4, inloggad användare . . . . . . . . . . . . . . . . . . . . . . . . . . 254.6 Fot . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264.7 Knappar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264.8 Databas i Postgresql ER-diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274.9 Startsida ChiliChallenge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284.10 ”Om”-sida ChiliChallenge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284.11 LoginModal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294.12 RegistrernigModal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294.13 FelmeddelandeForm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304.14 Köpprocess, steg 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304.15 Köpprocess, steg 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304.16 Köpprocess, steg 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314.17 Köpprocess, steg 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314.18 Köpprocess, steg 5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324.19 Köpprocess, steg 6 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324.20 Köpprocess, steg 7 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334.21 Utseende när en person utmanas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334.22 Två utmaningar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344.23 Betalning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354.24 Bekräftelse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364.25 Enkätfrågor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

A.1 Resultat Test 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62A.2 Resultat Test 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63A.3 Resultat Test 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

B.1 SWOT-diagram ChiliChallenge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69B.2 TOWS-diagram ChiliChallenge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

vii

Tabeller

2.1 Designregler köpprocess . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132.2 10 mått på användbarhet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

viii

1 Inledning

1

1.1. Syfte

Idag är internet större än någonsin, utvecklingen går snabbt [30], samtidigt som fler av ossväljer att använda internet för att utföra många dagliga sysslor. En av de sysslor som i alltstörre utsträckning utförs på internet är dagligvaruhandel. Under 2016 ökade livsmedelshan-deln på internet med 30 % [47]. Detta i kombination med visat intresse att köpa en presentonline till en vän utifrån genomförd marknadsundersökning (se avsnitt B.11), skapades idenatt utveckla en e-butik som erbjuder användare att köpa chilifrukter till bekanta.

Inom e-handel finns många konkurrerande webbapplikationer med varierande utformningoch uppskattning hos användarna. Varför vissa webbapplikationer uppskattas eller föredrasframför andra är inte alltid uppenbart. Ofta vet kanske inte en användare varför den föredraren webbapplikation framför en annan. En anledning till att applikationer uppskattas är attde är användbara. Det som gör att en viss applikation upplevs användbar kan bero på enkombination av många faktorer. Då begreppet användbarhet är mycket brett har detta projektvalt att fokusera på navigerbarhet, pålitlighet och en effektiv köpprocess.

1.1 Syfte

Syftet med detta projekt är att utveckla en användbar webbapplikation inom e-handel somska vara navigerbar, pålitlig och ha en effektiv köpprocess. Applikationen som utvecklas skasälja chilifrukter där användaren uppmuntras att köpa produkterna till bekanta.

1.2 Frågeställning

Hur kan en webbapplikation inom e-handel skapas för att den ska vara användbar med avse-ende på navigerbarhet, pålitlighet och en effektiv köpprocess.

1.3 Avgränsningar

Arbetet i rapporten fokuserar på hur en webbapplikation utvecklas med avseende på använd-barhet med avseende på navigerbarhet, pålitlighet och en effektiv köpprocess. En effektivköpprocess syftar på användarens uppfattning av köpprocessen både i form av att denne skakänna sig trygg och ha god förståelse för köpprocessen, alltså inte den faktiska säkerhetenunder köp utan snarare den upplevda säkerheten. Vidare framställs inga verkliga produkter iutvecklingen av applikationen och köp genomförs enbart i ett teststadie, alltså görs inte hellerverkliga transaktioner. Webbapplikationen som utvecklas är dock full fungerande och skullekunna tas i bruk i ett framtida stadie.

Användartester som genomförs på webbapplikationen görs av studenter med god insikt iwebbprogrammering. Resultatet av användartesterna kan därav i viss mån anses vara vinklat.Vidare har även webbappliaktionens syfte och koncept utformats redan i ett tidigt stadie ochansågs i och med en förstudie kunna användas på en verklig marknad.

2

2 Teoretisk referensram

3

2.1. Webbapplikation och Rich Internet Applications (RIA)

2.1 Webbapplikation och Rich Internet Applications (RIA)

En webbapplikation är ett samlingsnamn för den programvara som användare av internetkommer åt genom att använda en webbläsare. Den traditionella webben lagrade data på enserver och klienten laddade ner informationen när den behövdes. Rich Internet Applications(RIA)-tekniken stödjer lagring av data i klienten. På så sätt lägger RIA en del av beräkningarnatill klienten. Applikationer byggda för att låta klienten sköta en del av beräkningarna innebärsnabbare responstider och optimerar kommunikationskostnader.[19]

Kalbach skriver att den största fördelen med RIA är den förstärkta användarupplevelsen.Istället för att ladda en ny sida med egen webbadress när användaren klickar på en länk, an-vänder sig RIA av en Single Page Applications vilket innebär att sidan snabbt laddar innehålletlänken leder till och användaren stannar på samma webbadress. RIA gör omorienteringen tillnavigationsmöjligheterna på sidan minimal eller så de kan slipps helt. RIA är generellt merresponsiva och gör information tillgängligt snabbare, samtidigt som det minskar känslan avatt vara ”vilsen på webben”. [31]

Den stora skillnaden med RIA är att informationen processas i klienten istället för i ser-vern. Den skillnaden förändrar upplevelsen mycket eftersom användarna direkt får respons förinteraktionen som utförts. Det grundläggande sätt RIA använder för att undvika omladdningav sidor vid varje klick, är att all nödvändig information laddas in en gång. Då krävs det inteen omladdning av sidan vid sortering, filtrering eller manipulering av data. Ibland kan dettases då det visas ett ”vänligen vänta, sidan laddas in”-meddelande första gången applikatio-nen startas, men därefter krävs ingen omladdning och användaren kan interagera snabbt medinnehållet. [31]

2.2 Användbarhet

Begreppet användbarhet (usability) är centralt för att förstå hur en framgångsrik webbap-plikation för e-handel kan utformas eftersom det är en faktor som avgör kundernas attityd,återbesöksfrekvens och som i slutändan starkt är kopplat till eventuellt köpbeslut. [32][13]Användbarhet är ett mått på hur enkelt och funktionellt ett användargränssnitt (interface) äratt använda eller[24] mer formellt definierat som:

”Den utsträckning i vilken en specifik användare kan använda en produkt föratt uppnå specifika mål, med ändamålsenlighet, effektivitet och tillfredsställelse, iEtt givet sammanhang” [3]

2.3 Navigation

Internet är i sin grund ett navigationssystem som dess användare interagerar med genom attklicka på hyperlänkar navigera på webbsidor och mellan webbapplikationer. Med internetsväldiga storlek och flera miljarder olika webbsidor och webbapplikationer som finns är detnödvändigt att förenkla navigering av webbapplikationer och hjälpa användarna att hitta övernätet. Nielsen säger att var navigationsgränssnitt måste hjälpa användaren att svara på trefrågor[38]:

• Var är jag?

• Var har jag varit?

• Vart kan jag gå?

Den antagligen mest viktiga frågan ”Var är jag?” måste enkelt besvaras för användaren. Ominte användarna vet var de befinner sig, kommer de ha svårt att förstå meningen med länkende just har följt, samt kommer de inte ha en möjlighet att få förståelse för sidans struktur ochvar de befinner sig relativt den. Därför måste frågan ”Var är jag?” besvaras på två nivåer:

4

2.3. Navigation

• Var användaren befinner sig relativt till internet, alltså vilken webbplats de befinnersig på. Användarna kommer inte veta vilken webbplats de är på om det inte berättasför dem, därför påstår Nielsen det viktigaste vid design av webbsidor är att visa upplogotypen på var sida av webbapplikationen. Logotypen borde ha en koncis placering,helst uppe i vänstra hörnet och vara en länk till startsidan.

• Var användaren befinner sig relativt webbplatsens struktur. Detta besvaras enkelt genomatt visa upp delar av sidans struktur och markera vilken av dessa användaren befinnersig under.

Nielsen beskriver även i artikeln ”10 Good Deeds in Web Design” hur viktigt det är attha en tydlig rubrik och titel på sidan så att användarna omgående vet var de befinner sig iförhållande till webbplatsens struktur. Detta gäller även om de har nått en sida djupt nere iwebbapplikationen ur ett annat sammanhang.[37]

Att besvara frågan ”Var har jag varit?” är svårare eftersom webbapplikationer ofta intesparar den informationen. Webbläsare bistår med hjälp, såsom bakåtknappar, och gör därmedmycket av jobbet. Vad som är viktigt är att tydligt, med hjälp av namn på länkarna, framgåvilka som leder till sidor användaren tidigare besökt. Detta för att de ska lära sig webbsidansstruktur, samt så de sparar tid och besöker inte samma sida flera gånger. [38]

Frågan ”Vart kan jag gå?” besvaras helt enkelt av de länkar som syns på sidan användarenbefinner sig på. Dock så är det omöjligt att samtidigt visa alla destinationer på en sida, därförkrävs en bra struktur av webbplatsen för att användaren ska få en bra förståelse hur den kannavigera till alla delar av webbapplikationen. Bra namngivning av länkar är även viktigt såatt användarna kan till stor del förutse var de kommer hamna efter att ha klickat på en länk.[38]

WebbplatsstrukturAll navigation följer ett gemensamt tema: Visualisera var i webbapplikationen användarna be-finner sig och vart de kan röra sig relativt till dess struktur. Detta innebär att om applikationensstruktur är svårförståelig eller dålig, är det omöjligt att designa ett bra navigationsgränssnitttill webbplatsen. [38]

För att uppnå en bra struktur på en webbplats krävs två saker, att strukturen är koncisöver hela webbplatsen, samt att strukturen designas ur användarnas perspektiv och mål. Ettvanligt misstag företag gör när de designar sin webbapplikation är att de låter strukturenspegla företagets struktur. Detta leder till att användarna blir tvingade att behöva förståföretagets struktur för att enkelt kunna använda applikationen. Användarna ska inte behövabry sig om annat än sitt eget mål, och därmed måste hemsidans struktur utformas utifrånderas mål och syfte med användningen av webbapplikationen. [38]

Om hemsidan har en hierarkisk struktur med flera olika nivåer, bör användaren alltid kunnase på vilken del av webbplatsen den befinner sig på med överblick av alla nivåer. Detta görsenklast genom att för varje nivå markera rubriker användaren befinner sig under med annanfärg än övriga rubriker. Anledningen till att designa webbapplikationen på detta vis är attanvändarna enkelt får god förståelse om den totala strukturen, men visar applikationens andrafunktioner och hur den sida de befinner sig på förhåller sig till resten av webbplatsen. Detta ärfördelaktigt om användarna har följt en länk som omgående leder djupt in i webbapplikationen.Då kan användarna omgående se var på webbplatsen de befinner sig även om de aldrig varitpå den tidigare.[38]

Användaren och navigationNär användarna surfar på internet är det de själva som navigerar och kan då välja en vägsom utvecklaren inte har avsett i en webbapplikation. Denna användarfrihet bör utvecklaren

5

2.3. Navigation

anamma och möjligheten att kunna navigera genom sidan på flera sätt bör erbjudas. Omanvändarna istället tvingas ta en viss väg kan webbplatsen upplevas som sträng. [38]

Vid användning av internet rör sig användare ofta mellan olika webbplatser på kort tid.Denna snabba rörelse gör att användare upplever att de använder internet som en helhet ochinte olika webbplatser separat. Därför klagar användare när de anländer till en webbplats därgränssnittet skiljer sig drastiskt från webbapplikationer användarna är vana vid. Det är därförviktigt att observera internet som en genre med regler om hur en webbplats ska designas ochinte aktivt försöka skilja sig från andra webbplatser.[38]

Navigering i Rich Internet Applications (RIA)Det är viktigt att ha i åtanke att navigering från en sida till en ny sida är så fundamentalt i vårnormala webbupplevelse att användaren förväntar sig omladdning. Vid design RIAs behövesdetta tas i beaktning genom att påvisa för användaren att någon ändring har skett efterklick av länk. Om användaren inte får någon respons och att sidan inte laddas om, kan detverka som att klicket inte har någon effekt och risken finns att användaren missar uppdateradinformation. [31]

Webbläsare har sina egna navigeringsknappar som ibland kan störa RIA, framförallt tillba-kaknappen. På statiska sidor flyttar tillbakaknappen användaren till föregående besökta sidavilket ofta förväntas. Dock för applikationer med dynamiskt genererat innehåll och data kantillbakaknappen bli problematisk. Användning av dessa kan resultera i att använderan gårlängre bak än menat och data kan förloras. [31]

Även om implementation görs så webbläsarens tillbakaknapp stödjer applikationen, är detbra att inkludera tydliga navigeringsalternativ för att gå fram och tillbaka i applikationen.Detta kan potentiellt avstyra användare från att ens använda webbläsarens knappar. Generelltsett ska inte användaren behöva använda tillbakaknappen i webbapplikationen och de skatillhandahålla alternativa navigationsmöjligheter. [31]

Element användare förväntar sig i en webbapplikationVetskapen av vilka gränssnittselement användare förväntar sig på en specifik typ av webbap-plikation, samt vetskapen av att veta deras förväntade plats, kan hjälpa utvecklare i designav användbara och effektiva webbplatser. [25]

Forskning har visat att användare är snabbare på att hitta ett element i gränssnittet ochhar mindre problem att orientera sig på en webbsida när sidan är designad enligt användarensförväntningar. Användare finner det även lättare att ta fram information när gränssnittsele-menten ligger där de förväntar sig och tenderar att vara nöjdare med webbapplikationen. Pågrund av tekniska framsteg samt ändringar i webbdesign, ser en typisk webbsida annorlundaut idag jämfört med hur en webbsida såg ut för fem år sedan. [25]

Studien jämförde vad som förväntades på en webbsida 2007 och vad som förväntades 2014.Jämfört med 2007 förväntas idag fler element finnas på varje typ av webbapplikation. Exem-pelvis förväntas länkar till sociala medier finnas på alla typer av webbplatser. Den förväntadeplatsen för flera gränssnittselement såsom kontakt, privat information, legal information ochhjälp verkar sen 2007 ha flyttats till botten av sidan i vad som kallas sidfot. Denna fot harblivit integrerad i ritningen för en e-butik. [25]

På dagens webbplatser förväntar sig användaren social media och personifiering av elementsåsom länkar till sociala medier, önskelistor och ytor att logga in eller registrera sig. Även tackvare tekniska framsteg inom mobiltelefonbranschen, förväntas gränssnitt såsom en mobilversionav webbplatser. Exempelvis talar Heinz, Linxen, Tuch, Fraßeck och Opwis data för ett skiftetill mobilversioner av applikationer är förväntat i en e-butik. En anledning till detta menarHeinz, Linxen, Tuch, Fraßeck och Opwis kan vara att användare letar efter produkter när deär i rörelse. [25]

6

2.3. Navigation

Andra element som förväntas är logga in/registrera sig samt en varukorg och även enlogotyp placerad i toppen av det vänstra hörnet eller i mitten högst upp på sidan. Samtförväntas huvuddelen av sidans innehåll ligga centralt på sidan. För att kontakta ägaren avsidan, förväntar sig användaren konsekvent att elementen ligger i botten av sidan. På allatyper av webbapplikationer var det oklart var sociala nätverks länkar skulle ligga, vilket tyderpå att användaren inte har en förväntad plats för dessa länkar än. [25]

Idag är reklam inte längre förväntad på webbsidor. Heinz, Linxen, Tuch, Fraßeck och Opwisger en förklaring till det med att annonser kan vara oönskade och valdes därför inte, FAQsförväntas heller inte längre finnas på någon typ av webbsida. Heinz, Linxen, Tuch, Fraßeckoch Opwis säger att en anledning kan vara att användare hittar andra sätt såsom sökmotorer,sociala nätverk eller kunskapsspecialiserade sidor för att hitta svaren på sina frågor. Eftersomfler och fler företag är beroende av sin närvaro på internet och framgången för många e-butikerhänger samman med att dess användare kan navigera på sidan, är det nödvändigt att förståvad användarna förväntar sig från olika typer av sidor.[25]

Användbara flikar vid navigeringFlikar som tas upp i detta avsnitt handlar om flikar inne i applikationen, inte flikarna somklienten tillhandahåller för att hantera flera olika öppna webbapplikationer samtidigt. [40]

Nielsen ger designråd i hur och när flikar ska användas. Det viktigaste vid användning avflikar enligt Nielsen är att de används för att dela upp olika vyer inom samma område, inteför att navigera till olika platser. Det är viktigt att det framgår tydligt vad som finns bakomvarje flik så att användarna kan förutse vad som kommer att visas när flikarna öppnas. Omdet är svårt att tydligt gruppera vyerna är flikar förmodligen fel gränssnitt för innehållet. [40]

Flikar ska endast användas när användarna inte behöver se innehållet från flera flikarsamtidigt. Om användarna behöver att gå mellan flikarna för att jämföra information, sålägger det en börda på deras kortsiktiga minne, ökar kognitiv last och interaktionskostnad. Dåminskar användbarheten jämfört med en utformning som lägger allt innehåll på en stor sida.[40]

Innehållet under flikarna bör efterlikna varandra, om de är tydligt olika kommer användar-na istället tolka det som sidnavigeringar. Det ska även tydligt framgå vilken flik som är öppengenom att markera den öppnade fliken. Metoder för att påvisa vilken flik som är öppnad kanvara att ändra storleken på den öppnade fliken, en etikett i fet stil, eller genom att lägga flikenframför övrig flikar. Det är även bra ifall den öppnade fliken sammankopplas till innehållet,det gör det också lättare att se vilken flik som är öppen. De flikar som inte är öppnade skavara lätta att se och läsbara för att påminna användaren om att det finns fler alternativ. Omflikarna smälter in för mycket i bakgrunden finns det en risk att användaren aldrig klickar påden och inte upptäcker alla funktioner. [40]

Etiketterna för varje flik ska vara korta och innehålla lättförstådda ord för användaren.Helst ska etiketten bestå av en till två ord eftersom det är lättare att söka av korta etiketter.Behövs längre etiketter är det också ett tecken på att flikar är fel gränssnitt för webbsidan.Tecknen i etiketten ska inte vara i enbart versaler då det gör dem svårlästa. [40]

Flikarna ska enbart vara uppradade i en rad då flera rader skapar hoppande element. Dettaförstör det spatiala minnet och därför gör det omöjligt för användarna att komma ihåg vilkaflikar de redan har besökt. Dessutom är flera rader ett tydligt symptom av överdriven kom-plexitet. Behövs flikar som inte får plats i en rad måste designen göras simplare. Flikarna skaplaceras på toppen av sidan, om de placeras vid kanten eller i botten förbiser ofta användarnaflikarna. Flikarna ska även se likadana ut och fungera på samma sätt. Att vara konsekvent ärviktigt för det grafiska användargränssnittet, därför att det bygger på användarens känsla avatt bemästra gränssnittet. [40]

Nielsen påstår att om dessa råd följs så kommer användaren att veta hur de använder fli-karna utan vidare utforskning eller felbenägen gissning. Det gör att användare kan fokusera påatt förstå innehållet och de funktioner som är tillgängliga i flikarna. Flikar har inget egenvärde,

7

2.3. Navigation

men de briljerar när de inte drar åt sig någon uppmärksamhet utan underlättar tillgången tillinnehållet. [40]

Användbar scrollning och lockande startsida vid navigeringVid sidor på en webbplats som går att scrolla på, talas ofta om den del av sidan som ärovanför sidbrytningen innan användaren börjar scrolla, alltså det innehåll som syns utan attnågot görs, samt det innehåll som ligger därunder, det som användaren måste scrolla för attse. En vanlig myt inom webbdesign är att användare ofta inte scrollar på webbsidor. Detta ärdock inte sant utan användarundersökningar visar att användare spenderar ungefär 80 % avsin tid att observera det som ligger ovanför sidbrytningen och 20 % för att observera det somligger nedanför. Resultatet av dessa användarundersökningar visar att sidor designade för attanvändare ska scrolla kan användas, för att användarna kommer att göra det. Dock är valetav vilket innehåll som ska visas ovanför gentemot under sidbrytning fortfarande viktig ochkommer ha stor inverkan på användarupplevelsen.[39]

Schade säger att den stora anledningen till att placering av innehåll spelar roll är att detsom läggs över sidbrytningen avgör ifall användarna kommer vara intresserade av att fortsättascrolla. Användaren måste avgöra om det är värt besväret och interkationskostnaden att hittadet innehåll som är gömt längre ner på sidan, om det första innehållet användaren stöter påär ointressant kommer den inte navigera sig vidare i hopp om att hitta något gömt som äranvändbart. [50]

För att locka användaren att fortsätta scrolla behöver webbsidan bygga upp en historiasom lockar användaren att fortsätta neråt och se fortsättningen. Detta görs genom att att visadet viktigaste och mest intressanta över sidbrytningen, samt ge en ledtråd av vad som dykerupp under. Bra tillvägagångssätt för att åstadkomma sådan design är exempelvis:

1. På sidans navigationsmeny, ha länkar till de olika sektionerna av startsidan och medmarkering eller understrykning av länken visa under vilken som användaren befinner sig

2. Att lägga objekt, exempelvis bilder, som sträcker sig över flera sektioner vilket lockaranvändaren att fortsätta till ny information.

Om istället en sida med lite innehåll över sidbrytningen designas kan denna få ett attraktivtutseende, men detta attraktiva utseende blir ett utbyte mot att användare inte kommer vetavad som finns längre ner och om det är värt att scrolla.[50]

Navigation med dragspelsmenyerEn dragspelsmeny är en vertikal lista av rubriker som när de klickas på visar eller gömmeren sektion tillhörande rubriken. Fördelen med användning av dragspelsmenyer är att det ärett av de sätt som finns för att visa användare innehållet på sidan i en progressiv takt, samtge användarna möjligheten att kontrollera vilket innehåll som visas för dem. Dragspelsmenyerminimerar även scrollning och genom att gömma innehållet och kan få webbplatsen att fram-träda som mindre skrämmande. Rubrikerna gör det även lätt för användaren att få en brauppfattning av innehållet på sidan samt är en bra ersättning för länkar som leder till en annanplats på samma sida.[34]

De användbarhetsproblem som förekommer med dragspelsmenyer är att de ökar interak-tionskostnaden samt kan bli besvärliga för användaren om denne vill åt allt innehåll på sidaneftersom var rubrik behöver klickas på. Om rubrikerna inte är väl namngivna kan användarnasuppfattning om allt innehåll som sidan har att erbjuda minska.[34]

På grund av interaktionsnackdelarna med dragspelsmenyer bör dessa, i de flesta fall, inteanvändas för att ersätta lång scrollning på en sida. Användarna kommer scrolla om det ärrelevant för dem eller om toppen av webbsidan väcker nog med intresse (se scroll), relevanstriumferar över besväret att scrolla. Därför bör valet ifall en dragspelsmeny ska användas till

8

2.4. Pålitlighet

stor del begrundas på hur mycket av innehållet på webbsidan som är intressant för användaren.Om större delen av innehållet är intressant bör dragspelmenyer inte användas, men om barabitvis av innehållet är intressant kan denna typ av meny passa bra.[34]

Dock då dragspelsmenyer på större skärmar är diskuterbart passar det väldigt bra tillmobildesign eftersom den nedkortning av innehåll som dessa menyer erbjuder passar in på småskärmar och ger användaren kan ge en bra överblick av allt innehåll. Vad som dock behöverundvikas är att det finns för mycket innehåll under varje sektion, då detta kan leda till förmycket scrollande samt desorientering av vilken information som finns var. Dessa problemundviks dock lätt med flera rubriker och inte för mycket innehåll under varje meny.[5]

Användning av modaler vid navigeringFessenden definierar en dialogmodal som en dialogruta som visas ovanpå huvudinnehålletoch försätter systemet i ett läge som kräver användarinteraktion. Dialogrutan inaktiverar hu-vudinnehållet tills användaren har interagerat. Denna typ av dialogrutan kommer vidare attbenämnas som modal.

Modaler var ursprungligen avsedda att varna användare om varningar eller om det ärnågot i systemet som kräver att användaren hanterar det omgående, vilket gjordes genom attplacera en modal mitt på skärmen för att försäkra att man får användarens uppmärksamhetoch fortsatt interaktion. Modaler har idag utvecklats ifrån detta och används nu på flerasätt för att få direkt användaruppmärksamhet av både berättigade och oberättigade själ.[17]Nackdelar med modaler:

1. De kräver direkt interaktion och användare kan inte fortsätta med vad de gjorde.

2. De avbryter användarna arbetsflöde och tar både tid och ger användarna ett nytt målde måste adressera: förstå modalen och bestämma vad de ska göra med den.

3. Orsakar att användarna glömmer detaljer associerade med deras ursprungliga mål påwebbplatsen.

4. Blockerar innehållet i bakgrunden och potentiell viktig information.

Dessa nackdelar måste has i åtanke då modaler designas för användning vid icke kritiskaaktiviteter. De bör användas för att förenkla arbetsflödet och inte avbryta det, exempelvisfråga efter nödvändig information eller bryta ner ett arbetsflöde i mindre delar. Det viktigasteär att inte avbryta användarens arbetsflöde utan istället med modaler göra det lättare föranvändarna att genomföra sina mål.[17]

2.4 Pålitlighet

I en webbapplikation är det extra viktigt att ge användaren ett pålitligt intryck eftersom det,till skillnad från en vanlig affär, inte finns något ansikte eller något annat bakom webbsi-dan än ditt eget intryck av webbapplikationen. Enligt en studie från The Pennsylvania StateUniversity är det tidigare kunskaper och erfarenheter av applikationen som gör att en typiskanvändare går tillbaka till den. För en användare som inte har hört talas om applikationensedan tidigare måste det finnas ett mycket starkt intryck av att den känns pålitlig. Om dettaintryck av pålitlighet ges, ökar chansen att användaren genomför ett köp. [36]

De faktorer som anses vara viktigast för att skapa förtroende hos en användare har trotsatt webbutveckling och design utvecklats i snabb takt förblivit desamma. Enligt Corbit finnsdet flera separata faktorer som varit och förblir mycket viktiga för att skapa förtroende för enwebbsida. Dessa är designkvalitet, transparens, säkerhet och omdömen från andra sidor samtkällor. [36], [11], [33]

9

2.4. Pålitlighet

DesignkvalitetKvaliteten av innehållet är avgörande för pålitligheten, vilket innebär att det inte ska finnasbuggar på hemsidan, andra fel eller felstavningar. En annan studie har undersökt webbappli-kationer som användaren inte känner till sedan tidigare utifrån olika designer och hur mananvänder dem. Resultatet visar att en applikation med tilltalande grafiskt design och som ärlättanvänd ansågs mest pålitlig. Det visuella intrycket visade sig vara det som ansågs viktigastav de två kriterierna. [45], [60]

För att åstadkomma en tilltalande grafisk design och en design som man litar på menarBandodkar och Singh att det ska vara genomgående konsekvent design över sidorna och attanvändaren ska känna igen sig på alla sidor. Det ska även finnas en grundläggande komplexitetoch ordning för att uppfattas professionell och därav pålitlig. Undersökning som gjorts visaratt trovärdigheten är större om företagslogotypen är enhetlig och passar in med övriga sidan.En logotyp som maximerar pålitligheten visualiserar vad företaget håller på med, använder ettsimpelt designspråk och lugna harmoniska färger. Det visas också att kunder uppskattar närknappar och ikoner är grafiskt tilltalande. Det är även viktigt att visa bilder på produkter föratt ge ett tydligare intryck av vad man egentligen köper. [60], [35], [27]

Vidare anser Sundström att det är mycket viktigt att det finns tydliga uppdelningar mellanolika delar av webbsidan, genom användning av en ’luftig’ design. Det mänskliga ögat proces-serar endast en sak i taget och därför är det viktigt att det finns tillräckligt med utrymmemellan de olika delarna av webbapplikationen. Enligt Sundström är detta designval viktigt föranvändares uppfattning av webbapplikationens designkvalitet samt deras generella intryck avwebbapplikationen. [54]

TransparensTransparens är en mycket viktig faktor då målet är att skapa ett förtroende hos en användareför en webbapplikation. Detta kan exempelvis innefatta att tydligt presentera information omexempelvis fraktkostnader, moms och garantier man får som kund. Det anses även vara viktigtatt tillhandahålla återkoppling vid en utförd aktion, exempelvis ett köp, för att uppnå en godtransparens. En annan aspekt är att ha en lättillgänglig kontaktinformation med exempelvisFAQ och direktmeddelanden till kundtjänst. Då webbapplikationer utelämnar grundläggandeinformation om exempelvis priser eller kontaktuppgift tar det ofta mycket kort tid innantjänsten som erbjuds avfärdas av användarna. Kraven på nödvändig information beror ofta påtyp av tjänst, här förväntas exempelvis budfirmor kunna tillhandahålla information om vartprodukten befinner sig, samt beräknad leveranstid. [23]

Då man erbjuder information till användare måste man vara noga med att metoden för atttillhandahålla denna inte uppfattas som icke transparent, eller rentav avstängd/avgränsade.Enligt Harley, Aurora kan bara intrycket av en informationsbarriär, som exempelvis att an-vändaren måste fylla i ett formulär innan information förmedlas vara förödande för användaresförtroende för applikationen. Därför är det mycket viktigt att också erbjuda information påett enkelt sätt, som inte kräver för mycket av användaren. [23]

SäkerhetDet finns stor oro hos många om sina kreditkort och man är generellt rädd att få sina kort-uppgifter stulna. Detta har lösts genom att använda regulationer för att minska bedrägerier,vilket kallas Payment Card Industry Data Security Standard (PCI DSS). Inom denna stan-dard finns flertalet betaltjänster som tar hand om transaktionen åt webbapplikationen. Dettagörs för att kunden ska känna sig säker och på så sätt ökar pålitligheten [46]. Det är mycketviktigt att under köpprocessen, i samband med betalning, visa säkerhetscertifikat och andraindikationer tydligt. Enligt Smriti är det exempelvis viktigt att visa eventuella certifikat ochunderstryka bolagets rätt/expertis att sälja de produkter som ställs ut i webbapplikationen.

10

2.5. Effektiv köpprocess

Detta bör även kompletteras med ett kvalitetsmått, samt en indikation om att hög kvalitetupprätthålls för de produkter som erbjuds på sidan. [52]

Om konsumenten känner att hanteringen av deras personuppgifter är god, kommer denäven känna ett större förtroende för hela applikationen. Desto mer en användare litar på sidan,desto större är chansen att vederbörande återkommer till sidan. En annan sak som visats gemer pålitlighet är att uppmärksamma de säkerhetsfunktioner som applikationen har. Det kantill exempel vara en https-adress (HTTP Secure) eller information om vad som kommer händamed dina uppgifter och varför. [51], [7] Enligt Dan J Kim har användarens upplevda risk påhemsidan en avgörande betydelse för dennas beslut att avsluta ett köp eller inte.[12]

Omdömen från andra källorI dagsläget bör ingen webbapplikation vara helt separerad från övriga internet. Enligt Harley,Aurora är sammankoppling med andra sidor en mycket viktig faktor för att skapa förtroendeför webbapplikationen. Det måste finnas tillgängliga oberoende omdömen, som inte kan hapåverkas av de som står bakom applikationen för att försäkra användarna om att sidan ärpålitlig. Då användare söker information om en webbapplikations trovärdighet används sällanen enda källa, istället används ett flertal oberoende hemsidor oftast som bas för efterforskning.En isolerad webbapplikation antas antingen ha något att dölja, eller också är det inte enstabilt och etablerat organisation som ligger bakom dess uppkomst, vilket undergräver sidanstrovärdighet. Det som inger störst förtroende hos en kund är om det är ett känt företagsnamneller välkänt varumärke. [45]

2.5 Effektiv köpprocess

Inom e-handel är det vanligt att kunden lämnar köpprocessen innan betalning vilket leder tillatt köpet inte blir av. En mått på detta är Abandonment rate, det vill säga hur stor andel sominte slutför ett påbörjat köp. Baymard institute har sammanställt statistik från 37 st studiermellan 2006 och 2017 om Abandonment rate och den ligger i snitt på 69.23 % [28]. BaymardInstitute undersökte anledningarna till varför kunderna lämnade processen och den främstaanledningen, som 58.6 % av personerna angav, var: “jag kollar bara / jag är inte redo attköpa”. Filtrerades denna anledning bort erhölls fördelning enligt figur 2.1.

DesignkriterierI artikeln ”Customer-centered Rules for Design of e-Commerce Web Sites” av Fang och Salven-dy presenteras ett antal designkriterier eller attribut, som reflekterar de studerade användarnasåsikter om bland annat köpprocessen och produktinformation. Dessa presenteras i tabell 2.2.

Nielsen presenterar också liknande kriterier angående produktpresentation i artikeln ”10Good Deeds in Web Design”. Han menar på att innehållet på alla sidor ska struktureras för attunderlätta avsökning och att produktbilder är viktiga. Stora bilder ska undvikas på sidor därflera produkter visas. Istället ska en miniatyr användas och fullstorleksbilden med eventuellafunktioner, så som zoomning och rotation, ska först finnas på produktsidan. Miniatyrbildenbör dock inte bara var en storleksändrad variant av fullstorleksbilden som lätt kan bli oläsbar,utan en kombination av storleksändring och beskärning bör användas för att framhäva deviktigaste detaljerna hos produkten.[37]

PrestandaAtt ha en köpprocess med dålig prestanda i en webbapplikation kan ofta leda till att besökarelämnar processen och sidan. Mer ingående, om en köpprocess har en laddningstid under tvåsekunder visar det sig att besökare tappar förtroende och lämnar. 47% av internethandlarna i

11

2.5. Effektiv köpprocess

Figur 2.1: Anledningar till varför användare lämnar köpprocessen

undersökningen förväntar sig en laddningstid under två sekunder innan de tappar förtroendeför sidan vilket leder till missnöje.[9]

SökfuntionGenom att implementera en sökfunktion och sortering för produkterna, kan kunden hittaprodukter lättare, vilket har visats ge en betydlig ökning i försäljning [56]. En dålig sökfunktionkan däremot skada navigerbarheten och därmed ge ett sämre intryck. Exempel på dåligaattribut för en sökfunktion är att den inte kan hantera felstavningar, plural och bindestreck[41].

Antal betalsättAtt erbjuda flera betalsätt än ett minskar risken för att besökaren ska lämna processen. IBaymard Institutes undersökning om när besökare lämnar sidan, visar det sig att 8 % lämnarköpprocessen då det finns för få betalsätt.[28]

Obligatorisk registreringEn vanlig orsak till att besökare på en webbshop blir frustrerade, är att de måste registrerasig för att kunna slutföra ett köp. En registrering är bra för besökare som kan tänkas kommatillbaka, men det finns anledningar som gör att användarna inte alls vill registrera sig. Mångabesökare kan även känna att de endast vill handla på sidan en gång och vill därför interegistrera sig. Att ha en frivillig registrering anses positivt.[49]

12

2.5. Effektiv köpprocess

Komponent Designregel/ AttributKategorisering av produkter Kategorisera produkter på ett meningsfullt sätt för vanliga

användare.Djupet av kategorier får ej vara mer än 3Max tre klick för att hitta en produkt

Produktinformation Visa korrekt, konsekvent och detaljerad produktinformationVisa fullständiga bilder av produkternaStorleken av produkterna presenteras på ett mätbart ochjämförbart sättVisa lagerstatus av produkterna i början produktpresenta-tionenPresentera produkter i en tabell med tillräckligt mycket in-formation för att ta beslut om köp. Till exempel pris ochegenskaper för enkel jämförbarhet.Var öppen med och presentera relaterade avgifter på ett kor-rekt sätt.Samma produkter ska presenteras på samma sätt, och hasamma positionProdukterna ska inte tas bort även om de är slut i lager

Kassa och registrering Fråga endast efter nödvändig och meningsfull informationsom namn och adress. Inga marknadsföringsfrågorErbjud kunden möjlighet att navigera runt på sidan utanatt logga in.

Tabell 2.1: Designregler köpprocess

Validering av formulärTvå av de tre vanligaste orsakerna till att avbryta köpprocessen som framgår i tabell 2.1, “Thesite wanted me to create an account” (35 %) och “Too long / complicated checkout process”(27 %), innehåller moment där användaren måste mata in information via ett formulär. I enanvändbarhetsstudie om köpprocesser av Baymard Institute [26] framgick en direkt korrela-tion mellan hur och när användarna fick felmeddelanden och hur snabbt och med hur storansträngning de kunde rätta sina fel. Baymard Institute menar även på att texten och logikenbakom felmeddelandet är viktiga faktorer för en lyckad felhantering, men för att öka använd-barheten ytterligare bör realtidsvalidering användas. Utifrån studien kunde fem fördelar medrealtisvalidering sammanställas:

1. Lättare att hitta fel. Användarna slipper navigera tillbaka till felet.

2. Fortfarande fokus på inmatningsfältets sammanhang. Användaren slipper attåterigen sätta sig in i vad som ska matas in i fältet.

3. Positiv realtidsvaliderng ökar säkerheten hos användaren. Användaren slippersjälv gå igenom formuläret och oroa sig för fel.

4. Mindre risk för att hoppa över obligatoriska fält. Användaren får direkt veta omden missat ett obligatoriskt fält när den använder tab för att ta sig igenom formuläret.

5. Säkerställa kreditkortsdata trots lägre PCI-standard. Minskar risken för att an-vändaren blir nekad när informationen skickas till kreditkortsföretaget på grund av ogiltiginmatning, som till exempel för kort kreditkortsnummer eller passerat utgångsdatum.

I samma artikel ”Usability Testing of Inline Form Validation: 40% Don’t Have It, 20%Get It Wrong” tas även fallgropar och eventuella nackdelar för användbarheten som kan upp-stå om realtidsvalideringen inte implementeras rätt. Är valideringen för aggressiv och visar

13

2.6. Teori för användbarhetstestning

Figur 2.2: Förhållanden mellan olika användbarhetsmått [32]

felmeddelande innan användaren är klar med inmatningen av fältet kan irritation uppstå dåwebbapplikationen påstår felaktigt att användaren har fel trots att den inte har det. För ag-gressiva felmeddelanden kan även leda till att användaren misstolkar felet och börjar felaktigträtta sin hittills rätta inmatning. En annan fallgrop som tas upp är att felmeddelandet in-te tas bort samtidigt när inmatningen är korrekt. Detta kan också leda till att användarenfelaktigt försöker rätta korrekt information. För att komma tillrätta med detta problem börfelmeddelanden uppdateras vid varje tangenttrycking och tas bort så fort informationen ärkorrekt.[26]

2.6 Teori för användbarhetstestning

Användbarhet är ett mångfacetterat begrepp. Det kan dels handla om tekniska prestanda såsom sidladdning, nedladdningshastighet och muspekarförflyttningar men hänsyn måste ocksåtas till mjukare värden som relevans och trovärdighet. [32]Lee och Kozar tar upp 10 måttkopplat till användbarhet, se tabell 2.2.

Användbarhetstestning i praktikenFör att kunna utvärdera och förbättra användbarheten har genom åren ett antal meto-der utvecklats. I ”A comparison of usability evaluation methods for evaluating e-commercewebsites” [24] listas tre huvudsakliga utvärderingsmetoder (usability evaluatin methods,UEMs); användarbaserad (User-based UEM), utvärderarbaserad (Evaluator-based UEM)samt verktygsbaserad (Tool-based UEM). Hasan, Morris och Probets jämför i artikeln detvå förstnämnda som båda bygger på mänsklig interaktion med den testade mjukvaran.Nielsen[42] gör en liknande kategorisering men delar upp Tool-based i automatiserad ochformell men mänsklig analys. I det första fallet, användarbaserad UEM (”empirisk”[42]),observeras ’verkliga’ användare som genomför fördefinierade listor av uppgifter för att kunnaidentifiera och gradera problem i applikationens användbarhet. För utvärderarbaserad UEMär det istället experter som utvärderar gränssnittet utifrån gällande principer om användbar-het (heuristisk utvärdering). [24] Exempel på uppgifter som panelen i en användarbaseradUEM ska utföra i frågan om att utvärdera en webbutik är; köpa en specifik produkt, ändrakvantitet, hitta priser, lista produkter med specifika egenskaper, kontakta kundservice usw.

14

2.6. Teori för användbarhetstestning

Construct ItemsConsistency (1)The website repeats the same structure, components, and overall

look across pages. (2) The website contains similar components acrossweb pages. (3) Web pages in the website are consistently designed.(4) Each web page on the website is of similar design. (5) The websiteadheres to rules and standards of other online shopping sites.

Navigability (1) The website provides multiple search features (e.g., search engi-ne, menu bar, go-back-and-forward button, etc.) to obtain the targetinformation. (2) The web page that I am looking for can be reachedthrough multiple pathways. (3)There are multiple ways to access theweb page that I am looking for and/or return to shopping menus. (4)It is very easy to locate what is needed in this website. (5) The websitekeeps the user oriented as they shop.

Supportability (1) While visiting the website, I feel that I can get just-in-time supportanytime I need it. (2) The website provides features to ask for helpanytime I need. (3) Getting support through a series of options is easyand convenient.

Learnability (1) The contents provided by the website are easily understood. (2)The website is designed for easy understanding. (3) I can easily re-member how to reach the same page when I visit next time. (4)Astime passes, I am more accustomed to the website with less effort.

Simplicity (1) The structure of the website is succinct. (2)I can comprehend mostcomponents of a page within seconds. (3) The website has componentsthat are not necessary. (4) There are redundant components in thewebsite.

Interactivity (1) The website provides an appropriate amount of interactive fea-tures (e.g., graphics, pop-up windows, animation, music, voices). (2)The website contains components to help the interaction between itand consumers. (3)Interactive features of the website are vivid andevoke responses. (4)The website provides features for interactive com-munication between consumers, or between consumers and the onlinecompany.

Telepresence (1) I felt empathy with the website. (2) I feel I have personal ties tothe website. (3)I feel as though I am emotionally connected to thewebsite. (4) I feel as though I am taking part with the website.

Credibility (1) I feel safe in my transactions with the website. (2) I trust thewebsite to keep my personal information safe. (3)I trust the websiteadministrators will not misuse my personal information. (4) The web-site is stable to use. (5) Services are routinely delivered as promised.(6)The website provides detailed information about security features.

Content Relevance (1) The website contains in-depth information. (2) The website pro-vides up-to-date information. (3) The scope of information providedby the website is appropriate. (4) The information provided by thewebsite is accurate.

Readability (1) The websites wording is clear and easy to understand. (2) Thewebsite has enough white space (or margins) to make it readable. (3)Every page contains the appropriate amount of components to into apage. (4) The website uses colors and structures that are easy on theeyes.

Tabell 2.2: 10 mått på användbarhet [32]

15

2.6. Teori för användbarhetstestning

Testgruppens storlek föreslås vara 8-20 personer [24]. Expertpanelen kan utgå från ett ramverkav kategorier för att bedöma mjukvarans användbarhet, till exempel utifrån kategorier somarkitektur/navigation, innehåll, tillgänglighet/kundservice, design och köpprocess [24] menockså arbeta mer fritt utifrån intuition och sunt förnuft [42].

I boken “Observing the user experience: a practitioner’s guide to user research” [21] före-slår författarna två nedskalade varianter av empirisk användbarhetstestning: ”Nano-UsabilityTest” och ”Micro-Usability Test”. I den förstnämnda introduceras produkten för en person somuppmanas använda den för att utföra någon uppgift under 15 minuter utan några närmareinstruktioner. 15-minuters modellen är effektiv eftersom den snabbt och billigt kan ge svarpå grundläggande problem i funktionaliteten. Det är inte någon djupgående metod men somförfattarna påpekar, ”användbarhet är inte hjärnkirurgi” [21]. För ett ”Micro-Usability Test”krävs lite mer förberedelser. Processen består av fyra steg:

1. Definiera målgruppen och dess mål

2. Skapa uppgifter som syftar till att uppfylla dessa mål

3. Sätt ihop testgrupp

4. Observera när testgruppen utför sina uppgifter

Målgruppen bör definieras tydligt så att den är anpassad till den aktuella produkten. Detär onödigt att försöka testa användbarhet på någon som inte är aktuell för att köpa elleranvända produkten.

Vidare ska produktens nyckelkomponenter identifieras. Skapa en lista över vilka egenskaperden har och varför produkten ska användas och vilket värde den skapar för kunderna.Dessabör användas för att definiera uppgifter, som ska uppfylla kundernas mål eller avsikter medatt använda produkten. Det ska vara specifika uppgifter som går att utföra, exempelvis köpaen specifik produkt, söka efter produkter eller använda supportfunktioner.

För att sätta ihop testgruppen går det bra att använda personer i projektets närhet, kollegoreller vänner men hänsyn bör tas till att de helst inte ska vara partiska i frågan om vad de tyckerom produkten eller tjänsten. Det är också en fördel om gruppen inte består av professionelladesigners eftersom de helt enkelt är för insatta i frågeställningarna. Testgruppen kan urskiljasmed hjälp av ett förtest alternativt väljas utefter specifika kriterier [29]. Testgruppen får gärnabestå av fem till sex personer.

I sista steget ska först ett manuskript utformas som testdeltagarna sen ska följa. Det ären fördel om deltagarna kan läsa uppgifterna själva för att testen ska bli så likvärdiga sommöjligt. Testets olika delar ska även ges till testpersonen som deluppgifter. Det gör att riskenminskar för att testpersonen förväxlar de definierade uppgifterna och går händelserna i förväg[29]. Under testet är det viktigt att deltagarna ska vara införstådda med att det är produktenoch inte de själva som ska testas och att de ska utföra momenten på manuskriptet så gott detgår. Observera deras beteenden och låt dem kommentera sina beslut och eventuella problem.Webbläsare och andra hjälpmedel som behövs för att utföra uppgifterna ska vara nollställdaföre varje testdeltagare genomför sina uppgifter.

Insamling av material under testet kan ske enligt olika metoder. Manuell datainsamlinggörs av en eller flera observatörer till testet som antecknar testpersonens framsteg under testetsgång genom att använda specificerade formulär för vilken information som ska samlas. Detkan vara både kvalitativ eller kvantitativ information, om exempelvis hur mycket hjälp test-personen krävde under testets gång eller kommentarer som gavs av testpersonen. Vidare kananvändargenererad datainsamling användas. Då testpersonen får besvara ett formulär på sam-ma dator som används under testets genomförande. Formuläret är vanligtvis en checklista eller

16

2.7. Enkätundersökning

frågeformulär som används för att besvara den givna uppgiftens svårighetsgrad. Vid utform-ning av ett formulär krävs beräkning i att inte använda ord som är okända för testpersonenoch att inte författa frågorna så att testpersonen kan förutspå dess givna svar.[29]

Testgruppens StorlekEnligt Virzi i hans studie om vilken testgruppsstorlek som är optimal för att kunna erhålla ettrelativt pålitligt resultat samtidigt som kostnaderna för testningen hålls nere, finner virzi attdet räcker med fem testpersoner för att uppräthålla pålitliga resultat. Detta är enligt Virzienavvägning av kostnad mot nytta och fem personer anses vara en bra testgruppsstorlek urdenna aspekt. Då man använder sig av större testgrupper avtar enligt Virzi den marginellaupptäckandegraden av buggar i systemet, om man begränsar testgruppen till fem individerkan man förvänta sig att finna cirka 80 % av alla buggar. [59]

Enligt Faulkner finns det vissa brister i Virzis teori presenterad ovan. I sin artilek ”Beyondthe five-user assumption: Benefits of increased sample sizes in usability testing” menar Faulkneratt det finns stor varians av upptäckandegraden då man använder en testruppsstorlek på femindivider. Faulkner menar att den lägsta upptäckandegraden för ett sådant test ligger på cirka50 %. Istället menar Faulkner att man med fördel kan öka testgruppens storlek till tio individer,för att kunna uppnå en lägsta upptäckandenivå om cirka 80 %. [16]

Tidpunkt för testningEnligt Goodman, Kuniavsky och Moed är användbarhetstestning inget som bör sparas till närprodukten är färdig utan snarare göras iterativt under utvecklingsfasen. Som mest effektiv ärden enligt författarna i de tidiga och halvfärdiga faserna av utvecklingen, gärna innan olikafunktionerna är helt fastställda. Användbarhetstestning blir på så sätt värdefullt för att testahelt nya funktioner (exploratory), när funktioner implementeras (assessment), för att jämförafunktioner mot varandra (comparison) eller för att fastställa att en funktion uppfyller vissakrav eller standarder senare i utvecklingsfasen (validation). Att vara medveten om vilken typav användbarhetstestning som är aktuell för olika faser och funktioner i produktutvecklingenger oftast mer insiktsfulla resultat än att bara fiska efter svar. [21]

2.7 Enkätundersökning

Att utforma och tolka resultaten från enkätundersökningar är enligt Colton och Covert enkonstform i sig. [8]. Den vanligaste grunddesignen utgår från Likertskalan [8, 10] (vanligenuttryckta som numeriska värden där respondenten får sätta ett värde på hur väl denna hållermed om ett påstående eller fråga [10]). Fördelar med att använda Likertskalan är en enligtCooper och Johnson dels att både respondenter och frågeställare är bekväma med formatet,dels att det är en enkättyp som går att anpassa till många olika frågeställningar [10]. Ettvanligt problem, enligt Cooper och Johnson, är bland annat hur svar som placerar sig mitti spektrat (vanligen ”tre” på en femgradig skala) där detta kan vara ett uttryck både fören faktisk indifferens men lika gärna beteckna ett ovilja att ge ett socialt opassande svar.Ett sätt att komma runt problemet är enligt Cooper och Johnson att (1) dela upp oklaraeller mångtydiga frågor i flera olika för att bringa klarhet eller att (2) var särskilt noggrann ispråkbruket när det gäller svarsalternativen för att eliminiera alltför neutrala alternativ [10]eller risken att omedvetet föra in mångtydighet i svarsalternativen [6].

2.8 Brainwriting

Metoden går ut på att under en given tid ska alla deltagare skriva ned tre idéer på ett papperoch skicka vidare papperet till nästa person när tiden är slut. Alla skriver alltså på sammagång. Utifrån den tidigare personens idéer kan du välja att antingen vidareutveckla dessa eller

17

2.8. Brainwriting

att fortsätta komma på nya. Detta upprepas till dess att papperna har gått ett varv runtbordet.[43]

I kontrast till den mer traditionella Brainstormingen där gruppen genererar idéer genom atttala är Brainwriting en metod där de i tystnad skriver ned och delar idéer. Undersökningar harvisat att Brainwriting genererar fler unika idéer än de verbala metoderna i det inledande stadietav ett projekt [22, 44]. Det som visat sig vara den avgörande skillnaden från brainstorming äratt deltagarna inte behöver oroa sig för omedelbar återkoppling för kvaliteten, att det finns engiven tidsram och att genereringen av idéerna bygger på andras [43].

18

3 Metod

19

3.1. Förstudie

3.1 Förstudie

Beskriver de metoder som tillämpats före implementeringen av webbapplikationen och debeslut som togs kring webbapplikationens utkristallisering.

Enkätundersökning till affärsidéEn enkätundersökning genomfördes för att ge underlag i skapande av e-handel som enligtfrågeställning ska erbjuda god navigerbarhet, pålitlighet och en effektiv köpprocess. Enkätun-dersökningen utformades online via ett formulärverktyg ägt av Google Drive och distribueradesdärefter på fyra studentgrupper via plattformen Facebook. Formuläret innehöll sju frågor sombesvarades genom flersvarsalternativ samt fri text. Frågorna riktades för att besvara markna-dens inställning till utmaningsmoment, användning av sociala medier samt gifting. Avgräns-ningen för spridningen av enkäten enbart till studenter ansågs tillräcklig då denna innehålleren stor del av målgruppen.

Insamling av materialArbetet har använt sig av ett flertal rapporter samt ytterligare litterärt underlag för att stödjametoder, tillämpningar samt tillvägagångssätt. Vid användning av dessa externa källor ge-nomfördes källkritisk granskning av äkthet, närhet, beroende samt tendens av informationensinnehåll. [2]

PrototypframtagningFör att besvara frågeställningen krävdes framtagning av en webbapplikation. Upplägget förarbetets framfart är att verka enligt en iterativ process som startade i och med en proto-typframtagning. Ett flertal enklare arbetsmetoder användes för att generera en prototyp avden tänkta produkten. Idégenerering genomfördes enligt en Brainwriting teknik som i vissafall lämpas bättre för att ta vara på samtliga deltagares idéer, undvika att fastna i specifikatankebanor samt att minska tiden för idégenerering.[58]

En treminutersperiod per idésession tillämpades under processen och resultatet fanns sedantill grund för projektets produktbacklog och prototyp.

Visualiseringen av webbapplikationens funktioner gjordes först genom enklare skisser medpapper och penna. Detta för att öka flexibiliteten i framtagningen av funktionaliteten samtför att skapa en tydlig visuell grund för projektets utformning. Användningen av papper ochpenna anses i vissa fall lämpas som en viktig del för kommunikation inom områden som design.Efter att prototypen fastställts digitaliserades och strukturerades skissen med verktyget AdobeIllustrator.

3.2 Implementation

I denna del beskrivs implementationen av webbplatsen och de arbetsmetoder som använts föratt undersöka frågeställningen.

Utvecklingsspråk och ramverkValet att designa en RIA med ”Single Page Application” gjordes tack vare användbarhets-fördelarna, se teori 2.1. Vid utveckling av applikationens backend valdes utvecklingsspråketPython med ramverket Flask. Fördelen med användningen av Flask är ett det är ett så kallat”micro framework”. Det innebär att ramverkets funktioner är i sin grund väldigt simpla, mendet finns möjlighet att utöka dessa[57]. På detta vis kunde gruppen välja vilka funktioner avFlask som vill användas själv, vilket gjordes så att de skulle passa utveckling av en ”SinglePage Application” samt så att vissa grundläggande funktioner slapp utvecklas på egen hand.

20

3.3. Utvärdering

En PostgreSQL-databas användes för att lagra data, så som produkter eller användare, vilkenkodades i SQLite. Under utvecklingsfasen kördes servern lokalt på utvecklarnas datorer i Pyt-hons virtuella miljö virtualenv för att enkelt köra den nuvarande versionen av applikationen. Iett senare skede av utvecklingsfasen distribuerades även en live-version till Heroku. Heroku ären plattform som låter utvecklare testa sina applikationer i molnet, vilket gruppen använde föratt förenkla användartesting då applikationen inte längre behövde köras lokalt[14]. Frontendutvecklades i HTML, CSS och Javascript med biblioteket jQuery, ett bibliotek som hjälperatt manipulera och animera webbapplikationer[18], och ramverket Bootstrap, ett CSS ram-verk vars design fungerar över flera plattformar[4]. Utvecklingen av både frontend och backendutvecklades med hjälp av den integrerande utvecklingsmiljön, IDE:n, Jetbrains PyCharm ochtexeditorn Atom. Som betalningsfunktion i applikationen används Stripe, en betalningstjänstmenad att vara lätt för utvecklare att implementera och är säkert designad för att undvikabedrägeri[53].

Iterativt förbättringsarbeteWebbapplikationen utvecklades genom iterativt förbättringsarbete. Totalt genomfördes treiterationer och för att underlätta versionshanteringen användes git med hjälp av plattformenGitlab. Under samtliga iterationer togs hänsyn till navigerbarhet, pålitlighet och köpprocessenseffektivitet och ett användartest genomfördes i slutskedet av varje iteration. Resultatet frånanvändartestet analyserades och förbättringsmöjligheter hos webbapplikationen identifieradestill nästa iteration i arbetet.

En första version av webbapplikation utvecklades utifrån prototypen och produktbacklog-gen med mål att vara en fungerande sida med hänsyn till inloggning samt registrering. Underiteration två fanns fokus på implementation av funktioner gruppen ansåg önskvärda att finnasmed i applikationen samt förbättring av tidigare funktioner. Vid den slutliga arbetsprocessenstod webbapplikationens design i fokus samt implementering av mindre omfattande funktionersom uppkommit under tidigare användartester.

3.3 Utvärdering

I avsnittet presenteras den metod som tillämpades för utvärdering av webbapplikationen.

AnvändartestFör att testa navigerbarhet, pålitlighet och köpprocessens effektivitet hos applikationen utför-des användarbaserade tester konstruerade utifrån artikeln Running a Usability Test [48] ochkapitlet A Micro-Usability Test [20]i fyra steg.

1. Definiera användare och deras målsättning

Steg ett utfördes i förstudien med marknadsundersökning och utförande av marknadsförings-plan med bland annat STP-analys (se appendix B.9). Målgruppen för den planerade produktendefinierades och användes för framtida underlag.

2. Skapa uppgifter som syftar till att uppfylla dessa mål

Utefter målgruppen och prototypens stadium utformades uppgifter inför varje test. Uppgifter-na skiljde sig delvis inför olika test då produkten utvecklats olika mycket i respektive stadium.En del funktioner fanns ej implementerade tidigt i processen vilket togs i beräkning undertestens gång. Uppgifterna bestod av 3-5 mindre test som skulle genomföras. (Se appendixA.1 för uppgifterna som togs fram för testerna). Däremot har frågorna varit samma över allaiterationer.

21

3.3. Utvärdering

3. Sätt ihop testgrupp

Enligt marknadsundersökningens resultat för målgrupp och enligt produktens utformning val-des testpersoner från Linköpings Universitet. Testgruppens sammansättning underbyggdes avde delar som Goodman, Kuniavsky och Moed vidrör i avsnitt 2.6 och valdes så att de ansågsvara opartiska och någorlunda lika den framtagna målgruppen. De tre fristående testgruppernasom användes vid de tre testtillfällena varierade i storlek mellan fyra till fem personer.

4. Observera när testgruppen utför sina uppgifter

Varje person ur testgruppen utförde testet individuellt på tillhandahållna Macbook-datoreri webbläsaren Safari eller Windows laptops i webbläsaren Chrome. Innan testet började varobservatörerna noga med att poängtera att, om testpersonen fastnade eller inte klarade aven uppgift var det inte fel på personen utan webbapplikationen samt att det är webbappli-kationen som testas och inte testpersonen. Testpersonen blir även instruerad att prata ochförmedla intryck medan denne genomför uppgiften, men att observatörerna sitter tysta undertiden och ska ignoreras, avsnitt 2.6. Testpersonen informerades även om antalet uppgifter somskulle genomföras och att denne kommer få ta del av uppgifterna en i taget. Detta för attöka fokuseringen på den givna uppgiften enligt teoriavsnitt 2.6.En till två personer fungeradesom observatörer och tillämpade manuell data insamling genom att föra anteckningar underförloppet om: fel, kommentarer från testpersonen och hur lyckat uppgiften utfördes. Eftertestets slut tillämpades användargenererad datainsamling (teoriavsnitt 2.6) genom att använ-darna svarade på en enkät. Enkäten innehöll frågor om intryck av webbapplikationen medavseende på olika parametrar kopplade till det framtagna syftet samt parametrar kopplade tillproduktens stadium. För enkät, se appendix A.3. När alla uppgifter var utförda var testet slutoch cacheminnet i webbläsaren rensades och flikar stängdes ner för att kunna utföra testet pånästa person.

Enkätdesign

För att kvantifiera materialet från användartesterna utformades testenkäten med inspirationav idéerna från Cooper och Johnson och Colton och Covert. Likertskalan valdes med tanke påatt det skulle ge respondenterna enklast möjliga utgångsläge. I utgångspunkt var inslaget avatt se var användarna fastnade i sina tester, samt deras kommentarer under genomförandetdet centrala, dock var enkäterna viktiga för att få jämförande mått mellan iterationerna. I linjemed Cooper och Johnson förslag om att använda ett konsekvent språk och addera frågor föratt undvika att för många svar hamnade för nära den neutrala zonen utformades en enkät somansågs vara tillräckligt noggrann. Efter första iterationen visade sig att vissa av enkätfrågornatrots denna ansträngning gick att tolka på flera sätt. I detta skede gjordes en avvägning omatt det trots bristerna skulle vara bättre ur studiesynpunkt att inte förändra enkätdesignen,detta för att inte tappa jämförbarheten mellan testiterationerna.

Testgruppens StorlekUtifrån teori presenterad i teoriavsnitt ’Testgruppens Storlek’ 2.6 valdes det att under arbetetsgång använda sig av mindre testgrupper om fem individer. Detta val gjordes då fem individeranses vara kostnadseffektivt i testningssamband. Större testgrupper skulle troligtvis ge ett mersanningsenligt resultat, som påpekas av Faulkner men detta skulle också kräva en betydligtstörre anstängling i form av testförberede lser och tid vilket diskuteras av Virzi. Eftersomdet dessutom planerades att genomföra en serie av användartester ansågs fem personer varaoptimalt som underlag för utvärdering av användartester. 2.6

22

4 Resultat

23

4.1. Förstudie

4.1 Förstudie

I figur 4.1 presenteras protoypen som framtogs under förstudien.

Figur 4.1: Prototyp för webbapplikation

Resultatet av enkäten för affärsidén till webbapplikationen sammanställdes och finns somdel i en marknadsföringsplan (se appendix B.2).

4.2 Implementation

I detta avsnitt presenteras det tekniska resultatet av webbapplikationen efter den tredje ochsista iterationen.

Övergripande design och funktionalitetAvsnittet beskriver den övergripande design och funktionalitet som finns implementerad påwebbapplikationen.

Navigationsmeny

Navigationsmenyn ser olika ut beroende på vilken sida som används samt vilken vy på start-sidan som iaktas, samtliga sidor har dock en liknande design av navigationsmenyn. På startsi-dans första vy, finns en transparent navigationsmeny där användaren kan navigera sig genomlänkarna (Se figur 4.2). Scrollar användaren ner på startsidan ändras navigationsmenyns bak-grundsfärg till vit och textfärgen till svart (Se figur 4.3). På övriga sidor används samma designoch struktur som på startsidans andra vy.

Köpprocessens navigationsmeny skiljer sig. Här finns inte länkarna “Om” och “Har du blivitutmanad?” och logotypen är ersatt med länken “Avsluta” som leder tillbaka till startsidan (Sefigur 4.4). Är användaren inloggad byts länkarna registrering och logga in till användarensanvändarnamn och en logga ut länk (Se figur 4.5). Klickar användaren på sitt användarnamnkommer denne till sin profilsida.

24

4.2. Implementation

Figur 4.2: Navigationsmeny 1, Startsida oscrollad

=======

Figur 4.3: Navigationsmeny 2, Startsida scrollad och övriga sidor

Figur 4.4: Navigationsmeny 3, Köpprocessen

Fot

I foten kan användaren navigera sig till olika sidor och sektioner genom länkarna, hitta kon-taktmail samt genom ikonerna öppna en ny flik till sidans Instagram och Facebook. Se figur4.6.

Knappar

Sidan innehåller två olika standard-knappar. En röd och en svart, se figur 4.7. Hålls muspekarenöver den röda knappen efterliknar denna den svarta knappens design. Samma sak gäller densvarta, den efterlikar den röda knappens design. När knappen är låst för klick ändras färgentill en mer transparent färg se figur 4.7.

DatabasTill applikationen implementerades en relationsbaserad databas i PostgreSQL med datamo-dellen i figur 4.8.

StartsidaStartsidan är den vy användaren först möts av (se figur 4.9). Den är implementerad somen portfoliosida med tre möjliga vyer och fungerar som bakgrund till tre möjliga modaler.Webbapplikationens logotyp är placerad i övre vänstra hörnet och verkar alltid som en länktill startsidan vid uppkomst enligt teori 2.3. Logotypen är designad i enhet med både tjänstoch i enhet med övrigt utseende på webbapplikationen.

Överst på startsidan finns den vågräta navigationsmeny som följer med då användaren an-vänder scroll för att förflytta sig upp och ned på startsidan. Första vyn på startsidan uppmanaranvändaren till köp med hjälp av en text samt en tydlig knapp som leder direkt till köppro-cessen. Det finns två texter som varieras på startsidan med ett intervall på fem sekunder. Vidbyte av text sätts även knappen till köpprocessen i rörelse. I bakgrunden på startsidans förstavy finns en stor bild. Denna finns kvar vid byte av text behåller samma storlek vid minskningav skärmen. En mindre del av bilden syns då skärmen minskar.

Det finns tre tillvägagångssätt för att att ta sig till nästa vy på startsidan. Det är vianavigationsmenyn, genom att klicka “Om”, genom att scrolla nedåt samt genom att klicka på

Figur 4.5: Navigationsmeny 4, inloggad användare

25

4.2. Implementation

Figur 4.6: Fot

Figur 4.7: Knappar

pilen nedåt som finns längst ner på startsidans första vy. På startsidans andra vy beskrivskonceptet bakom webbapplikationen ChiliChallange med text och bild i direkt anslutning tillen knapp för att påbörja köp. Se figur 4.10. Alltså kan användaren påbörja köp på bådestartsidans första samt andra vy.

Startsidans sista och tredje vy visar webbapplikationens sociala medier i form av de fyra se-naste inläggen som ChiliChallenge publicerat på Instagram. Bilderna uppdateras automatiskten gång om dagen.

Inloggning och registreringI navigationsmenyn finns alternativen “Logga in” eller “Registrera dig” tillgängliga på samtligasidor hos webbapplikationen. När någon av länkarna klickas på visas en modal för respektivesyfte. Modalen kan stängas ner genom att klicka på “Stäng” i foten hos modalen, på ett kryssi vänstra hörnet eller någonstans utanför modalen. Stängs modalerna ner och öppnas igenbehåller inmatningsfälten i modalerna sina eventuella tidigare värden.

I både logga in- och i registreringsmodalen erbjuds användaren att logga in med sitt befintli-ga Facebook- eller Googlekonto. Första gången detta görs skapas en ny användare automatisktsom används för att logga in den då befintliga användaren.

RegistreringVäljer användaren att registrera sig via mail visas ett formulär där endast de obligatoriskafälten mail, användarnamn och lösenord visas. Under formulärfälten kan användaren med enknapp välja att visa eller dölja inmatningsfält för adress vilken är frivillig. Om adressfältenvisas kan Förnamn, Efternamn, Adress, Postnummer och Stad fyllas i. Samtliga fält validerasi realtid och submit-knappen är inaktiverad tills hela formuläret är korrekt. Felmeddelandetuppdateras om det inte skett någon knapptryckning på 0.5s efter att användaren börjat fyllai fältet eller om fältet lämnas. Efter en lyckad registrering loggas användaren automatiskt in,modalen stängs och ett bekräftelsemail skickas till den ifyllda mailen.

26

4.2. Implementation

Figur 4.8: ER-diagram till implemeterad databas

Logga inI inloggningsmodalen presenteras ett formulär med två inmatningsfält för att logga in medantingen användarnamn eller mail. Kontroll om användaren finns i databasen och om lösenor-det är korrekt körs efter submit-knappen tryckts och eventuella felmeddelande visas. Underformuläret finns länkar för glömt lösenord och registrering ifall inloggningsmodalen öppnas ochanvändaren inte har ett konto.

KöpprocessenKöpprocessen består av fyra steg. Vilket steg användaren är på visas visuellt med röd markeringöver ikonen i fliken (Se figur 4.14). Användaren kan inte heller gå vidare till nästa flik förensdet aktuella steget är ifyllt och färdigt. Köpprocessen kan avslutas när som helst under allasteg genom att klicka på länken “Avsluta” och kommer då tillbaka till startsidan. Användarenkan även under hela processen registrera sig och logga in, detta utan att omdirigeras frånprocessen. Det som visas på figur 4.14 är element som återfinns genom hela köpprocessen.,vilket även gäller en nästa knapp (se figure 4.15). När användaren trycker på ”Nästa” skerförflyttning till nästa steg i processen och i sista steget heter knappen “Köp nu!”.

Steg 1 - Produktvyn

Köpprocessen börjar då användaren kommer till processens första steg, produktvyn. Här kananvändaren med en rullgardinsmeny, välja hur många personer mellan 1-4 den vill skickaen produkt till (Se figur 4.16). En sådan person kallas härefter “mottagare”. Produkternaligger i en sektion i fönstret och väljer användaren mer än en mottagare kommer det valdaantalet sektioner visas i en dragspelsmeny. I varje sektion görs valet av produkt för respektive

27

4.2. Implementation

Figur 4.9: Startsida ChiliChallenge

Figur 4.10: ”Om”-sida ChiliChallenge

användare. Dragspelsmenyn fungerar genom att endast en sektion i taget är öppen. Klickaranvändaren på knappen “Mer info” vid en produkt visas en modal med mer information omprodukten (Se figur 4.17). Den modalen stängs genom att klicka på kryss i högra hörnet,klicka på knappen “Stäng” eller klicka utanför modalen. När användaren trycker på “Välj”vid en produkt ändras färgen på produktens ram från svart till röd för att markera att denär vald (Se figur 4.14) och om flera ska utmanas stängs sektionen användaren är i och öppnarnästa sektion. Det är möjligt att klicka på nästa knappen först när man valt produkt för allamottagare.

28

4.2. Implementation

Figur 4.11: Modal för inloggning

Figur 4.12: Modal för registrering

Steg 2 - mottagarens uppgifter

För att fortsätta köpprocessen behöver användaren fylla i uppgifter på den eller dem somutmanas. Beroende på hur många personer som ska utmanas, vilket valts i steg 1, kommermotsvarande antal sektionsrubriker visas. Dessa fungerar på samma sätt som i tidigare steg.När alla adressuppgifter är ifyllda i en sektion, kommer nästa mottagares uppgifter enkelt uppmed ett tryck på “Vem ska få andra utmaningen?”. Då stängs första mottagarens adressfält. Påsamma sätt upprepas processen för antalet mottagare. När alla uppgifter för alla mottagareär inskrivna kan användaren trycka på nästaknappen. Om det bara är en person som skautmanas fyller man i alla uppgifter i den sektionen och trycker direkt på nästaknappen. Detfinns vissa krav på informationen som skrivs in, exempelvis måste ett postnummer vara femsiffror långt. Om det som skrivits in inte uppfyller kraven kommer ett meddelande visas dåanvändaren klickar sig vidare till nästa informationsfält (se figur 4.18 ). Det finns också en“Föregående” knapp som gör att användaren kommer tillbaka till steget innan.

29

4.2. Implementation

Figur 4.13: Exempel på felmeddelande

Figur 4.14: Flikar i Köpprocessen

Figur 4.15: Köpprocess, produktvy

Steg 3 - Personligt meddelande till mottagaren

Även det här steget är uppbyggt med sektioner i en dragspelsmeny likt steg 2. Här skriveranvändaren in ett meddelande som ska levereras till respektive mottagare. När alla sektionersmeddelanden är inskrivna är det möjligt att klicka på nästaknappen. Föregåendeknappen göratt användaren kommer tillbaka till steget innan.

Steg 4 - Orderöversikt

I det här steget ges en överblick av ordern som en sammanfattning av tidigare angiven informa-tion. För varje mottagare visas en tabell med den valda produkten, adressuppgifter samt detmeddelande som kommer skickas. I slutet visas totalsumman av ordern. Här kan användarenantingen gå tillbaka och ändra uppgifter alternativt fortsätta köpet genom knappen “KÖPNU!”.

Betalfunktion

När användaren klickar på knappen “KÖP NU!” visas en modal med stripes gränssnitt för kort-betalning (Se figur 4.14). Användaren ombeds mata in mailadress och kortuppgifter. Klickaranvändaren vidare för att betala sker en omdirigering till en ny sida med bekräftelsemeddelan-de (Se figur 4.15). Här får användaren information om till vilken mail bekräftelsen levererasmed information om ordern samt uppgifter om mottagaren av den valda produkten. Använ-daren kan gå vidare genom det två knappar “Startsidan” och “Köp en till Chili” alternativtanvända navigationsmenyn eller foten för att navigera sig vidare.

30

4.3. Utvärdering och testgrupper

Figur 4.16: Köpprocess, produktvy med flera mottagare

Figur 4.17: Köpprocess, produktvy, modal för ”Mer Info”

4.3 Utvärdering och testgrupper

I detta avsnitt presenteras en sammanfattning av resultatet av de användartester som genom-förts på webbapplikationen ChiliChallenge (Se appendix A.2 för utförligare data från testerna).Tre stycken tester har gjorts för varje iteration i utvecklingsprocessen av webbapplikationenmed varierande funktionalitet och utseende.

Samtliga testgrupper som genomförde användbarhetstestet var studenter från LinköpingsUniversitet som läser Industriell ekonomi med teknisk inriktning datateknik. Grupperna hadevarierande insikt i webbapplikationens koncept och syfte. Testgrupp 1 deltog innan testet i enövergripande