Analys av insamlad data

F¨or att avg¨ora hur anv¨andbar webbapplikationen som utvecklades var anv¨andes SUS-v¨ardet. Me- delv¨arde, median, standardavvikelse, max- och min-v¨arde f¨or b˚ade SUS-v¨ardet och f¨ortroende- v¨ardet sammanst¨alldes i en tabell. SUS- och f¨ortroende-v¨ardena sammanst¨alldes ¨aven i en graf med de tv˚a skalorna p˚a varsin axel f¨or att visa hur varje enskilt SUS-v¨arde och f¨ortroende-v¨arde f¨orh˚aller sig till varandra. Av de samlade SUS- och f¨ortroende-v¨ardena gjordes en korrelationsa- nalys d¨ar Pearsons korrelationskoefficient togs fram som visar sambandet mellan anv¨andbarhet och f¨ortroende. P-v¨ardet togs ocks˚a fram. D˚a varken v¨antev¨arde eller standardavvikelse ¨ar k¨anda uppskattades b˚ada. Antalet frihetsgrader f˚as d¨arf¨or genom att dra av tv˚a fr˚an antalet testdel- tagare.

De kvalitativa data fr˚an testet samt t¨anka h¨ogt-protokollet kategoriserades i positiva och negativa kommentarer och d¨ar efter analyserades och kategoriserades dem ytterligare f¨or att med mer precision f¨orst˚a vilka aspekter av webbapplikationen som p˚averkat anv¨andarens uppfattning.

Kapitel 4

Resultat

I detta kapitel presenteras resultatet fr˚an f¨orstudien, designval vid implementationen samt utv¨arderingen. Resultatet diskuteras sedan i kommande delar av rapporten.

4.1

F¨orstudie

I f¨oljande avsnitt presenteras resultat fr˚an f¨orstudien. Detta omfattar resultat fr˚an enk¨atstudie samt prototyp.

4.1.1 Enk¨atstudie

I den initiala marknadsunders¨okningen som genomf¨ordes anv¨andes svaren fr˚an den enk¨at som sammanst¨allts. Svaren fr˚an enk¨aten var till god hj¨alp f¨or att kartl¨agga vilka typer av f¨orv¨antningar och orosmoment de svarande lade fokus p˚a. Enk¨aten och dess resultat kan ses i helhet i Bilaga B. Resultatet fr˚an enk¨aten ˚atergav en bild av att 81,9% valde att s¨alja, alternativt sk¨anka vidare sina m¨obler n¨ar de gjorde sig av med dem. N˚agot som var viktigt f¨or de flesta av testpersonerna d˚a de skulle genomf¨ora ett k¨op av begagnade m¨obler p˚a en webbapplikation, var att det fanns tydliga bilder som visar vilket skick varan ¨ar i. Dessutom ser majoriteten alternativet “Att skic- ket p˚a varan inte motsvarar mina f¨orv¨antningar” som den st¨orsta risken vid ett s˚adant typ av k¨op.

Enk¨aten utformades f¨or att besvaras av studenter, och specifikt distribuerades den till studenter p˚a Link¨opings Universitet d¨ar den ¨overv¨agande delen (83,8%) av de svarande var i ˚aldersspannet 21-25 ˚ar. Antalet svarande uppgick till 72 personer och ses som ett antal stort nog f¨or att kunna dra slutsatser kring dess resultat med antagandet att respondenterna f¨or enk¨aten ¨ar av god intellektuell kapacitet enligt Marshalls studie [38].

4.1.2 Prototyp

F¨or att f˚a en tidig bild av hur webbapplikationen skulle designas utformades en prototyp, se bilaga C. I stora drag ritades den upp med aspekter s˚asom placering av element, hur anv¨andarna

skulle bli bem¨otta vid f¨orsta anblick, i ˚atanke. Med teorin som bakgrund fanns en aning om hur prototypen skulle designas relaterat till fr˚agest¨allningen. Dessutom skulle andra m¨ojliga element som hade kunnat vara relevanta f¨or en komplett e-handelsapplikation inte inkluderas, s˚a att prototypen bara skulle inneh˚alla det v¨asentliga. I form av funktionalitet gav ¨aven prototypen en bra h¨anvisning till hur anv¨andarna sedan skulle kunna anv¨anda produkten, och hur de intuitivt skulle kunna agera.

