Betydelsen av navigerbarhet och design vid utvecklingen av en webbutik för försäljning av universitetsmärkta produkter

Linköpings universitet

2020 | LIU-IDA/LITH-EX-G--20/001--SE

Betydelsen av navigerbarhet och

design vid utvecklingen av en

webbutik för försäljning av

universitetsmärkta produkter

The significance of navigability and design when developing an

E-commerce web platform for selling university labeled products

Daniel Bissessar

Ebba Rosander

Erik Lundin

Haore Ahmadi

Hashem Hammoush

Joakim Eng Engmark

Oscar Olsson

Sindre Jonsson Wold

Handledare : János Dani Examinator : Aseel Berglund

Detta dokument hålls tillgängligt på Internet - eller dess framtida ersättare - under 25 år från publice-ringsdatum under förutsättning att inga extraordinära omständigheter uppstår.

Tillgång till dokumentet innebär tillstånd för var och en att läsa, ladda ner, skriva ut enstaka kopi-or för enskilt bruk och att använda det oförändrat för ickekommersiell fkopi-orskning och för undervisning. Överföring av upphovsrätten vid en senare tidpunkt kan inte upphäva detta tillstånd. All annan använd-ning av dokumentet kräver upphovsmannens medgivande. För att garantera äktheten, säkerheten och tillgängligheten finns lösningar av teknisk och administrativ art.

Upphovsmannens ideella rätt innefattar rätt att bli nämnd som upphovsman i den omfattning som god sed kräver vid användning av dokumentet på ovan beskrivna sätt samt skydd mot att dokumentet ändras eller presenteras i sådan form eller i sådant sammanhang som är kränkande för upphovsman-nens litterära eller konstnärliga anseende eller egenart.

För ytterligare information om Linköping University Electronic Press se förlagets hemsida http://www.ep.liu.se/.

Copyright

The publishers will keep this document online on the Internet - or its possible replacement - for a period of 25 years starting from the date of publication barring exceptional circumstances.

The online availability of the document implies permanent permission for anyone to read, to down-load, or to print out single copies for his/hers own use and to use it unchanged for non-commercial research and educational purpose. Subsequent transfers of copyright cannot revoke this permission. All other uses of the document are conditional upon the consent of the copyright owner. The publisher has taken technical and administrative measures to assure authenticity, security and accessibility.

According to intellectual property law the author has the right to be mentioned when his/her work is accessed as described above and to be protected against infringement.

For additional information about the Linköping University Electronic Press and its procedu-res for publication and for assurance of document integrity, please refer to its www home page: http://www.ep.liu.se/. © Daniel Bissessar Ebba Rosander Erik Lundin Haore Ahmadi Hashem Hammoush Joakim Eng Engmark Oscar Olsson Sindre Jonsson Wold

Studies show that web shops with a good design and easy-to-navigate structu-re positively affect the usability. To test this claim, LiU-stostructu-re’s curstructu-rent web shop was developed according to design and navigation principles and according to the wishes of the customer group. The purpose of the work is to determine whet-her a development of LiU-store’s web shop, based on navigability and design, can appeal to university students. The web shop’s design was iteratively deve-loped and implemented functionality was supported by the feasibility study as well as research in the area. Changes from the original webshop were implemen-ted after an evaluation of functionality in the feasibility study and after further tests that were carried out during the work. A definitive test was performed to compare the developed website with the current one. The result showed that after the development, the usability of the web shop was perceived as 90 out of 100 on the System Usability Scale (SUS), while LiU-store’s previous design was rated 61.7 out of 100. The factors causing the higher usability seem to be the pre-sence of a search function, the prepre-sence of sorting and filtering functions and a site structure with few layers that minimizes the amount of clicks.

Studier visar att webbutiker med en god design och lättnavigerad uppbygg-nad positivt påverkar användbarheten. För att testa detta påstående utveckla-des LiU-stores nuvarande webbutik efter utveckla-design- och navigeringsprinciper samt efter kundgruppens önskemål. Syftet med arbetet är att avgöra huruvida en ut-veckling av LiU-stores webbutik, med utgångspunkt i navigerbarhet och design, kan tilltala universitetsstudenter. Webbutikens design utvecklades iterativt och implementerad funktionalitet underbyggdes av förstudien såväl som forskning inom området. Förändringar från den ursprungliga webbutiken implementera-des efter en värdering av funktionalitet i förstudien samt efter ytterligare tes-ter som utfördes under arbetes gång. Ett slutgiltigt test utfördes för att jämföra den utvecklade hemsidan med den nuvarande. Resultatet visade att efter ut-vecklingen uppfattades webbutikens användbarhet som 90 av 100 på systeman-vändbarhetsskalan SUS, medan LiU-stores tidigare design värderas till 61,7 av 100. De faktorer som orsakade den högre användbarheten tycks vara förekoms-ten av en sökfunktion, förekomsförekoms-ten av sorterings- och filtreringsfunktioner samt en sidstruktur med få lager som minimerar antalet klick.

Vi skulle vilja ge ett stort tack till vår handledare János Dani som under rapportens gång alltid har varit snabb på att ge återkoppling och feedback samt alltid funnits tillgänglig när frågor och funderingar har uppkommit. Vi vill även rikta ett tack till vår examinator Aseel Berglund för god feedback samt entusiasm och riktning för våra idéer när detta projekt och denna rapport var i tidiga stadier. Vi vill tacka medlemmarna i de andra grupperna som genom opponering och feedback gett oss förbättringsförslag och nya perspektiv. Sist vill vi även tacka de aktiva inom LiU-stores styrelse som har erbjudit en mycket god dialog kring frågor i projektet, erbjudit kontinuerlig feedback under utvecklingsprocessen samt fungerat som ett bollplank när vi har haft idéer och frågor.

Abstract iii Sammanfattning iv Författarens tack v Innehåll vi Figurer viii 1 Ordlista 1 2 Introduktion 2 2.1 Motivering . . . 2

2.2 Bakgrund - Webbutiken i dagsläget . . . 3

2.3 Syfte . . . 4

2.4 Frågeställning . . . 5

2.5 Avgränsningar . . . 5

3 Teori 6 3.1 Webbutik som komplement till fysisk butik . . . 6

3.2 Hur kan en webbsida nå målgruppen studenter? . . . 7

3.3 Användbarhet genom design och navigerbarhet . . . 8

3.4 Design och köpavsikt . . . 9

3.5 Navigerbarhet och köpavsikt . . . 10

3.6 Vad är god design? . . . 11

3.7 Navigerbarhet . . . 16 3.8 Metodteori . . . 20 4 Metod 27 4.1 Förstudie . . . 27 4.2 Implementation . . . 28 4.3 Utvärdering . . . 29 5 Resultat 33 5.1 Förstudie . . . 33 5.2 Implementation . . . 34 5.3 Användartester . . . 43 6 Diskussion 53 6.1 Förstudie . . . 53 6.2 Implementation . . . 55 6.3 Användartester . . . 59

7 Slutsats 68 Litteratur 70 Appendix 75 A Marknadsplan 76 A.1 Inledning . . . 76 A.2 NABC-analys . . . 77 A.3 Omvärldsanalys . . . 78 A.4 SWOT-analys . . . 83 A.5 Marknadsföringsmål . . . 84

A.6 STP - Segmentering, targeting, positionering . . . 84

A.7 Marknadsmix . . . 87

A.8 Källhänvisning för marknadsundersökningen . . . 90

A.9 Enkäten . . . 91

B Produkt-backlog 102

2.1 Nuvarande sida: Startsidan. Högst upp finns en navigeringsmeny med 11

hyper-länkar . . . 3

2.2 Nuvarande sida: Webbutiksdelen består av ett rutnät av bilder på produkter. Bil-derna går inte att klicka på för att få ytterligare information om produkterna . . . 3

2.3 Nuvarande sida: När bilderna har olika bildförhållanden följer inte produktlådor-na en konsekvent struktur. . . 4

3.1 Illustration av en designkarta, inspirerad av Sanders, L. . . 15

4.1 Illustration av metodens delar . . . 27

5.1 Startsida - version 2 . . . 35

5.2 Navigationsmeny - version 2 . . . 36

5.3 Sidfot - version 2 . . . 36

5.4 Butiksvy - version 2 . . . 37

5.5 Detaljvy produkt - version 2 . . . 38

5.6 Filtrering - version 2 . . . 38

5.7 Varukorg - version 2 . . . 39

5.8 Checkout - version 2 . . . 40

5.9 Formulär med återkoppling - version 2 . . . 41

5.10 Responsiv layout - version 2 . . . 42

5.11 Startsidan - version 1 . . . 44

5.12 Webshop - version 1 . . . 44

5.13 Varukorg - version 1 . . . 45

5.14 Checkout - version 1 . . . 45

5.15 Resultat från användartest 1 . . . 46

5.16 Figuren visar antalet testpersoner som inte gick den optimala vägen för de olika uppgifterna. . . 48

