• No results found

Hur en god användbarhet kan uppnås med avseende på navigerbarhet vid utvecklandet av en e-handel

N/A
N/A
Protected

Academic year: 2021

Share "Hur en god användbarhet kan uppnås med avseende på navigerbarhet vid utvecklandet av en e-handel"

Copied!
92
0
0

Loading.... (view fulltext now)

Full text

(1)

Link¨opings universitet — Institutionen f¨or datavetenskap Kandidatuppsats — Industriell ekonomi - datavetenskap V˚arterminen 2019 — LIU-IDA/LITH-EX-G–19/019—SE

Hur en god anv¨andbarhet kan uppn˚as

med avseende p˚a navigerbarhet vid

utvecklandet av en e-handel

How to achieve good usability with

regard to navigability in e-commerce

development

Axel Ekenstierna

Sandra F¨ardig

Jonatan Harling

Malin Johansson

Marcus Lannhard

Oscar Moberg

Emma Ros´en

Armin Walian

Handledare: Dennis Persson

Examinator: Aseel Berglund

(2)

Kandidatrapport

Upphovsr¨att

Detta dokument h˚alls tillg¨angligt p˚a Internet – eller dess framtida ers¨attare – under 25 ˚ar fr˚an publiceringsdatum under f¨oruts¨attning att inga extraordin¨ara omst¨andigheter uppst˚ar.

Tillg˚ang till dokumentet inneb¨ar tillst˚and f¨or var och en att l¨asa, ladda ner, skriva ut enstaka kopior f¨or enskilt bruk och att anv¨anda det of¨or¨andrat f¨or ickekommersiell forskning och f¨or undervisning.

¨

Overf¨oring av upphovsr¨atten vid en senare tidpunkt kan inte upph¨ava detta tillst˚and. All annan anv¨andning av dokumentet kr¨aver upphovsmannens medgivande. F¨or att garantera ¨aktheten, s¨akerheten och tillg¨angligheten finns l¨osningar av teknisk och administrativ art.

Upphovsmannens ideella r¨att innefattar r¨att att bli n¨amnd som upphovsman i den omfattning som god sed kr¨aver vid anv¨andning av dokumentet p˚a ovan beskrivna s¨att samt skydd mot att dokumentet ¨andras eller presenteras i s˚adan form eller i s˚adant sammanhang som ¨ar kr¨ankande f¨or

upphovsmannens litter¨ara eller konstn¨arliga anseende eller egenart.

F¨or ytterligare information om Link¨oping University Electronic Press se f¨orlagets 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 download, or to print out single copies for his/hers own use and to use it unchanged for

noncommercial 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¨oping University Electronic Press and its procedures for

(3)

Kandidatrapport

Abstract

A survey, carried out and answered by students at Link¨oping University proved that 92.6% of the surveyees are interested in buying second-hand course literature. Numerous retailers exist for this market, however the problems with the solutions at the time of the survey are clear; lack of structure and absence of filtering and search functions. Therefore, the thesis aims to create an ecommerce for second-hand course literature with good usability with regards to good navigability for students by applying scientific theories and the feedback of user tests at two separate iterations. The result was Bokhyllan, a web application where buyers and sellers meet to exchange second-hand course literature for money. The conclusion was that the navigation bar, visual confirmations after actions, useful search and filtering functions, and the layout and placement of links make up decisive roles in the navigability of web applications. A relevant addition to this report within the key area would be to investigate different age groups, as this report solely delimits to students.

(4)

Kandidatrapport

Sammanfattning

En enk¨atunders¨okning som utf¨ordes och besvarades av studenter vid Link¨opings universitet p˚avisade att 92,6% av enk¨atbesvararna ¨ar intresserade av att k¨opa begagnad kurslitteratur. Ett flertal akt¨orer existerar f¨or denna marknad men problemen med l¨osningarna vid enk¨atens tillf¨alle ¨ar tydliga; brist p˚a struktur och avsaknad av filtrerings- och s¨okfunktioner. Arbetet ¨amnar d¨armed att skapa en e-shop f¨or begagnad kurslitteratur med god anv¨andbarhet med avseende p˚a god navigerbarhet f¨or studenter genom att applicera vetenskapliga teorier samt ˚aterkopplingen fr˚an anv¨andartester vid tv˚a olika iterationer. Resultatet blev Bokhyllan, en webbapplikation d¨ar k¨opare och s¨aljare m¨ots f¨or att utbyta begagnad kurslitteratur mot pengar. Slutsatsen drogs att navigationsmenyn, visuell bekr¨aftelse vid handlingar, anv¨andbara s¨ok- och filtreringsfunktioner samt l¨ankars utformning och placering utg¨or avg¨orande roller f¨or webbapplikationers navigerbarhet. En relevant p˚abyggnad f¨or detta arbete inom huvudomr˚adet skulle vara att unders¨oka olika ˚aldersgrupper, d˚a denna rapport endast avgr¨ansar sig till studenter.

(5)

Kandidatrapport INNEH ˚ALLSF ¨ORTECKNING

Inneh˚allsf¨orteckning

1 Inledning 1 1.1 Motivering . . . 1 1.2 Syfte . . . 2 1.3 Fr˚agest¨allning . . . 2 1.4 Avgr¨ansningar . . . 2 2 Teori 3 2.1 E-handeln och dess framg˚ang . . . 3

2.2 Anv¨andbarhet . . . 3

2.2.1 Vad ¨ar anv¨andbarhet? . . . 3

2.2.2 Anv¨andarcentrerad design . . . 4

2.2.3 Log in . . . 5

2.2.4 Komponenter f¨or anv¨andbar e-handel . . . 5

2.2.4.1 Laddningstid . . . 5

2.2.4.2 Aff¨arsm¨assigt inneh˚all . . . 5

2.2.4.3 S¨akert intryck . . . 5

2.3 Navigerbarhet . . . 6

2.3.1 Webbaserad navigerbarhet? . . . 6

2.3.2 Varf¨or navigerbarhet ¨ar viktigt . . . 6

2.3.3 Hur god navigerbarhet uppn˚as . . . 7

2.3.4 L¨ankar . . . 7

2.3.4.1 Designa en effektiv l¨ank . . . 7

2.3.4.2 L¨ankarnas destination . . . 8

2.3.4.3 Hantering av m˚anga l¨ankar . . . 8

2.3.4.4 Placering av l¨ankar . . . 8 2.3.5 Filtrering . . . 8 2.3.6 S¨ok . . . 9 2.3.7 Utseende . . . 10 2.3.7.1 Orientering . . . 10 2.3.7.2 Startsida . . . 11 2.4 Metodteori . . . 12 2.4.1 Enk¨atmetodik . . . 12 2.4.2 Brainwriting . . . 13 2.4.3 Prototyp . . . 13 2.4.4 Arbetsmetodik . . . 14 2.4.5 Intervjuer . . . 14 2.4.6 Anv¨andartester . . . 15 2.4.6.1 Allm¨ant . . . 15 2.4.6.2 Testpersoner . . . 15 2.4.6.3 Aterblickande utv¨ardering . . . .˚ 15 2.4.6.4 Lostness . . . 16

2.4.6.5 Samtidigt t¨ankande (CTA) . . . 16

2.4.7 Heuristisk utv¨ardering . . . 16

(6)

Kandidatrapport INNEH ˚ALLSF ¨ORTECKNING 3.1 F¨orstudie . . . 18 3.1.1 Behovsanalys . . . 18 3.1.2 Prototyp . . . 18 3.2 Implementation . . . 18 3.2.1 Arbetsmetodik . . . 18 3.2.2 Anv¨andartester . . . 19 3.2.3 Design . . . 20 3.2.3.1 Front-end . . . 20 3.2.3.2 Back-end . . . 20 3.2.4 Databas . . . 20 3.3 Utv¨ardering . . . 20 4 Resultat 22 4.1 F¨orstudie . . . 22 4.1.1 Behovsanalys . . . 22 4.1.2 Prototyp . . . 22 4.2 Implementation . . . 23 4.2.1 Startsida . . . 23 4.2.2 Formul¨ar . . . 25 4.2.3 Mitt konto . . . 26

4.2.4 Navigationsmeny och sidfot . . . 27

4.2.5 Om oss . . . 29 4.2.6 FAQ . . . 29 4.2.7 K¨opsida . . . 30 4.2.7.1 S¨okfunktion . . . 31 4.2.7.2 Filtrering . . . 31 4.2.7.3 Boklista . . . 32 4.2.7.4 Helhet . . . 33

4.2.8 Kundvagn och Kassa . . . 33

4.2.9 Betalprocess . . . 33 4.2.10 Anv¨andartester . . . 34 4.3 Utv¨ardering . . . 39 5 Diskussion 42 5.1 Resultatdiskussion . . . 42 5.1.1 Startsida . . . 42

5.1.2 Kundvagn och Kassa . . . 43

5.1.3 Formul¨ar . . . 43

5.1.4 FAQ och Om oss . . . 44

5.1.5 K¨opsidan . . . 44 5.1.5.1 Filtrering . . . 44 5.1.5.2 S¨okfunktion . . . 45 5.1.5.3 Helhet . . . 46 5.1.6 Mitt konto . . . 46 5.1.7 Betalprocess . . . 47 5.1.8 Navigationsmeny . . . 48 5.1.9 Utv¨ardering . . . 49 5.1.9.1 Anv¨andartester . . . 50

(7)

Kandidatrapport INNEH ˚ALLSF ¨ORTECKNING

5.1.9.2 Heuristisk utv¨ardering . . . 51

5.2 Metoddiskussion . . . 54

5.2.1 Prototyp . . . 54

5.2.2 Anv¨andartester . . . 55

5.2.2.1 Utformning och testgrupp . . . 55

5.2.2.2 Retrospective probing . . . 56

5.2.2.3 Concurrent think aloud . . . 56

5.2.3 Heuristisk utv¨ardering . . . 56

5.2.4 Vidare Sammanhang . . . 57

5.2.4.1 Ut¨okad konkurrent- samt marknadsanalys . . . 57

5.2.4.2 Mer anv¨andarv¨anliga betalningsfunktioner . . . 57

5.2.4.3 Generisk sida . . . 57

5.2.4.4 M˚algrupp . . . 57

5.2.5 Etiska & samh¨alleliga aspekter . . . 58

5.2.6 Arbetsmetodik . . . 58 5.2.7 K¨allkritik . . . 58 6 Slutsatser 60 7 Referenser 61 Appendices 66 A Unders¨okning e-shop 66 A.1 Fast avgift . . . 67

A.2 Procentuell avgift . . . 67

A.3 S¨okmotor . . . 68 B Marknadsplan

C Anv¨andartest 2 testresultat

D Anv¨andartest 1 - instruktion till testledare E Anv¨andartest 2 - instruktion till testledare

(8)

Kandidatrapport FIGURER

Figurer

1 Relationen mellan komplexitet och effektivitet. . . 12

2 Exempel p˚a hur den f¨orsta modellen av prototypen s˚ag ut. . . 22

3 Filtrerings samt s¨okfunktionen f¨or den andra modellen. . . 23

4 Startsidan efter sprint 1. . . 24

5 Startsidan efter sprint 2 . . . 24

6 F¨or¨andringen av annonsformul¨aren . . . 25