Prototypen skissades i form av fyra olika bilder, som fick representera olika vyer anv¨andaren kun- de m¨otas av under anv¨andandet av webbapplikationen. Ett genomg˚aende element var menyf¨altet l¨angst upp p˚a bilderna, som skulle inneh˚alla b˚ade information och funktionalitet. Information i form av namnet p˚a e-handelsapplikationen och funktionalitet i form av olika knappar med di- verse funktioner. Dessa funktioner bestod exempelvis av inloggning, utloggning samt hantering av varukorgen.

Figur 4.1: Prototyp f¨or m¨obelutforskningsvyn.

Sj¨alva k¨arnan i funktionaliteten, att utforska m¨obler, visas i figur 4.1. Med ett element till v¨anster f¨or att kunna filtrera m¨obler utifr˚an valda kriterier. I prototypen inkluderades bara grundl¨aggande kriterier. Varje m¨obel ute till f¨ors¨aljning skulle sen representeras i ett matrisfor- mat med bild, beskrivning och pris. Om anv¨andaren skulle klicka p˚a en m¨obel skulle en ny vy ¨

oppnas med mer information om m¨obeln. Se figur 4.2. Med funktionalitet f¨or att kunna l¨agga m¨obeln i varukorgen och skicka fr˚agor om m¨obeln till f¨oretaget. Vid ett t¨ankt klick p˚a knap- pen f¨or att l¨agga till m¨obeln skulle ett popup-f¨onster ¨oppnas, visande den aktuella varukorgen, totalkostnad och en knapp som tar anv¨andaren till kassan f¨or betalning och slutf¨orande av k¨op. Det skulle dessutom vara m¨ojligt att f˚a tillg˚ang till varukorgen fr˚an kontovyn, med en identisk utformning fast integrerad i huvudf¨onstret ist¨allet f¨or en popup.

Figur 4.2: Prototyp f¨or en specifik m¨obel.

4.2

Implementation

I detta avsnitt presenteras resultatet fr˚an implementationen av webbapplikationen. Beslut om hur webbapplikationen skulle designas baserades p˚a framtagen teori i tidigare avsnitt.

Fokuset till n¨asta deadline var att utveckla de resterande punkterna i produktbackloggen. Av de punkter som l˚ag kvar i produktbackloggen fanns det punkter av alla tre prioriteter varav de med h¨ogst prioritet utvecklades f¨orst. Vissa av punkterna utvecklades ej p˚a grund av tidsbrist samt nya funktioner som i efterhand lades till p˚a webbapplikationen. En punkt som prioritera- des bort helt var att g¨ora en s¨okfunktion. D˚a det redan fanns en filtrering som substituerade detta s˚ags det som ¨overfl¨odigt och f¨or tidskr¨avande. En punkt som delvis utvecklades var att g¨ora ett kommentarsf¨alt f¨or en produkt, detta modifierades till att funktionen att st¨alla en fr˚aga om produkten till f¨oretaget. Det s˚ags som ¨overfl¨odigt att ha ett kommentarsf¨alt eftersom att webbapplikationen ¨ar en second-hand tj¨anst och d¨arf¨or endast s¨aljer en av varje produkt, ett fr˚agef¨alt d¨ar fr˚agor kan st¨allas till f¨oretaget ans˚ags att passa b¨attre. Nya funktioner som prio- riterades ¨over redan existerande punkter var att g¨ora hela webbapplikationen responsiv mellan laptops och mobiler och vidareutveckling av vissa tidigare funktioner prioriterades som viktigare ¨

an de punkter som fanns kvar i produktbackloggen. Under denna tidsperiod p˚ab¨orjades ¨aven arbetet med att ta fram anv¨andartesterna f¨or webbapplikationen.

Till den sista deadlinen var fokuset att justera webbapplikationens utseende och funktionalitet sett till anv¨andbarhet och f¨ortroende. Detta f¨or att webbapplikationen skulle st¨amma ¨overens med den teori som hittats kring skapandet av en f¨ortroendeingivande webbapplikation och p˚a s˚a s¨att f¨orb¨attra chanserna att besvara fr˚agest¨allningen denna rapport baseras p˚a. Arbetet den sista veckan utf¨ordes mestadels genom m¨oten d¨ar webbapplikationen gemensamt unders¨oktes och korrigerades utefter teorin. Arbetet med att genomf¨ora anv¨andartester p˚ab¨orjades ¨aven