5.17 Figuren illustrerar svaren från SUS-testet. . . 50

5.18 Figuren visar antalet testpersoner som inte gick den optimala vägen för de olika uppgifterna. . . 51

5.19 Figuren illustrerar svaren från SUS-testet. . . 52

A.1 Sammanställning av enkätresultat . . . 82

A.2 Illustration av SWOT-analysen . . . 83

A.3 Illustration över segmenteringen . . . 84

A.4 Tredimensionell positioneringskarta där LiU Stores positionering ställs i relation till två stora aktörer på klädmarknaden samt den nya butiken i Studenthuset . . . 87

Nedan listas översättningar av facktermer från engelska till svenska. När något ord i listan över svenska översättningar används i rapporten, avses alltså motsvarande engelska fack-term.

• Cognitive walkthrough - Kognitiv genomgång • Collaborative filtering - Kollaborativ filtrering • Consistency - Konsekvens

• Constraint - Begränsning

• Contextual inquiry - Kontextuell undersökning • Ease of navigation - Lätthet att navigera • Envisionment - Föreställande

• Fidelity - Överensstämmelse

• Hierarchical classification - Hierarkisk klassifikation • Interface - Gränssnitt

• Lostness - Vilsenhet • Mapping - Kartläggning

• Navigation efficiency - Navigationseffektivitet • Parallel selection - Parallellval

• Purchase intention - Köpavsikt

• Retrospective probing - Retrospektiv sondering • Simplicity - Simplicitet

• Telepresence - Telepresens

I följande kapitel ges en introduktion till rapportens innehåll och den frågeställning som rap-porten ämnar besvara.

2.1

Motivering

Internets enorma utveckling och spridning samt omvärldens digitalisering sätter en ökande vikt på företags online-närvaro. I en enkät som riktade sig till studenter som gjordes under förarbetet till denna rapport angav 59% av respondenterna att de handlar på en webbutik minst en gång i månaden eller oftare (appendix A).

LiU-store är en ideell studentförening som startades 2008. Föreningens kärnverksamhet består av att stärka gemenskapen på Linköpings universitet genom att bedriva försäljning av produkter som sprider universitetets varumärke. LiU-store erbjuder även tjänster till andra föreningar på universitetet med tryck av föreningskläder. LiU-store har inom ramen för sin verksamhet en webbutik, som för närvarande enbart säljer tygmärken till studentoveraller. Föreningen har uttryckt ett missnöje med designen och navigerbarheten på sin webbutik. Projektdelen av denna rapport avser på uppdrag av LiU-store att designa en ny webbutik åt föreningen. Då LiU-stores huvudsakliga kundgrupp består av universitetsstudenter avses vidare att webbutiken ska utformas på ett sådant sätt, med utgångspunkt i design och navi-gerbarhet, att universitetsstudenter tilltalas.

I enkäten som gjordes under förarbetet anger även 58% av respondenterna att de använ-der sig av en webbutik innan de handlar något i en fysisk butik. Detta i kombination med att LiU-store erbjuder unika varor som inte går att få tag på hos andra återförsäljare visar på att en högkvalitativ webbutik som främjar avsikt att köpa är av största intresse för LiU-store. Med utgångspunkt i ovannämnda resonemang undersöks därför hur en webbutik kan konstrueras med avseende på navigerbarhet och design, för att tilltala universitetsstuden-ter. Det är även av intresse att undersöka vilka faktorer som påverkar att en användare av webbutiken går igenom med ett köp.

2.2

Bakgrund - Webbutiken i dagsläget

Föreningen LiU-store har uttryckt ett intresse för en ny webbutik, då de anser att deras nu-varande inte representerar deras varumärke och image på ett bra sätt. Figur 2.1, 2.2 och 2.3 visar skärmdumpar från den nuvarande sidan.

Figur 2.1: Nuvarande sida: Startsidan. Högst upp finns en navigeringsmeny med 11 hyper-länkar

Figur 2.2: Nuvarande sida: Webbutiksdelen består av ett rutnät av bilder på produkter. Bil-derna går inte att klicka på för att få ytterligare information om produkterna

Figur 2.3: Nuvarande sida: När bilderna har olika bildförhållanden följer inte produktlådorna en konsekvent struktur.

LiU-store påpekar att det finns tre huvudsakliga problem och möjliga förbättringsområden. • Sidan har en navigeringsmeny med 11 element. Föreningen har inget bra sätt att lägga

till ny information på sidan eftersom den inte följer en konsekvent struktur: när ny information läggs till på sidan läggs det bara längst ned på sidan och en hyperlänk i navigeringsmenyn hänvisar till den nya informationen. Sidan är således en ”single-page application”, men är inte utformad med navigerbarhet i åtanke. Föreningen har fått in kommentarer om detta från användare som tycker att det är svårt att hitta vad de är ute efter.

• Webbutiken är uppdelad i två helt separata delar med andra delar mellan; en där pro-dukter som går att beställa online finns och en där butiksutbudet finns. LiU-store har uttryckt ett intresse för att kombinera dessa två delar till en del, där användaren själv kan välja vilken del av utbudet denne vill se.

• Sidans design är, enligt LiU-store, inte tilltalande för universitetsstudenter, vilket är något de önskar ändra på.

Utvecklingen av den nya hemsidan ämnar att lösa ovan nämnda problem. Vidare kommer administreringsverktyg att utvecklas för sidan så att föreningen på ett lätt sätt kan ändra sidans innehåll utan att göra sidans innehåll mindre navigerbart och estetiskt tilltalande för studenter.

2.3

Syfte

Denna rapport syftar till att undersöka hur en webbutik kan utformas för att tilltala universi-tetsstudenter, och då särskilt utifrån aspekterna navigerbarhet och design. Rapporten syftar även till att undersöka vilka aspekter som påverkar avsikt att köpa i webbutiken. Det under-söks även huruvida det faktum att webbutik är ett komplement till en fysisk butik påverkar dess utformning.

2.4

Frågeställning

Hur kan en webbutik för försäljning av universitetsmärkta produkter utformas för att, med utgångspunkt i navigerbarhet och design, tilltala universitetsstudenter?

2.5

Avgränsningar

Den primära fokusgruppen för den frågeställning som presenteras ovan är universitetsstu-denter. Av detta följer att i de avsnitt begreppet användare används, så avses i huvudsak sådana användare som också är universitetsstudenter. Märk väl att den litteratur som det hänvisas till i rapporten dock också använder begreppet användare, och då i ordets ursprung-liga bemärkelse. I de fall begreppet används när det refereras till litteratur avses således ordets ursprungliga betydelse.

Vidare följer att den enkätundersökning som genomförs som en del i förarbetet, användar-tester och dylikt också avgränsas till universitetsstudenter.

Då webbutiken som ämnas utvecklas i projektdelen redan idag existerar kan exempelvis enkätundersökningen avgränsas inte enbart vad gäller respondenter, utan också avgränsas till att enbart gälla åsikter om användarupplevelsen och önskade funktioner i LiU-stores befintliga webbutik. En såpass snäv avgränsning riskerar dock att ge ett för litet underlag, eftersom endast befintliga användare av LiU-store har möjlighet att svara. Vidare riskerar respondenterna begränsas i sina synpunkter på exempelvis önskade användarfunktioner om de redan har en befintlig webbutik i tanken. Detta då respondenterna då riskerar att endast tänka i termer av mera uppenbara förbättringar av den befintliga webbutiken. Detta är ofördelaktigt ur projektets perspektiv, då det inte enbart är förbättringar som ska göras, utan en utveckling av en helt ny webbutik. Enkätundersökningen avgränsades dock till att förutom att innehålla generella frågor om en webbutik, även innehålla frågor specifikt avseende webbutiker för kläder och accessoarer.

I följande kapitel behandlas rapportens teoridel, som ämnar att ge grund i litteraturen till de utformningskriterier som används i implementationsdelen.

3.1

Webbutik som komplement till fysisk butik

E-handelns enorma tillväxt i Sverige och på den globala marknaden är vida känd. I Sverige har e-handelns omsättning ökat från 14,3 miljarder år 2006 till 87 miljarder år 2019 [1]. Den digitala mognaden skiljer sig dock åt mellan olika branscher, där den bransch som kommit längst i utvecklingen är modebranschen. 20% av den totala omsättningen kom från nät-handel år 2019, en tillväxt på 12% jämfört med föregående år [1]. Tydliga skillnader mellan åldersgrupper går dock att uppvisa. I en undersökning som utfördes av HUI svarde 76% av de tillfrågade mellan 18 och 49 år att de handlar via nätet minst en gång i månaden, medan motsvarande siffra för åldersgruppen 50+ var 55% [2].