7 Den f¨ardiga profilsidan. . . 26

8 Profilsidan fr˚an sprint 1, med ¨andra uppgifter till h¨oger . . . 27

9 Navigationsmenyn efter f¨orsta iterationen. . . 27

10 Navigationsmenyn f¨or ej inloggade anv¨andare. . . 28

11 Navigationsmenyn f¨or inloggade anv¨andare. . . 28

12 Webbapplikationens sidfot. . . 28 13 Om oss, iteration 1. . . 29 14 Om oss, iteration 2. . . 29 15 FAQ, iteration 1. . . 29 16 FAQ iteration 2. . . 30 17 S¨okfunktionen, iteration 1. . . 31 18 S¨okfunktionen, iteration 2. . . 31 19 Filtreringsfunktionen, iteration 1. . . 31 20 Filtreringsfunktionen, iteration 2. . . 31

21 Boklistan Mer om boken fr˚an iteration 1 . . . 32

22 Boklistan Mer om boken fr˚an iteration 2 . . . 32

23 Kundvagnen i form av en modal. Varje bok visas samt det totala priset. . . 33

24 Den del av betalsystemet Stripe anv¨andarna ser. . . 34

25 Medelv¨arde f¨or p˚ast˚aende 1-9. . . 38

26 Medelv¨arde f¨or Lostness. . . 50

Tabeller

1 Heuristisk utv¨ardering. . . 17

2 Lostness anv¨andartest 1. . . 35

3 Potentiella f¨orb¨attringar anv¨andartest 1. . . 36

4 Lostness anv¨andartest 2. . . 37

5 Lostness f¨or att genomf¨ora ett k¨op med start som icke inloggad anv¨andare. . . 37

6 Potentiella f¨orb¨attringar efter anv¨andartest 2. . . 39

7 Heuristisk utv¨ardering. . . 41 8 Svar p˚a p˚ast˚aenden, anv¨andartest 2. . . .

(9)

Kandidatrapport 1. INLEDNING

1

Inledning

N¨astan var tredje heltidsstudent upplever ekonomiska sv˚arigheter i h¨og eller mycket h¨og grad1. F¨or

en svensk student kostar kursb¨ockerna i snitt cirka 3 000 kronor per termin2. En begr¨ansad budget i kombination med dyr obligatorisk kurslitteratur medf¨or att m˚anga studenter v¨ander sig till marknaden f¨or begagnad kurslitteratur3. Med denna utg˚angspunkt avser detta projekt att producera en strukturerad

och l¨attnavigerad webbapplikation d¨ar f¨ors¨aljning av begagnad kurslitteratur sker mellan Link¨opings universitetsstudenter.

1.1

Motivering

I dagsl¨aget ¨ar n¨astan samtliga 27 000 universitetsstudenter i Link¨oping intresserade av att k¨opa begag-nad kurslitteratur4,5. Den stora efterfr˚agan har medf¨ort att m˚anga ˚aterf¨ors¨aljare av ny kurslitteratur, exempelvis Bokab, Campusbokhandeln och Bokus, anpassat sin verksamhet genom att implementera n˚agon typ av strategi d¨ar f¨ors¨aljningen av begagnad kurslitteratur kan ske genom dem. ¨Aven webba-serade akt¨orer har p˚a senare ˚ar intagit marknaden. Facebook Marketplace ¨ar en popul¨ar m¨otesplats d˚a den framf¨orallt ¨ar gratis, redan har en stor anv¨andarbas och kan ske ¨oppet f¨or alla anv¨andare p˚a en stor marknadsplats eller genom en sluten grupp. Problemen med dagens l¨osningar har d¨aremot gjorts tydliga av marknadsunders¨okningen. De fysiska butikerna tar f¨or h¨oga avgifter av s¨aljaren och de webbaserade marknaderna har antingen dyr frakt eller ¨ar ostrukturerade. Deltagarnas kommen-tarer fr˚an marknadsunders¨okningen pekade d¨aremot p˚a den st¨orsta nackdelen med dagens l¨osningar - anv¨andbarheten. ’Ostrukturerat’, ’D˚aligt med s¨ok- och sorteringsfunktioner’, ’R¨origt’ ¨ar n˚agra av svaren p˚a fr˚agan om vad deltagarna tycker ¨ar problemen med dagens l¨osningar6.

Bokhyllan ¨ar l¨osningen som uppfyller konsumenternas behov. Webbapplikationen konstrueras som en marknadsplats d¨ar k¨opare och s¨aljare m¨ots och genomf¨or transaktioner via plattformen. S¨aljare kom-mer kunna publicera annonser p˚a kurslitteraturen som de ¨onskar s¨alja, k¨opare ska enkelt och smidigt kunna hitta kurslitteraturen som de ¨onskar k¨opa. Efter genomf¨ort k¨op ska parterna sedan f˚a kontakt-uppgifter till varandra och kommunicera fram en plats och tid f¨or ¨overl¨amningen av kurslitteraturen. Detta medf¨or att varken k¨oparen eller s¨aljaren beh¨over st˚a f¨or dyra fraktkostnader. Bokhyllan endast en fem procent av f¨ors¨aljningspriset, maximalt femtio kronor, vilket ¨ar betydlit mindre ¨an de lokala bokhandlarna.

F¨or att studenterna ska motiveras till att anv¨anda Bokhyllan ist¨allet f¨or dagens akt¨orer, ¨ar det viktigt att webbapplikationen ¨ar enkel att anv¨anda och navigera igenom. D¨arf¨or kommer s¨ok- och filtre-ringsfunktioner implementeras s˚a att k¨opare snabbt kan hitta kurslitteraturen som de s¨oker. S¨aljare ska snabbt kunna publicera kurslitteraturen som de ¨onskar s¨alja med n¨odv¨andig information s˚a att sorterings- och filtreringsalternativen kan leda k¨oparen i r¨att riktning. Designen av en webbapplikatio-nen utg¨or en stor roll i hur m˚anga transaktioner som genomf¨ors och hur l˚ang tid som varje transaktion

1Universitets- och h¨ogskoler˚adet, ’En kort inblick i studenternas ekonomi’, 2015. [Online]. Tillg¨anglig:

https://www.uhr.se/globalassets/˙uhr.se/lika-mojligheter/eurostudent/eurostudentv˙studentekonomi.pdf. [H¨amtad: 28-apr- 2019].

2Civilekonomen, Johansson, ’S˚a s¨anker du kostnaden f¨or kurslitteraturen’, 2017. [Online]. Tillg¨anglig:

https://www.civilekonomen.se/verktyg/sa-sanker-du-kostnaden-for-kurslitteraturen/. [H¨amtad: 28- apr- 2019].

3Enk¨at. V¨anligen se bilaga A. 4Enk¨at. V¨anligen se bilaga A.

5Link¨opings universitet, ’Om LiU’, 2019. [Online]. Tillg¨anglig: https://liu.se/om-liu. [H¨amtad: 28- apr- 2019]. 6Enk¨at. V¨anligen se bilaga A.

(10)

Kandidatrapport 1. INLEDNING

kr¨aver. D¨arf¨or ¨ar det essentiellt att anv¨andare effektivt kan hitta det som s¨oks. Risken blir annars att anv¨andare upplever desorientering vilket kan medf¨ora att studenter v¨aljer bort Bokhyllan som alter-nativ. Bokhyllan kommer d¨arf¨or att designas utifr˚an ett globalt navigationssystem d˚a det visat sig vara effektivast och resulterat i h¨ogre anv¨andarengagemang [1].

1.2

Syfte

Projektets syfte ¨ar att skapa en webbapplikation utformad som en marknad f¨or f¨ors¨aljning och kon-sumering av begagnad kurslitteratur mellan studenter. E-shopen ¨amnar vara l¨attnavigerad och struk-turerad s˚a att anv¨andarna kan genomf¨ora transaktioner p˚a smidigast m¨ojliga s¨att. D˚a kunder anser att dagens E-butiker ¨ar mest bristf¨alliga i sin anv¨andbarhet ¨ar det mest aktuellt att unders¨oka det omr˚adet.

1.3

Fr˚agest¨allning

Hur ska en e-butik f¨or f¨ors¨aljning av begagnad kurslitteratur konstrueras f¨or att uppn˚a god anv¨andbarhet med avseende p˚a god navigerbarhet, m¨att med Lostness och anv¨andarnas upplevda subjektiva ˚asikt?

1.4

Avgr¨ansningar

D˚a projektets m˚algrupp ¨ar Link¨opings universitetsstudenter, kommer anv¨andarbasen att avgr¨ansas s˚a att den endast omfattar dessa. Webbapplikationen kommer endast att kunna anv¨andas och redigeras av projektmedlemmarna under uppbyggnadsfasen. Detta medf¨or att ingen utomst˚aende kommer kunna genomf¨ora transaktioner fram till dess att den konstruerats f¨ardigt.

(11)

Kandidatrapport 2. TEORI

2

Teori

I f¨oljande avsnitt presenteras vetenskaplig teori som utg¨or grunden till studien.

2.1

E-handeln och dess framg˚ang

E-handeln har v¨axt explosionsartat och befinner sig fortfarande i en stark tillv¨axtfas. Under 2018 var tillv¨axten 15 % j¨amf¨ort med ˚aret innan, och oms¨attningen p˚a den svenska marknaden uppgick till 77 miljarder kronor. Bokhandeln var den f¨orsta branschen som slog igenom p˚a webben, och idag s¨aljs varannan bok p˚a internet7.

Anv¨andbarheten p˚a en webbapplikation f¨or e-handel ¨ar en viktig aspekt, och det h¨or starkt ihop med intentionen att genomf¨ora ett k¨op, se 1.1. Webbapplikationer b¨or d¨arf¨or ha en anv¨andbar design f¨or att beh˚alla kunderna.

2.2

Anv¨andbarhet

Under denna sektion presenteras definitionen av anv¨andbarhet, samt m¨ojligheter f¨or en webbapplika-tion att ¨oka anv¨andbarheten.

2.2.1 Vad ¨ar anv¨andbarhet?

Anv¨andbarhet ¨ar ett kvalitativ attribut som utv¨arderar hur l¨att ett anv¨andar-interface ¨ar att anv¨anda. Ordet kan ¨aven referera till metoder f¨or att f¨orb¨attra “l¨attanv¨andning” under sj¨alva designprocessen [2].

ISO har ¨aven en definition av anv¨andbarhet fr˚an ISO 9241-11 som lyder: “Den grad som en produkt kan bli anv¨and av specifika anv¨andare f¨or att uppn˚a specifika m˚al med effektivitet och sj¨alvf¨orverklingande i en specifikt anv¨andningskontext.” ISO:s definition handlar inte bara om produkten, utan tar ¨aven h¨ansyn till hur n¨ojd anv¨andaren ¨ar, definierat av ISO som “Freedom from discomfort, and positive attitudes towards the use of the product” [3].