under denna del av implementationen.

4.2.1 System¨oversikt

I f¨oljande avsnitt redog¨ors det f¨or de olika delarna som webbapplikationen inneh˚aller. Startsi- dan, kontorelaterade sidor och visning av produktutbud presenteras samt hur navigeringen p˚a webbapplikationen ¨ar uppbyggd. Ut¨over detta kommer betalningsprocessen ¨aven beskrivas. Se bilaga E f¨or samtliga sk¨armdumpar av webbapplikationens olika vyer. Besluten om hur webbap- plikationen skulle skapas togs baserat p˚a framtagen teori om vad som var viktigt vid design av en webbapplikation med fokus p˚a att skapa f¨ortroende hos anv¨andaren genom anv¨andbarhet.

Figur 4.3: Sk¨armdump av webbapplikationens Startsida. Startsida

Den sidan som anv¨andaren f¨orst hamnade p˚a var Startsidan, se figur 4.3. H¨ar placerades tre st¨orre bilder med text d¨ar anv¨andaren enkelt kunde ta sig till webbapplikationens mest prim¨ara sidor: Om oss, Utforska m¨obler och Konto. P˚a denna vy fanns ocks˚a en sektion d¨ar kommentarer och betyg fr˚an anv¨andare presenterades. Betygen var fiktiva men det beslutades att inkludera de baserat p˚a resultat fr˚an andra studier som beskrivs i teorin 2.3.2. Ut¨over detta valdes bl˚a som f¨arg p˚a huvudmenyn och knappar, detta implementerades p˚a alla webbapplikationens vyer. Navigering

F¨or att skapa en enkel navigering p˚a webbapplikationen fanns en huvudmeny som alltid syntes oberoende av vilken sida anv¨andaren befann sig p˚a. Denna meny inneh¨oll l¨ankar till webbap- plikationens olika vyer. Huvudmenyn anpassades till om anv¨andaren var inloggad eller inte, d˚a olika l¨ankar visades i de tv˚a fallen. Oberoende av statusen p˚a anv¨andaren fanns l¨ankar till Hem, Utforska m¨obler och Om oss p˚a den v¨anstra sidan av menyn. L¨ankarna till h¨oger i menyn va- rierade d¨ar Konto, S¨aljf¨orfr˚agan, Varukorg och Logga ut visades vid inloggad anv¨andare samt Logga in och Registrera visades om anv¨andaren ej var inloggad. Se figur 4.4 f¨or skillnaden p˚a huvudmenyn beroende p˚a om anv¨andaren var inloggad eller ej.

Figur 4.4: Skillnaden p˚a huvudmenyn beroende p˚a om anv¨andaren ¨ar inloggad eller ej. Den ¨ovre menyn ¨ar den som visas n¨ar anv¨andaren ¨ar inloggad.

Inloggning och registrering

Huvudmenyn gav m¨ojlighet f¨or en icke inloggad anv¨andare att registrera sig p˚a sidan och/eller logga in. Under flikarna Logga in samt Registrera fanns sidor med lite men enkel information och funktionalitet. B˚ade formul¨aret f¨or inloggning och registrering gav specifika felmeddelanden om anv¨andaren skrev in n˚agot felaktigt. Se figur 4.5 f¨or sk¨armdump p˚a inloggning och registrering.

Visning av produktutbud

Under fliken Utforska m¨obler hittade anv¨andaren en sida d¨ar hela produktutbudet visades. Skrol- lar anv¨andaren ner˚at kan alla m¨obler som ligger till f¨ors¨aljning hittas. En filtrering implemen- terades f¨or att underl¨atta f¨or anv¨andaren vid s¨okning av en specifik m¨obel eller produktgrupp. Denna filtreringsmeny hittades p˚a v¨anstra sidan och d¨ar kunde anv¨andaren filtrera med h¨ansyn till Kategori, F¨arg, Skick och Pris. L¨angst ned i filtreringmenyn fanns en knapp, Filtrera, som laddade om sidan med given filtrering. S¨okorden sparades i filtreringsmenyn s˚a att anv¨andaren kunde se vad de s¨okt efter.