Fördelarna med en webbutik ur ett företags perspektiv är många. I en fallstudie utförd av Dien D. Phan [3] presenterades strategier och marknadsmässiga fördelar med en web-butik där bolaget Intels framgångar analyserades och användes som underlag. I fallstudien framkommer att efter lanseringen av Intels webbutik år 1998 så ökade Intel sin försäljning med en miljard amerikanska dollar per månad de kommande sex månaderna. Intel blev därmed det femte mest lönsamma bolaget i USA år 2000 enligt Phan. Vidare framkommer i studien att de främsta fördelarna med en webbutik för ett företag är besparingen av kapital i form av personalkostnader och lokalhyror, att det tillgängliggör en större kundbas samt att det möjliggör skräddarsydd marknadsföring. Ytterligare en stor fördel är tillgången till värdefull data som kan ge stor nytta om den används på lämpligt sätt, enligt Phan.

Från tidigare presenterad statistik är den positiva trenden med e-handel tydlig, och allt-fler konsumenter väljer webbutiken framför den fysiska. För att få en tydligare bild över de risker och fördelar som konsumenter associerar med handel i en webbutik utförde Forsythe et al. [4] en litteraturstudie i kombination med en kvantitativ studie för att ta fram de faktorer som påverkar valet mellan att använda, eller att inte använda e-handel. I den litteraturstudie som gjordes identifierades en pool med 44 faktorer som upplevdes som fördelar och en pool med 33 faktorer som upplevdes som risker. Bland fördelarna fanns bland annat

bekväm-lighet, tidsbesparing, tillgång till andras omdömen och större utbud samt variation. Bland nackdelarna fanns bland annat produktkvalitet, integritet, säkerhet och tekniska svårigheter. I den kvantitativa studie som gjordes i kombination med litteraturstudien ovan genom-fördes en undersökning där 960 svar mottogs. I undersökningen ställdes frågor baserat på de fördelar och risker som tidigare identifierats. En kvantitativ analys utfördes, där korrela-tionen mellan faktorerna beräknades för att sedan med hjälp av principalkomponentanalys identifiera de faktorer som hade störst betydelse för variationen i den datamängd som er-hölls. Den kvantitativa analysen påvisade fyra faktorer som i störst utsträckning förklarade varför konsumenter väljer att handla i en webbutik, och tre faktorer som förklarar de risker som konsumenter upplever när de handlar på nätet. De fyra huvudfaktorer som upplevs som fördelar för konsumenten enligt ovanstående undersökning är: praktiskhet, en konsument kan handla när som helst och var som helst; produktutval, större utbud, fler märken och modeller samt mer information om varje produkt; bekvämlighet, konsumenten kan handla utan att känna sig pressad av försäljare eller butikspersonal; trevnad, konsumenten upplever det som spännande att få nya paket, samt att kunna designa egna produkter. Riskerna som upplevs delades in i följande tre faktorer: finansiell risk, det är många gånger svårt för konsumenten att säkerställa om produkten kommer fram och om betalsystemet är säkert; produktrisk som bland annat innefattar produktkvaliteten, osäkerhet kring storlek på kläder och skor samt osäkerhet kring frakt; bekvämlighetsrisk som innebär svårigheten att hitta och identifiera säkra sidor att beställa från, samt de tekniska barriärer som handel i en webbutik kan innebära för en del, t.ex. den äldre generationen.

Med avseende på riskerna är det viktigt att notera tidpunkten för undersökningen ovan. Undersökningen utfördes år 2002, en tid då internet, datorer och den digitala utvecklingen fortfarande var i startskedet. År 2003 omsatte e-handeln i Sverige 4,9 miljarder kronor [5], medan den omsatte 87 miljarder kronor 2019 [1]. Idag finns det fler betalningsmetoder till-gängliga, dock går det inte att fastställa om säkerheten ökat. I en rapport som Riksbanken publicerade 2019 [6] påvisas många fördelar med elektroniska betalningsmetoder kontra betalningar med kontanter. Den största fördelen är säkerheten enligt rapporten, där t.ex. kontantrelaterade brott kraftigt har minskat. Elektroniska betalningsmetoder medför dock nya risker, och det går inte att säkerställa om betalningsmetoderna blivit säkrare då antalet bedrägerier och datorbedrägerier konstant ökat i takt med ökad användning av elektroniska betalningsmetoder sedan 2011, enligt Riksbankens rapport.

Sammanfattningsvis går det att fastställa att det finns ett värde i en webbutik för både företag och konsumenter. LiU-store har idag en fysisk butik i Kårallen på Campus Valla där all försäljning av LiU-märkta produkter äger rum. Linköpings universitet har fyra campus med drygt 30 000 studenter [7]. En webbutik kommer att kunna nå ut till fler studenter på fler campus och göra det möjligt att handla dygnet runt, mot idag när LiU-store endast har öppet på vardagar mellan 11-14. Utöver tillgängligheten kommer en webbutik ge möjligheter till showcasing och marknadsföring av LiU-märkta produkter. Slutligen går det att fastställa nyttan av en webbutik som komplement till LiU-stores fysiska butik.

3.2

Hur kan en webbsida nå målgruppen studenter?

En vital del av en webbsida är att den är utformad för att möta krav och förväntningar från dess avsedda målgrupp. Målanvändarna för webbutiken kan antas vara studenter, varför de vidare kan antas befinna sig i ålderspannet ca 18 till 30 år.

I artikeln Generation Y and Web Design: Usability Through Eye Tracking [8] undersöktes prefe-renser för åldersgruppen 18 till 31 år gällande utformningen av webbsidor, där en betydande

del av de medverkande var studenter. Studien presenterar hypoteserna att denna ålders-grupp föredrar sidor med en stor bild som fokus, att de föredrar bilder på kända människor framför vanliga människor, att de föredrar sökfunktioner snarare än många länkar samt att de föredrar lite text istället för stora stycken. Studien genomfördes dels genom en un-dersökning där deltagarna fick ranka sidor som jämfördes efter ovanstående kriterier, dels genom att en mindre grupp fick använda diverse webbsidor samtidigt som en apparat som registrerade deras ögonrörelser närmare undersökte vad deltagarna fokuserade på.

I studien lyfts följande fram som betydande preferenser för den ovan nämnda gruppen: “The results of our survey confirmed our categorization and showed that this generation prefers pages with a large main image, pictures of celebrities, little text, and a search feature”. När ögonrörelser mättes fanns ett starkt fokus vid stora bilder samt bilder på kända människor medan långa menyer och stora textstycken fick mindre uppmärksamhet [8]. Detta knyter även an till navigerbarhet och hur det påverkar avsikt att köpa.

Hur kan en webbutiks kvalitet och utformning påverka studenters uppfattning och köpvanor?

En studie som utfördes på koreanska studenter undersökte hur en webbutiks kvalitet kan påverka köpupplevelser och köpvanor [9]. Studien undersökte en webbutiks kvalitet efter följande parametrar: hur smidigt det är att handla, webbutikens design, användbarheten av information från webbutiken, transaktionssäkerhet, betalningssystem samt kundkommu-nikation. Studien kom fram till att en högkvalitativ webbutik var positivt korrelerad med både kundens nöjdhet och tillit, men att ingen direkt korrelation med kundlojalitet eller upprepade köp gick att finna. Vidare redovisar studien att en kombination av kundens tillit och lojalitet är det som positivt påverkar upprepade köp. Slutligen kunde studien redovisa att en högkvalitativ webbutik har en indirekt positiv påverkan på en kunds lojalitet, och därför också indirekt upprepade köp.

Sammanfattningsvis så tyder studier inom området på att en högkvalitativ webbutik kan höja kundens nivå av nöjdhet och tillit i transaktionen, och att detta indirekt påverkar lojalitet och sannolikheten för upprepade köp positivt. För att uppnå denna högkvalitativa webbutik finns ett antal preferenser i åldersgruppen 18 till 31 år som bör uppmärksammas.

3.3

Användbarhet genom design och navigerbarhet

ISO beskriver med standarden 9241-210 [10] användbarhet som den grad i vilken ett system, en produkt eller en tjänst kan användas för att uppnå särskilda mål på ett ändamålsenligt, effektivitet och för användaren tillfredsställande sätt, och knyter an och förankrar detta i design och navigerbarhet. Kozar och Lee [11] förklarar att påverkan av en webbutiks utform-ning inte kan klarläggas utan stöd från en utvärdering av användbarheten av plattformen och att dess design är av stor vikt för att e-handeln ska kunna lyckas. De förklarar vidare att användbarheten är starkt kopplad till plattformens navigerbarhet, vilket de konkretiserar till svårighet att förstå innehåll, brist på konsekvens, svårigheter kring navigation och därmed vilsenhet.

I en studie av Davis och Glore [12] beskrivs att design och användbarhet är starkt kopp-lade och underbygger detta med en mängd studier. Studien utvecklar vidare att utseende, där design spelar en central roll, fungerar som en brygga mellan applikationen och an-vändarens känslor och uppfattning om applikationen. De klargör att användaren gör en bedömning om en applikations användbarhet i genomsnitt redan efter 3,42 sekunder och att den undermedvetet uppfattade användbarheten påverkar användaren redan innan dessa