ISO:s syn p˚a anv¨andbarhet har f¨orl¨angts till att ¨aven inkludera s¨akerhet, det vill s¨aga konsekvenser av anv¨andning, (potentiella aff¨ars- och finansiella konsekvenser av felanv¨andning). Detta perspektiv p˚a anv¨andbarhet ¨ar starkt sammankopplat med aff¨arsm˚al f¨or organisationer. Bevan talar om att effekti-vitet och s¨akerhet har en direkt p˚averkan p˚a l¨onsamheten f¨or system som anv¨ands av organisationer, d¨ar sj¨alvf¨orverkligande ¨ar n¨odv¨andigt f¨or anv¨andningen, speciellt n¨ar det kommer till hemsidor [3]. F¨or att definiera anv¨andbarhet kan fem kvalitetskomponenter till¨ampas:

L¨arbarhet: Hur l¨att ¨ar det f¨or anv¨andare att utf¨ora grunduppgifterna vid f¨orsta bes¨oket av hemsidan? Effektivitet: Hur snabbt g˚ar det f¨or en anv¨andare att utf¨ora uppgifter n¨ar de l¨art sig designen? Memorerbarhet: N¨ar anv¨andare kommer tillbaka till sidan efter en tids fr˚anvaro, hur fort g˚ar det att f˚a tillbaka sin s¨akerhet p˚a sidan?

Fel: Hur m˚anga fel g¨or anv¨andare, hur stora ¨ar felen, och hur l¨att kan de komma tillbaka fr˚an dessa fel?

Sj¨alvf¨orverkligande: Hur smidigt ¨ar det att anv¨anda designen?

7PostNord, ’e-barometern 2018’, 2019. [Online]. Tillg¨anglig:

(12)

Kandidatrapport 2. TEORI

P˚a internet ¨ar anv¨andbarhet ett n¨odv¨andigt villkor f¨or att ¨overleva. Om en webbapplikation ¨ar sv˚ar att anv¨anda, om startsidan ger bristf¨allig information om vad som kan g¨oras, eller om den inte svarar p˚a anv¨andares nyckelfr˚agor, kommer anv¨andaren l¨amna sidan. Anv¨andare kommer aldrig l¨asa en manual f¨or webbapplikationen eller l¨agga l˚ang tid p˚a att f¨ors¨oka f¨orst˚a interfacet [2].

2.2.2 Anv¨andarcentrerad design

Det finns tv˚a typer av syns¨att p˚a design f¨or hemsidor: datadriven eller anv¨andarcentrerad. Anv¨andarcentrerad design tar sin grund i de faktiska anv¨andare som bes¨oker webbapplikationen [4].

En viktig aspekt som ofta f¨orbises ¨ar det faktum att att en webbapplikation har m˚anga olika typer av bes¨okare, och med det kommer olika behov. Detta b¨or reflekteras v¨al p˚a webbapplikationen. F¨orfattaren lyfter ett exempel fr˚an universitets-sidor, d¨ar en student vill hitta en snabb v¨ag f¨or att hitta ¨onskad kurs, f¨orel¨asaren etc. Oftast ¨ar dessa sidor inte utformade p˚a detta vis, utan t.ex. ligger fokus p˚a att visa vad f¨orel¨asaren har forskat i, olika funktioner p˚a universitetet etc. Detta betyder att studenten som bes¨oker webbapplikationen m˚aste scanna igenom mycket inneh˚all f¨or att hitta det den ¨ar ute efter. En metod f¨or att hantera detta och f˚a till en anv¨andarcentrerad design ¨ar WDSM.

WDSM best˚ar av flera faser - Anv¨andarmodellering, Konceptdesgin, Implementationsdesign och Im-plementation.

Anv¨andarmodellering • Anv¨andarklassificering:

I detta steg identifieras och klassificeras bes¨okargrupper webbapplikationen har. En anv¨andarklass definieras som alla potentiella anv¨andare som har samma informationsbehov. Dessa beh¨over in-te vara unika, utan en anv¨andare kan tillh¨ora flera anv¨andarklasser.

• Beskrivning av Anv¨andarklasser:

H¨ar analyseras klasserna i detalj, f¨or att f˚a fram informationsbehovet hos de olika anv¨andargrupperna. Vidare karakt¨ariseras dessa grupper f¨or att f˚a reda p˚a hur informationen ska presenteras f¨or en s¨arskild grupp. Exempel p˚a detta kan vara: erfarenhet av hemsidor, anv¨andningsfrekvens av webbapplikationen, spr˚aksv˚arigheter etc.

Konceptdesign

• Objektorienterad Modellering:

H¨ar ska behoven som beskrivs i tidigare steg modelleras. Detta g¨ors genom att bygga objekt-modeller f¨or de olika klasserna.

Implementationsdesign

• I detta skede designas “k¨anslan” f¨or webbapplikationen. M˚alet med fasen ¨ar att skapa en kon-sistent, v¨alkomnande och effektiv bild av designen som gjordes i tidigare skede.

Implementering

• I detta skede ska webbapplikationen realiseras, och designen anv¨ands f¨or att g¨ora detta. Det betyder att om HTML anv¨ands ska modellen ¨overs¨attas till HTML-kod [4].

(13)

Kandidatrapport 2. TEORI

2.2.3 Log in

S¨akerhet och anv¨andbarhet anses b˚ada vara viktiga i autentiseringsprocessen, men de b˚ada delarna motarbetar varandra d˚a komplexa s¨akerhetsmetoder inte anses vara gynnande f¨or god anv¨andbarhet. F¨or att l¨osa detta m˚aste en l¨amplig balans hittas. F¨or att minimera denna konflikt kan generella heu-ristikprinciper anv¨andas, s˚asom att minimera anv¨andarens input, meddela anv¨andaren om beslut som fattas av hen, och ge anv¨andaren m¨ojlighet att ˚angra inputs [5].

2.2.4 Komponenter f¨or anv¨andbar e-handel

Framg˚angen f¨or en e-handel, i synnerhet om det inte ¨ar ett v¨alk¨ant f¨oretag som st˚ar bakom, be-ror till stor del p˚a webbplatsens design och utformning. Komponenter p˚a webbapplikationen som f¨orenklar anv¨andandet, till exempel betalningsprocessen, kan reducera den mentala insats som kr¨avs av anv¨andaren och d¨armed ¨oka k¨anslan av kontroll och makt av resurser vilket f¨orst¨arker beteendein-tentionen [6].

Gehrke och Turban identifierade ett antal faktorer som ¨ar n¨odv¨andiga f¨or en anv¨andbar e-handel som n¨amns nedan [6].

2.2.4.1 Laddningstid

Laddningstiden ¨ar en kritisk faktor p˚a en webbapplikation. Om webbapplikationen laddar f¨or l¨ange l¨amnar kunderna webbapplikationen f¨or en annan. Ibland ¨ar laddningstiden n˚agot som webbdesig-nern inte r˚ar p˚a, eftersom den ¨aven p˚averkas av exempelvis serverns hastighet och kapaciteten hos anv¨andarens enhet. Det webbdesigners dock kan g¨ora f¨or att f¨orb¨attra laddningstiden ¨ar till exempel att anv¨anda enkel och meningsfull grafik och animation, eftersom detta ¨ar s˚adant som s¨anker hastig-heten [6].

2.2.4.2 Aff¨arsm¨assigt inneh˚all

Det aff¨arsm¨assiga inneh˚allet ¨ar centralt f¨or en webbapplikation eftersom det avg¨or om en potentiell kund kommer genomf¨ora ett k¨op eller l¨amna webbapplikationen. Gehrke och Turban rekommenderar bland annat att h˚alla inneh˚allet p˚a webbapplikationen uppdaterat, anv¨anda koncisa och informativa produktbeskrivningar samt att f¨orse webbapplikationen med kontaktinformation. De po¨angterar ocks˚a vikten av att inte kr¨ava f¨or mycket information i registreringsformul¨ar eftersom det kan driva iv¨ag de potentiella kunderna [6].

2.2.4.3 S¨akert intryck

S¨akerhet har kommit att bli en viktig del av en webbapplikation. Intrycket av en s¨aker e-handel f˚as bland annat genom att att anv¨anda bekr¨aftade verifikationssymboler f¨or betalningen, men ocks˚a ge-nom att k¨oparen f˚ar n˚agon slags bekr¨aftelse efter ett gege-nomf¨ort k¨op [6].

(14)

Kandidatrapport 2. TEORI

2.3

Navigerbarhet

2.3.1 Webbaserad navigerbarhet?

Enligt Watts-Perotti och Woods ¨ar webbaserad navigerbarhet definierad som ”besluten och handling-arna som bidrar till en persons f¨orm˚aga att hitta och unders¨oka organiserade data i datormilj¨on” [7]. Allts˚a kan ett webbaserat navigationssystem beskrivas som ett system som ¨ar designat i syfte att bist˚a anv¨andaren i s¨okandet och unders¨okningen av data p˚a en webbapplikation [1].

Mer konkret utg¨ors navigerbarhet av webbapplikationens design, verktyg (exempelvis l¨ankar, fil-trering, s¨okfunktion), och struktur. Park och Kim presenterar tv˚a typer av navigationssystem i sin vetenskapliga artikel. Enkla navigationssystem som endast presenterar lokala l¨ankar (exempelvis ”f¨oreg˚aende” och ”n¨asta”) till andra platser p˚a webbapplikationen och globala navigationssystem som m¨ojligg¨or tillg˚ang till webbapplikationens alla platser oavsett var man befinner sig via exempel-vis en implementerad plats¨oversikt i navigeringsmenyn [8]. Enkla navigationssystem ¨ar l¨ampliga f¨or sm˚a, enkla webbsidor d˚a tiden f¨or s¨okningen g˚ar fortare. D¨aremot leder globala navigationssystem till mindre desorientering f¨or anv¨andaren och beh¨over inte n¨odv¨andigtvis ta l¨angre tid om plats¨oversikten ¨ar tillr¨ackligt effektiviserad [1].

2.3.2 Varf¨or navigerbarhet ¨ar viktigt

En konsument kan enkelt bli ¨overv¨aldigad av m¨angden information som finns tillg¨anglig p˚a internet. Forskning har visat att ¨over 95% av potentiella konsumenter som surfar p˚a webbsidor l¨amnar web-bapplikationen utan att k¨opa n˚agot, fr¨amst f¨or att de inte kan hitta det de s¨oker8. Det leder till att

konsumenten upplever frustration, brist p˚a intresse och irritation [9]. N¨ar en s˚adan obekv¨am situation uppst˚ar, oavsett om det ¨ar en virtuell eller konventionell butik, vill kunden sl¨appa kundvagnen och l¨amna butiken. Ut¨over ett uteblivet k¨op kan en s˚adan erfarenhet ha en l˚angsiktig effekt p˚a hur kunden ser p˚a f¨oretagets image. Minskad tillit, generositet, p˚alitlighet, kompetens och integritet ¨ar potentiella p˚af¨oljder [10], [11]. Med tanke p˚a hur enkelt och snabbt en kund kan l¨amna en e-butik, i j¨amf¨orelse med en fysisk butik, och ist¨allet v¨anda sig till en konkurrent, blir irritationsmomentet mycket mer relevant och skadligt vid n¨athandel [12].

D¨arf¨or ¨ar det viktigt att en webbapplikation ¨ar utformad med effektiviteten av navigerbarhet i fokus – det medf¨or att f¨ors¨aljning och kundn¨ojdhet ¨okar [13]. Minskning av desorientering ¨ar inte bara prestandah¨ojande, anv¨andare blir dessutom mer engagerade i webbinteraktion och mer ben¨agna att ˚aterbes¨oka webbapplikationen [1]. D˚a kunder inte ˚aterv¨ander till en webbapplikation om inte de har en god initial erfarenhet, m˚aste interaktionen mellan kund och webbplats vara irritationsfritt fr˚an start och sedan l¨opande [14].