P˚a vyn Utforska m¨obler presenterades varje m¨obel med en bild, ett pris och en kort beskrivning, se figur 4.6. N¨ar en inloggad anv¨andare hade musen ¨over en specifik m¨obel visades en varukorg- sikon p˚a just denna m¨obel. Om anv¨andaren klickade p˚a denna lades varan till i varukorgen och en modal visades d¨ar anv¨andaren blev informerad att varan lagts i varukorgen. Om en vara re- dan l˚ag i varukorgen visades i st¨allet en papperskorgs-ikon p˚a m¨obeln n¨ar anv¨andaren placerade pekaren ¨over denna. Vid tryck togs d˚a m¨obeln bort fr˚an varukorgen. ¨Aven d˚a visades en modal som informerade anv¨andaren att m¨obeln var borttagen. Se figur 4.6 f¨or de olika ikonerna.

Figur 4.6: Skillnad p˚a ikonerna som visas beroende p˚a om varan ligger i anv¨andarens varukorg eller ej. Till v¨anster ¨ar fallet d˚a varan ej ligger i korgen

Varje presenterad m¨obel hade en tillh¨orande knapp Mer information, se figur 4.6. Om anv¨andaren klickade p˚a denna l¨ankades anv¨andaren till en sida med mer information om m¨obeln, se figur 4.7. D¨ar visades en st¨orre bild p˚a m¨obeln samt en l¨angre beskrivning. Ut¨over detta fick anv¨andaren information om m¨obelns skick, vikt och m˚att. Om anv¨andaren var inloggad hade denne ¨aven h¨ar m¨ojlighet att l¨agga till m¨obeln i varukorgen samt ta bort den. Om anv¨andaren ej var inloggad syntes knappen, Logga in f¨or att l¨agga i varukorgen, som l¨ankade anv¨andaren till inloggnings- sidan. P˚a den produktspecifika sidan implementerades ¨aven ett fr˚ageformul¨ar d¨ar anv¨andaren kunde st¨alla en fr˚aga om m¨obeln.

Figur 4.7: Sk¨armdump av en produktspecifik sida Varukorg och k¨opprocess

I huvudmenyn hittades ¨aven l¨anken till Varukorg d¨ar anv¨andaren kunde ¨overblicka m¨oblerna i va- rukorgen och se det totala priset om anv¨andaren var inloggad. P˚a denna sida kunde anv¨andaren b˚ade ta bort m¨oblerna fr˚an varukorgen samt klicka p˚a dem f¨or att l¨ankas till den produktspe- cifika sidan f¨or mer information. P˚a denna sida fanns ocks˚a en knapp G˚a till kassa, som f¨orde anv¨andaren vidare till betalning.

P˚a Betalsidan fick anv¨andaren se vilka varor de f¨ors¨okte k¨opa samt f¨or vilket pris och l¨angst ner fanns en knapp Pay with card. Om anv¨andaren klickade p˚a knappen visades en modal d¨ar anv¨andaren kunde skriva in kortuppgifter och genomf¨ora betalningen. Om betalningen ge- nomf¨ordes korrekt hamnade anv¨andaren p˚a en sida som visade vilka m¨obler anv¨andaren k¨opt samt gav information om k¨opet fr˚an f¨oretaget. D¨ar fanns ocks˚a en knapp f¨or att forts¨atta ut- forska produktutbudet.

Kontosida, S¨aljf¨orfr˚agan och Om oss

N¨ar anv¨andaren var inloggad visades l¨anken till Konto och S¨aljf¨orfr˚agan i huvudmenyn. Under fliken S¨aljf¨orfr˚agan fanns m¨ojlighet f¨or anv¨andaren att skicka in en s¨aljf¨orfr˚agan om en m¨obel. D¨ar ombads anv¨andaren att ange kategori, bild och en kort beskrivning av m¨obeln s˚a att det kan tas ett beslut om m¨obeln ska l¨aggas ut f¨or f¨ors¨aljning eller ej. Anv¨andaren anger ocks˚a om m¨obeln ska h¨amtas eller ej, samt ifall m¨obeln ¨ar en donation.