sekunder hunnit passera. Davis och Glore hävdar vidare att ju bättre något ser ut, desto bättre upplevs det fungera varför en användare därmed förbiser tekniska brister i högre ut-sträckning. March [13] diskuterade redan 1994 vikten av att addera design och navigerbarhet inom användbarhet både inom hård- och mjukvara. March beskriver design som bryggan mellan användaren och den slutgiltiga produkten.

J.W. Palmer [14] samt Wojdynski och Kalyanaraman [15] hävdar att navigerbarhet är ett viktigt designelement som underlättar för användaren att hitta vad den söker vilket bidrar till användbarheten, varför god layout, sidstruktur, länkstruktur och andra navigationsme-kanismer behöver tas i beaktande vid utformning av en webbutik. Även Yan och Guo [16] redogör för denna koppling och poängterar att textens och de grafiska elementens utform-ning påverkar användbarhet och att nytta bör dras genom självbeskrivande designval. A. Smith [17] förklarar att användbarhet kan vara svår att utvärdera med hänsyn till att hypertextsidor ofta konstrueras för att uppmuntra en utforskande och explorativ navigation, varför klassiska mätningar i form av tidsåtgång och antal felsteg kan anses olämpliga. Vidare konstaterar hon att en användares upplevda vilsenhet, vilket beskrivs som användarens möj-lighet att effektivt hitta relevant information, kan användas för att undersöka navigerbarhet som i sin tur har en stor påverkan på användbarhet. Zhang et. al. [18] för ett liknande resone-mang och poängterar att mätning av navigerbarhet, utifrån perspektivet användbarhet, kan vara svårt eftersom användbarhet är ett så pass brett koncept där navigerbarhet endast är ett av dess attribut.

3.4

Design och köpavsikt

I det här avsnittet undersöks sambandet mellan design och köpavsikt. Meskaran, Ismail och Shanmugam [19] definierar online purhcase intention, det vill säga online-köpavsikt, som situationen där en konsument är villig och har för avsikt att genomföra onlinetransaktioner. Definitionen av begreppet design utvecklas under avsnitt 3.6, men generellt används begrep-pet i bemärkelsen sammansättningen av yttre och synliga egenskaper.

Kopplingen mellan en webbutiks design och kundernas uppfattning av butiken har un-dersökts och avhandlats i flera studier, där direkta såväl som indirekta effekter har kun-nat påvisas [20][21][22]. En studie ämnad att undersöka korrelationen mellan design och kundnöjdhet påvisade en positiv korrelation med både kundernas köpavsikt och butikens framgång [20]. Enligt Liu och Arnett [22] kan en webbutik betraktas som framgångsrik när den kan skapa en tillförlitlighetskänsla hos kunderna samt generera kundnöjdhet. Lin [21] har i en studie som undersökte de parametrar som påverkar kundnöjdheten kommit fram till att webbutikens systemkvalitet, inkluderande främst dess design, har en avgörande påverkan på kundnöjdheten. Lin hävdar vidare att på grund av avsaknaden av ansikte-mot-ansikte-kontakter i en webbutik, kommer endast de webbutiker vars design tillfredsställer kundernas behov och önskningar att kunna bli framgångsrika.

2013 genomförde Wu et al. [23] en studie i syfte att undersöka hur en webbutiks layout, design och atmosfär påverkar konsumenternas avsikt att handla i webbutiken. En webbutiks atmosfär definierades i studien som användningen av färger som påverkar kundernas humör och känslor, medan layoutdesignen definierades som uppställningen av produktinformation och bilder i webbutiken. För att avgöra vilka webbutiker som skulle utvärderas ombads 50 universitetsstudenter, med erfarenhet av att handla i webbutiker, att ta fram två till tre exempel på webbutiker. När dubbletter eliminerades, erhölls 40 unika sidor som inkluderade olika verksamhetsområden. Ett webbaserat formulär med frågor gällande sidornas layout-design och atmosfär besvarades av 626 personer. Studien kom fram till att layoutlayout-design har

ett starkt samband med konsumenternas inställning till de respektive webbutikerna. Studien visade även att en bra layoutdesign och en behaglig atmosfär ökar den känslomässiga upp-hetsningen, vilken definierar i vilken grad en konsument känner sig glad, stimulerad eller aktiv.

I artikeln Predicting consumer intentions to use on-line shopping [24] undersöktes konsumen-ternas avsikt att handla på nätet genom att en postenkät med frågor gällande internetan-vändning och e-handel besvarades av 281 vuxna individer i USA. Resultatet visade att för att locka och behålla kunder måste webbutiker följa goda designprinciper i utformningen. Studien visade även att bland de faktorer som skapar frustration hos kunden när denne handlar på nätet, är flera designrelaterade. Sådana exempel är dåligt utformade gränssnitt och röriga sidlayouts, som båda bidrar till en sämre användarupplevelse enligt studien. För att sammanfatta går det att bekräfta att utifrån flera olika studier och undersökning-ar, har design visat sig spela en essentiell roll i kundernas uppfattning av en webbutik. Vissa av studierna knyter på ett direkt sätt köpavsikten till design och fastslår att en väldesignad webbutik positivt påverkar kundens avsikt att handla. Andra studier har lagt fokus på att undersöka de kopplingar som design har med andra aspekter såsom kundnöjdhet och fram-gång, som i sin tur antingen påverkar eller är ett resultat av kundernas köpavsikt. Även dessa studier bekräftar alltså att en god design korrelerar positivt med köpavsikten.

3.5

Navigerbarhet och köpavsikt

Den informella definition av navigerbarhet som preciseras i avsnitt 3.7.1 slår fast att naviger-barhet är ett mått på hur enkelt en användare hittar den information denne söker. Betraktas en webbutik uppkommer då frågan huruvida om webbutiken har god eller mindre god navigerbarhet kan påverka benägenheten att göra köp i densamma. Detta avsnitt ämnar undersöka om en sådan koppling går att belägga i litteraturen.

Det eventuella sambandet mellan navigerbarhet och köpavsikt är en återkommande frå-geställning i litteraturen och många studier har publicerats på området [25][11][26]. En hypotes som ofta återkommer är att enkelhet att navigera skulle ha en positiv påverkan på avsikt att genomföra ett köp, som till exempel i artikeln Perceived security and World Wide Web purchase intention [25].

I artikeln Understanding of website usability: Specifying and measuring constructs and their re-lationships [11] redovisas resultaten från en undersökning där en grupp testpersoner ombads göra ett köp i en webbutik, varefter de fick fylla i ett frågeformulär. Resultaten visar med stor säkerhet att navigerbarhet har en såväl direkt positiv effekt på köpavsikten, som en indirekt positiv effekt. Med indirekt positiv effekt avses att aspekten navigerbarhet påver-kar andra aspekter positivt som i sin tur påverpåver-kar köpavsikten positivt. En sådan annan aspekt som i hög grad påverkades positivt av navigerbarhet, och som självt sedan påverkar köpavsikten positivt, är så kallad telepresens vilket i studien definierades som känslan av att vara närvarande i en virtuell miljö skapad av det digitala mediet. Det ska även nämnas att navigerbarhet också visades påverkas av andra designaspekter, såsom simplicitet och konsekvens, d.v.s. att en minimal mängd innehåll tillhandahålls, respektive att komponenter har konsekvent placering.

Gherke och Thurban [26] genomförde en studie i syfte att kunna redovisa ett antal för-hållningsregler för design av webbsidor. Efter en aggregering av rekommendationer från litteraturen, samt en undersökning med ett frågeformulär för konsumenter, gavs olika re-kommendationskategorier, däribland navigationseffektivitet, ett värde för jämförelsetalet relativ

viktighet baserat dels på antal som refererat till artiklar som gett en viss rekommendation, dels på konsumenternas svar i frågeformuläret. Konsumenterna gav navigationseffektivitet en något högre relativ viktighet än vad som erhölls från litteraturstudien, men även i den genomgångna litteraturen citeras artiklar som rekommenderar navigationseffektivitet ofta. I artikeln slås slutligen fast att utan god navigering riskerar användaren bli förvirrad och frustrerad, och därför lämna webbsidan för att sedan aldrig återvända, varför inget köp någonsin genomförs av användaren. Utifrån studien går det således att konstatera att god navigerbarhet inte enbart har en påverkan på köpavsikten för det specifika besöket, utan sträcker sig istället över en betydligt längre tidshorisont.