F¨or att upplevelsen inte ska k¨annas frustrerande f¨or kunden m˚aste webbapplikationen vara s˚a effektiv som m¨ojligt, detta d˚a webbplatseffektiviteten och kundlojaliteten har en signifikant positiv korrela-tion: n¨amligen cirka 30%. D¨arf¨or ¨ar det viktigt att konsumenten kan anv¨anda sig av webbapplikatio-ners verktyg, exempelvis s¨ok- och sorteringsfunktioner, f¨or att enkelt hitta det som s¨oks [14].

8Fortune Magazine, ’E-retailing, a giant industry virtually awakens’, 2000. Vol 142, No. 6, S1-S40. [H¨amtad: 29-

(15)

Kandidatrapport 2. TEORI

2.3.3 Hur god navigerbarhet uppn˚as

F¨or att uppn˚a effektiv och anv¨andbar navigation m˚aste de negativa p˚af¨oljderna av desorientering mi-nimeras. Nedan presenteras exempel p˚a vad som kan implementeras f¨or att uppn˚a det m˚alet.

• Tr¨affs¨akra l¨ankar

En otydligt presenterad l¨ank eller en l¨ank som leder till en ˚aterv¨andsgr¨and ¨ar en av de misstagen som kan frustrera en anv¨andare som mest [6]. En l¨ank b¨or kort beskrivas med ett ord eller tv˚a och svara p˚a f¨oljande fr˚agor: ”Vad kommer jag att f˚a om jag klickar h¨ar?” samt ”Varf¨or skulle jag vilja ha resultatet som klickningen genererar?” [15]. L¨ankarna b¨or heller inte ¨oppna upp nya webbl¨asare eller popupf¨onster [6].

• Konsekvent navigering

Forskare har lite olika ˚asikter p˚a denna punkt. Wilson menar att det ska finnas s˚a m˚anga v¨agar som m¨ojligt att ta sig till en specifik plats p˚a webbplatsen. Knappar, sidkartor, hyperl¨ankar, s¨okmotorer och rullistor som alla bidrar till ¨overgripande anv¨andbarhet vid r¨att implementation [16]. Berst menar d¨aremot att navigeringen inte b¨or g¨oras st¨okig och att k¨arnmetoden f¨or navi-gering b¨or h˚allas konsekvent [17]. Tadjer argumenterar att en navigationssmeny b¨or existera p˚a varje webbapplikation samt att en av knapparna direkt ska kunna leda kunden till kassan [18]. • Effektiv s¨okfunktion

”. . . inom e-handel motsvarar varje misslyckad produkts¨okning ett butiksbitr¨ade som s¨ager ’f¨orl˚at, jag tror inte vi har den produkten.’” skriver Haine [15]. Kunden b¨or ha m¨ojligheten att s¨oka p˚a olika nyckelord f¨or att kunna hitta det som s¨oks. Mest relevant blir det i detta fal-let d˚a konsumenter som handlar p˚a webbsidor f¨or kurslitteratur oftast s¨oker specifika b¨ocker. D¨armed blir det extra viktigt att m¨ojligg¨ora en variation av s¨okningar som leder till den rele-vanta produkten.

• F¨orse anv¨andaren med en plats¨oversikt

Kunden b¨or kunna ta sig till vilken plats som helst p˚a webbapplikationen oavsett var kunden befinner sig. Detta g¨ors genom att implementera en plats¨oversikt i exempelvis navigationsme-nyn eller i en separat del som ¨ar synlig f¨or anv¨andaren. Vidare kan l¨ankar anv¨andas enligt ovan med syftet att kunden ska veta vad som ska klickas f¨or att ta sig till en ¨onskad plats [6].

2.3.4 L¨ankar

L¨ankar ¨ar anv¨andarens v¨ag mellan olika destinationer p˚a webbapplikationen, och det ¨ar designerns ansvar att dessa fungerar [19].

2.3.4.1 Designa en effektiv l¨ank

Det ¨ar viktigt att l¨ankar indikerar att de ¨ar just l¨ankar. De vanligaste nycklarna f¨or att indikera detta ¨ar genom understrykning, semantik eller genom att illustrera det grafiskt. Semantik inneb¨ar l¨ampliga namn l¨ankarna, till exempel “produkter” eller “om oss”. Att klarg¨ora en l¨anks funktion grafiskt in-neb¨ar att ge designen ett typiskt knapputseende. F¨or att tydligt skilja l¨ankar fr˚an andra komponenter b¨or dessa nycklar endast anv¨andas till just l¨ankar. Muspekarens symbol kan ocks˚a ¨andras n¨ar man r¨or sig ¨over komponenten f¨or att f¨ortydliga att det ¨ar en l¨ank [20].

F¨or att inte anv¨andaren ska g˚a miste om viktigt inneh˚all kan det ibland kr¨avas ett f¨ortydligande av vad som har en l¨ank kopplat till sig. Exempelvis kan en bildl¨ank f¨ortydligas med en textrad d¨ar det st˚ar

(16)

Kandidatrapport 2. TEORI

”Klicka p˚a bilden f¨or mer information”[19].

2.3.4.2 L¨ankarnas destination

Ett problem vid beskrivning av en l¨anks destination ¨ar att flera ord ofta beh¨ovs f¨or att beskrivning-en ska bli tillr¨ackligt tydlig, samtidigt som l¨ankbeskrivning-en ofta har ett begr¨ansat utrymme p˚a sk¨armbeskrivning-en. En l¨osning p˚a det problemet ¨ar att komplettera l¨ankarna med ett kortare informationsstycke. Det ger ¨aven anv¨andaren m¨ojlighet att skippa irrelevant information om denne anser att l¨anken ¨ar tillr¨ackligt talande i sig sj¨alv. En annan l¨osning ¨ar att anv¨anda lager-p˚a-lager-tekniker, som till exempel mus¨overdragning n¨ar muspekaren h˚alls p˚a l¨anken [19].

2.3.4.3 Hantering av m˚anga l¨ankar

En viktig aspekt vid hantering av m˚anga l¨ankar ¨ar att de ¨ar strukturerade i en tydlig hierarki. Vid implementering av en s˚adan hierarki b¨or det best¨ammas huruvida bredd eller djup ska prioriteras. Unders¨okningar har visat att en webbapplikation blir l¨attare att navigera p˚a om bredden ¨ar st¨orre ¨an djupet. Det kan ocks˚a vara en utmaning eftersom det ¨ar sv˚art att dela in l¨ankarna i ett l¨ampligt antal kategorier med ungef¨ar lika m˚anga i varje kategori.

Ofta hamnar viktiga l¨ankar p˚a niv˚a tre eller fyra i l¨ank-hierarkin. Problemet skulle kunna l¨osas genom att flytta l¨anken till toppen, men det skulle f¨orst¨ora logiken, vilket g¨or det till en d˚alig id´e. En b¨attre id´e ¨ar att anv¨anda s˚a kallade “genv¨agsl¨ankar”. Dessa kan exempelvis placeras i en box med rubriken “G˚a direkt till..” [19].

2.3.4.4 Placering av l¨ankar

De viktigaste l¨ankarna b¨or placeras h¨ogt upp p˚a webbapplikationen - anv¨andaren ska inte beh¨ova scrolla f¨or att komma ˚at inneh˚allet. Problemet med scrollning ¨ar dock sv˚arundvikligt, i synnerhet eftersom m˚anga anv¨andare surfar p˚a olika typer av enheter. En l¨osning p˚a problemet med scrollning ¨ar att bryta en mening mitt i f¨or att f˚a anv¨andaren att f¨orst˚a att texten forts¨atter [19].

2.3.5 Filtrering

Endast ett f˚atal anv¨andare vet exakt vad de ¨ar ute efter n¨ar de navigerar in p˚a en e-handelssida. Det ¨ar d¨arf¨or det ¨ar av h¨ogsta vikt att, ut¨over en s¨okfunktion, en filtreringsmekanism implementeras. N¨ar ett produktfilter implementerats p˚a ett effektivt s¨att, kan anv¨andarna snabbt s˚alla bort produkter de inte ¨ar intresserade av och direkt se utbudet av de produkter som uppfyller anv¨andarens kriterier och finns tillg¨angliga p˚a webbapplikationen8.

Det finns m˚anga olika typer av filter som kan implementeras p˚a en e-handelssida f¨or att underl¨atta navigeringen f¨or anv¨andaren. En av de mest centrala filtreringsfunktionerna ¨ar filtrering efter pro-duktkategori. Dessa filter visar endast de produkter som finns tillg¨angliga av en viss, f¨orutbest¨amd, kategori. Detta filter underl¨attar f¨or en kund som vet ungef¨ar vilken produkt denne ¨ar ute efter, men vet inte riktigt exakt vad inom den kategorin8.

(17)

Kandidatrapport 2. TEORI

En generell regel ¨ar att erbjuda s˚a m˚anga kategorier av produkter som m¨ojligt, g¨arna med en hierarki-struktur f¨or dessa. D¨ar det finns ett f˚atal breda kategorier, men under varje huvudkategori erbjuds fler, men mer specifika, kategorier8.

Ytterligare s¨att att underl¨atta anv¨andarens navigering med hj¨alp av filter ¨ar att g¨ora det m¨ojligt att anv¨anda eller aktivera flera filter samtidigt f¨or att reducera antalet tr¨affar och d¨arigenom g¨ora valen l¨attare8.

Ett problem med filtrering ¨ar att resultatet av ett antal aktiva filter inte returnerar n˚agon matchande produkt. Detta ¨ar negativt d˚a det kan leda till att anv¨andaren l¨amnar sidan utan att k¨opa n˚agonting. Det ¨ar d¨arf¨or av h¨ogsta vikt att det inte ¨ar m¨ojligt att aktivera en kombination av filter som genererar ett tomt resultat. Till att b¨orja med ska de filter som visas som alternativ ha minst en produkt som matchar, annars ska det tas bort. Problemet kommer sedan n¨ar en anv¨andare aktiverar ett filter som g¨or att resultatet av detta ¨ar att flertalet filter som kunde aktiveras innan nu skulle generera ett tomt resultat om de nu aktiverades med det f¨orsta filtret aktivt. En l¨osning p˚a detta skulle kunna vara att de filter som finns k¨ors mot de resultat som genererades vid aktiveringen av det f¨orsta filtret f¨or att sedan ta bort dem som alternativ om det visar sig att det inte finns n˚agon produkt som matchar b˚ade det filtret samtidigt som det f¨orsta ¨ar aktivt8.

2.3.6 S¨ok

S¨okfunktionalitet ¨ar en grundsten till navigerbarheten p˚a en webbapplikation. Minst 50 % av personer som handlar p˚a en webbapplikation anv¨ander sig av s¨okfunktionen n˚agon g˚ang under k¨opprocessen och personer som anv¨ander eller har tillg˚ang till s¨okfunktionalitet handlar fyra g˚anger oftare ¨an per-soner som inte g¨or det. Det ¨ar d¨arf¨or av h¨ogsta vikt att det finns en s¨okfunktion p˚a webbapplika-tionen samt att den ¨ar anpassad f¨or det anv¨andarna anv¨ander den till. Det ¨ar d¨arf¨or viktigt att stu-dera anv¨andarna och vad de anv¨ander s¨okfunktionen till, det vill s¨aga vad de s¨oker p˚a. Att veta vil-ka termer anv¨andarna anv¨ander n¨ar de navigerar p˚a webbapplivil-kationen via s¨okf¨altet resulterar i att s¨okalgoritmen kan anpassas efter dessa och d¨armed generera s¨okresultat som kunderna vill ha. Det ¨ar ¨aven intressant att veta om kunderna ofta stavar fel p˚a vissa ord f¨or att se till att s¨okalgoritmen tar h¨ansyn till detta f¨or att ¨and˚a kunna visa de resultat som kunderna ¨ar ute efter [21]9.

Det ¨ar inte s¨akert att anv¨andarna vet hur en produkt stavas eller att de vet vad de ¨ar ute efter. Det ¨ar d¨arf¨or anv¨andbart att ha en automatisk ifyllnadsfunktion som ger f¨orslag p˚a vad anv¨andarna skulle kunna vara ute efter, f¨or att hj¨alpa anv¨andarna att navigera till det de ¨ar ute efter. F¨or att underl¨atta ytterligare ¨ar det f¨ordelaktigt att l¨agga till karakt¨aristiska attribut f¨or produkterna, som taggar p˚a pro-dukterna, f¨or att hj¨alpa till att f˚a fram produkterna ¨aven om kunden inte s¨oker p˚a dess exakta namn. Exempel p˚a detta skulle kunna vara kategorier eller produktgrupper[21]9.

Om en anv¨andare skulle s¨oka p˚a n˚agonting som inte finns eller om s¨okalgoritmen av n˚agon anledning inte skulle leverera n˚agot resultat, ¨ar det angel¨aget att inte enbart visa upp en sida utan resultat. Ist¨allet b¨or produkter som ¨ar liknande, eller andra liknande alternativ visas upp, eftersom ett tomt resultat ofta leder till att anv¨andaren l¨amnar webbapplikationen9.

8Business 2 Community, J. Komarek, ’Product Filters: 9 Best Practices for Ecommerce Sites’, 2016.

[On-line]. Tillg¨anglig: https://www.business2community.com/ecommerce/product-filters-9-best-practices-ecommerce-sites-01430804. [H¨amtad: 29- apr- 2019].

9Invesp, A. Shukairy, ’Six Tips to Optimize Your Website’s Internal Search Function’, 2018. [Online]. Tillg¨anglig:

(18)

Kandidatrapport 2. TEORI

2.3.7 Utseende

I denna sektion presenteras komponenter som ¨ar viktiga f¨or utseendet, med avseende p˚a att uppn˚a en god navigerbarhet.

2.3.7.1 Orientering

F¨or att uppn˚a en god navigerbarhet ¨ar det viktigt att anv¨andarna, p˚a ett enkelt s¨att, ska kunna ori-entera sig p˚a webbapplikationen. Inom begreppet orientering innefattas alla metoder och medel som en anv¨andare anv¨ander sig av f¨or att ta sig runt p˚a webbapplikationen. F¨or att anv¨andarna ska kun-na orientera sig ordentligt p˚a en webbapplikation ¨ar det inte bara viktigt att visa anv¨andarkun-na var p˚a webbapplikationen dom kan ta sig h¨arn¨ast, utan ¨aven var de faktiskt befinner sig f¨or stunden10. Detta f¨or att anv¨andarna inte ska k¨anna sig vilsna, f¨orvirrade eller rentav oroliga ¨over var p˚a webbappli-kationen de har hamnat. F¨or att minska risken f¨or detta kan diverse olika metoder anv¨andas. Bland annat genom anv¨andandet av f¨arger, markeringar, tecken, pilar samt betydelsefulla namn som visar anv¨andaren vart den hamnar om den tar sig vidare p˚a webbapplikationen via den v¨agen11. N˚agra av

de vanligaste metoderna f¨oljer nedan. • Logotyp:

En logotyp b¨or finnas p˚a webbapplikationen. Detta f¨or att anv¨andarna ska veta att de ¨ar kvar p˚a samma sida. Logotypen b¨or l¨ankas ihop med startsidan f¨or att anv¨andarna snabbt ska kunna ta sig tillbaka om de inte hittar det de s¨oker efter.

• M¨arkning:

Att grafiskt ¨andra p˚a en knapp, flik eller etikett som anv¨andaren har tryckt p˚a genom skuggning eller markering. Det ber¨attar f¨or anv¨andaren var p˚a webbapplikationen denne befinner sig. • Rubriker:

Skapa rubriker ¨overst p˚a sidan med relevanta beteckningar f¨or att anv¨andare snabbt ska kunna komma in p˚a r¨att sp˚ar. Det ¨ar viktigt att dessa ¨ar tydliga och beskrivande av vad som h¨ander om man v¨aljer att klicka p˚a just den rubriken.

• F¨onstertitel: ¨

Annu ett s¨att f¨or att snabbt visa anv¨andaren var de befinner sig p˚a webbapplikationen. • Visuell design:

Att ¨andra f¨arger, design eller rubriker kan hj¨alpa anv¨andarna att f¨orst˚a att de har bytt plats p˚a webbapplikationen.

• Beskrivning av h¨andelsef¨orlopp:

Det ¨ar viktigt att visa anv¨andaren hur l˚angt det ¨ar kvar innan processen ¨ar f¨ardig. L˚at s¨aga att en kund har lagt till varor i en kassa och vill g˚a till betalningen. I stegen fr˚an att anv¨andaren g˚ar fr˚an kassan, till att betalningen och best¨allningen ¨ar genomf¨ord, ska det tydligt framg˚a hur l˚angt det ¨ar kvar av processen.

10Invesp, A. Shukairy, ’Six Tips to Optimize Your Website’s Internal Search Function’. [Online]. Tillg¨anglig:

https://www.invespcro.com/blog/six-tips-to-optimize-your-websites-internal-search-function/. [H¨amtad: 29- apr- 2019].

11Nielsen Norman Group, S. Farrell, ’Navigation: You Are Here’, 2015. [Online]. Tillg¨anglig:

(19)

Kandidatrapport 2. TEORI

En effektiv design p˚a en webbapplikation inriktad mot n¨athandel ¨ar vital f¨or hur framg˚angsrik den blir. Funktionalitet, anv¨andbarhet, navigationsm¨ojligheter samt gr¨anssnittet p˚a webbapplikationen ¨ar grunden f¨or att uppn˚a en effektiv design [22], [23], [24]. Strukturen p˚a en webbapplikation kan kraftigt f¨orb¨attra framkomligheten samt effektiviteten och ¨ar fundamental f¨or en optimal navigation[25]. I en unders¨okning som gjordes av Lee, S och Richard, J.K [26] testades om det fanns ett samman-hang mellan vissa aspekter och hur de p˚averkade anv¨andarupplevelsen. Aspekterna som ingick i testet var strukturen p˚a informationen, den visuella designen, navigerbarheten, f¨argvalen samt ty-pografin p˚a webbapplikationen, designen samt navigerbarheten tillsammans hade en h¨og korrelation i anv¨andarens bed¨omning av en effektiv webbapplikation.

2.3.7.2 Startsida

N¨ar en anv¨andare f¨orst navigerar in p˚a en webbapplikation anl¨ander denne till sidans startsida, ¨aven kallad home page. Startsidan spelar en avg¨orande roll f¨or om anv¨andaren forts¨atter att navigera vidare p˚a sidan eller om denne v¨aljer att l¨amna sidan. Att snabbt f˚anga anv¨andarens intresse och att f¨oda nyfi-kenhet blir viktigare och viktigare givet dagens snabbt skiftande och st¨andigt varierande milj¨o p˚a n¨atet [27]. F¨or flertalet typer av medier har det visats att den uppfattade komplexiteten ¨ar starkt relaterad till den effektivitet det som kommuniceras har, d¨ar en mycket komplex startsida har sv˚arare att f¨ormedla budskap ¨an mindre komplexa. D¨arf¨or b¨or komplexiteten p˚a en webbapplikationens f¨orstasida vara n˚agonting som i stor utstr¨ackning beaktas under designprocessen. N˚agonting som b¨or tas h¨ansyn till under designprocessen ¨ar allts˚a vilka element som bidrar till den uppfattade komplexiteten p˚a web-bapplikationen [27].

Konceptet komplexitet med avseende p˚a den stimulans som f˚as av de intryck en webbapplikation ger ¨ar sv˚art att definiera. Berlyne menar att “complexity is, without any doubt, the most impalpab-le of four elusive concepts (the others are novelty, uncertainty, and conflict)” [28]. Trots detta kan komplexitet beskrivas som m¨angden variation eller diversitet i ett m¨onster av stimulation [27]. Kom-plexiteten i ett m¨onster av stimulation p˚averkas av, men ¨ar inte begr¨ansat till: Andra saker som ¨ar likadana, komplexiteten ¨okar med antalet urskiljbara element; Om antalet element h˚alls konstant ¨okar komplexiteten med skiljaktigheter mellan elementen; Komplexiteten varierar omv¨ant med graden till hur flera element ben¨amns som en enhet. Denna teori framtagen av Berlyne f¨orutsp˚ar en omv¨and, kurvlinj¨ar relation mellan medelkomplexitet och kommunikativ effektivitet. Det betyder att f¨or att en webbapplikation ska verka p˚a ett intressev¨ackande s¨att m˚aste det finnas en viss grad av komplexitet, men komplexiteten f˚ar inte bli f¨or h¨og, f¨or efter en viss gr¨ans minskar den [28]. Se figur 1.

(20)

Kandidatrapport 2. TEORI

Figur 1: Relationen mellan komplexitet och effektivitet.

Flertalet f¨orfattare, bland andra Cormier, Kassaye och Smith, menar att anv¨andandet av mycket grafik och andra element som kr¨aver nedladdning av en st¨orre m¨angd data inte ¨ar att f¨oredra d˚a den stora m¨angden data kr¨aver en l¨angre nedladdningstid vilket i sin tur f¨orl¨anger laddningstiden f¨or sidan som helhet [29], [30], [31]. Nielsen (1999) menar att den viktigaste faktorn vid utvecklandet av en webbsida ¨ar dess laddningstid, d¨ar laddningstid innefattar b˚ade tiden det tar att ladda ner alla data f¨or webbapplikationen samt tiden det tar att rendera den p˚a anv¨andarens enhet [32].

Andra faktorer som spelar in vid upplevelsen av komplexitet p˚a en webbapplikation ¨ar anv¨andandet av l¨ankar. Det st¨orsta problemet vid utbredd anv¨andning av l¨ankar p˚a en webbapplikation ¨ar att anv¨andaren hela tiden ska ha en k¨ansla av strukturen och navigation p˚a sidan f¨or att veta var denne ¨ar, var den varit och var det ¨ar m¨ojligt att navigera [32]. Vissa f¨orfattare argumenterar f¨or att f¨or m˚anga l¨ankar resulterar i en plottrig sida med en belamring av information som ¨overv¨aldigar anv¨andaren [30].

Det finns en generell konsensus kring att en webbapplikation p˚a internet b¨or vara relativt “enkel” och snabb˚atkomlig [33], [34]. F¨orfattare inom m˚anga discipliner menar att grafik av olika slag b¨or anv¨andas med aktning och att anv¨andning av m˚anga grafiska element alternativt n˚agra stora grafiska element kan ta f¨or l˚ang tid att ladda ned [30], [31]. ˚Asikterna varierar kring antalet “sidor” som en f¨orstasida ska ockupera. Vissa f¨orfattare menar att hela f¨orstasidan inte ska vara l¨angre ¨an vad som kan visas p˚a en sk¨arm [35], [36], medan andra argumenterar f¨or att flera sidor kan vara n¨odv¨andigt f¨or att inte tvinga in all n¨odv¨andig information p˚a en sida. Anv¨andare som bes¨oker en sida med ett m˚al har ofta inte n˚agra problem med att scrolla ner f¨or att hitta den information de s¨oker [37], [38].

2.4

Metodteori

I f¨oljande avsnitt kommer en redog¨orelse f¨or de metoder som har anv¨ants f¨or rapporten. 2.4.1 Enk¨atmetodik

Innan konstruktion av en enk¨at ¨ar det viktigt att f¨orst reflektera ¨over vilken typ av information som beh¨ovs samt vilka fr˚agor som beh¨over besvaras. N¨ar enk¨aten sedan konstrueras ¨ar det f¨oljande tre viktiga omr˚aden [39];

- Enk¨atens struktur och l¨angd - Fr˚agornas formulering

(21)

Kandidatrapport 2. TEORI

- De eventuella svarsalternativens formulering

Enk¨atens struktur har stor inverkan p˚a svarsfrekvensen. Om enk¨aten upplevs som p˚atr¨angande, sv˚ar eller jobbig kommer de flesta inte ta sig tiden att svara p˚a den. F¨orst b¨or fr˚agor kring deltagarens bakgrund vara f¨or att sedan f¨oljas av block av logiskt strukturerade fr˚agor. Om enk¨aten har n˚agra mer k¨ansliga fr˚agor b¨or dessa sparas till slutet [39].

F¨or att f˚a ett tillf¨orlitligt resultat b¨or fr˚agorna inte vara ledande samt vara entydigt st¨allda. Negationer ska undvikas och fr˚agorna b¨or vara enkelt formulerade. Detta g¨aller ¨aven svarsalternativen. I utform-ningen av enk¨ater b¨or det alltid finnas ett motsvarande till “vet ej/vill inte svara”, speciellt p˚a de lite mer personliga/kr¨avande fr˚agorna [39].

2.4.2 Brainwriting

Brainwriting 6-3-5 har f˚att sitt namn fr˚an utf¨orandet d¨ar sex deltagare ska skriva tre id´eer p˚a fem minuter [40]. Efter dessa fem minuter skickar deltagarna vidare sitt papper till n¨asta person och sedan skriver alla tre nya id´eer p˚a det nya pappret. Till de nya id´eerna kan deltagarna ¨aven ta inspiration fr˚an de tidigare nedskrivna id´eerna p˚a pappret. Detta upprepas tills samtliga deltagare har skrivit p˚a alla papper, det vill s¨aga sex g˚anger. Denna process skall d˚a generera 108 id´eer [41]. Brainwriting kan beskrivas som ett mer organiserat substitut till brainstorming d¨ar gruppen skriver ner id´eer och h¨amtar inspiration av varandra.

Enligt Arthur B. VanGundy ¨ar brainwriting mer effektivt ¨an brainstorming, speciellt om gruppen inte har n˚agon skicklig ledare. Med brainwriting kan ¨aven on¨odiga konflikter undvikas och det blir inte bara de h¨ogljuddaste id´eerna som h¨ors [42]. D˚a brainwriting ¨ar mer anonymt kan deltagarna fokusera mer p˚a genereringen av id´eer ¨an vad vilka som s¨ager vad och hur m˚anga id´eer de andra har haft [43]. 2.4.3 Prototyp

En prototyp ¨ar en beskrivning utav den produkt eller tj¨anst som utvecklare eller leverant¨orer i slut¨andan vill leverera. En prototyp kan beskrivas som en fyrstegsprocess mellan anv¨andaren och utvecklaren [44]. Processen b¨orjar med att utvecklarna f¨orst diskuterar vilka funktioner som kommer att beh¨ovas och implementerar dem i en f¨orsta modell. Sedan utf¨ors anv¨andartester p˚a modellen f¨or att uppt¨acka problem och m¨ojliga f¨orb¨attringar. Dessa utv¨arderas sedan och l¨osningarna implementeras i en ny modell som testas och utv¨arderas p˚a samma s¨att och sedan fortskrider detta arbete tills en f¨ardig produkt n˚atts.

Det f¨orsta utkastet av en prototyp beh¨over inte vara avancerad, utan det ¨ar ist¨allet till f¨ordel att h˚alla den p˚a en basal niv˚a. Detta f¨or att alla inblandade snabbt ska f˚a en gemensam bild av produkten samt att det ska vara l¨att att ¨andra p˚a prototypen utan att ¨odsla f¨or mycket tid och resurser. D¨arf¨or ¨ar det bra att i b¨orjan fokusera p˚a att skapa en horisontell prototyp som brett beskriver vilka funktioner som kommer att anv¨andas men som inte g˚ar in p˚a detaljerna om hur de fungerar [45]. Allt eftersom beslutet om vilka funktioner och design som ska implementeras g˚ar man mer in p˚a djupet och detaljerna. Retting beskriver en metod f¨or att snabbt ta fram en enkel prototyp som v¨aldigt tidigt ger inputs och utv¨ardering av designen [46]. Metoden g˚ar ut p˚a att med endast med sax, pennor, tejp och diverse andra tillbeh¨or f¨ors¨oka att f˚a ner sin design p˚a papper. Detta ska g¨oras inom en deadline p˚a maximalt ett par timmar. Efter detta ska designen testas genom att l˚ata anv¨andare testa den. Detta g¨ors genom att n˚agon person agerar ”datorn” och byter lappar medan anv¨andaren navigerar runt. Enligt Retting ¨ar dessa hafsiga och inte trov¨ardiga prototyper utm¨arkta d˚a det handlar om utveckling av funktioner

(22)

Kandidatrapport 2. TEORI

samt anv¨andargr¨anssnitt [46]. P˚a grund av att det ger utvecklarna m˚anga chanser att f¨orfina sin design innan man faktiskt kodar den.

2.4.4 Arbetsmetodik

Att designa v¨alstrukturerade webbapplikationer f¨or att ˚astadkomma en effektiv navigering f¨or anv¨andare ¨ar en utmaning. Huvudanledningen till detta ¨ar att utvecklarnas uppfattning av hur en web-bapplikation ska vara uppbyggd kan skilja sig starkt fr˚an anv¨andares uppfattning [47].

F¨or att uppfylla anv¨andarnas ¨onskem˚al och preferenser ¨ar det viktigt att ha en tydlig bild av vilka dessa ¨ar. D¨arf¨or ¨ar det viktigt att anv¨anda anv¨andarcentrerad systemutveckling. F¨or att anv¨anda denna metod ¨ar det viktigt att ha i ˚atanke att syftet med webbapplikationen ¨ar att tillfredsst¨alla anv¨andarna och inte att anv¨anda en speciell teknik eller programmeringss¨att. Anv¨andarnas behov ska allts˚a do-minera hur webbapplikationen utformas och d¨arf¨or ¨ar det viktigt att anv¨andare f˚ar vara en del av utvecklingsprocessen [48].

Iterativ design och utveckling ¨ar ett bra s¨att att hitta problem och utveckla l¨osningar som kan hj¨alpa anv¨andarna. Genom att under skapandets g˚ang testa och utv¨ardera p˚a olika s¨att med hj¨alp av anv¨andare kan webbapplikationen f¨orb¨attras [48]. Att aktivt involvera anv¨andare i arbetet ¨ar en av de stora f¨ordelarna med anv¨andarcentrerad design [49].

2.4.5 Intervjuer

Syftet med att anv¨anda sig av intervjuer ¨ar ofta att samla data som inte kan erh˚allas via kvantitativa metoder. Att intervjua ger en insikt i deltagarens v¨arld, som ˚asikter, tankar och k¨anslor, som annars kanske inte hade kommit fram. Intervjuer kr¨aver mycket planering, ledning och analys, som ¨ar delvis tidskr¨avande moment. Hur fr˚agorna i en intervju ¨ar st¨allda p˚averkar svaren mycket, vilket g¨or att det ¨ar viktigt att fr˚agorna ¨ar v¨al framtagna och genomarbetade [50].

Det finns fyra huvudomr˚aden som ¨ar centrala n¨ar intervjuer planeras och utf¨ors [50]: 1. Uppskatta tiden som beh¨ovs f¨or att planera och genomf¨ora intervjuerna. 2. S¨akerst¨all att intervjuaren har den kunskap som beh¨ovs.

3. S¨akerst¨all att det finns ett gott samspel mellan intervjuare och intervjuobjekt. 4. Anv¨and l¨ampliga verktyg och l¨ampliga artefakter.

Intervjuer kan delas in i tre olika typer [51]: • Strukturerade

• Semistrukturerade • Ostrukturerade

Strukturerade intervjuer ger fr¨amst kvantitativ data, medan semistrukturerade och ostrukturerade sna-rare ger kvalitativ data. En ostrukturerad intervju ¨ar mer som en guidad konversation, medan semi-strukturerade intervjuer oftast ¨ar organiserade runt n˚agra f¨orberedda, ¨oppna, fr˚agor som sedan fylls p˚a med l¨ampliga fr˚agor fr˚an intervjuaren under intervjuns g˚ang. Semistrukturerade intervjuer ¨ar det mest utbrett anv¨anda intervjuformatet f¨or kvalitativ unders¨okning. Formatet fungerar bra b˚ade individuellt och i grupp [51].

(23)

Kandidatrapport 2. TEORI

Intervjuaren ska inleda intervjun med en kort f¨orklaring av vad som unders¨oks. Hur mycket informa-tion som ska delges ska dock ¨overv¨agas noga p˚a f¨orhand. Om syftet med studien inte framf¨ors bra nog kan det leda till att intervjuobjektet inte deltar lika bra, medan om det s¨ags f¨or mycket kan det styra deras svar som leder till utel¨amning av svar som de tror att intervjuaren inte ¨ar intresserad av [52].

2.4.6 Anv¨andartester

Nedan f¨oljer n˚agra olika typer av anv¨andartester som anv¨ands f¨or att unders¨oka olika aspekter av en webbapplikation.

2.4.6.1 Allm¨ant

Det finns m˚anga olika s¨att att utf¨ora anv¨andartester p˚a, men varje anv¨andartest delar fem k¨annetecken [53]:

1. Det prim¨ara m˚alet ¨ar att f¨orb¨attra anv¨andbarheten f¨or en produkt. F¨or varje test finns mer spe-cifika m˚al.

2. Deltagarna representerar produktens anv¨andare.

3. Deltagarna utf¨or uppgifter som ¨ar relevanta f¨or produkten.

4. Observat¨oren observerar samt antecknar eller spelar in vad deltagarna g¨or och s¨ager.

5. Observat¨oren analyserar datan, diagnostiserar problemen och tar fram f¨orslag p˚a f¨or¨andrings˚atg¨arder f¨or ˚atg¨ard av problemen.

2.4.6.2 Testpersoner

Vid val av testpersoner ¨ar antal personer en viktig fr˚aga. Riktigheten i resultatet ¨okar d˚a ett st¨orre urval testas. Resultaten stagnerar dock vid runt tolv personer [54].

Mindre ¨an fem testpersoner ska inte anv¨andas d˚a det finns en risk att identifierade problem minskar drastiskt (cirka 50% j¨amf¨ort med tio till tolv personer) [54].

2.4.6.3 Aterblickande utv¨ardering˚ ˚

Aterblickande utv¨ardering inneb¨ar att efter att en testdeltagare har utf¨ort ett test eller en uppgift i testet, st¨alls n˚agra fr˚agor till den. Fr˚agorna ska ge svar p˚a testdeltagarens ˚asikt och upplevelse av att utf¨ora uppgiften. Testdeltagarens svar belyser ofta de huvudsakliga problemen relaterade till anv¨andbarhet och annat som st¨or dem. Fr˚agorna kan st¨allas p˚a tv˚a s¨att, med ¨oppna eller st¨angda fr˚agor. ¨Oppna fr˚agor ger mer kvalitativa svar och ett exempel skulle kunna vara “Vad gillar du mest med applikationen?”. Mer st¨angda fr˚agor skulle kunna vara ja/nej fr˚agor till fr˚agor med en 5- eller 7-punktig skala som f¨orklarar ˚asikterna, f¨orlsagsvis med de tv˚a extremv¨ardena i varsin kant. F¨orslagsvis kan v¨ansterdelen av skalan (som b¨orjar p˚a ett) vara ’h˚aller inte alls med’ och h¨ogerdelen (slutar p˚a fem eller sju) vara ’h˚aller helt med’. Efter en fr˚aga med skala ¨ar det bra att ha n˚agra f¨oljdfr˚agor f¨or att f¨orst˚a varf¨or deltagaren rankade som den gjorde. En f¨ordel med ˚aterblickande utv¨ardering ¨ar att det ¨ar en bra metod

(24)

Kandidatrapport 2. TEORI

f¨or att samla anv¨andartestdata som enkelt kan klassificeras och j¨amf¨oras mellan olika uppgifter och anv¨andare [55].

2.4.6.4 Lostness

En m˚att f¨or att testa navigerbarhet f¨or en webbapplikation ¨ar Lostness, d¨ar Lostness inneb¨ar att vara vilsen. Testet tittar p˚a det antal steg som testdeltagaren tar f¨or att utf¨ora en uppgift. Siffran st¨alls sedan i relation till det minimala antalet steg som det tar att utf¨ora uppgiften [56].

Lostness kan m¨atas med formeln q

(NS − 1)2+ (R

N − 1)2d¨ar

L = graden av lostness, d¨ar L ¨okar med lostness-heten N = antal unika noder som bes¨okts

S = totalt antal noder som bes¨okts

R = antal noder som kr¨avs f¨or att utf¨ora uppgiften (optimal v¨ag)

Det konstateras i Smiths studie att anv¨andare ¨ar vilse d˚a L ¨ar st¨orre ¨an eller lika med 0,42. D˚a L ¨ar mindre ¨an 0,42 kan det inte bevisas att anv¨andaren skulle vara vilse [57].

2.4.6.5 Samtidigt t¨ankande (CTA)

CTA ¨ar ett av de vanligaste testerna f¨or anv¨andartestning. N¨ar testet utf¨ors talar testdeltagarna om vad de t¨anker samtidigt som de navigerar runt p˚a webbapplikationen. Testledaren ska uppmuntra testdeltagarna till att hela tiden t¨anka h¨ogt om allt de g¨or i testet genom att t.ex. anv¨anda fraser som uppmuntrar till att forts¨atta s¨atta ord p˚a deras tankar. F¨ordelen med CTA ¨ar att testledaren f˚ar f¨orst˚aelse f¨or impulsiva responser och tankar fr˚an testdeltagarna, vilket underl¨attar vid identifiering och l¨osning av problem med webbapplikationen. En nackdel med metoden ¨ar att det f¨or vissa kan vara sv˚art att prata utf¨orligt och samtidigt utf¨ora testet [58].

2.4.7 Heuristisk utv¨ardering

Heuristisk utv¨ardering ¨ar en utv¨arderingsmetod introducerad av Nielsen och Molich, framtagen f¨or att finna anv¨andbarhetsproblem i ett anv¨andargr¨anssnitt [59]. Metoden best˚ar av tio heuristiker som ¨ar en sammanst¨allning av 249 anv¨andbarhetsproblem. Heuristikerna ¨ar otydligt utformade och skall mer ses som tumregler ¨an best¨amda tillv¨agag˚angss¨att [60]. Heuristikerna ¨ar sammanst¨allda nedan:

(25)

Kandidatrapport 2. TEORI

Heuristik Definition

1. Visibility of system status Ar anv¨andaren informerad om vad som h¨ander genom l¨amplig¨ feedback inom rimlig tid

2. Match between system and the real world

Ord, faser och koncept ska vara familj¨ara f¨or anv¨andaren och upp-fattas i en naturlig och logisk ordning

3. User control and freedom Anv¨andare ska kunna l¨amna o¨onskat tillst˚and utan n˚agon kr¨avande process

4. Consistency and standards Betydelsen av ord, situationer eller handlingar ska betyda samma sak genom hela systemet

5. Error prevention Eliminera hinder eller f¨orse anv¨andare med valfria alternativ innan dessa handlingar kan utf¨oras

6. Recognition rather than recall

Instruktioner f¨or anv¨andningen av systemet ska vara synligt eller enkelt ˚atkomligt

7. Flexibility and efficiency of use

Till˚at anv¨andare att konfigurera frekventa handlingar f¨or att m¨ojligtvis kunna p˚askynda interaktioner

8. Aesthetic and minimalist design

Visa inte irrelevant eller s¨allan anv¨andbar information

9. Help users recognize, dia-gnose, and recover from er-rors

Felmeddelanden ska precisera problem och f¨oresl˚a konstruktiva ˚atg¨arder

10. Help and documentation Ifall det ¨ar n¨odv¨andigt ska systemet f¨orse anv¨andaren med hj¨alpfulla och konkreta dokument av anv¨andaren handlingar.

Tabell 1: Heuristisk utv¨ardering.

(Tabell baserad p˚a tabell i: A Comparative Study of Video Content User Interfaces Based on Heuristic Evaluation [61])

Efter att utv¨ardering gjorts v¨arderas varje funnet problem, med avseende p˚a heuristikerna, p˚a en skala ett till fem ang˚aende hur allvarliga problemen ¨ar. Det g˚ar utifr˚an dessa siffror att avg¨ora om anv¨andargr¨anssnittet ¨ar anv¨andbart eller inte, d¨ar ett st˚ar f¨or ’ej anv¨andbart’ och fem ¨ar ’anv¨andbart’. F¨or att f˚a ett gott resultat, vilket h¨ar inneb¨ar att fler ¨an 75% av anv¨andargr¨anssnittets problem ¨ar funna, m˚aste utv¨arderingen g¨oras p˚a minst fem testpersoner [61].

(26)

Kandidatrapport 3. METOD

3

Metod

I denna sektion presenteras metoden, d¨ar faserna f¨orstudie, implementation samt utv¨ardering beskrivs.

3.1

F¨orstudie

F¨or att kunna s¨akerst¨alla att projektet borde startas genomf¨ordes en f¨orstudie d¨ar behovet unders¨oktes, user stories togs fram samt en prototyp utvecklades.

3.1.1 Behovsanalys

En enk¨atunders¨okning genomf¨ordes f¨or att unders¨oka om ett behov fanns f¨or en webbapplikation f¨or f¨ors¨aljning av begagnad kurslitteratur, detta f¨or att s¨akerst¨alla att projektet skulle fylla en funktion12.

Enk¨aten utformades p˚a ett enkelt och tydligt s¨att enligt teori om hur man ¨okar svarsfrekvensen [39]. Det fokuserades extra p˚a enkelhet och att enk¨aten skulle g˚a fort att g¨ora f¨or att deltagarna inte skul-le uppfatta den som jobbig elskul-ler tidskr¨avande. Med enk¨aten kunde behovet unders¨okas kvantitativt. Information om deltagarnas bakgrund och intresse f¨or att k¨opa begagnad kurslitteratur samlades in samt om hur mycket de skulle vara villiga att betala f¨or tj¨ansten. I enk¨aten besvarades ¨aven fr˚agan om tj¨ansten b¨or ha en procentuell eller fast avgift f¨or k¨op/f¨ors¨aljning av kurslitteratur och om det b¨or vara den som k¨oper eller s¨aljer som ska betala avgiften. Enk¨aten spreds via det sociala mediet Facebook fr¨amst till studenter vid Link¨opings Universitet.

3.1.2 Prototyp

Som v¨agledning inf¨or utvecklingen av webbapplikationens design utvecklades en prototyp. Det f¨orsta utkastet var skissat f¨or hand med penna och papper f¨or att inte ¨odsla f¨or mycket tid och resurser p˚a n˚agonting som under projektets g˚ang kan komma att f¨or¨andras [46]. Syftet med denna f¨orsta, horisontella, prototyp var att ge projektgruppen en gemensam vision av vad de arbetade mot.

Prototypen utvecklades sedan under flera iterationer och arbetsmetoden som anv¨andes vid framtag-ningen av prototypen kan beskrivas som en fyrstegsprocess, d¨ar det f¨orst beslutades om vilka funktio-ner som skulle implementeras, och sedan utf¨ordes anv¨andartester d¨ar information samlades in. Sedan analyserades informationen och f¨orb¨attrings˚atg¨arder togs fram. Dessa implementerades sedan i en ny modell under n¨asta iteration. Den nya modellen genomg˚ar liknande test d¨ar man samlar information som utv¨arderas och s˚a gjordes inf¨or varje iteration till dess att produkten ans˚ags f¨ardig.

3.2

Implementation

Under denna sektion presenteras hur implementationsfasen s˚ag ut. 3.2.1 Arbetsmetodik

F¨or att genomf¨ora studien anv¨andes en anv¨andarcentrerad design (se avsnitt 2.2.2) med en iterativ me-tod best˚aende av tre iterationer (se 2.4.4). Anv¨andartester genomf¨ordes i slutet av iteration tv˚a och tre, f¨or att b˚ade involvera anv¨andare tidigt i processen samt lite senare (se avsnitt 3.2.2). Anv¨andartesterna genomf¨ordes f¨or att involvera anv¨andarna i designprocessen, eftersom det ¨ar dem som kommer att

(27)

Kandidatrapport 3. METOD

anv¨anda slutprodukten [62]. Anv¨andarna av Bokhyllan ¨ar prim¨art studenter, vilket gjorde att testgrup-pen som deltog vid anv¨andartesterna var studenter.

Anv¨andartesternas data och information sammanst¨alldes efter respektive test, f¨or att sedan genomf¨ora analys och utv¨ardering av resultaten. Utifr˚an dessa analyser och vidare diskussioner reviderades pro-ductbackloggen genom att nya funktioner lades till eller ¨andrades och de rankades p˚a nytt. Det som inte hanns med i iterationen, flyttades till n¨asta iteration. ¨Aven design¨andringar gjordes efter analys av feedback fr˚an testpersoner (se avsnitt 3.2.3).

3.2.2 Anv¨andartester

F¨or att unders¨oka webbapplikationens navigerbarhet och anv¨andbarhet, samt f¨or att f˚a ˚aterkoppling kring design och funktioner, utf¨ordes vid slutet av varje iteration ett anv¨andartest. Vid anv¨andartesterna anv¨andes flera olika metoder f¨or att samla in n¨odv¨andig data f¨or m¨ojlighet till f¨orb¨attring av webbap-plikationen. Testen utformades med hj¨alp av de fem gemensamma egenskaperna f¨or alla anv¨andartest (se avsnitt 2.4.6.1), och konstruerades med en kombination av olika test och metoder:

• CTA (se 2.4.6.5)

• Retrospective Probing (se 2.4.6.3) • Lostness (se 2.4.6.4)

• Intervjuer (se 2.4.5)

F¨or att f˚a en uppfattning av testpersonens f¨orsta intryck av webbapplikationen, samt tankar och ˚asikter under testets g˚ang, anv¨andes CTA, d¨ar testdeltagaren fick t¨anka h¨ogt om allt som genomf¨ordes. Un-der testets g˚ang uppmuntrades detta av testledaren f¨or att inte g˚a miste om information. Testperso-nen erh¨oll en lista med uppgifter som skulle utf¨oras i ordning. Uppgifterna utf¨ordes en i taget, fr˚an testpersonens aktuella lokalisering, samtidigt som CTA utf¨ordes. Uppgifterna som skulle utf¨oras var framtagna utifr˚an vilken data och input som beh¨ovdes f¨or just den iterationen. N¨ar varje uppgift var genomf¨ord st¨alldes n˚agra fr˚agor av testledaren f¨or att f˚a det spontana intrycket av deltagarens upplevelse och ˚asikter, detta enligt Retrospective Probing. Testpersonerna var ¨aven utvalda s˚a att de motsvarade m˚algruppen f¨or webbapplikationen, vilket var studenter vid Link¨opings Universitet. Test-ledaren noterade och observerade testdeltagarens v¨ag p˚a webbapplikationen, samt allt som sades s˚a att graden av Lostness sedan kunde ber¨aknas och anv¨andas f¨or analys av navigerbarhet.

Efter att listan med uppgifter hade utf¨orts genomf¨ordes en semistrukturerad intervju med deltagaren d¨ar testledaren st¨allde ett antal fr˚agor om b˚ade testet och uppgifterna i sig men ocks˚a om webbap-plikationen och hur den uppfattades. ¨Aven dessa intervjufr˚agor var framtagna unikt f¨or respektive iteration. Testledarnas instruktioner f¨or anv¨andartest 1 respektive 2 finns att hitta under Bilaga D re-spektive E. F¨or att undvika att brister i applikationen undg˚as men samtidigt effektivisera testerna anv¨andes 8 testpersoner vid respektive anv¨andartest [54].

Under projektet namngavs iterationer, d¨ar utveckling av webbapplikationen utf¨ordes, till sprintar. Det genomf¨ordes allts˚a tv˚a stycken anv¨andartester, i slutet av sprint 1 respektive 2. Det f¨orsta anv¨andartestet f¨or webbappliaktionen utformades utifr˚an vad som hade hunnit implementeras under sprint 1 (4 vec-kor). M˚alet var d˚a att samla in s˚a mycket f¨orb¨attringsm¨ojligheter som m¨ojligt g¨allande navigerbarhet och anv¨andbarhet fr˚an deltagarna, men ¨aven att m¨ata Lostness f¨or att se om webbapplikationen ut-vecklades ˚at ett navigerbart h˚all. Vissa funktionaliteter saknades fortfarande p˚a grund av att testerna skedde s˚a pass tidigt i implementeringsfasen.

(28)

Kandidatrapport 3. METOD

3.2.3 Design

En f¨orsta prototyp har utvecklats (se prototyp, metod) f¨or att delvis ge gruppen en gemensam vision av webbapplikationens design. D˚a projektets syfte ¨ar att utveckla en anv¨andbar webbapplikation med avseende p˚a navigerbarhet innebar det att designen var en viktig del. Teamet fokuserade p˚a utveck-lingen av designen f¨orst i slutet av projektet d˚a en mer v¨alutvecklad prototyp var framtagen, samt efter att f¨orsta anv¨andartestet utf¨orts. Detta gjordes f¨or att kunna basera designen p˚a anv¨andarnas input, och f¨or att inte spendera f¨or mycket tid p˚a n˚agonting som anv¨andarna ¨and˚a eventuellt skulle vilja f¨or¨andra. Efter f¨orsta anv¨andartestet anv¨andes deltagarnas ˚asikter f¨or att ta fram en mer detaljerad prototyp f¨or designen.

3.2.3.1 Front-end

Idag finns ett flertal front-end verktyg som har anv¨ants f¨or b˚ade f¨orenkling och effektivisering vid skapande av nya webbapplikationer. Verktygen har b˚ade f¨or- och nackdelar j¨amf¨ort med varandra, och har ofta specialtillverkats f¨or olika anv¨andningsomr˚aden [63]. F¨or det h¨ar projektet anv¨andes HTML, JavaScript, AJAX och CSS. HTML anv¨andes f¨or att bygga upp strukturen f¨or webbappli-kationen. Webbapplikationen kunde sedan designas och stylas med hj¨alp av CSS kod. P˚a grund av JavaScripts egenskaper var det d¨arf¨or ett passande verktyg f¨or webbapplikationen. JavaScript bibli-oteket jQuery inneh˚aller m˚anga f¨ardigdefinierade funktioner som, anv¨andes f¨or att f˚a ett effektiva-re kodskrivande. F¨or att front-enden ska kunna kommunicera med back-enden p˚a ett effektivt s¨att anv¨andes AJAX[64]. F¨or webbapplikationsutveckling i HTML, CSS och JavaScript finns front-end komponenten Bootstrap, som i projektet anv¨andes f¨or att f˚a en adaptiv design, b˚ade p˚a smartphones och laptops13.

3.2.3.2 Back-end

Back-enden, eller server som den ofta kallas, var den del av webbapplikationen som inte var direkt kopplad till kundens anv¨andning av webbapplikationen, utan ist¨allet till hanterande av data. Koden f¨or back-enden baserades p˚a ramverket Flask och skrevs i Python [65]. Back-enden anv¨andes logiskt som ett mellanled f¨or kommunikation mellan databasen och front-enden.

3.2.4 Databas

Databasen var en ”relational query database” och byggdes av Python med hj¨alp av SQLalchemy och Flask. Databasens syfte var att genom servern tillhandah˚alla information till front-enden. [66]

3.3

Utv¨ardering

Utv¨arderingen utf¨ordes i projektets avslutande fas d˚a webbapplikationen var fullt utvecklad. Den utf¨ordes p˚a ett liknande s¨att som tidigare anv¨andartester (se 2.4.6 Anv¨andartester), gjorda i slutet av tidigare sprintar, men med ¨okad noggrannhet. Som tillskott till detta utf¨ordes ocks˚a en heuristisk utv¨ardering (se 2.4.7 Heuristisk utv¨ardering). Denna utf¨ordes, till skillnad fr˚an anv¨andartesterna, p˚a

13Bootstrap.com, ’Bootstrap - the most popular html, css and js library in the world’. [Online] Tillg¨anglig:

(29)

Kandidatrapport 3. METOD

webbutvecklare och designers. Utv¨arderarna fick i och med detta svara p˚a ett antal fr˚agor anknutna till de 10 heuristikerna. Om ut¨ovaren fann problem relaterade till de fr˚agor som st¨alldes skrevs dessa ner och blev i efterhand betygsatta p˚a hur allavarliga dessa var f¨or webbapplikationen. Se fr˚agorna, samt tillh¨orande herustik, nedan:

• Visability of system status: K¨anner du att du ¨ar informerad om vad som h¨ander genom l¨amplig feedback inom rimlig tid? Om inte, vad var problemet?

• Match between system and the real world: K¨anner du att ord, faser och koncept ska vara fa-milj¨ara f¨or anv¨andaren och uppfattas i en naturlig och logisk ordning? Om inte, vad var proble-met?

• User contol and freedom: K¨anner du att du kan l¨amna o¨onskat tillst˚and utan n˚agon kr¨avande process? Om inte, vad var problemet?

• Consistency and standards: Tycker du att betydelsen av ord, situationer eller handlingar betyder samma sak genom hela systemet? Om inte, vad var problemet?

• Error prevention: Har du upplevt n˚agra hinder under din anv¨andning av webbapplikationen? Om ja, vad var problemet?

• Recognition rather than recall: Har instruktioner f¨or anv¨andningen av systemet ska varit synlig och enkel att komma ˚at p˚a webbapplikationen? Om inte, vad var problemet?

• Aesthentic and minimalistic design: Visades irrelevant eller s¨allan anv¨andbar information? Om ja, vad var problemet?

• Help users recognize, diagnose, and recover from errors: P˚atr¨affades n˚agra fel med hemsidan och i s˚adana fall visades ett felmeddelande som preciserade problemet och f¨oreslog konstruktiva ˚atg¨arder? Om ja, vad var problemet?

Tillsammans med svar fr˚an tidigare anv¨andartester kan d¨arefter en slutsats och svar p˚a fr˚agest¨allningen dras. Fr˚agest¨allningen l¨od: Hur ska en e-butik f¨or f¨ors¨aljning av begagnad kurslitteratur implemente-ras f¨or att uppn˚a god anv¨andbarhet med avseende p˚a god navigerbarhet?

References

Related documents

Detta g¨aller alla tal vars dyadiska utveckling ¨ar ¨andlig; man beh¨over inte kasta fler kast ¨an vad som anges av den position d¨ar sista ettan finns i utvecklingen.. Det betyder

Resonemang, inf¨ orda beteck- ningar och utr¨ akningar f˚ ar inte vara s˚ a knapph¨ andigt presenterade att de blir sv˚ ara att f¨ olja.. ¨ Aven endast delvis l¨ osta problem kan

Antalet kunder som bes¨ oker de tv˚ a aff¨ arerna en timme kan beskrivas med Poissonf¨ ordelningar.. Det genomsnittliga antalet kunder som bes¨ oker de tv˚ a aff¨ arerna ¨ ar

Vid bed¨ omningen av l¨ osningarna av uppgifterna i del 2 l¨ aggs stor vikt vid hur l¨ osningarna ¨ ar motiverade och redovisade. T¨ ank p˚ a att noga redovisa inf¨ orda

Eftersom planet g(x, y, z) = 3x+2y−z = 10 inte har n˚agra kantpunkter eller singul¨ara punkter (d¨ar gradienten ∇g ¨ar nollvektorn) s˚a antar f sina lokala extremv¨arden i

[r]

[r]

Rutinen som anv¨ands f¨ or att definiera operatorn, kan ha antingen ett eller tv˚ a argument, men eftersom funktionen normalt definieras i samma modul som inneh˚