Linköpings universitet SE–581 83 Linköping
Kandidatarbete på grundnivå, 18hp | Datateknik
2018 | LIU-IDA/LITH-EX-G--18/026--SE
Xpanda - Utformning av en
e-marknadsplats för företag
in-om Ung Företagsamhet
Utformning av en e-marknadsplats med hög användbarhet för
företag inom Ung Företagsamhet och som är lättnavigerad för
alla användare.
Development of an online marketplace with a high level of
usability for companies active within Ung Företagsamhet, which
is easy to navigate for all users.
Harald Ekholm
Linus Falck
Kristin Gylseth
Fredrik Höije
Victor Kristiansson
Gustaf Sagent
Linnéa Tullin
Handledare : Rita Kovordanyi Examinator : Aseel Berglund
Detta dokument hålls tillgängligt på Internet – eller dess framtida ersättare – under 25 år från publiceringsdatum under förutsättning att inga extraordinära omständigheter uppstår. Tillgång till dokumentet innebär tillstånd för var och en att läsa, ladda ner, skriva ut enstaka kopior för enskilt bruk och att använda det oförändrat för ickekommersiell forskning och för undervisning. Överföring av upphovsrätten vid en senare tidpunkt kan inte upphäva detta tillstånd. All annan användning av dokumentet kräver upphovsmannens medgivande. För att garantera äktheten, säkerheten och tillgängligheten finns lösningar av teknisk och admi-nistrativ 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 sam-manhang som är kränkande för upphovsmannens litterära eller konstnärliga anseende eller egenart. För ytterligare information om Linköping University Electronic Press se förlagets hemsida 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 circumstan-ces. 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 unchang-ed for non-commercial research and unchang-educational purpose. Subsequent transfers of copyright cannot revoke this permission. All other uses of the document are conditional upon the con-sent 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 Uni-versity Electronic Press and its procedures for publication and for assurance of document integrity, please refer to its www home page: http://www.ep.liu.se/.
c Harald Ekholm Linus Falck Kristin Gylseth Fredrik Höije Victor Kristiansson Gustaf Sagent Linnéa Tullin
Ung Företagsamhet (UF) gives youths in high school the possibility to try what it is like to run a business for one year. According to a survey conducted on students at Linköping University and various high schools, it was clear that the majority of sales of UF-products takes place at physical marketplaces. The survey also concluded that there is an interest for an external e-marketplace where UF-companies can expand their sales. In this project, Xpanda has been developed to meet this need with focus on trying to create a web-based application with high usability for UF-companies and has high navigability for all users. In order to achieve these criteria, scientific references were gathered which lay the foundation for the development of the web application. The project worked according to agile methods and the project was divided into three iterations, also known as sprints. After each sprint, the results of the current application was evaluated through user tests. The test groups opinions and comments were evaluated and in some cases led to changes in the application to work towards answering the key questions of the report. Certain priorities had to be made during the development, which is discussed in the report. The conclusion of the report is that it is possible to develop a web application that is perceived as usable and navigable for its users.
Sammanfattning
Ung Företagsamhet (UF) erbjuder ungdomar i gymnasiet möjligheten att testa på hur det är att driva ett företag under ett års tid. Enligt en enkätundersökning, som utfördes på studen-ter från Linköpings Universitet och på olika gymnasieskolor, framkom det att den största försäljningen av UF-produkter sker på fysiska marknadsplatser. Enkäten visade även att det fanns ett intresse för en extern e-marknadsplats där UF-företag kan utöka sin försäljning. I det här projektet har Xpanda utvecklats för att möta detta behov med fokus på att försöka skapa en webbapplikation som har hög användbarhet för UF-företag och är lättnavigerad för alla användare. För att uppnå dessa kriterier togs det fram vetenskapliga källor som låg till grund för utformandet av webbapplikationen. Projektet arbetade efter de agila metoder-na och var uppdelat i tre iterationer, även känt som sprintar. Efter varje sprint utvärderades resultatet av den dåvarande applikationen med hjälp av användartester. Testgruppernas åsik-ter samt kommentarer värderades och ledde till förändringar av applikationen för att främja frågeställningen. Prioriteringar behövde göras i utvecklandet, vilket diskuteras i rapporten. Slutsatsen av rapporten är att det är möjligt att utveckla en webbapplikation som upplevs som användbar och lättnavigerad av dess användare.
Innehåll
Innehåll iv 1 Inledning 1 1.1 Motivering . . . 1 1.2 Syfte . . . 2 1.3 Frågeställning . . . 2 1.4 Avgränsningar . . . 3 1.5 Bakgrund . . . 3 2 Teori 4 2.1 E-handel . . . 4 2.1.1 Förtroende . . . 42.1.2 Betydelsen av användbarhet och navigerbarhet inom e-handel . . . 5
2.2 Användbarhet . . . 5
2.2.1 Navigering ur ett användbarhetsperspektiv . . . 5
2.2.2 Utformning av information . . . 6
2.2.3 Laddningstid . . . 6
2.2.4 Metoder för att förbättra laddningstiden . . . 7
2.3 Navigerbarhet . . . 8 2.3.1 Placering av funktioner . . . 8 2.3.2 Placering av information . . . 9 2.3.3 Design av användargränssnitt . . . 9 2.3.4 Travel path . . . 10 2.4 Metodteori . . . 10 2.4.1 Användarcentrerad utveckling . . . 10 2.4.2 Prototyp . . . 11 2.4.3 Tester . . . 11 3 Metod 15 3.1 Förstudie . . . 15 3.1.1 Marknadsanalys . . . 15 3.1.2 Prototyp . . . 16 3.2 Implementation . . . 16 3.2.1 Arbetsmetod . . . 16 3.2.2 Design . . . 17 3.2.3 Front-end . . . 17 3.2.4 Back-end . . . 18 3.2.5 Databas . . . 18 3.3 Utvärdering . . . 18 4 Resultat 20 4.1 Förstudie . . . 20
4.1.2 Produktbacklogg och Prototyp . . . 21 4.2 Implementation . . . 21 4.2.1 Front-end . . . 22 4.2.2 Responsivitet . . . 31 4.2.3 Back-end . . . 31 4.3 Utvärdering . . . 32 4.3.1 Användartest 1 . . . 33 4.3.2 Användartest 2 . . . 34 4.3.3 Användartest 3 . . . 35 5 Diskussion 41 5.1 Användbarhet . . . 41 5.2 Navigerbarhet . . . 43 5.3 Metod . . . 46 5.3.1 Utformning av användartester . . . 46
5.3.2 Värdera kvalitativ data . . . 47
5.3.3 Testgrupp . . . 47
5.3.4 Källdiskussion . . . 47
5.4 Samhälleliga och etiska aspekter . . . 48
5.4.1 Användande . . . 48
5.4.2 Missbruk av webbapplikationen . . . 49
5.4.3 Säkerhet . . . 49
5.5 Arbetet i ett vidare sammanhang . . . 50
5.5.1 Responsiv utveckling för anpassning till olika skärmstorlekar . . . 50
5.5.2 Konkurrentjämförelse . . . 50 6 Slutsatser 52 Referenser 54 A Enkätundersökning 57 B Marknadsföringsplan 61 C Projektplan 81 D Back-end 92 D.1 Ett exempel på hur en route hanterar POST- och GET-anrop . . . 97
D.2 Databasstruktur . . . 97 E Produktbacklogg 99 F Användartester 102 F.1 Användartest 1 . . . 102 F.2 Användartest 2 . . . 102 F.3 Slutgiltigt användartest . . . 103
G Fullständiga svar på användartester 104 G.1 Användartest 1 . . . 104
G.2 Användartest 2 . . . 106
1
Inledning
UF-företag är en utbildning inom företagande för gymnasieungdomar i Sverige som bedrivs genom Ung Företagsamhet. Under läsåret 2017/2018 bedrev nästan 30 000 ungdomar UF-företag och antalet årliga deltagare har nästan fördubblats jämfört med för tio år sedan1.
Uti-från en marknadsundersökning kring e-handel kopplat till UF-företag kan konstateras att det inte finns någon större existerande marknadsplats enbart för UF-företag (se bilaga A). I sam-ma undersökning är det ingen av de med erfarenhet av UF-företag som uppger att de valt att använda sig av samlade marknadsplatser som Blocket eller Tradera. Detta skulle kunna bero på att dessa upplevs som svårnavigerade, eftersom mängden information gör den hierarkis-ka strukturen både bred och djup och därmed svår att överblichierarkis-ka (se avsnitt 2.3.3). Utöver detta finns det en risk att UF-företagets produkter drunknar i den mängd av produkter som redan finns. Genomförd enkätundersökning visade på att majoriteten av UF-företag istället väljer att sälja sina på fysiska marknadsplatser (se bilaga A). Samma undersökning visade att 75% av enkätdeltagarna med UF-företag hade varit intresserade av en extern, internetbase-rad försäljningsplattform samt att 71% av deltagarna hade kunnat tänka sig att handla via en sådan webbapplikation. Att som UF-företag välja alternativet att utveckla och administrera en egen webbapplikation är något som tar en stor del av företagets tid då UF-företag enbart tillåts vara aktiva under ett år, vilket gör att det krävs att en e-marknadsplats är enkel för UF-företagen att implementera i sin verksamhet. Målet med projektet var därför att skapa en extern e-marknadsplats för UF-företag som är lättnavigerad och användbar, där de kan sälja sina produkter och nå ut till befintliga och nya kunder på ett enkelt sätt.
1.1 Motivering
Under de senaste åren har e-handeln ökat vilket innebär att allt fler köper produkter via internet2. Som en följd av detta har konkurrensen ökat inom e-handel och för att en
web-bapplikation ska vara framgångsrik behöver den utvecklas efter vissa riktlinjer. En av dessa riktlinjer är att en användare måste känna förtroende för en e-shop [1]. En förutsättning för att en webbapplikation ska vara förtroendegivande är att vissa centrala faktorer är uppfyllda. Två av dessa faktorer är användbarhet och navigerbarhet. Hur begreppen definieras, och
1https://ungforetagsamhet.se/om-oss/var-utbildning-ger-resultat
vilka samband som finns, beskrivs tillsammans med hur en applikation bör utvecklas med avseende på dessa begrepp i teoriavsnittet.
Istället för att aktörer skapar egna webbapplikationer har det i den växande e-handelstrenden utvecklats e-marknadsplatser där de kan lägga ut produkter. Detta då det kan vara svårt att marknadsföra sin applikation, men även för att det kan finnas kunskapsbrister inom webbut-veckling. Att använda sig av etablerade marknadsplatser, såsom Blocket och Tradera, medför även andra fördelar. En fördel är att många redan har vetskap om dessa kända tjänster och på så sätt får aktörer en större marknadsspridning.
Som tidigare nämnts har deltagandet inom Ung Företagsamhet har nästan fördubblats på tio år3. För att undersöka intresset för en e-marknadsplats för UF-företag, ur ett företags- och
kundperspektiv, har en marknadsundersökning genomförts (se bilaga A). Undersökningen visade att 71% av deltagarna hade varit intresserade av att köpa UF-produkter via en extern marknadsplats. Av de som haft eller har UF-företag var 75% intresserade av att sälja sina produkter genom en marknadsplats exklusiv för UF-företag.
Det var även anmärkningsvärt hur stor del av försäljningen av UF-produkter som sker på fysiska marknadsplatser, vilket tyder på att UF-företag inte använder sig av etablerade e-marknadsplatser. Detta kan bero på att de existerande plattformarna inte uppfyller UF-företagens behov eller att de anses för dyra. Det uppmärksammar även att UF-företag inte skapar egna webbapplikationer vilket kan bero på den tidsbrist UF-företag har eller att de inte har kunskap inom webbutveckling. Dessutom svarade 29% av de som haft eller har UF-företag att de var missnöjda med hur de sålde sina produkter. Detta innebär att UF-UF-företagen är dåligt representerade på internet samtidigt som det finns ett missnöje över hur de säljer sina produkter.
Detta öppnar upp för skapandet av webbapplikationen Xpanda - en samlad e-marknadsplats för UF-företag. Då UF-företag endast tillåts vara aktiva under ett år krävs det att Xpanda är användbar för leverantörerna och enkel att implementera till sin verksamhet. Det är viktigt att e-marknadsplatsen är anpassad för UF-företagens behov och inger förtroende. Det är även viktigt att applikationen är navigerbar för att behålla användare kvar på sidan, men även för att slutföra köp4. Därför har fokus lagts på användbarhet och navigerbarhet vid utveckling
av Xpanda.
1.2 Syfte
Arbetet har som syfte att studera hur en marknadsplats med UF-företag som leverantörer ska utformas för att främja användbarhet och navigerbarhet. Målet är att skapa en webbapplika-tion som UF-företag enkelt kan implementera i sin verksamhet och som är navigerbar för alla användare.
1.3 Frågeställning
Hur en extern e-marknadsplats för företag inom Ung Företagsamhet ska utformas för att skapa en applikation med hög användbarhet för leverantörerna och som är lättnavigerad för alla användare.
3https://ungforetagsamhet.se/om-oss/var-utbildning-ger-resultat 4https://ungforetagsamhet.se/om-oss/var-utbildning-ger-resultat
1.4 Avgränsningar
Webbapplikationen som utvecklats är avgränsad till att ha UF-företag som leverantörer. Webbapplikationen har därmed två typer av användare, dels UF-företagen och dels kun-derna som köper produkterna. Självklart är det viktigt att förmedla en bra kundupplevelse men då syftet är att erbjuda UF-företagen en lättillgänglig e-handelsplattform är projektet avgränsat till att fokusera på användbarhet ur leverantörens synvinkel, dock ska applikatio-nen fortfarande vara lättnavigerad för alla användare. Utöver detta är försäljningen genom webbapplikationen avgränsad till att gälla produkter och ej tjänster. Detta för att genomförd marknadsundersökning visade att 79% av de som har eller har haft UF-företag sålde en vara (se bilaga A).
Frågeställningens användbarhet fokuseras främst till utformning av information, laddnings-tid samt hur god navigerbarhet främjar användbarheten. Navigerbarheten begränsas till pla-cering av funktioner och information, design av användargränssnitt samt kundens travel path.
1.5 Bakgrund
Ett UF-företag är ett företag som bedrivs inom utbildningen Ungt Företagande, därav namnet UF-företag. Vidare i rapporten kommer verksamheter inom detta område refereras till som UF-företag. Utbildningen ges av Ung Företagsamhet som är en ideell, politiskt och religiöst obunden organisation som har verksamhet i hela Sverige5. De verkar på både
gymnasie-och grundskolenivå men att starta UF-företag är dock begränsat till gymnasiet6. Tanken
med att låta ungdomar starta och driva UF-företag är enligt Ung Företagsamhet att främja entreprenörsandan hos ungdomar. Organisationen stöds av offentliga medel, privata aktörer i näringslivet, stiftelser och fonder7. Ett UF-företag omfattas av andra regler än vad ett
van-ligt företag gör. Envan-ligt skatteverket bedrivs UF-företag som ”Övningsföretag”, vilket bland annat innebär att det inte finns någon juridisk person6. Ung Företagsamhet är en del av den
globala organisationen Junior Achievement7. Junior Achievement är i sin tur en ideell och
internationell organisation som har verksamhet över hela världen där arbete med att på olika sätt lära ut och uppmuntra entreprenörskap bland ungdomar bedrivs8.
Tanken med utbildningen är att låta ungdomar på gymnasiet testa på att driva eget företag under ett år, med stöd av en rådgivare från Ung Företagsamhet. Detta innefattar bland annat att ta fram en produkt eller tjänst, skapa en budget och en affärsplan att arbeta utefter. Ung-domarna är själva ansvariga för att marknadsföra och sälja sin produkt och det är upp till varje UF-företag att bestämma hur de vill göra detta9.
5https://ungforetagsamhet.se/om-oss
6https://www.skatteverket.se/foretagochorganisationer/foretagare/ungaforetagare/ungforetagsamhet.4.5c13cb6b1198121ee8580002425.html 7https://ungforetagsamhet.se/gymnasium/dig-som-vardnadshavare
8https://www.jaworldwide.org/aboutja
2
Teori
I detta avsnitt presenteras teorin som motiverar de metoder som valts. Inledningsvis redogörs för vad som krävs för att en e-handel ska vara framgångsrik, vilket ligger till grund för de övriga avsnitten om användbarhet och navigerbarhet.
2.1 E-handel
Enligt DeLone och McLean [2] finns vissa faktorer som har stor påverkan på framgången hos en e-butik. De presenterar en modell där framgången beror på systemets kvalitet, serviceni-vå, användning, användarnöjdhet, kvaliteten på innehållet i applikationen och nettonytta för kunder. Vissa av dessa rubriker handlar mer om daglig drift av webbapplikationen, medan andra behandlar aspekter kring utvecklingen av applikationen. En underrubrik till syste-mets kvalitet är användbarhet. Detta är en av delarna som har valts att fokusera på i denna rapport. Den andra delen i fokus är navigerbarhet, vilken hittas under rubriken användning i DeLone och McLeans [2] modell. Dessa två delar utgör tillsammans basen för teoriavsnittet.
2.1.1 Förtroende
Det förtroende som skapas första gången användaren kommer i kontakt med webbapplika-tionen är essentiellt för att användaren ska vilja återkomma till hemsidan i framtiden. Om användaren därefter kontinuerligt besöker applikationen byggs sedan förtroendet upp över tid [3]. ISO-definitionen av användbarhet, ”Den grad i vilken användare i ett givet sammanhang kan bruka en produkt för att uppnå specifika mål på ett ändamålsenligt, effektivt och för användaren tillfredsställande sätt” [4], innebär bland annat att en användare ska kunna nå ett mål på ett effektivt sätt. En användare som är bekant med en webbapplikation sedan tidigare kan utföra uppgifter effektivare och en användare som känner förtroende för en webbapplikation tenderar även att använda sig av den igen [5]. Därtill är en väsentlig del av förtroendet beroende av webbapplikationens användbarhet. Genom att ha en god användbarhet ökar användarnas förtroende för sidan vilket i sin tur är en nödvändighet för att användaren ska vilja handla via webbapplikationen [6].
Eftersom direkt kommunikation mellan köpare och säljare ej är möjlig på en webbshop, är det viktigt att bygga förtroende på annat sätt. De två viktigaste och mest centrala begreppen för detta är säkerhet och integritet. För att delge hur applikationen hanterar detta begrepp presenteras ofta någon form av policy för kunderna. Ett bekymmer är däremot att applika-tionens önskade policy ofta inte överensstämmer med användarens önskade policy vilket bör utmynna i någon form av kompromiss. [7]
En av anledningarna till att konsumenter väljer att avstå från att handla online är för att de är misstänksamma kring säkerheten. Exempelvis är konsumenter vanligtvis försiktiga med sina betalkort vilket medför att det krävs att applikationen har deras förtroende för att de ska köpa något. [1]
Den personliga integriteten är den andra stora delen som påverkar förtroendet för en web-bapplikation. Enligt en undersökning av Federal Trade Commission [1] 1998 samlar 85% av de undersökta applikationerna in information om användaren. I samma undersökning infor-merade endast 14% om varför de samlar informationen. Från och med 2011 är det lagkrav på att användaren måste samtycka till att en sida använder sig av kakor1vilket innebär att en
typ av eventuell integritetskränkning numera uppmärksammas2.
Avslutningsvis tillkommer även aspekter i att skapa förtroende som kan vara svårt att an-gripa ur ett utvecklingssammanhang, däribland rykte och vad användaren har för bild av webbapplikationen innan den besöks för första gången. [8]
2.1.2 Betydelsen av användbarhet och navigerbarhet inom e-handel
Enligt DeLone och McLeans [2] är användbarhet och navigerbarhet viktiga faktorer att ta hänsyn till i utvecklingen av e-handelsplattformar. De lyfter även vikten av att utforma in-formation på ett tydligt och lättillgängligt sätt samt att webbapplikationen ger återkoppling till användaren, något som kan ses som underrubriker till användbarhet [9] respektive navi-gerbarhet [10] (se avsnitt 2.2.2 och 2.3.1). Därtill tillkommer att det finns en stark koppling mellan användbarhet och förtroende (se avsnitt 2.1.1), vilket innebär att användbarhet är av betydelse för en framgångsrik e-handel [6].
2.2 Användbarhet
Användbarhet definieras som tidigare nämnts enligt ISO-normen 9241-11 som: ”Den grad i vilken användare i ett givet sammanhang kan bruka en produkt för att uppnå specifika mål på ett ändamålsenligt, effektivt och för användaren tillfredsställande sätt” [4]. I följande kapitel behandlas ett antal områden som anses påverka användbarheten enligt denna definition.
2.2.1 Navigering ur ett användbarhetsperspektiv
Användbarhet och navigering är i webbutvecklingssammanhang två ord som står nära varandra. Detta eftersom en del i att uppnå en hög användbarhet i en webbapplikation ligger i att ta fram en god navigeringsstruktur då en användare som blir förvirrad av en webbappli-kations uppbyggnad tenderar att bli frustrerad – något som kan leda till att denne väljer att lämna sidan. För att utveckla en webbapplikation med hög användbarhet är alltså det första steget att skapa en välgenomtänkt navigeringsstruktur för den avsedda användaren för att denne ska välja att stanna kvar på applikationen. [11]
1cookies
2.2.2 Utformning av information
Hur informationsinnehållet ska se ut för att uppnå en hög användbarhet handlar bland annat om att välja vilken information som ska synas, omfattningen på informationen och valet av design. Människor saknar förmågan att ta in stora mängder av information samtidigt, vilket innebär att den information som ska finnas med i webbapplikationen bör vara väldisponerad. Mindre mängder information medför att användaren kan ta snabbare beslut och underlättar därmed i användandet av webbapplikationen. Var informationen placeras bör avgöras av dess betydelse; viktig information för användaren ska ha en central och tydlig placering på hemsidan för att den ska vara enkel att hitta. Liknande komponenter och information kan även placeras på samma plats för att underlätta ytterligare för användaren. [9]
För att uppnå tydlighet i längre stycken rekommenderas det att den viktigaste informationen står först samt att varje stycke behandlar ett område. En rekommenderad riktlinje när det kommer till omfång är att använda hälften av det antal ord som hade använts i en konventio-nell text. Det rekommenderas att den information som förmedlas via webbapplikationen är koncis och tydlig samt att stavning och grammatik är noggrant kontrollerad.När det kommer till design handlar det framförallt om val av färger och typsnitt. Här rekommenderas enkla bakgrundsfärger, lämplig typsnittsstorlek och lämpligt val av typsnitt. [11]
För att lyfta fram och skapa överblick över större mängder information kan även tabeller med olika typer av highlighting3användas. Tabellerna kan utformas med skarpa eller mjuka
linjer, dock bör det finnas både horisontella samt vertikala linjer för att underlätta läsligheten. Det rekommenderas i första hand att använda olika färger snarare än skarpa linjer för att lyfta fram och separera information, samtidigt som blinkande bakgrunder och andra typer av animationer bör undvikas. [12]
Utöver själva informationsinnehållet och hur det ser ut tillkommer var informationen ska placeras på webbapplikationen för att uppnå god navigerbarhet, något som leder till ökad användbarhet (se avsnitt 2.3.3).
2.2.3 Laddningstid
Jacob Nielsen [13] skriver att en tiondel av en sekund är den längsta väntetiden som möjlig-gör att användaren känner att ett system reagerar direkt. Tar det mer än en sekund påverkas användarens rytm vilket gör att användare förlorar känslan av att arbeta direkt med datan, det vill säga informationen på webbapplikationen. Är det så att laddningen tar mer än tio sekunder tappar användaren fokus. [13]
Enligt en rapport från Akami4[14] påverkar laddningstid antalet köp på en hemsida. Kunder
på både datorer samt mobila enheter påverkas negativt av laddningstiden och i undersök-ningen visades det att den så kallade conversion rate5minskar med ungefär en femtedel om
en sida tar mer än en sekund att ladda. [14]
Enligt en annan undersökning så rankar användare laddningstid som den viktigaste egen-skapen hos en sida bland alternativen innehåll, säkerhet, navigerbarhet, användarfokus och laddningstid. [11]
3Framhäva. Översättning från engelska. 4Ett stort molnföretag i USA.
2.2.4 Metoder för att förbättra laddningstiden
Ungefär hälften av all data som skickas vid inhämtning av internetsidor globalt kan härledas till hantering av bilder6. Två faktorer som kan påverka laddningtiden för bilder är bildformat
samt bildstorlek. Det format som vanligtvis rekommenderas för bilder är PNG. Det finns dock tillämpningar där andra format fungerar bättre, vilket gör att varje val av bildformat bör utvärderas separat. En annan faktor som är av vikt är att bildens storlek är anpassad till behovet. En onödigt stor bild påverkar laddningstiden negativt [15]. Ytterligare en åtgärd för att förbättra laddningstiden kan vara att ladda in eventuella bilder sist. Detta möjliggör att en indikator kan implementeras vilken visar hur lång tid det är kvar tills bilden är laddad, vilket förbättrar användarupplevelsen [16].
Utöver det ovan nämnda är det lämpligt att fundera över var laddning av CSS-filer och Java-Script sker. Enligt nuvarande teorier bör importering av CSS-filer ske högst upp i HTML-filer, framförallt eftersom vissa webbläsare inte börjar rendera webbsidan innan CSS-filen är in-läst. Anledningen till detta är att om sidan börjar renderas innan CSS-filen är inhämtad finns risken att sidan behöver renderas om i de fallen där CSS påverkar det redan renderade utseendet. Inläsning av JavaScript bör, till skillnad från CSS, ske i slutet av HTML-filer. Det kan förklaras med att när inläsning av JavaScript sker är rendering av webbsidan låst, vilket förlänger den upplevda laddningstiden [16]. Det är dessutom lämpligt att vid användning av externa bibliotek utnyttja cache-lagring till sin fördel. Genom att läsa in dessa bibliotek från exempelvis Google istället för att själv lagra dem på sin server finns en stor möjlighet att de nödvändiga biblioteken redan finns lagrade i användarens cache-minne, vilket minskar laddningstiden [17].
En annan viktig del i att förbättra laddningstiden är att minimera antalet HTML-anrop. Genom att minimera antalet inläsningar av komponenter som inte förändras är mängden data som behöver hämtas vid ett anrop mindre. Detta är speciellt viktigt på mobila enheter då användarupplevelsen påverkas extra mycket vid HTML-anrop. Detta kan förklaras med att dessa enheter behöver anropa nätverksoperatören flera gånger vilket drar batteri och mobildata. [15]
Ett annat sätt att minska antalet HTML-anrop är att kombinera och minska storleken på CSS samt JavaScript. Vanligtvis består en avancerad webbapplikation av stora mängder CSS och JavaScript, beroende på var denna kod placeras påverkas laddningstiden. Genom att placera all CSS- och JavaScript-kod i egna filer minskas antalet HTML-anrop vilket i sin tur minskar laddningstiden [15]. Det finns dock något motstridiga uppgifter kring detta. Flanagan [17] skriver att det allmänt erkända sättet att inkludera JavaScript i en HTML-fil är att använda sig av en script-tag. Flanagan medger dock att det även finns fördelar med att inkludera all JavaScript i en fil som läses in en gång när applikationen startas eftersom scripten då lagras i cache-minnet och således gör laddningen av övriga sidor på applikationen snabbare för användaren.
Dessa något motstridiga uppgifter innebär att det finns flera olika sätt att hantera framförallt JavaScript på, något som innebär att det kan vara svårt att veta vilket som är bäst för varje specifikt fall.
Minskningen7av filerna betyder att filerna komprimeras vilket exempelvis innebär att alla
mellanrum raderas. Då mellanrummen tas bort minskar mängden data som ska hämtas vilket förbättrar prestandan [15]. Ett verktyg som kan användas är Minifying8.
6https://httparchive.org/reports/state-of-the-web?start=latest#onLoad
7Översättning av Minify som innebär att filer komprimeras. Exempelvis genom www.minifier.org 8https://www.minifier.org/
2.3 Navigerbarhet
Flera rapporter inom webbutveckling framhåller navigerbarhet som en central del i utform-ningen av en webbapplikation [18][19][20]. I det här avsnittet behandlas teori och olika aspek-ter som kan påverka navigerbarheten hos en webbapplikation. För att skapa en överblick har avsnittet delats upp i placering av funktioner, placering av information samt design av an-vändargränssnitt. Placering av funktioner fokuserar på de funktioner användaren brukar för att navigera på webbapplikaitonen, placering av information handlar om hur information och text presenteras och design av användargränssnitt behandlar aspekter som rör applika-tionens layout. Därutöver tillkommer travel path, vilket är konsumentens väg från det att ett behov uppstår till dess att målet med besöket uppnåtts.
2.3.1 Placering av funktioner
Det är av stor vikt att besökare inte blir hindrade från att navigera vidare på grund av bristfällig placering eller avsaknad av funktionalitet. En god placering av funktioner där be-sökare kan hitta informationen de söker är därmed avgörande för att designa en navigerbar webbapplikation. [10]
En stor del i utformningen av navigering handlar i webbutvecklingssammanhang om länk-ning mellan sidor och placering av funktioner. Enligt Farkas och Farkas [10] finns det flera principer för hur länkar skall hanteras i en webbapplikation och dessa kan i vissa fall vara något motstridiga. Ett sådant exempel är att antigen placera länkar i sin rätta kontext eller högt upp på sidan. Att placera länkar i sin rätta kontext är fördelaktigt då länkarna är till-gängliga där användaren kan tänka sig förvänta sig dem. Att använda sig av principen att placera länkarna högt upp på sidan är förmånligt då användaren inte behöver ”skrolla”9på
applikationen för att hitta en viss länk. Scroll line är ett begrepp Farkas och Farkas använder sig av som syftar på den gräns för vad som syns när sidan först laddas. Vid utveckling av en webbapplikation blir det alltså viktigt att bestämma vilket innehåll som ska placeras över denna gräns och synas först för användarna. En annan fördel med att undvika att använda-ren behöver ”skrolla” är att det blir lättare för användarna att fatta beslut då de kan se flera alternativ samtidigt [13].
Två funktioner som bör finnas på webbapplikationen oavsett var användaren befinner sig är en länk till startsidan och information om var användaren befinner sig för tillfället. Det finns flera anledningar till att en användare vill återgå till startsidan, en av dem kan vara att användaren hamnat fel och vill börja om. Det kan även bero på att användaren slutfört en uppgift och vill påbörja en ny aktivitet eller helt enkelt vill navigera sig till startsidan. För att minimera risken för att en användare hamnar fel på applikationen och behöver återgå till startsidan, kan information om var användaren befinner sig underlätta. Förutom att informe-ra användaren om var den befinner sig kan det även informeinforme-ras om vilka nivåer som finns, från nuvarande sida till startsidan, för att låta användaren återgå till en särskild nivå. [10]
Sökfunktion
Implementation av en sökfunktion i en e-butik erbjuder kunderna ett bekvämt sätt att nå produkter de letar efter och en sådan funktion kan öka webbapplikationens användbarhet – förutsatt att den utformas på rätt sätt. För att en sökfunktion ska vara effektiv att använda bör den ha en framträdande placering på hemsidan och även vara enkel att använda [11]. Nudelman [21] skriver att sökfunktionen bör placeras högst upp på sidan för att den ska vara enkel att hitta.
Nudelman framhåller även vikten av designen av den sida som användaren dirigeras vidare till i det fall då sökningen inte ger några resultat. När en sådan sökning görs bör det, till att börja med, framgå att själva sökningen faktiskt har genomförts men att den inte gav några resultat. Det bör även finnas ett tydligt sätt för användaren att gå vidare eller gå tillbaka för att hjälpa denne i sökprocessen. Utöver detta kan även olika matchningsstrategier imple-menteras, där till exempel vanliga felstavningar fångas upp och där användaren inte behöver söka på hela ord utan att det räcker med delar av dem. [21]
Ytterligare en förbättring som kan genomföras i sökfunktionen kan vara att låta användaren filtrera på kategorier med hjälp av en en meny. Genom att göra detta förbättras användarupp-levelsen av sökfunktionen då antalet irrelevanta sökresultat minskar. [22]
2.3.2 Placering av information
Var informationen placeras på webbapplikationen är viktigt för att användaren ska ta till sig vad applikationen vill förmedla. Om användaren inte hittar vad den söker inom rimlig tid eller överhuvudtaget är det vanligt att denne lämnar hemsidan för att fortsätta någon annanstans. Därför är det också viktigt att syftet med hemsidan framgår tydligt, framförallt på förstasidan. Sidorna på webbapplikationen ska vara välorganiserade med lagom mycket text disponerad på ett följsamt sätt. [23]
Hur informationen placeras bör anpassas efter hur en användare läser av en sida för att ta till sig information. Detta har undersökts med hjälp av ögonspårning som resulterat i F-modellen. Vidare förklaras att namnet kommer från det generella mönstret användare följer när de undersöker en sida. Först horisontellt längst upp på sidan, sedan horisontellt en bit längre ner och sist vertikalt till vänster på sidan. Samma undersökning visar också att det är få användare som läser all text noggrant och att det i stället är mer vanligt att de gör en över-gripande läsning av texten. Resultatet visar att det därför är viktigt att ha den mest relevanta informationen överst på sidan samt i rubriken. I utförligare texter måste det viktigaste finnas tidigt i texten. [24]
2.3.3 Design av användargränssnitt
Designen av en webbapplikation är essentiellt för en användares första intryck, som fås direkt när denne besöker applikationen. Detta intryck tar användaren sedan med sig genom hela upplevelsen på hemsidan, då det sällan revideras och påverkar hur användaren agerar under hela besöket. [25]
Det finns många undersökningar kring hur en design bör se ut, men generellt handlar det om att använda enkla färger och utformningar, samt typsnitt som inte stör den övriga upp-levelsen. Utformningen av funktionalitet och design ska vara konsekvent, bara variera när det krävs och skapa en helhet för användaren oavsett var denne rör sig i applikationen [11]. Enligt Farkas och Farkas [10] ska den underliggande strukturen avspeglas i designen för att hjälpa användaren att förstå var den är och vart den vill gå vidare. De menar att vid utform-ning av strukturen är det önskvärt att skapa en hierarkisk struktur, eftersom människan är van vid att organisera på detta sättet och kan därför lättare få en idé om hur applikationen är uppbyggd. Dock kan djupa hierarkier leda till förvirring. Som ett alternativ till djupa hierarkier kan i dessa fall en bredare hierarki implementeras som gör det möjligt att röra sig i sidledes i strukturen. Mer specifika grundprinciper finns till exempel för design av länkar och längre listor. Genom att använda sig av en design som redan är bekant för användaren minskar risken för missförstånd vilket gör att navigerbarheten ökar.
Det upplevs även positivt och tydligt om länkar är grafiskt utformade, såsom knappar eller varukorgen. Detta kan också användas för att skapa en helhet där grafik känns igen på fler ställen i applikationen. Vid utformning av längre listor skall vågräta linjer undvikas eftersom dessa kan resultera i att användaren upplever sig vara längst ner i listan, något som kan leda till att användaren missar innehåll. [10]
2.3.4 Travel path
Travel path är en konsuments väg från det att ett behov uppstår till att målet med besöket har uppnåtts. De steg konsumenten genomgår enligt en rapport från KPMG är Awareness, Consideration, Conversion och Evaluation [26]. Det andra och det tredje steget är de viktigaste för webbapplikationen. I steget Consideration utför konsumenten en undersökning av själva produkten och var den går att köpa. KPMG:s undersökning visar att den vanligaste metoden för en sådan undersökning är online. Den visar också att det näst viktigaste för att avgöra var onlineköpet ska genomföras, efter priset, är hemsidan. [26]
Conversion handlar om när konsumenten fattar beslutet om var och när köpet ska genomfö-ras. För att ytterligare beskriva detta steg finns en modell Conversion efficiency som delar upp steget i 5 nivåer: medvetenhets-, attraktivitets-, kontakts-, konverterings- och bibehållandef-fektivitet. Första nivån handlar om att konvertera spontana internetsurfare till medvetna. Andra nivån handlar om att konvertera de medvetna internetsurfarna till sidträffar och nivå tre om att dessa besökare ska bli aktiva besökare som navigerar runt på sidan. Vid den fjärde nivån går de aktiva besökarna från undersökning av sidan till ett köp. Den sista nivån är att kunderna fortsätter att handla från webbapplikationen regelbundet. Hur många som kon-verteras från en nivå till en annan benämns som effektivitet och beräknas som förhållandet mellan dessa nivåer. [27]
För att få ett högt förhållande på sin effektivitet mellan nivåerna, och därmed öka chansen för att behålla potentiella kunder på webbapplikationen, finns det flertalet riktlinjer för hur sidan ska utformas. Många lämnar webbsidan om de inte hittar vad de letar efter och därför är sök- och navigeringsfunktioner av stor betydelse. Det kan därför vara bra att erbjuda an-vändarna olika navigationsmöjligheter för att tillfredsställa så många olika användare som möjligt [23]. När konsumenten har slutfört sin handling på webbapplikationen och gått vida-re till köp måste knappen vidavida-re till kundvagnen vara tydlig med att den leder vidavida-re mot ett avslut för att inte förvirra [28]. Väl i kundvagnen ska valda produkter visas tydligt och det ska även vara möjligt att enkelt ta bort produkter samt att korrigera antalet exemplar av varje produkt [23]. När konsumenten sedan ska genomföra betalningen har det visats att många betalningsalternativ är önskvärt [11]. Det upplevs som störande att behöva göra en inlogg-ning när användaren ska genomföra sitt köp och detta bör därför undvikas eller utformas på ett sådant sätt att det inte är ett hinder för att genomföra köpet. När köpet väl är genomfört är det viktigt att kunden får en tydlig orderbekräftelse och att den innehåller all väsentlig information gällande köpet [23].
2.4 Metodteori
I detta avsnitt beskrivs teorin kring de metoder som är relevanta för utformningen av web-bapplikationen. Metoderna som tas upp är användarcentrerad utveckling, prototyp samt de olika typer av tester som använts.
2.4.1 Användarcentrerad utveckling
Användarcentrerad utveckling handlar om att förstå de användare som webbapplikationen riktar sig mot och utforma en applikation utefter det. En utmaning kring användarcentrerad
utveckling är därmed att olika användare har olika behov och utgångspunkter, vilket gör det svårt att utforma en webbapplikation som är anpassad för alla [29]. Ytterligare en svå-righet ligger i att som webbutvecklare skapa en applikation som har användarperspektivet i fokus, detta eftersom webbutvecklarens utgångspunkt ofta ser helt annorlunda ut än för användaren. För att kunna utforma en webbapplikation med hög användbarhet för UF-företagen utifrån frågeställningen krävs det därför en god insikt i hur UF-UF-företagen upplever och använder applikationen, vilket motiverar valet av användarcentrerad utveckling [9]. Utvärdering av webbapplikationen där faktorer så som användbarhet utvärderas bör även ske tidigt i implementeringen för att ytterligare kunna förbättra användarupplevelsen [30]. Några aspekter att ha i åtanke är bland annat att använda sig av komponenter som är bekanta för användaren av webbapplikationen sedan tidigare, både när det gäller informa-tionsinnehåll och grafisk design. Att till exempel använda ovanliga symboler i designen av webbapplikationen är något som kräver att användaren tar sig tid att förstå dessa för att kunna använda applikationen. Om detta är alltför tidskrävande kan det i slutändan leda till att användaren väljer att lämna sidan. Genom att använda komponenter som användaren känner till sedan tidigare kan denne använda och navigera sig på hemsidan mer effektivt. Förutom att använda sig av kända symboler är samspelet mellan bilder, text och övriga vi-suella komponenter i webbapplikationen en del av användarens upplevelse. Detta är därför viktigt att ha i åtanke vid utveckling av webbapplikationen. Om denna inte är genomarbetad med den tänkta användaren i fokus riskerar den grafiska utformningen att skapa förvirring hos användaren. [9]
Människor saknar även förmågan att ta in stora mängder av information samtidigt, vilket in-nebär att den information som ska finnas med i webbapplikationen bör vara väldisponerad. Mindre mängder information medför att användaren kan ta snabbare beslut och underlättar därmed i användandet av webbapplikationen. Var informationen placeras bör avgöras av dess vikt; viktig information för användaren ska ha en central och tydlig placering på hem-sidan för att den ska vara enkel att hitta. Liknande komponenter och information kan även placeras på samma plats för att underlätta ytterligare för användaren. [9]
2.4.2 Prototyp
För att användartester ska kunna genomföras på ett givande sätt under utvecklingsprocessen av e-marknadsplatsen finns ett stort behov av olika typer av prototyper. En prototyp kan be-skrivas som en testmodell eller ett första utkast av en produkt. Att använda sig av prototyper är ett effektivt sätt att identifiera problem eller utvecklingsmöjligheter i ett tidigt stadium av utvecklingsprocessen. Genom att göra ändringar tidigt i utvecklingen av en produkt sparas både tid och resurser och ofta blir även slutprodukten bättre. [31]
Generellt brukar prototyper delas upp i två huvudsakliga grupper: horisontella och vertikala. De horisontella prototyperna tar hänsyn till ett bredare urval av funktioner, men går inte in på djupet av hur de fungerar. De vertikala fungerar på motsatt sätt. En horisontell prototyp brukar vara en bra start då den ger en god överblick och enkelt kan förmedla konceptet av idén. Allteftersom projektet fortskrider blir det dock enklare att göra vertikala prototyper. Dessa underlättar beslutsfattandet vid frågor som går in på detaljer över en funktion. [31]
2.4.3 Tester
För att på ett effektivt sätt inkludera användarnas åsikter i utvecklingen av ett projekt samt utvärdera resultatet, är det av betydelse att formulera olika former av tester och enkäter på bästa möjliga sätt.
Enkätteori
Enkäter är ett effektivt sätt att samla in information från olika personer på ett standardiserat och systematiskt sätt. Genom att ställa samma frågor till en grupp individer fås en över-gripande bild över gruppens åsikter. Det som är fördelaktigt med använda enkäter är att frågorna besvaras av de faktiska användarna [32]. Ett exempel på detta är vad UF-företag anser vara den smidigaste försäljningskanalen.
När en enkät utformas är det viktigt att fundera kring vilka metoder som väljs för att nå önskat resultat. Ett moment är att bestämma vilken kanal som ska användas för utskick av enkäten. Det är av vikt att kanalen är väl vald i förhållande till målgruppen för att få en så hög svarsfrekvens som möjligt. Vilka frågor som ska ställas bör också påverka valet av kanal. Exempelvis är det enklare med ett personligt möte eller ett samtal över telefon när det kommer till djupare frågor som kräver mer en ett binärt svar. Generellt bör en stor andel av resurserna läggas på att formulera frågorna. Det är bättre att vara säker på att rätt frågor ställs från början, än att allt eftersom inse att de inskickade svaren inte kan användas då frågorna inte är tillräckligt genomarbetade. [32]
Vid framställning av vilka frågor som ska ingå i en enkät med svarsalternativ finns det vissa riktlinjer som bör följas. Dessa kan sammanfattas i punktform: [32]
• Lägg frågorna i en logisk ordning
• Använd mycket tomt utrymme för ökad tydlighet • Ge instruktioner om hur enkäten ska besvaras
• Använd en tillräckligt stor textstorlek och en lättläst typsnitt
• Använd olika typer av textstorlek för att tydliggöra vad som är frågor och vad som är svarsalternativ
När det kommer till online-enkäter är det viktigt att beakta det faktum att representationen från olika grupper av individer varierar. Det är en risk att svar endast kommer från personer som är aktiva i de forum där enkäten är tillgänglig. Detta behöver inte nödvändigtvis vara något negativt då det kan vara ett effektivt sätt att nå den tänka målgruppen. Risken kvarstår dock att svarsfrekvensen är hög från ett mindre segment av befolkningen vilket snedvrider resultaten. [33]
För att minska risken för eventuella feltolkningar av enkätfrågorna, kan ett test utföras på en mindre testgrupp. På det sättet kan frågor revideras innan de används och på så sätt minska antalet missuppfattningar, vilket skulle göra datan oanvändbar. [32]
Användartester
För att kunna utvärdera användbarheten och navigerbarheten för en webbapplikation krävs en metod för detta. Användartester är ett hjälpmedel för att ta reda på om applikationen fungerar som den ska och vad som behöver utvecklas framöver. [34]
Genomförandet av dessa tester är något som bör ske ofta i utvecklingsprocessen av en webbapplikation. Det är vanligt att större fokus läggs på en applikations prestanda än an-vändbarheten då det är enklare och billigare att testa. Detta är dock felaktigt då användarens perspektiv delvis försummas. Vidare är det väldigt viktigt att redan tidigt under utveck-lingen arbeta med användartester, vilket exemplifieras genom att det är bättre att testa en användare i början av ett projekt än femtio i slutet. [35]
Vid utformningen av användartester är det viktigt att de genomförs likartat för alla och att det som mäts är relevant för syftet med användartestet. Ibland finns det fördelar med att utforma mer komplicerade uppgifter, men oftast innebär användartester att slutföra relativt simpla uppgifter där resultaten enkelt kan mätas och jämföras. [34]
Exempel på några användartester är [34]x: • Tiden att slutföra en uppgift
• Antal fel på en uppgift
• Antal användare som gör fel på en specifik uppgift • Antal navigationer för att slutföra en uppgift
• Antal användare som lyckas slutföra en specifik uppgift
När testerna ska utföras finns det två viktiga faktorer att ta hänsyn till: vilka som blir valda som testpersoner och i vilken omgivning testerna ska ske. När det kommer till att välja testpersoner är det viktigt att de representerar målgruppen samtidigt som testgruppen inte blir alltför homogen. Testerna bör därefter ske i samma omgivning för alla utan störnings-moment, detta då det annars kan påverka resultaten sådana att de inte skildrar verkligheten lika bra. [34]
Enligt undersökningar räcker det med en grupp på fem testpersoner för att upptäcka ungefär 80% av alla användbarhetsproblem. I vissa fall finns en önskan att nå en högre procentsats och då krävs fler testpersoner. Detta är dock en fråga om hur värdefullt det anses vara att nå en en högre procentsats i förhållande till hur mycket det kostar. Denna avvägning måste utvecklarna av webbapplikation själva stå för. En vanlig avvägning är just att använda en grupp på fem personer. Det bör dock tilläggas att dessa 80% vid en testgrupp på fem personer är ett ungefärligt medelvärde vid flertalet undersökningar. Det finns ingen garanti på att det i varje enskilt fall garanteras ett resultat på 80%. Vilka fel som identifieras kan variera och de som exponeras behöver nödvändigtvis inte vara de mest akuta eller allvarliga. Detta innebär sammantaget att det finns en viss osäkerhet kring resultatet från användartester. Genom att ofta upprepa användartester under utvecklingsprocessen minskar däremot risken markant för att ett allvarligt fel ska förbli oidentifierat under utvecklingen. [36]
Heuristisk utvärdering
Heuristisk utvärdering är en typ av användartest som kan användas i utvecklingen av en webbapplikation. Syftet är att upptäcka problem med användbarheten gällande använ-dargränssnittet parallellt med utvecklingen. Utvärderingen sker genom att låta en mindre testgrupp studera användargränssnittet och avgöra om det är utformat enligt vissa principer, så kallade heuristiker. Därefter rankar testgruppen de olika principerna enligt en skala. [37] Det är svårt för en person att ensam genomföra en heuristisk utvärdering eftersom denne omöjligt kan hitta alla problem i ett användargränssnitt. Enligt en undersökning identifierar endast en testperson ungefär 35% av felen. Som tidigare nämnt i avsnitt 2.4.3 behövs det endast fem personer för att identifiera ungefär 80% av felen och är ofta den storlek på test-grupper företag använder sig av då det optimerar nyttokurvan10. [38]
De tio heuristikerna, som är skapade av Jacob Nielsen [39], är:
• Systemet ska hålla användaren informerad om vad som händer genom lämplig infor-mation.
• Systemet ska kommunicera med användaren på ett sätt som användaren förstår, istället för systemorienterade termer.
• Då användare ofta klickar på fel ställe är det viktigt för användaren att enkelt kunna gå tillbaka utan att behöva gå igenom flera steg.
• Som användare ska du inte behöva fundera över om olika ord, situationer eller alterna-tiv innebär samma sak.
• Förebygg att användaren gör fel.
• Minimera mängden information som användaren behöver komma ihåg. Gör informa-tion synlig under flera steg av en process för att underlätta för användaren.
• Gör hemsidan effektiv att använda för både erfarna och oerfarna användare. Integrera funktioner som gör att en tekniskt erfaren användare kan använda hemsidan ännu mer effektivt.
• Använd en minimalistisk design som inte innehåller onödig eller ej önskvärd informa-tion.
• Felmeddelanden ska användas på ett sätt så de hjälper användaren förstå vad som gick fel och hur det kan göras rätt nästa gång.
• Även om hemsidan helst ska kunna användas utan någon hjälp, bör hjälp finnas till-gängligt på ett enkelt sätt. Det ska vara utformat på ett sådant sätt att användaren snabbt kan få hjälp med precis det som behövs.
Genom att utforma ett test där dessa heuristiker kontrolleras fås en övergripande bild över hur användbar webbapplikation anses vara av testdeltagarna. Genom att kontinuerligt ge-nomföra heuristisk utvärdering under utvecklingsprocessen erhålls betydelsefull och an-vändbar information om hur utveckling ska styras framöver. [40]
3
Metod
I detta kapitel beskrivs tillvägagångssättet innan och under utvecklingen av webbapplika-tionen. Utvecklingen har skett enligt ett agilt arbetssätt och delades upp i en förstudiefas samt tre implementationsiterationer. Efter varje iteration genomfördes användartester för att få återkoppling på applikationens användbarhet och navigerbarhet. Avsnitt som beskrivs i detta kapitel är förstudie samt implementation.
3.1 Förstudie
I förstudiefasen lades grunden till arbetet genom att planera arbetet noggrant. Teoretiska såväl som praktiska riktlinjer sattes för att underlätta arbetet. En undersökning avseende be-hovet av affärsidéen genomfördes såväl som skapandet av en marknadsanalys och prototyp.
3.1.1 Marknadsanalys
För att kunna avgöra om affärsidéen uppfyllde ett behov hos potentiella kunder genomför-des en enkätundersökning. Efter omfattande diskussioner, utgående från enkätteorin enligt avsnitt 2.4.3, kring vilka frågor som skulle ingå i enkätundersökningen, blev det totalt sex frågor med flersvarsalternativ (se bilaga A). Enkäten utformades på ett sätt som skulle göra den enkel och snabb att fylla i. Enkäten delades in i två delar där en del låg på att undersöka om UF-företag kunde tänka sig använda webbapplikationen och det andra området låg på kunderna som i slutändan skulle handla genom applikationen.
De första tre frågorna gick ut på att undersöka huruvida en efterfrågan finns för applika-tionen, hur nuvarande köp genomfördes med UF-företag och om enkätsbesvararen hade haft ett eget UF-företag. Tanken bakom dessa frågor var att alla skulle kunna besvara dem, oavsett om de hade haft ett företag eller inte. De tre följande frågorna riktade sig enbart till personer som har eller hade ett UF-företag. Det som undersöktes i dessa frågor var vilken typ av produkt företaget sålde, hur köpet genomfördes och även undersöka nöjdheten kring hur köpet genomfördes. Alla frågor hade tydliga alternativ såsom Ja/Nej/Kanske och ett extra alternativ där övriga kommentarer kunde fyllas i om besvararen inte kände att de erbjudna alternativen var tillräckliga. Målsättningen med enkätens utformning var att få så
många svar som möjligt, från båda typer av intressenter, samt göra det på ett tidseffektivt sätt. Enkäten skapades med hjälp av Google Forms för att enkelt kunna exportera svaren och analysera dem. Enkäten spreds via flera kanaler såsom sociala medier och mejl, främst till andra universitetsstudenter, men även gymnasiestudenter på flera orter i landet för att få en bred spridning av svar. Det valdes att inte kategorisera svaren efter kön då det drogs en slutsats att svaren på frågorna i undersökningen inte skulle påverkas av detta. Anledningen var att det inte ansågs vara relevant för hur svaren skulle tolkas. Fullständig information från enkätsvaren kan ses i bilaga A.
3.1.2 Prototyp
Funktionerna som webbapplikationen ansågs skulle kunna hantera togs fram genom att alla idéer kring dessa skrevs ner. Idéerna formulerades som user stories, vilket är en kort text på maximalt ett par meningar som beskriver en funktionalitet på formen ”Som en <typ av användare>, vill jag kunna <mål> så att <någon anledning> [41]. Exempel på detta är ”Som en UF-företagare vill jag kunna ha plats för mitt företags logga på hemsidan så att potentiella köpare ser den”. Samtliga idéer sammanställdes i en tabell, en så kallad produkt-backlogg. Efter detta rangordnades idéerna i tre grupper: hög prioritet, medel prioritet samt låg prioritet. Val av prioriteringsgrad bestämdes efter hur relevanta idéerna ansågs vara för webbapplikationen. De idéer som inte var relevanta togs bort varpå 31 konkreta funktioner kvarstod i en slutgiltig produktbacklogg (se bilaga E).
Utifrån den idé som låg till grund för webbapplikationen, produktbackloggen samt svaren från marknadsanalysen togs en prototyp fram för att ge en visuell bild av hur applikationen kunde se ut. Prototypen gjordes med frågeställningen i åtanke, där syftet var att konkretisera visionen för applikationen. Denna kom sedan att ligga till grund för den implementerade designen.
3.2 Implementation
Utvecklingen av projektet skedde i tre iterationer med ett resultat från varje iteration. Hur arbetet mot slutresultatet av webbapplikationen skedde, vilka beslut om design och vilka programmeringsverktyg som användes presenteras nedan. Även hur iterationernas resultat bedömdes utifrån syfte och frågeställning tas upp.
3.2.1 Arbetsmetod
Under hela utvecklingen har ett agilt arbetssätt tillämpats. Tanken bakom detta var att arbe-tetsprocessen skulle vara så användarcentrerad som möjligt (se avsnitt 2.4.1).
Utveckling av webbapplikationen var orienterad kring hur användarna uppfattar applika-tionen. För att säkerställa att varje implementeringsfas var användarcentrerad genomfördes noggrant utformade användartester i syfte med att se hur utomstående personer faktiskt upplevde applikationen. För att säkerställa kvalitet användes beprövade metoder för an-vändartesterna i form av heuristsik utvärdering. Vid utveckling av en webbapplikation är objektiva åsikter att föredra för att applikationen ska vara navigerbar och ha hög användbar-het för så många användare som möjligt (se avsnitt 2.4.3).
Efter att dessa tester genomförts sammanställdes svaren för att sedan analyseras. Justering-ar delades in i funktionalitet och design. Efter att samtliga ändringJustering-ar implementerats fick testpersonen som tidigare deltog i användartestet se ändringarna och ge en sista åsikt. Detta för att säkerställa att testdeltagarens feedback uppfattats korrekt. Efter dessa förändringar
färdigställts implementerades de övriga målen inom den nästkommande fasen för att mynna ut i nästa användartest.
Att genomföra användartester efter varje implementeringsfas lämpar sig mot en agil arbets-metod då ändringar kan ske kontinuerligt och planeringen är flexibel.
3.2.2 Design
För att applikationen skulle kunna förmedla en god användarupplevelse för UF-företagen samt deras köpare, lades stor vikt vid att designen av applikationen skulle vara välarbe-tad. Mycket av designen utgick från prototypen som togs fram under förstudiefasen samt produktbackloggen. Applikationens utformning skedde genom att informationen på sidan placerades enligt F-modellen (se avsnitt 2.3.2).
Riktlinjen under utvecklingsfasen var att diskutera designen innan det skrevs i kod för att säkerställa att applikationen utformades efter lättnavigerbarhet och användbarhet till högsta grad. Detta gjordes genom att kontinuerligt hålla i mindre möten där både tidigare utförda och kommande arbeten diskuterades.
För placering av knappar och liknande funktioner utvecklades applikationen efter att försö-ka hålla en bra länkningsstuktur samt att funktionerna skulle hålla de rekommendationer som tas upp i teorin (se avsnitt 2.3.1). Sidans användargränssnitt valdes att hållas enkel och subtil för att underlätta att UF-företagen kunde ta till sig applikationen som deras plattform. Dessutom fick applikationen ett gemensamt typsnitt på all text samt gränssnittet hölls kon-sekvent i den mån som gick. Applikationens struktur var hierarkisk men hade inte några djupa hierarkier. Detta eftersom webbapplikationen ska vara lättnavigerad samt underlätta för kunden att identifiera var denne befinner sig (se avsnitt 2.3.3).
För att underlätta vägen till köp, och därmed öka användbarheten, valdes att hålla en kort Travel path. För att bekvämt kunna hitta produkter samt UF-företag på applikationen som kund lades det till en sökfunktion på applikationens förstasida. Applikationen utformades på ett sådant sätt att den hade en kort laddningstid för att hålla hög användbarhet (se avsnitt 2.2).
3.2.3 Front-end
Som verktyg inom front-end användes HTML, JavaScript, Bootstrap och CSS.
HTML användes för att bygga upp de olika sidorna från grunden. För att designen och innehållet på sidan skulle visas på ett användbart och visuellt tilltalande sätt användes CSS. JavaScript användes i front-end för att konstruera logiken bakom vad som visades för an-vändaren på webbapplikationen, alltså göra sidan mer användarvänlig.
Bootstrap är ett hjälpverktyg som bygger på CSS, HTML och JavaScript och användes för att implementera vissa komponenter av front-end. Verktyget användes till exempel för att skapa navigeringsmenyn högst upp på sidan, men även för att utveckla webbapplikationen responsivt. I Bootstrap finns inbyggda klasser som gör att applikationen anpassas till olika skärmstorlekar såsom smartphones, surfplattor och datorer för att ge ett enhetligt utseende oavsett vilken typ av enhet som används.
3.2.4 Back-end
Python och SQL användes frekvent, bland annat för att hantera databasen, se nedan. Som ett komplement till Python användes mikroramverket Flask. Flask är baserat på Werkzeug och Jinja2.
3.2.5 Databas
Databasen för webbapplikationen utformades i Sqlite3 där hanteringen och funktionaliteten av applikationens databas har konstruerats i Python med hjälp av Flask, Jinja, HTML och SQL. Den data som skickas till databasen lagrar Sqlite3 i en lokal fil på respektive utvecklares dator.
Vid konstruktion av databasen ritades ett ER-diagram, entity relationship diagram, upp för att få en överblick över vilken data som kommer behövas lagras. Utifrån det ER-diagram som togs fram specificerades vilka attribut och integritetsvillkor som bör finnas under respektive tabell, samt vilka relationer som bör finnas mellan tabellerna. Det ER-diagram som användes utvecklades och ändrades med tiden för att kunna hantera webbapplikationen.
3.3 Utvärdering
Inför varje ny implementationsfas utfördes användartester där applikationens användbarhet och lättnavigerbarhet testades. Detta gjordes genom att flertalet personer fick ge sin uppfatt-ning av webbapplikationen. Testpersonen fick svara på flertalet frågor under utvärderingen och svaren från hur applikationen upplevdes togs med till nästkommande implementations-fas för att kunna vidareutveckla applikationen.
För att säkerställa att testgruppen inte blev för homogen valdes personer utifrån kön, ålder och erfarenhet från Ung Företagsamhet. Testpersonerna bestod till störst del av studenter på Linköpings universitet och gruppen bestod alltid av minst fem personer. Vid utförandet av testerna lades stor vikt av att uppnå liknande omständigheter för alla testpersoner. Detta för att minimera yttre påverkan eller andra störningsmoment som annars kan färga hur testpersonen upplever sidan. Testpersonerna fick utföra testet i en lugn miljö, oftast i ett avskiljt rum, utan tidsbegränsning. Testerna utfördes genom att testpersonen fick utvärdera webbapplikationen samtidigt som frågor ställdes och uppgiftsbeskrivningar gavs.
Efter första implementationsiterationen fanns inte mycket funktionalitet implementerat utan fokus låg främst på den allmänna strukturen och designen av webbapplikationen. Frågorna anpassades därefter och resulterade i några övergripande frågor (se bilaga F.1).
I det andra användartester lades större fokus på funktionalitet som var relevant för denna iteration. Lättnavigerbarhet samt användbarhet låg i fokus och frågorna utformades därefter (se bilaga F.2).
I det slutgiltiga användartestet skulle webbapplikationen ha all funktionalitet implemen-terad och testet skulle fungera som en utvärdering av webbapplkationen. Då skulle den övergripande navigerbarheten och användbarheten testas genom att låta användaren testa en stor del av applikationens funktionalitet. Här lades fokus på att använda sig av heuristisk utvärdering för att kunna testa resultatet med en beprövad metod. Fokus lades även på att testpersonerna drev eller hade drivit ett UF-företag. Användaren ombeds att utföra olika uppgifter på sidan och ge feedback på samtliga. Det var också viktigt i användartestet att få med hur många klick som krävdes för att utföra olika uppgifter eftersom en lättnavigerad applikation för användare var eftersträvad. Antalet klick antecknades av den som ledde
testpersonen genom användartestet. Laddningstiden för applikationen var relevant eftersom den inte ska påverka upplevelsen genom fördröjning. Testet resulterade i 17 frågor (se bi-lagsavsnitt F.3).
Efter varje användartest sammanställdes svaren för att därefter analyseras och diskuteras. Ändringsförslag som ansågs vara relevanta implementerades för att sedan visas upp för test-deltagaren igen och bekräfta att dennes idé uppfattats korrekt.
4
Resultat
I detta kapitel presenteras resultatet från förstudien, implementationen och utvärderingen av den färdiga applikationen. Resultatet presenteras utifrån framtagna teorier och innehåller inga värderingar eller analyser. Kapitlet belyser resultatet med avseende på användbarhet och navigerbarhet.
4.1 Förstudie
Innan utvecklandet av webbapplikationen påbörjades gjordes en behovsanalys för att un-dersöka intresset av e-marknadsplatsen och en produktbacklogg bestående av user stories togs fram för att identifiera relevant funktionalitet för applikationen. Från produktbacklog-gen skapades sedan även en prototyp för att få en första visuell överblick av applikationen.
4.1.1 Behovsanalys
För att avgöra behovet av den planerade webbapplikationen, en e-marknadsplats för UF-företag, genomfördes en enkätundersökning (se bilaga A). Undersökningen genomfördes bland studenter på Linköpings tekniska högskola och på olika gymnasieskolor för att sam-la in information kring UF-företags försäljning. Av de 170 personer som svarade var det 61 personer som driver eller har drivit ett UF-företag. På frågan ”Om du handlat från ett UF-företag, hur skedde köpet?” svarade 47% fysiskt köp, 41% hade inte handlat från ett UF-företag och endast 2% svarade att de handlat via UF-företagets webbapplikation. Detta visar att den fysiska marknadsplatsen är den mest använda bland kunder.
Vid frågan om det fanns intresse av att köpa UF-produkter via en e-marknadsplats framkom det att 71% av deltagarna var intresserade. Det framkom även att 29% av de som haft eller har UF-företag var missnöjda med hur de sålde sina produkter och att 75% var intresserade av en extern marknadsplats. Detta visar att det finns en efterfrågan av att köpa eller sälja sina produkter på en plattform exklusivt för UF-företag.
4.1.2 Produktbacklogg och Prototyp
I förstudiefasen togs det fram en produktbacklogg (se bilaga E). Efter att applikationen fär-digställts fick samtliga user stories en färg som representerade dess status. Grön innebär att en user storie är fullständigt implementerad, gul innebär delvis implementerad och röd att den ej är implementerad. Resultatet gav 20 grönmarkerade, 3 gulmarkerade samt 8 rödmarkerade. Gruppen har strävat efter att implementera alla user stories under kategorin hög prioritet. Under utvecklingen beslutades det att inte ha någon inloggning för kunder och därför imple-menterades inte U9, U10 samt U17, då samtliga behandlade aspekter kring kundinloggning (se bilaga E). Köpen på webbapplikationen sker alltså utan att kunder behöver registrera sig. Produktbackloggen låg sedan till grund för den horisontella prototyp som även skapades under förstudien.
Prototypen skapades med syftet att ge grundläggande riktlinjer för hur webbapplikationen skulle utformas. En horisontell prototyp tar hänsyn till ett stort urval av funktioner men går inte in på detaljnivå hur de ska fungera. Detta gör att en horisontell prototyp är en bra start samt ger en grundläggande överblick över hur webbapplikationen ska utformas. [31] Prototypen har en relativt enkel design. Längst upp på sidan finns en navigationsmeny med viktiga funktioner. Den innehåller en sökruta, en knapp för att starta en butik, en knapp för att skapa ett användarkonto, en inloggningsknapp samt en knapp som leder till varukorgen. Nedanför navigationsmenyn listas de produkter som finns på webbapplikationen. På det sättet kan användaren enkelt titta på produkter och genomföra ett köp.
Figur 4.1: Första prototypen av webbapplikationen
4.2 Implementation
Nedan presenteras först resultatet av applikationens front-end. Sedan följer resultatet av re-sponsiviteten och applikationens back-end. Till sist presenteras resultaten från de användar-test som har genomförts efter varje sprint. Resultaten är presenterade med ett användbarhet-och navigerbarhetsfokus.
4.2.1 Front-end
Webbapplikationens front-end har tagits fram av utvecklingsteamet där hög användbarhet för UF-företag samt navigerbarhet för alla användare har varit fokus under implementatio-nen.
Webbapplikationen håller en konsekvent lågmäld färgskala med ett fåtal olika nyanser av grått. Funktioner samt knappar har vid behov fått varierande färger som underlättar kom-munikationen till användaren.
Placeringen av information är väsentlig för att hålla kvar användaren på applikationen. På webbapplikationen har de viktigaste funktionerna, som att UF-företag enkelt ska kunna navigera sig till hur de startar en butik, placerats tydligt. Designen är dessutom upplagd för att hålla en generell design som påminner om andra försäljningsplattformar. [23]
För en kort laddningstid valdes att, i de fall det gick, endast läsa in komponenter istället för en hel sida [15]. Dessutom har olika komponenter med samma CSS kombinerats med tillhörande CSS i utomstående filer. JavaScript finns både i HTML-filerna samt egna filer beroende på situation och mängd JavaScript. CSS importeras högst upp i HTML-filerna till skillnad från JavaScript som läses in eller ligger längs ner i HTML-filerna. Detta håller en god kodstruktur samt minimerar laddningstiden [16]. Bildhanteringen sker på sådant sätt att då företag laddar upp bilder sparas de på servern. I databasen sparas tillhörande filnamn som refererar till respektive bild vid inladdning. De bilder som tillhör hemsidans design har valts att sparas som PNG då det är det formatet som vanligtvis rekommenderas [15].
Landningssida och startsida
Det första användaren möts av är en landningssida. Designen är simpel med en bakgrunds-bild på en person som sitter vid en dator. Högst upp på sidan syns Xpandas logga med tillhörande slogan. I nedre delen av landningssidan finns två rutor, en som innehåller Xpandas vision och en som berättar lite mer om gruppen studenter bakom Xpanda och webbapplikationens syfte.
Landningssidan leder sedan till startsidan genom ett klick någonstans på sidan. Det finns dessutom en ”Gå direkt till Xpanda”-knapp längst upp till höger som också leder till startsi-dan. På startsidan finns en navigationsmeny längst upp samt en sidomeny med kategorival på vänster sida som följer F-modellen [17]. I mitten av sidan listas produktkort med de pro-dukter som finns att köpa och längst ned finns en footer med information samt länkar. En mer ingående beskrivning av de olika delarna på sidan finns i efterföljande avsnitt.