Marquis et al. [27] genomförde en undersökning av faktorer som påverkade effektivite-ten av webbutiker, där effektivitet mättes som användares avsikt att gång på gång återbesöka webbsidan. Det påvisades att lätthet att navigera var en sådan faktor som korrelerade positivt med effektivitet. Det nämndes vidare att ju oftare en användare återvänder till en webbsida, desto större torde sannolikheten att ett köp genomförs vara. Undersökningen genomför-des genom att studiedeltagare fick svara på ett antal frågor genom ett formulär. Det ska nämnas att drygt 80% av studiedeltagarna var mellan 18 och 25 år gamla, och en majoritet hade genomfört eller höll på att genomföra någon form av postsekundär utbildning. Resulta-ten torde således vara särskilt relevanta för en frågeställning som avser universitetsstudenter. Sammanfattningsvis går det alltså att fastställa att undersökningar gång efter annan, gjorda vid olika tidpunkter i ett relativt stort tidsspann, påvisar att god navigerbarhet ökar köpavsikt hos webbutikers besökare. Påverkan kan dels vara direkt, det vill säga att navigerbarheten i sig självt ökar köpavsikt, dels vara indirekt, det vill säga att navigerbarheten påverkar andra designaspekter positivt, som sedan i sin tur påverkar köpavsikt positivt. De undersökningar som gjorts är i huvudsak litteraturstudier samt undersökningar på testgrupper med fråge-formulär, där grupperna i vissa undersökningar i huvudsak bestått av universitetsstudenter. Slutligen kan det alltså konstateras att god navigerbarhet positivt påverkar en potentiell konsument köpavsikt.

3.6

Vad är god design?

För att öka köpavsikten i en webbutik är det viktigt att ha en god design, då en god design får kunden att vilja återvända till webbutiken och göra upprepade köp [28]. Förutom detta kan en god design vara till fördel mot konkurrerande verksamheter [28]. Vad en god design är och hur man utvecklar en sådan är därför två viktiga aspekter som varje webbutvecklare bör vara införstådd med.

3.6.1

Målet med god design

För att utveckla en webbutik med god design bör designen utformas i syfte att underlätta användningen [29]. Designen ska vara anpassad efter användarnas tidigare erfarenhet och förväntningar [29]. Hur man definierar god design är dock svårt då alla har olika erfarenheter och förväntningar, och därigenom olika åsikter om vad som är vackert och användbart. Ett av flera syften med design i allmänhet och god design i synnerhet torde således vara att hantera dessa diskrepanser i förväntningar.

Fischer definierar högfunktionella applikationer som sådana applikationer som används för att modellera delar av existerade världar, och för att skapa nya världar, där bland andra Unix, Microsoft Office och Photoshop nämns som exempel [29]. Dessa är komplexa system, eftersom de måste möta behoven hos stora och heterogena användargrupper [29]. Det skall medges att en webbutik inte används för att modellera nya världar på det sätt Fischer avser,

men likväl är den förväntade användargruppen stor och heterogen. Det går således att argu-mentera för att de problem som behöver mötas i designen av högfunktionella applikationer också bör beaktas vid designen av en webbutik. Fischer identifierar tre sådana problem som måste bemötas: (1) oanvänd funktionalitet får inte vara i vägen, (2) okänd existerande funktionalitet måste vara tillgänglig eller tillhandahållas då den behövs, och (3) ofta använd funktionalitet ska inte vara för svår att lära sig, använda och komma ihåg.

Sammanfattningsvis kan allstå konstateras att mycket av problematiken i designarbetet grundar sig i de olika behov som finns i den förväntade användargruppen, och att en god design bör syfta till att uppfylla dessa. Det är således av yttersta vikt att både förstå syftet bakom webbutiken och alla potentiella användares förväntningar i designarbetet.

3.6.2

Svårigheten med att designa rätt

En svår uppgift för webbutvecklare är att utveckla gränssnitt som är anpassade för en webb-sidas alla individuella användare, vilket kräver att designen stödjer många olika typer av behov [29]. Ytterligare en svårighet med webbdesign är att användarna och deras behov kan komma att ändras över tid, varför det är viktigt att kontinuerligt uppdatera designen [29]. Vidare kan den information om användaren som designen baseras på bli daterad [29]. För att minimera sannolikheten att designen blir daterad och att kartläggningen av användaren och den externa miljön hålls aktuell, är det bättre om designen är baserad på observationer av användarna snarare än slutsatser och antaganden om dem [30].

3.6.3

Estetiskt tilltalande design

För att attrahera användaren till en produkt eller webbsida är det viktigt att den är estetiskt tilltalande. Vad som uppfattas som tilltalande kan variera från en person till en annan. Användare uppfattar webbsidor med god estetisk design som lättare att använda än webb-sidor med mindre tilltalande utseende även om de har samma funktionalitet, och då de uppfattas som lättare att använda leder detta även till att de oftare används [31]. Detta feno-men kallas för aesthetic-usability effect, d.v.s. estetisk användbarhet-effekten. Forskning har även visat att första intrycket, vilket erhålls redan efter 50 millisekunder [32], av en webbsidas utseende får långsiktig effekt i hur användaren uppfattar funktionaliteten och kvaliteten [31]. En webbsida som uppfattas estetiskt tilltalande möts generellt av en mer positiv attityd och användarna är därav mer toleranta till problem i funktionaliteten [31].

Förutom de estetiska aspekterna kan designen underlätta användningen och förbättra en webbsidas funktionalitet [31].

3.6.4

Uppfattningen av en design

En god design leder till att användaren förstår vad som ska göras och på vilket sätt. Hur en webbsida är designad ger användaren en uppfattning om vad som förväntas av denne. Det finns flera olika sätt att designa för att användaren ska få rätt uppfattning av designen. Lidwell et al. [31] presenterar ett antal tekniker för detta. Dessa redovisas nedan.

Affordance innebär att designen antyder hur ett objekt förväntas att användas. Ett exem-pel på detta är dörrar med tryck- och dragfunktion som med hjälp av utformningen av handtagen på dörrens två sidor visar vilken handling som förväntas. Användning av affor-dance leder till att webbsidan blir lätt att använda på ett effektivt sätt.

Kartläggning innebär att det skapas en naturlig korrelation mellan ett objekt och dess kon-trollpanel. Ett exempel på kartläggning är en spis vars placering och storlek av plattor korresponderar med kontrollpanelens. Design som använder sig av kartläggning leder till enklare användning.

Signal-till-brus-förhållande avser förhållandet mellan hur lätt det är att upptäcka relevant kontra irrelevant information. Ett lågt sådant förhållande är att eftersträva, d.v.s. att den viktigaste och mest relevanta funktionaliteten eller informationen också är den lättaste att upptäcka. Oviktig funktionalitet och information ska döljas, och designen leder då till mer effektiv och enklare användning.

3.6.5

God design leder till ökad funktionalitet

En god design leder till ökad funktionalitet, och genom en god design underlättas använda-rens arbete [31]. Nedan redovisas hur design kan göras för att funktionaliteten ska öka.

80/20 Paretos lag

Enligt Paretos lag står 20 % av en webbsidas funktionalitet för 80 % av användningen, och genom att lokalisera dessa 20 % kan man fokusera sitt designarbete och resurser på områden där störst effekt kan erhållas [31] . Övriga 80% kan på motsatt sätt utvärderas för att avgöra huruvida funktionaliteten ifråga är nödvändig [31].

Att säga rätt sak vid rätt tillfälle

Användarens uppmärksamhet är en knapp resurs och den bör därför tas väl tillvara [29]. Det är därför av största vikt att låta uppmärksamheten falla på för stunden relevant innehåll och minimera överflödig information [29]. Designen bör vara utformad så att information som enbart är relevant för uppgiften och tillfället presenteras, och information som kan komma till pass senare presenteras då uppgiften kräver det [29].

Begränsningar

Användning av begränsningar är ett sätt att designa som begränsar användaren från att göra fel [31]. En USB-stickas design är ett exempel på detta då dess fysiska utseende gör det omöjligt för användaren att sätta in den i övriga uttag. Genom att använda begränsningar underlättas användningen och färre fel sker [31].

Fitts lag

Enligt Fitts lag är tiden det tar att nå en widget, som till exempel en knapp, en funktion av målets storlek samt avstånd till målet [31]. Viktiga och ofta använda mål bör därför vara större och placerade så att de är lätta att nå [31].

Hicks lag

Enligt Hicks lag så leder fler valmöjligheter till att det tar längre tid för användaren att ta ett beslut [31]. Genom att ge användaren färre valmöjligheter blir designen därför mer effektiv [31].

3.6.6

Ben Shneidermans åtta gyllene regler för en god design

Ben Shneiderman [33] har tagit fram åtta gyllene regler för design, vilka är tänkta att hjäl-pa utvecklare att designa webbsidor utan att fokusera på fel eller mindre viktiga detaljer. Reglerna lyder:

• Strive for consistency - Sträva efter konsekvens

Det ska finnas en kontinuitet i webbsidan; är en knapp svart ska alla knappar med liknande funktionalitet också vara det. Kontinuiteten ska appliceras på färger, fonter,