Under Konto hittade anv¨andaren en sida d¨ar dennes anv¨andaruppgifter fanns samt en lista p˚a s¨aljf¨orfr˚agningar om anv¨andaren skickat in n˚agra, se figur 4.8. Under varje s¨aljf¨orfr˚agan visades

det om f¨orfr˚agan var Under granskning eller Godk¨and. Under anv¨andaruppgifterna fanns en knapp, Uppdatera uppgifter. Om anv¨andaren klickade p˚a knappen f¨ordes denne till en sida d¨ar ¨

andring av uppgifter och l¨osenord var m¨ojligt.

Figur 4.8: Sk¨armdump p˚a sidan Konto, h¨ar kan anv¨andaren se och ¨andra sina uppgifter samt ¨

overblicka sina s¨aljf¨orfr˚agningar

Ut¨over ovan n¨amnda sidor fanns l¨anken till Om oss i huvudmenyn och p˚a startsidan. P˚a denna sida fick anv¨andaren information om f¨oretagets verksamhet samt kunde kontakta f¨oretaget ifall de hade en fr˚aga, se figur 4.9.

Figur 4.9: Sk¨armdump p˚a sidan Om oss. Responsivitet

Webbapplikationen anpassades f¨or att vare responsiv mellan en datorsk¨arm och mobilsk¨arm. Den enda egentliga skillnaden mellan datorversionen och mobilverisionen ¨ar strukturen p˚a sidorna, d¨ar dem i mobilversionen ligger i en kolumn till skillnad fr˚an rutn¨atet i datorverisionen, samt hur filtreringen av m¨obler g˚ar till. F¨or att mobilanpassa filtreringen implementerades ytterligare en knapp som var dold p˚a st¨orre sk¨armar men syntes p˚a mobilsk¨armar. N¨ar denna knapp trycktes

p˚a ¨oppnades filtreringsmenyn som vanligtvis var dold p˚a mobilsk¨armar, denna knapp samt dess funktion kan ses i figur 4.10.

Figur 4.10: Exempel p˚a mobilfiltrering

4.2.2 Systemspecifikation

F¨or att f¨orenkla och f¨orb¨attra kommunikationen mellan klienten och servern anv¨andes Ajax. Detta ledde till att anv¨andaren av webbapplikationen kan utf¨ora mer saker p˚a webbapplikationen ¨

aven om all data inte genererats ¨an fr˚an server-sidan. Dessa faktorer leder till att Ajax f¨orb¨attrar b˚ade snabbheten p˚a webbapplikationen och anv¨andbarheten.

Ramverket Bootstrap anv¨andes f¨or att anpassa formatet av webbapplikationen efter anv¨andarens sk¨armstorlek. Bootstrap g¨or det l¨attare f¨or utvecklare att utveckla responsiva webbapplikationer genom att ha ett v¨alutvecklat responsivt rutn¨ats-system.

Under implementationen har ocks˚a Jinja anv¨ants som ¨ar ett spr˚ak gjort specifikt f¨or Python. En av de funktioner som Jinja har som underl¨attade utvecklandet av webbapplikationen var arv fr˚an html-templates. Detta g¨or det m¨ojligt att ¨arva fr˚an en annan html-template vilket underl¨attar en konsekvent design av webbapplikationen.

Figur 4.11: Databas-modellen, fetmarkerade attribut utg¨or prim¨arnycklar.

Flask-SQLalchemy anv¨andes som ramverk f¨or databasen, som kan ses i sin helhet i figur 4.11. Detta f¨orenklar databas-modellerande genom m¨ojligheten att i ren pythonkod skapa klasser som ¨arver fr˚an db.model och sen modellera databasen med attributen i klassen. Med hj¨alp av SQLalchemys backref har kommunikationen med databasen i sj¨alva applikationen hanterats. En komplett lista med de moduler som anv¨ants i implementationen av webbapplikationen hittas i Bilaga F.

4.3

Utv¨ardering

I f¨oljande avsnitt presenteras resultatet fr˚an anv¨andartesterna och t¨anka h¨ogt-protokollet, sam- manst¨allning av resultaten hittas i bilaga I f¨or anv¨andartesterna respektive bilaga J f¨or t¨anka h¨ogt-protokollet.