layouter, versaler, vokabulär, menyer, etc. Undantag så som pop-ups för att dubbelkol-la att användaren verkligen vill radera ett objekt, eller att lösenord ska upprepas och matchas ska hållas få och lättförståeliga.

• Seek universal usability - Sök universell användarbarhet

Samma användarvänlighet ska erbjudas till alla kategoriseringar av användare, oav-sett om det är kön, ålder, datorvana, nationalitet, handikapp eller annat. Vidare ska hjälplänkar erbjudas till nybörjare, och genvägar och funktioner som snabbar upp pro-cesser erbjudas till experter.

• Offer informative feedback - Ge informativ feedback

För varje handling ska användaren få informativ feedback motsvarande handlingen. Är handlingen vanlig och har små konsekvenser ska feedbacken vara diskret. Är däremot handlingen ovanligare och får större konsekvenser ska feedbacken vara märkvärdig. • Design dialogs to yield closure - Designa för visuell avslutning

Användaren ska tas genom en start, en mitt och ett avslut när denne navigerar sig ge-nom webbsidan. För varje grupp av handlingar ska användaren få feedback som till-fredsställer genom att låta användaren veta att den gjort klart något, och därigenom låta användaren släppa funderingar på alternativa lösningar till vad som genomförts. Samtidigt förbereds användaren på att det kommer ytterligare en grupp av handlingar. I en webbutik exemplifieras detta med att starten är att välja sina produkter och att det hela avslutas med att gå till kassan. Detta ger ett väldigt tydligt avslut för kunden. • Prevent errors- Erbjud enkel felhantering

Minimera fel genom att till exempel göra orekommenderade menyalternativ gråa och alltid ha krav på fält ifyllda av användaren, t.ex. att inte tillåta bokstäver där det ska fyl-las i siffror. När användaren gör ett fel ska det krävas så lite som möjligt att åtgärda och gå vidare. Sker exempelvis felaktig inmatning till ett fält i ett formulär ska endast det fältet behöva åtgärdas, medan annan information fortsätter vara ifylld. För att använ-daren ska kunna åtgärda sitt fel så smidigt som möjligt ska även tydliga instruktioner och anvisningar ges.

• Permit easy reversal of actions - Ge möjlighet att ångra

För varje handling ska det finnas en enkel väg att återkalla sitt beslut, detta gäller såväl enstaka datainmatning som en grupp eller serie av handlingar. Detta för att användaren ska våga utforska och testa sig fram samt för att sänka användarens oro inför att utföra en handling.

• Keep users in control - Användaren som styr

Erfarna användare i synnerhet vill känna att de är i kontroll över gränssnittet de navige-rar, samt att detta reagerar på deras handlingar. Dessa användare vill inte ha överrask-ningar eller ändringar i känd funktionalitet. Vidare irriteras denna grupp över onödiga informationsformulär, svårigheter att hitta rätt information samt att inte uppnå sökta resultat.

• Reduce short-term memory load - Reducera användandet av korttidsminnet

Människor kan i regel komma ihåg 7 bitar information, vilket innebär flera hinder för webbutvecklare. Webbsidor måste således designas på ett sådant sätt att användaren inte behöver hålla en för stor mängd information i huvudet. Detta gäller till exempel långa formulär, som då ska få plats i ett och samma formulär oavsett vilken enhet webb-sidan besöks på. Detta måste implementeras för var och en av de vyer som tas fram och tolkas för de miljöer där det ska tillämpas. Det är därtill viktigt att man underlättar var-je datainmatning, har lättförståeliga vyer samt snabb informationsfeedback för att öka användarens känsla av kunskap, bemästring och kontroll över systemet.

3.6.7

Designkarta

Sanders [34] presenterar idéen om en designkarta, som utgörs av en graf, där y-axeln anger design- eller forskningsstyrd design och x-axeln anger expert- eller användarledd design, se figur 3.1. Till vänster om origo ser designern sig själv som experten, medan designern ser användarna som experter till höger om origo. Sanders hävdar att det är förknippat med sto-ra svårigheter att för en individ byta från det ena till det andsto-ra av dessa synsätt, eftersom det innefattar en stor kulturell omställning. Den mest välutvecklade och välanvända delen av kartan är det avsnitt som kallas användarcentrerad design. Enligt Sanders innebär detta en kombination av att designern ser sig som en expert, och tar avstamp i forskning som sedan används i alla steg av designen, från insamling av data och analys av densamma, själva desig-nen samt utvärdering och testning av prototypen. En av de vanligaste metoderna som nämns är kontextuell undersökning.

Figur 3.1: Illustration av en designkarta, inspirerad av Sanders, L.

På andra sidan spektrat i Sanders karta [34] finnes användarledd design där den skandina-viska metoden sätts i fokus. Sanders menar att genom att ta så mycket hjälp som möjligt av de som kommer att använda plattformen kan designen komma närmare användarnas viljor och förväntningar. Exempel på metoder inom detta är design-genom-att-göra, mock-up och förestäl-lande, vilka utgår ifrån diskussioner och work-shops [35]. Genom att sätta en designer med en användare och diskutera en prototyp medan den används kan ett demokratiskt resultat fås fram [35]. I processen uppmanas även både designer och användare att göra fel, att tänka fel men att kontinuerligt pröva sina tankar [35]. Detta skiljer sig från amerikansk webbdesign där målet alltid är att eliminera den mänskliga faktorn och få ner felmarginalen till noll [35].

3.6.8

Guidelines och standarder

Enligt W3C:s standard [36] skrivs en webbsida i kodspråket HTML där det visuella korrigeras med CSS (Cascading style sheets). Vidare hänvisar de till att använda Javascript för sådan funktionalitet där det krävs.

3.7

Navigerbarhet

Ett centralt begrepp vid utformning av en webbutik är det om navigerbarhet. Det finns många olika sätt att beskriva navigerbarhet på: vissa beskrivningar utgår från en nästan ma-tematisk modell där kvantitativa mått som exempelvis antalet klick till slutdestinationen är avgörande [37][18], medan andra andra belyser innehållets struktur, placering och kvantitet kontra kvalitet [15]. Vad som är gemensamt hos all den litteratur som rapporten har utgått ifrån i de följande delarna som behandlar navigerbarhet är att begreppet, som Palmer, J. W. [14] beskrev det, visar på den grad ett användargränssnitt underlättar för en användare att hitta vad den söker.

Hur en välstrukturerad webbutik med god navigerbarhet ska utformas är inte en självklarhet; inte minst då olika individer med olika bakgrund ofta kan ha vitt skilda uppfattningar om hur saker ska vara utformade och var information samt olika funktioner bör vara placerade [38][37][15]. En utvecklare är inte nödvändigtvis införstådd med en användares preferenser och behov vid utvecklingen av en webbsida, och utformningen av en användarplattform bör utgå från användarens behov snarare än utvecklarens egen syn på hur webbsidan ska se ut och fungera [38]. Zhang et. al. [18] lägger fram följande tre grundläggande frågor som en användare behöver känna besvaras av användargränssnittet: Where am I? Where have I been? Where can I go?, d.v.s. Var är jag? Var har jag varit? Vart kan jag gå?

3.7.1

Vad är navigerbarhet?

En webbsidas navigerbarhet kan alltså betraktas som ett mått på hur enkelt en besökare kan hitta och få tillgång till informationen denne behöver [14]. Vaucher, S. Sahraoui, H [37] för-klarar att navigerbarhet matematiskt kan ses som en riktad graf med bågar och noder:

G ñ tE, Vu (3.1)

där E är bågarna i nätverket och V är noderna. Varje båge u, v P E är en länk från sida u till sida v. Varje sida på hemsidan beskrivs som en nod i denna modell. Vidare beskriver de att utmaningen det innebär att maximera navigerbarhet, när en webbsida representeras enligt ovan, består av detsamma som det innebär att minimera antalet länkar användaren behöver gå via för att komma till en viss plats i sidstrukturen. Ett sådant problem kan lösas med kända nätverksoptimeringsmetoder [14]. J. W. Palmer [14] förklarar att en webbsidas länkstruktur, en välorganiserad layout, strukturen av en webbsidas information samt dess prestanda i form av laddningstider är viktiga faktorer som medverkar till god navigerbarhet. Vaucher och Sahraoui [37] menar att även att en stor mängd information på en webbsida påverkar dess navigerbarhet negativt och Xue et. al. [39] argumenterar för detsamma, med tillägget att den övergripande strukturen på webbsidans utformning av information också spelar en roll, medan Wojdynski och Kalyanaramanden [15] belyser den logiska graden av sidstrukturens uppbyggnads påverkan.

Webster och Ahuja [40] förklarar att mjuka värden som användarens förståelse för den övergripande strukturen, att användaren - givet kännedom om den övergripande strukturen - på ett effektivt sätt kan ta sig vidare genom den, samt graden av tillfredsställelse använda-ren upplever under processen förbättras av en väl avvägd navigerbarhet.

En konsekvens av bristfällig navigerbarhet är att användaren känner sig vilse. Woods, D. David [41] myntade 1984 begreppet getting lost, d.v.s. gå vilse, som innebär att användaren inte får grepp om webbsidans struktur, var någonstans användaren befinner sig i sidstruktu-ren och står med en avsaknad av uppenbara tillvägagångssätt att komma vidare i den. Smith, P. A. [17] konkretiserade detta resonemang med vad som benämndes lost in hyperspace, d.v.s.

vilsen i hyperrymden, vilket beskriver fenomenet när en användare utstår kognitiva problem att hitta vägen på en webbsida. Smith förklarar vidare att söka sträva efter god navigerbarhet och följaktligen motverka vilsenhet bidrar positivt till användarens inställning, engagemang och mottaglighet för informationen på webbsidan.

3.7.2

Vad gör det lätt att navigera på en webbsida?

Det finns olika sätt för en användare att tillgodogöra sig information på en webbsida. Använ-daren kan antingen utforska webbsidan genom att ta sig från sida till sida via webbsidans länkstruktur, alternativt använda olika verktyg likt sökfunktioner för att på så vis hoppa till slutmålet omgående. Båda dessa sätt att navigera måste tas i beaktande vid utformning av ett användargränssnitt [15]. I följande avsnitt behandlas vilka aspekter som bör beaktas och vilka verktyg som kan användas för att främja god navigerbarhet.

Vilsenhet

Ett återkommande begrepp inom den litteratur som hanterar navigerbarhet är vilsenhet vilket A. Smith [17] menar manifesteras av en användarens känsla av desorientering . A. Smith har tagit fram en modell för att kvantitativt mäta graden av vilken en användare är vilse med hjälp av förhållandet mellan minsta antalet noder som krävs för att genomföra en uppgift kontra antalet noder en användare faktiskt har besökt, respektive antalet unika noder en användare har besökt kontra det totala antalet noder användaren har besökt inklusive repe-tition. Gwizdka & Spence [42] förklarar att fenomenet vilsenhet kan betraktas som ett av två ben, nämligen det objektiva benet respektive det subjektiva benet. Objektiv vilsenhet utgår från användarens förutsättningar att navigera sig via den optimala sökvägen med minsta möjliga tidsåtgång, i linje med den formel som A. Smith introducerar, medan subjektiv vil-senhet tar fasta på användarens upplevda känsla av att inte hitta rätt. Gwizdka och Spence presenterar 3 rangordnade faktorer som de menar är prediktorvariabler för vilsenhet:

• Total tidsåtgång, vilket karakteriseras av ett stort antal besökta sidor med en sökväg med en låg grad av likhet med optimal sökväg

• Navigationsmönster, vilket avser mängden återbesökta sidor, djupet i sidstrukturen med mera

• Frekvensen mellan användarens klick, vilket beskrivs som tiden det tar för användaren att identifiera hur denne ska ta sig vidare i strukturen.

Länkstruktur

Wojdynski et al. [15] redovisar tre dimensioner avseende att skapa förutsättningar för att, med en god användarupplevelse, underlätta för användaren att hitta och tillgodogöra sig information:

• Hur pass träffsäker beskrivningen av en länk är sett till var någonstans användaren hamnar efter att ha följt länken

• Hur pass hjälpsamt gränssnittet och dess placering av länkar på en webbsida är, inte minst när det gäller förstasidan som ger en förhandsgranskning av hela webbsidans innehåll och struktur.

• Webbsidans övergripande grad av struktur och vikten av att sidstrukturens uppbygg-nad är grund och smal snarare än djup och bred, vilket påminner om de slutsatser Gwizdka och Spence redogör för i ovanstående stycke, och vidare att användarens för-väntan på hur webbsidan är utformad beroende på webbsidans art.

Eftersom länkar används för att navigera på en webbsida är det viktigt att användaren kan identifiera de länkar som finns där. För att användaren ska kunna hitta länkarna är det viktigt

att länkarna indikerar att de är just länkar, att de är urskiljbara på webbsidan. Enligt David K. Farkas och Jean B. Farkas [43] kan detta göras på några olika sätt:

• Genom att understryka länkarna eller använda en bild som liknar en knapp.

• Genom att använda sig av generiska nyckelord som kan vara av intresse för använda-ren. Exempelvis Produkter och Om oss anses vara pålitliga ord som klargör att det är länkar det handlar om.

• Undvik rörig siddesign, eftersom det kan göra länkarna svåra att hitta.

• De viktigaste länkarna ska synas högst upp på webbsidan, oavsett vilken webbläsare eller enhet användaren använder.

De förklarar vidare att det är viktigt att länkarna tydligt klargör vart de leder, vilket kan uppnås genom att använda beskrivande tillhörande länktext, så kallade mouse rollovers samt länk-ikoner såsom knappar i form av beskrivande symboler. Wojdynski et al. [15] berättar att användare förlitar sig på de olika signaler i form av symboler, beteckningar och beskriv-ningar som, i ett användargränssnitt, kommuniceras till användaren för att denne ska kunna anpassa sin navigering. De förklarar vidare att hur pass navigerbar en länkstruktur är inte enbart beror på hur länkarna är organiserade utan även kan förstärkas eller försvagas genom förekomsten och träffsäkerheten av sådana signaler. Vidare hävdar de att ett sätt för ut-vecklare att, med hjälp av sådana signaler, underlätta för användare att navigera träffsäkert är genom att beskriva knappar med längre, mer konkreta beskrivningar av vart de leder, snarare än att använda mer koncisa och abstrakta beskrivningar, trots att detta medför att det blir mer att läsa.

En webbsidas länkstruktur kan illustreras som ett diagram med olika lager/nivåer, där lager 1 är startsidan. Lager 2 består sedan av de sidor som kan nås med länkar på startsidan, lager 3 av sidor som kan nås från lager 2 och så vidare. Enligt Farkas & Farkas [43] måste de som designar en webbsida göra en avvägning i detta avseende: används för många lager kan webbsidan bli komplex och svåranvänd för användaren, men används för få lager kommer de lager som finns bestå av många länkar, varför det kan uppstå svårigheter att lagra all information som behöver finnas på webbsidan. Zhang et. al. [18] redogör för en tumregel på ämnet: att användaren i möjligaste mån aldrig ska vara längre än tre klick bort från en plats på webbsidan dit användaren vill förflytta sig.

Det har tidigare konstaterats att graden av navigerbarhet hos ett användargränssnitt spelar en central roll beträffande en användares förutsättningar att hitta information på en webb-sida [42]. Vidare kan ett välstrukturerat navigationssystem få en användare att uppleva användargränssnittet som mer tillförlitligt. På ett djupare plan kan den effekt som följer av god navigerbarhet relateras till hur användarupplevelsen påverkas av dennes egen förmåga att effektivt genomföra en uppgift i användargränssnittet, vilket i sin tur påverkar använ-darens uppfattning av webbsidans trovärdighet och därmed använanvän-darens mottaglighet för informationen på webbsidan [15].

Navigeringsmeny

Det är bevisat att ett uniformt och konsekvent användargränssnitt ökar navigerbarheten på en webbsida [44]. I en studie av A. Burrell och A.C. Sodan [45] jämfördes olika typer av navigeringsmenyer. Studiens resultat visade att användare distinkt föredrar en flikbase-rad navigeringsmeny, d.v.s. en meny i sidhuvudet med en flik för varje underkategori på webbsidan, likt den flikstrukturen som går att återfinna i de vanligaste webbläsarna. Vidare visar studien att det i en flikbaserad navigeringsmeny ska framgå tydligt vilken av flikarna (kategorierna) som användaren är inne på och det ska vara tydligt vad varje flik leder till.

Breadcrumbs

Breadcrumbs är länkar som är ordnade så att de indikerar en sidas position i en sidas hierarki av lager [46]. Ett exempel på ett breadcrumb-spår är: HemąAffärąKläder.

Användarens egen möjlighet att strukturera innehåll

En webbutik innehåller inte sällan ett stort urval av produkter. Det är därmed viktigt att pre-sentera effektiva verktyg för användaren att på olika sätt strukturera det den exponeras för, och därmed förhindra att användaren överväldigas av information vilket annars kan med-föra att användaren inte hittar vad den söker [47]. Sådana verktyg kan vara sökfunktioner, filtrering samt sortering. Eftersom en besökare kan överväldigas av mängden information tillgänglig i en webbutik blir dennes möjlighet att snabbt och träffsäkert hitta rätt en viktig del i utvecklingen av en sådan webbutik [39]. En webbutik bör därför utrustas med effektiva och användbara sökfunktioner; detsamma gäller ett effektivt system för sortering och filtre-ring av en webbutiks sortiment [39].

Sökfunktion

En sökfunktion bör erbjudas på webbsidor, och bör därigenom fungera som ett alternativt sätt att presentera de länkar som finns tillgängliga på en webbsida [37]. Sökfunktionen bör fungera med både enstaka ord och meningar som indata[43]. Vidare bör sökresultaten sorte-ras efter relevans. När navigerbarheten på en webbsida analysesorte-ras bör hänsyn således tas till både navigerbarheten med länkar såväl som navigerbarheten med en sökmotor [37].

Yan och Guo [16] har påvisat att då sökmotorn är en så central del av en webbsida att användarna har höga förväntningar på dess prestanda. Vidare hävdar de att användaren förväntar sig att sökfunktionen ska fungera som deras mest använda sökmotorsida, som exempelvis Google, varför det är viktigt att härma beteendet av sådana sökmotorer. Enligt Yan och Guo så tenderar användare att inte passera första sidan med sökresultat, varför det är viktigt att det användaren letar efter finns med på den första sidan, varför sökresultaten ska sorteras efter relevans utan möjlighet att ändra parameter för sortering.

Filtrering och sortering

Med filtrering menas att användaren ges möjlighet att avgränsa vilken typ av resultat som visas baserat på särskilda kategorier och därmed undvika att intressanta träffar försvinner bland alternativ som användaren inte har nytta av [16]. Nudelman [47] redovisar två hu-vudsakliga sätt att filtrera sökresultat i en webbutik via: drill-down, respektive parallellval. Drill-down innebär att användaren sonderar produktutbudet genom att navigera sig djupare och djupare i produkthierarkin med hjälp av länkar, medan parallellval innebär att använ-daren, med hjälp av kryssrutor, avgränsar produktutbudet baserat på produkternas attribut. Nudelman menar att drill-down lämpar sig bäst vid ett djupt hierarkiskt produktutbud, medan parallellval är att föredra vid ett mångfacetterat snarare än hierarkiskt produktutbud. Vidare förklaras att en viktig aspekt vid filtrering är att förhindra att en särskild kombination av olika filter medför att det resulterande urvalet är tomt. Hur detta undviks på bästa sätt beror på vilken av de två implementationer av filtreringsverktyg som valts enligt Nudelman. Därtill beskrivs vikten av att underlätta för användaren att ändra de parametrar som ligger till grund för resultatet från angivna parametrar och därmed förhindra att användaren ger upp när den hamnat fel.

En sorteringsfunktion medför att användaren kan ordna resultatet [48] - exempelvis ef-ter att en sökning eller filtrering har skett - utifrån urvalets särskilda parametrar som bland annat popularitet och pris. Efter två studier på ämnet e-handel som pågick under 2016-2017 där majoriteten av de svarande var studenter och en ännu större majoritet yngre än 35 år gamla, fann Wang et. al. [48] att 64 % av de svarande sorterar sökresultat efter

försäljningsvo-lym, 44 % sorterar efter pris, 39 % sorterar efter betyg och 33 % efter popularitet. Nudelman [47] beskriver att möjligheten att sortera, eftersom webbutiker inte sällan innehåller så pass många produkter att även en väl avvägd filtrering fortfarande kan resultera i ett stort urval av produkter, blir ytterligare ett nödvändigt steg i användarens förmåga att hitta rätt. Nu-delman kallar detta filtrering genom sortering och menar på att den fundamentala skillnaden mellan att filtrera respektive sortera blir tämligen diffus när filtreringen efterlämnar ett så pass stort urval att användaren inte har en rimlig chans att gå igenom det.

3.7.3

Prestanda

R. B. Miller [49] skriver om olika gränser för tidsåtgång för en webbsida att hämta/uppdatera information:

• 0.1 sekund: Gränsvärde vilket tiden måste vara under för att användaren ska känna att de direkt manipulerar objekt på webbsidan (t.ex när användaren markerar celler i en tabell, eller filtrerar en lista). Detta skiljer sig från fallet när användaren känner att de befaller datorn att göra en uppgift åt dem.

• 1 sekund: Om tiden är under 1 sekund (och över 0.1 sekund) känner användaren att datorn utför en uppgift åt dem. Om tiden är längre än 1 sekund bör användaren infor-meras om att webbsidan laddar med någon form av återkoppling.

• 10 sekunder: Om tiden överstiger detta riskerar användaren att tappa uppmärksam-heten på uppgiften. Om tiden är under 10 sekunder (och över 1 sekund) behövs en indikator som visar hur många procent av uppgiften som är slutförd

3.8

Metodteori

I följande stycke beskrivs den teori som, tillsammans med den empiri som sammanställts ovan, ligger till grund för hur arbetets metod och genomförande är upplagt, för att besvara den ovan presenterade frågeställningen.

3.8.1

Designcykeln

Att designa en webbsida är en iterativ process som upprepas till dess att önskat resultat är uppnått. Det finns flera sätt att beskriva designprocessen där ett är att beskriva processen som en cykel uppdelad i fem steg. James Miller [50] delar upp designcykeln i fem steg och beskriver dem som följande:

Designcykelns första steg är empatisera, vilket innefattar att sympatisera med den po-tentiella användaren och dess behov. I detta steg ska information samlas in för att skapa en förståelse av användaren [51]. Användaren och dess behov bör tas i stor beaktning i utveck-lingen av en god design, varför det är därför av största vikt att tidigt i designarbetet klargöra dessa behov [28].

Designcykelns andra steg är definiera och bygger på att definiera problemet. Informatio-nen från tidigare steg används nu för att klargöra användarens önskan och problem, vilket i sin tur ger designarbetet information om en riktning att följa.

Det tredje steget är föreställa. Baserat på informationen från de två tidigare stegen ska det i detta steg genereras idéer av hur designen kan utformas. Även om idéerna kan baseras från resultat i tidigare steg, är det viktigt att i detta steg fortfarande ha ett brett perspektiv för att möjliggöra olika resultat och metoder.

I det fjärde steget, prototyp, är det dags att skapa prototypen. I detta steg ska idéerna från föregående steg användas för att skapa en design som förväntas tillfredsställa användaren. En prototyp är en konkret representation ett system, eller delar av det [52]. Enligt Walker et al. [53] är prototyper i webb- och mjukvarudesign, ett användbart verktyg för att undersöka innehåll, estetik samt interaktionsteknik ur både utvecklarens och användarens perspektiv. I prototyputvecklingsprocessen används en modell som har ett användargränssnitt med en relativt låg funktionalitetnivå. Genom att använda en prototyp möjliggörs verifieringen av utseende, känsla och användbarheten på webbsidan. Utvecklaren får också möjlighet att ta emot feedback från klienten och på så sätt säkerställa att båda parter delar en gemensam vision av den slutgiltiga produkten [54].

Sista delen av designcykeln kallas test och innefattar att testa prototypen. Steget ger svar om användarnas behov har uppfattats rätt [51]. Det finns ett flertal olika tekniker och metoder för att göra detta, där två är kontextuell undersökning och kognitiv genomgång [55].

Kontextuell undersökning

Raven och Flanders [55] beskriver kontextuell undersökning som ett typ av test där användaren ska utföra en specifik uppgift för att testa designens funktionalitet. Vidare skriver de att testet innefattar att observera användaren medan den utför en uppgift. De hävdar att uppgiften ska vara detaljerad och innehålla tydliga steg som måste följas för att uppgiften ska kunna slutföras.

Raven och Flanders anger att när uppgiften utförs ska frågor ställas till användaren för att uppmärksamma hur uppgiften uppfattas. Frågorna som bör ställas är följande:

• Förstår användaren vad den ska göra? • Är rätt funktioner synliga för användaren?

• Förstår användaren vilken funktion som ska användas?

• Förstår användaren informationen systemet ger om var i uppgiften den befinner sig? De hävdar vidare att efter att användaren utfört uppgiften är det viktigt att designern re-flekterar över vad som observerats under testet. Designern bör ställa sig frågor gällande vad som kan förbättras i designen, varför det kan förbättras samt hur problemen som uppstod kan lösas.

Kognitiv genomgång

Metoden kognitiv genomgång är enligt Sears [56] en användningsutvärdering gjord av utveck-laren själv, utvecklad för att spara tid och pengar relativt en kontextuell genomgång. Metoden går vidare att genomföra oftare och med fler funktioner än om användare måste samlas inför varje studie.

Enligt Lewis et al. [57] sker processen i flera steg där den första är att definiera kontex-ten av genomgången: vilka är användarna, vad är start och mål för utvärderingen, vilken är handlingssekvensen för att komma till målet samt måste en beskrivning och implementering av gränssnittet tas fram.

Lewis et al. beskriver vidare att analytikerna sedan ska samlas och gå igenom sekvensen där de ska svara på frågorna: Kommer användaren försöka uppnå önskad effekt?, Kommer använ-daren att uppmärksamma att den korrekta handlingen är tillgänglig?, Kommer använanvän-daren associera rätt handling med önskad effekt? samt Om rätt handling utförs kommer användaren förstå, genom den feedback denne får, att denne är på väg i rätt riktning?