Mobil E-handel med Responsiv design och Mobile First ...

52
Vikanda Nurmi Mobil E-handel med Responsiv design och Mobile First metoden Vikanda Nurmi Examensarbete Film & Television 2015

Transcript of Mobil E-handel med Responsiv design och Mobile First ...

Vikanda Nurmi

Mobil E-handel med Responsiv

design och Mobile First metoden

Vikanda Nurmi

Examensarbete

Film amp Television

2015

EXAMENSARBETE

Arcada

Utbildningsprogram Film och television

Identifikationsnummer 4961

Foumlrfattare Vikanda Nurmi

Arbetets namn Mobil E-handel med Responsiv design och Mobile First me-

toden

Handledare (Arcada) Jutta Toumlrnqvist

Uppdragsgivare

Sammandrag

Syftet med mitt examensarbete aumlr att forska i att utveckla och foumlrbaumlttra anvaumlndarupple-

velser i e-handel foumlr mobiler samt beskriva Repsonsiv Design och Mobile first metoden

Att bygga mobil e-handel aumlr inte likadan process som att bygga vilken webbplats som

helst Det finns otaliga saker man boumlr beakta och veta innan man kan paringboumlrja arbetet

Det gaumlller att saumllja produkter och faring anvaumlndarna intresserade av att bli kund

I mitt examensarbete anvaumlnder jag fallstudie som forskningsmetod En fallstudie garingr ut

paring loumlsa ett fall med hjaumllp av forskningar och undersoumlkningar Med mina kunskaper inom

webbutvecklingen kommer jag att vidareutveckla 909jp elektronisk moumlbelaffaumlren med

hjaumllp av kaumlllor och de kritiska punkter som hittas under forskningen Den utvecklade

909jp webbplatsen foumlr mobiler kommer inte att anvaumlndas paring riktigt utan detta arbete aumlr

ett experiment foumlr forskningsaumlndamaringl

Arbetet kommer inte att garing in paring kodning och den tekniska delen Jag kommer att enbart

fokusera mig paring designens utveckling foumlr mobila e-handlar Som kaumlllor anvaumlnds referen-

ser faktatext facklitteraturer och figurer foumlr att tydliggoumlra inneharingllet

Slutligen kommer jag med hjaumllp av forskningen att jaumlmfoumlra och analysera den utvecklade

designen med den gamla designen

Nyckelord Mobil e-handel Mobile First Responsive design

Sidantal 51

Spraringk Svenska

Datum foumlr godkaumlnnande

DEGREE THESIS

Arcada

Degree Programme Film och television

Identification number 4961

Author Vikanda Nurmi

Title Mobile E-commerce with Responsiv design and Mobile

First method

Supervisor (Arcada) Jutta Toumlrnqvist

Commissioned by

Abstract

The aim of this thesis is to research how to develop and improve user experience in e-

commerce for mobiles and to describe about Responsive Design and the Mobile First

method To build mobile e-commerce is not the same as building any website There are

hundreds of things that should be considered and know before the work can begin It is all

about selling products and getting consumers to be interested in becoming members of your

e-commerce site

In my thesis I use the case study as a research method The case study is based on solving

a case with the help of research and investigation With my knowledge of web develop-

ment I will further develop 909jp online furniture store with the help of sources and the

critical points found during the research The developed 909jp website for mobiles will

not be used for real This case study will be an experiment for research purposes Sources

used in this thesis are references factual text technical literature and figures to clarify the

content

In the research will not include advanced coding and the technical part I will mainly focus

on the design development of mobile e-commerce

At last I will with the help of my research compare and analyse the developed design with

the old design

Keywords Mobil e-handel Mobile First Responsive design

Number of pages 51

Language Swedish

Date of acceptance

OPINNAumlYTE

Arcada

Koulutusohjelma Film och television

Tunnistenumero 4961

Tekijauml Vikanda Nurmi

Tyoumln nimi Mobiili verkkokauppa Responsive Design ja Mobile First

menetelmillauml

Tyoumln ohjaaja (Arcada) Jutta Toumlrnqvist

Toimeksiantaja

Tiivistelmauml

Opintonaumlytetyoumln tavoitteena on tutkia miten kehittaumlauml ja parantaa kaumlyttaumljaumln kokemuksia

verkkokaupan mobiiliversiossa ja kuvailla kaumlsitteet Responsive design ja Mobile first me-

netelmauml Verkkokaupan rakentaminen mobiilia varten ei ole sama kuin rakentaa muita ta-

vallisia verkkosivuja On paljon asioita joita pitaumlisi harkita ja tietaumlauml ja ottaa huomioon

ennen kuin voi aloittaa rakentamisen Tavoitteena on tuotteiden myynti mutta myoumls kaumlyt-

taumljien rekisteroumlityminen asiakkaiksi

Opinnaumlytetyoumlssaumlni kaumlytaumln tapaustutkimusta tutkimusmenetelmaumlnauml Tapaustutkimus pe-

rustuu esimerkkitapauksen ratkaisemiseen tutkimuksen avulla Nettikehityksestauml keraumlauml-

mieni tietojen avulla kehitaumln edelleen konkreettista nettikauppaa Tulen kehittaumlmaumlaumln

909jp huonekaluliikkeen mobiililaitteille tarkoitettua nettikauppaa tutkimuksessa esille-

tulleilla laumlhdetietojen ja kriittisten kohtien avulla Kehittaumlmaumlaumlni uutta graafista ilmettauml

909jp verkkosivujen mobiiliinversioon ei kaumlytetauml kaumlytaumlnnoumlssauml taumlmauml tapaustutkimus teh-

daumlaumln ainoastaan opinnaumlytetyoumltaumlni varten

Tyoumlssaumlni en kaumlsittele koodausta ja teknistauml osa-aluetta Tulen ainoastaan keskittymaumlaumln

graafisen suunnittelun kehityksestauml mobiiliissa verkkokaupassa Laumlhteinauml kaumlytetaumlaumln viit-

tauksia faktateksteihin tietokirjallisuuteen ja kuviin jotka auttavat selventaumlmaumlaumln sisaumlltoumlauml

Lopuksi tulen tutkimustietojen avulla analysoimaan ja vertailemaan kehittaumlmaumlni ja suun-

nittelemani esimerkkisivustoa vanhaan sivustoon

Avainsanat Mobil e-handel Mobile First Responsive design

Sivumaumlaumlrauml 51

Kieli Ruotsi

Hyvaumlksymispaumlivaumlmaumlaumlrauml

INNEHAringLL

1 INLEDNING 8

11 Motiv foumlr aumlmnesvalet 8

12 Syfte 8

13 Avgraumlnsningar 9

14 Metod 9

15 Begrepp 10

2 VAD AumlR E-HANDEL 11

21 Mobil e-handel 11

22 Varfoumlr handla med mobil 12

23 Antalet kop okar pa mobilen 13

24 Bra mobila e-handel webbplatser 16

25 Kritiska punkterna foumlr bra mobil design paring e-handel 19

3 MOBILANPASSADE LOumlSNINGAR 25

31 Adaptiv design 25

32 Responsiv design 26

33 Varfoumlr Responsiv design 27

4 VAD AumlR MOBILE FIRST 31

41 Varfoumlr Mobile first 32

5 909jp 37

6 ANALYS AV DEN NYA DESIGNEN 38

7 SAMMANFATTNING 48

BOumlCKER 50

ELEKTRONISKA Kaumlllor 50

Figurer

Figur 21 Viktigaste skaumllet att naumlthandel sparar tid 13

Figur 22 Antal oumlkar paring mobilen 14

Figur 23Varfoumlr handlade du med smarttelefon 14

Figur 24 Mobilt handlar vi mer av naumlstan allt 15

Figur 25 Hemsida paring rakutencom foumlr mobiler 17

Figur 26 Hemsida paring amazoncom foumlr mobiler 18

Figur 27 Jaumlmfoumlrelse mellan en bra och daringlig navigation httpconversionxlcommake-

mobile-convert 20

Figur 28 Produktsida paring amazoncom 22

Figur 29 Produktsida paring amazoncom 23

Figur 210 Produktsida paring amazoncom About this item 23

Figur 31 Ett exempel paring Grid system av 5 olika skaumlrmstorlekar (Phil Swan 2014) 27

Figur 32 Resolutions referenser paring olika enheter 30

Figur 41 Mobile First att bygga webbsidan fraringn den minsta skaumlrmen till den stoumlrsta

skaumlrmen 31

Figur 42 Hemsidan paring Tokyo Skytree paring stationaumlr datorskaumlrm 33

Figur 43 Hemsidan foumlr Tokyo Skytree Foumlrsta bilden visar hur det ser ut normalt Andra

bilden visar naumlr man zoomar in 34

Figure 44 Hemsidan paring Tokyo Skytree paring japanska 35

Figur 45 Mobil sidan paring Tokyo Skytree paring japanska 36

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger) 38

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp 39

Figur 63 Soumlkfunktionen paring den nya designen 909jp 39

Figur 64 Gamla designen 40

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny 41

Figur 66 Kategorier paring den gamla design (till vaumlnster) Kategorier paring den nya design (till

houmlger) 42

Figur 67 Tidigare produktsida (till vaumlnster) Nya produktsida (till houmlger) 43

Figur 68 Inforutan som dyker upp 44

Figur 69 Produktsida av tabbar 45

Figur 610 View more 46

Figur 611 Stol kategori Show all 47

8

1 INLEDNING

11 Motiv foumlr aumlmnesvalet

Som Online Media studerande har jag alltid gillat att designa webbsidor Jag har alltid

varit intresserad av den haumlr inriktningen Ju mer man studerar desto mer vill man laumlra sig

Det att jag tycker om att designa webbsidor var inte enda orsaken till att jag valde mitt

aumlmne foumlr examensarbete Jag har alltid varit intresserad i elektronisk handel Hur faringr man

kunder att koumlpa sina produktertjaumlnster utan en fysisk saumlljare Hur marknadsfoumlr man och

hur naringr man baumlst kunderna daring foumlretaget med e-handel kan vara allt fraringn klaumldbutiker flyg-

bolag eller moumlbelaffaumlrer

Som webbdesigner har jag som uppgift att hjaumllpa kunderna att marknadsfoumlra deras foumlretag

eller produkter via webben Som aumlmne foumlr examensarbetet har jag valt att goumlra en fallstu-

die daumlr jag foumlrbaumlttrar den tidigare 909jp webbplatsen med hjaumllp av min forskning

Som bakgrund har jag kunskaper i webbdesign vilket jag kan anvaumlnda som verktyg En

bra webbplats maringste vara grafiskt attraktiv foumlr anvaumlndaren Med hjaumllp av det grafiska

maringste en bra webbplats daumlrmed lyckas leverera den information som anvaumlndarna aumlr ute

efter Det maringste vara laumltt att navigera runt sidorna samt hitta snabbt informationen an-

vaumlndarna vill naring Sidan maringste ocksaring kunna laddas ner snabbt aumlven via en laringngsammare

naumltuppkoppling foumlr att tillfredsstaumllla anvaumlndarna En webbplats maringste erbjuda en bra

funktionalitet samt anvaumlndarvaumlnlighet paring mindre skaumlrmar saringsom paring mobiler Som maringl

kommer jag att fokusera mig paring hur man kan utveckla och foumlrbaumlttra en e-handel design

foumlr mobiler

12 Syfte

Syftet med min uppsatts aumlr att laumlra mig att utveckla och foumlrbaumlttra anvaumlndarupplevelser i

e-handel foumlr mobiler Att handla paring naumltet med sin mobil sparar mer tid och maringnga garingnger

kan det vara mycket laumlttare Foumlr att lyckas med att bevisa aringt anvaumlndarna att en tjaumlnst aumlr

trovaumlrdig aumlr det jaumltte viktigt att erbjuda dem en bra och bekvaumlmt plats att handla online

9

Foumlr att lyckas med det maringste man ha en mycket bra design och funktionalitet paring webbsi-

dan I min uppsats kommer jag att fokusera paring design som byggs med Mobile first meto-

den Forskningsfraringgan i mitt examensarbete aumlr rdquoHur kan man baumlst utveckla en e-handel

webbplats foumlr mobilerrdquo

Arbetet skall vara till nytta foumlr webbdesigners och Online Media studerande som inte

tidigare har kunskaper inom e-handel foumlr mobiler och vill foumlrdjupa sig mera i det Arbetet

skall ocksaring vara till nytta foumlr dem som goumlr eller kommer att goumlra ett projekt inom e-han-

deln Det ska hjaumllpa dem oumlka foumlrstaringelse samt stoumlda dem i deras projekt

13 Avgraumlnsningar

I min uppsatts kommer det inte att staring om avancerad html och CSS kodning Jag kommer

fraumlmst att koncentrera mig paring strukturer och layouten och hur man baumlst kan uppnaring den

baumlsta anvaumlndarupplevelsen inom mobil e-handel Jag kommer inte att goumlra anvaumlndarbar-

hetstest men med hjaumllp av teorierna hittar jag de mest kritiska punkterna foumlr att kunna

goumlra en ny design till min fallstudie

14 Metod

Som metod kommer jag att undersoumlka strukturen layouten och anvaumlndarupplevelser foumlr

mobil e-handel i allmaumlnhet Forskningsmetoden paringminner naumlrmast om den vetenskapliga

fallstudiens metod

Metoden innebaumlr en plan foumlr att samla in organisera och integrera information och den

resulterar i ett speciellt forskningsresultat Jag kommer att anvaumlnda boumlckerna Ethan

Marcotte Responsive web design (2011) Wroblewski Luke Mobile First (2011) och

Karen McGrane Content strategy for Mobile (2012) Som material kommer jag ocksaring att

anvaumlnda kaumlllor fraringn naumltet och andra bocker

Med hjaumllp av de kritiska punkter jag hittar fraringn kaumlllor kommer jag att anvaumlnda som metod

foumlr att vidareutveckla designen foumlr den mobila e-handel webbplatsen (909jp) jag har som

fallstudie

10

Med hjaumllp av undersoumlkningen om e-handel foumlr mobiler kommer jag att veta vilka saker

det ska finnas paring sidan saringsom kategorier foumlr produkter kundvagn incheckning osv

15 Begrepp

SEO aumlr foumlrkortning fraringn engelska rdquoSearch Engine Optimizationrdquo och oumlversaumltts till Soumlk-

motoroptimering paring svenska Soumlkmotoroptimeringen anvaumlnds foumlr att faring en webbplats att

synas saring houmlgt upp som moumljligt bland resultaten vid soumlkningar i soumlkmotorer (Belinger

2014)

Call to action knapparna aumlr knappar som leder anvaumlndarna vidare till en viss sida Var-

foumlr man kallar det foumlr rdquoCall to actionrdquo aumlr for att knapparna ska kunna faringnga uppmaumlrksam-

heten paring anvaumlndarna foumlr att klicka sig vidare Knapparna kan vara tex meny- knappar

eller bilder som anvaumlnds som en laumlnk till en annan sida (Mehra 2015)

Hamburgarmenyn aumlr menyn som anvaumlnds paring webbplatsen foumlr smarttelefoner Haumlr aumlr

exempel paring menyn

Media Queries aumlr en CSS3-modul som tillaringter inneharingll rendering att anpassa sig till

olika skaumlrmupploumlsningar saringsom smarttelefoner surfplattor och datorskaumlrmar Foumlr att

kunna faring sin webbplats att anpassa sig till olika skaumlrmupploumlsningar naumlr skaumlrmen blir

mindre anvaumlnder man Media Queries i CSS3 (Wikipedia)

11

2 VAD AumlR E-HANDEL

E-handel fungerar genom att ett foumlretag eller individuell person koumlper saumlljer ut eller byter

produkter information eller tjaumlnst via internet eller andra datornaumltverk (Wikipedia)

En stor del av e-handeln aumlger rum i de saring kallade naumltbutikerna Naumltbutiker har ett lager

och en webbplats daumlr kunden goumlr sina bestaumlllningar Paring webbplatsen indelas varorna i

olika kategorier saring att anvaumlndarna paring sidan kan laumltt hitta varorna Foumlr att hitta varorna

snabbare brukar de flesta naumltbutikerna ocksaring ha en soumlkfunktion Paring sidan har anvaumlndarna

moumljligheter att saumltta produktenprodukter i kundvagnen och sedan fortsaumltta shoppa tills

man aumlr klar Vid bestaumlllningen garingr man bara till kassan daumlr anvaumlndaren kommer att vaumllja

transportsaumltt ange kontakt- och leveransuppgifter och vaumllja betalningsmetod Betalnings-

metoden aumlr vanligtvis kreditkort eller Paypal

Fakturan daumlrmed brukar inte ges till kunden daring det skulle innebaumlra oumlkade risker foumlr be-

draumlgerier foumlr naumltbutikerna Foumlr fakturakoumlp behoumlver kundens identitet faststaumlllas paring ett saumlk-

rare saumltt

Naumlr betalningen har gjorts levereras varorna vanligtvis som postpaket eller direkt leverans

till doumlrren foumlr stoumlrre varor saringsom moumlbler (E-handel 2015)

ldquoE-handeln fortsatter att vaxa Nastan hela tillvaxten sker numera i mobilen Det ar

inte priset som gor att vi handlar pa natet De viktigaste skalen ar att det ar smidigare

och att utbudet ar storre an i traditionella butikerrdquo

-Larsson Daniel 2014

21 Mobil e-handel

Mobil e-handel (m-handel) aumlr en term som beskriver en foumlrsaumlljningstransaktion som an-

vaumlnder traringdloumlsa elektroniska enheter saringsom smarttelefoner och surfplattor En mobil e-

handel webbplats fungerar i alla smarttelefoner och surfplattor och aumlr anpassad samt op-

timerad foumlr mobilens webblaumlsare

12

Foumlr att naring den mobila webbplatsen behoumlver man inte skriva in mobil adress eller aktivt

vaumllja att visa den mobila butiken Den mobila webbplatsen av en e-handel kaumlnner auto-

matiskt igen om man anvaumlnder en dator eller en mobil och visar daring upp en optimerad

version som anpassas efter anvaumlndarnas behov (Nordisk e-handel)

I den mobila versionen av e-handel brukar kategorier bestaring av endast en sida Foumlr att se

paring de resterande produkter i kategorierna kan man trycka paring rdquoVisa flerrdquo som man oftast

hittar laumlngst ner som en knapp eller laumlnk Detta goumlr uppladdningstiden paring sidan betydligt

snabbare och anvaumlndarna slipper vaumlnta Vaumlntande kan leda till avbrutna koumlp

Foumlrutom kategorier produkter och kassa i sjaumllvbetjaumlningsbutik foumlr kunder med produkter

som aumlr optimerade foumlr mobilanvaumlndarna aumlr ocksaring betalvaumlxeln foumlr kortbetalning specialan-

passad Detta goumlr det snabbare och enklare foumlr anvaumlndarnakunderna att avsluta sina koumlp

och betala med sina betalningskort (Mobil e-handel 2012)

22 Varfoumlr handla med mobil

Foumlr att kunna designa en ny mobil e-handel foumlr en kund aumlr det foumlrst jaumltte viktigt att veta

varfoumlr anvaumlndarna vaumlljer att koumlpa produktertjaumlnster med en smarttelefon eller surfplattor

Med hjaumllp av DIBS aringrliga rapport som gjordes i Sverige 2014 visas det att den viktigaste

orsaken till att anvaumlndarna handlar med sin mobil aumlr att det aumlr smidigare och sparar tid

Samtidigt aumlr det viktigt att inte heller gloumlmma bort att andra handlingsmotiv lyfts fram

som viktiga av mer aumln haumllften av alla tillfraringgade E-handel aumlr bra paring maringnga olika saumltt Den

moumlter konsumenternas behov och oumlnskemaringl i stor grad

Foumlr den nordiska befolkningen ska tidsbesparing enligt rapporten vara allra viktigaste foumlr

35-44 aringringar och minst viktig foumlr de yngsta aringldersgruppen 15-24 aringr som foumlr vilka laringga

priser istaumlllet spelar mer roll Utoumlver laringga priser drivs ungdomarna ocksaring oftast av det

stoumlrre utbudet som naumltbutikerna erbjuder paring internet

13

Figur 21 Viktigaste skaumllet att naumlthandel sparar tid

Enligt statiken visar det viktigaste skaumllet varfoumlr man anvaumlnder mobilen foumlr e-handel

64 saumlger att det sparar tid och aumlr smidigt

58 saumlger att det aumlr foumlrmaringnligare

56 saumlger att det aumlr enklare att jaumlmfoumlra mellan olika produkter

43 saumlger att det finns stoumlrre produktutbud

52 saumlger att det aumlr alltid oumlppet

23 Antalet kop okar pa mobilen

Enligt DIBS aringrliga rapport (2014) om mobil e-handel oumlkar antalet mobila e-handel kon-

sumenter hela tiden Nedan finns en figur om antalet under aringr 2013-2014 Figuren visar

hur maringnga garingnger konsumenterna har handlat varortjaumlnster med en smarttelefon eller

surfplattor under de senaste sex maringnaderna Naumlthandeln paring mobila enheterna oumlkar sakta

med saumlkert De som har handlat paring naumltet foumlrut handlar nu ocksaring allt mer Andelen stor-

konsumenter de som handlat minst 25 garingnger paring ett halvaringr har nu foumlrdubblats

De som handlade en eller tvaring garingnger har minskat fraringn 42 procent aringr 2013 till 35 procent

aringr 2014 vilket goumlr det till 17 procent mindre I snitt handlar konsumenter 1114 garingnger

per aringr med sin smarttelefon eller surfplattor

14

Figur 22 Antal oumlkar paring mobilen

Mobilen finns alltid naumlrmast

Enligt rapporten ska den vanligaste orsaken till varfoumlr anvaumlndarna vaumlljer att handla fraringn

mobilen vara foumlr att mobilen fanns naumlrmast till hands vid koumlpoumlgonblicket

Figur 23Varfoumlr handlade du med smarttelefon

15

60 saumlger att smarttelefon fanns naumlrmaste till hands vid koumlptillfaumlllet

27 anvaumlnder en app foumlr att handla online

17 oumlppnade ett erbjudande via e-mail i sin smarttelefon

5 har ingen dator

3 var i butik och koumlpte varan paring naumltet istaumlllet

4 hade ingen internetanslutning

3 scannade en QR-kod

Vad handlar vi med mobil

Foumlr att snabbt faringr en inblick i vad konsumenterna handlar med mobil ser vi haumlr nedan

(Figur 24) Konsumenter handlar mer av naumlstan allt Kunder som spenderar mer aumln 500

euro med smarttelefoner eller surfplattor koumlper i foumlrsta hand resor medan de som handlar

foumlr mindre aumln 100 euro laumlgger pengar paring media

Figur 24 Mobilt handlar vi mer av naumlstan allt

16

24 Bra mobila e-handel webbplatser

En bra mobil webbplats aumlr naumlr sidan aumlr enkel att anvaumlnda fast man bara anvaumlnder ett oumlga

och en tumme

rdquoWhen reflecting on a lot of mobile usage patterns I like to imagine people as rdquoone

eyeball and one thumb One thumb because they are likely to be holding their mobile

in one hand and using a single thumb to control it one eyeball because in many loca-

tions where mobile devices are use we only have peoples partial attentionrdquo

-Wroblewski Luke 2011)

Man kan aldrig exakt veta var anvaumlndaren befinner sig naumlr han surfar med sin smarttele-

fon Han kanske befinner sig i vardagsrummet foumlr att sloumltt surfa efter en ny lampa medan

han kollar paring Tvn Kanske anvaumlndaren sitter hemma och har en stadig wifi eller kanske

paring sommarstugan och har 3G4G som byter mellan olika naumltverk osv (Thoren 2012)

Naumlr anvaumlndaren goumlr naringgonting samtidigt som han surfar paring webbplatsen har han bara den

partiella uppmaumlrksamheten Daumlrfoumlr aumlr det betydligt fler kontexter som man maringste ta haumln-

syn till naumlr man designar webbplatser foumlr mobiler (Wroblewski 2011)

Haumlr aumlr tvaring bra exempel av lyckad e-handel foumlretag i vaumlrlden De har inte lyckats bra bara

med att saumllja produkterna utan ocksaring med designen Haumlr nedan aumlr bilderna paring mobil de-

signen av Rakutencom och Amazoncom

17

Figur 25 Hemsida paring rakutencom foumlr mobiler

Direkt naumlr man kommer paring sidan hittar man inloggningen koumlpvagnen soumlkfunktionen

menyn och speciellt de stora bilderna paring katalogerna vilket aumlr jaumltte laumltta att klicka paring

Fastaumln mobilskaumlrmen aumlr liten goumlr den haumlr det bara inte laumltt att navigera runt sidorna utan

ocksaring trevligt att vara paring sidan

Amazoncom har ocksaring lyckats bra med designen Naumlr man kommer till sidan ser man

direkt Sign in Department Wish List Deals och Search funktionen Under search funkt-

ionen ser man genast en inspirerande reklam som paringminner oss om att det aumlr varingr

rdquoSPRINGacuteS PERFECT PANTSrdquo Fast sidan har jaumltte maringnga objekt i den aumlr det trots allt

18

jaumltte laumltt att navigera runt sidorna Man tappar inte bort sig och man hittar laumltt det som

man aumlr ute efter

Figur 26 Hemsida paring amazoncom foumlr mobiler

19

25 Kritiska punkterna foumlr bra mobil design paring e-handel

Naumlr man handlar med en mindre skaumlrm aumlr det mera utmanande eftersom skaumlrmen aumlr liten

och anvaumlndarna brukar inte ha tillraumlckligt med taringlamod att sitta och soumlka naringgonting foumlr

laumlnge fraringn en liten skaumlrm Daumlrfoumlr aumlr det viktigt att veta vilka saker man boumlr beakta naumlr

man designar en mobil e-handel I det haumlr stycket kommer jag att lista upp sakerna man

boumlr veta naumlr man designar en mobil e-handel webbplats

Naumlr man handlar med en mindre skaumlrm aumlr det mera utmanande eftersom skaumlrmen aumlr liten

och anvaumlndarna brukar inte ha tillraumlckligt med taringlamod att sitta och soumlka naringgonting foumlr

laumlnge paring en liten skaumlrm Daumlrfoumlr aumlr det viktigt att veta vilka saker man boumlr beakta naumlr man

designar en mobil e-handel I det haumlr stycket kommer jag att lista upp kritiska saker man

boumlr veta naumlr man designar en mobil e-handel webbplats

1 Call-to-action knapparna foumlr smaring paring en mobilskaumlrm

Naumlr man designar webbsidor foumlr mobiler kan det ibland vara en utmaning att faring

allt att rymmas in Daumlrfoumlr brukar ocksaring webbdesigner minska de sk rdquocall to act-

ionrdquo knapparna Om anvaumlndaren maringste zooma in foumlr att klicka paring en knapp men

av misstag klickar paring en annan knapp kan det bli frustrerande foumlr dem och detta

leder sedan till att de laumlmnar sidan Daumlrfoumlr aumlr det mycket viktigt att designa knap-

parna och inneharingllet saring att anvaumlndarna laumltt naringr dem

2 Soumlkfunktionen ska alltid finnas med

Paring mobila e-handel webbplatser ska soumlkfunktionen alltid synas saring att man laumltt skall

kunna soumlka produkterna Laringt oss saumlga att kunden inte hittar produkten han soumlker

och vill anvaumlnda soumlkfunktionen Han letar och letar efter soumlkfunktionen utan re-

sultat Detta orsakar inte bara att kunden laumlmnar din sida men ocksaring kommer han

att beraumlttar det vidare aringt andra hur han upplevde din sida (Mehra 2015)

3 Laumltt att navigera

20

Det ska vara laumltt att navigera runt sidorna Anvaumlndarna ska veta var han aumlr och hur

han kommer vidare efter att han tex har valt produkten Menyerna foumlr katalo-

gerna ska vara laumltta att navigera Om menyerna foumlr katalogerna aumlr foumlrvirrande och

svaringra foumlr anvaumlndaren att hitta produkterna blir han laumltt irriterad Exemplar paring (fi-

gur 27) haumlr nedan visar att menyerna aumlr ganska foumlrvirrande paring vaumlnstra bilden me-

dan paring houmlgra sidan aumlr det klart och tydligt (Laya 2014)

Figur 27 Jaumlmfoumlrelse mellan en bra och daringlig navigation httpconversionxlcommake-mobile-convert

4 Ta de roliga ur shopping

Det vanligaste och stoumlrsta misstaget som de flesta foumlretag goumlr naumlr de designar foumlr

mobil e-handel aumlr att de foumlrsoumlker flytta kunderna fraringn shopping till koumlp Shopping

paring en stationaumlr dator goumlr det laumltt naumlr det oftast finns ett enormt antal produkter att

vaumllja mellan och det aumlr laumltt att blaumlddra runt Men foumlr mobiler aumlr det annat

Maringnga foumlretag foumlrsoumlker pressa ihop hela shopping-processen till smaring tabbar och

minska paring inneharingllet Som resultat kommer anvaumlndaren att kaumlnna sig paringtvingad

21

att goumlra snabba beslut paring inkoumlp Istaumlllet foumlr att ge anvaumlndarna en saringdan paringtvingad

upplevelse kan man istaumlllet locka anvaumlndarna med all information vi har att er-

bjuda

Det betyder inte att anvaumlndarna som besoumlker e-handeln med en smarttelefon inte

vill njuta av shoppingen saringsom de goumlr paring stationaumlra datorer Naumlr man designar en

mobil e-handel skall kunderna kunna faring njuta av shoppingen och jaumlmfoumlra mellan

olika produkter innan dem bestaumlmmer sig vilken produkt de vill koumlpa (Laya 2014)

ldquoBut we see many companies try to compress the whole shopping process into a

small number of taps The result is a mobile app or website that forces the user to

make a quick purchase decision rather than giving a great shopping experience

To the user it feels like the site switches from giving enticement to issuing de-

mandsrdquo

- Laya Peep 2014

5 Laringngsam uppladdningstid foumlr mobiler spelar en stor roll

Det aumlr mycket viktigt att haringlla sidstorleken saring liten som moumljligt saring att det aumlr snabbt

att ladda upp sidan

ldquoMobile users want to take quick action and also Google has reportedly started

including page speed for ranking websites in the search results so that makes it

even more important to have a lighter siterdquo

- Mehra Gagan 2015

Varingren 2014 rapporterade Radware (httpwwwradwarecomspring-sotu2014)

att majoriteten av besoumlkarna kommer att oumlverge webbplatsen efter att ha vaumlntat i

3 sekunder foumlr att ladda upp sidan (Laya 2014)

Om det finns mycket inneharingll paring en sida kan man som alternativ separera inne-

haringllet i olika flikar (Mehra 2015)

Jag har tagit ett exempel fraringn Amazoncom Paring produktsidan har ja valt en orange

vaumlska Foumlr att tex ytterligare laumlsa om produktbeskrivningen rdquoAbout this itemrdquo ser

22

jag en pil som aumlr paring houmlgra sidan (Figur 29) Naumlr jag trycker paring pilen eller laringdan

kommer jag till en annan sida daumlr jag kan laumlsa hela produktbeskrivningen (Figur

210) Paring det haumlr saumlttet inneharingller sidan all information man behoumlver men separe-

rade i olika flikar saring att det blir snabbare att ladda upp sidan

Figur 28 Produktsida paring amazoncom

23

Figur 29 Produktsida paring amazoncom

Figur 210 Produktsida paring amazoncom About this item

24

6 Misslyckade analyseringar av anvaumlndarna

Naumlr man bygger webbsidor aumlr det viktig att goumlra anvaumlndbarhetstest och analysera

kundernas beteende Hur anvaumlndarna kaumlnner sig naumlr de anvaumlnder sidan aumlr mycket

viktigt och avgoumlr hur bra din business kommer att rulla

Analyseringen aumlr den kritiska inputen foumlr designen Med analyseringen ser man

dels vilka mobila apparater anvaumlndarna anvaumlnder och om det aumlr naringgra svaringrigheter

och obekvaumlmligheter anvaumlndarna upplever vid anvaumlndningen Dessa faktorer aumlr

viktiga foumlr att saumlkerstaumllla om den mobila upplevelsen uppfyller behoven hos kon-

sumenterna Testet och analysen maringste goumlras kontinuerligt foumlr att vi skall kunna

saumlkerstaumllla att kunderna har det bekvaumlmt (Mehra 2015)

7 Mindre inneharingll foumlr mobilanvaumlndarna

E-handel webbplatser brukar goumlmma inneharingll foumlr att goumlra sidan mindre Sidan aumlr

i sjaumllva verket inte mindre men bara goumlmd foumlr anvaumlndarna som anvaumlnder sina

smarttelefoner Enligt Mehra Gagan aumlr det inte bra om det finns mindre inneharingll

foumlr mobilanvaumlndarna Oavsett med vilka enheter anvaumlndarna aumlr paring sidan boumlr det

finnas lika mycket inneharingll paring alla enheterna De flesta som handlar online brukar

aumlga flera enheter och med stor sannolikhet anvaumlnder de ocksaring andra enheter foumlr

att surfa Om inneharingllet inte ser likadant ut paring stationaumlra datorer och smarttelefo-

ner kan det orsaka daringlig anvaumlndarupplevelse foumlr anvaumlndaren Enligt Google an-

vaumlnder 90 av dem som handlar paring internet olika enheter Att begraumlnsa deras

anvaumlndning aumlr naringgonting som man boumlr undvika (Mehra 2015)

25

3 MOBILANPASSADE LOumlSNINGAR

Det finns maringnga olika loumlsningar att bygga sin webbplats med Det aumlr viktigt att komma

iharingg att mobila anvaumlndande oumlkar hela tiden Det staumlller nya krav paring webbdesign och an-

vaumlndargraumlnssnitt Anvaumlndarna foumlrvaumlntar sig idag att de ska kunna ta del av allt inneharingll paring

webben oavsett om de anvaumlnder en smarttelefon eller en surfplatta De mobilanpassade

loumlsningarna foumlr e-handel kan tex vara Responsiv design Adaptiv Design Mobilbutik

eller en mobil applikation

31 Adaptiv design

En adaptiv webbplats aumlr uppbyggd saring att den aumlr optimerad foumlr specifika skaumlrmstorlekar

Den anvaumlnder servern foumlr att upptaumlcka den enhet som anvaumlnds foumlr att visa webbplatsen

Byggande av webbplatsen med adaptiv metoden aumlr tidskraumlvande paring grund av behovet att

optimera sidan foumlr varje vald plattform front-end och back-end Innan man boumlrjar bygga

webbplatsen maringste man avgoumlra vilka alla plattformar webbplatsen kommer att optimeras

till Foumlrdel med adaptiv design aumlr att den har snabb uppladdningstid

rdquoCompared to Responsiv design adaptive web design is website-optimised for each

platform separately and makes use of the opportunities presented by the platform as

well as the models and functions It offers fast-loading pages due to the server detec-

tion device and browser sending data tailored for a particular devicerdquo

-Lubo Ruska 2013

Att vaumllja den raumltta loumlsningen handlar om att foumlrstaring vad maringlgruppen foumlrvaumlntar sig och vad

de behoumlver Eftersom foumlretaget 909jp inte aumlr en jaumltte stort foumlretag saringsom Ikea eller Ama-

zon som har oberaumlknat antal med produkter tycker jag att Responsiv design med Mobile

first metoden aumlr den mest effektiva metoden foumlr denna forskning

26

32 Responsiv design

Responsiv webbdesign aumlr ett av de populaumlraste saumltten att optimera en webbplats Re-

sponsiv webbdesign moumljliggoumlr att layouten foumlraumlndras beroende paring vilken skaumlrmstorlek

och skaumlrmupploumlsningen som anvaumlndarna har och beroende paring vilka funktioner som

webblaumlsaren stoumldjer (Responsive Design 2014)

Oberoende om anvaumlndarna anvaumlnder dator laumlsplatta eller sin mobiltelefon kommer sidan

att anpassa sig paring olika saumltt foumlr att anvaumlndarna vid alla tillfaumlllen ska ha en saring rik upplevelse

som moumljligt Man kan saumlga att en webbsida paring mindre skaumlrmar aumlr med ett annat ord en

krympande version av den stoumlrre skaumlrmstorleken

Inneharingllet saringsom kolumner och bilder paring webbsidan kommer automatiskt att anpassas

beroende paring skaumlrmstorleken Och detta aumlr paring grund av Grid systemet Allt inneharingll skall

haringllas inom ett Grid system Grid systemet skall skydda allt fraringn att bryta samman naumlr

sidan anvaumlnds paring olika skaumlrmstorlekar

Det finns 11 olika Grid storlekar tvaring kolumner tre kolumner fyra kolumner fem kolum-

ner sex kolumner sju kolumner aringtta kolumner nio kolumner tio kolumner 11 kolumner

och 12 kolumner Som exempel visar jag en figur av 12 kolumners Grid system (Swan

2014)

27

Figur 31 Ett exempel paring Grid system av 5 olika skaumlrmstorlekar (Phil Swan 2014)

Responsiv webbdesign fungerar med hjaumllp av HTML5 CSS media Query och Java-

Script Det bygger paring att webbutvecklare istaumlllet foumlr exakta storlekar maumltt i pixlar anger

sidelements storlekar i procent i jaumlmfoumlrelse med skaumlrmens storlek

Naumlr sidelementens storlekar aumlr i procent goumlr det att sidan blir flexibel och den anpassas

efter webblaumlsarens storlek medan fasta pixlar ger en scrollbar (rull-list) (Responsive De-

sign 2014)

33 Varfoumlr Responsiv design

Foumlrdelar med Responsiv design aumlr att den erbjuder en bra anvaumlndarupplevelse foumlr olika

enheter och skaumlrmstorlekar Tack vare den Responsiva designen har webbredaktoumlrer laumlt-

tare att hantera inneharingllet eftersom de bara har en version att hantera Ur en SEO synvin-

kel fungerar Responsiv design baumlttre eftersom den koncentrerar inneharingllet istaumlllet foumlr att

vattna ur det med maringnga URL foumlr samma inneharingll

28

Med en Responsiv design aumlr en webbplats laumlttare att hantera Att ha flera olika versioner

av en webbplats innebaumlr mera arbete Flera olika versioner av en webbplats innebaumlr sepa-

rata sidor att redigera och separata insatser foumlr soumlkmotoroptimering och separata soumlkmo-

torkampanjer Daumlrfoumlr aumlr det en stor foumlrdel att bygga en webbplats med den Responsiva

metoden

Med en Responsiv design kaumlnner anvaumlndarna baumlttre igen sidan baringde paring stationaumlra datorer

och mobiltelefoner Bygger man specifika webbplatser foumlr mobiler och surfplattor kan

det laumltt haumlnda att det blir olika information paring webbplatserna och att de struktureras olika

Laringt oss foumlrestaumllla oss att naringgon anvaumlnder sin mobiltelefon paring lunchen foumlr att leta efter en

flygbiljett fraringn Helsingfors till Tokyo Personen hittar en webbplats som har bra erbju-

dande och bestaumlmmer sig foumlr att fortsaumltta kolla naumlr han eller hon kommer hem Naumlr per-

sonen har kommit hem anvaumlnder hen datorn istaumlllet foumlr mobilen Om webbplatsen som

personen kollade paring lunchpausen var en Responsiv webbplats faringr personen en smidig och

bra upplevelse vid oumlvergaringngen fraringn den mobila webbplatsen till stationaumlr dator

(Lindahl 2014)

Det aumlr vaumlldigt viktigt att ha sin webbplats att optimerad till saring maringnga enheter som moumljligt

foumlr att ingen vet vilka kommer att vara framtidens enheter och daumlrfoumlr anses en webbplats

som anpassar sig till maringnga olika format vara den baumlsta loumlsningen Innan man kan boumlrja

med att designa en Responsiv webbplats maringste man veta vilka skaumlrmupploumlsningar och

storlekar det finns tillgaumlngliga och aumlr populaumlra idag Foumlr att kunna rikta till de olika skaumlr-

mupploumlsningarna med Media Queries har jag listat upp olika enheternas skaumlrmupploumls-

ningar i pixlar haumlr nedan i tabellen

ResolutionGrafisk array Enhet som anvaumlnder denna resolution skaumlrmstorlek i pixel-

taumltheten i pixlar

2880x1800 15-inch Apple MacBook Pro with Retina display

2560 x 1700 Google Chromebook Pixel

2560 x 1600 Samsung Google Nexus 10

13-inch Apple MacBook Pro with Retina display

29

2560 x 1440 27-inch Apple iMac 102 111 113 122 (Late 2009 -

2012)

1920 x 1080 HTC One Samsung

Sony Xperia Z amp Xperia ZL

Asus PadFone Infinity

Acer Aspire S5

Asus Zenbook Prime

1600 x 900 Apple Macbook Air

1366 x 768 Small desktoplaptop screen resolution

Asus VivoTab RT

Samsung N350

1280 x 1024 Standard desktop screen resolution

1280 x 800 Asus PadFone 2

Samsung Galaxy Note

Sony Xperia Tablet S

1280 x 720 Sony Xperia S

HTC Windows Phone 8X

HTC One mini

1136 x 640 Apple iPhone 5 5S amp 5C

Apple iPod Touch (5th generation)

960 x 640 Apple iPhone 4 amp 4S

Apple iPod Touch (4th generation)

854 x 480 Sony Xperia ray

Nokia N9

800 x 480 Nokia Lumia 510 amp 520

Samsung Galaxy I Galaxy S Galaxy S Plus Galaxy S Ad-

vance Galaxy SL Galaxy S Duos Galaxy Xcover 2 Galaxy

Beam Nexus S Captivate Glide amp Galaxy S III mini

HTC Desire X HTC Desire V Desire VC Desire VT De-

sire U amp Windows Phone 8S

30

LG Optimus 2X Optimus EX Optimus L5 II Optimus Q2

amp Optimus Black

T-Mobile G2x

Asus E600

620 x 480 Blackberry Bold 9900 amp Bold Touch 9930

Blackberry Torch 9810

LG Optimus Z

640 x 360 Sony Ericsson Vivaz amp Vivaz Pro

Nokia 500 amp 5800 XpressMusic

Nokia N8 N97 E7 and X6

480 x 320 Apple iPhone 3G amp 3GS

Samsung Galaxy Ace

320 x 240 Nokia E71

Blackberry Curve 9220 amp 9320

Sony Ericsson txt

Samsung Galaxy Y amp Galaxy Chat

Nokia Asha 501

Figur 32 Resolutions referenser paring olika enheter

31

4 VAD AumlR MOBILE FIRST

Mobile first metoden aumlr en metod och arbetsprocess foumlr webbdesigners som aumlr skapad av

Luke Wroblewski Naumlr man jobbar med ett projekt och designar strukturerar och imple-

menterar en webbplats aumlr Mobile first metoden man paringboumlrjar arbetet med Med metoden

menar Wroblewski att man foumlrst boumlrjar designa webbsidor fraringn de minsta enheterna

Figur 41 Mobile First att bygga webbsidan fraringn den minsta skaumlrmen till den stoumlrsta skaumlrmen

Wroblewski som har skapat Mobile First metoden understryker att metoden ska priorite-

ras daring man skapar anvaumlndarupplevelser

Det finns tre viktiga anledningar foumlr att utveckla foumlr Mobile First

Den foumlrbereder foumlr den stora utveckling och nya moumljligheter som uppkommer

inom det mobila omraringdet idag (836 av vaumlrldens befolkning anvaumlnder internet

paring sin smarttelefon 2015)

Den goumlr att vi blir tvungna att prioritera och fokusera varingrt inneharingll genom att ac-

ceptera de begraumlnsningar som aumlr foumlrenade med mobil design

32

och goumlr att vi kan leverera innovativa upplevelser genom att bygga utifraringn nya

funktioner som finns inbyggda i de mobila enheterna (bla GEO lokalisering)

En mobil webbplats behoumlver endast ha en mycket enkel layout och navigeringen ska vara

laumltt och effektiv

Naumlr man designar med Mobile first metoden tvingas man goumlra viktiga beslut om vad som

ska prioriteras Naumlr den optimerad design foumlr en liten skaumlrm visas paring en stoumlrre skaumlrm

kommer det att bli laumlttare att designa paring de stoumlrre skaumlrmarna Allt som ska goumlras aumlr daring

bara att fylla paring inneharingllet och designa saring att det aumlr grafiskt tilltalande och laumltt att hitta

inneharingllet (Wroblewski 2011)

41 Varfoumlr Mobile first

Vaumlrlden vi lever i idag aumlr inte mera som foumlr tio aringr sedan Allt runtom oss har utvecklats

speciellt mobiltelefonerna Tidigare anvaumlndes mobiltelefoner bara foumlr att skicka med-

delandet ringa och ta emot samtal Nu anvaumlnds den till foumlr att dels ta bilder video GPS

navigation foumlr vaumlgvisning och speciellt internetanvaumlndningen saringsom Google nyheter

Facebook Youtube och mycket mer Paring grund av det har ocksaring varingr livsstil foumlraumlndrats

Internetanvaumlndning idag har blivit allt vanligare Idag anvaumlnder vi naumltet i skolan paring jobbet

eller var och naumlr som helst bara man har en smarttelefon eller surfplatta och naumltet kopplat

Tidigare boumlrjade man bygga en webbplats fraringn den stoumlrsta skaumlrmen medan den mobila

sidan var en biprodukt Laringt oss saumlga att man har en webbplats med en rik grafisk layout

och ser stilig ut paring stationaumlra datorer Naumlr man skalar ner sidan foumlr att passa en mobilskaumlrm

kommer resultatet att vara en smaumlrta foumlr varingra oumlgon Paring den lilla mobilskaumlrmen kommer

det att vara olaumlsligt och svaringrt att anvaumlnda Foumlr att naring inneharingllet maringste du tom zooma in

och ut eller skrolla till houmlger och vaumlnster Det haumlr kommer att ge en negativ bild av ditt

foumlretag och anvaumlndarna kanske aldrig mera besoumlker din webbplats (Wroblewski 2011)

Ett bra exempel aumlr Tokyo Skytree webbplats som aumlnnu idag inte ha byggt in funktionalitet

och designen foumlr mindre skaumlrmupploumlsningar paring den engelska sidan

33

Tokyo Skytree aumlr vaumlrldens naumlst houmlgsta torn efter Burj Khalifa Tornet aumlr Japans houmlgsta

byggnadsverk med en houmljd paring 634 meter Den oumlppnades 22 maj 2012 och under det foumlrsta

aringret hade den 64 miljoner besoumlkare fraringn hela vaumlrlden Trots det har de laringtit bli att utveckla

den engelska webbsidan Paring bilden ser man att hemsidan ser exakt likadant ut paring stationaumlr

dator och paring mobilen

Figur 42 Hemsidan paring Tokyo Skytree paring stationaumlr datorskaumlrm

34

Figur 43 Hemsidan foumlr Tokyo Skytree Foumlrsta bilden visar hur det ser ut normalt Andra bilden visar naumlr man zoomar

in

Naumlr man foumlrsoumlker zooma in foumlr att laumlsa inneharingllet hoppar sidbalken (paring vaumlnstra sidan) paring

texten Det haumlr ger en mycket daringlig anvaumlndarupplevelse och kan ge fel bild av turistplat-

sen Ett annat fel paring sidan aumlr naumlr man vaumlljer spraringk till japanska ser sidan inte likadant ut

35

Figure 44 Hemsidan paring Tokyo Skytree paring japanska

Om du kan laumlsa japanska kommer du att undra varfoumlr det finns massor med information

och sidan ser mycket trevligare ut paring den japanska sidan Paring den internationella sidan

dvs engelska ser det inte lika trevligt ut och inneharingller inte allt som det goumlr paring den

japanska sidan Det aumlr som om den stoumlrsta maringlgruppen aumlr foumlr japanska turister och som

om de skulle inte bry sig om turister fraringn utlandet

Utoumlver det har de ocksaring byggt en mobilsida foumlr den japanska webbsidan Varfoumlr satsa bara

paring den japanska sidan och inte den engelska sidan naumlr maringlgruppen aumlr hela vaumlrlden

36

Figur 45 Mobil sidan paring Tokyo Skytree paring japanska

Vi lever i 2015 saring alla borde veta att det aumlr vaumlldigt viktig att ha en mobil webbplats som

erbjuder en bra anvaumlndarupplevelse paring alla spraringk som webbplatsen erbjuder Naumlr man har

sin sida paring flera spraringk och aumlndaring bestaumlmmer sig att bygga sidan ordentligt bara paring ett spraringk

kan anvaumlndarna faring en fel bild av foumlretaget I vaumlrsta fall kommer anvaumlndarna tycka att sidan

aumlr oparinglitligt och aringterkommer aldrig igen

Mobile first metoden aumlr daumlrfoumlr en mycket effektiv metod att bygga sin webbplats med

Man boumlrjar med att bygga sin webbplats fraringn den minsta skaumlrmen Man tvingas goumlra be-

slut om vad som ska absolut prioriteras Arbetsprocessen foumlr oss webbdesigners blir

mycket effektivare genom att foumlrst designa fraringn den minsta skaumlrmen och sedan foumlrflytta

oss till de stoumlrre skaumlrmarna Har man ett 6 kvadratmeters sovrum och foumlrsoumlker faring sin saumlng

skrivbord hylla klaumldskaringp och soffan att rymmas in aumlr det ganska utmanande Men naumlr

man boumlrjar med det mest utmanande i arbetsprocessen blir arbetet ocksaring mindre utma-

nande desto stoumlrre rum eller skaumlrm det blir (Wroblewski 2011)

37

5 909JP

909jp aumlr en elektronisk handel en moumlbelaffaumlr som saumlljer vaumlsterlaumlndska produkter Den

elektroniska butiken kommer att oumlppnas i Japan 2015 Deras foumlrvaumlntningar aumlr att faring in

en miljon dollar i foumlrsaumlljning per aringr I deras elektroniska moumlbelaffaumlr saumlljs bla stolar bord

soffor och lampor Maringlgruppen aumlr alla konsumenter mellan 18-60 aringringar

Japaner aumlr intresserade av vaumlsterlaumlndska produkter och livsstil men foumlr de flesta varor aumlr

designen knutna till deras egen kultur vilket goumlr dem mer intresserad Det aumlr ocksaring mycket

viktigt att ha sin hemsida paring japanska eftersom 99 av den japanska befolkningen foumlre-

drar att inte laumlsa inneharingllet paring andra spraringk (Khurana)

Japan aumlr ett land med vaumlrldens tredje stoumlrsta ekonomi paring 5 biljoner De har vaumlrldens ti-

onde stoumlrsta befolkning med ca 1271 miljoner invaringnare varav 70 av den totala befolk-

ningen anvaumlnder internet och 24 av dem anvaumlnder internet paring sin smarttelefon

(Khurana)

Viktigt med detta projekt aumlr att sikta aringt raumltt haringll och betjaumlna kunderna paring det baumlsta saumlttet

via webbplatsen Foumlr att kunna faringnga saring maringnga kunder som moumljligt aumlr det mycket viktigt

att designa en webbplats som aumlr anvaumlndarvaumlnlig stilig och laumltt att anvaumlnda (Wroblewski

2011)

Jag har daumlrfoumlr kommit underfund med att anvaumlnda Mobile first och Responsiv design

metoden foumlr att utveckla den mobila 909jp sidan Med tanke paring att det aumlr en Responsiv

design skall layouten paring den mobila versionen ocksaring passa in med de stoumlrre skaumlrmarna

naumlr sidan skalas upp Det aumlr dock viktigt poaumlngtera att jag endast kommer att koncentrera

mig paring den mobila designen och utveckla designen endast foumlr denna forskning

38

6 ANALYS AV DEN NYA DESIGNEN

Med hjaumllp av den tidigare designen paring 909jp och de kritiska punkterna jag har hittat under

forskningen har jag skapat en ny och foumlrbaumlttrad design av webbplatsen foumlr mobiler I det

haumlr kapitlet kommer jag att visa naringgra exempel paring den tidigare designen och jaumlmfoumlra den

med nya designen samt analysera arbetet

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger)

1 Call-to-action knapparna

Under hela arbetsprocessen har jag haft i minnet att navigeringar laumlnkar och knap-

parna ska vara tillraumlckligt stora att klicka paring I den tidigare designen har de stora

bilder paring kategorier vilket jag tycker aumlr en bra design att aringtervaumlnda

39

2 Soumlkfunktionen

Paring den tidigare versionen haumlr nedan ser man att soumlkfunktionen inte finns med

medan paring den nya designen ser man soumlkfunktionen genast naumlr man kommer till

sidan Som tidigare framfoumlrdes att soumlkfunktionen alltid ska synas saring att man laumltt

skall kunna soumlka fram produkterna Om soumlkfunktionen inte finns med eller aumlr svaringr

att hitta naumlr den behoumlvs kan det orsaka missnoumlje hos anvaumlndarna (Mehra Gagan

2015)

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp

Figur 63 Soumlkfunktionen paring den nya designen 909jp

40

3 Laumltt att navigera

Naumlr skaumlrmen aumlr liten aumlr det viktig att ha en enkel layout (Wroblewski 2011)

Jag har daumlrfor i den nya designen flyttat rdquoHemrdquo och rdquoBlogrdquo knapparna bort fraringn

den oumlvre menyn Hem-knappen finns nu i hamburgarmenyn paring vaumlnstra sidan me-

dan Blog-knappen finns i footer Detta goumlr att det ser mera organiserat ut

Figur 64 Gamla designen

Laringt oss foumlrflytta vidare till menyer foumlr kategorier Paring hemsidan har man tvaring alter-

nativ att naring kategorierna Foumlrsta aumlr den hamburgarmenyn knappen paring vaumlnstra si-

dan I menyn aumlr kategorierna indelade i fyra delar stolar lampor ergonomisk och

soffa amp middag Detta goumlr det laumltt och klart foumlr anvaumlndarna var produkterna finns

Eftersom vi bara har partiell uppmaumlrksamhet fraringn anvaumlndarna naumlr de aumlr paring sina

smarttelefoner har jag valt att saumltta in ikoner i menyn (Figur 65) Naumlr anvaumlndaren

bara anvaumlnder ena oumlgat foumlr att kolla paring mobilen och andra oumlgat foumlr naringgonting annat

ska den lilla skaumlrmen med webbplatsen kunna faringnga uppmaumlrksamheten samt un-

derlaumltta anvaumlndningen av webbplatsen (Wroblewski 2011)

41

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny

Andra menyn for kategorierna aumlr de fyra bilderna under Aeron chair slideshowen

Paring den tidigare designen ser man endast ett foumlnster av kategorierna som aumlr place-

rade i en kolumn som upprepas loggraumltt (Figur 66) Det haumlr goumlr att anvaumlndaren

maringste skrolla ner foumlr att se varenda kategori vilket kan orsaka obekvaumlmlighet Att

se flera kategorier paring samma skaumlrm sparar tid och anvaumlndaren kommer aumlven baumlttre

iharingg var sakerna finns Att ha bara rdquoenrdquo stor bild som syns paring skaumlrmen och vara

tvungen att skrolla ner foumlr att se naumlsta bild aumlr frustrerande Paring den nya designen

har jag tvaring rutor av kategorier bredvid varandra (Figur 66)

42

Figur 66 Kategorier paring den gamla designen (till vaumlnster) Kategorier paring den nya designen (till houmlger)

4 Ta det roliga ur shopping

Paring den nya designen straumlvar jag efter att erbjuda en bekvaumlm shopping-upplevelse

Naumlr anvaumlndarna besoumlker e-handeln med en smarttelefon foumlrvaumlntar hanhon sig

ocksaring att kunna ta del av allt inneharingll och goumlra jaumlmfoumlrelser med andra produkter

Jag har daumlrfoumlr i den nya designen pressat ihop laumlngden paring kolumnhoumljden som om-

ringar produkten Som resultat ser vi nu fyra produkter paring samma skaumlrm (Figur

67) I den tidigare designen ser vi en enda produkt paring en skaumlrm och foumlr att se

andra produkter maringste vi skrolla ner Paring det haumlr saumlttet har anvaumlndarna svaringrare att

jaumlmfoumlra produkterna (Laya 2014)

43

Figur 67 Tidigare produktsida (till vaumlnster) Ny produktsida (till houmlger)

I den tidigare designen ser vi ocksaring att det finns endast produktens bild produk-

tens namn koumlpvagnen och infoikonen Om man vill faring reda paring produktens inform-

ation maringste man klicka paring produktens bild eller paring infoikonen som foumlr oss direkt

till sjaumllva produktens sida Bara foumlr att man vill faring reda paring vad det aumlr foumlr produkt

foumlrs man vidare till en annan sida Det haumlr kan orsaka att kunden inte njuter totalt

av shoppingen och dessutom kan han inte jaumlmfoumlra produkterna naumlr han aumlr paring ka-

tegoriernas sida (Laya 2014)

Laringt oss hoppa vidare till den nya designen (Figur 68) Paring den nya designen har

jag satt in en kort detaljbeskrivning foumlr varje produkt Dessutom naumlr man klickar

paring infoikonen paring houmlgra sidan kommer man inte direkt till produktsidan utan det

kommer att dyka upp en inforuta som har en kort beskrivning paring produkten Om

anvaumlndaren aumlr intresserad av produkten kan han garing in till sjaumllva produktsida ge-

nom att klicka paring rdquoView productrdquo eller ocksaring paring produktbilden daumlr hanhon kan

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

EXAMENSARBETE

Arcada

Utbildningsprogram Film och television

Identifikationsnummer 4961

Foumlrfattare Vikanda Nurmi

Arbetets namn Mobil E-handel med Responsiv design och Mobile First me-

toden

Handledare (Arcada) Jutta Toumlrnqvist

Uppdragsgivare

Sammandrag

Syftet med mitt examensarbete aumlr att forska i att utveckla och foumlrbaumlttra anvaumlndarupple-

velser i e-handel foumlr mobiler samt beskriva Repsonsiv Design och Mobile first metoden

Att bygga mobil e-handel aumlr inte likadan process som att bygga vilken webbplats som

helst Det finns otaliga saker man boumlr beakta och veta innan man kan paringboumlrja arbetet

Det gaumlller att saumllja produkter och faring anvaumlndarna intresserade av att bli kund

I mitt examensarbete anvaumlnder jag fallstudie som forskningsmetod En fallstudie garingr ut

paring loumlsa ett fall med hjaumllp av forskningar och undersoumlkningar Med mina kunskaper inom

webbutvecklingen kommer jag att vidareutveckla 909jp elektronisk moumlbelaffaumlren med

hjaumllp av kaumlllor och de kritiska punkter som hittas under forskningen Den utvecklade

909jp webbplatsen foumlr mobiler kommer inte att anvaumlndas paring riktigt utan detta arbete aumlr

ett experiment foumlr forskningsaumlndamaringl

Arbetet kommer inte att garing in paring kodning och den tekniska delen Jag kommer att enbart

fokusera mig paring designens utveckling foumlr mobila e-handlar Som kaumlllor anvaumlnds referen-

ser faktatext facklitteraturer och figurer foumlr att tydliggoumlra inneharingllet

Slutligen kommer jag med hjaumllp av forskningen att jaumlmfoumlra och analysera den utvecklade

designen med den gamla designen

Nyckelord Mobil e-handel Mobile First Responsive design

Sidantal 51

Spraringk Svenska

Datum foumlr godkaumlnnande

DEGREE THESIS

Arcada

Degree Programme Film och television

Identification number 4961

Author Vikanda Nurmi

Title Mobile E-commerce with Responsiv design and Mobile

First method

Supervisor (Arcada) Jutta Toumlrnqvist

Commissioned by

Abstract

The aim of this thesis is to research how to develop and improve user experience in e-

commerce for mobiles and to describe about Responsive Design and the Mobile First

method To build mobile e-commerce is not the same as building any website There are

hundreds of things that should be considered and know before the work can begin It is all

about selling products and getting consumers to be interested in becoming members of your

e-commerce site

In my thesis I use the case study as a research method The case study is based on solving

a case with the help of research and investigation With my knowledge of web develop-

ment I will further develop 909jp online furniture store with the help of sources and the

critical points found during the research The developed 909jp website for mobiles will

not be used for real This case study will be an experiment for research purposes Sources

used in this thesis are references factual text technical literature and figures to clarify the

content

In the research will not include advanced coding and the technical part I will mainly focus

on the design development of mobile e-commerce

At last I will with the help of my research compare and analyse the developed design with

the old design

Keywords Mobil e-handel Mobile First Responsive design

Number of pages 51

Language Swedish

Date of acceptance

OPINNAumlYTE

Arcada

Koulutusohjelma Film och television

Tunnistenumero 4961

Tekijauml Vikanda Nurmi

Tyoumln nimi Mobiili verkkokauppa Responsive Design ja Mobile First

menetelmillauml

Tyoumln ohjaaja (Arcada) Jutta Toumlrnqvist

Toimeksiantaja

Tiivistelmauml

Opintonaumlytetyoumln tavoitteena on tutkia miten kehittaumlauml ja parantaa kaumlyttaumljaumln kokemuksia

verkkokaupan mobiiliversiossa ja kuvailla kaumlsitteet Responsive design ja Mobile first me-

netelmauml Verkkokaupan rakentaminen mobiilia varten ei ole sama kuin rakentaa muita ta-

vallisia verkkosivuja On paljon asioita joita pitaumlisi harkita ja tietaumlauml ja ottaa huomioon

ennen kuin voi aloittaa rakentamisen Tavoitteena on tuotteiden myynti mutta myoumls kaumlyt-

taumljien rekisteroumlityminen asiakkaiksi

Opinnaumlytetyoumlssaumlni kaumlytaumln tapaustutkimusta tutkimusmenetelmaumlnauml Tapaustutkimus pe-

rustuu esimerkkitapauksen ratkaisemiseen tutkimuksen avulla Nettikehityksestauml keraumlauml-

mieni tietojen avulla kehitaumln edelleen konkreettista nettikauppaa Tulen kehittaumlmaumlaumln

909jp huonekaluliikkeen mobiililaitteille tarkoitettua nettikauppaa tutkimuksessa esille-

tulleilla laumlhdetietojen ja kriittisten kohtien avulla Kehittaumlmaumlaumlni uutta graafista ilmettauml

909jp verkkosivujen mobiiliinversioon ei kaumlytetauml kaumlytaumlnnoumlssauml taumlmauml tapaustutkimus teh-

daumlaumln ainoastaan opinnaumlytetyoumltaumlni varten

Tyoumlssaumlni en kaumlsittele koodausta ja teknistauml osa-aluetta Tulen ainoastaan keskittymaumlaumln

graafisen suunnittelun kehityksestauml mobiiliissa verkkokaupassa Laumlhteinauml kaumlytetaumlaumln viit-

tauksia faktateksteihin tietokirjallisuuteen ja kuviin jotka auttavat selventaumlmaumlaumln sisaumlltoumlauml

Lopuksi tulen tutkimustietojen avulla analysoimaan ja vertailemaan kehittaumlmaumlni ja suun-

nittelemani esimerkkisivustoa vanhaan sivustoon

Avainsanat Mobil e-handel Mobile First Responsive design

Sivumaumlaumlrauml 51

Kieli Ruotsi

Hyvaumlksymispaumlivaumlmaumlaumlrauml

INNEHAringLL

1 INLEDNING 8

11 Motiv foumlr aumlmnesvalet 8

12 Syfte 8

13 Avgraumlnsningar 9

14 Metod 9

15 Begrepp 10

2 VAD AumlR E-HANDEL 11

21 Mobil e-handel 11

22 Varfoumlr handla med mobil 12

23 Antalet kop okar pa mobilen 13

24 Bra mobila e-handel webbplatser 16

25 Kritiska punkterna foumlr bra mobil design paring e-handel 19

3 MOBILANPASSADE LOumlSNINGAR 25

31 Adaptiv design 25

32 Responsiv design 26

33 Varfoumlr Responsiv design 27

4 VAD AumlR MOBILE FIRST 31

41 Varfoumlr Mobile first 32

5 909jp 37

6 ANALYS AV DEN NYA DESIGNEN 38

7 SAMMANFATTNING 48

BOumlCKER 50

ELEKTRONISKA Kaumlllor 50

Figurer

Figur 21 Viktigaste skaumllet att naumlthandel sparar tid 13

Figur 22 Antal oumlkar paring mobilen 14

Figur 23Varfoumlr handlade du med smarttelefon 14

Figur 24 Mobilt handlar vi mer av naumlstan allt 15

Figur 25 Hemsida paring rakutencom foumlr mobiler 17

Figur 26 Hemsida paring amazoncom foumlr mobiler 18

Figur 27 Jaumlmfoumlrelse mellan en bra och daringlig navigation httpconversionxlcommake-

mobile-convert 20

Figur 28 Produktsida paring amazoncom 22

Figur 29 Produktsida paring amazoncom 23

Figur 210 Produktsida paring amazoncom About this item 23

Figur 31 Ett exempel paring Grid system av 5 olika skaumlrmstorlekar (Phil Swan 2014) 27

Figur 32 Resolutions referenser paring olika enheter 30

Figur 41 Mobile First att bygga webbsidan fraringn den minsta skaumlrmen till den stoumlrsta

skaumlrmen 31

Figur 42 Hemsidan paring Tokyo Skytree paring stationaumlr datorskaumlrm 33

Figur 43 Hemsidan foumlr Tokyo Skytree Foumlrsta bilden visar hur det ser ut normalt Andra

bilden visar naumlr man zoomar in 34

Figure 44 Hemsidan paring Tokyo Skytree paring japanska 35

Figur 45 Mobil sidan paring Tokyo Skytree paring japanska 36

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger) 38

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp 39

Figur 63 Soumlkfunktionen paring den nya designen 909jp 39

Figur 64 Gamla designen 40

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny 41

Figur 66 Kategorier paring den gamla design (till vaumlnster) Kategorier paring den nya design (till

houmlger) 42

Figur 67 Tidigare produktsida (till vaumlnster) Nya produktsida (till houmlger) 43

Figur 68 Inforutan som dyker upp 44

Figur 69 Produktsida av tabbar 45

Figur 610 View more 46

Figur 611 Stol kategori Show all 47

8

1 INLEDNING

11 Motiv foumlr aumlmnesvalet

Som Online Media studerande har jag alltid gillat att designa webbsidor Jag har alltid

varit intresserad av den haumlr inriktningen Ju mer man studerar desto mer vill man laumlra sig

Det att jag tycker om att designa webbsidor var inte enda orsaken till att jag valde mitt

aumlmne foumlr examensarbete Jag har alltid varit intresserad i elektronisk handel Hur faringr man

kunder att koumlpa sina produktertjaumlnster utan en fysisk saumlljare Hur marknadsfoumlr man och

hur naringr man baumlst kunderna daring foumlretaget med e-handel kan vara allt fraringn klaumldbutiker flyg-

bolag eller moumlbelaffaumlrer

Som webbdesigner har jag som uppgift att hjaumllpa kunderna att marknadsfoumlra deras foumlretag

eller produkter via webben Som aumlmne foumlr examensarbetet har jag valt att goumlra en fallstu-

die daumlr jag foumlrbaumlttrar den tidigare 909jp webbplatsen med hjaumllp av min forskning

Som bakgrund har jag kunskaper i webbdesign vilket jag kan anvaumlnda som verktyg En

bra webbplats maringste vara grafiskt attraktiv foumlr anvaumlndaren Med hjaumllp av det grafiska

maringste en bra webbplats daumlrmed lyckas leverera den information som anvaumlndarna aumlr ute

efter Det maringste vara laumltt att navigera runt sidorna samt hitta snabbt informationen an-

vaumlndarna vill naring Sidan maringste ocksaring kunna laddas ner snabbt aumlven via en laringngsammare

naumltuppkoppling foumlr att tillfredsstaumllla anvaumlndarna En webbplats maringste erbjuda en bra

funktionalitet samt anvaumlndarvaumlnlighet paring mindre skaumlrmar saringsom paring mobiler Som maringl

kommer jag att fokusera mig paring hur man kan utveckla och foumlrbaumlttra en e-handel design

foumlr mobiler

12 Syfte

Syftet med min uppsatts aumlr att laumlra mig att utveckla och foumlrbaumlttra anvaumlndarupplevelser i

e-handel foumlr mobiler Att handla paring naumltet med sin mobil sparar mer tid och maringnga garingnger

kan det vara mycket laumlttare Foumlr att lyckas med att bevisa aringt anvaumlndarna att en tjaumlnst aumlr

trovaumlrdig aumlr det jaumltte viktigt att erbjuda dem en bra och bekvaumlmt plats att handla online

9

Foumlr att lyckas med det maringste man ha en mycket bra design och funktionalitet paring webbsi-

dan I min uppsats kommer jag att fokusera paring design som byggs med Mobile first meto-

den Forskningsfraringgan i mitt examensarbete aumlr rdquoHur kan man baumlst utveckla en e-handel

webbplats foumlr mobilerrdquo

Arbetet skall vara till nytta foumlr webbdesigners och Online Media studerande som inte

tidigare har kunskaper inom e-handel foumlr mobiler och vill foumlrdjupa sig mera i det Arbetet

skall ocksaring vara till nytta foumlr dem som goumlr eller kommer att goumlra ett projekt inom e-han-

deln Det ska hjaumllpa dem oumlka foumlrstaringelse samt stoumlda dem i deras projekt

13 Avgraumlnsningar

I min uppsatts kommer det inte att staring om avancerad html och CSS kodning Jag kommer

fraumlmst att koncentrera mig paring strukturer och layouten och hur man baumlst kan uppnaring den

baumlsta anvaumlndarupplevelsen inom mobil e-handel Jag kommer inte att goumlra anvaumlndarbar-

hetstest men med hjaumllp av teorierna hittar jag de mest kritiska punkterna foumlr att kunna

goumlra en ny design till min fallstudie

14 Metod

Som metod kommer jag att undersoumlka strukturen layouten och anvaumlndarupplevelser foumlr

mobil e-handel i allmaumlnhet Forskningsmetoden paringminner naumlrmast om den vetenskapliga

fallstudiens metod

Metoden innebaumlr en plan foumlr att samla in organisera och integrera information och den

resulterar i ett speciellt forskningsresultat Jag kommer att anvaumlnda boumlckerna Ethan

Marcotte Responsive web design (2011) Wroblewski Luke Mobile First (2011) och

Karen McGrane Content strategy for Mobile (2012) Som material kommer jag ocksaring att

anvaumlnda kaumlllor fraringn naumltet och andra bocker

Med hjaumllp av de kritiska punkter jag hittar fraringn kaumlllor kommer jag att anvaumlnda som metod

foumlr att vidareutveckla designen foumlr den mobila e-handel webbplatsen (909jp) jag har som

fallstudie

10

Med hjaumllp av undersoumlkningen om e-handel foumlr mobiler kommer jag att veta vilka saker

det ska finnas paring sidan saringsom kategorier foumlr produkter kundvagn incheckning osv

15 Begrepp

SEO aumlr foumlrkortning fraringn engelska rdquoSearch Engine Optimizationrdquo och oumlversaumltts till Soumlk-

motoroptimering paring svenska Soumlkmotoroptimeringen anvaumlnds foumlr att faring en webbplats att

synas saring houmlgt upp som moumljligt bland resultaten vid soumlkningar i soumlkmotorer (Belinger

2014)

Call to action knapparna aumlr knappar som leder anvaumlndarna vidare till en viss sida Var-

foumlr man kallar det foumlr rdquoCall to actionrdquo aumlr for att knapparna ska kunna faringnga uppmaumlrksam-

heten paring anvaumlndarna foumlr att klicka sig vidare Knapparna kan vara tex meny- knappar

eller bilder som anvaumlnds som en laumlnk till en annan sida (Mehra 2015)

Hamburgarmenyn aumlr menyn som anvaumlnds paring webbplatsen foumlr smarttelefoner Haumlr aumlr

exempel paring menyn

Media Queries aumlr en CSS3-modul som tillaringter inneharingll rendering att anpassa sig till

olika skaumlrmupploumlsningar saringsom smarttelefoner surfplattor och datorskaumlrmar Foumlr att

kunna faring sin webbplats att anpassa sig till olika skaumlrmupploumlsningar naumlr skaumlrmen blir

mindre anvaumlnder man Media Queries i CSS3 (Wikipedia)

11

2 VAD AumlR E-HANDEL

E-handel fungerar genom att ett foumlretag eller individuell person koumlper saumlljer ut eller byter

produkter information eller tjaumlnst via internet eller andra datornaumltverk (Wikipedia)

En stor del av e-handeln aumlger rum i de saring kallade naumltbutikerna Naumltbutiker har ett lager

och en webbplats daumlr kunden goumlr sina bestaumlllningar Paring webbplatsen indelas varorna i

olika kategorier saring att anvaumlndarna paring sidan kan laumltt hitta varorna Foumlr att hitta varorna

snabbare brukar de flesta naumltbutikerna ocksaring ha en soumlkfunktion Paring sidan har anvaumlndarna

moumljligheter att saumltta produktenprodukter i kundvagnen och sedan fortsaumltta shoppa tills

man aumlr klar Vid bestaumlllningen garingr man bara till kassan daumlr anvaumlndaren kommer att vaumllja

transportsaumltt ange kontakt- och leveransuppgifter och vaumllja betalningsmetod Betalnings-

metoden aumlr vanligtvis kreditkort eller Paypal

Fakturan daumlrmed brukar inte ges till kunden daring det skulle innebaumlra oumlkade risker foumlr be-

draumlgerier foumlr naumltbutikerna Foumlr fakturakoumlp behoumlver kundens identitet faststaumlllas paring ett saumlk-

rare saumltt

Naumlr betalningen har gjorts levereras varorna vanligtvis som postpaket eller direkt leverans

till doumlrren foumlr stoumlrre varor saringsom moumlbler (E-handel 2015)

ldquoE-handeln fortsatter att vaxa Nastan hela tillvaxten sker numera i mobilen Det ar

inte priset som gor att vi handlar pa natet De viktigaste skalen ar att det ar smidigare

och att utbudet ar storre an i traditionella butikerrdquo

-Larsson Daniel 2014

21 Mobil e-handel

Mobil e-handel (m-handel) aumlr en term som beskriver en foumlrsaumlljningstransaktion som an-

vaumlnder traringdloumlsa elektroniska enheter saringsom smarttelefoner och surfplattor En mobil e-

handel webbplats fungerar i alla smarttelefoner och surfplattor och aumlr anpassad samt op-

timerad foumlr mobilens webblaumlsare

12

Foumlr att naring den mobila webbplatsen behoumlver man inte skriva in mobil adress eller aktivt

vaumllja att visa den mobila butiken Den mobila webbplatsen av en e-handel kaumlnner auto-

matiskt igen om man anvaumlnder en dator eller en mobil och visar daring upp en optimerad

version som anpassas efter anvaumlndarnas behov (Nordisk e-handel)

I den mobila versionen av e-handel brukar kategorier bestaring av endast en sida Foumlr att se

paring de resterande produkter i kategorierna kan man trycka paring rdquoVisa flerrdquo som man oftast

hittar laumlngst ner som en knapp eller laumlnk Detta goumlr uppladdningstiden paring sidan betydligt

snabbare och anvaumlndarna slipper vaumlnta Vaumlntande kan leda till avbrutna koumlp

Foumlrutom kategorier produkter och kassa i sjaumllvbetjaumlningsbutik foumlr kunder med produkter

som aumlr optimerade foumlr mobilanvaumlndarna aumlr ocksaring betalvaumlxeln foumlr kortbetalning specialan-

passad Detta goumlr det snabbare och enklare foumlr anvaumlndarnakunderna att avsluta sina koumlp

och betala med sina betalningskort (Mobil e-handel 2012)

22 Varfoumlr handla med mobil

Foumlr att kunna designa en ny mobil e-handel foumlr en kund aumlr det foumlrst jaumltte viktigt att veta

varfoumlr anvaumlndarna vaumlljer att koumlpa produktertjaumlnster med en smarttelefon eller surfplattor

Med hjaumllp av DIBS aringrliga rapport som gjordes i Sverige 2014 visas det att den viktigaste

orsaken till att anvaumlndarna handlar med sin mobil aumlr att det aumlr smidigare och sparar tid

Samtidigt aumlr det viktigt att inte heller gloumlmma bort att andra handlingsmotiv lyfts fram

som viktiga av mer aumln haumllften av alla tillfraringgade E-handel aumlr bra paring maringnga olika saumltt Den

moumlter konsumenternas behov och oumlnskemaringl i stor grad

Foumlr den nordiska befolkningen ska tidsbesparing enligt rapporten vara allra viktigaste foumlr

35-44 aringringar och minst viktig foumlr de yngsta aringldersgruppen 15-24 aringr som foumlr vilka laringga

priser istaumlllet spelar mer roll Utoumlver laringga priser drivs ungdomarna ocksaring oftast av det

stoumlrre utbudet som naumltbutikerna erbjuder paring internet

13

Figur 21 Viktigaste skaumllet att naumlthandel sparar tid

Enligt statiken visar det viktigaste skaumllet varfoumlr man anvaumlnder mobilen foumlr e-handel

64 saumlger att det sparar tid och aumlr smidigt

58 saumlger att det aumlr foumlrmaringnligare

56 saumlger att det aumlr enklare att jaumlmfoumlra mellan olika produkter

43 saumlger att det finns stoumlrre produktutbud

52 saumlger att det aumlr alltid oumlppet

23 Antalet kop okar pa mobilen

Enligt DIBS aringrliga rapport (2014) om mobil e-handel oumlkar antalet mobila e-handel kon-

sumenter hela tiden Nedan finns en figur om antalet under aringr 2013-2014 Figuren visar

hur maringnga garingnger konsumenterna har handlat varortjaumlnster med en smarttelefon eller

surfplattor under de senaste sex maringnaderna Naumlthandeln paring mobila enheterna oumlkar sakta

med saumlkert De som har handlat paring naumltet foumlrut handlar nu ocksaring allt mer Andelen stor-

konsumenter de som handlat minst 25 garingnger paring ett halvaringr har nu foumlrdubblats

De som handlade en eller tvaring garingnger har minskat fraringn 42 procent aringr 2013 till 35 procent

aringr 2014 vilket goumlr det till 17 procent mindre I snitt handlar konsumenter 1114 garingnger

per aringr med sin smarttelefon eller surfplattor

14

Figur 22 Antal oumlkar paring mobilen

Mobilen finns alltid naumlrmast

Enligt rapporten ska den vanligaste orsaken till varfoumlr anvaumlndarna vaumlljer att handla fraringn

mobilen vara foumlr att mobilen fanns naumlrmast till hands vid koumlpoumlgonblicket

Figur 23Varfoumlr handlade du med smarttelefon

15

60 saumlger att smarttelefon fanns naumlrmaste till hands vid koumlptillfaumlllet

27 anvaumlnder en app foumlr att handla online

17 oumlppnade ett erbjudande via e-mail i sin smarttelefon

5 har ingen dator

3 var i butik och koumlpte varan paring naumltet istaumlllet

4 hade ingen internetanslutning

3 scannade en QR-kod

Vad handlar vi med mobil

Foumlr att snabbt faringr en inblick i vad konsumenterna handlar med mobil ser vi haumlr nedan

(Figur 24) Konsumenter handlar mer av naumlstan allt Kunder som spenderar mer aumln 500

euro med smarttelefoner eller surfplattor koumlper i foumlrsta hand resor medan de som handlar

foumlr mindre aumln 100 euro laumlgger pengar paring media

Figur 24 Mobilt handlar vi mer av naumlstan allt

16

24 Bra mobila e-handel webbplatser

En bra mobil webbplats aumlr naumlr sidan aumlr enkel att anvaumlnda fast man bara anvaumlnder ett oumlga

och en tumme

rdquoWhen reflecting on a lot of mobile usage patterns I like to imagine people as rdquoone

eyeball and one thumb One thumb because they are likely to be holding their mobile

in one hand and using a single thumb to control it one eyeball because in many loca-

tions where mobile devices are use we only have peoples partial attentionrdquo

-Wroblewski Luke 2011)

Man kan aldrig exakt veta var anvaumlndaren befinner sig naumlr han surfar med sin smarttele-

fon Han kanske befinner sig i vardagsrummet foumlr att sloumltt surfa efter en ny lampa medan

han kollar paring Tvn Kanske anvaumlndaren sitter hemma och har en stadig wifi eller kanske

paring sommarstugan och har 3G4G som byter mellan olika naumltverk osv (Thoren 2012)

Naumlr anvaumlndaren goumlr naringgonting samtidigt som han surfar paring webbplatsen har han bara den

partiella uppmaumlrksamheten Daumlrfoumlr aumlr det betydligt fler kontexter som man maringste ta haumln-

syn till naumlr man designar webbplatser foumlr mobiler (Wroblewski 2011)

Haumlr aumlr tvaring bra exempel av lyckad e-handel foumlretag i vaumlrlden De har inte lyckats bra bara

med att saumllja produkterna utan ocksaring med designen Haumlr nedan aumlr bilderna paring mobil de-

signen av Rakutencom och Amazoncom

17

Figur 25 Hemsida paring rakutencom foumlr mobiler

Direkt naumlr man kommer paring sidan hittar man inloggningen koumlpvagnen soumlkfunktionen

menyn och speciellt de stora bilderna paring katalogerna vilket aumlr jaumltte laumltta att klicka paring

Fastaumln mobilskaumlrmen aumlr liten goumlr den haumlr det bara inte laumltt att navigera runt sidorna utan

ocksaring trevligt att vara paring sidan

Amazoncom har ocksaring lyckats bra med designen Naumlr man kommer till sidan ser man

direkt Sign in Department Wish List Deals och Search funktionen Under search funkt-

ionen ser man genast en inspirerande reklam som paringminner oss om att det aumlr varingr

rdquoSPRINGacuteS PERFECT PANTSrdquo Fast sidan har jaumltte maringnga objekt i den aumlr det trots allt

18

jaumltte laumltt att navigera runt sidorna Man tappar inte bort sig och man hittar laumltt det som

man aumlr ute efter

Figur 26 Hemsida paring amazoncom foumlr mobiler

19

25 Kritiska punkterna foumlr bra mobil design paring e-handel

Naumlr man handlar med en mindre skaumlrm aumlr det mera utmanande eftersom skaumlrmen aumlr liten

och anvaumlndarna brukar inte ha tillraumlckligt med taringlamod att sitta och soumlka naringgonting foumlr

laumlnge fraringn en liten skaumlrm Daumlrfoumlr aumlr det viktigt att veta vilka saker man boumlr beakta naumlr

man designar en mobil e-handel I det haumlr stycket kommer jag att lista upp sakerna man

boumlr veta naumlr man designar en mobil e-handel webbplats

Naumlr man handlar med en mindre skaumlrm aumlr det mera utmanande eftersom skaumlrmen aumlr liten

och anvaumlndarna brukar inte ha tillraumlckligt med taringlamod att sitta och soumlka naringgonting foumlr

laumlnge paring en liten skaumlrm Daumlrfoumlr aumlr det viktigt att veta vilka saker man boumlr beakta naumlr man

designar en mobil e-handel I det haumlr stycket kommer jag att lista upp kritiska saker man

boumlr veta naumlr man designar en mobil e-handel webbplats

1 Call-to-action knapparna foumlr smaring paring en mobilskaumlrm

Naumlr man designar webbsidor foumlr mobiler kan det ibland vara en utmaning att faring

allt att rymmas in Daumlrfoumlr brukar ocksaring webbdesigner minska de sk rdquocall to act-

ionrdquo knapparna Om anvaumlndaren maringste zooma in foumlr att klicka paring en knapp men

av misstag klickar paring en annan knapp kan det bli frustrerande foumlr dem och detta

leder sedan till att de laumlmnar sidan Daumlrfoumlr aumlr det mycket viktigt att designa knap-

parna och inneharingllet saring att anvaumlndarna laumltt naringr dem

2 Soumlkfunktionen ska alltid finnas med

Paring mobila e-handel webbplatser ska soumlkfunktionen alltid synas saring att man laumltt skall

kunna soumlka produkterna Laringt oss saumlga att kunden inte hittar produkten han soumlker

och vill anvaumlnda soumlkfunktionen Han letar och letar efter soumlkfunktionen utan re-

sultat Detta orsakar inte bara att kunden laumlmnar din sida men ocksaring kommer han

att beraumlttar det vidare aringt andra hur han upplevde din sida (Mehra 2015)

3 Laumltt att navigera

20

Det ska vara laumltt att navigera runt sidorna Anvaumlndarna ska veta var han aumlr och hur

han kommer vidare efter att han tex har valt produkten Menyerna foumlr katalo-

gerna ska vara laumltta att navigera Om menyerna foumlr katalogerna aumlr foumlrvirrande och

svaringra foumlr anvaumlndaren att hitta produkterna blir han laumltt irriterad Exemplar paring (fi-

gur 27) haumlr nedan visar att menyerna aumlr ganska foumlrvirrande paring vaumlnstra bilden me-

dan paring houmlgra sidan aumlr det klart och tydligt (Laya 2014)

Figur 27 Jaumlmfoumlrelse mellan en bra och daringlig navigation httpconversionxlcommake-mobile-convert

4 Ta de roliga ur shopping

Det vanligaste och stoumlrsta misstaget som de flesta foumlretag goumlr naumlr de designar foumlr

mobil e-handel aumlr att de foumlrsoumlker flytta kunderna fraringn shopping till koumlp Shopping

paring en stationaumlr dator goumlr det laumltt naumlr det oftast finns ett enormt antal produkter att

vaumllja mellan och det aumlr laumltt att blaumlddra runt Men foumlr mobiler aumlr det annat

Maringnga foumlretag foumlrsoumlker pressa ihop hela shopping-processen till smaring tabbar och

minska paring inneharingllet Som resultat kommer anvaumlndaren att kaumlnna sig paringtvingad

21

att goumlra snabba beslut paring inkoumlp Istaumlllet foumlr att ge anvaumlndarna en saringdan paringtvingad

upplevelse kan man istaumlllet locka anvaumlndarna med all information vi har att er-

bjuda

Det betyder inte att anvaumlndarna som besoumlker e-handeln med en smarttelefon inte

vill njuta av shoppingen saringsom de goumlr paring stationaumlra datorer Naumlr man designar en

mobil e-handel skall kunderna kunna faring njuta av shoppingen och jaumlmfoumlra mellan

olika produkter innan dem bestaumlmmer sig vilken produkt de vill koumlpa (Laya 2014)

ldquoBut we see many companies try to compress the whole shopping process into a

small number of taps The result is a mobile app or website that forces the user to

make a quick purchase decision rather than giving a great shopping experience

To the user it feels like the site switches from giving enticement to issuing de-

mandsrdquo

- Laya Peep 2014

5 Laringngsam uppladdningstid foumlr mobiler spelar en stor roll

Det aumlr mycket viktigt att haringlla sidstorleken saring liten som moumljligt saring att det aumlr snabbt

att ladda upp sidan

ldquoMobile users want to take quick action and also Google has reportedly started

including page speed for ranking websites in the search results so that makes it

even more important to have a lighter siterdquo

- Mehra Gagan 2015

Varingren 2014 rapporterade Radware (httpwwwradwarecomspring-sotu2014)

att majoriteten av besoumlkarna kommer att oumlverge webbplatsen efter att ha vaumlntat i

3 sekunder foumlr att ladda upp sidan (Laya 2014)

Om det finns mycket inneharingll paring en sida kan man som alternativ separera inne-

haringllet i olika flikar (Mehra 2015)

Jag har tagit ett exempel fraringn Amazoncom Paring produktsidan har ja valt en orange

vaumlska Foumlr att tex ytterligare laumlsa om produktbeskrivningen rdquoAbout this itemrdquo ser

22

jag en pil som aumlr paring houmlgra sidan (Figur 29) Naumlr jag trycker paring pilen eller laringdan

kommer jag till en annan sida daumlr jag kan laumlsa hela produktbeskrivningen (Figur

210) Paring det haumlr saumlttet inneharingller sidan all information man behoumlver men separe-

rade i olika flikar saring att det blir snabbare att ladda upp sidan

Figur 28 Produktsida paring amazoncom

23

Figur 29 Produktsida paring amazoncom

Figur 210 Produktsida paring amazoncom About this item

24

6 Misslyckade analyseringar av anvaumlndarna

Naumlr man bygger webbsidor aumlr det viktig att goumlra anvaumlndbarhetstest och analysera

kundernas beteende Hur anvaumlndarna kaumlnner sig naumlr de anvaumlnder sidan aumlr mycket

viktigt och avgoumlr hur bra din business kommer att rulla

Analyseringen aumlr den kritiska inputen foumlr designen Med analyseringen ser man

dels vilka mobila apparater anvaumlndarna anvaumlnder och om det aumlr naringgra svaringrigheter

och obekvaumlmligheter anvaumlndarna upplever vid anvaumlndningen Dessa faktorer aumlr

viktiga foumlr att saumlkerstaumllla om den mobila upplevelsen uppfyller behoven hos kon-

sumenterna Testet och analysen maringste goumlras kontinuerligt foumlr att vi skall kunna

saumlkerstaumllla att kunderna har det bekvaumlmt (Mehra 2015)

7 Mindre inneharingll foumlr mobilanvaumlndarna

E-handel webbplatser brukar goumlmma inneharingll foumlr att goumlra sidan mindre Sidan aumlr

i sjaumllva verket inte mindre men bara goumlmd foumlr anvaumlndarna som anvaumlnder sina

smarttelefoner Enligt Mehra Gagan aumlr det inte bra om det finns mindre inneharingll

foumlr mobilanvaumlndarna Oavsett med vilka enheter anvaumlndarna aumlr paring sidan boumlr det

finnas lika mycket inneharingll paring alla enheterna De flesta som handlar online brukar

aumlga flera enheter och med stor sannolikhet anvaumlnder de ocksaring andra enheter foumlr

att surfa Om inneharingllet inte ser likadant ut paring stationaumlra datorer och smarttelefo-

ner kan det orsaka daringlig anvaumlndarupplevelse foumlr anvaumlndaren Enligt Google an-

vaumlnder 90 av dem som handlar paring internet olika enheter Att begraumlnsa deras

anvaumlndning aumlr naringgonting som man boumlr undvika (Mehra 2015)

25

3 MOBILANPASSADE LOumlSNINGAR

Det finns maringnga olika loumlsningar att bygga sin webbplats med Det aumlr viktigt att komma

iharingg att mobila anvaumlndande oumlkar hela tiden Det staumlller nya krav paring webbdesign och an-

vaumlndargraumlnssnitt Anvaumlndarna foumlrvaumlntar sig idag att de ska kunna ta del av allt inneharingll paring

webben oavsett om de anvaumlnder en smarttelefon eller en surfplatta De mobilanpassade

loumlsningarna foumlr e-handel kan tex vara Responsiv design Adaptiv Design Mobilbutik

eller en mobil applikation

31 Adaptiv design

En adaptiv webbplats aumlr uppbyggd saring att den aumlr optimerad foumlr specifika skaumlrmstorlekar

Den anvaumlnder servern foumlr att upptaumlcka den enhet som anvaumlnds foumlr att visa webbplatsen

Byggande av webbplatsen med adaptiv metoden aumlr tidskraumlvande paring grund av behovet att

optimera sidan foumlr varje vald plattform front-end och back-end Innan man boumlrjar bygga

webbplatsen maringste man avgoumlra vilka alla plattformar webbplatsen kommer att optimeras

till Foumlrdel med adaptiv design aumlr att den har snabb uppladdningstid

rdquoCompared to Responsiv design adaptive web design is website-optimised for each

platform separately and makes use of the opportunities presented by the platform as

well as the models and functions It offers fast-loading pages due to the server detec-

tion device and browser sending data tailored for a particular devicerdquo

-Lubo Ruska 2013

Att vaumllja den raumltta loumlsningen handlar om att foumlrstaring vad maringlgruppen foumlrvaumlntar sig och vad

de behoumlver Eftersom foumlretaget 909jp inte aumlr en jaumltte stort foumlretag saringsom Ikea eller Ama-

zon som har oberaumlknat antal med produkter tycker jag att Responsiv design med Mobile

first metoden aumlr den mest effektiva metoden foumlr denna forskning

26

32 Responsiv design

Responsiv webbdesign aumlr ett av de populaumlraste saumltten att optimera en webbplats Re-

sponsiv webbdesign moumljliggoumlr att layouten foumlraumlndras beroende paring vilken skaumlrmstorlek

och skaumlrmupploumlsningen som anvaumlndarna har och beroende paring vilka funktioner som

webblaumlsaren stoumldjer (Responsive Design 2014)

Oberoende om anvaumlndarna anvaumlnder dator laumlsplatta eller sin mobiltelefon kommer sidan

att anpassa sig paring olika saumltt foumlr att anvaumlndarna vid alla tillfaumlllen ska ha en saring rik upplevelse

som moumljligt Man kan saumlga att en webbsida paring mindre skaumlrmar aumlr med ett annat ord en

krympande version av den stoumlrre skaumlrmstorleken

Inneharingllet saringsom kolumner och bilder paring webbsidan kommer automatiskt att anpassas

beroende paring skaumlrmstorleken Och detta aumlr paring grund av Grid systemet Allt inneharingll skall

haringllas inom ett Grid system Grid systemet skall skydda allt fraringn att bryta samman naumlr

sidan anvaumlnds paring olika skaumlrmstorlekar

Det finns 11 olika Grid storlekar tvaring kolumner tre kolumner fyra kolumner fem kolum-

ner sex kolumner sju kolumner aringtta kolumner nio kolumner tio kolumner 11 kolumner

och 12 kolumner Som exempel visar jag en figur av 12 kolumners Grid system (Swan

2014)

27

Figur 31 Ett exempel paring Grid system av 5 olika skaumlrmstorlekar (Phil Swan 2014)

Responsiv webbdesign fungerar med hjaumllp av HTML5 CSS media Query och Java-

Script Det bygger paring att webbutvecklare istaumlllet foumlr exakta storlekar maumltt i pixlar anger

sidelements storlekar i procent i jaumlmfoumlrelse med skaumlrmens storlek

Naumlr sidelementens storlekar aumlr i procent goumlr det att sidan blir flexibel och den anpassas

efter webblaumlsarens storlek medan fasta pixlar ger en scrollbar (rull-list) (Responsive De-

sign 2014)

33 Varfoumlr Responsiv design

Foumlrdelar med Responsiv design aumlr att den erbjuder en bra anvaumlndarupplevelse foumlr olika

enheter och skaumlrmstorlekar Tack vare den Responsiva designen har webbredaktoumlrer laumlt-

tare att hantera inneharingllet eftersom de bara har en version att hantera Ur en SEO synvin-

kel fungerar Responsiv design baumlttre eftersom den koncentrerar inneharingllet istaumlllet foumlr att

vattna ur det med maringnga URL foumlr samma inneharingll

28

Med en Responsiv design aumlr en webbplats laumlttare att hantera Att ha flera olika versioner

av en webbplats innebaumlr mera arbete Flera olika versioner av en webbplats innebaumlr sepa-

rata sidor att redigera och separata insatser foumlr soumlkmotoroptimering och separata soumlkmo-

torkampanjer Daumlrfoumlr aumlr det en stor foumlrdel att bygga en webbplats med den Responsiva

metoden

Med en Responsiv design kaumlnner anvaumlndarna baumlttre igen sidan baringde paring stationaumlra datorer

och mobiltelefoner Bygger man specifika webbplatser foumlr mobiler och surfplattor kan

det laumltt haumlnda att det blir olika information paring webbplatserna och att de struktureras olika

Laringt oss foumlrestaumllla oss att naringgon anvaumlnder sin mobiltelefon paring lunchen foumlr att leta efter en

flygbiljett fraringn Helsingfors till Tokyo Personen hittar en webbplats som har bra erbju-

dande och bestaumlmmer sig foumlr att fortsaumltta kolla naumlr han eller hon kommer hem Naumlr per-

sonen har kommit hem anvaumlnder hen datorn istaumlllet foumlr mobilen Om webbplatsen som

personen kollade paring lunchpausen var en Responsiv webbplats faringr personen en smidig och

bra upplevelse vid oumlvergaringngen fraringn den mobila webbplatsen till stationaumlr dator

(Lindahl 2014)

Det aumlr vaumlldigt viktigt att ha sin webbplats att optimerad till saring maringnga enheter som moumljligt

foumlr att ingen vet vilka kommer att vara framtidens enheter och daumlrfoumlr anses en webbplats

som anpassar sig till maringnga olika format vara den baumlsta loumlsningen Innan man kan boumlrja

med att designa en Responsiv webbplats maringste man veta vilka skaumlrmupploumlsningar och

storlekar det finns tillgaumlngliga och aumlr populaumlra idag Foumlr att kunna rikta till de olika skaumlr-

mupploumlsningarna med Media Queries har jag listat upp olika enheternas skaumlrmupploumls-

ningar i pixlar haumlr nedan i tabellen

ResolutionGrafisk array Enhet som anvaumlnder denna resolution skaumlrmstorlek i pixel-

taumltheten i pixlar

2880x1800 15-inch Apple MacBook Pro with Retina display

2560 x 1700 Google Chromebook Pixel

2560 x 1600 Samsung Google Nexus 10

13-inch Apple MacBook Pro with Retina display

29

2560 x 1440 27-inch Apple iMac 102 111 113 122 (Late 2009 -

2012)

1920 x 1080 HTC One Samsung

Sony Xperia Z amp Xperia ZL

Asus PadFone Infinity

Acer Aspire S5

Asus Zenbook Prime

1600 x 900 Apple Macbook Air

1366 x 768 Small desktoplaptop screen resolution

Asus VivoTab RT

Samsung N350

1280 x 1024 Standard desktop screen resolution

1280 x 800 Asus PadFone 2

Samsung Galaxy Note

Sony Xperia Tablet S

1280 x 720 Sony Xperia S

HTC Windows Phone 8X

HTC One mini

1136 x 640 Apple iPhone 5 5S amp 5C

Apple iPod Touch (5th generation)

960 x 640 Apple iPhone 4 amp 4S

Apple iPod Touch (4th generation)

854 x 480 Sony Xperia ray

Nokia N9

800 x 480 Nokia Lumia 510 amp 520

Samsung Galaxy I Galaxy S Galaxy S Plus Galaxy S Ad-

vance Galaxy SL Galaxy S Duos Galaxy Xcover 2 Galaxy

Beam Nexus S Captivate Glide amp Galaxy S III mini

HTC Desire X HTC Desire V Desire VC Desire VT De-

sire U amp Windows Phone 8S

30

LG Optimus 2X Optimus EX Optimus L5 II Optimus Q2

amp Optimus Black

T-Mobile G2x

Asus E600

620 x 480 Blackberry Bold 9900 amp Bold Touch 9930

Blackberry Torch 9810

LG Optimus Z

640 x 360 Sony Ericsson Vivaz amp Vivaz Pro

Nokia 500 amp 5800 XpressMusic

Nokia N8 N97 E7 and X6

480 x 320 Apple iPhone 3G amp 3GS

Samsung Galaxy Ace

320 x 240 Nokia E71

Blackberry Curve 9220 amp 9320

Sony Ericsson txt

Samsung Galaxy Y amp Galaxy Chat

Nokia Asha 501

Figur 32 Resolutions referenser paring olika enheter

31

4 VAD AumlR MOBILE FIRST

Mobile first metoden aumlr en metod och arbetsprocess foumlr webbdesigners som aumlr skapad av

Luke Wroblewski Naumlr man jobbar med ett projekt och designar strukturerar och imple-

menterar en webbplats aumlr Mobile first metoden man paringboumlrjar arbetet med Med metoden

menar Wroblewski att man foumlrst boumlrjar designa webbsidor fraringn de minsta enheterna

Figur 41 Mobile First att bygga webbsidan fraringn den minsta skaumlrmen till den stoumlrsta skaumlrmen

Wroblewski som har skapat Mobile First metoden understryker att metoden ska priorite-

ras daring man skapar anvaumlndarupplevelser

Det finns tre viktiga anledningar foumlr att utveckla foumlr Mobile First

Den foumlrbereder foumlr den stora utveckling och nya moumljligheter som uppkommer

inom det mobila omraringdet idag (836 av vaumlrldens befolkning anvaumlnder internet

paring sin smarttelefon 2015)

Den goumlr att vi blir tvungna att prioritera och fokusera varingrt inneharingll genom att ac-

ceptera de begraumlnsningar som aumlr foumlrenade med mobil design

32

och goumlr att vi kan leverera innovativa upplevelser genom att bygga utifraringn nya

funktioner som finns inbyggda i de mobila enheterna (bla GEO lokalisering)

En mobil webbplats behoumlver endast ha en mycket enkel layout och navigeringen ska vara

laumltt och effektiv

Naumlr man designar med Mobile first metoden tvingas man goumlra viktiga beslut om vad som

ska prioriteras Naumlr den optimerad design foumlr en liten skaumlrm visas paring en stoumlrre skaumlrm

kommer det att bli laumlttare att designa paring de stoumlrre skaumlrmarna Allt som ska goumlras aumlr daring

bara att fylla paring inneharingllet och designa saring att det aumlr grafiskt tilltalande och laumltt att hitta

inneharingllet (Wroblewski 2011)

41 Varfoumlr Mobile first

Vaumlrlden vi lever i idag aumlr inte mera som foumlr tio aringr sedan Allt runtom oss har utvecklats

speciellt mobiltelefonerna Tidigare anvaumlndes mobiltelefoner bara foumlr att skicka med-

delandet ringa och ta emot samtal Nu anvaumlnds den till foumlr att dels ta bilder video GPS

navigation foumlr vaumlgvisning och speciellt internetanvaumlndningen saringsom Google nyheter

Facebook Youtube och mycket mer Paring grund av det har ocksaring varingr livsstil foumlraumlndrats

Internetanvaumlndning idag har blivit allt vanligare Idag anvaumlnder vi naumltet i skolan paring jobbet

eller var och naumlr som helst bara man har en smarttelefon eller surfplatta och naumltet kopplat

Tidigare boumlrjade man bygga en webbplats fraringn den stoumlrsta skaumlrmen medan den mobila

sidan var en biprodukt Laringt oss saumlga att man har en webbplats med en rik grafisk layout

och ser stilig ut paring stationaumlra datorer Naumlr man skalar ner sidan foumlr att passa en mobilskaumlrm

kommer resultatet att vara en smaumlrta foumlr varingra oumlgon Paring den lilla mobilskaumlrmen kommer

det att vara olaumlsligt och svaringrt att anvaumlnda Foumlr att naring inneharingllet maringste du tom zooma in

och ut eller skrolla till houmlger och vaumlnster Det haumlr kommer att ge en negativ bild av ditt

foumlretag och anvaumlndarna kanske aldrig mera besoumlker din webbplats (Wroblewski 2011)

Ett bra exempel aumlr Tokyo Skytree webbplats som aumlnnu idag inte ha byggt in funktionalitet

och designen foumlr mindre skaumlrmupploumlsningar paring den engelska sidan

33

Tokyo Skytree aumlr vaumlrldens naumlst houmlgsta torn efter Burj Khalifa Tornet aumlr Japans houmlgsta

byggnadsverk med en houmljd paring 634 meter Den oumlppnades 22 maj 2012 och under det foumlrsta

aringret hade den 64 miljoner besoumlkare fraringn hela vaumlrlden Trots det har de laringtit bli att utveckla

den engelska webbsidan Paring bilden ser man att hemsidan ser exakt likadant ut paring stationaumlr

dator och paring mobilen

Figur 42 Hemsidan paring Tokyo Skytree paring stationaumlr datorskaumlrm

34

Figur 43 Hemsidan foumlr Tokyo Skytree Foumlrsta bilden visar hur det ser ut normalt Andra bilden visar naumlr man zoomar

in

Naumlr man foumlrsoumlker zooma in foumlr att laumlsa inneharingllet hoppar sidbalken (paring vaumlnstra sidan) paring

texten Det haumlr ger en mycket daringlig anvaumlndarupplevelse och kan ge fel bild av turistplat-

sen Ett annat fel paring sidan aumlr naumlr man vaumlljer spraringk till japanska ser sidan inte likadant ut

35

Figure 44 Hemsidan paring Tokyo Skytree paring japanska

Om du kan laumlsa japanska kommer du att undra varfoumlr det finns massor med information

och sidan ser mycket trevligare ut paring den japanska sidan Paring den internationella sidan

dvs engelska ser det inte lika trevligt ut och inneharingller inte allt som det goumlr paring den

japanska sidan Det aumlr som om den stoumlrsta maringlgruppen aumlr foumlr japanska turister och som

om de skulle inte bry sig om turister fraringn utlandet

Utoumlver det har de ocksaring byggt en mobilsida foumlr den japanska webbsidan Varfoumlr satsa bara

paring den japanska sidan och inte den engelska sidan naumlr maringlgruppen aumlr hela vaumlrlden

36

Figur 45 Mobil sidan paring Tokyo Skytree paring japanska

Vi lever i 2015 saring alla borde veta att det aumlr vaumlldigt viktig att ha en mobil webbplats som

erbjuder en bra anvaumlndarupplevelse paring alla spraringk som webbplatsen erbjuder Naumlr man har

sin sida paring flera spraringk och aumlndaring bestaumlmmer sig att bygga sidan ordentligt bara paring ett spraringk

kan anvaumlndarna faring en fel bild av foumlretaget I vaumlrsta fall kommer anvaumlndarna tycka att sidan

aumlr oparinglitligt och aringterkommer aldrig igen

Mobile first metoden aumlr daumlrfoumlr en mycket effektiv metod att bygga sin webbplats med

Man boumlrjar med att bygga sin webbplats fraringn den minsta skaumlrmen Man tvingas goumlra be-

slut om vad som ska absolut prioriteras Arbetsprocessen foumlr oss webbdesigners blir

mycket effektivare genom att foumlrst designa fraringn den minsta skaumlrmen och sedan foumlrflytta

oss till de stoumlrre skaumlrmarna Har man ett 6 kvadratmeters sovrum och foumlrsoumlker faring sin saumlng

skrivbord hylla klaumldskaringp och soffan att rymmas in aumlr det ganska utmanande Men naumlr

man boumlrjar med det mest utmanande i arbetsprocessen blir arbetet ocksaring mindre utma-

nande desto stoumlrre rum eller skaumlrm det blir (Wroblewski 2011)

37

5 909JP

909jp aumlr en elektronisk handel en moumlbelaffaumlr som saumlljer vaumlsterlaumlndska produkter Den

elektroniska butiken kommer att oumlppnas i Japan 2015 Deras foumlrvaumlntningar aumlr att faring in

en miljon dollar i foumlrsaumlljning per aringr I deras elektroniska moumlbelaffaumlr saumlljs bla stolar bord

soffor och lampor Maringlgruppen aumlr alla konsumenter mellan 18-60 aringringar

Japaner aumlr intresserade av vaumlsterlaumlndska produkter och livsstil men foumlr de flesta varor aumlr

designen knutna till deras egen kultur vilket goumlr dem mer intresserad Det aumlr ocksaring mycket

viktigt att ha sin hemsida paring japanska eftersom 99 av den japanska befolkningen foumlre-

drar att inte laumlsa inneharingllet paring andra spraringk (Khurana)

Japan aumlr ett land med vaumlrldens tredje stoumlrsta ekonomi paring 5 biljoner De har vaumlrldens ti-

onde stoumlrsta befolkning med ca 1271 miljoner invaringnare varav 70 av den totala befolk-

ningen anvaumlnder internet och 24 av dem anvaumlnder internet paring sin smarttelefon

(Khurana)

Viktigt med detta projekt aumlr att sikta aringt raumltt haringll och betjaumlna kunderna paring det baumlsta saumlttet

via webbplatsen Foumlr att kunna faringnga saring maringnga kunder som moumljligt aumlr det mycket viktigt

att designa en webbplats som aumlr anvaumlndarvaumlnlig stilig och laumltt att anvaumlnda (Wroblewski

2011)

Jag har daumlrfoumlr kommit underfund med att anvaumlnda Mobile first och Responsiv design

metoden foumlr att utveckla den mobila 909jp sidan Med tanke paring att det aumlr en Responsiv

design skall layouten paring den mobila versionen ocksaring passa in med de stoumlrre skaumlrmarna

naumlr sidan skalas upp Det aumlr dock viktigt poaumlngtera att jag endast kommer att koncentrera

mig paring den mobila designen och utveckla designen endast foumlr denna forskning

38

6 ANALYS AV DEN NYA DESIGNEN

Med hjaumllp av den tidigare designen paring 909jp och de kritiska punkterna jag har hittat under

forskningen har jag skapat en ny och foumlrbaumlttrad design av webbplatsen foumlr mobiler I det

haumlr kapitlet kommer jag att visa naringgra exempel paring den tidigare designen och jaumlmfoumlra den

med nya designen samt analysera arbetet

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger)

1 Call-to-action knapparna

Under hela arbetsprocessen har jag haft i minnet att navigeringar laumlnkar och knap-

parna ska vara tillraumlckligt stora att klicka paring I den tidigare designen har de stora

bilder paring kategorier vilket jag tycker aumlr en bra design att aringtervaumlnda

39

2 Soumlkfunktionen

Paring den tidigare versionen haumlr nedan ser man att soumlkfunktionen inte finns med

medan paring den nya designen ser man soumlkfunktionen genast naumlr man kommer till

sidan Som tidigare framfoumlrdes att soumlkfunktionen alltid ska synas saring att man laumltt

skall kunna soumlka fram produkterna Om soumlkfunktionen inte finns med eller aumlr svaringr

att hitta naumlr den behoumlvs kan det orsaka missnoumlje hos anvaumlndarna (Mehra Gagan

2015)

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp

Figur 63 Soumlkfunktionen paring den nya designen 909jp

40

3 Laumltt att navigera

Naumlr skaumlrmen aumlr liten aumlr det viktig att ha en enkel layout (Wroblewski 2011)

Jag har daumlrfor i den nya designen flyttat rdquoHemrdquo och rdquoBlogrdquo knapparna bort fraringn

den oumlvre menyn Hem-knappen finns nu i hamburgarmenyn paring vaumlnstra sidan me-

dan Blog-knappen finns i footer Detta goumlr att det ser mera organiserat ut

Figur 64 Gamla designen

Laringt oss foumlrflytta vidare till menyer foumlr kategorier Paring hemsidan har man tvaring alter-

nativ att naring kategorierna Foumlrsta aumlr den hamburgarmenyn knappen paring vaumlnstra si-

dan I menyn aumlr kategorierna indelade i fyra delar stolar lampor ergonomisk och

soffa amp middag Detta goumlr det laumltt och klart foumlr anvaumlndarna var produkterna finns

Eftersom vi bara har partiell uppmaumlrksamhet fraringn anvaumlndarna naumlr de aumlr paring sina

smarttelefoner har jag valt att saumltta in ikoner i menyn (Figur 65) Naumlr anvaumlndaren

bara anvaumlnder ena oumlgat foumlr att kolla paring mobilen och andra oumlgat foumlr naringgonting annat

ska den lilla skaumlrmen med webbplatsen kunna faringnga uppmaumlrksamheten samt un-

derlaumltta anvaumlndningen av webbplatsen (Wroblewski 2011)

41

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny

Andra menyn for kategorierna aumlr de fyra bilderna under Aeron chair slideshowen

Paring den tidigare designen ser man endast ett foumlnster av kategorierna som aumlr place-

rade i en kolumn som upprepas loggraumltt (Figur 66) Det haumlr goumlr att anvaumlndaren

maringste skrolla ner foumlr att se varenda kategori vilket kan orsaka obekvaumlmlighet Att

se flera kategorier paring samma skaumlrm sparar tid och anvaumlndaren kommer aumlven baumlttre

iharingg var sakerna finns Att ha bara rdquoenrdquo stor bild som syns paring skaumlrmen och vara

tvungen att skrolla ner foumlr att se naumlsta bild aumlr frustrerande Paring den nya designen

har jag tvaring rutor av kategorier bredvid varandra (Figur 66)

42

Figur 66 Kategorier paring den gamla designen (till vaumlnster) Kategorier paring den nya designen (till houmlger)

4 Ta det roliga ur shopping

Paring den nya designen straumlvar jag efter att erbjuda en bekvaumlm shopping-upplevelse

Naumlr anvaumlndarna besoumlker e-handeln med en smarttelefon foumlrvaumlntar hanhon sig

ocksaring att kunna ta del av allt inneharingll och goumlra jaumlmfoumlrelser med andra produkter

Jag har daumlrfoumlr i den nya designen pressat ihop laumlngden paring kolumnhoumljden som om-

ringar produkten Som resultat ser vi nu fyra produkter paring samma skaumlrm (Figur

67) I den tidigare designen ser vi en enda produkt paring en skaumlrm och foumlr att se

andra produkter maringste vi skrolla ner Paring det haumlr saumlttet har anvaumlndarna svaringrare att

jaumlmfoumlra produkterna (Laya 2014)

43

Figur 67 Tidigare produktsida (till vaumlnster) Ny produktsida (till houmlger)

I den tidigare designen ser vi ocksaring att det finns endast produktens bild produk-

tens namn koumlpvagnen och infoikonen Om man vill faring reda paring produktens inform-

ation maringste man klicka paring produktens bild eller paring infoikonen som foumlr oss direkt

till sjaumllva produktens sida Bara foumlr att man vill faring reda paring vad det aumlr foumlr produkt

foumlrs man vidare till en annan sida Det haumlr kan orsaka att kunden inte njuter totalt

av shoppingen och dessutom kan han inte jaumlmfoumlra produkterna naumlr han aumlr paring ka-

tegoriernas sida (Laya 2014)

Laringt oss hoppa vidare till den nya designen (Figur 68) Paring den nya designen har

jag satt in en kort detaljbeskrivning foumlr varje produkt Dessutom naumlr man klickar

paring infoikonen paring houmlgra sidan kommer man inte direkt till produktsidan utan det

kommer att dyka upp en inforuta som har en kort beskrivning paring produkten Om

anvaumlndaren aumlr intresserad av produkten kan han garing in till sjaumllva produktsida ge-

nom att klicka paring rdquoView productrdquo eller ocksaring paring produktbilden daumlr hanhon kan

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

DEGREE THESIS

Arcada

Degree Programme Film och television

Identification number 4961

Author Vikanda Nurmi

Title Mobile E-commerce with Responsiv design and Mobile

First method

Supervisor (Arcada) Jutta Toumlrnqvist

Commissioned by

Abstract

The aim of this thesis is to research how to develop and improve user experience in e-

commerce for mobiles and to describe about Responsive Design and the Mobile First

method To build mobile e-commerce is not the same as building any website There are

hundreds of things that should be considered and know before the work can begin It is all

about selling products and getting consumers to be interested in becoming members of your

e-commerce site

In my thesis I use the case study as a research method The case study is based on solving

a case with the help of research and investigation With my knowledge of web develop-

ment I will further develop 909jp online furniture store with the help of sources and the

critical points found during the research The developed 909jp website for mobiles will

not be used for real This case study will be an experiment for research purposes Sources

used in this thesis are references factual text technical literature and figures to clarify the

content

In the research will not include advanced coding and the technical part I will mainly focus

on the design development of mobile e-commerce

At last I will with the help of my research compare and analyse the developed design with

the old design

Keywords Mobil e-handel Mobile First Responsive design

Number of pages 51

Language Swedish

Date of acceptance

OPINNAumlYTE

Arcada

Koulutusohjelma Film och television

Tunnistenumero 4961

Tekijauml Vikanda Nurmi

Tyoumln nimi Mobiili verkkokauppa Responsive Design ja Mobile First

menetelmillauml

Tyoumln ohjaaja (Arcada) Jutta Toumlrnqvist

Toimeksiantaja

Tiivistelmauml

Opintonaumlytetyoumln tavoitteena on tutkia miten kehittaumlauml ja parantaa kaumlyttaumljaumln kokemuksia

verkkokaupan mobiiliversiossa ja kuvailla kaumlsitteet Responsive design ja Mobile first me-

netelmauml Verkkokaupan rakentaminen mobiilia varten ei ole sama kuin rakentaa muita ta-

vallisia verkkosivuja On paljon asioita joita pitaumlisi harkita ja tietaumlauml ja ottaa huomioon

ennen kuin voi aloittaa rakentamisen Tavoitteena on tuotteiden myynti mutta myoumls kaumlyt-

taumljien rekisteroumlityminen asiakkaiksi

Opinnaumlytetyoumlssaumlni kaumlytaumln tapaustutkimusta tutkimusmenetelmaumlnauml Tapaustutkimus pe-

rustuu esimerkkitapauksen ratkaisemiseen tutkimuksen avulla Nettikehityksestauml keraumlauml-

mieni tietojen avulla kehitaumln edelleen konkreettista nettikauppaa Tulen kehittaumlmaumlaumln

909jp huonekaluliikkeen mobiililaitteille tarkoitettua nettikauppaa tutkimuksessa esille-

tulleilla laumlhdetietojen ja kriittisten kohtien avulla Kehittaumlmaumlaumlni uutta graafista ilmettauml

909jp verkkosivujen mobiiliinversioon ei kaumlytetauml kaumlytaumlnnoumlssauml taumlmauml tapaustutkimus teh-

daumlaumln ainoastaan opinnaumlytetyoumltaumlni varten

Tyoumlssaumlni en kaumlsittele koodausta ja teknistauml osa-aluetta Tulen ainoastaan keskittymaumlaumln

graafisen suunnittelun kehityksestauml mobiiliissa verkkokaupassa Laumlhteinauml kaumlytetaumlaumln viit-

tauksia faktateksteihin tietokirjallisuuteen ja kuviin jotka auttavat selventaumlmaumlaumln sisaumlltoumlauml

Lopuksi tulen tutkimustietojen avulla analysoimaan ja vertailemaan kehittaumlmaumlni ja suun-

nittelemani esimerkkisivustoa vanhaan sivustoon

Avainsanat Mobil e-handel Mobile First Responsive design

Sivumaumlaumlrauml 51

Kieli Ruotsi

Hyvaumlksymispaumlivaumlmaumlaumlrauml

INNEHAringLL

1 INLEDNING 8

11 Motiv foumlr aumlmnesvalet 8

12 Syfte 8

13 Avgraumlnsningar 9

14 Metod 9

15 Begrepp 10

2 VAD AumlR E-HANDEL 11

21 Mobil e-handel 11

22 Varfoumlr handla med mobil 12

23 Antalet kop okar pa mobilen 13

24 Bra mobila e-handel webbplatser 16

25 Kritiska punkterna foumlr bra mobil design paring e-handel 19

3 MOBILANPASSADE LOumlSNINGAR 25

31 Adaptiv design 25

32 Responsiv design 26

33 Varfoumlr Responsiv design 27

4 VAD AumlR MOBILE FIRST 31

41 Varfoumlr Mobile first 32

5 909jp 37

6 ANALYS AV DEN NYA DESIGNEN 38

7 SAMMANFATTNING 48

BOumlCKER 50

ELEKTRONISKA Kaumlllor 50

Figurer

Figur 21 Viktigaste skaumllet att naumlthandel sparar tid 13

Figur 22 Antal oumlkar paring mobilen 14

Figur 23Varfoumlr handlade du med smarttelefon 14

Figur 24 Mobilt handlar vi mer av naumlstan allt 15

Figur 25 Hemsida paring rakutencom foumlr mobiler 17

Figur 26 Hemsida paring amazoncom foumlr mobiler 18

Figur 27 Jaumlmfoumlrelse mellan en bra och daringlig navigation httpconversionxlcommake-

mobile-convert 20

Figur 28 Produktsida paring amazoncom 22

Figur 29 Produktsida paring amazoncom 23

Figur 210 Produktsida paring amazoncom About this item 23

Figur 31 Ett exempel paring Grid system av 5 olika skaumlrmstorlekar (Phil Swan 2014) 27

Figur 32 Resolutions referenser paring olika enheter 30

Figur 41 Mobile First att bygga webbsidan fraringn den minsta skaumlrmen till den stoumlrsta

skaumlrmen 31

Figur 42 Hemsidan paring Tokyo Skytree paring stationaumlr datorskaumlrm 33

Figur 43 Hemsidan foumlr Tokyo Skytree Foumlrsta bilden visar hur det ser ut normalt Andra

bilden visar naumlr man zoomar in 34

Figure 44 Hemsidan paring Tokyo Skytree paring japanska 35

Figur 45 Mobil sidan paring Tokyo Skytree paring japanska 36

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger) 38

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp 39

Figur 63 Soumlkfunktionen paring den nya designen 909jp 39

Figur 64 Gamla designen 40

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny 41

Figur 66 Kategorier paring den gamla design (till vaumlnster) Kategorier paring den nya design (till

houmlger) 42

Figur 67 Tidigare produktsida (till vaumlnster) Nya produktsida (till houmlger) 43

Figur 68 Inforutan som dyker upp 44

Figur 69 Produktsida av tabbar 45

Figur 610 View more 46

Figur 611 Stol kategori Show all 47

8

1 INLEDNING

11 Motiv foumlr aumlmnesvalet

Som Online Media studerande har jag alltid gillat att designa webbsidor Jag har alltid

varit intresserad av den haumlr inriktningen Ju mer man studerar desto mer vill man laumlra sig

Det att jag tycker om att designa webbsidor var inte enda orsaken till att jag valde mitt

aumlmne foumlr examensarbete Jag har alltid varit intresserad i elektronisk handel Hur faringr man

kunder att koumlpa sina produktertjaumlnster utan en fysisk saumlljare Hur marknadsfoumlr man och

hur naringr man baumlst kunderna daring foumlretaget med e-handel kan vara allt fraringn klaumldbutiker flyg-

bolag eller moumlbelaffaumlrer

Som webbdesigner har jag som uppgift att hjaumllpa kunderna att marknadsfoumlra deras foumlretag

eller produkter via webben Som aumlmne foumlr examensarbetet har jag valt att goumlra en fallstu-

die daumlr jag foumlrbaumlttrar den tidigare 909jp webbplatsen med hjaumllp av min forskning

Som bakgrund har jag kunskaper i webbdesign vilket jag kan anvaumlnda som verktyg En

bra webbplats maringste vara grafiskt attraktiv foumlr anvaumlndaren Med hjaumllp av det grafiska

maringste en bra webbplats daumlrmed lyckas leverera den information som anvaumlndarna aumlr ute

efter Det maringste vara laumltt att navigera runt sidorna samt hitta snabbt informationen an-

vaumlndarna vill naring Sidan maringste ocksaring kunna laddas ner snabbt aumlven via en laringngsammare

naumltuppkoppling foumlr att tillfredsstaumllla anvaumlndarna En webbplats maringste erbjuda en bra

funktionalitet samt anvaumlndarvaumlnlighet paring mindre skaumlrmar saringsom paring mobiler Som maringl

kommer jag att fokusera mig paring hur man kan utveckla och foumlrbaumlttra en e-handel design

foumlr mobiler

12 Syfte

Syftet med min uppsatts aumlr att laumlra mig att utveckla och foumlrbaumlttra anvaumlndarupplevelser i

e-handel foumlr mobiler Att handla paring naumltet med sin mobil sparar mer tid och maringnga garingnger

kan det vara mycket laumlttare Foumlr att lyckas med att bevisa aringt anvaumlndarna att en tjaumlnst aumlr

trovaumlrdig aumlr det jaumltte viktigt att erbjuda dem en bra och bekvaumlmt plats att handla online

9

Foumlr att lyckas med det maringste man ha en mycket bra design och funktionalitet paring webbsi-

dan I min uppsats kommer jag att fokusera paring design som byggs med Mobile first meto-

den Forskningsfraringgan i mitt examensarbete aumlr rdquoHur kan man baumlst utveckla en e-handel

webbplats foumlr mobilerrdquo

Arbetet skall vara till nytta foumlr webbdesigners och Online Media studerande som inte

tidigare har kunskaper inom e-handel foumlr mobiler och vill foumlrdjupa sig mera i det Arbetet

skall ocksaring vara till nytta foumlr dem som goumlr eller kommer att goumlra ett projekt inom e-han-

deln Det ska hjaumllpa dem oumlka foumlrstaringelse samt stoumlda dem i deras projekt

13 Avgraumlnsningar

I min uppsatts kommer det inte att staring om avancerad html och CSS kodning Jag kommer

fraumlmst att koncentrera mig paring strukturer och layouten och hur man baumlst kan uppnaring den

baumlsta anvaumlndarupplevelsen inom mobil e-handel Jag kommer inte att goumlra anvaumlndarbar-

hetstest men med hjaumllp av teorierna hittar jag de mest kritiska punkterna foumlr att kunna

goumlra en ny design till min fallstudie

14 Metod

Som metod kommer jag att undersoumlka strukturen layouten och anvaumlndarupplevelser foumlr

mobil e-handel i allmaumlnhet Forskningsmetoden paringminner naumlrmast om den vetenskapliga

fallstudiens metod

Metoden innebaumlr en plan foumlr att samla in organisera och integrera information och den

resulterar i ett speciellt forskningsresultat Jag kommer att anvaumlnda boumlckerna Ethan

Marcotte Responsive web design (2011) Wroblewski Luke Mobile First (2011) och

Karen McGrane Content strategy for Mobile (2012) Som material kommer jag ocksaring att

anvaumlnda kaumlllor fraringn naumltet och andra bocker

Med hjaumllp av de kritiska punkter jag hittar fraringn kaumlllor kommer jag att anvaumlnda som metod

foumlr att vidareutveckla designen foumlr den mobila e-handel webbplatsen (909jp) jag har som

fallstudie

10

Med hjaumllp av undersoumlkningen om e-handel foumlr mobiler kommer jag att veta vilka saker

det ska finnas paring sidan saringsom kategorier foumlr produkter kundvagn incheckning osv

15 Begrepp

SEO aumlr foumlrkortning fraringn engelska rdquoSearch Engine Optimizationrdquo och oumlversaumltts till Soumlk-

motoroptimering paring svenska Soumlkmotoroptimeringen anvaumlnds foumlr att faring en webbplats att

synas saring houmlgt upp som moumljligt bland resultaten vid soumlkningar i soumlkmotorer (Belinger

2014)

Call to action knapparna aumlr knappar som leder anvaumlndarna vidare till en viss sida Var-

foumlr man kallar det foumlr rdquoCall to actionrdquo aumlr for att knapparna ska kunna faringnga uppmaumlrksam-

heten paring anvaumlndarna foumlr att klicka sig vidare Knapparna kan vara tex meny- knappar

eller bilder som anvaumlnds som en laumlnk till en annan sida (Mehra 2015)

Hamburgarmenyn aumlr menyn som anvaumlnds paring webbplatsen foumlr smarttelefoner Haumlr aumlr

exempel paring menyn

Media Queries aumlr en CSS3-modul som tillaringter inneharingll rendering att anpassa sig till

olika skaumlrmupploumlsningar saringsom smarttelefoner surfplattor och datorskaumlrmar Foumlr att

kunna faring sin webbplats att anpassa sig till olika skaumlrmupploumlsningar naumlr skaumlrmen blir

mindre anvaumlnder man Media Queries i CSS3 (Wikipedia)

11

2 VAD AumlR E-HANDEL

E-handel fungerar genom att ett foumlretag eller individuell person koumlper saumlljer ut eller byter

produkter information eller tjaumlnst via internet eller andra datornaumltverk (Wikipedia)

En stor del av e-handeln aumlger rum i de saring kallade naumltbutikerna Naumltbutiker har ett lager

och en webbplats daumlr kunden goumlr sina bestaumlllningar Paring webbplatsen indelas varorna i

olika kategorier saring att anvaumlndarna paring sidan kan laumltt hitta varorna Foumlr att hitta varorna

snabbare brukar de flesta naumltbutikerna ocksaring ha en soumlkfunktion Paring sidan har anvaumlndarna

moumljligheter att saumltta produktenprodukter i kundvagnen och sedan fortsaumltta shoppa tills

man aumlr klar Vid bestaumlllningen garingr man bara till kassan daumlr anvaumlndaren kommer att vaumllja

transportsaumltt ange kontakt- och leveransuppgifter och vaumllja betalningsmetod Betalnings-

metoden aumlr vanligtvis kreditkort eller Paypal

Fakturan daumlrmed brukar inte ges till kunden daring det skulle innebaumlra oumlkade risker foumlr be-

draumlgerier foumlr naumltbutikerna Foumlr fakturakoumlp behoumlver kundens identitet faststaumlllas paring ett saumlk-

rare saumltt

Naumlr betalningen har gjorts levereras varorna vanligtvis som postpaket eller direkt leverans

till doumlrren foumlr stoumlrre varor saringsom moumlbler (E-handel 2015)

ldquoE-handeln fortsatter att vaxa Nastan hela tillvaxten sker numera i mobilen Det ar

inte priset som gor att vi handlar pa natet De viktigaste skalen ar att det ar smidigare

och att utbudet ar storre an i traditionella butikerrdquo

-Larsson Daniel 2014

21 Mobil e-handel

Mobil e-handel (m-handel) aumlr en term som beskriver en foumlrsaumlljningstransaktion som an-

vaumlnder traringdloumlsa elektroniska enheter saringsom smarttelefoner och surfplattor En mobil e-

handel webbplats fungerar i alla smarttelefoner och surfplattor och aumlr anpassad samt op-

timerad foumlr mobilens webblaumlsare

12

Foumlr att naring den mobila webbplatsen behoumlver man inte skriva in mobil adress eller aktivt

vaumllja att visa den mobila butiken Den mobila webbplatsen av en e-handel kaumlnner auto-

matiskt igen om man anvaumlnder en dator eller en mobil och visar daring upp en optimerad

version som anpassas efter anvaumlndarnas behov (Nordisk e-handel)

I den mobila versionen av e-handel brukar kategorier bestaring av endast en sida Foumlr att se

paring de resterande produkter i kategorierna kan man trycka paring rdquoVisa flerrdquo som man oftast

hittar laumlngst ner som en knapp eller laumlnk Detta goumlr uppladdningstiden paring sidan betydligt

snabbare och anvaumlndarna slipper vaumlnta Vaumlntande kan leda till avbrutna koumlp

Foumlrutom kategorier produkter och kassa i sjaumllvbetjaumlningsbutik foumlr kunder med produkter

som aumlr optimerade foumlr mobilanvaumlndarna aumlr ocksaring betalvaumlxeln foumlr kortbetalning specialan-

passad Detta goumlr det snabbare och enklare foumlr anvaumlndarnakunderna att avsluta sina koumlp

och betala med sina betalningskort (Mobil e-handel 2012)

22 Varfoumlr handla med mobil

Foumlr att kunna designa en ny mobil e-handel foumlr en kund aumlr det foumlrst jaumltte viktigt att veta

varfoumlr anvaumlndarna vaumlljer att koumlpa produktertjaumlnster med en smarttelefon eller surfplattor

Med hjaumllp av DIBS aringrliga rapport som gjordes i Sverige 2014 visas det att den viktigaste

orsaken till att anvaumlndarna handlar med sin mobil aumlr att det aumlr smidigare och sparar tid

Samtidigt aumlr det viktigt att inte heller gloumlmma bort att andra handlingsmotiv lyfts fram

som viktiga av mer aumln haumllften av alla tillfraringgade E-handel aumlr bra paring maringnga olika saumltt Den

moumlter konsumenternas behov och oumlnskemaringl i stor grad

Foumlr den nordiska befolkningen ska tidsbesparing enligt rapporten vara allra viktigaste foumlr

35-44 aringringar och minst viktig foumlr de yngsta aringldersgruppen 15-24 aringr som foumlr vilka laringga

priser istaumlllet spelar mer roll Utoumlver laringga priser drivs ungdomarna ocksaring oftast av det

stoumlrre utbudet som naumltbutikerna erbjuder paring internet

13

Figur 21 Viktigaste skaumllet att naumlthandel sparar tid

Enligt statiken visar det viktigaste skaumllet varfoumlr man anvaumlnder mobilen foumlr e-handel

64 saumlger att det sparar tid och aumlr smidigt

58 saumlger att det aumlr foumlrmaringnligare

56 saumlger att det aumlr enklare att jaumlmfoumlra mellan olika produkter

43 saumlger att det finns stoumlrre produktutbud

52 saumlger att det aumlr alltid oumlppet

23 Antalet kop okar pa mobilen

Enligt DIBS aringrliga rapport (2014) om mobil e-handel oumlkar antalet mobila e-handel kon-

sumenter hela tiden Nedan finns en figur om antalet under aringr 2013-2014 Figuren visar

hur maringnga garingnger konsumenterna har handlat varortjaumlnster med en smarttelefon eller

surfplattor under de senaste sex maringnaderna Naumlthandeln paring mobila enheterna oumlkar sakta

med saumlkert De som har handlat paring naumltet foumlrut handlar nu ocksaring allt mer Andelen stor-

konsumenter de som handlat minst 25 garingnger paring ett halvaringr har nu foumlrdubblats

De som handlade en eller tvaring garingnger har minskat fraringn 42 procent aringr 2013 till 35 procent

aringr 2014 vilket goumlr det till 17 procent mindre I snitt handlar konsumenter 1114 garingnger

per aringr med sin smarttelefon eller surfplattor

14

Figur 22 Antal oumlkar paring mobilen

Mobilen finns alltid naumlrmast

Enligt rapporten ska den vanligaste orsaken till varfoumlr anvaumlndarna vaumlljer att handla fraringn

mobilen vara foumlr att mobilen fanns naumlrmast till hands vid koumlpoumlgonblicket

Figur 23Varfoumlr handlade du med smarttelefon

15

60 saumlger att smarttelefon fanns naumlrmaste till hands vid koumlptillfaumlllet

27 anvaumlnder en app foumlr att handla online

17 oumlppnade ett erbjudande via e-mail i sin smarttelefon

5 har ingen dator

3 var i butik och koumlpte varan paring naumltet istaumlllet

4 hade ingen internetanslutning

3 scannade en QR-kod

Vad handlar vi med mobil

Foumlr att snabbt faringr en inblick i vad konsumenterna handlar med mobil ser vi haumlr nedan

(Figur 24) Konsumenter handlar mer av naumlstan allt Kunder som spenderar mer aumln 500

euro med smarttelefoner eller surfplattor koumlper i foumlrsta hand resor medan de som handlar

foumlr mindre aumln 100 euro laumlgger pengar paring media

Figur 24 Mobilt handlar vi mer av naumlstan allt

16

24 Bra mobila e-handel webbplatser

En bra mobil webbplats aumlr naumlr sidan aumlr enkel att anvaumlnda fast man bara anvaumlnder ett oumlga

och en tumme

rdquoWhen reflecting on a lot of mobile usage patterns I like to imagine people as rdquoone

eyeball and one thumb One thumb because they are likely to be holding their mobile

in one hand and using a single thumb to control it one eyeball because in many loca-

tions where mobile devices are use we only have peoples partial attentionrdquo

-Wroblewski Luke 2011)

Man kan aldrig exakt veta var anvaumlndaren befinner sig naumlr han surfar med sin smarttele-

fon Han kanske befinner sig i vardagsrummet foumlr att sloumltt surfa efter en ny lampa medan

han kollar paring Tvn Kanske anvaumlndaren sitter hemma och har en stadig wifi eller kanske

paring sommarstugan och har 3G4G som byter mellan olika naumltverk osv (Thoren 2012)

Naumlr anvaumlndaren goumlr naringgonting samtidigt som han surfar paring webbplatsen har han bara den

partiella uppmaumlrksamheten Daumlrfoumlr aumlr det betydligt fler kontexter som man maringste ta haumln-

syn till naumlr man designar webbplatser foumlr mobiler (Wroblewski 2011)

Haumlr aumlr tvaring bra exempel av lyckad e-handel foumlretag i vaumlrlden De har inte lyckats bra bara

med att saumllja produkterna utan ocksaring med designen Haumlr nedan aumlr bilderna paring mobil de-

signen av Rakutencom och Amazoncom

17

Figur 25 Hemsida paring rakutencom foumlr mobiler

Direkt naumlr man kommer paring sidan hittar man inloggningen koumlpvagnen soumlkfunktionen

menyn och speciellt de stora bilderna paring katalogerna vilket aumlr jaumltte laumltta att klicka paring

Fastaumln mobilskaumlrmen aumlr liten goumlr den haumlr det bara inte laumltt att navigera runt sidorna utan

ocksaring trevligt att vara paring sidan

Amazoncom har ocksaring lyckats bra med designen Naumlr man kommer till sidan ser man

direkt Sign in Department Wish List Deals och Search funktionen Under search funkt-

ionen ser man genast en inspirerande reklam som paringminner oss om att det aumlr varingr

rdquoSPRINGacuteS PERFECT PANTSrdquo Fast sidan har jaumltte maringnga objekt i den aumlr det trots allt

18

jaumltte laumltt att navigera runt sidorna Man tappar inte bort sig och man hittar laumltt det som

man aumlr ute efter

Figur 26 Hemsida paring amazoncom foumlr mobiler

19

25 Kritiska punkterna foumlr bra mobil design paring e-handel

Naumlr man handlar med en mindre skaumlrm aumlr det mera utmanande eftersom skaumlrmen aumlr liten

och anvaumlndarna brukar inte ha tillraumlckligt med taringlamod att sitta och soumlka naringgonting foumlr

laumlnge fraringn en liten skaumlrm Daumlrfoumlr aumlr det viktigt att veta vilka saker man boumlr beakta naumlr

man designar en mobil e-handel I det haumlr stycket kommer jag att lista upp sakerna man

boumlr veta naumlr man designar en mobil e-handel webbplats

Naumlr man handlar med en mindre skaumlrm aumlr det mera utmanande eftersom skaumlrmen aumlr liten

och anvaumlndarna brukar inte ha tillraumlckligt med taringlamod att sitta och soumlka naringgonting foumlr

laumlnge paring en liten skaumlrm Daumlrfoumlr aumlr det viktigt att veta vilka saker man boumlr beakta naumlr man

designar en mobil e-handel I det haumlr stycket kommer jag att lista upp kritiska saker man

boumlr veta naumlr man designar en mobil e-handel webbplats

1 Call-to-action knapparna foumlr smaring paring en mobilskaumlrm

Naumlr man designar webbsidor foumlr mobiler kan det ibland vara en utmaning att faring

allt att rymmas in Daumlrfoumlr brukar ocksaring webbdesigner minska de sk rdquocall to act-

ionrdquo knapparna Om anvaumlndaren maringste zooma in foumlr att klicka paring en knapp men

av misstag klickar paring en annan knapp kan det bli frustrerande foumlr dem och detta

leder sedan till att de laumlmnar sidan Daumlrfoumlr aumlr det mycket viktigt att designa knap-

parna och inneharingllet saring att anvaumlndarna laumltt naringr dem

2 Soumlkfunktionen ska alltid finnas med

Paring mobila e-handel webbplatser ska soumlkfunktionen alltid synas saring att man laumltt skall

kunna soumlka produkterna Laringt oss saumlga att kunden inte hittar produkten han soumlker

och vill anvaumlnda soumlkfunktionen Han letar och letar efter soumlkfunktionen utan re-

sultat Detta orsakar inte bara att kunden laumlmnar din sida men ocksaring kommer han

att beraumlttar det vidare aringt andra hur han upplevde din sida (Mehra 2015)

3 Laumltt att navigera

20

Det ska vara laumltt att navigera runt sidorna Anvaumlndarna ska veta var han aumlr och hur

han kommer vidare efter att han tex har valt produkten Menyerna foumlr katalo-

gerna ska vara laumltta att navigera Om menyerna foumlr katalogerna aumlr foumlrvirrande och

svaringra foumlr anvaumlndaren att hitta produkterna blir han laumltt irriterad Exemplar paring (fi-

gur 27) haumlr nedan visar att menyerna aumlr ganska foumlrvirrande paring vaumlnstra bilden me-

dan paring houmlgra sidan aumlr det klart och tydligt (Laya 2014)

Figur 27 Jaumlmfoumlrelse mellan en bra och daringlig navigation httpconversionxlcommake-mobile-convert

4 Ta de roliga ur shopping

Det vanligaste och stoumlrsta misstaget som de flesta foumlretag goumlr naumlr de designar foumlr

mobil e-handel aumlr att de foumlrsoumlker flytta kunderna fraringn shopping till koumlp Shopping

paring en stationaumlr dator goumlr det laumltt naumlr det oftast finns ett enormt antal produkter att

vaumllja mellan och det aumlr laumltt att blaumlddra runt Men foumlr mobiler aumlr det annat

Maringnga foumlretag foumlrsoumlker pressa ihop hela shopping-processen till smaring tabbar och

minska paring inneharingllet Som resultat kommer anvaumlndaren att kaumlnna sig paringtvingad

21

att goumlra snabba beslut paring inkoumlp Istaumlllet foumlr att ge anvaumlndarna en saringdan paringtvingad

upplevelse kan man istaumlllet locka anvaumlndarna med all information vi har att er-

bjuda

Det betyder inte att anvaumlndarna som besoumlker e-handeln med en smarttelefon inte

vill njuta av shoppingen saringsom de goumlr paring stationaumlra datorer Naumlr man designar en

mobil e-handel skall kunderna kunna faring njuta av shoppingen och jaumlmfoumlra mellan

olika produkter innan dem bestaumlmmer sig vilken produkt de vill koumlpa (Laya 2014)

ldquoBut we see many companies try to compress the whole shopping process into a

small number of taps The result is a mobile app or website that forces the user to

make a quick purchase decision rather than giving a great shopping experience

To the user it feels like the site switches from giving enticement to issuing de-

mandsrdquo

- Laya Peep 2014

5 Laringngsam uppladdningstid foumlr mobiler spelar en stor roll

Det aumlr mycket viktigt att haringlla sidstorleken saring liten som moumljligt saring att det aumlr snabbt

att ladda upp sidan

ldquoMobile users want to take quick action and also Google has reportedly started

including page speed for ranking websites in the search results so that makes it

even more important to have a lighter siterdquo

- Mehra Gagan 2015

Varingren 2014 rapporterade Radware (httpwwwradwarecomspring-sotu2014)

att majoriteten av besoumlkarna kommer att oumlverge webbplatsen efter att ha vaumlntat i

3 sekunder foumlr att ladda upp sidan (Laya 2014)

Om det finns mycket inneharingll paring en sida kan man som alternativ separera inne-

haringllet i olika flikar (Mehra 2015)

Jag har tagit ett exempel fraringn Amazoncom Paring produktsidan har ja valt en orange

vaumlska Foumlr att tex ytterligare laumlsa om produktbeskrivningen rdquoAbout this itemrdquo ser

22

jag en pil som aumlr paring houmlgra sidan (Figur 29) Naumlr jag trycker paring pilen eller laringdan

kommer jag till en annan sida daumlr jag kan laumlsa hela produktbeskrivningen (Figur

210) Paring det haumlr saumlttet inneharingller sidan all information man behoumlver men separe-

rade i olika flikar saring att det blir snabbare att ladda upp sidan

Figur 28 Produktsida paring amazoncom

23

Figur 29 Produktsida paring amazoncom

Figur 210 Produktsida paring amazoncom About this item

24

6 Misslyckade analyseringar av anvaumlndarna

Naumlr man bygger webbsidor aumlr det viktig att goumlra anvaumlndbarhetstest och analysera

kundernas beteende Hur anvaumlndarna kaumlnner sig naumlr de anvaumlnder sidan aumlr mycket

viktigt och avgoumlr hur bra din business kommer att rulla

Analyseringen aumlr den kritiska inputen foumlr designen Med analyseringen ser man

dels vilka mobila apparater anvaumlndarna anvaumlnder och om det aumlr naringgra svaringrigheter

och obekvaumlmligheter anvaumlndarna upplever vid anvaumlndningen Dessa faktorer aumlr

viktiga foumlr att saumlkerstaumllla om den mobila upplevelsen uppfyller behoven hos kon-

sumenterna Testet och analysen maringste goumlras kontinuerligt foumlr att vi skall kunna

saumlkerstaumllla att kunderna har det bekvaumlmt (Mehra 2015)

7 Mindre inneharingll foumlr mobilanvaumlndarna

E-handel webbplatser brukar goumlmma inneharingll foumlr att goumlra sidan mindre Sidan aumlr

i sjaumllva verket inte mindre men bara goumlmd foumlr anvaumlndarna som anvaumlnder sina

smarttelefoner Enligt Mehra Gagan aumlr det inte bra om det finns mindre inneharingll

foumlr mobilanvaumlndarna Oavsett med vilka enheter anvaumlndarna aumlr paring sidan boumlr det

finnas lika mycket inneharingll paring alla enheterna De flesta som handlar online brukar

aumlga flera enheter och med stor sannolikhet anvaumlnder de ocksaring andra enheter foumlr

att surfa Om inneharingllet inte ser likadant ut paring stationaumlra datorer och smarttelefo-

ner kan det orsaka daringlig anvaumlndarupplevelse foumlr anvaumlndaren Enligt Google an-

vaumlnder 90 av dem som handlar paring internet olika enheter Att begraumlnsa deras

anvaumlndning aumlr naringgonting som man boumlr undvika (Mehra 2015)

25

3 MOBILANPASSADE LOumlSNINGAR

Det finns maringnga olika loumlsningar att bygga sin webbplats med Det aumlr viktigt att komma

iharingg att mobila anvaumlndande oumlkar hela tiden Det staumlller nya krav paring webbdesign och an-

vaumlndargraumlnssnitt Anvaumlndarna foumlrvaumlntar sig idag att de ska kunna ta del av allt inneharingll paring

webben oavsett om de anvaumlnder en smarttelefon eller en surfplatta De mobilanpassade

loumlsningarna foumlr e-handel kan tex vara Responsiv design Adaptiv Design Mobilbutik

eller en mobil applikation

31 Adaptiv design

En adaptiv webbplats aumlr uppbyggd saring att den aumlr optimerad foumlr specifika skaumlrmstorlekar

Den anvaumlnder servern foumlr att upptaumlcka den enhet som anvaumlnds foumlr att visa webbplatsen

Byggande av webbplatsen med adaptiv metoden aumlr tidskraumlvande paring grund av behovet att

optimera sidan foumlr varje vald plattform front-end och back-end Innan man boumlrjar bygga

webbplatsen maringste man avgoumlra vilka alla plattformar webbplatsen kommer att optimeras

till Foumlrdel med adaptiv design aumlr att den har snabb uppladdningstid

rdquoCompared to Responsiv design adaptive web design is website-optimised for each

platform separately and makes use of the opportunities presented by the platform as

well as the models and functions It offers fast-loading pages due to the server detec-

tion device and browser sending data tailored for a particular devicerdquo

-Lubo Ruska 2013

Att vaumllja den raumltta loumlsningen handlar om att foumlrstaring vad maringlgruppen foumlrvaumlntar sig och vad

de behoumlver Eftersom foumlretaget 909jp inte aumlr en jaumltte stort foumlretag saringsom Ikea eller Ama-

zon som har oberaumlknat antal med produkter tycker jag att Responsiv design med Mobile

first metoden aumlr den mest effektiva metoden foumlr denna forskning

26

32 Responsiv design

Responsiv webbdesign aumlr ett av de populaumlraste saumltten att optimera en webbplats Re-

sponsiv webbdesign moumljliggoumlr att layouten foumlraumlndras beroende paring vilken skaumlrmstorlek

och skaumlrmupploumlsningen som anvaumlndarna har och beroende paring vilka funktioner som

webblaumlsaren stoumldjer (Responsive Design 2014)

Oberoende om anvaumlndarna anvaumlnder dator laumlsplatta eller sin mobiltelefon kommer sidan

att anpassa sig paring olika saumltt foumlr att anvaumlndarna vid alla tillfaumlllen ska ha en saring rik upplevelse

som moumljligt Man kan saumlga att en webbsida paring mindre skaumlrmar aumlr med ett annat ord en

krympande version av den stoumlrre skaumlrmstorleken

Inneharingllet saringsom kolumner och bilder paring webbsidan kommer automatiskt att anpassas

beroende paring skaumlrmstorleken Och detta aumlr paring grund av Grid systemet Allt inneharingll skall

haringllas inom ett Grid system Grid systemet skall skydda allt fraringn att bryta samman naumlr

sidan anvaumlnds paring olika skaumlrmstorlekar

Det finns 11 olika Grid storlekar tvaring kolumner tre kolumner fyra kolumner fem kolum-

ner sex kolumner sju kolumner aringtta kolumner nio kolumner tio kolumner 11 kolumner

och 12 kolumner Som exempel visar jag en figur av 12 kolumners Grid system (Swan

2014)

27

Figur 31 Ett exempel paring Grid system av 5 olika skaumlrmstorlekar (Phil Swan 2014)

Responsiv webbdesign fungerar med hjaumllp av HTML5 CSS media Query och Java-

Script Det bygger paring att webbutvecklare istaumlllet foumlr exakta storlekar maumltt i pixlar anger

sidelements storlekar i procent i jaumlmfoumlrelse med skaumlrmens storlek

Naumlr sidelementens storlekar aumlr i procent goumlr det att sidan blir flexibel och den anpassas

efter webblaumlsarens storlek medan fasta pixlar ger en scrollbar (rull-list) (Responsive De-

sign 2014)

33 Varfoumlr Responsiv design

Foumlrdelar med Responsiv design aumlr att den erbjuder en bra anvaumlndarupplevelse foumlr olika

enheter och skaumlrmstorlekar Tack vare den Responsiva designen har webbredaktoumlrer laumlt-

tare att hantera inneharingllet eftersom de bara har en version att hantera Ur en SEO synvin-

kel fungerar Responsiv design baumlttre eftersom den koncentrerar inneharingllet istaumlllet foumlr att

vattna ur det med maringnga URL foumlr samma inneharingll

28

Med en Responsiv design aumlr en webbplats laumlttare att hantera Att ha flera olika versioner

av en webbplats innebaumlr mera arbete Flera olika versioner av en webbplats innebaumlr sepa-

rata sidor att redigera och separata insatser foumlr soumlkmotoroptimering och separata soumlkmo-

torkampanjer Daumlrfoumlr aumlr det en stor foumlrdel att bygga en webbplats med den Responsiva

metoden

Med en Responsiv design kaumlnner anvaumlndarna baumlttre igen sidan baringde paring stationaumlra datorer

och mobiltelefoner Bygger man specifika webbplatser foumlr mobiler och surfplattor kan

det laumltt haumlnda att det blir olika information paring webbplatserna och att de struktureras olika

Laringt oss foumlrestaumllla oss att naringgon anvaumlnder sin mobiltelefon paring lunchen foumlr att leta efter en

flygbiljett fraringn Helsingfors till Tokyo Personen hittar en webbplats som har bra erbju-

dande och bestaumlmmer sig foumlr att fortsaumltta kolla naumlr han eller hon kommer hem Naumlr per-

sonen har kommit hem anvaumlnder hen datorn istaumlllet foumlr mobilen Om webbplatsen som

personen kollade paring lunchpausen var en Responsiv webbplats faringr personen en smidig och

bra upplevelse vid oumlvergaringngen fraringn den mobila webbplatsen till stationaumlr dator

(Lindahl 2014)

Det aumlr vaumlldigt viktigt att ha sin webbplats att optimerad till saring maringnga enheter som moumljligt

foumlr att ingen vet vilka kommer att vara framtidens enheter och daumlrfoumlr anses en webbplats

som anpassar sig till maringnga olika format vara den baumlsta loumlsningen Innan man kan boumlrja

med att designa en Responsiv webbplats maringste man veta vilka skaumlrmupploumlsningar och

storlekar det finns tillgaumlngliga och aumlr populaumlra idag Foumlr att kunna rikta till de olika skaumlr-

mupploumlsningarna med Media Queries har jag listat upp olika enheternas skaumlrmupploumls-

ningar i pixlar haumlr nedan i tabellen

ResolutionGrafisk array Enhet som anvaumlnder denna resolution skaumlrmstorlek i pixel-

taumltheten i pixlar

2880x1800 15-inch Apple MacBook Pro with Retina display

2560 x 1700 Google Chromebook Pixel

2560 x 1600 Samsung Google Nexus 10

13-inch Apple MacBook Pro with Retina display

29

2560 x 1440 27-inch Apple iMac 102 111 113 122 (Late 2009 -

2012)

1920 x 1080 HTC One Samsung

Sony Xperia Z amp Xperia ZL

Asus PadFone Infinity

Acer Aspire S5

Asus Zenbook Prime

1600 x 900 Apple Macbook Air

1366 x 768 Small desktoplaptop screen resolution

Asus VivoTab RT

Samsung N350

1280 x 1024 Standard desktop screen resolution

1280 x 800 Asus PadFone 2

Samsung Galaxy Note

Sony Xperia Tablet S

1280 x 720 Sony Xperia S

HTC Windows Phone 8X

HTC One mini

1136 x 640 Apple iPhone 5 5S amp 5C

Apple iPod Touch (5th generation)

960 x 640 Apple iPhone 4 amp 4S

Apple iPod Touch (4th generation)

854 x 480 Sony Xperia ray

Nokia N9

800 x 480 Nokia Lumia 510 amp 520

Samsung Galaxy I Galaxy S Galaxy S Plus Galaxy S Ad-

vance Galaxy SL Galaxy S Duos Galaxy Xcover 2 Galaxy

Beam Nexus S Captivate Glide amp Galaxy S III mini

HTC Desire X HTC Desire V Desire VC Desire VT De-

sire U amp Windows Phone 8S

30

LG Optimus 2X Optimus EX Optimus L5 II Optimus Q2

amp Optimus Black

T-Mobile G2x

Asus E600

620 x 480 Blackberry Bold 9900 amp Bold Touch 9930

Blackberry Torch 9810

LG Optimus Z

640 x 360 Sony Ericsson Vivaz amp Vivaz Pro

Nokia 500 amp 5800 XpressMusic

Nokia N8 N97 E7 and X6

480 x 320 Apple iPhone 3G amp 3GS

Samsung Galaxy Ace

320 x 240 Nokia E71

Blackberry Curve 9220 amp 9320

Sony Ericsson txt

Samsung Galaxy Y amp Galaxy Chat

Nokia Asha 501

Figur 32 Resolutions referenser paring olika enheter

31

4 VAD AumlR MOBILE FIRST

Mobile first metoden aumlr en metod och arbetsprocess foumlr webbdesigners som aumlr skapad av

Luke Wroblewski Naumlr man jobbar med ett projekt och designar strukturerar och imple-

menterar en webbplats aumlr Mobile first metoden man paringboumlrjar arbetet med Med metoden

menar Wroblewski att man foumlrst boumlrjar designa webbsidor fraringn de minsta enheterna

Figur 41 Mobile First att bygga webbsidan fraringn den minsta skaumlrmen till den stoumlrsta skaumlrmen

Wroblewski som har skapat Mobile First metoden understryker att metoden ska priorite-

ras daring man skapar anvaumlndarupplevelser

Det finns tre viktiga anledningar foumlr att utveckla foumlr Mobile First

Den foumlrbereder foumlr den stora utveckling och nya moumljligheter som uppkommer

inom det mobila omraringdet idag (836 av vaumlrldens befolkning anvaumlnder internet

paring sin smarttelefon 2015)

Den goumlr att vi blir tvungna att prioritera och fokusera varingrt inneharingll genom att ac-

ceptera de begraumlnsningar som aumlr foumlrenade med mobil design

32

och goumlr att vi kan leverera innovativa upplevelser genom att bygga utifraringn nya

funktioner som finns inbyggda i de mobila enheterna (bla GEO lokalisering)

En mobil webbplats behoumlver endast ha en mycket enkel layout och navigeringen ska vara

laumltt och effektiv

Naumlr man designar med Mobile first metoden tvingas man goumlra viktiga beslut om vad som

ska prioriteras Naumlr den optimerad design foumlr en liten skaumlrm visas paring en stoumlrre skaumlrm

kommer det att bli laumlttare att designa paring de stoumlrre skaumlrmarna Allt som ska goumlras aumlr daring

bara att fylla paring inneharingllet och designa saring att det aumlr grafiskt tilltalande och laumltt att hitta

inneharingllet (Wroblewski 2011)

41 Varfoumlr Mobile first

Vaumlrlden vi lever i idag aumlr inte mera som foumlr tio aringr sedan Allt runtom oss har utvecklats

speciellt mobiltelefonerna Tidigare anvaumlndes mobiltelefoner bara foumlr att skicka med-

delandet ringa och ta emot samtal Nu anvaumlnds den till foumlr att dels ta bilder video GPS

navigation foumlr vaumlgvisning och speciellt internetanvaumlndningen saringsom Google nyheter

Facebook Youtube och mycket mer Paring grund av det har ocksaring varingr livsstil foumlraumlndrats

Internetanvaumlndning idag har blivit allt vanligare Idag anvaumlnder vi naumltet i skolan paring jobbet

eller var och naumlr som helst bara man har en smarttelefon eller surfplatta och naumltet kopplat

Tidigare boumlrjade man bygga en webbplats fraringn den stoumlrsta skaumlrmen medan den mobila

sidan var en biprodukt Laringt oss saumlga att man har en webbplats med en rik grafisk layout

och ser stilig ut paring stationaumlra datorer Naumlr man skalar ner sidan foumlr att passa en mobilskaumlrm

kommer resultatet att vara en smaumlrta foumlr varingra oumlgon Paring den lilla mobilskaumlrmen kommer

det att vara olaumlsligt och svaringrt att anvaumlnda Foumlr att naring inneharingllet maringste du tom zooma in

och ut eller skrolla till houmlger och vaumlnster Det haumlr kommer att ge en negativ bild av ditt

foumlretag och anvaumlndarna kanske aldrig mera besoumlker din webbplats (Wroblewski 2011)

Ett bra exempel aumlr Tokyo Skytree webbplats som aumlnnu idag inte ha byggt in funktionalitet

och designen foumlr mindre skaumlrmupploumlsningar paring den engelska sidan

33

Tokyo Skytree aumlr vaumlrldens naumlst houmlgsta torn efter Burj Khalifa Tornet aumlr Japans houmlgsta

byggnadsverk med en houmljd paring 634 meter Den oumlppnades 22 maj 2012 och under det foumlrsta

aringret hade den 64 miljoner besoumlkare fraringn hela vaumlrlden Trots det har de laringtit bli att utveckla

den engelska webbsidan Paring bilden ser man att hemsidan ser exakt likadant ut paring stationaumlr

dator och paring mobilen

Figur 42 Hemsidan paring Tokyo Skytree paring stationaumlr datorskaumlrm

34

Figur 43 Hemsidan foumlr Tokyo Skytree Foumlrsta bilden visar hur det ser ut normalt Andra bilden visar naumlr man zoomar

in

Naumlr man foumlrsoumlker zooma in foumlr att laumlsa inneharingllet hoppar sidbalken (paring vaumlnstra sidan) paring

texten Det haumlr ger en mycket daringlig anvaumlndarupplevelse och kan ge fel bild av turistplat-

sen Ett annat fel paring sidan aumlr naumlr man vaumlljer spraringk till japanska ser sidan inte likadant ut

35

Figure 44 Hemsidan paring Tokyo Skytree paring japanska

Om du kan laumlsa japanska kommer du att undra varfoumlr det finns massor med information

och sidan ser mycket trevligare ut paring den japanska sidan Paring den internationella sidan

dvs engelska ser det inte lika trevligt ut och inneharingller inte allt som det goumlr paring den

japanska sidan Det aumlr som om den stoumlrsta maringlgruppen aumlr foumlr japanska turister och som

om de skulle inte bry sig om turister fraringn utlandet

Utoumlver det har de ocksaring byggt en mobilsida foumlr den japanska webbsidan Varfoumlr satsa bara

paring den japanska sidan och inte den engelska sidan naumlr maringlgruppen aumlr hela vaumlrlden

36

Figur 45 Mobil sidan paring Tokyo Skytree paring japanska

Vi lever i 2015 saring alla borde veta att det aumlr vaumlldigt viktig att ha en mobil webbplats som

erbjuder en bra anvaumlndarupplevelse paring alla spraringk som webbplatsen erbjuder Naumlr man har

sin sida paring flera spraringk och aumlndaring bestaumlmmer sig att bygga sidan ordentligt bara paring ett spraringk

kan anvaumlndarna faring en fel bild av foumlretaget I vaumlrsta fall kommer anvaumlndarna tycka att sidan

aumlr oparinglitligt och aringterkommer aldrig igen

Mobile first metoden aumlr daumlrfoumlr en mycket effektiv metod att bygga sin webbplats med

Man boumlrjar med att bygga sin webbplats fraringn den minsta skaumlrmen Man tvingas goumlra be-

slut om vad som ska absolut prioriteras Arbetsprocessen foumlr oss webbdesigners blir

mycket effektivare genom att foumlrst designa fraringn den minsta skaumlrmen och sedan foumlrflytta

oss till de stoumlrre skaumlrmarna Har man ett 6 kvadratmeters sovrum och foumlrsoumlker faring sin saumlng

skrivbord hylla klaumldskaringp och soffan att rymmas in aumlr det ganska utmanande Men naumlr

man boumlrjar med det mest utmanande i arbetsprocessen blir arbetet ocksaring mindre utma-

nande desto stoumlrre rum eller skaumlrm det blir (Wroblewski 2011)

37

5 909JP

909jp aumlr en elektronisk handel en moumlbelaffaumlr som saumlljer vaumlsterlaumlndska produkter Den

elektroniska butiken kommer att oumlppnas i Japan 2015 Deras foumlrvaumlntningar aumlr att faring in

en miljon dollar i foumlrsaumlljning per aringr I deras elektroniska moumlbelaffaumlr saumlljs bla stolar bord

soffor och lampor Maringlgruppen aumlr alla konsumenter mellan 18-60 aringringar

Japaner aumlr intresserade av vaumlsterlaumlndska produkter och livsstil men foumlr de flesta varor aumlr

designen knutna till deras egen kultur vilket goumlr dem mer intresserad Det aumlr ocksaring mycket

viktigt att ha sin hemsida paring japanska eftersom 99 av den japanska befolkningen foumlre-

drar att inte laumlsa inneharingllet paring andra spraringk (Khurana)

Japan aumlr ett land med vaumlrldens tredje stoumlrsta ekonomi paring 5 biljoner De har vaumlrldens ti-

onde stoumlrsta befolkning med ca 1271 miljoner invaringnare varav 70 av den totala befolk-

ningen anvaumlnder internet och 24 av dem anvaumlnder internet paring sin smarttelefon

(Khurana)

Viktigt med detta projekt aumlr att sikta aringt raumltt haringll och betjaumlna kunderna paring det baumlsta saumlttet

via webbplatsen Foumlr att kunna faringnga saring maringnga kunder som moumljligt aumlr det mycket viktigt

att designa en webbplats som aumlr anvaumlndarvaumlnlig stilig och laumltt att anvaumlnda (Wroblewski

2011)

Jag har daumlrfoumlr kommit underfund med att anvaumlnda Mobile first och Responsiv design

metoden foumlr att utveckla den mobila 909jp sidan Med tanke paring att det aumlr en Responsiv

design skall layouten paring den mobila versionen ocksaring passa in med de stoumlrre skaumlrmarna

naumlr sidan skalas upp Det aumlr dock viktigt poaumlngtera att jag endast kommer att koncentrera

mig paring den mobila designen och utveckla designen endast foumlr denna forskning

38

6 ANALYS AV DEN NYA DESIGNEN

Med hjaumllp av den tidigare designen paring 909jp och de kritiska punkterna jag har hittat under

forskningen har jag skapat en ny och foumlrbaumlttrad design av webbplatsen foumlr mobiler I det

haumlr kapitlet kommer jag att visa naringgra exempel paring den tidigare designen och jaumlmfoumlra den

med nya designen samt analysera arbetet

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger)

1 Call-to-action knapparna

Under hela arbetsprocessen har jag haft i minnet att navigeringar laumlnkar och knap-

parna ska vara tillraumlckligt stora att klicka paring I den tidigare designen har de stora

bilder paring kategorier vilket jag tycker aumlr en bra design att aringtervaumlnda

39

2 Soumlkfunktionen

Paring den tidigare versionen haumlr nedan ser man att soumlkfunktionen inte finns med

medan paring den nya designen ser man soumlkfunktionen genast naumlr man kommer till

sidan Som tidigare framfoumlrdes att soumlkfunktionen alltid ska synas saring att man laumltt

skall kunna soumlka fram produkterna Om soumlkfunktionen inte finns med eller aumlr svaringr

att hitta naumlr den behoumlvs kan det orsaka missnoumlje hos anvaumlndarna (Mehra Gagan

2015)

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp

Figur 63 Soumlkfunktionen paring den nya designen 909jp

40

3 Laumltt att navigera

Naumlr skaumlrmen aumlr liten aumlr det viktig att ha en enkel layout (Wroblewski 2011)

Jag har daumlrfor i den nya designen flyttat rdquoHemrdquo och rdquoBlogrdquo knapparna bort fraringn

den oumlvre menyn Hem-knappen finns nu i hamburgarmenyn paring vaumlnstra sidan me-

dan Blog-knappen finns i footer Detta goumlr att det ser mera organiserat ut

Figur 64 Gamla designen

Laringt oss foumlrflytta vidare till menyer foumlr kategorier Paring hemsidan har man tvaring alter-

nativ att naring kategorierna Foumlrsta aumlr den hamburgarmenyn knappen paring vaumlnstra si-

dan I menyn aumlr kategorierna indelade i fyra delar stolar lampor ergonomisk och

soffa amp middag Detta goumlr det laumltt och klart foumlr anvaumlndarna var produkterna finns

Eftersom vi bara har partiell uppmaumlrksamhet fraringn anvaumlndarna naumlr de aumlr paring sina

smarttelefoner har jag valt att saumltta in ikoner i menyn (Figur 65) Naumlr anvaumlndaren

bara anvaumlnder ena oumlgat foumlr att kolla paring mobilen och andra oumlgat foumlr naringgonting annat

ska den lilla skaumlrmen med webbplatsen kunna faringnga uppmaumlrksamheten samt un-

derlaumltta anvaumlndningen av webbplatsen (Wroblewski 2011)

41

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny

Andra menyn for kategorierna aumlr de fyra bilderna under Aeron chair slideshowen

Paring den tidigare designen ser man endast ett foumlnster av kategorierna som aumlr place-

rade i en kolumn som upprepas loggraumltt (Figur 66) Det haumlr goumlr att anvaumlndaren

maringste skrolla ner foumlr att se varenda kategori vilket kan orsaka obekvaumlmlighet Att

se flera kategorier paring samma skaumlrm sparar tid och anvaumlndaren kommer aumlven baumlttre

iharingg var sakerna finns Att ha bara rdquoenrdquo stor bild som syns paring skaumlrmen och vara

tvungen att skrolla ner foumlr att se naumlsta bild aumlr frustrerande Paring den nya designen

har jag tvaring rutor av kategorier bredvid varandra (Figur 66)

42

Figur 66 Kategorier paring den gamla designen (till vaumlnster) Kategorier paring den nya designen (till houmlger)

4 Ta det roliga ur shopping

Paring den nya designen straumlvar jag efter att erbjuda en bekvaumlm shopping-upplevelse

Naumlr anvaumlndarna besoumlker e-handeln med en smarttelefon foumlrvaumlntar hanhon sig

ocksaring att kunna ta del av allt inneharingll och goumlra jaumlmfoumlrelser med andra produkter

Jag har daumlrfoumlr i den nya designen pressat ihop laumlngden paring kolumnhoumljden som om-

ringar produkten Som resultat ser vi nu fyra produkter paring samma skaumlrm (Figur

67) I den tidigare designen ser vi en enda produkt paring en skaumlrm och foumlr att se

andra produkter maringste vi skrolla ner Paring det haumlr saumlttet har anvaumlndarna svaringrare att

jaumlmfoumlra produkterna (Laya 2014)

43

Figur 67 Tidigare produktsida (till vaumlnster) Ny produktsida (till houmlger)

I den tidigare designen ser vi ocksaring att det finns endast produktens bild produk-

tens namn koumlpvagnen och infoikonen Om man vill faring reda paring produktens inform-

ation maringste man klicka paring produktens bild eller paring infoikonen som foumlr oss direkt

till sjaumllva produktens sida Bara foumlr att man vill faring reda paring vad det aumlr foumlr produkt

foumlrs man vidare till en annan sida Det haumlr kan orsaka att kunden inte njuter totalt

av shoppingen och dessutom kan han inte jaumlmfoumlra produkterna naumlr han aumlr paring ka-

tegoriernas sida (Laya 2014)

Laringt oss hoppa vidare till den nya designen (Figur 68) Paring den nya designen har

jag satt in en kort detaljbeskrivning foumlr varje produkt Dessutom naumlr man klickar

paring infoikonen paring houmlgra sidan kommer man inte direkt till produktsidan utan det

kommer att dyka upp en inforuta som har en kort beskrivning paring produkten Om

anvaumlndaren aumlr intresserad av produkten kan han garing in till sjaumllva produktsida ge-

nom att klicka paring rdquoView productrdquo eller ocksaring paring produktbilden daumlr hanhon kan

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

OPINNAumlYTE

Arcada

Koulutusohjelma Film och television

Tunnistenumero 4961

Tekijauml Vikanda Nurmi

Tyoumln nimi Mobiili verkkokauppa Responsive Design ja Mobile First

menetelmillauml

Tyoumln ohjaaja (Arcada) Jutta Toumlrnqvist

Toimeksiantaja

Tiivistelmauml

Opintonaumlytetyoumln tavoitteena on tutkia miten kehittaumlauml ja parantaa kaumlyttaumljaumln kokemuksia

verkkokaupan mobiiliversiossa ja kuvailla kaumlsitteet Responsive design ja Mobile first me-

netelmauml Verkkokaupan rakentaminen mobiilia varten ei ole sama kuin rakentaa muita ta-

vallisia verkkosivuja On paljon asioita joita pitaumlisi harkita ja tietaumlauml ja ottaa huomioon

ennen kuin voi aloittaa rakentamisen Tavoitteena on tuotteiden myynti mutta myoumls kaumlyt-

taumljien rekisteroumlityminen asiakkaiksi

Opinnaumlytetyoumlssaumlni kaumlytaumln tapaustutkimusta tutkimusmenetelmaumlnauml Tapaustutkimus pe-

rustuu esimerkkitapauksen ratkaisemiseen tutkimuksen avulla Nettikehityksestauml keraumlauml-

mieni tietojen avulla kehitaumln edelleen konkreettista nettikauppaa Tulen kehittaumlmaumlaumln

909jp huonekaluliikkeen mobiililaitteille tarkoitettua nettikauppaa tutkimuksessa esille-

tulleilla laumlhdetietojen ja kriittisten kohtien avulla Kehittaumlmaumlaumlni uutta graafista ilmettauml

909jp verkkosivujen mobiiliinversioon ei kaumlytetauml kaumlytaumlnnoumlssauml taumlmauml tapaustutkimus teh-

daumlaumln ainoastaan opinnaumlytetyoumltaumlni varten

Tyoumlssaumlni en kaumlsittele koodausta ja teknistauml osa-aluetta Tulen ainoastaan keskittymaumlaumln

graafisen suunnittelun kehityksestauml mobiiliissa verkkokaupassa Laumlhteinauml kaumlytetaumlaumln viit-

tauksia faktateksteihin tietokirjallisuuteen ja kuviin jotka auttavat selventaumlmaumlaumln sisaumlltoumlauml

Lopuksi tulen tutkimustietojen avulla analysoimaan ja vertailemaan kehittaumlmaumlni ja suun-

nittelemani esimerkkisivustoa vanhaan sivustoon

Avainsanat Mobil e-handel Mobile First Responsive design

Sivumaumlaumlrauml 51

Kieli Ruotsi

Hyvaumlksymispaumlivaumlmaumlaumlrauml

INNEHAringLL

1 INLEDNING 8

11 Motiv foumlr aumlmnesvalet 8

12 Syfte 8

13 Avgraumlnsningar 9

14 Metod 9

15 Begrepp 10

2 VAD AumlR E-HANDEL 11

21 Mobil e-handel 11

22 Varfoumlr handla med mobil 12

23 Antalet kop okar pa mobilen 13

24 Bra mobila e-handel webbplatser 16

25 Kritiska punkterna foumlr bra mobil design paring e-handel 19

3 MOBILANPASSADE LOumlSNINGAR 25

31 Adaptiv design 25

32 Responsiv design 26

33 Varfoumlr Responsiv design 27

4 VAD AumlR MOBILE FIRST 31

41 Varfoumlr Mobile first 32

5 909jp 37

6 ANALYS AV DEN NYA DESIGNEN 38

7 SAMMANFATTNING 48

BOumlCKER 50

ELEKTRONISKA Kaumlllor 50

Figurer

Figur 21 Viktigaste skaumllet att naumlthandel sparar tid 13

Figur 22 Antal oumlkar paring mobilen 14

Figur 23Varfoumlr handlade du med smarttelefon 14

Figur 24 Mobilt handlar vi mer av naumlstan allt 15

Figur 25 Hemsida paring rakutencom foumlr mobiler 17

Figur 26 Hemsida paring amazoncom foumlr mobiler 18

Figur 27 Jaumlmfoumlrelse mellan en bra och daringlig navigation httpconversionxlcommake-

mobile-convert 20

Figur 28 Produktsida paring amazoncom 22

Figur 29 Produktsida paring amazoncom 23

Figur 210 Produktsida paring amazoncom About this item 23

Figur 31 Ett exempel paring Grid system av 5 olika skaumlrmstorlekar (Phil Swan 2014) 27

Figur 32 Resolutions referenser paring olika enheter 30

Figur 41 Mobile First att bygga webbsidan fraringn den minsta skaumlrmen till den stoumlrsta

skaumlrmen 31

Figur 42 Hemsidan paring Tokyo Skytree paring stationaumlr datorskaumlrm 33

Figur 43 Hemsidan foumlr Tokyo Skytree Foumlrsta bilden visar hur det ser ut normalt Andra

bilden visar naumlr man zoomar in 34

Figure 44 Hemsidan paring Tokyo Skytree paring japanska 35

Figur 45 Mobil sidan paring Tokyo Skytree paring japanska 36

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger) 38

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp 39

Figur 63 Soumlkfunktionen paring den nya designen 909jp 39

Figur 64 Gamla designen 40

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny 41

Figur 66 Kategorier paring den gamla design (till vaumlnster) Kategorier paring den nya design (till

houmlger) 42

Figur 67 Tidigare produktsida (till vaumlnster) Nya produktsida (till houmlger) 43

Figur 68 Inforutan som dyker upp 44

Figur 69 Produktsida av tabbar 45

Figur 610 View more 46

Figur 611 Stol kategori Show all 47

8

1 INLEDNING

11 Motiv foumlr aumlmnesvalet

Som Online Media studerande har jag alltid gillat att designa webbsidor Jag har alltid

varit intresserad av den haumlr inriktningen Ju mer man studerar desto mer vill man laumlra sig

Det att jag tycker om att designa webbsidor var inte enda orsaken till att jag valde mitt

aumlmne foumlr examensarbete Jag har alltid varit intresserad i elektronisk handel Hur faringr man

kunder att koumlpa sina produktertjaumlnster utan en fysisk saumlljare Hur marknadsfoumlr man och

hur naringr man baumlst kunderna daring foumlretaget med e-handel kan vara allt fraringn klaumldbutiker flyg-

bolag eller moumlbelaffaumlrer

Som webbdesigner har jag som uppgift att hjaumllpa kunderna att marknadsfoumlra deras foumlretag

eller produkter via webben Som aumlmne foumlr examensarbetet har jag valt att goumlra en fallstu-

die daumlr jag foumlrbaumlttrar den tidigare 909jp webbplatsen med hjaumllp av min forskning

Som bakgrund har jag kunskaper i webbdesign vilket jag kan anvaumlnda som verktyg En

bra webbplats maringste vara grafiskt attraktiv foumlr anvaumlndaren Med hjaumllp av det grafiska

maringste en bra webbplats daumlrmed lyckas leverera den information som anvaumlndarna aumlr ute

efter Det maringste vara laumltt att navigera runt sidorna samt hitta snabbt informationen an-

vaumlndarna vill naring Sidan maringste ocksaring kunna laddas ner snabbt aumlven via en laringngsammare

naumltuppkoppling foumlr att tillfredsstaumllla anvaumlndarna En webbplats maringste erbjuda en bra

funktionalitet samt anvaumlndarvaumlnlighet paring mindre skaumlrmar saringsom paring mobiler Som maringl

kommer jag att fokusera mig paring hur man kan utveckla och foumlrbaumlttra en e-handel design

foumlr mobiler

12 Syfte

Syftet med min uppsatts aumlr att laumlra mig att utveckla och foumlrbaumlttra anvaumlndarupplevelser i

e-handel foumlr mobiler Att handla paring naumltet med sin mobil sparar mer tid och maringnga garingnger

kan det vara mycket laumlttare Foumlr att lyckas med att bevisa aringt anvaumlndarna att en tjaumlnst aumlr

trovaumlrdig aumlr det jaumltte viktigt att erbjuda dem en bra och bekvaumlmt plats att handla online

9

Foumlr att lyckas med det maringste man ha en mycket bra design och funktionalitet paring webbsi-

dan I min uppsats kommer jag att fokusera paring design som byggs med Mobile first meto-

den Forskningsfraringgan i mitt examensarbete aumlr rdquoHur kan man baumlst utveckla en e-handel

webbplats foumlr mobilerrdquo

Arbetet skall vara till nytta foumlr webbdesigners och Online Media studerande som inte

tidigare har kunskaper inom e-handel foumlr mobiler och vill foumlrdjupa sig mera i det Arbetet

skall ocksaring vara till nytta foumlr dem som goumlr eller kommer att goumlra ett projekt inom e-han-

deln Det ska hjaumllpa dem oumlka foumlrstaringelse samt stoumlda dem i deras projekt

13 Avgraumlnsningar

I min uppsatts kommer det inte att staring om avancerad html och CSS kodning Jag kommer

fraumlmst att koncentrera mig paring strukturer och layouten och hur man baumlst kan uppnaring den

baumlsta anvaumlndarupplevelsen inom mobil e-handel Jag kommer inte att goumlra anvaumlndarbar-

hetstest men med hjaumllp av teorierna hittar jag de mest kritiska punkterna foumlr att kunna

goumlra en ny design till min fallstudie

14 Metod

Som metod kommer jag att undersoumlka strukturen layouten och anvaumlndarupplevelser foumlr

mobil e-handel i allmaumlnhet Forskningsmetoden paringminner naumlrmast om den vetenskapliga

fallstudiens metod

Metoden innebaumlr en plan foumlr att samla in organisera och integrera information och den

resulterar i ett speciellt forskningsresultat Jag kommer att anvaumlnda boumlckerna Ethan

Marcotte Responsive web design (2011) Wroblewski Luke Mobile First (2011) och

Karen McGrane Content strategy for Mobile (2012) Som material kommer jag ocksaring att

anvaumlnda kaumlllor fraringn naumltet och andra bocker

Med hjaumllp av de kritiska punkter jag hittar fraringn kaumlllor kommer jag att anvaumlnda som metod

foumlr att vidareutveckla designen foumlr den mobila e-handel webbplatsen (909jp) jag har som

fallstudie

10

Med hjaumllp av undersoumlkningen om e-handel foumlr mobiler kommer jag att veta vilka saker

det ska finnas paring sidan saringsom kategorier foumlr produkter kundvagn incheckning osv

15 Begrepp

SEO aumlr foumlrkortning fraringn engelska rdquoSearch Engine Optimizationrdquo och oumlversaumltts till Soumlk-

motoroptimering paring svenska Soumlkmotoroptimeringen anvaumlnds foumlr att faring en webbplats att

synas saring houmlgt upp som moumljligt bland resultaten vid soumlkningar i soumlkmotorer (Belinger

2014)

Call to action knapparna aumlr knappar som leder anvaumlndarna vidare till en viss sida Var-

foumlr man kallar det foumlr rdquoCall to actionrdquo aumlr for att knapparna ska kunna faringnga uppmaumlrksam-

heten paring anvaumlndarna foumlr att klicka sig vidare Knapparna kan vara tex meny- knappar

eller bilder som anvaumlnds som en laumlnk till en annan sida (Mehra 2015)

Hamburgarmenyn aumlr menyn som anvaumlnds paring webbplatsen foumlr smarttelefoner Haumlr aumlr

exempel paring menyn

Media Queries aumlr en CSS3-modul som tillaringter inneharingll rendering att anpassa sig till

olika skaumlrmupploumlsningar saringsom smarttelefoner surfplattor och datorskaumlrmar Foumlr att

kunna faring sin webbplats att anpassa sig till olika skaumlrmupploumlsningar naumlr skaumlrmen blir

mindre anvaumlnder man Media Queries i CSS3 (Wikipedia)

11

2 VAD AumlR E-HANDEL

E-handel fungerar genom att ett foumlretag eller individuell person koumlper saumlljer ut eller byter

produkter information eller tjaumlnst via internet eller andra datornaumltverk (Wikipedia)

En stor del av e-handeln aumlger rum i de saring kallade naumltbutikerna Naumltbutiker har ett lager

och en webbplats daumlr kunden goumlr sina bestaumlllningar Paring webbplatsen indelas varorna i

olika kategorier saring att anvaumlndarna paring sidan kan laumltt hitta varorna Foumlr att hitta varorna

snabbare brukar de flesta naumltbutikerna ocksaring ha en soumlkfunktion Paring sidan har anvaumlndarna

moumljligheter att saumltta produktenprodukter i kundvagnen och sedan fortsaumltta shoppa tills

man aumlr klar Vid bestaumlllningen garingr man bara till kassan daumlr anvaumlndaren kommer att vaumllja

transportsaumltt ange kontakt- och leveransuppgifter och vaumllja betalningsmetod Betalnings-

metoden aumlr vanligtvis kreditkort eller Paypal

Fakturan daumlrmed brukar inte ges till kunden daring det skulle innebaumlra oumlkade risker foumlr be-

draumlgerier foumlr naumltbutikerna Foumlr fakturakoumlp behoumlver kundens identitet faststaumlllas paring ett saumlk-

rare saumltt

Naumlr betalningen har gjorts levereras varorna vanligtvis som postpaket eller direkt leverans

till doumlrren foumlr stoumlrre varor saringsom moumlbler (E-handel 2015)

ldquoE-handeln fortsatter att vaxa Nastan hela tillvaxten sker numera i mobilen Det ar

inte priset som gor att vi handlar pa natet De viktigaste skalen ar att det ar smidigare

och att utbudet ar storre an i traditionella butikerrdquo

-Larsson Daniel 2014

21 Mobil e-handel

Mobil e-handel (m-handel) aumlr en term som beskriver en foumlrsaumlljningstransaktion som an-

vaumlnder traringdloumlsa elektroniska enheter saringsom smarttelefoner och surfplattor En mobil e-

handel webbplats fungerar i alla smarttelefoner och surfplattor och aumlr anpassad samt op-

timerad foumlr mobilens webblaumlsare

12

Foumlr att naring den mobila webbplatsen behoumlver man inte skriva in mobil adress eller aktivt

vaumllja att visa den mobila butiken Den mobila webbplatsen av en e-handel kaumlnner auto-

matiskt igen om man anvaumlnder en dator eller en mobil och visar daring upp en optimerad

version som anpassas efter anvaumlndarnas behov (Nordisk e-handel)

I den mobila versionen av e-handel brukar kategorier bestaring av endast en sida Foumlr att se

paring de resterande produkter i kategorierna kan man trycka paring rdquoVisa flerrdquo som man oftast

hittar laumlngst ner som en knapp eller laumlnk Detta goumlr uppladdningstiden paring sidan betydligt

snabbare och anvaumlndarna slipper vaumlnta Vaumlntande kan leda till avbrutna koumlp

Foumlrutom kategorier produkter och kassa i sjaumllvbetjaumlningsbutik foumlr kunder med produkter

som aumlr optimerade foumlr mobilanvaumlndarna aumlr ocksaring betalvaumlxeln foumlr kortbetalning specialan-

passad Detta goumlr det snabbare och enklare foumlr anvaumlndarnakunderna att avsluta sina koumlp

och betala med sina betalningskort (Mobil e-handel 2012)

22 Varfoumlr handla med mobil

Foumlr att kunna designa en ny mobil e-handel foumlr en kund aumlr det foumlrst jaumltte viktigt att veta

varfoumlr anvaumlndarna vaumlljer att koumlpa produktertjaumlnster med en smarttelefon eller surfplattor

Med hjaumllp av DIBS aringrliga rapport som gjordes i Sverige 2014 visas det att den viktigaste

orsaken till att anvaumlndarna handlar med sin mobil aumlr att det aumlr smidigare och sparar tid

Samtidigt aumlr det viktigt att inte heller gloumlmma bort att andra handlingsmotiv lyfts fram

som viktiga av mer aumln haumllften av alla tillfraringgade E-handel aumlr bra paring maringnga olika saumltt Den

moumlter konsumenternas behov och oumlnskemaringl i stor grad

Foumlr den nordiska befolkningen ska tidsbesparing enligt rapporten vara allra viktigaste foumlr

35-44 aringringar och minst viktig foumlr de yngsta aringldersgruppen 15-24 aringr som foumlr vilka laringga

priser istaumlllet spelar mer roll Utoumlver laringga priser drivs ungdomarna ocksaring oftast av det

stoumlrre utbudet som naumltbutikerna erbjuder paring internet

13

Figur 21 Viktigaste skaumllet att naumlthandel sparar tid

Enligt statiken visar det viktigaste skaumllet varfoumlr man anvaumlnder mobilen foumlr e-handel

64 saumlger att det sparar tid och aumlr smidigt

58 saumlger att det aumlr foumlrmaringnligare

56 saumlger att det aumlr enklare att jaumlmfoumlra mellan olika produkter

43 saumlger att det finns stoumlrre produktutbud

52 saumlger att det aumlr alltid oumlppet

23 Antalet kop okar pa mobilen

Enligt DIBS aringrliga rapport (2014) om mobil e-handel oumlkar antalet mobila e-handel kon-

sumenter hela tiden Nedan finns en figur om antalet under aringr 2013-2014 Figuren visar

hur maringnga garingnger konsumenterna har handlat varortjaumlnster med en smarttelefon eller

surfplattor under de senaste sex maringnaderna Naumlthandeln paring mobila enheterna oumlkar sakta

med saumlkert De som har handlat paring naumltet foumlrut handlar nu ocksaring allt mer Andelen stor-

konsumenter de som handlat minst 25 garingnger paring ett halvaringr har nu foumlrdubblats

De som handlade en eller tvaring garingnger har minskat fraringn 42 procent aringr 2013 till 35 procent

aringr 2014 vilket goumlr det till 17 procent mindre I snitt handlar konsumenter 1114 garingnger

per aringr med sin smarttelefon eller surfplattor

14

Figur 22 Antal oumlkar paring mobilen

Mobilen finns alltid naumlrmast

Enligt rapporten ska den vanligaste orsaken till varfoumlr anvaumlndarna vaumlljer att handla fraringn

mobilen vara foumlr att mobilen fanns naumlrmast till hands vid koumlpoumlgonblicket

Figur 23Varfoumlr handlade du med smarttelefon

15

60 saumlger att smarttelefon fanns naumlrmaste till hands vid koumlptillfaumlllet

27 anvaumlnder en app foumlr att handla online

17 oumlppnade ett erbjudande via e-mail i sin smarttelefon

5 har ingen dator

3 var i butik och koumlpte varan paring naumltet istaumlllet

4 hade ingen internetanslutning

3 scannade en QR-kod

Vad handlar vi med mobil

Foumlr att snabbt faringr en inblick i vad konsumenterna handlar med mobil ser vi haumlr nedan

(Figur 24) Konsumenter handlar mer av naumlstan allt Kunder som spenderar mer aumln 500

euro med smarttelefoner eller surfplattor koumlper i foumlrsta hand resor medan de som handlar

foumlr mindre aumln 100 euro laumlgger pengar paring media

Figur 24 Mobilt handlar vi mer av naumlstan allt

16

24 Bra mobila e-handel webbplatser

En bra mobil webbplats aumlr naumlr sidan aumlr enkel att anvaumlnda fast man bara anvaumlnder ett oumlga

och en tumme

rdquoWhen reflecting on a lot of mobile usage patterns I like to imagine people as rdquoone

eyeball and one thumb One thumb because they are likely to be holding their mobile

in one hand and using a single thumb to control it one eyeball because in many loca-

tions where mobile devices are use we only have peoples partial attentionrdquo

-Wroblewski Luke 2011)

Man kan aldrig exakt veta var anvaumlndaren befinner sig naumlr han surfar med sin smarttele-

fon Han kanske befinner sig i vardagsrummet foumlr att sloumltt surfa efter en ny lampa medan

han kollar paring Tvn Kanske anvaumlndaren sitter hemma och har en stadig wifi eller kanske

paring sommarstugan och har 3G4G som byter mellan olika naumltverk osv (Thoren 2012)

Naumlr anvaumlndaren goumlr naringgonting samtidigt som han surfar paring webbplatsen har han bara den

partiella uppmaumlrksamheten Daumlrfoumlr aumlr det betydligt fler kontexter som man maringste ta haumln-

syn till naumlr man designar webbplatser foumlr mobiler (Wroblewski 2011)

Haumlr aumlr tvaring bra exempel av lyckad e-handel foumlretag i vaumlrlden De har inte lyckats bra bara

med att saumllja produkterna utan ocksaring med designen Haumlr nedan aumlr bilderna paring mobil de-

signen av Rakutencom och Amazoncom

17

Figur 25 Hemsida paring rakutencom foumlr mobiler

Direkt naumlr man kommer paring sidan hittar man inloggningen koumlpvagnen soumlkfunktionen

menyn och speciellt de stora bilderna paring katalogerna vilket aumlr jaumltte laumltta att klicka paring

Fastaumln mobilskaumlrmen aumlr liten goumlr den haumlr det bara inte laumltt att navigera runt sidorna utan

ocksaring trevligt att vara paring sidan

Amazoncom har ocksaring lyckats bra med designen Naumlr man kommer till sidan ser man

direkt Sign in Department Wish List Deals och Search funktionen Under search funkt-

ionen ser man genast en inspirerande reklam som paringminner oss om att det aumlr varingr

rdquoSPRINGacuteS PERFECT PANTSrdquo Fast sidan har jaumltte maringnga objekt i den aumlr det trots allt

18

jaumltte laumltt att navigera runt sidorna Man tappar inte bort sig och man hittar laumltt det som

man aumlr ute efter

Figur 26 Hemsida paring amazoncom foumlr mobiler

19

25 Kritiska punkterna foumlr bra mobil design paring e-handel

Naumlr man handlar med en mindre skaumlrm aumlr det mera utmanande eftersom skaumlrmen aumlr liten

och anvaumlndarna brukar inte ha tillraumlckligt med taringlamod att sitta och soumlka naringgonting foumlr

laumlnge fraringn en liten skaumlrm Daumlrfoumlr aumlr det viktigt att veta vilka saker man boumlr beakta naumlr

man designar en mobil e-handel I det haumlr stycket kommer jag att lista upp sakerna man

boumlr veta naumlr man designar en mobil e-handel webbplats

Naumlr man handlar med en mindre skaumlrm aumlr det mera utmanande eftersom skaumlrmen aumlr liten

och anvaumlndarna brukar inte ha tillraumlckligt med taringlamod att sitta och soumlka naringgonting foumlr

laumlnge paring en liten skaumlrm Daumlrfoumlr aumlr det viktigt att veta vilka saker man boumlr beakta naumlr man

designar en mobil e-handel I det haumlr stycket kommer jag att lista upp kritiska saker man

boumlr veta naumlr man designar en mobil e-handel webbplats

1 Call-to-action knapparna foumlr smaring paring en mobilskaumlrm

Naumlr man designar webbsidor foumlr mobiler kan det ibland vara en utmaning att faring

allt att rymmas in Daumlrfoumlr brukar ocksaring webbdesigner minska de sk rdquocall to act-

ionrdquo knapparna Om anvaumlndaren maringste zooma in foumlr att klicka paring en knapp men

av misstag klickar paring en annan knapp kan det bli frustrerande foumlr dem och detta

leder sedan till att de laumlmnar sidan Daumlrfoumlr aumlr det mycket viktigt att designa knap-

parna och inneharingllet saring att anvaumlndarna laumltt naringr dem

2 Soumlkfunktionen ska alltid finnas med

Paring mobila e-handel webbplatser ska soumlkfunktionen alltid synas saring att man laumltt skall

kunna soumlka produkterna Laringt oss saumlga att kunden inte hittar produkten han soumlker

och vill anvaumlnda soumlkfunktionen Han letar och letar efter soumlkfunktionen utan re-

sultat Detta orsakar inte bara att kunden laumlmnar din sida men ocksaring kommer han

att beraumlttar det vidare aringt andra hur han upplevde din sida (Mehra 2015)

3 Laumltt att navigera

20

Det ska vara laumltt att navigera runt sidorna Anvaumlndarna ska veta var han aumlr och hur

han kommer vidare efter att han tex har valt produkten Menyerna foumlr katalo-

gerna ska vara laumltta att navigera Om menyerna foumlr katalogerna aumlr foumlrvirrande och

svaringra foumlr anvaumlndaren att hitta produkterna blir han laumltt irriterad Exemplar paring (fi-

gur 27) haumlr nedan visar att menyerna aumlr ganska foumlrvirrande paring vaumlnstra bilden me-

dan paring houmlgra sidan aumlr det klart och tydligt (Laya 2014)

Figur 27 Jaumlmfoumlrelse mellan en bra och daringlig navigation httpconversionxlcommake-mobile-convert

4 Ta de roliga ur shopping

Det vanligaste och stoumlrsta misstaget som de flesta foumlretag goumlr naumlr de designar foumlr

mobil e-handel aumlr att de foumlrsoumlker flytta kunderna fraringn shopping till koumlp Shopping

paring en stationaumlr dator goumlr det laumltt naumlr det oftast finns ett enormt antal produkter att

vaumllja mellan och det aumlr laumltt att blaumlddra runt Men foumlr mobiler aumlr det annat

Maringnga foumlretag foumlrsoumlker pressa ihop hela shopping-processen till smaring tabbar och

minska paring inneharingllet Som resultat kommer anvaumlndaren att kaumlnna sig paringtvingad

21

att goumlra snabba beslut paring inkoumlp Istaumlllet foumlr att ge anvaumlndarna en saringdan paringtvingad

upplevelse kan man istaumlllet locka anvaumlndarna med all information vi har att er-

bjuda

Det betyder inte att anvaumlndarna som besoumlker e-handeln med en smarttelefon inte

vill njuta av shoppingen saringsom de goumlr paring stationaumlra datorer Naumlr man designar en

mobil e-handel skall kunderna kunna faring njuta av shoppingen och jaumlmfoumlra mellan

olika produkter innan dem bestaumlmmer sig vilken produkt de vill koumlpa (Laya 2014)

ldquoBut we see many companies try to compress the whole shopping process into a

small number of taps The result is a mobile app or website that forces the user to

make a quick purchase decision rather than giving a great shopping experience

To the user it feels like the site switches from giving enticement to issuing de-

mandsrdquo

- Laya Peep 2014

5 Laringngsam uppladdningstid foumlr mobiler spelar en stor roll

Det aumlr mycket viktigt att haringlla sidstorleken saring liten som moumljligt saring att det aumlr snabbt

att ladda upp sidan

ldquoMobile users want to take quick action and also Google has reportedly started

including page speed for ranking websites in the search results so that makes it

even more important to have a lighter siterdquo

- Mehra Gagan 2015

Varingren 2014 rapporterade Radware (httpwwwradwarecomspring-sotu2014)

att majoriteten av besoumlkarna kommer att oumlverge webbplatsen efter att ha vaumlntat i

3 sekunder foumlr att ladda upp sidan (Laya 2014)

Om det finns mycket inneharingll paring en sida kan man som alternativ separera inne-

haringllet i olika flikar (Mehra 2015)

Jag har tagit ett exempel fraringn Amazoncom Paring produktsidan har ja valt en orange

vaumlska Foumlr att tex ytterligare laumlsa om produktbeskrivningen rdquoAbout this itemrdquo ser

22

jag en pil som aumlr paring houmlgra sidan (Figur 29) Naumlr jag trycker paring pilen eller laringdan

kommer jag till en annan sida daumlr jag kan laumlsa hela produktbeskrivningen (Figur

210) Paring det haumlr saumlttet inneharingller sidan all information man behoumlver men separe-

rade i olika flikar saring att det blir snabbare att ladda upp sidan

Figur 28 Produktsida paring amazoncom

23

Figur 29 Produktsida paring amazoncom

Figur 210 Produktsida paring amazoncom About this item

24

6 Misslyckade analyseringar av anvaumlndarna

Naumlr man bygger webbsidor aumlr det viktig att goumlra anvaumlndbarhetstest och analysera

kundernas beteende Hur anvaumlndarna kaumlnner sig naumlr de anvaumlnder sidan aumlr mycket

viktigt och avgoumlr hur bra din business kommer att rulla

Analyseringen aumlr den kritiska inputen foumlr designen Med analyseringen ser man

dels vilka mobila apparater anvaumlndarna anvaumlnder och om det aumlr naringgra svaringrigheter

och obekvaumlmligheter anvaumlndarna upplever vid anvaumlndningen Dessa faktorer aumlr

viktiga foumlr att saumlkerstaumllla om den mobila upplevelsen uppfyller behoven hos kon-

sumenterna Testet och analysen maringste goumlras kontinuerligt foumlr att vi skall kunna

saumlkerstaumllla att kunderna har det bekvaumlmt (Mehra 2015)

7 Mindre inneharingll foumlr mobilanvaumlndarna

E-handel webbplatser brukar goumlmma inneharingll foumlr att goumlra sidan mindre Sidan aumlr

i sjaumllva verket inte mindre men bara goumlmd foumlr anvaumlndarna som anvaumlnder sina

smarttelefoner Enligt Mehra Gagan aumlr det inte bra om det finns mindre inneharingll

foumlr mobilanvaumlndarna Oavsett med vilka enheter anvaumlndarna aumlr paring sidan boumlr det

finnas lika mycket inneharingll paring alla enheterna De flesta som handlar online brukar

aumlga flera enheter och med stor sannolikhet anvaumlnder de ocksaring andra enheter foumlr

att surfa Om inneharingllet inte ser likadant ut paring stationaumlra datorer och smarttelefo-

ner kan det orsaka daringlig anvaumlndarupplevelse foumlr anvaumlndaren Enligt Google an-

vaumlnder 90 av dem som handlar paring internet olika enheter Att begraumlnsa deras

anvaumlndning aumlr naringgonting som man boumlr undvika (Mehra 2015)

25

3 MOBILANPASSADE LOumlSNINGAR

Det finns maringnga olika loumlsningar att bygga sin webbplats med Det aumlr viktigt att komma

iharingg att mobila anvaumlndande oumlkar hela tiden Det staumlller nya krav paring webbdesign och an-

vaumlndargraumlnssnitt Anvaumlndarna foumlrvaumlntar sig idag att de ska kunna ta del av allt inneharingll paring

webben oavsett om de anvaumlnder en smarttelefon eller en surfplatta De mobilanpassade

loumlsningarna foumlr e-handel kan tex vara Responsiv design Adaptiv Design Mobilbutik

eller en mobil applikation

31 Adaptiv design

En adaptiv webbplats aumlr uppbyggd saring att den aumlr optimerad foumlr specifika skaumlrmstorlekar

Den anvaumlnder servern foumlr att upptaumlcka den enhet som anvaumlnds foumlr att visa webbplatsen

Byggande av webbplatsen med adaptiv metoden aumlr tidskraumlvande paring grund av behovet att

optimera sidan foumlr varje vald plattform front-end och back-end Innan man boumlrjar bygga

webbplatsen maringste man avgoumlra vilka alla plattformar webbplatsen kommer att optimeras

till Foumlrdel med adaptiv design aumlr att den har snabb uppladdningstid

rdquoCompared to Responsiv design adaptive web design is website-optimised for each

platform separately and makes use of the opportunities presented by the platform as

well as the models and functions It offers fast-loading pages due to the server detec-

tion device and browser sending data tailored for a particular devicerdquo

-Lubo Ruska 2013

Att vaumllja den raumltta loumlsningen handlar om att foumlrstaring vad maringlgruppen foumlrvaumlntar sig och vad

de behoumlver Eftersom foumlretaget 909jp inte aumlr en jaumltte stort foumlretag saringsom Ikea eller Ama-

zon som har oberaumlknat antal med produkter tycker jag att Responsiv design med Mobile

first metoden aumlr den mest effektiva metoden foumlr denna forskning

26

32 Responsiv design

Responsiv webbdesign aumlr ett av de populaumlraste saumltten att optimera en webbplats Re-

sponsiv webbdesign moumljliggoumlr att layouten foumlraumlndras beroende paring vilken skaumlrmstorlek

och skaumlrmupploumlsningen som anvaumlndarna har och beroende paring vilka funktioner som

webblaumlsaren stoumldjer (Responsive Design 2014)

Oberoende om anvaumlndarna anvaumlnder dator laumlsplatta eller sin mobiltelefon kommer sidan

att anpassa sig paring olika saumltt foumlr att anvaumlndarna vid alla tillfaumlllen ska ha en saring rik upplevelse

som moumljligt Man kan saumlga att en webbsida paring mindre skaumlrmar aumlr med ett annat ord en

krympande version av den stoumlrre skaumlrmstorleken

Inneharingllet saringsom kolumner och bilder paring webbsidan kommer automatiskt att anpassas

beroende paring skaumlrmstorleken Och detta aumlr paring grund av Grid systemet Allt inneharingll skall

haringllas inom ett Grid system Grid systemet skall skydda allt fraringn att bryta samman naumlr

sidan anvaumlnds paring olika skaumlrmstorlekar

Det finns 11 olika Grid storlekar tvaring kolumner tre kolumner fyra kolumner fem kolum-

ner sex kolumner sju kolumner aringtta kolumner nio kolumner tio kolumner 11 kolumner

och 12 kolumner Som exempel visar jag en figur av 12 kolumners Grid system (Swan

2014)

27

Figur 31 Ett exempel paring Grid system av 5 olika skaumlrmstorlekar (Phil Swan 2014)

Responsiv webbdesign fungerar med hjaumllp av HTML5 CSS media Query och Java-

Script Det bygger paring att webbutvecklare istaumlllet foumlr exakta storlekar maumltt i pixlar anger

sidelements storlekar i procent i jaumlmfoumlrelse med skaumlrmens storlek

Naumlr sidelementens storlekar aumlr i procent goumlr det att sidan blir flexibel och den anpassas

efter webblaumlsarens storlek medan fasta pixlar ger en scrollbar (rull-list) (Responsive De-

sign 2014)

33 Varfoumlr Responsiv design

Foumlrdelar med Responsiv design aumlr att den erbjuder en bra anvaumlndarupplevelse foumlr olika

enheter och skaumlrmstorlekar Tack vare den Responsiva designen har webbredaktoumlrer laumlt-

tare att hantera inneharingllet eftersom de bara har en version att hantera Ur en SEO synvin-

kel fungerar Responsiv design baumlttre eftersom den koncentrerar inneharingllet istaumlllet foumlr att

vattna ur det med maringnga URL foumlr samma inneharingll

28

Med en Responsiv design aumlr en webbplats laumlttare att hantera Att ha flera olika versioner

av en webbplats innebaumlr mera arbete Flera olika versioner av en webbplats innebaumlr sepa-

rata sidor att redigera och separata insatser foumlr soumlkmotoroptimering och separata soumlkmo-

torkampanjer Daumlrfoumlr aumlr det en stor foumlrdel att bygga en webbplats med den Responsiva

metoden

Med en Responsiv design kaumlnner anvaumlndarna baumlttre igen sidan baringde paring stationaumlra datorer

och mobiltelefoner Bygger man specifika webbplatser foumlr mobiler och surfplattor kan

det laumltt haumlnda att det blir olika information paring webbplatserna och att de struktureras olika

Laringt oss foumlrestaumllla oss att naringgon anvaumlnder sin mobiltelefon paring lunchen foumlr att leta efter en

flygbiljett fraringn Helsingfors till Tokyo Personen hittar en webbplats som har bra erbju-

dande och bestaumlmmer sig foumlr att fortsaumltta kolla naumlr han eller hon kommer hem Naumlr per-

sonen har kommit hem anvaumlnder hen datorn istaumlllet foumlr mobilen Om webbplatsen som

personen kollade paring lunchpausen var en Responsiv webbplats faringr personen en smidig och

bra upplevelse vid oumlvergaringngen fraringn den mobila webbplatsen till stationaumlr dator

(Lindahl 2014)

Det aumlr vaumlldigt viktigt att ha sin webbplats att optimerad till saring maringnga enheter som moumljligt

foumlr att ingen vet vilka kommer att vara framtidens enheter och daumlrfoumlr anses en webbplats

som anpassar sig till maringnga olika format vara den baumlsta loumlsningen Innan man kan boumlrja

med att designa en Responsiv webbplats maringste man veta vilka skaumlrmupploumlsningar och

storlekar det finns tillgaumlngliga och aumlr populaumlra idag Foumlr att kunna rikta till de olika skaumlr-

mupploumlsningarna med Media Queries har jag listat upp olika enheternas skaumlrmupploumls-

ningar i pixlar haumlr nedan i tabellen

ResolutionGrafisk array Enhet som anvaumlnder denna resolution skaumlrmstorlek i pixel-

taumltheten i pixlar

2880x1800 15-inch Apple MacBook Pro with Retina display

2560 x 1700 Google Chromebook Pixel

2560 x 1600 Samsung Google Nexus 10

13-inch Apple MacBook Pro with Retina display

29

2560 x 1440 27-inch Apple iMac 102 111 113 122 (Late 2009 -

2012)

1920 x 1080 HTC One Samsung

Sony Xperia Z amp Xperia ZL

Asus PadFone Infinity

Acer Aspire S5

Asus Zenbook Prime

1600 x 900 Apple Macbook Air

1366 x 768 Small desktoplaptop screen resolution

Asus VivoTab RT

Samsung N350

1280 x 1024 Standard desktop screen resolution

1280 x 800 Asus PadFone 2

Samsung Galaxy Note

Sony Xperia Tablet S

1280 x 720 Sony Xperia S

HTC Windows Phone 8X

HTC One mini

1136 x 640 Apple iPhone 5 5S amp 5C

Apple iPod Touch (5th generation)

960 x 640 Apple iPhone 4 amp 4S

Apple iPod Touch (4th generation)

854 x 480 Sony Xperia ray

Nokia N9

800 x 480 Nokia Lumia 510 amp 520

Samsung Galaxy I Galaxy S Galaxy S Plus Galaxy S Ad-

vance Galaxy SL Galaxy S Duos Galaxy Xcover 2 Galaxy

Beam Nexus S Captivate Glide amp Galaxy S III mini

HTC Desire X HTC Desire V Desire VC Desire VT De-

sire U amp Windows Phone 8S

30

LG Optimus 2X Optimus EX Optimus L5 II Optimus Q2

amp Optimus Black

T-Mobile G2x

Asus E600

620 x 480 Blackberry Bold 9900 amp Bold Touch 9930

Blackberry Torch 9810

LG Optimus Z

640 x 360 Sony Ericsson Vivaz amp Vivaz Pro

Nokia 500 amp 5800 XpressMusic

Nokia N8 N97 E7 and X6

480 x 320 Apple iPhone 3G amp 3GS

Samsung Galaxy Ace

320 x 240 Nokia E71

Blackberry Curve 9220 amp 9320

Sony Ericsson txt

Samsung Galaxy Y amp Galaxy Chat

Nokia Asha 501

Figur 32 Resolutions referenser paring olika enheter

31

4 VAD AumlR MOBILE FIRST

Mobile first metoden aumlr en metod och arbetsprocess foumlr webbdesigners som aumlr skapad av

Luke Wroblewski Naumlr man jobbar med ett projekt och designar strukturerar och imple-

menterar en webbplats aumlr Mobile first metoden man paringboumlrjar arbetet med Med metoden

menar Wroblewski att man foumlrst boumlrjar designa webbsidor fraringn de minsta enheterna

Figur 41 Mobile First att bygga webbsidan fraringn den minsta skaumlrmen till den stoumlrsta skaumlrmen

Wroblewski som har skapat Mobile First metoden understryker att metoden ska priorite-

ras daring man skapar anvaumlndarupplevelser

Det finns tre viktiga anledningar foumlr att utveckla foumlr Mobile First

Den foumlrbereder foumlr den stora utveckling och nya moumljligheter som uppkommer

inom det mobila omraringdet idag (836 av vaumlrldens befolkning anvaumlnder internet

paring sin smarttelefon 2015)

Den goumlr att vi blir tvungna att prioritera och fokusera varingrt inneharingll genom att ac-

ceptera de begraumlnsningar som aumlr foumlrenade med mobil design

32

och goumlr att vi kan leverera innovativa upplevelser genom att bygga utifraringn nya

funktioner som finns inbyggda i de mobila enheterna (bla GEO lokalisering)

En mobil webbplats behoumlver endast ha en mycket enkel layout och navigeringen ska vara

laumltt och effektiv

Naumlr man designar med Mobile first metoden tvingas man goumlra viktiga beslut om vad som

ska prioriteras Naumlr den optimerad design foumlr en liten skaumlrm visas paring en stoumlrre skaumlrm

kommer det att bli laumlttare att designa paring de stoumlrre skaumlrmarna Allt som ska goumlras aumlr daring

bara att fylla paring inneharingllet och designa saring att det aumlr grafiskt tilltalande och laumltt att hitta

inneharingllet (Wroblewski 2011)

41 Varfoumlr Mobile first

Vaumlrlden vi lever i idag aumlr inte mera som foumlr tio aringr sedan Allt runtom oss har utvecklats

speciellt mobiltelefonerna Tidigare anvaumlndes mobiltelefoner bara foumlr att skicka med-

delandet ringa och ta emot samtal Nu anvaumlnds den till foumlr att dels ta bilder video GPS

navigation foumlr vaumlgvisning och speciellt internetanvaumlndningen saringsom Google nyheter

Facebook Youtube och mycket mer Paring grund av det har ocksaring varingr livsstil foumlraumlndrats

Internetanvaumlndning idag har blivit allt vanligare Idag anvaumlnder vi naumltet i skolan paring jobbet

eller var och naumlr som helst bara man har en smarttelefon eller surfplatta och naumltet kopplat

Tidigare boumlrjade man bygga en webbplats fraringn den stoumlrsta skaumlrmen medan den mobila

sidan var en biprodukt Laringt oss saumlga att man har en webbplats med en rik grafisk layout

och ser stilig ut paring stationaumlra datorer Naumlr man skalar ner sidan foumlr att passa en mobilskaumlrm

kommer resultatet att vara en smaumlrta foumlr varingra oumlgon Paring den lilla mobilskaumlrmen kommer

det att vara olaumlsligt och svaringrt att anvaumlnda Foumlr att naring inneharingllet maringste du tom zooma in

och ut eller skrolla till houmlger och vaumlnster Det haumlr kommer att ge en negativ bild av ditt

foumlretag och anvaumlndarna kanske aldrig mera besoumlker din webbplats (Wroblewski 2011)

Ett bra exempel aumlr Tokyo Skytree webbplats som aumlnnu idag inte ha byggt in funktionalitet

och designen foumlr mindre skaumlrmupploumlsningar paring den engelska sidan

33

Tokyo Skytree aumlr vaumlrldens naumlst houmlgsta torn efter Burj Khalifa Tornet aumlr Japans houmlgsta

byggnadsverk med en houmljd paring 634 meter Den oumlppnades 22 maj 2012 och under det foumlrsta

aringret hade den 64 miljoner besoumlkare fraringn hela vaumlrlden Trots det har de laringtit bli att utveckla

den engelska webbsidan Paring bilden ser man att hemsidan ser exakt likadant ut paring stationaumlr

dator och paring mobilen

Figur 42 Hemsidan paring Tokyo Skytree paring stationaumlr datorskaumlrm

34

Figur 43 Hemsidan foumlr Tokyo Skytree Foumlrsta bilden visar hur det ser ut normalt Andra bilden visar naumlr man zoomar

in

Naumlr man foumlrsoumlker zooma in foumlr att laumlsa inneharingllet hoppar sidbalken (paring vaumlnstra sidan) paring

texten Det haumlr ger en mycket daringlig anvaumlndarupplevelse och kan ge fel bild av turistplat-

sen Ett annat fel paring sidan aumlr naumlr man vaumlljer spraringk till japanska ser sidan inte likadant ut

35

Figure 44 Hemsidan paring Tokyo Skytree paring japanska

Om du kan laumlsa japanska kommer du att undra varfoumlr det finns massor med information

och sidan ser mycket trevligare ut paring den japanska sidan Paring den internationella sidan

dvs engelska ser det inte lika trevligt ut och inneharingller inte allt som det goumlr paring den

japanska sidan Det aumlr som om den stoumlrsta maringlgruppen aumlr foumlr japanska turister och som

om de skulle inte bry sig om turister fraringn utlandet

Utoumlver det har de ocksaring byggt en mobilsida foumlr den japanska webbsidan Varfoumlr satsa bara

paring den japanska sidan och inte den engelska sidan naumlr maringlgruppen aumlr hela vaumlrlden

36

Figur 45 Mobil sidan paring Tokyo Skytree paring japanska

Vi lever i 2015 saring alla borde veta att det aumlr vaumlldigt viktig att ha en mobil webbplats som

erbjuder en bra anvaumlndarupplevelse paring alla spraringk som webbplatsen erbjuder Naumlr man har

sin sida paring flera spraringk och aumlndaring bestaumlmmer sig att bygga sidan ordentligt bara paring ett spraringk

kan anvaumlndarna faring en fel bild av foumlretaget I vaumlrsta fall kommer anvaumlndarna tycka att sidan

aumlr oparinglitligt och aringterkommer aldrig igen

Mobile first metoden aumlr daumlrfoumlr en mycket effektiv metod att bygga sin webbplats med

Man boumlrjar med att bygga sin webbplats fraringn den minsta skaumlrmen Man tvingas goumlra be-

slut om vad som ska absolut prioriteras Arbetsprocessen foumlr oss webbdesigners blir

mycket effektivare genom att foumlrst designa fraringn den minsta skaumlrmen och sedan foumlrflytta

oss till de stoumlrre skaumlrmarna Har man ett 6 kvadratmeters sovrum och foumlrsoumlker faring sin saumlng

skrivbord hylla klaumldskaringp och soffan att rymmas in aumlr det ganska utmanande Men naumlr

man boumlrjar med det mest utmanande i arbetsprocessen blir arbetet ocksaring mindre utma-

nande desto stoumlrre rum eller skaumlrm det blir (Wroblewski 2011)

37

5 909JP

909jp aumlr en elektronisk handel en moumlbelaffaumlr som saumlljer vaumlsterlaumlndska produkter Den

elektroniska butiken kommer att oumlppnas i Japan 2015 Deras foumlrvaumlntningar aumlr att faring in

en miljon dollar i foumlrsaumlljning per aringr I deras elektroniska moumlbelaffaumlr saumlljs bla stolar bord

soffor och lampor Maringlgruppen aumlr alla konsumenter mellan 18-60 aringringar

Japaner aumlr intresserade av vaumlsterlaumlndska produkter och livsstil men foumlr de flesta varor aumlr

designen knutna till deras egen kultur vilket goumlr dem mer intresserad Det aumlr ocksaring mycket

viktigt att ha sin hemsida paring japanska eftersom 99 av den japanska befolkningen foumlre-

drar att inte laumlsa inneharingllet paring andra spraringk (Khurana)

Japan aumlr ett land med vaumlrldens tredje stoumlrsta ekonomi paring 5 biljoner De har vaumlrldens ti-

onde stoumlrsta befolkning med ca 1271 miljoner invaringnare varav 70 av den totala befolk-

ningen anvaumlnder internet och 24 av dem anvaumlnder internet paring sin smarttelefon

(Khurana)

Viktigt med detta projekt aumlr att sikta aringt raumltt haringll och betjaumlna kunderna paring det baumlsta saumlttet

via webbplatsen Foumlr att kunna faringnga saring maringnga kunder som moumljligt aumlr det mycket viktigt

att designa en webbplats som aumlr anvaumlndarvaumlnlig stilig och laumltt att anvaumlnda (Wroblewski

2011)

Jag har daumlrfoumlr kommit underfund med att anvaumlnda Mobile first och Responsiv design

metoden foumlr att utveckla den mobila 909jp sidan Med tanke paring att det aumlr en Responsiv

design skall layouten paring den mobila versionen ocksaring passa in med de stoumlrre skaumlrmarna

naumlr sidan skalas upp Det aumlr dock viktigt poaumlngtera att jag endast kommer att koncentrera

mig paring den mobila designen och utveckla designen endast foumlr denna forskning

38

6 ANALYS AV DEN NYA DESIGNEN

Med hjaumllp av den tidigare designen paring 909jp och de kritiska punkterna jag har hittat under

forskningen har jag skapat en ny och foumlrbaumlttrad design av webbplatsen foumlr mobiler I det

haumlr kapitlet kommer jag att visa naringgra exempel paring den tidigare designen och jaumlmfoumlra den

med nya designen samt analysera arbetet

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger)

1 Call-to-action knapparna

Under hela arbetsprocessen har jag haft i minnet att navigeringar laumlnkar och knap-

parna ska vara tillraumlckligt stora att klicka paring I den tidigare designen har de stora

bilder paring kategorier vilket jag tycker aumlr en bra design att aringtervaumlnda

39

2 Soumlkfunktionen

Paring den tidigare versionen haumlr nedan ser man att soumlkfunktionen inte finns med

medan paring den nya designen ser man soumlkfunktionen genast naumlr man kommer till

sidan Som tidigare framfoumlrdes att soumlkfunktionen alltid ska synas saring att man laumltt

skall kunna soumlka fram produkterna Om soumlkfunktionen inte finns med eller aumlr svaringr

att hitta naumlr den behoumlvs kan det orsaka missnoumlje hos anvaumlndarna (Mehra Gagan

2015)

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp

Figur 63 Soumlkfunktionen paring den nya designen 909jp

40

3 Laumltt att navigera

Naumlr skaumlrmen aumlr liten aumlr det viktig att ha en enkel layout (Wroblewski 2011)

Jag har daumlrfor i den nya designen flyttat rdquoHemrdquo och rdquoBlogrdquo knapparna bort fraringn

den oumlvre menyn Hem-knappen finns nu i hamburgarmenyn paring vaumlnstra sidan me-

dan Blog-knappen finns i footer Detta goumlr att det ser mera organiserat ut

Figur 64 Gamla designen

Laringt oss foumlrflytta vidare till menyer foumlr kategorier Paring hemsidan har man tvaring alter-

nativ att naring kategorierna Foumlrsta aumlr den hamburgarmenyn knappen paring vaumlnstra si-

dan I menyn aumlr kategorierna indelade i fyra delar stolar lampor ergonomisk och

soffa amp middag Detta goumlr det laumltt och klart foumlr anvaumlndarna var produkterna finns

Eftersom vi bara har partiell uppmaumlrksamhet fraringn anvaumlndarna naumlr de aumlr paring sina

smarttelefoner har jag valt att saumltta in ikoner i menyn (Figur 65) Naumlr anvaumlndaren

bara anvaumlnder ena oumlgat foumlr att kolla paring mobilen och andra oumlgat foumlr naringgonting annat

ska den lilla skaumlrmen med webbplatsen kunna faringnga uppmaumlrksamheten samt un-

derlaumltta anvaumlndningen av webbplatsen (Wroblewski 2011)

41

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny

Andra menyn for kategorierna aumlr de fyra bilderna under Aeron chair slideshowen

Paring den tidigare designen ser man endast ett foumlnster av kategorierna som aumlr place-

rade i en kolumn som upprepas loggraumltt (Figur 66) Det haumlr goumlr att anvaumlndaren

maringste skrolla ner foumlr att se varenda kategori vilket kan orsaka obekvaumlmlighet Att

se flera kategorier paring samma skaumlrm sparar tid och anvaumlndaren kommer aumlven baumlttre

iharingg var sakerna finns Att ha bara rdquoenrdquo stor bild som syns paring skaumlrmen och vara

tvungen att skrolla ner foumlr att se naumlsta bild aumlr frustrerande Paring den nya designen

har jag tvaring rutor av kategorier bredvid varandra (Figur 66)

42

Figur 66 Kategorier paring den gamla designen (till vaumlnster) Kategorier paring den nya designen (till houmlger)

4 Ta det roliga ur shopping

Paring den nya designen straumlvar jag efter att erbjuda en bekvaumlm shopping-upplevelse

Naumlr anvaumlndarna besoumlker e-handeln med en smarttelefon foumlrvaumlntar hanhon sig

ocksaring att kunna ta del av allt inneharingll och goumlra jaumlmfoumlrelser med andra produkter

Jag har daumlrfoumlr i den nya designen pressat ihop laumlngden paring kolumnhoumljden som om-

ringar produkten Som resultat ser vi nu fyra produkter paring samma skaumlrm (Figur

67) I den tidigare designen ser vi en enda produkt paring en skaumlrm och foumlr att se

andra produkter maringste vi skrolla ner Paring det haumlr saumlttet har anvaumlndarna svaringrare att

jaumlmfoumlra produkterna (Laya 2014)

43

Figur 67 Tidigare produktsida (till vaumlnster) Ny produktsida (till houmlger)

I den tidigare designen ser vi ocksaring att det finns endast produktens bild produk-

tens namn koumlpvagnen och infoikonen Om man vill faring reda paring produktens inform-

ation maringste man klicka paring produktens bild eller paring infoikonen som foumlr oss direkt

till sjaumllva produktens sida Bara foumlr att man vill faring reda paring vad det aumlr foumlr produkt

foumlrs man vidare till en annan sida Det haumlr kan orsaka att kunden inte njuter totalt

av shoppingen och dessutom kan han inte jaumlmfoumlra produkterna naumlr han aumlr paring ka-

tegoriernas sida (Laya 2014)

Laringt oss hoppa vidare till den nya designen (Figur 68) Paring den nya designen har

jag satt in en kort detaljbeskrivning foumlr varje produkt Dessutom naumlr man klickar

paring infoikonen paring houmlgra sidan kommer man inte direkt till produktsidan utan det

kommer att dyka upp en inforuta som har en kort beskrivning paring produkten Om

anvaumlndaren aumlr intresserad av produkten kan han garing in till sjaumllva produktsida ge-

nom att klicka paring rdquoView productrdquo eller ocksaring paring produktbilden daumlr hanhon kan

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

INNEHAringLL

1 INLEDNING 8

11 Motiv foumlr aumlmnesvalet 8

12 Syfte 8

13 Avgraumlnsningar 9

14 Metod 9

15 Begrepp 10

2 VAD AumlR E-HANDEL 11

21 Mobil e-handel 11

22 Varfoumlr handla med mobil 12

23 Antalet kop okar pa mobilen 13

24 Bra mobila e-handel webbplatser 16

25 Kritiska punkterna foumlr bra mobil design paring e-handel 19

3 MOBILANPASSADE LOumlSNINGAR 25

31 Adaptiv design 25

32 Responsiv design 26

33 Varfoumlr Responsiv design 27

4 VAD AumlR MOBILE FIRST 31

41 Varfoumlr Mobile first 32

5 909jp 37

6 ANALYS AV DEN NYA DESIGNEN 38

7 SAMMANFATTNING 48

BOumlCKER 50

ELEKTRONISKA Kaumlllor 50

Figurer

Figur 21 Viktigaste skaumllet att naumlthandel sparar tid 13

Figur 22 Antal oumlkar paring mobilen 14

Figur 23Varfoumlr handlade du med smarttelefon 14

Figur 24 Mobilt handlar vi mer av naumlstan allt 15

Figur 25 Hemsida paring rakutencom foumlr mobiler 17

Figur 26 Hemsida paring amazoncom foumlr mobiler 18

Figur 27 Jaumlmfoumlrelse mellan en bra och daringlig navigation httpconversionxlcommake-

mobile-convert 20

Figur 28 Produktsida paring amazoncom 22

Figur 29 Produktsida paring amazoncom 23

Figur 210 Produktsida paring amazoncom About this item 23

Figur 31 Ett exempel paring Grid system av 5 olika skaumlrmstorlekar (Phil Swan 2014) 27

Figur 32 Resolutions referenser paring olika enheter 30

Figur 41 Mobile First att bygga webbsidan fraringn den minsta skaumlrmen till den stoumlrsta

skaumlrmen 31

Figur 42 Hemsidan paring Tokyo Skytree paring stationaumlr datorskaumlrm 33

Figur 43 Hemsidan foumlr Tokyo Skytree Foumlrsta bilden visar hur det ser ut normalt Andra

bilden visar naumlr man zoomar in 34

Figure 44 Hemsidan paring Tokyo Skytree paring japanska 35

Figur 45 Mobil sidan paring Tokyo Skytree paring japanska 36

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger) 38

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp 39

Figur 63 Soumlkfunktionen paring den nya designen 909jp 39

Figur 64 Gamla designen 40

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny 41

Figur 66 Kategorier paring den gamla design (till vaumlnster) Kategorier paring den nya design (till

houmlger) 42

Figur 67 Tidigare produktsida (till vaumlnster) Nya produktsida (till houmlger) 43

Figur 68 Inforutan som dyker upp 44

Figur 69 Produktsida av tabbar 45

Figur 610 View more 46

Figur 611 Stol kategori Show all 47

8

1 INLEDNING

11 Motiv foumlr aumlmnesvalet

Som Online Media studerande har jag alltid gillat att designa webbsidor Jag har alltid

varit intresserad av den haumlr inriktningen Ju mer man studerar desto mer vill man laumlra sig

Det att jag tycker om att designa webbsidor var inte enda orsaken till att jag valde mitt

aumlmne foumlr examensarbete Jag har alltid varit intresserad i elektronisk handel Hur faringr man

kunder att koumlpa sina produktertjaumlnster utan en fysisk saumlljare Hur marknadsfoumlr man och

hur naringr man baumlst kunderna daring foumlretaget med e-handel kan vara allt fraringn klaumldbutiker flyg-

bolag eller moumlbelaffaumlrer

Som webbdesigner har jag som uppgift att hjaumllpa kunderna att marknadsfoumlra deras foumlretag

eller produkter via webben Som aumlmne foumlr examensarbetet har jag valt att goumlra en fallstu-

die daumlr jag foumlrbaumlttrar den tidigare 909jp webbplatsen med hjaumllp av min forskning

Som bakgrund har jag kunskaper i webbdesign vilket jag kan anvaumlnda som verktyg En

bra webbplats maringste vara grafiskt attraktiv foumlr anvaumlndaren Med hjaumllp av det grafiska

maringste en bra webbplats daumlrmed lyckas leverera den information som anvaumlndarna aumlr ute

efter Det maringste vara laumltt att navigera runt sidorna samt hitta snabbt informationen an-

vaumlndarna vill naring Sidan maringste ocksaring kunna laddas ner snabbt aumlven via en laringngsammare

naumltuppkoppling foumlr att tillfredsstaumllla anvaumlndarna En webbplats maringste erbjuda en bra

funktionalitet samt anvaumlndarvaumlnlighet paring mindre skaumlrmar saringsom paring mobiler Som maringl

kommer jag att fokusera mig paring hur man kan utveckla och foumlrbaumlttra en e-handel design

foumlr mobiler

12 Syfte

Syftet med min uppsatts aumlr att laumlra mig att utveckla och foumlrbaumlttra anvaumlndarupplevelser i

e-handel foumlr mobiler Att handla paring naumltet med sin mobil sparar mer tid och maringnga garingnger

kan det vara mycket laumlttare Foumlr att lyckas med att bevisa aringt anvaumlndarna att en tjaumlnst aumlr

trovaumlrdig aumlr det jaumltte viktigt att erbjuda dem en bra och bekvaumlmt plats att handla online

9

Foumlr att lyckas med det maringste man ha en mycket bra design och funktionalitet paring webbsi-

dan I min uppsats kommer jag att fokusera paring design som byggs med Mobile first meto-

den Forskningsfraringgan i mitt examensarbete aumlr rdquoHur kan man baumlst utveckla en e-handel

webbplats foumlr mobilerrdquo

Arbetet skall vara till nytta foumlr webbdesigners och Online Media studerande som inte

tidigare har kunskaper inom e-handel foumlr mobiler och vill foumlrdjupa sig mera i det Arbetet

skall ocksaring vara till nytta foumlr dem som goumlr eller kommer att goumlra ett projekt inom e-han-

deln Det ska hjaumllpa dem oumlka foumlrstaringelse samt stoumlda dem i deras projekt

13 Avgraumlnsningar

I min uppsatts kommer det inte att staring om avancerad html och CSS kodning Jag kommer

fraumlmst att koncentrera mig paring strukturer och layouten och hur man baumlst kan uppnaring den

baumlsta anvaumlndarupplevelsen inom mobil e-handel Jag kommer inte att goumlra anvaumlndarbar-

hetstest men med hjaumllp av teorierna hittar jag de mest kritiska punkterna foumlr att kunna

goumlra en ny design till min fallstudie

14 Metod

Som metod kommer jag att undersoumlka strukturen layouten och anvaumlndarupplevelser foumlr

mobil e-handel i allmaumlnhet Forskningsmetoden paringminner naumlrmast om den vetenskapliga

fallstudiens metod

Metoden innebaumlr en plan foumlr att samla in organisera och integrera information och den

resulterar i ett speciellt forskningsresultat Jag kommer att anvaumlnda boumlckerna Ethan

Marcotte Responsive web design (2011) Wroblewski Luke Mobile First (2011) och

Karen McGrane Content strategy for Mobile (2012) Som material kommer jag ocksaring att

anvaumlnda kaumlllor fraringn naumltet och andra bocker

Med hjaumllp av de kritiska punkter jag hittar fraringn kaumlllor kommer jag att anvaumlnda som metod

foumlr att vidareutveckla designen foumlr den mobila e-handel webbplatsen (909jp) jag har som

fallstudie

10

Med hjaumllp av undersoumlkningen om e-handel foumlr mobiler kommer jag att veta vilka saker

det ska finnas paring sidan saringsom kategorier foumlr produkter kundvagn incheckning osv

15 Begrepp

SEO aumlr foumlrkortning fraringn engelska rdquoSearch Engine Optimizationrdquo och oumlversaumltts till Soumlk-

motoroptimering paring svenska Soumlkmotoroptimeringen anvaumlnds foumlr att faring en webbplats att

synas saring houmlgt upp som moumljligt bland resultaten vid soumlkningar i soumlkmotorer (Belinger

2014)

Call to action knapparna aumlr knappar som leder anvaumlndarna vidare till en viss sida Var-

foumlr man kallar det foumlr rdquoCall to actionrdquo aumlr for att knapparna ska kunna faringnga uppmaumlrksam-

heten paring anvaumlndarna foumlr att klicka sig vidare Knapparna kan vara tex meny- knappar

eller bilder som anvaumlnds som en laumlnk till en annan sida (Mehra 2015)

Hamburgarmenyn aumlr menyn som anvaumlnds paring webbplatsen foumlr smarttelefoner Haumlr aumlr

exempel paring menyn

Media Queries aumlr en CSS3-modul som tillaringter inneharingll rendering att anpassa sig till

olika skaumlrmupploumlsningar saringsom smarttelefoner surfplattor och datorskaumlrmar Foumlr att

kunna faring sin webbplats att anpassa sig till olika skaumlrmupploumlsningar naumlr skaumlrmen blir

mindre anvaumlnder man Media Queries i CSS3 (Wikipedia)

11

2 VAD AumlR E-HANDEL

E-handel fungerar genom att ett foumlretag eller individuell person koumlper saumlljer ut eller byter

produkter information eller tjaumlnst via internet eller andra datornaumltverk (Wikipedia)

En stor del av e-handeln aumlger rum i de saring kallade naumltbutikerna Naumltbutiker har ett lager

och en webbplats daumlr kunden goumlr sina bestaumlllningar Paring webbplatsen indelas varorna i

olika kategorier saring att anvaumlndarna paring sidan kan laumltt hitta varorna Foumlr att hitta varorna

snabbare brukar de flesta naumltbutikerna ocksaring ha en soumlkfunktion Paring sidan har anvaumlndarna

moumljligheter att saumltta produktenprodukter i kundvagnen och sedan fortsaumltta shoppa tills

man aumlr klar Vid bestaumlllningen garingr man bara till kassan daumlr anvaumlndaren kommer att vaumllja

transportsaumltt ange kontakt- och leveransuppgifter och vaumllja betalningsmetod Betalnings-

metoden aumlr vanligtvis kreditkort eller Paypal

Fakturan daumlrmed brukar inte ges till kunden daring det skulle innebaumlra oumlkade risker foumlr be-

draumlgerier foumlr naumltbutikerna Foumlr fakturakoumlp behoumlver kundens identitet faststaumlllas paring ett saumlk-

rare saumltt

Naumlr betalningen har gjorts levereras varorna vanligtvis som postpaket eller direkt leverans

till doumlrren foumlr stoumlrre varor saringsom moumlbler (E-handel 2015)

ldquoE-handeln fortsatter att vaxa Nastan hela tillvaxten sker numera i mobilen Det ar

inte priset som gor att vi handlar pa natet De viktigaste skalen ar att det ar smidigare

och att utbudet ar storre an i traditionella butikerrdquo

-Larsson Daniel 2014

21 Mobil e-handel

Mobil e-handel (m-handel) aumlr en term som beskriver en foumlrsaumlljningstransaktion som an-

vaumlnder traringdloumlsa elektroniska enheter saringsom smarttelefoner och surfplattor En mobil e-

handel webbplats fungerar i alla smarttelefoner och surfplattor och aumlr anpassad samt op-

timerad foumlr mobilens webblaumlsare

12

Foumlr att naring den mobila webbplatsen behoumlver man inte skriva in mobil adress eller aktivt

vaumllja att visa den mobila butiken Den mobila webbplatsen av en e-handel kaumlnner auto-

matiskt igen om man anvaumlnder en dator eller en mobil och visar daring upp en optimerad

version som anpassas efter anvaumlndarnas behov (Nordisk e-handel)

I den mobila versionen av e-handel brukar kategorier bestaring av endast en sida Foumlr att se

paring de resterande produkter i kategorierna kan man trycka paring rdquoVisa flerrdquo som man oftast

hittar laumlngst ner som en knapp eller laumlnk Detta goumlr uppladdningstiden paring sidan betydligt

snabbare och anvaumlndarna slipper vaumlnta Vaumlntande kan leda till avbrutna koumlp

Foumlrutom kategorier produkter och kassa i sjaumllvbetjaumlningsbutik foumlr kunder med produkter

som aumlr optimerade foumlr mobilanvaumlndarna aumlr ocksaring betalvaumlxeln foumlr kortbetalning specialan-

passad Detta goumlr det snabbare och enklare foumlr anvaumlndarnakunderna att avsluta sina koumlp

och betala med sina betalningskort (Mobil e-handel 2012)

22 Varfoumlr handla med mobil

Foumlr att kunna designa en ny mobil e-handel foumlr en kund aumlr det foumlrst jaumltte viktigt att veta

varfoumlr anvaumlndarna vaumlljer att koumlpa produktertjaumlnster med en smarttelefon eller surfplattor

Med hjaumllp av DIBS aringrliga rapport som gjordes i Sverige 2014 visas det att den viktigaste

orsaken till att anvaumlndarna handlar med sin mobil aumlr att det aumlr smidigare och sparar tid

Samtidigt aumlr det viktigt att inte heller gloumlmma bort att andra handlingsmotiv lyfts fram

som viktiga av mer aumln haumllften av alla tillfraringgade E-handel aumlr bra paring maringnga olika saumltt Den

moumlter konsumenternas behov och oumlnskemaringl i stor grad

Foumlr den nordiska befolkningen ska tidsbesparing enligt rapporten vara allra viktigaste foumlr

35-44 aringringar och minst viktig foumlr de yngsta aringldersgruppen 15-24 aringr som foumlr vilka laringga

priser istaumlllet spelar mer roll Utoumlver laringga priser drivs ungdomarna ocksaring oftast av det

stoumlrre utbudet som naumltbutikerna erbjuder paring internet

13

Figur 21 Viktigaste skaumllet att naumlthandel sparar tid

Enligt statiken visar det viktigaste skaumllet varfoumlr man anvaumlnder mobilen foumlr e-handel

64 saumlger att det sparar tid och aumlr smidigt

58 saumlger att det aumlr foumlrmaringnligare

56 saumlger att det aumlr enklare att jaumlmfoumlra mellan olika produkter

43 saumlger att det finns stoumlrre produktutbud

52 saumlger att det aumlr alltid oumlppet

23 Antalet kop okar pa mobilen

Enligt DIBS aringrliga rapport (2014) om mobil e-handel oumlkar antalet mobila e-handel kon-

sumenter hela tiden Nedan finns en figur om antalet under aringr 2013-2014 Figuren visar

hur maringnga garingnger konsumenterna har handlat varortjaumlnster med en smarttelefon eller

surfplattor under de senaste sex maringnaderna Naumlthandeln paring mobila enheterna oumlkar sakta

med saumlkert De som har handlat paring naumltet foumlrut handlar nu ocksaring allt mer Andelen stor-

konsumenter de som handlat minst 25 garingnger paring ett halvaringr har nu foumlrdubblats

De som handlade en eller tvaring garingnger har minskat fraringn 42 procent aringr 2013 till 35 procent

aringr 2014 vilket goumlr det till 17 procent mindre I snitt handlar konsumenter 1114 garingnger

per aringr med sin smarttelefon eller surfplattor

14

Figur 22 Antal oumlkar paring mobilen

Mobilen finns alltid naumlrmast

Enligt rapporten ska den vanligaste orsaken till varfoumlr anvaumlndarna vaumlljer att handla fraringn

mobilen vara foumlr att mobilen fanns naumlrmast till hands vid koumlpoumlgonblicket

Figur 23Varfoumlr handlade du med smarttelefon

15

60 saumlger att smarttelefon fanns naumlrmaste till hands vid koumlptillfaumlllet

27 anvaumlnder en app foumlr att handla online

17 oumlppnade ett erbjudande via e-mail i sin smarttelefon

5 har ingen dator

3 var i butik och koumlpte varan paring naumltet istaumlllet

4 hade ingen internetanslutning

3 scannade en QR-kod

Vad handlar vi med mobil

Foumlr att snabbt faringr en inblick i vad konsumenterna handlar med mobil ser vi haumlr nedan

(Figur 24) Konsumenter handlar mer av naumlstan allt Kunder som spenderar mer aumln 500

euro med smarttelefoner eller surfplattor koumlper i foumlrsta hand resor medan de som handlar

foumlr mindre aumln 100 euro laumlgger pengar paring media

Figur 24 Mobilt handlar vi mer av naumlstan allt

16

24 Bra mobila e-handel webbplatser

En bra mobil webbplats aumlr naumlr sidan aumlr enkel att anvaumlnda fast man bara anvaumlnder ett oumlga

och en tumme

rdquoWhen reflecting on a lot of mobile usage patterns I like to imagine people as rdquoone

eyeball and one thumb One thumb because they are likely to be holding their mobile

in one hand and using a single thumb to control it one eyeball because in many loca-

tions where mobile devices are use we only have peoples partial attentionrdquo

-Wroblewski Luke 2011)

Man kan aldrig exakt veta var anvaumlndaren befinner sig naumlr han surfar med sin smarttele-

fon Han kanske befinner sig i vardagsrummet foumlr att sloumltt surfa efter en ny lampa medan

han kollar paring Tvn Kanske anvaumlndaren sitter hemma och har en stadig wifi eller kanske

paring sommarstugan och har 3G4G som byter mellan olika naumltverk osv (Thoren 2012)

Naumlr anvaumlndaren goumlr naringgonting samtidigt som han surfar paring webbplatsen har han bara den

partiella uppmaumlrksamheten Daumlrfoumlr aumlr det betydligt fler kontexter som man maringste ta haumln-

syn till naumlr man designar webbplatser foumlr mobiler (Wroblewski 2011)

Haumlr aumlr tvaring bra exempel av lyckad e-handel foumlretag i vaumlrlden De har inte lyckats bra bara

med att saumllja produkterna utan ocksaring med designen Haumlr nedan aumlr bilderna paring mobil de-

signen av Rakutencom och Amazoncom

17

Figur 25 Hemsida paring rakutencom foumlr mobiler

Direkt naumlr man kommer paring sidan hittar man inloggningen koumlpvagnen soumlkfunktionen

menyn och speciellt de stora bilderna paring katalogerna vilket aumlr jaumltte laumltta att klicka paring

Fastaumln mobilskaumlrmen aumlr liten goumlr den haumlr det bara inte laumltt att navigera runt sidorna utan

ocksaring trevligt att vara paring sidan

Amazoncom har ocksaring lyckats bra med designen Naumlr man kommer till sidan ser man

direkt Sign in Department Wish List Deals och Search funktionen Under search funkt-

ionen ser man genast en inspirerande reklam som paringminner oss om att det aumlr varingr

rdquoSPRINGacuteS PERFECT PANTSrdquo Fast sidan har jaumltte maringnga objekt i den aumlr det trots allt

18

jaumltte laumltt att navigera runt sidorna Man tappar inte bort sig och man hittar laumltt det som

man aumlr ute efter

Figur 26 Hemsida paring amazoncom foumlr mobiler

19

25 Kritiska punkterna foumlr bra mobil design paring e-handel

Naumlr man handlar med en mindre skaumlrm aumlr det mera utmanande eftersom skaumlrmen aumlr liten

och anvaumlndarna brukar inte ha tillraumlckligt med taringlamod att sitta och soumlka naringgonting foumlr

laumlnge fraringn en liten skaumlrm Daumlrfoumlr aumlr det viktigt att veta vilka saker man boumlr beakta naumlr

man designar en mobil e-handel I det haumlr stycket kommer jag att lista upp sakerna man

boumlr veta naumlr man designar en mobil e-handel webbplats

Naumlr man handlar med en mindre skaumlrm aumlr det mera utmanande eftersom skaumlrmen aumlr liten

och anvaumlndarna brukar inte ha tillraumlckligt med taringlamod att sitta och soumlka naringgonting foumlr

laumlnge paring en liten skaumlrm Daumlrfoumlr aumlr det viktigt att veta vilka saker man boumlr beakta naumlr man

designar en mobil e-handel I det haumlr stycket kommer jag att lista upp kritiska saker man

boumlr veta naumlr man designar en mobil e-handel webbplats

1 Call-to-action knapparna foumlr smaring paring en mobilskaumlrm

Naumlr man designar webbsidor foumlr mobiler kan det ibland vara en utmaning att faring

allt att rymmas in Daumlrfoumlr brukar ocksaring webbdesigner minska de sk rdquocall to act-

ionrdquo knapparna Om anvaumlndaren maringste zooma in foumlr att klicka paring en knapp men

av misstag klickar paring en annan knapp kan det bli frustrerande foumlr dem och detta

leder sedan till att de laumlmnar sidan Daumlrfoumlr aumlr det mycket viktigt att designa knap-

parna och inneharingllet saring att anvaumlndarna laumltt naringr dem

2 Soumlkfunktionen ska alltid finnas med

Paring mobila e-handel webbplatser ska soumlkfunktionen alltid synas saring att man laumltt skall

kunna soumlka produkterna Laringt oss saumlga att kunden inte hittar produkten han soumlker

och vill anvaumlnda soumlkfunktionen Han letar och letar efter soumlkfunktionen utan re-

sultat Detta orsakar inte bara att kunden laumlmnar din sida men ocksaring kommer han

att beraumlttar det vidare aringt andra hur han upplevde din sida (Mehra 2015)

3 Laumltt att navigera

20

Det ska vara laumltt att navigera runt sidorna Anvaumlndarna ska veta var han aumlr och hur

han kommer vidare efter att han tex har valt produkten Menyerna foumlr katalo-

gerna ska vara laumltta att navigera Om menyerna foumlr katalogerna aumlr foumlrvirrande och

svaringra foumlr anvaumlndaren att hitta produkterna blir han laumltt irriterad Exemplar paring (fi-

gur 27) haumlr nedan visar att menyerna aumlr ganska foumlrvirrande paring vaumlnstra bilden me-

dan paring houmlgra sidan aumlr det klart och tydligt (Laya 2014)

Figur 27 Jaumlmfoumlrelse mellan en bra och daringlig navigation httpconversionxlcommake-mobile-convert

4 Ta de roliga ur shopping

Det vanligaste och stoumlrsta misstaget som de flesta foumlretag goumlr naumlr de designar foumlr

mobil e-handel aumlr att de foumlrsoumlker flytta kunderna fraringn shopping till koumlp Shopping

paring en stationaumlr dator goumlr det laumltt naumlr det oftast finns ett enormt antal produkter att

vaumllja mellan och det aumlr laumltt att blaumlddra runt Men foumlr mobiler aumlr det annat

Maringnga foumlretag foumlrsoumlker pressa ihop hela shopping-processen till smaring tabbar och

minska paring inneharingllet Som resultat kommer anvaumlndaren att kaumlnna sig paringtvingad

21

att goumlra snabba beslut paring inkoumlp Istaumlllet foumlr att ge anvaumlndarna en saringdan paringtvingad

upplevelse kan man istaumlllet locka anvaumlndarna med all information vi har att er-

bjuda

Det betyder inte att anvaumlndarna som besoumlker e-handeln med en smarttelefon inte

vill njuta av shoppingen saringsom de goumlr paring stationaumlra datorer Naumlr man designar en

mobil e-handel skall kunderna kunna faring njuta av shoppingen och jaumlmfoumlra mellan

olika produkter innan dem bestaumlmmer sig vilken produkt de vill koumlpa (Laya 2014)

ldquoBut we see many companies try to compress the whole shopping process into a

small number of taps The result is a mobile app or website that forces the user to

make a quick purchase decision rather than giving a great shopping experience

To the user it feels like the site switches from giving enticement to issuing de-

mandsrdquo

- Laya Peep 2014

5 Laringngsam uppladdningstid foumlr mobiler spelar en stor roll

Det aumlr mycket viktigt att haringlla sidstorleken saring liten som moumljligt saring att det aumlr snabbt

att ladda upp sidan

ldquoMobile users want to take quick action and also Google has reportedly started

including page speed for ranking websites in the search results so that makes it

even more important to have a lighter siterdquo

- Mehra Gagan 2015

Varingren 2014 rapporterade Radware (httpwwwradwarecomspring-sotu2014)

att majoriteten av besoumlkarna kommer att oumlverge webbplatsen efter att ha vaumlntat i

3 sekunder foumlr att ladda upp sidan (Laya 2014)

Om det finns mycket inneharingll paring en sida kan man som alternativ separera inne-

haringllet i olika flikar (Mehra 2015)

Jag har tagit ett exempel fraringn Amazoncom Paring produktsidan har ja valt en orange

vaumlska Foumlr att tex ytterligare laumlsa om produktbeskrivningen rdquoAbout this itemrdquo ser

22

jag en pil som aumlr paring houmlgra sidan (Figur 29) Naumlr jag trycker paring pilen eller laringdan

kommer jag till en annan sida daumlr jag kan laumlsa hela produktbeskrivningen (Figur

210) Paring det haumlr saumlttet inneharingller sidan all information man behoumlver men separe-

rade i olika flikar saring att det blir snabbare att ladda upp sidan

Figur 28 Produktsida paring amazoncom

23

Figur 29 Produktsida paring amazoncom

Figur 210 Produktsida paring amazoncom About this item

24

6 Misslyckade analyseringar av anvaumlndarna

Naumlr man bygger webbsidor aumlr det viktig att goumlra anvaumlndbarhetstest och analysera

kundernas beteende Hur anvaumlndarna kaumlnner sig naumlr de anvaumlnder sidan aumlr mycket

viktigt och avgoumlr hur bra din business kommer att rulla

Analyseringen aumlr den kritiska inputen foumlr designen Med analyseringen ser man

dels vilka mobila apparater anvaumlndarna anvaumlnder och om det aumlr naringgra svaringrigheter

och obekvaumlmligheter anvaumlndarna upplever vid anvaumlndningen Dessa faktorer aumlr

viktiga foumlr att saumlkerstaumllla om den mobila upplevelsen uppfyller behoven hos kon-

sumenterna Testet och analysen maringste goumlras kontinuerligt foumlr att vi skall kunna

saumlkerstaumllla att kunderna har det bekvaumlmt (Mehra 2015)

7 Mindre inneharingll foumlr mobilanvaumlndarna

E-handel webbplatser brukar goumlmma inneharingll foumlr att goumlra sidan mindre Sidan aumlr

i sjaumllva verket inte mindre men bara goumlmd foumlr anvaumlndarna som anvaumlnder sina

smarttelefoner Enligt Mehra Gagan aumlr det inte bra om det finns mindre inneharingll

foumlr mobilanvaumlndarna Oavsett med vilka enheter anvaumlndarna aumlr paring sidan boumlr det

finnas lika mycket inneharingll paring alla enheterna De flesta som handlar online brukar

aumlga flera enheter och med stor sannolikhet anvaumlnder de ocksaring andra enheter foumlr

att surfa Om inneharingllet inte ser likadant ut paring stationaumlra datorer och smarttelefo-

ner kan det orsaka daringlig anvaumlndarupplevelse foumlr anvaumlndaren Enligt Google an-

vaumlnder 90 av dem som handlar paring internet olika enheter Att begraumlnsa deras

anvaumlndning aumlr naringgonting som man boumlr undvika (Mehra 2015)

25

3 MOBILANPASSADE LOumlSNINGAR

Det finns maringnga olika loumlsningar att bygga sin webbplats med Det aumlr viktigt att komma

iharingg att mobila anvaumlndande oumlkar hela tiden Det staumlller nya krav paring webbdesign och an-

vaumlndargraumlnssnitt Anvaumlndarna foumlrvaumlntar sig idag att de ska kunna ta del av allt inneharingll paring

webben oavsett om de anvaumlnder en smarttelefon eller en surfplatta De mobilanpassade

loumlsningarna foumlr e-handel kan tex vara Responsiv design Adaptiv Design Mobilbutik

eller en mobil applikation

31 Adaptiv design

En adaptiv webbplats aumlr uppbyggd saring att den aumlr optimerad foumlr specifika skaumlrmstorlekar

Den anvaumlnder servern foumlr att upptaumlcka den enhet som anvaumlnds foumlr att visa webbplatsen

Byggande av webbplatsen med adaptiv metoden aumlr tidskraumlvande paring grund av behovet att

optimera sidan foumlr varje vald plattform front-end och back-end Innan man boumlrjar bygga

webbplatsen maringste man avgoumlra vilka alla plattformar webbplatsen kommer att optimeras

till Foumlrdel med adaptiv design aumlr att den har snabb uppladdningstid

rdquoCompared to Responsiv design adaptive web design is website-optimised for each

platform separately and makes use of the opportunities presented by the platform as

well as the models and functions It offers fast-loading pages due to the server detec-

tion device and browser sending data tailored for a particular devicerdquo

-Lubo Ruska 2013

Att vaumllja den raumltta loumlsningen handlar om att foumlrstaring vad maringlgruppen foumlrvaumlntar sig och vad

de behoumlver Eftersom foumlretaget 909jp inte aumlr en jaumltte stort foumlretag saringsom Ikea eller Ama-

zon som har oberaumlknat antal med produkter tycker jag att Responsiv design med Mobile

first metoden aumlr den mest effektiva metoden foumlr denna forskning

26

32 Responsiv design

Responsiv webbdesign aumlr ett av de populaumlraste saumltten att optimera en webbplats Re-

sponsiv webbdesign moumljliggoumlr att layouten foumlraumlndras beroende paring vilken skaumlrmstorlek

och skaumlrmupploumlsningen som anvaumlndarna har och beroende paring vilka funktioner som

webblaumlsaren stoumldjer (Responsive Design 2014)

Oberoende om anvaumlndarna anvaumlnder dator laumlsplatta eller sin mobiltelefon kommer sidan

att anpassa sig paring olika saumltt foumlr att anvaumlndarna vid alla tillfaumlllen ska ha en saring rik upplevelse

som moumljligt Man kan saumlga att en webbsida paring mindre skaumlrmar aumlr med ett annat ord en

krympande version av den stoumlrre skaumlrmstorleken

Inneharingllet saringsom kolumner och bilder paring webbsidan kommer automatiskt att anpassas

beroende paring skaumlrmstorleken Och detta aumlr paring grund av Grid systemet Allt inneharingll skall

haringllas inom ett Grid system Grid systemet skall skydda allt fraringn att bryta samman naumlr

sidan anvaumlnds paring olika skaumlrmstorlekar

Det finns 11 olika Grid storlekar tvaring kolumner tre kolumner fyra kolumner fem kolum-

ner sex kolumner sju kolumner aringtta kolumner nio kolumner tio kolumner 11 kolumner

och 12 kolumner Som exempel visar jag en figur av 12 kolumners Grid system (Swan

2014)

27

Figur 31 Ett exempel paring Grid system av 5 olika skaumlrmstorlekar (Phil Swan 2014)

Responsiv webbdesign fungerar med hjaumllp av HTML5 CSS media Query och Java-

Script Det bygger paring att webbutvecklare istaumlllet foumlr exakta storlekar maumltt i pixlar anger

sidelements storlekar i procent i jaumlmfoumlrelse med skaumlrmens storlek

Naumlr sidelementens storlekar aumlr i procent goumlr det att sidan blir flexibel och den anpassas

efter webblaumlsarens storlek medan fasta pixlar ger en scrollbar (rull-list) (Responsive De-

sign 2014)

33 Varfoumlr Responsiv design

Foumlrdelar med Responsiv design aumlr att den erbjuder en bra anvaumlndarupplevelse foumlr olika

enheter och skaumlrmstorlekar Tack vare den Responsiva designen har webbredaktoumlrer laumlt-

tare att hantera inneharingllet eftersom de bara har en version att hantera Ur en SEO synvin-

kel fungerar Responsiv design baumlttre eftersom den koncentrerar inneharingllet istaumlllet foumlr att

vattna ur det med maringnga URL foumlr samma inneharingll

28

Med en Responsiv design aumlr en webbplats laumlttare att hantera Att ha flera olika versioner

av en webbplats innebaumlr mera arbete Flera olika versioner av en webbplats innebaumlr sepa-

rata sidor att redigera och separata insatser foumlr soumlkmotoroptimering och separata soumlkmo-

torkampanjer Daumlrfoumlr aumlr det en stor foumlrdel att bygga en webbplats med den Responsiva

metoden

Med en Responsiv design kaumlnner anvaumlndarna baumlttre igen sidan baringde paring stationaumlra datorer

och mobiltelefoner Bygger man specifika webbplatser foumlr mobiler och surfplattor kan

det laumltt haumlnda att det blir olika information paring webbplatserna och att de struktureras olika

Laringt oss foumlrestaumllla oss att naringgon anvaumlnder sin mobiltelefon paring lunchen foumlr att leta efter en

flygbiljett fraringn Helsingfors till Tokyo Personen hittar en webbplats som har bra erbju-

dande och bestaumlmmer sig foumlr att fortsaumltta kolla naumlr han eller hon kommer hem Naumlr per-

sonen har kommit hem anvaumlnder hen datorn istaumlllet foumlr mobilen Om webbplatsen som

personen kollade paring lunchpausen var en Responsiv webbplats faringr personen en smidig och

bra upplevelse vid oumlvergaringngen fraringn den mobila webbplatsen till stationaumlr dator

(Lindahl 2014)

Det aumlr vaumlldigt viktigt att ha sin webbplats att optimerad till saring maringnga enheter som moumljligt

foumlr att ingen vet vilka kommer att vara framtidens enheter och daumlrfoumlr anses en webbplats

som anpassar sig till maringnga olika format vara den baumlsta loumlsningen Innan man kan boumlrja

med att designa en Responsiv webbplats maringste man veta vilka skaumlrmupploumlsningar och

storlekar det finns tillgaumlngliga och aumlr populaumlra idag Foumlr att kunna rikta till de olika skaumlr-

mupploumlsningarna med Media Queries har jag listat upp olika enheternas skaumlrmupploumls-

ningar i pixlar haumlr nedan i tabellen

ResolutionGrafisk array Enhet som anvaumlnder denna resolution skaumlrmstorlek i pixel-

taumltheten i pixlar

2880x1800 15-inch Apple MacBook Pro with Retina display

2560 x 1700 Google Chromebook Pixel

2560 x 1600 Samsung Google Nexus 10

13-inch Apple MacBook Pro with Retina display

29

2560 x 1440 27-inch Apple iMac 102 111 113 122 (Late 2009 -

2012)

1920 x 1080 HTC One Samsung

Sony Xperia Z amp Xperia ZL

Asus PadFone Infinity

Acer Aspire S5

Asus Zenbook Prime

1600 x 900 Apple Macbook Air

1366 x 768 Small desktoplaptop screen resolution

Asus VivoTab RT

Samsung N350

1280 x 1024 Standard desktop screen resolution

1280 x 800 Asus PadFone 2

Samsung Galaxy Note

Sony Xperia Tablet S

1280 x 720 Sony Xperia S

HTC Windows Phone 8X

HTC One mini

1136 x 640 Apple iPhone 5 5S amp 5C

Apple iPod Touch (5th generation)

960 x 640 Apple iPhone 4 amp 4S

Apple iPod Touch (4th generation)

854 x 480 Sony Xperia ray

Nokia N9

800 x 480 Nokia Lumia 510 amp 520

Samsung Galaxy I Galaxy S Galaxy S Plus Galaxy S Ad-

vance Galaxy SL Galaxy S Duos Galaxy Xcover 2 Galaxy

Beam Nexus S Captivate Glide amp Galaxy S III mini

HTC Desire X HTC Desire V Desire VC Desire VT De-

sire U amp Windows Phone 8S

30

LG Optimus 2X Optimus EX Optimus L5 II Optimus Q2

amp Optimus Black

T-Mobile G2x

Asus E600

620 x 480 Blackberry Bold 9900 amp Bold Touch 9930

Blackberry Torch 9810

LG Optimus Z

640 x 360 Sony Ericsson Vivaz amp Vivaz Pro

Nokia 500 amp 5800 XpressMusic

Nokia N8 N97 E7 and X6

480 x 320 Apple iPhone 3G amp 3GS

Samsung Galaxy Ace

320 x 240 Nokia E71

Blackberry Curve 9220 amp 9320

Sony Ericsson txt

Samsung Galaxy Y amp Galaxy Chat

Nokia Asha 501

Figur 32 Resolutions referenser paring olika enheter

31

4 VAD AumlR MOBILE FIRST

Mobile first metoden aumlr en metod och arbetsprocess foumlr webbdesigners som aumlr skapad av

Luke Wroblewski Naumlr man jobbar med ett projekt och designar strukturerar och imple-

menterar en webbplats aumlr Mobile first metoden man paringboumlrjar arbetet med Med metoden

menar Wroblewski att man foumlrst boumlrjar designa webbsidor fraringn de minsta enheterna

Figur 41 Mobile First att bygga webbsidan fraringn den minsta skaumlrmen till den stoumlrsta skaumlrmen

Wroblewski som har skapat Mobile First metoden understryker att metoden ska priorite-

ras daring man skapar anvaumlndarupplevelser

Det finns tre viktiga anledningar foumlr att utveckla foumlr Mobile First

Den foumlrbereder foumlr den stora utveckling och nya moumljligheter som uppkommer

inom det mobila omraringdet idag (836 av vaumlrldens befolkning anvaumlnder internet

paring sin smarttelefon 2015)

Den goumlr att vi blir tvungna att prioritera och fokusera varingrt inneharingll genom att ac-

ceptera de begraumlnsningar som aumlr foumlrenade med mobil design

32

och goumlr att vi kan leverera innovativa upplevelser genom att bygga utifraringn nya

funktioner som finns inbyggda i de mobila enheterna (bla GEO lokalisering)

En mobil webbplats behoumlver endast ha en mycket enkel layout och navigeringen ska vara

laumltt och effektiv

Naumlr man designar med Mobile first metoden tvingas man goumlra viktiga beslut om vad som

ska prioriteras Naumlr den optimerad design foumlr en liten skaumlrm visas paring en stoumlrre skaumlrm

kommer det att bli laumlttare att designa paring de stoumlrre skaumlrmarna Allt som ska goumlras aumlr daring

bara att fylla paring inneharingllet och designa saring att det aumlr grafiskt tilltalande och laumltt att hitta

inneharingllet (Wroblewski 2011)

41 Varfoumlr Mobile first

Vaumlrlden vi lever i idag aumlr inte mera som foumlr tio aringr sedan Allt runtom oss har utvecklats

speciellt mobiltelefonerna Tidigare anvaumlndes mobiltelefoner bara foumlr att skicka med-

delandet ringa och ta emot samtal Nu anvaumlnds den till foumlr att dels ta bilder video GPS

navigation foumlr vaumlgvisning och speciellt internetanvaumlndningen saringsom Google nyheter

Facebook Youtube och mycket mer Paring grund av det har ocksaring varingr livsstil foumlraumlndrats

Internetanvaumlndning idag har blivit allt vanligare Idag anvaumlnder vi naumltet i skolan paring jobbet

eller var och naumlr som helst bara man har en smarttelefon eller surfplatta och naumltet kopplat

Tidigare boumlrjade man bygga en webbplats fraringn den stoumlrsta skaumlrmen medan den mobila

sidan var en biprodukt Laringt oss saumlga att man har en webbplats med en rik grafisk layout

och ser stilig ut paring stationaumlra datorer Naumlr man skalar ner sidan foumlr att passa en mobilskaumlrm

kommer resultatet att vara en smaumlrta foumlr varingra oumlgon Paring den lilla mobilskaumlrmen kommer

det att vara olaumlsligt och svaringrt att anvaumlnda Foumlr att naring inneharingllet maringste du tom zooma in

och ut eller skrolla till houmlger och vaumlnster Det haumlr kommer att ge en negativ bild av ditt

foumlretag och anvaumlndarna kanske aldrig mera besoumlker din webbplats (Wroblewski 2011)

Ett bra exempel aumlr Tokyo Skytree webbplats som aumlnnu idag inte ha byggt in funktionalitet

och designen foumlr mindre skaumlrmupploumlsningar paring den engelska sidan

33

Tokyo Skytree aumlr vaumlrldens naumlst houmlgsta torn efter Burj Khalifa Tornet aumlr Japans houmlgsta

byggnadsverk med en houmljd paring 634 meter Den oumlppnades 22 maj 2012 och under det foumlrsta

aringret hade den 64 miljoner besoumlkare fraringn hela vaumlrlden Trots det har de laringtit bli att utveckla

den engelska webbsidan Paring bilden ser man att hemsidan ser exakt likadant ut paring stationaumlr

dator och paring mobilen

Figur 42 Hemsidan paring Tokyo Skytree paring stationaumlr datorskaumlrm

34

Figur 43 Hemsidan foumlr Tokyo Skytree Foumlrsta bilden visar hur det ser ut normalt Andra bilden visar naumlr man zoomar

in

Naumlr man foumlrsoumlker zooma in foumlr att laumlsa inneharingllet hoppar sidbalken (paring vaumlnstra sidan) paring

texten Det haumlr ger en mycket daringlig anvaumlndarupplevelse och kan ge fel bild av turistplat-

sen Ett annat fel paring sidan aumlr naumlr man vaumlljer spraringk till japanska ser sidan inte likadant ut

35

Figure 44 Hemsidan paring Tokyo Skytree paring japanska

Om du kan laumlsa japanska kommer du att undra varfoumlr det finns massor med information

och sidan ser mycket trevligare ut paring den japanska sidan Paring den internationella sidan

dvs engelska ser det inte lika trevligt ut och inneharingller inte allt som det goumlr paring den

japanska sidan Det aumlr som om den stoumlrsta maringlgruppen aumlr foumlr japanska turister och som

om de skulle inte bry sig om turister fraringn utlandet

Utoumlver det har de ocksaring byggt en mobilsida foumlr den japanska webbsidan Varfoumlr satsa bara

paring den japanska sidan och inte den engelska sidan naumlr maringlgruppen aumlr hela vaumlrlden

36

Figur 45 Mobil sidan paring Tokyo Skytree paring japanska

Vi lever i 2015 saring alla borde veta att det aumlr vaumlldigt viktig att ha en mobil webbplats som

erbjuder en bra anvaumlndarupplevelse paring alla spraringk som webbplatsen erbjuder Naumlr man har

sin sida paring flera spraringk och aumlndaring bestaumlmmer sig att bygga sidan ordentligt bara paring ett spraringk

kan anvaumlndarna faring en fel bild av foumlretaget I vaumlrsta fall kommer anvaumlndarna tycka att sidan

aumlr oparinglitligt och aringterkommer aldrig igen

Mobile first metoden aumlr daumlrfoumlr en mycket effektiv metod att bygga sin webbplats med

Man boumlrjar med att bygga sin webbplats fraringn den minsta skaumlrmen Man tvingas goumlra be-

slut om vad som ska absolut prioriteras Arbetsprocessen foumlr oss webbdesigners blir

mycket effektivare genom att foumlrst designa fraringn den minsta skaumlrmen och sedan foumlrflytta

oss till de stoumlrre skaumlrmarna Har man ett 6 kvadratmeters sovrum och foumlrsoumlker faring sin saumlng

skrivbord hylla klaumldskaringp och soffan att rymmas in aumlr det ganska utmanande Men naumlr

man boumlrjar med det mest utmanande i arbetsprocessen blir arbetet ocksaring mindre utma-

nande desto stoumlrre rum eller skaumlrm det blir (Wroblewski 2011)

37

5 909JP

909jp aumlr en elektronisk handel en moumlbelaffaumlr som saumlljer vaumlsterlaumlndska produkter Den

elektroniska butiken kommer att oumlppnas i Japan 2015 Deras foumlrvaumlntningar aumlr att faring in

en miljon dollar i foumlrsaumlljning per aringr I deras elektroniska moumlbelaffaumlr saumlljs bla stolar bord

soffor och lampor Maringlgruppen aumlr alla konsumenter mellan 18-60 aringringar

Japaner aumlr intresserade av vaumlsterlaumlndska produkter och livsstil men foumlr de flesta varor aumlr

designen knutna till deras egen kultur vilket goumlr dem mer intresserad Det aumlr ocksaring mycket

viktigt att ha sin hemsida paring japanska eftersom 99 av den japanska befolkningen foumlre-

drar att inte laumlsa inneharingllet paring andra spraringk (Khurana)

Japan aumlr ett land med vaumlrldens tredje stoumlrsta ekonomi paring 5 biljoner De har vaumlrldens ti-

onde stoumlrsta befolkning med ca 1271 miljoner invaringnare varav 70 av den totala befolk-

ningen anvaumlnder internet och 24 av dem anvaumlnder internet paring sin smarttelefon

(Khurana)

Viktigt med detta projekt aumlr att sikta aringt raumltt haringll och betjaumlna kunderna paring det baumlsta saumlttet

via webbplatsen Foumlr att kunna faringnga saring maringnga kunder som moumljligt aumlr det mycket viktigt

att designa en webbplats som aumlr anvaumlndarvaumlnlig stilig och laumltt att anvaumlnda (Wroblewski

2011)

Jag har daumlrfoumlr kommit underfund med att anvaumlnda Mobile first och Responsiv design

metoden foumlr att utveckla den mobila 909jp sidan Med tanke paring att det aumlr en Responsiv

design skall layouten paring den mobila versionen ocksaring passa in med de stoumlrre skaumlrmarna

naumlr sidan skalas upp Det aumlr dock viktigt poaumlngtera att jag endast kommer att koncentrera

mig paring den mobila designen och utveckla designen endast foumlr denna forskning

38

6 ANALYS AV DEN NYA DESIGNEN

Med hjaumllp av den tidigare designen paring 909jp och de kritiska punkterna jag har hittat under

forskningen har jag skapat en ny och foumlrbaumlttrad design av webbplatsen foumlr mobiler I det

haumlr kapitlet kommer jag att visa naringgra exempel paring den tidigare designen och jaumlmfoumlra den

med nya designen samt analysera arbetet

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger)

1 Call-to-action knapparna

Under hela arbetsprocessen har jag haft i minnet att navigeringar laumlnkar och knap-

parna ska vara tillraumlckligt stora att klicka paring I den tidigare designen har de stora

bilder paring kategorier vilket jag tycker aumlr en bra design att aringtervaumlnda

39

2 Soumlkfunktionen

Paring den tidigare versionen haumlr nedan ser man att soumlkfunktionen inte finns med

medan paring den nya designen ser man soumlkfunktionen genast naumlr man kommer till

sidan Som tidigare framfoumlrdes att soumlkfunktionen alltid ska synas saring att man laumltt

skall kunna soumlka fram produkterna Om soumlkfunktionen inte finns med eller aumlr svaringr

att hitta naumlr den behoumlvs kan det orsaka missnoumlje hos anvaumlndarna (Mehra Gagan

2015)

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp

Figur 63 Soumlkfunktionen paring den nya designen 909jp

40

3 Laumltt att navigera

Naumlr skaumlrmen aumlr liten aumlr det viktig att ha en enkel layout (Wroblewski 2011)

Jag har daumlrfor i den nya designen flyttat rdquoHemrdquo och rdquoBlogrdquo knapparna bort fraringn

den oumlvre menyn Hem-knappen finns nu i hamburgarmenyn paring vaumlnstra sidan me-

dan Blog-knappen finns i footer Detta goumlr att det ser mera organiserat ut

Figur 64 Gamla designen

Laringt oss foumlrflytta vidare till menyer foumlr kategorier Paring hemsidan har man tvaring alter-

nativ att naring kategorierna Foumlrsta aumlr den hamburgarmenyn knappen paring vaumlnstra si-

dan I menyn aumlr kategorierna indelade i fyra delar stolar lampor ergonomisk och

soffa amp middag Detta goumlr det laumltt och klart foumlr anvaumlndarna var produkterna finns

Eftersom vi bara har partiell uppmaumlrksamhet fraringn anvaumlndarna naumlr de aumlr paring sina

smarttelefoner har jag valt att saumltta in ikoner i menyn (Figur 65) Naumlr anvaumlndaren

bara anvaumlnder ena oumlgat foumlr att kolla paring mobilen och andra oumlgat foumlr naringgonting annat

ska den lilla skaumlrmen med webbplatsen kunna faringnga uppmaumlrksamheten samt un-

derlaumltta anvaumlndningen av webbplatsen (Wroblewski 2011)

41

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny

Andra menyn for kategorierna aumlr de fyra bilderna under Aeron chair slideshowen

Paring den tidigare designen ser man endast ett foumlnster av kategorierna som aumlr place-

rade i en kolumn som upprepas loggraumltt (Figur 66) Det haumlr goumlr att anvaumlndaren

maringste skrolla ner foumlr att se varenda kategori vilket kan orsaka obekvaumlmlighet Att

se flera kategorier paring samma skaumlrm sparar tid och anvaumlndaren kommer aumlven baumlttre

iharingg var sakerna finns Att ha bara rdquoenrdquo stor bild som syns paring skaumlrmen och vara

tvungen att skrolla ner foumlr att se naumlsta bild aumlr frustrerande Paring den nya designen

har jag tvaring rutor av kategorier bredvid varandra (Figur 66)

42

Figur 66 Kategorier paring den gamla designen (till vaumlnster) Kategorier paring den nya designen (till houmlger)

4 Ta det roliga ur shopping

Paring den nya designen straumlvar jag efter att erbjuda en bekvaumlm shopping-upplevelse

Naumlr anvaumlndarna besoumlker e-handeln med en smarttelefon foumlrvaumlntar hanhon sig

ocksaring att kunna ta del av allt inneharingll och goumlra jaumlmfoumlrelser med andra produkter

Jag har daumlrfoumlr i den nya designen pressat ihop laumlngden paring kolumnhoumljden som om-

ringar produkten Som resultat ser vi nu fyra produkter paring samma skaumlrm (Figur

67) I den tidigare designen ser vi en enda produkt paring en skaumlrm och foumlr att se

andra produkter maringste vi skrolla ner Paring det haumlr saumlttet har anvaumlndarna svaringrare att

jaumlmfoumlra produkterna (Laya 2014)

43

Figur 67 Tidigare produktsida (till vaumlnster) Ny produktsida (till houmlger)

I den tidigare designen ser vi ocksaring att det finns endast produktens bild produk-

tens namn koumlpvagnen och infoikonen Om man vill faring reda paring produktens inform-

ation maringste man klicka paring produktens bild eller paring infoikonen som foumlr oss direkt

till sjaumllva produktens sida Bara foumlr att man vill faring reda paring vad det aumlr foumlr produkt

foumlrs man vidare till en annan sida Det haumlr kan orsaka att kunden inte njuter totalt

av shoppingen och dessutom kan han inte jaumlmfoumlra produkterna naumlr han aumlr paring ka-

tegoriernas sida (Laya 2014)

Laringt oss hoppa vidare till den nya designen (Figur 68) Paring den nya designen har

jag satt in en kort detaljbeskrivning foumlr varje produkt Dessutom naumlr man klickar

paring infoikonen paring houmlgra sidan kommer man inte direkt till produktsidan utan det

kommer att dyka upp en inforuta som har en kort beskrivning paring produkten Om

anvaumlndaren aumlr intresserad av produkten kan han garing in till sjaumllva produktsida ge-

nom att klicka paring rdquoView productrdquo eller ocksaring paring produktbilden daumlr hanhon kan

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

Figurer

Figur 21 Viktigaste skaumllet att naumlthandel sparar tid 13

Figur 22 Antal oumlkar paring mobilen 14

Figur 23Varfoumlr handlade du med smarttelefon 14

Figur 24 Mobilt handlar vi mer av naumlstan allt 15

Figur 25 Hemsida paring rakutencom foumlr mobiler 17

Figur 26 Hemsida paring amazoncom foumlr mobiler 18

Figur 27 Jaumlmfoumlrelse mellan en bra och daringlig navigation httpconversionxlcommake-

mobile-convert 20

Figur 28 Produktsida paring amazoncom 22

Figur 29 Produktsida paring amazoncom 23

Figur 210 Produktsida paring amazoncom About this item 23

Figur 31 Ett exempel paring Grid system av 5 olika skaumlrmstorlekar (Phil Swan 2014) 27

Figur 32 Resolutions referenser paring olika enheter 30

Figur 41 Mobile First att bygga webbsidan fraringn den minsta skaumlrmen till den stoumlrsta

skaumlrmen 31

Figur 42 Hemsidan paring Tokyo Skytree paring stationaumlr datorskaumlrm 33

Figur 43 Hemsidan foumlr Tokyo Skytree Foumlrsta bilden visar hur det ser ut normalt Andra

bilden visar naumlr man zoomar in 34

Figure 44 Hemsidan paring Tokyo Skytree paring japanska 35

Figur 45 Mobil sidan paring Tokyo Skytree paring japanska 36

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger) 38

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp 39

Figur 63 Soumlkfunktionen paring den nya designen 909jp 39

Figur 64 Gamla designen 40

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny 41

Figur 66 Kategorier paring den gamla design (till vaumlnster) Kategorier paring den nya design (till

houmlger) 42

Figur 67 Tidigare produktsida (till vaumlnster) Nya produktsida (till houmlger) 43

Figur 68 Inforutan som dyker upp 44

Figur 69 Produktsida av tabbar 45

Figur 610 View more 46

Figur 611 Stol kategori Show all 47

8

1 INLEDNING

11 Motiv foumlr aumlmnesvalet

Som Online Media studerande har jag alltid gillat att designa webbsidor Jag har alltid

varit intresserad av den haumlr inriktningen Ju mer man studerar desto mer vill man laumlra sig

Det att jag tycker om att designa webbsidor var inte enda orsaken till att jag valde mitt

aumlmne foumlr examensarbete Jag har alltid varit intresserad i elektronisk handel Hur faringr man

kunder att koumlpa sina produktertjaumlnster utan en fysisk saumlljare Hur marknadsfoumlr man och

hur naringr man baumlst kunderna daring foumlretaget med e-handel kan vara allt fraringn klaumldbutiker flyg-

bolag eller moumlbelaffaumlrer

Som webbdesigner har jag som uppgift att hjaumllpa kunderna att marknadsfoumlra deras foumlretag

eller produkter via webben Som aumlmne foumlr examensarbetet har jag valt att goumlra en fallstu-

die daumlr jag foumlrbaumlttrar den tidigare 909jp webbplatsen med hjaumllp av min forskning

Som bakgrund har jag kunskaper i webbdesign vilket jag kan anvaumlnda som verktyg En

bra webbplats maringste vara grafiskt attraktiv foumlr anvaumlndaren Med hjaumllp av det grafiska

maringste en bra webbplats daumlrmed lyckas leverera den information som anvaumlndarna aumlr ute

efter Det maringste vara laumltt att navigera runt sidorna samt hitta snabbt informationen an-

vaumlndarna vill naring Sidan maringste ocksaring kunna laddas ner snabbt aumlven via en laringngsammare

naumltuppkoppling foumlr att tillfredsstaumllla anvaumlndarna En webbplats maringste erbjuda en bra

funktionalitet samt anvaumlndarvaumlnlighet paring mindre skaumlrmar saringsom paring mobiler Som maringl

kommer jag att fokusera mig paring hur man kan utveckla och foumlrbaumlttra en e-handel design

foumlr mobiler

12 Syfte

Syftet med min uppsatts aumlr att laumlra mig att utveckla och foumlrbaumlttra anvaumlndarupplevelser i

e-handel foumlr mobiler Att handla paring naumltet med sin mobil sparar mer tid och maringnga garingnger

kan det vara mycket laumlttare Foumlr att lyckas med att bevisa aringt anvaumlndarna att en tjaumlnst aumlr

trovaumlrdig aumlr det jaumltte viktigt att erbjuda dem en bra och bekvaumlmt plats att handla online

9

Foumlr att lyckas med det maringste man ha en mycket bra design och funktionalitet paring webbsi-

dan I min uppsats kommer jag att fokusera paring design som byggs med Mobile first meto-

den Forskningsfraringgan i mitt examensarbete aumlr rdquoHur kan man baumlst utveckla en e-handel

webbplats foumlr mobilerrdquo

Arbetet skall vara till nytta foumlr webbdesigners och Online Media studerande som inte

tidigare har kunskaper inom e-handel foumlr mobiler och vill foumlrdjupa sig mera i det Arbetet

skall ocksaring vara till nytta foumlr dem som goumlr eller kommer att goumlra ett projekt inom e-han-

deln Det ska hjaumllpa dem oumlka foumlrstaringelse samt stoumlda dem i deras projekt

13 Avgraumlnsningar

I min uppsatts kommer det inte att staring om avancerad html och CSS kodning Jag kommer

fraumlmst att koncentrera mig paring strukturer och layouten och hur man baumlst kan uppnaring den

baumlsta anvaumlndarupplevelsen inom mobil e-handel Jag kommer inte att goumlra anvaumlndarbar-

hetstest men med hjaumllp av teorierna hittar jag de mest kritiska punkterna foumlr att kunna

goumlra en ny design till min fallstudie

14 Metod

Som metod kommer jag att undersoumlka strukturen layouten och anvaumlndarupplevelser foumlr

mobil e-handel i allmaumlnhet Forskningsmetoden paringminner naumlrmast om den vetenskapliga

fallstudiens metod

Metoden innebaumlr en plan foumlr att samla in organisera och integrera information och den

resulterar i ett speciellt forskningsresultat Jag kommer att anvaumlnda boumlckerna Ethan

Marcotte Responsive web design (2011) Wroblewski Luke Mobile First (2011) och

Karen McGrane Content strategy for Mobile (2012) Som material kommer jag ocksaring att

anvaumlnda kaumlllor fraringn naumltet och andra bocker

Med hjaumllp av de kritiska punkter jag hittar fraringn kaumlllor kommer jag att anvaumlnda som metod

foumlr att vidareutveckla designen foumlr den mobila e-handel webbplatsen (909jp) jag har som

fallstudie

10

Med hjaumllp av undersoumlkningen om e-handel foumlr mobiler kommer jag att veta vilka saker

det ska finnas paring sidan saringsom kategorier foumlr produkter kundvagn incheckning osv

15 Begrepp

SEO aumlr foumlrkortning fraringn engelska rdquoSearch Engine Optimizationrdquo och oumlversaumltts till Soumlk-

motoroptimering paring svenska Soumlkmotoroptimeringen anvaumlnds foumlr att faring en webbplats att

synas saring houmlgt upp som moumljligt bland resultaten vid soumlkningar i soumlkmotorer (Belinger

2014)

Call to action knapparna aumlr knappar som leder anvaumlndarna vidare till en viss sida Var-

foumlr man kallar det foumlr rdquoCall to actionrdquo aumlr for att knapparna ska kunna faringnga uppmaumlrksam-

heten paring anvaumlndarna foumlr att klicka sig vidare Knapparna kan vara tex meny- knappar

eller bilder som anvaumlnds som en laumlnk till en annan sida (Mehra 2015)

Hamburgarmenyn aumlr menyn som anvaumlnds paring webbplatsen foumlr smarttelefoner Haumlr aumlr

exempel paring menyn

Media Queries aumlr en CSS3-modul som tillaringter inneharingll rendering att anpassa sig till

olika skaumlrmupploumlsningar saringsom smarttelefoner surfplattor och datorskaumlrmar Foumlr att

kunna faring sin webbplats att anpassa sig till olika skaumlrmupploumlsningar naumlr skaumlrmen blir

mindre anvaumlnder man Media Queries i CSS3 (Wikipedia)

11

2 VAD AumlR E-HANDEL

E-handel fungerar genom att ett foumlretag eller individuell person koumlper saumlljer ut eller byter

produkter information eller tjaumlnst via internet eller andra datornaumltverk (Wikipedia)

En stor del av e-handeln aumlger rum i de saring kallade naumltbutikerna Naumltbutiker har ett lager

och en webbplats daumlr kunden goumlr sina bestaumlllningar Paring webbplatsen indelas varorna i

olika kategorier saring att anvaumlndarna paring sidan kan laumltt hitta varorna Foumlr att hitta varorna

snabbare brukar de flesta naumltbutikerna ocksaring ha en soumlkfunktion Paring sidan har anvaumlndarna

moumljligheter att saumltta produktenprodukter i kundvagnen och sedan fortsaumltta shoppa tills

man aumlr klar Vid bestaumlllningen garingr man bara till kassan daumlr anvaumlndaren kommer att vaumllja

transportsaumltt ange kontakt- och leveransuppgifter och vaumllja betalningsmetod Betalnings-

metoden aumlr vanligtvis kreditkort eller Paypal

Fakturan daumlrmed brukar inte ges till kunden daring det skulle innebaumlra oumlkade risker foumlr be-

draumlgerier foumlr naumltbutikerna Foumlr fakturakoumlp behoumlver kundens identitet faststaumlllas paring ett saumlk-

rare saumltt

Naumlr betalningen har gjorts levereras varorna vanligtvis som postpaket eller direkt leverans

till doumlrren foumlr stoumlrre varor saringsom moumlbler (E-handel 2015)

ldquoE-handeln fortsatter att vaxa Nastan hela tillvaxten sker numera i mobilen Det ar

inte priset som gor att vi handlar pa natet De viktigaste skalen ar att det ar smidigare

och att utbudet ar storre an i traditionella butikerrdquo

-Larsson Daniel 2014

21 Mobil e-handel

Mobil e-handel (m-handel) aumlr en term som beskriver en foumlrsaumlljningstransaktion som an-

vaumlnder traringdloumlsa elektroniska enheter saringsom smarttelefoner och surfplattor En mobil e-

handel webbplats fungerar i alla smarttelefoner och surfplattor och aumlr anpassad samt op-

timerad foumlr mobilens webblaumlsare

12

Foumlr att naring den mobila webbplatsen behoumlver man inte skriva in mobil adress eller aktivt

vaumllja att visa den mobila butiken Den mobila webbplatsen av en e-handel kaumlnner auto-

matiskt igen om man anvaumlnder en dator eller en mobil och visar daring upp en optimerad

version som anpassas efter anvaumlndarnas behov (Nordisk e-handel)

I den mobila versionen av e-handel brukar kategorier bestaring av endast en sida Foumlr att se

paring de resterande produkter i kategorierna kan man trycka paring rdquoVisa flerrdquo som man oftast

hittar laumlngst ner som en knapp eller laumlnk Detta goumlr uppladdningstiden paring sidan betydligt

snabbare och anvaumlndarna slipper vaumlnta Vaumlntande kan leda till avbrutna koumlp

Foumlrutom kategorier produkter och kassa i sjaumllvbetjaumlningsbutik foumlr kunder med produkter

som aumlr optimerade foumlr mobilanvaumlndarna aumlr ocksaring betalvaumlxeln foumlr kortbetalning specialan-

passad Detta goumlr det snabbare och enklare foumlr anvaumlndarnakunderna att avsluta sina koumlp

och betala med sina betalningskort (Mobil e-handel 2012)

22 Varfoumlr handla med mobil

Foumlr att kunna designa en ny mobil e-handel foumlr en kund aumlr det foumlrst jaumltte viktigt att veta

varfoumlr anvaumlndarna vaumlljer att koumlpa produktertjaumlnster med en smarttelefon eller surfplattor

Med hjaumllp av DIBS aringrliga rapport som gjordes i Sverige 2014 visas det att den viktigaste

orsaken till att anvaumlndarna handlar med sin mobil aumlr att det aumlr smidigare och sparar tid

Samtidigt aumlr det viktigt att inte heller gloumlmma bort att andra handlingsmotiv lyfts fram

som viktiga av mer aumln haumllften av alla tillfraringgade E-handel aumlr bra paring maringnga olika saumltt Den

moumlter konsumenternas behov och oumlnskemaringl i stor grad

Foumlr den nordiska befolkningen ska tidsbesparing enligt rapporten vara allra viktigaste foumlr

35-44 aringringar och minst viktig foumlr de yngsta aringldersgruppen 15-24 aringr som foumlr vilka laringga

priser istaumlllet spelar mer roll Utoumlver laringga priser drivs ungdomarna ocksaring oftast av det

stoumlrre utbudet som naumltbutikerna erbjuder paring internet

13

Figur 21 Viktigaste skaumllet att naumlthandel sparar tid

Enligt statiken visar det viktigaste skaumllet varfoumlr man anvaumlnder mobilen foumlr e-handel

64 saumlger att det sparar tid och aumlr smidigt

58 saumlger att det aumlr foumlrmaringnligare

56 saumlger att det aumlr enklare att jaumlmfoumlra mellan olika produkter

43 saumlger att det finns stoumlrre produktutbud

52 saumlger att det aumlr alltid oumlppet

23 Antalet kop okar pa mobilen

Enligt DIBS aringrliga rapport (2014) om mobil e-handel oumlkar antalet mobila e-handel kon-

sumenter hela tiden Nedan finns en figur om antalet under aringr 2013-2014 Figuren visar

hur maringnga garingnger konsumenterna har handlat varortjaumlnster med en smarttelefon eller

surfplattor under de senaste sex maringnaderna Naumlthandeln paring mobila enheterna oumlkar sakta

med saumlkert De som har handlat paring naumltet foumlrut handlar nu ocksaring allt mer Andelen stor-

konsumenter de som handlat minst 25 garingnger paring ett halvaringr har nu foumlrdubblats

De som handlade en eller tvaring garingnger har minskat fraringn 42 procent aringr 2013 till 35 procent

aringr 2014 vilket goumlr det till 17 procent mindre I snitt handlar konsumenter 1114 garingnger

per aringr med sin smarttelefon eller surfplattor

14

Figur 22 Antal oumlkar paring mobilen

Mobilen finns alltid naumlrmast

Enligt rapporten ska den vanligaste orsaken till varfoumlr anvaumlndarna vaumlljer att handla fraringn

mobilen vara foumlr att mobilen fanns naumlrmast till hands vid koumlpoumlgonblicket

Figur 23Varfoumlr handlade du med smarttelefon

15

60 saumlger att smarttelefon fanns naumlrmaste till hands vid koumlptillfaumlllet

27 anvaumlnder en app foumlr att handla online

17 oumlppnade ett erbjudande via e-mail i sin smarttelefon

5 har ingen dator

3 var i butik och koumlpte varan paring naumltet istaumlllet

4 hade ingen internetanslutning

3 scannade en QR-kod

Vad handlar vi med mobil

Foumlr att snabbt faringr en inblick i vad konsumenterna handlar med mobil ser vi haumlr nedan

(Figur 24) Konsumenter handlar mer av naumlstan allt Kunder som spenderar mer aumln 500

euro med smarttelefoner eller surfplattor koumlper i foumlrsta hand resor medan de som handlar

foumlr mindre aumln 100 euro laumlgger pengar paring media

Figur 24 Mobilt handlar vi mer av naumlstan allt

16

24 Bra mobila e-handel webbplatser

En bra mobil webbplats aumlr naumlr sidan aumlr enkel att anvaumlnda fast man bara anvaumlnder ett oumlga

och en tumme

rdquoWhen reflecting on a lot of mobile usage patterns I like to imagine people as rdquoone

eyeball and one thumb One thumb because they are likely to be holding their mobile

in one hand and using a single thumb to control it one eyeball because in many loca-

tions where mobile devices are use we only have peoples partial attentionrdquo

-Wroblewski Luke 2011)

Man kan aldrig exakt veta var anvaumlndaren befinner sig naumlr han surfar med sin smarttele-

fon Han kanske befinner sig i vardagsrummet foumlr att sloumltt surfa efter en ny lampa medan

han kollar paring Tvn Kanske anvaumlndaren sitter hemma och har en stadig wifi eller kanske

paring sommarstugan och har 3G4G som byter mellan olika naumltverk osv (Thoren 2012)

Naumlr anvaumlndaren goumlr naringgonting samtidigt som han surfar paring webbplatsen har han bara den

partiella uppmaumlrksamheten Daumlrfoumlr aumlr det betydligt fler kontexter som man maringste ta haumln-

syn till naumlr man designar webbplatser foumlr mobiler (Wroblewski 2011)

Haumlr aumlr tvaring bra exempel av lyckad e-handel foumlretag i vaumlrlden De har inte lyckats bra bara

med att saumllja produkterna utan ocksaring med designen Haumlr nedan aumlr bilderna paring mobil de-

signen av Rakutencom och Amazoncom

17

Figur 25 Hemsida paring rakutencom foumlr mobiler

Direkt naumlr man kommer paring sidan hittar man inloggningen koumlpvagnen soumlkfunktionen

menyn och speciellt de stora bilderna paring katalogerna vilket aumlr jaumltte laumltta att klicka paring

Fastaumln mobilskaumlrmen aumlr liten goumlr den haumlr det bara inte laumltt att navigera runt sidorna utan

ocksaring trevligt att vara paring sidan

Amazoncom har ocksaring lyckats bra med designen Naumlr man kommer till sidan ser man

direkt Sign in Department Wish List Deals och Search funktionen Under search funkt-

ionen ser man genast en inspirerande reklam som paringminner oss om att det aumlr varingr

rdquoSPRINGacuteS PERFECT PANTSrdquo Fast sidan har jaumltte maringnga objekt i den aumlr det trots allt

18

jaumltte laumltt att navigera runt sidorna Man tappar inte bort sig och man hittar laumltt det som

man aumlr ute efter

Figur 26 Hemsida paring amazoncom foumlr mobiler

19

25 Kritiska punkterna foumlr bra mobil design paring e-handel

Naumlr man handlar med en mindre skaumlrm aumlr det mera utmanande eftersom skaumlrmen aumlr liten

och anvaumlndarna brukar inte ha tillraumlckligt med taringlamod att sitta och soumlka naringgonting foumlr

laumlnge fraringn en liten skaumlrm Daumlrfoumlr aumlr det viktigt att veta vilka saker man boumlr beakta naumlr

man designar en mobil e-handel I det haumlr stycket kommer jag att lista upp sakerna man

boumlr veta naumlr man designar en mobil e-handel webbplats

Naumlr man handlar med en mindre skaumlrm aumlr det mera utmanande eftersom skaumlrmen aumlr liten

och anvaumlndarna brukar inte ha tillraumlckligt med taringlamod att sitta och soumlka naringgonting foumlr

laumlnge paring en liten skaumlrm Daumlrfoumlr aumlr det viktigt att veta vilka saker man boumlr beakta naumlr man

designar en mobil e-handel I det haumlr stycket kommer jag att lista upp kritiska saker man

boumlr veta naumlr man designar en mobil e-handel webbplats

1 Call-to-action knapparna foumlr smaring paring en mobilskaumlrm

Naumlr man designar webbsidor foumlr mobiler kan det ibland vara en utmaning att faring

allt att rymmas in Daumlrfoumlr brukar ocksaring webbdesigner minska de sk rdquocall to act-

ionrdquo knapparna Om anvaumlndaren maringste zooma in foumlr att klicka paring en knapp men

av misstag klickar paring en annan knapp kan det bli frustrerande foumlr dem och detta

leder sedan till att de laumlmnar sidan Daumlrfoumlr aumlr det mycket viktigt att designa knap-

parna och inneharingllet saring att anvaumlndarna laumltt naringr dem

2 Soumlkfunktionen ska alltid finnas med

Paring mobila e-handel webbplatser ska soumlkfunktionen alltid synas saring att man laumltt skall

kunna soumlka produkterna Laringt oss saumlga att kunden inte hittar produkten han soumlker

och vill anvaumlnda soumlkfunktionen Han letar och letar efter soumlkfunktionen utan re-

sultat Detta orsakar inte bara att kunden laumlmnar din sida men ocksaring kommer han

att beraumlttar det vidare aringt andra hur han upplevde din sida (Mehra 2015)

3 Laumltt att navigera

20

Det ska vara laumltt att navigera runt sidorna Anvaumlndarna ska veta var han aumlr och hur

han kommer vidare efter att han tex har valt produkten Menyerna foumlr katalo-

gerna ska vara laumltta att navigera Om menyerna foumlr katalogerna aumlr foumlrvirrande och

svaringra foumlr anvaumlndaren att hitta produkterna blir han laumltt irriterad Exemplar paring (fi-

gur 27) haumlr nedan visar att menyerna aumlr ganska foumlrvirrande paring vaumlnstra bilden me-

dan paring houmlgra sidan aumlr det klart och tydligt (Laya 2014)

Figur 27 Jaumlmfoumlrelse mellan en bra och daringlig navigation httpconversionxlcommake-mobile-convert

4 Ta de roliga ur shopping

Det vanligaste och stoumlrsta misstaget som de flesta foumlretag goumlr naumlr de designar foumlr

mobil e-handel aumlr att de foumlrsoumlker flytta kunderna fraringn shopping till koumlp Shopping

paring en stationaumlr dator goumlr det laumltt naumlr det oftast finns ett enormt antal produkter att

vaumllja mellan och det aumlr laumltt att blaumlddra runt Men foumlr mobiler aumlr det annat

Maringnga foumlretag foumlrsoumlker pressa ihop hela shopping-processen till smaring tabbar och

minska paring inneharingllet Som resultat kommer anvaumlndaren att kaumlnna sig paringtvingad

21

att goumlra snabba beslut paring inkoumlp Istaumlllet foumlr att ge anvaumlndarna en saringdan paringtvingad

upplevelse kan man istaumlllet locka anvaumlndarna med all information vi har att er-

bjuda

Det betyder inte att anvaumlndarna som besoumlker e-handeln med en smarttelefon inte

vill njuta av shoppingen saringsom de goumlr paring stationaumlra datorer Naumlr man designar en

mobil e-handel skall kunderna kunna faring njuta av shoppingen och jaumlmfoumlra mellan

olika produkter innan dem bestaumlmmer sig vilken produkt de vill koumlpa (Laya 2014)

ldquoBut we see many companies try to compress the whole shopping process into a

small number of taps The result is a mobile app or website that forces the user to

make a quick purchase decision rather than giving a great shopping experience

To the user it feels like the site switches from giving enticement to issuing de-

mandsrdquo

- Laya Peep 2014

5 Laringngsam uppladdningstid foumlr mobiler spelar en stor roll

Det aumlr mycket viktigt att haringlla sidstorleken saring liten som moumljligt saring att det aumlr snabbt

att ladda upp sidan

ldquoMobile users want to take quick action and also Google has reportedly started

including page speed for ranking websites in the search results so that makes it

even more important to have a lighter siterdquo

- Mehra Gagan 2015

Varingren 2014 rapporterade Radware (httpwwwradwarecomspring-sotu2014)

att majoriteten av besoumlkarna kommer att oumlverge webbplatsen efter att ha vaumlntat i

3 sekunder foumlr att ladda upp sidan (Laya 2014)

Om det finns mycket inneharingll paring en sida kan man som alternativ separera inne-

haringllet i olika flikar (Mehra 2015)

Jag har tagit ett exempel fraringn Amazoncom Paring produktsidan har ja valt en orange

vaumlska Foumlr att tex ytterligare laumlsa om produktbeskrivningen rdquoAbout this itemrdquo ser

22

jag en pil som aumlr paring houmlgra sidan (Figur 29) Naumlr jag trycker paring pilen eller laringdan

kommer jag till en annan sida daumlr jag kan laumlsa hela produktbeskrivningen (Figur

210) Paring det haumlr saumlttet inneharingller sidan all information man behoumlver men separe-

rade i olika flikar saring att det blir snabbare att ladda upp sidan

Figur 28 Produktsida paring amazoncom

23

Figur 29 Produktsida paring amazoncom

Figur 210 Produktsida paring amazoncom About this item

24

6 Misslyckade analyseringar av anvaumlndarna

Naumlr man bygger webbsidor aumlr det viktig att goumlra anvaumlndbarhetstest och analysera

kundernas beteende Hur anvaumlndarna kaumlnner sig naumlr de anvaumlnder sidan aumlr mycket

viktigt och avgoumlr hur bra din business kommer att rulla

Analyseringen aumlr den kritiska inputen foumlr designen Med analyseringen ser man

dels vilka mobila apparater anvaumlndarna anvaumlnder och om det aumlr naringgra svaringrigheter

och obekvaumlmligheter anvaumlndarna upplever vid anvaumlndningen Dessa faktorer aumlr

viktiga foumlr att saumlkerstaumllla om den mobila upplevelsen uppfyller behoven hos kon-

sumenterna Testet och analysen maringste goumlras kontinuerligt foumlr att vi skall kunna

saumlkerstaumllla att kunderna har det bekvaumlmt (Mehra 2015)

7 Mindre inneharingll foumlr mobilanvaumlndarna

E-handel webbplatser brukar goumlmma inneharingll foumlr att goumlra sidan mindre Sidan aumlr

i sjaumllva verket inte mindre men bara goumlmd foumlr anvaumlndarna som anvaumlnder sina

smarttelefoner Enligt Mehra Gagan aumlr det inte bra om det finns mindre inneharingll

foumlr mobilanvaumlndarna Oavsett med vilka enheter anvaumlndarna aumlr paring sidan boumlr det

finnas lika mycket inneharingll paring alla enheterna De flesta som handlar online brukar

aumlga flera enheter och med stor sannolikhet anvaumlnder de ocksaring andra enheter foumlr

att surfa Om inneharingllet inte ser likadant ut paring stationaumlra datorer och smarttelefo-

ner kan det orsaka daringlig anvaumlndarupplevelse foumlr anvaumlndaren Enligt Google an-

vaumlnder 90 av dem som handlar paring internet olika enheter Att begraumlnsa deras

anvaumlndning aumlr naringgonting som man boumlr undvika (Mehra 2015)

25

3 MOBILANPASSADE LOumlSNINGAR

Det finns maringnga olika loumlsningar att bygga sin webbplats med Det aumlr viktigt att komma

iharingg att mobila anvaumlndande oumlkar hela tiden Det staumlller nya krav paring webbdesign och an-

vaumlndargraumlnssnitt Anvaumlndarna foumlrvaumlntar sig idag att de ska kunna ta del av allt inneharingll paring

webben oavsett om de anvaumlnder en smarttelefon eller en surfplatta De mobilanpassade

loumlsningarna foumlr e-handel kan tex vara Responsiv design Adaptiv Design Mobilbutik

eller en mobil applikation

31 Adaptiv design

En adaptiv webbplats aumlr uppbyggd saring att den aumlr optimerad foumlr specifika skaumlrmstorlekar

Den anvaumlnder servern foumlr att upptaumlcka den enhet som anvaumlnds foumlr att visa webbplatsen

Byggande av webbplatsen med adaptiv metoden aumlr tidskraumlvande paring grund av behovet att

optimera sidan foumlr varje vald plattform front-end och back-end Innan man boumlrjar bygga

webbplatsen maringste man avgoumlra vilka alla plattformar webbplatsen kommer att optimeras

till Foumlrdel med adaptiv design aumlr att den har snabb uppladdningstid

rdquoCompared to Responsiv design adaptive web design is website-optimised for each

platform separately and makes use of the opportunities presented by the platform as

well as the models and functions It offers fast-loading pages due to the server detec-

tion device and browser sending data tailored for a particular devicerdquo

-Lubo Ruska 2013

Att vaumllja den raumltta loumlsningen handlar om att foumlrstaring vad maringlgruppen foumlrvaumlntar sig och vad

de behoumlver Eftersom foumlretaget 909jp inte aumlr en jaumltte stort foumlretag saringsom Ikea eller Ama-

zon som har oberaumlknat antal med produkter tycker jag att Responsiv design med Mobile

first metoden aumlr den mest effektiva metoden foumlr denna forskning

26

32 Responsiv design

Responsiv webbdesign aumlr ett av de populaumlraste saumltten att optimera en webbplats Re-

sponsiv webbdesign moumljliggoumlr att layouten foumlraumlndras beroende paring vilken skaumlrmstorlek

och skaumlrmupploumlsningen som anvaumlndarna har och beroende paring vilka funktioner som

webblaumlsaren stoumldjer (Responsive Design 2014)

Oberoende om anvaumlndarna anvaumlnder dator laumlsplatta eller sin mobiltelefon kommer sidan

att anpassa sig paring olika saumltt foumlr att anvaumlndarna vid alla tillfaumlllen ska ha en saring rik upplevelse

som moumljligt Man kan saumlga att en webbsida paring mindre skaumlrmar aumlr med ett annat ord en

krympande version av den stoumlrre skaumlrmstorleken

Inneharingllet saringsom kolumner och bilder paring webbsidan kommer automatiskt att anpassas

beroende paring skaumlrmstorleken Och detta aumlr paring grund av Grid systemet Allt inneharingll skall

haringllas inom ett Grid system Grid systemet skall skydda allt fraringn att bryta samman naumlr

sidan anvaumlnds paring olika skaumlrmstorlekar

Det finns 11 olika Grid storlekar tvaring kolumner tre kolumner fyra kolumner fem kolum-

ner sex kolumner sju kolumner aringtta kolumner nio kolumner tio kolumner 11 kolumner

och 12 kolumner Som exempel visar jag en figur av 12 kolumners Grid system (Swan

2014)

27

Figur 31 Ett exempel paring Grid system av 5 olika skaumlrmstorlekar (Phil Swan 2014)

Responsiv webbdesign fungerar med hjaumllp av HTML5 CSS media Query och Java-

Script Det bygger paring att webbutvecklare istaumlllet foumlr exakta storlekar maumltt i pixlar anger

sidelements storlekar i procent i jaumlmfoumlrelse med skaumlrmens storlek

Naumlr sidelementens storlekar aumlr i procent goumlr det att sidan blir flexibel och den anpassas

efter webblaumlsarens storlek medan fasta pixlar ger en scrollbar (rull-list) (Responsive De-

sign 2014)

33 Varfoumlr Responsiv design

Foumlrdelar med Responsiv design aumlr att den erbjuder en bra anvaumlndarupplevelse foumlr olika

enheter och skaumlrmstorlekar Tack vare den Responsiva designen har webbredaktoumlrer laumlt-

tare att hantera inneharingllet eftersom de bara har en version att hantera Ur en SEO synvin-

kel fungerar Responsiv design baumlttre eftersom den koncentrerar inneharingllet istaumlllet foumlr att

vattna ur det med maringnga URL foumlr samma inneharingll

28

Med en Responsiv design aumlr en webbplats laumlttare att hantera Att ha flera olika versioner

av en webbplats innebaumlr mera arbete Flera olika versioner av en webbplats innebaumlr sepa-

rata sidor att redigera och separata insatser foumlr soumlkmotoroptimering och separata soumlkmo-

torkampanjer Daumlrfoumlr aumlr det en stor foumlrdel att bygga en webbplats med den Responsiva

metoden

Med en Responsiv design kaumlnner anvaumlndarna baumlttre igen sidan baringde paring stationaumlra datorer

och mobiltelefoner Bygger man specifika webbplatser foumlr mobiler och surfplattor kan

det laumltt haumlnda att det blir olika information paring webbplatserna och att de struktureras olika

Laringt oss foumlrestaumllla oss att naringgon anvaumlnder sin mobiltelefon paring lunchen foumlr att leta efter en

flygbiljett fraringn Helsingfors till Tokyo Personen hittar en webbplats som har bra erbju-

dande och bestaumlmmer sig foumlr att fortsaumltta kolla naumlr han eller hon kommer hem Naumlr per-

sonen har kommit hem anvaumlnder hen datorn istaumlllet foumlr mobilen Om webbplatsen som

personen kollade paring lunchpausen var en Responsiv webbplats faringr personen en smidig och

bra upplevelse vid oumlvergaringngen fraringn den mobila webbplatsen till stationaumlr dator

(Lindahl 2014)

Det aumlr vaumlldigt viktigt att ha sin webbplats att optimerad till saring maringnga enheter som moumljligt

foumlr att ingen vet vilka kommer att vara framtidens enheter och daumlrfoumlr anses en webbplats

som anpassar sig till maringnga olika format vara den baumlsta loumlsningen Innan man kan boumlrja

med att designa en Responsiv webbplats maringste man veta vilka skaumlrmupploumlsningar och

storlekar det finns tillgaumlngliga och aumlr populaumlra idag Foumlr att kunna rikta till de olika skaumlr-

mupploumlsningarna med Media Queries har jag listat upp olika enheternas skaumlrmupploumls-

ningar i pixlar haumlr nedan i tabellen

ResolutionGrafisk array Enhet som anvaumlnder denna resolution skaumlrmstorlek i pixel-

taumltheten i pixlar

2880x1800 15-inch Apple MacBook Pro with Retina display

2560 x 1700 Google Chromebook Pixel

2560 x 1600 Samsung Google Nexus 10

13-inch Apple MacBook Pro with Retina display

29

2560 x 1440 27-inch Apple iMac 102 111 113 122 (Late 2009 -

2012)

1920 x 1080 HTC One Samsung

Sony Xperia Z amp Xperia ZL

Asus PadFone Infinity

Acer Aspire S5

Asus Zenbook Prime

1600 x 900 Apple Macbook Air

1366 x 768 Small desktoplaptop screen resolution

Asus VivoTab RT

Samsung N350

1280 x 1024 Standard desktop screen resolution

1280 x 800 Asus PadFone 2

Samsung Galaxy Note

Sony Xperia Tablet S

1280 x 720 Sony Xperia S

HTC Windows Phone 8X

HTC One mini

1136 x 640 Apple iPhone 5 5S amp 5C

Apple iPod Touch (5th generation)

960 x 640 Apple iPhone 4 amp 4S

Apple iPod Touch (4th generation)

854 x 480 Sony Xperia ray

Nokia N9

800 x 480 Nokia Lumia 510 amp 520

Samsung Galaxy I Galaxy S Galaxy S Plus Galaxy S Ad-

vance Galaxy SL Galaxy S Duos Galaxy Xcover 2 Galaxy

Beam Nexus S Captivate Glide amp Galaxy S III mini

HTC Desire X HTC Desire V Desire VC Desire VT De-

sire U amp Windows Phone 8S

30

LG Optimus 2X Optimus EX Optimus L5 II Optimus Q2

amp Optimus Black

T-Mobile G2x

Asus E600

620 x 480 Blackberry Bold 9900 amp Bold Touch 9930

Blackberry Torch 9810

LG Optimus Z

640 x 360 Sony Ericsson Vivaz amp Vivaz Pro

Nokia 500 amp 5800 XpressMusic

Nokia N8 N97 E7 and X6

480 x 320 Apple iPhone 3G amp 3GS

Samsung Galaxy Ace

320 x 240 Nokia E71

Blackberry Curve 9220 amp 9320

Sony Ericsson txt

Samsung Galaxy Y amp Galaxy Chat

Nokia Asha 501

Figur 32 Resolutions referenser paring olika enheter

31

4 VAD AumlR MOBILE FIRST

Mobile first metoden aumlr en metod och arbetsprocess foumlr webbdesigners som aumlr skapad av

Luke Wroblewski Naumlr man jobbar med ett projekt och designar strukturerar och imple-

menterar en webbplats aumlr Mobile first metoden man paringboumlrjar arbetet med Med metoden

menar Wroblewski att man foumlrst boumlrjar designa webbsidor fraringn de minsta enheterna

Figur 41 Mobile First att bygga webbsidan fraringn den minsta skaumlrmen till den stoumlrsta skaumlrmen

Wroblewski som har skapat Mobile First metoden understryker att metoden ska priorite-

ras daring man skapar anvaumlndarupplevelser

Det finns tre viktiga anledningar foumlr att utveckla foumlr Mobile First

Den foumlrbereder foumlr den stora utveckling och nya moumljligheter som uppkommer

inom det mobila omraringdet idag (836 av vaumlrldens befolkning anvaumlnder internet

paring sin smarttelefon 2015)

Den goumlr att vi blir tvungna att prioritera och fokusera varingrt inneharingll genom att ac-

ceptera de begraumlnsningar som aumlr foumlrenade med mobil design

32

och goumlr att vi kan leverera innovativa upplevelser genom att bygga utifraringn nya

funktioner som finns inbyggda i de mobila enheterna (bla GEO lokalisering)

En mobil webbplats behoumlver endast ha en mycket enkel layout och navigeringen ska vara

laumltt och effektiv

Naumlr man designar med Mobile first metoden tvingas man goumlra viktiga beslut om vad som

ska prioriteras Naumlr den optimerad design foumlr en liten skaumlrm visas paring en stoumlrre skaumlrm

kommer det att bli laumlttare att designa paring de stoumlrre skaumlrmarna Allt som ska goumlras aumlr daring

bara att fylla paring inneharingllet och designa saring att det aumlr grafiskt tilltalande och laumltt att hitta

inneharingllet (Wroblewski 2011)

41 Varfoumlr Mobile first

Vaumlrlden vi lever i idag aumlr inte mera som foumlr tio aringr sedan Allt runtom oss har utvecklats

speciellt mobiltelefonerna Tidigare anvaumlndes mobiltelefoner bara foumlr att skicka med-

delandet ringa och ta emot samtal Nu anvaumlnds den till foumlr att dels ta bilder video GPS

navigation foumlr vaumlgvisning och speciellt internetanvaumlndningen saringsom Google nyheter

Facebook Youtube och mycket mer Paring grund av det har ocksaring varingr livsstil foumlraumlndrats

Internetanvaumlndning idag har blivit allt vanligare Idag anvaumlnder vi naumltet i skolan paring jobbet

eller var och naumlr som helst bara man har en smarttelefon eller surfplatta och naumltet kopplat

Tidigare boumlrjade man bygga en webbplats fraringn den stoumlrsta skaumlrmen medan den mobila

sidan var en biprodukt Laringt oss saumlga att man har en webbplats med en rik grafisk layout

och ser stilig ut paring stationaumlra datorer Naumlr man skalar ner sidan foumlr att passa en mobilskaumlrm

kommer resultatet att vara en smaumlrta foumlr varingra oumlgon Paring den lilla mobilskaumlrmen kommer

det att vara olaumlsligt och svaringrt att anvaumlnda Foumlr att naring inneharingllet maringste du tom zooma in

och ut eller skrolla till houmlger och vaumlnster Det haumlr kommer att ge en negativ bild av ditt

foumlretag och anvaumlndarna kanske aldrig mera besoumlker din webbplats (Wroblewski 2011)

Ett bra exempel aumlr Tokyo Skytree webbplats som aumlnnu idag inte ha byggt in funktionalitet

och designen foumlr mindre skaumlrmupploumlsningar paring den engelska sidan

33

Tokyo Skytree aumlr vaumlrldens naumlst houmlgsta torn efter Burj Khalifa Tornet aumlr Japans houmlgsta

byggnadsverk med en houmljd paring 634 meter Den oumlppnades 22 maj 2012 och under det foumlrsta

aringret hade den 64 miljoner besoumlkare fraringn hela vaumlrlden Trots det har de laringtit bli att utveckla

den engelska webbsidan Paring bilden ser man att hemsidan ser exakt likadant ut paring stationaumlr

dator och paring mobilen

Figur 42 Hemsidan paring Tokyo Skytree paring stationaumlr datorskaumlrm

34

Figur 43 Hemsidan foumlr Tokyo Skytree Foumlrsta bilden visar hur det ser ut normalt Andra bilden visar naumlr man zoomar

in

Naumlr man foumlrsoumlker zooma in foumlr att laumlsa inneharingllet hoppar sidbalken (paring vaumlnstra sidan) paring

texten Det haumlr ger en mycket daringlig anvaumlndarupplevelse och kan ge fel bild av turistplat-

sen Ett annat fel paring sidan aumlr naumlr man vaumlljer spraringk till japanska ser sidan inte likadant ut

35

Figure 44 Hemsidan paring Tokyo Skytree paring japanska

Om du kan laumlsa japanska kommer du att undra varfoumlr det finns massor med information

och sidan ser mycket trevligare ut paring den japanska sidan Paring den internationella sidan

dvs engelska ser det inte lika trevligt ut och inneharingller inte allt som det goumlr paring den

japanska sidan Det aumlr som om den stoumlrsta maringlgruppen aumlr foumlr japanska turister och som

om de skulle inte bry sig om turister fraringn utlandet

Utoumlver det har de ocksaring byggt en mobilsida foumlr den japanska webbsidan Varfoumlr satsa bara

paring den japanska sidan och inte den engelska sidan naumlr maringlgruppen aumlr hela vaumlrlden

36

Figur 45 Mobil sidan paring Tokyo Skytree paring japanska

Vi lever i 2015 saring alla borde veta att det aumlr vaumlldigt viktig att ha en mobil webbplats som

erbjuder en bra anvaumlndarupplevelse paring alla spraringk som webbplatsen erbjuder Naumlr man har

sin sida paring flera spraringk och aumlndaring bestaumlmmer sig att bygga sidan ordentligt bara paring ett spraringk

kan anvaumlndarna faring en fel bild av foumlretaget I vaumlrsta fall kommer anvaumlndarna tycka att sidan

aumlr oparinglitligt och aringterkommer aldrig igen

Mobile first metoden aumlr daumlrfoumlr en mycket effektiv metod att bygga sin webbplats med

Man boumlrjar med att bygga sin webbplats fraringn den minsta skaumlrmen Man tvingas goumlra be-

slut om vad som ska absolut prioriteras Arbetsprocessen foumlr oss webbdesigners blir

mycket effektivare genom att foumlrst designa fraringn den minsta skaumlrmen och sedan foumlrflytta

oss till de stoumlrre skaumlrmarna Har man ett 6 kvadratmeters sovrum och foumlrsoumlker faring sin saumlng

skrivbord hylla klaumldskaringp och soffan att rymmas in aumlr det ganska utmanande Men naumlr

man boumlrjar med det mest utmanande i arbetsprocessen blir arbetet ocksaring mindre utma-

nande desto stoumlrre rum eller skaumlrm det blir (Wroblewski 2011)

37

5 909JP

909jp aumlr en elektronisk handel en moumlbelaffaumlr som saumlljer vaumlsterlaumlndska produkter Den

elektroniska butiken kommer att oumlppnas i Japan 2015 Deras foumlrvaumlntningar aumlr att faring in

en miljon dollar i foumlrsaumlljning per aringr I deras elektroniska moumlbelaffaumlr saumlljs bla stolar bord

soffor och lampor Maringlgruppen aumlr alla konsumenter mellan 18-60 aringringar

Japaner aumlr intresserade av vaumlsterlaumlndska produkter och livsstil men foumlr de flesta varor aumlr

designen knutna till deras egen kultur vilket goumlr dem mer intresserad Det aumlr ocksaring mycket

viktigt att ha sin hemsida paring japanska eftersom 99 av den japanska befolkningen foumlre-

drar att inte laumlsa inneharingllet paring andra spraringk (Khurana)

Japan aumlr ett land med vaumlrldens tredje stoumlrsta ekonomi paring 5 biljoner De har vaumlrldens ti-

onde stoumlrsta befolkning med ca 1271 miljoner invaringnare varav 70 av den totala befolk-

ningen anvaumlnder internet och 24 av dem anvaumlnder internet paring sin smarttelefon

(Khurana)

Viktigt med detta projekt aumlr att sikta aringt raumltt haringll och betjaumlna kunderna paring det baumlsta saumlttet

via webbplatsen Foumlr att kunna faringnga saring maringnga kunder som moumljligt aumlr det mycket viktigt

att designa en webbplats som aumlr anvaumlndarvaumlnlig stilig och laumltt att anvaumlnda (Wroblewski

2011)

Jag har daumlrfoumlr kommit underfund med att anvaumlnda Mobile first och Responsiv design

metoden foumlr att utveckla den mobila 909jp sidan Med tanke paring att det aumlr en Responsiv

design skall layouten paring den mobila versionen ocksaring passa in med de stoumlrre skaumlrmarna

naumlr sidan skalas upp Det aumlr dock viktigt poaumlngtera att jag endast kommer att koncentrera

mig paring den mobila designen och utveckla designen endast foumlr denna forskning

38

6 ANALYS AV DEN NYA DESIGNEN

Med hjaumllp av den tidigare designen paring 909jp och de kritiska punkterna jag har hittat under

forskningen har jag skapat en ny och foumlrbaumlttrad design av webbplatsen foumlr mobiler I det

haumlr kapitlet kommer jag att visa naringgra exempel paring den tidigare designen och jaumlmfoumlra den

med nya designen samt analysera arbetet

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger)

1 Call-to-action knapparna

Under hela arbetsprocessen har jag haft i minnet att navigeringar laumlnkar och knap-

parna ska vara tillraumlckligt stora att klicka paring I den tidigare designen har de stora

bilder paring kategorier vilket jag tycker aumlr en bra design att aringtervaumlnda

39

2 Soumlkfunktionen

Paring den tidigare versionen haumlr nedan ser man att soumlkfunktionen inte finns med

medan paring den nya designen ser man soumlkfunktionen genast naumlr man kommer till

sidan Som tidigare framfoumlrdes att soumlkfunktionen alltid ska synas saring att man laumltt

skall kunna soumlka fram produkterna Om soumlkfunktionen inte finns med eller aumlr svaringr

att hitta naumlr den behoumlvs kan det orsaka missnoumlje hos anvaumlndarna (Mehra Gagan

2015)

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp

Figur 63 Soumlkfunktionen paring den nya designen 909jp

40

3 Laumltt att navigera

Naumlr skaumlrmen aumlr liten aumlr det viktig att ha en enkel layout (Wroblewski 2011)

Jag har daumlrfor i den nya designen flyttat rdquoHemrdquo och rdquoBlogrdquo knapparna bort fraringn

den oumlvre menyn Hem-knappen finns nu i hamburgarmenyn paring vaumlnstra sidan me-

dan Blog-knappen finns i footer Detta goumlr att det ser mera organiserat ut

Figur 64 Gamla designen

Laringt oss foumlrflytta vidare till menyer foumlr kategorier Paring hemsidan har man tvaring alter-

nativ att naring kategorierna Foumlrsta aumlr den hamburgarmenyn knappen paring vaumlnstra si-

dan I menyn aumlr kategorierna indelade i fyra delar stolar lampor ergonomisk och

soffa amp middag Detta goumlr det laumltt och klart foumlr anvaumlndarna var produkterna finns

Eftersom vi bara har partiell uppmaumlrksamhet fraringn anvaumlndarna naumlr de aumlr paring sina

smarttelefoner har jag valt att saumltta in ikoner i menyn (Figur 65) Naumlr anvaumlndaren

bara anvaumlnder ena oumlgat foumlr att kolla paring mobilen och andra oumlgat foumlr naringgonting annat

ska den lilla skaumlrmen med webbplatsen kunna faringnga uppmaumlrksamheten samt un-

derlaumltta anvaumlndningen av webbplatsen (Wroblewski 2011)

41

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny

Andra menyn for kategorierna aumlr de fyra bilderna under Aeron chair slideshowen

Paring den tidigare designen ser man endast ett foumlnster av kategorierna som aumlr place-

rade i en kolumn som upprepas loggraumltt (Figur 66) Det haumlr goumlr att anvaumlndaren

maringste skrolla ner foumlr att se varenda kategori vilket kan orsaka obekvaumlmlighet Att

se flera kategorier paring samma skaumlrm sparar tid och anvaumlndaren kommer aumlven baumlttre

iharingg var sakerna finns Att ha bara rdquoenrdquo stor bild som syns paring skaumlrmen och vara

tvungen att skrolla ner foumlr att se naumlsta bild aumlr frustrerande Paring den nya designen

har jag tvaring rutor av kategorier bredvid varandra (Figur 66)

42

Figur 66 Kategorier paring den gamla designen (till vaumlnster) Kategorier paring den nya designen (till houmlger)

4 Ta det roliga ur shopping

Paring den nya designen straumlvar jag efter att erbjuda en bekvaumlm shopping-upplevelse

Naumlr anvaumlndarna besoumlker e-handeln med en smarttelefon foumlrvaumlntar hanhon sig

ocksaring att kunna ta del av allt inneharingll och goumlra jaumlmfoumlrelser med andra produkter

Jag har daumlrfoumlr i den nya designen pressat ihop laumlngden paring kolumnhoumljden som om-

ringar produkten Som resultat ser vi nu fyra produkter paring samma skaumlrm (Figur

67) I den tidigare designen ser vi en enda produkt paring en skaumlrm och foumlr att se

andra produkter maringste vi skrolla ner Paring det haumlr saumlttet har anvaumlndarna svaringrare att

jaumlmfoumlra produkterna (Laya 2014)

43

Figur 67 Tidigare produktsida (till vaumlnster) Ny produktsida (till houmlger)

I den tidigare designen ser vi ocksaring att det finns endast produktens bild produk-

tens namn koumlpvagnen och infoikonen Om man vill faring reda paring produktens inform-

ation maringste man klicka paring produktens bild eller paring infoikonen som foumlr oss direkt

till sjaumllva produktens sida Bara foumlr att man vill faring reda paring vad det aumlr foumlr produkt

foumlrs man vidare till en annan sida Det haumlr kan orsaka att kunden inte njuter totalt

av shoppingen och dessutom kan han inte jaumlmfoumlra produkterna naumlr han aumlr paring ka-

tegoriernas sida (Laya 2014)

Laringt oss hoppa vidare till den nya designen (Figur 68) Paring den nya designen har

jag satt in en kort detaljbeskrivning foumlr varje produkt Dessutom naumlr man klickar

paring infoikonen paring houmlgra sidan kommer man inte direkt till produktsidan utan det

kommer att dyka upp en inforuta som har en kort beskrivning paring produkten Om

anvaumlndaren aumlr intresserad av produkten kan han garing in till sjaumllva produktsida ge-

nom att klicka paring rdquoView productrdquo eller ocksaring paring produktbilden daumlr hanhon kan

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

Figur 611 Stol kategori Show all 47

8

1 INLEDNING

11 Motiv foumlr aumlmnesvalet

Som Online Media studerande har jag alltid gillat att designa webbsidor Jag har alltid

varit intresserad av den haumlr inriktningen Ju mer man studerar desto mer vill man laumlra sig

Det att jag tycker om att designa webbsidor var inte enda orsaken till att jag valde mitt

aumlmne foumlr examensarbete Jag har alltid varit intresserad i elektronisk handel Hur faringr man

kunder att koumlpa sina produktertjaumlnster utan en fysisk saumlljare Hur marknadsfoumlr man och

hur naringr man baumlst kunderna daring foumlretaget med e-handel kan vara allt fraringn klaumldbutiker flyg-

bolag eller moumlbelaffaumlrer

Som webbdesigner har jag som uppgift att hjaumllpa kunderna att marknadsfoumlra deras foumlretag

eller produkter via webben Som aumlmne foumlr examensarbetet har jag valt att goumlra en fallstu-

die daumlr jag foumlrbaumlttrar den tidigare 909jp webbplatsen med hjaumllp av min forskning

Som bakgrund har jag kunskaper i webbdesign vilket jag kan anvaumlnda som verktyg En

bra webbplats maringste vara grafiskt attraktiv foumlr anvaumlndaren Med hjaumllp av det grafiska

maringste en bra webbplats daumlrmed lyckas leverera den information som anvaumlndarna aumlr ute

efter Det maringste vara laumltt att navigera runt sidorna samt hitta snabbt informationen an-

vaumlndarna vill naring Sidan maringste ocksaring kunna laddas ner snabbt aumlven via en laringngsammare

naumltuppkoppling foumlr att tillfredsstaumllla anvaumlndarna En webbplats maringste erbjuda en bra

funktionalitet samt anvaumlndarvaumlnlighet paring mindre skaumlrmar saringsom paring mobiler Som maringl

kommer jag att fokusera mig paring hur man kan utveckla och foumlrbaumlttra en e-handel design

foumlr mobiler

12 Syfte

Syftet med min uppsatts aumlr att laumlra mig att utveckla och foumlrbaumlttra anvaumlndarupplevelser i

e-handel foumlr mobiler Att handla paring naumltet med sin mobil sparar mer tid och maringnga garingnger

kan det vara mycket laumlttare Foumlr att lyckas med att bevisa aringt anvaumlndarna att en tjaumlnst aumlr

trovaumlrdig aumlr det jaumltte viktigt att erbjuda dem en bra och bekvaumlmt plats att handla online

9

Foumlr att lyckas med det maringste man ha en mycket bra design och funktionalitet paring webbsi-

dan I min uppsats kommer jag att fokusera paring design som byggs med Mobile first meto-

den Forskningsfraringgan i mitt examensarbete aumlr rdquoHur kan man baumlst utveckla en e-handel

webbplats foumlr mobilerrdquo

Arbetet skall vara till nytta foumlr webbdesigners och Online Media studerande som inte

tidigare har kunskaper inom e-handel foumlr mobiler och vill foumlrdjupa sig mera i det Arbetet

skall ocksaring vara till nytta foumlr dem som goumlr eller kommer att goumlra ett projekt inom e-han-

deln Det ska hjaumllpa dem oumlka foumlrstaringelse samt stoumlda dem i deras projekt

13 Avgraumlnsningar

I min uppsatts kommer det inte att staring om avancerad html och CSS kodning Jag kommer

fraumlmst att koncentrera mig paring strukturer och layouten och hur man baumlst kan uppnaring den

baumlsta anvaumlndarupplevelsen inom mobil e-handel Jag kommer inte att goumlra anvaumlndarbar-

hetstest men med hjaumllp av teorierna hittar jag de mest kritiska punkterna foumlr att kunna

goumlra en ny design till min fallstudie

14 Metod

Som metod kommer jag att undersoumlka strukturen layouten och anvaumlndarupplevelser foumlr

mobil e-handel i allmaumlnhet Forskningsmetoden paringminner naumlrmast om den vetenskapliga

fallstudiens metod

Metoden innebaumlr en plan foumlr att samla in organisera och integrera information och den

resulterar i ett speciellt forskningsresultat Jag kommer att anvaumlnda boumlckerna Ethan

Marcotte Responsive web design (2011) Wroblewski Luke Mobile First (2011) och

Karen McGrane Content strategy for Mobile (2012) Som material kommer jag ocksaring att

anvaumlnda kaumlllor fraringn naumltet och andra bocker

Med hjaumllp av de kritiska punkter jag hittar fraringn kaumlllor kommer jag att anvaumlnda som metod

foumlr att vidareutveckla designen foumlr den mobila e-handel webbplatsen (909jp) jag har som

fallstudie

10

Med hjaumllp av undersoumlkningen om e-handel foumlr mobiler kommer jag att veta vilka saker

det ska finnas paring sidan saringsom kategorier foumlr produkter kundvagn incheckning osv

15 Begrepp

SEO aumlr foumlrkortning fraringn engelska rdquoSearch Engine Optimizationrdquo och oumlversaumltts till Soumlk-

motoroptimering paring svenska Soumlkmotoroptimeringen anvaumlnds foumlr att faring en webbplats att

synas saring houmlgt upp som moumljligt bland resultaten vid soumlkningar i soumlkmotorer (Belinger

2014)

Call to action knapparna aumlr knappar som leder anvaumlndarna vidare till en viss sida Var-

foumlr man kallar det foumlr rdquoCall to actionrdquo aumlr for att knapparna ska kunna faringnga uppmaumlrksam-

heten paring anvaumlndarna foumlr att klicka sig vidare Knapparna kan vara tex meny- knappar

eller bilder som anvaumlnds som en laumlnk till en annan sida (Mehra 2015)

Hamburgarmenyn aumlr menyn som anvaumlnds paring webbplatsen foumlr smarttelefoner Haumlr aumlr

exempel paring menyn

Media Queries aumlr en CSS3-modul som tillaringter inneharingll rendering att anpassa sig till

olika skaumlrmupploumlsningar saringsom smarttelefoner surfplattor och datorskaumlrmar Foumlr att

kunna faring sin webbplats att anpassa sig till olika skaumlrmupploumlsningar naumlr skaumlrmen blir

mindre anvaumlnder man Media Queries i CSS3 (Wikipedia)

11

2 VAD AumlR E-HANDEL

E-handel fungerar genom att ett foumlretag eller individuell person koumlper saumlljer ut eller byter

produkter information eller tjaumlnst via internet eller andra datornaumltverk (Wikipedia)

En stor del av e-handeln aumlger rum i de saring kallade naumltbutikerna Naumltbutiker har ett lager

och en webbplats daumlr kunden goumlr sina bestaumlllningar Paring webbplatsen indelas varorna i

olika kategorier saring att anvaumlndarna paring sidan kan laumltt hitta varorna Foumlr att hitta varorna

snabbare brukar de flesta naumltbutikerna ocksaring ha en soumlkfunktion Paring sidan har anvaumlndarna

moumljligheter att saumltta produktenprodukter i kundvagnen och sedan fortsaumltta shoppa tills

man aumlr klar Vid bestaumlllningen garingr man bara till kassan daumlr anvaumlndaren kommer att vaumllja

transportsaumltt ange kontakt- och leveransuppgifter och vaumllja betalningsmetod Betalnings-

metoden aumlr vanligtvis kreditkort eller Paypal

Fakturan daumlrmed brukar inte ges till kunden daring det skulle innebaumlra oumlkade risker foumlr be-

draumlgerier foumlr naumltbutikerna Foumlr fakturakoumlp behoumlver kundens identitet faststaumlllas paring ett saumlk-

rare saumltt

Naumlr betalningen har gjorts levereras varorna vanligtvis som postpaket eller direkt leverans

till doumlrren foumlr stoumlrre varor saringsom moumlbler (E-handel 2015)

ldquoE-handeln fortsatter att vaxa Nastan hela tillvaxten sker numera i mobilen Det ar

inte priset som gor att vi handlar pa natet De viktigaste skalen ar att det ar smidigare

och att utbudet ar storre an i traditionella butikerrdquo

-Larsson Daniel 2014

21 Mobil e-handel

Mobil e-handel (m-handel) aumlr en term som beskriver en foumlrsaumlljningstransaktion som an-

vaumlnder traringdloumlsa elektroniska enheter saringsom smarttelefoner och surfplattor En mobil e-

handel webbplats fungerar i alla smarttelefoner och surfplattor och aumlr anpassad samt op-

timerad foumlr mobilens webblaumlsare

12

Foumlr att naring den mobila webbplatsen behoumlver man inte skriva in mobil adress eller aktivt

vaumllja att visa den mobila butiken Den mobila webbplatsen av en e-handel kaumlnner auto-

matiskt igen om man anvaumlnder en dator eller en mobil och visar daring upp en optimerad

version som anpassas efter anvaumlndarnas behov (Nordisk e-handel)

I den mobila versionen av e-handel brukar kategorier bestaring av endast en sida Foumlr att se

paring de resterande produkter i kategorierna kan man trycka paring rdquoVisa flerrdquo som man oftast

hittar laumlngst ner som en knapp eller laumlnk Detta goumlr uppladdningstiden paring sidan betydligt

snabbare och anvaumlndarna slipper vaumlnta Vaumlntande kan leda till avbrutna koumlp

Foumlrutom kategorier produkter och kassa i sjaumllvbetjaumlningsbutik foumlr kunder med produkter

som aumlr optimerade foumlr mobilanvaumlndarna aumlr ocksaring betalvaumlxeln foumlr kortbetalning specialan-

passad Detta goumlr det snabbare och enklare foumlr anvaumlndarnakunderna att avsluta sina koumlp

och betala med sina betalningskort (Mobil e-handel 2012)

22 Varfoumlr handla med mobil

Foumlr att kunna designa en ny mobil e-handel foumlr en kund aumlr det foumlrst jaumltte viktigt att veta

varfoumlr anvaumlndarna vaumlljer att koumlpa produktertjaumlnster med en smarttelefon eller surfplattor

Med hjaumllp av DIBS aringrliga rapport som gjordes i Sverige 2014 visas det att den viktigaste

orsaken till att anvaumlndarna handlar med sin mobil aumlr att det aumlr smidigare och sparar tid

Samtidigt aumlr det viktigt att inte heller gloumlmma bort att andra handlingsmotiv lyfts fram

som viktiga av mer aumln haumllften av alla tillfraringgade E-handel aumlr bra paring maringnga olika saumltt Den

moumlter konsumenternas behov och oumlnskemaringl i stor grad

Foumlr den nordiska befolkningen ska tidsbesparing enligt rapporten vara allra viktigaste foumlr

35-44 aringringar och minst viktig foumlr de yngsta aringldersgruppen 15-24 aringr som foumlr vilka laringga

priser istaumlllet spelar mer roll Utoumlver laringga priser drivs ungdomarna ocksaring oftast av det

stoumlrre utbudet som naumltbutikerna erbjuder paring internet

13

Figur 21 Viktigaste skaumllet att naumlthandel sparar tid

Enligt statiken visar det viktigaste skaumllet varfoumlr man anvaumlnder mobilen foumlr e-handel

64 saumlger att det sparar tid och aumlr smidigt

58 saumlger att det aumlr foumlrmaringnligare

56 saumlger att det aumlr enklare att jaumlmfoumlra mellan olika produkter

43 saumlger att det finns stoumlrre produktutbud

52 saumlger att det aumlr alltid oumlppet

23 Antalet kop okar pa mobilen

Enligt DIBS aringrliga rapport (2014) om mobil e-handel oumlkar antalet mobila e-handel kon-

sumenter hela tiden Nedan finns en figur om antalet under aringr 2013-2014 Figuren visar

hur maringnga garingnger konsumenterna har handlat varortjaumlnster med en smarttelefon eller

surfplattor under de senaste sex maringnaderna Naumlthandeln paring mobila enheterna oumlkar sakta

med saumlkert De som har handlat paring naumltet foumlrut handlar nu ocksaring allt mer Andelen stor-

konsumenter de som handlat minst 25 garingnger paring ett halvaringr har nu foumlrdubblats

De som handlade en eller tvaring garingnger har minskat fraringn 42 procent aringr 2013 till 35 procent

aringr 2014 vilket goumlr det till 17 procent mindre I snitt handlar konsumenter 1114 garingnger

per aringr med sin smarttelefon eller surfplattor

14

Figur 22 Antal oumlkar paring mobilen

Mobilen finns alltid naumlrmast

Enligt rapporten ska den vanligaste orsaken till varfoumlr anvaumlndarna vaumlljer att handla fraringn

mobilen vara foumlr att mobilen fanns naumlrmast till hands vid koumlpoumlgonblicket

Figur 23Varfoumlr handlade du med smarttelefon

15

60 saumlger att smarttelefon fanns naumlrmaste till hands vid koumlptillfaumlllet

27 anvaumlnder en app foumlr att handla online

17 oumlppnade ett erbjudande via e-mail i sin smarttelefon

5 har ingen dator

3 var i butik och koumlpte varan paring naumltet istaumlllet

4 hade ingen internetanslutning

3 scannade en QR-kod

Vad handlar vi med mobil

Foumlr att snabbt faringr en inblick i vad konsumenterna handlar med mobil ser vi haumlr nedan

(Figur 24) Konsumenter handlar mer av naumlstan allt Kunder som spenderar mer aumln 500

euro med smarttelefoner eller surfplattor koumlper i foumlrsta hand resor medan de som handlar

foumlr mindre aumln 100 euro laumlgger pengar paring media

Figur 24 Mobilt handlar vi mer av naumlstan allt

16

24 Bra mobila e-handel webbplatser

En bra mobil webbplats aumlr naumlr sidan aumlr enkel att anvaumlnda fast man bara anvaumlnder ett oumlga

och en tumme

rdquoWhen reflecting on a lot of mobile usage patterns I like to imagine people as rdquoone

eyeball and one thumb One thumb because they are likely to be holding their mobile

in one hand and using a single thumb to control it one eyeball because in many loca-

tions where mobile devices are use we only have peoples partial attentionrdquo

-Wroblewski Luke 2011)

Man kan aldrig exakt veta var anvaumlndaren befinner sig naumlr han surfar med sin smarttele-

fon Han kanske befinner sig i vardagsrummet foumlr att sloumltt surfa efter en ny lampa medan

han kollar paring Tvn Kanske anvaumlndaren sitter hemma och har en stadig wifi eller kanske

paring sommarstugan och har 3G4G som byter mellan olika naumltverk osv (Thoren 2012)

Naumlr anvaumlndaren goumlr naringgonting samtidigt som han surfar paring webbplatsen har han bara den

partiella uppmaumlrksamheten Daumlrfoumlr aumlr det betydligt fler kontexter som man maringste ta haumln-

syn till naumlr man designar webbplatser foumlr mobiler (Wroblewski 2011)

Haumlr aumlr tvaring bra exempel av lyckad e-handel foumlretag i vaumlrlden De har inte lyckats bra bara

med att saumllja produkterna utan ocksaring med designen Haumlr nedan aumlr bilderna paring mobil de-

signen av Rakutencom och Amazoncom

17

Figur 25 Hemsida paring rakutencom foumlr mobiler

Direkt naumlr man kommer paring sidan hittar man inloggningen koumlpvagnen soumlkfunktionen

menyn och speciellt de stora bilderna paring katalogerna vilket aumlr jaumltte laumltta att klicka paring

Fastaumln mobilskaumlrmen aumlr liten goumlr den haumlr det bara inte laumltt att navigera runt sidorna utan

ocksaring trevligt att vara paring sidan

Amazoncom har ocksaring lyckats bra med designen Naumlr man kommer till sidan ser man

direkt Sign in Department Wish List Deals och Search funktionen Under search funkt-

ionen ser man genast en inspirerande reklam som paringminner oss om att det aumlr varingr

rdquoSPRINGacuteS PERFECT PANTSrdquo Fast sidan har jaumltte maringnga objekt i den aumlr det trots allt

18

jaumltte laumltt att navigera runt sidorna Man tappar inte bort sig och man hittar laumltt det som

man aumlr ute efter

Figur 26 Hemsida paring amazoncom foumlr mobiler

19

25 Kritiska punkterna foumlr bra mobil design paring e-handel

Naumlr man handlar med en mindre skaumlrm aumlr det mera utmanande eftersom skaumlrmen aumlr liten

och anvaumlndarna brukar inte ha tillraumlckligt med taringlamod att sitta och soumlka naringgonting foumlr

laumlnge fraringn en liten skaumlrm Daumlrfoumlr aumlr det viktigt att veta vilka saker man boumlr beakta naumlr

man designar en mobil e-handel I det haumlr stycket kommer jag att lista upp sakerna man

boumlr veta naumlr man designar en mobil e-handel webbplats

Naumlr man handlar med en mindre skaumlrm aumlr det mera utmanande eftersom skaumlrmen aumlr liten

och anvaumlndarna brukar inte ha tillraumlckligt med taringlamod att sitta och soumlka naringgonting foumlr

laumlnge paring en liten skaumlrm Daumlrfoumlr aumlr det viktigt att veta vilka saker man boumlr beakta naumlr man

designar en mobil e-handel I det haumlr stycket kommer jag att lista upp kritiska saker man

boumlr veta naumlr man designar en mobil e-handel webbplats

1 Call-to-action knapparna foumlr smaring paring en mobilskaumlrm

Naumlr man designar webbsidor foumlr mobiler kan det ibland vara en utmaning att faring

allt att rymmas in Daumlrfoumlr brukar ocksaring webbdesigner minska de sk rdquocall to act-

ionrdquo knapparna Om anvaumlndaren maringste zooma in foumlr att klicka paring en knapp men

av misstag klickar paring en annan knapp kan det bli frustrerande foumlr dem och detta

leder sedan till att de laumlmnar sidan Daumlrfoumlr aumlr det mycket viktigt att designa knap-

parna och inneharingllet saring att anvaumlndarna laumltt naringr dem

2 Soumlkfunktionen ska alltid finnas med

Paring mobila e-handel webbplatser ska soumlkfunktionen alltid synas saring att man laumltt skall

kunna soumlka produkterna Laringt oss saumlga att kunden inte hittar produkten han soumlker

och vill anvaumlnda soumlkfunktionen Han letar och letar efter soumlkfunktionen utan re-

sultat Detta orsakar inte bara att kunden laumlmnar din sida men ocksaring kommer han

att beraumlttar det vidare aringt andra hur han upplevde din sida (Mehra 2015)

3 Laumltt att navigera

20

Det ska vara laumltt att navigera runt sidorna Anvaumlndarna ska veta var han aumlr och hur

han kommer vidare efter att han tex har valt produkten Menyerna foumlr katalo-

gerna ska vara laumltta att navigera Om menyerna foumlr katalogerna aumlr foumlrvirrande och

svaringra foumlr anvaumlndaren att hitta produkterna blir han laumltt irriterad Exemplar paring (fi-

gur 27) haumlr nedan visar att menyerna aumlr ganska foumlrvirrande paring vaumlnstra bilden me-

dan paring houmlgra sidan aumlr det klart och tydligt (Laya 2014)

Figur 27 Jaumlmfoumlrelse mellan en bra och daringlig navigation httpconversionxlcommake-mobile-convert

4 Ta de roliga ur shopping

Det vanligaste och stoumlrsta misstaget som de flesta foumlretag goumlr naumlr de designar foumlr

mobil e-handel aumlr att de foumlrsoumlker flytta kunderna fraringn shopping till koumlp Shopping

paring en stationaumlr dator goumlr det laumltt naumlr det oftast finns ett enormt antal produkter att

vaumllja mellan och det aumlr laumltt att blaumlddra runt Men foumlr mobiler aumlr det annat

Maringnga foumlretag foumlrsoumlker pressa ihop hela shopping-processen till smaring tabbar och

minska paring inneharingllet Som resultat kommer anvaumlndaren att kaumlnna sig paringtvingad

21

att goumlra snabba beslut paring inkoumlp Istaumlllet foumlr att ge anvaumlndarna en saringdan paringtvingad

upplevelse kan man istaumlllet locka anvaumlndarna med all information vi har att er-

bjuda

Det betyder inte att anvaumlndarna som besoumlker e-handeln med en smarttelefon inte

vill njuta av shoppingen saringsom de goumlr paring stationaumlra datorer Naumlr man designar en

mobil e-handel skall kunderna kunna faring njuta av shoppingen och jaumlmfoumlra mellan

olika produkter innan dem bestaumlmmer sig vilken produkt de vill koumlpa (Laya 2014)

ldquoBut we see many companies try to compress the whole shopping process into a

small number of taps The result is a mobile app or website that forces the user to

make a quick purchase decision rather than giving a great shopping experience

To the user it feels like the site switches from giving enticement to issuing de-

mandsrdquo

- Laya Peep 2014

5 Laringngsam uppladdningstid foumlr mobiler spelar en stor roll

Det aumlr mycket viktigt att haringlla sidstorleken saring liten som moumljligt saring att det aumlr snabbt

att ladda upp sidan

ldquoMobile users want to take quick action and also Google has reportedly started

including page speed for ranking websites in the search results so that makes it

even more important to have a lighter siterdquo

- Mehra Gagan 2015

Varingren 2014 rapporterade Radware (httpwwwradwarecomspring-sotu2014)

att majoriteten av besoumlkarna kommer att oumlverge webbplatsen efter att ha vaumlntat i

3 sekunder foumlr att ladda upp sidan (Laya 2014)

Om det finns mycket inneharingll paring en sida kan man som alternativ separera inne-

haringllet i olika flikar (Mehra 2015)

Jag har tagit ett exempel fraringn Amazoncom Paring produktsidan har ja valt en orange

vaumlska Foumlr att tex ytterligare laumlsa om produktbeskrivningen rdquoAbout this itemrdquo ser

22

jag en pil som aumlr paring houmlgra sidan (Figur 29) Naumlr jag trycker paring pilen eller laringdan

kommer jag till en annan sida daumlr jag kan laumlsa hela produktbeskrivningen (Figur

210) Paring det haumlr saumlttet inneharingller sidan all information man behoumlver men separe-

rade i olika flikar saring att det blir snabbare att ladda upp sidan

Figur 28 Produktsida paring amazoncom

23

Figur 29 Produktsida paring amazoncom

Figur 210 Produktsida paring amazoncom About this item

24

6 Misslyckade analyseringar av anvaumlndarna

Naumlr man bygger webbsidor aumlr det viktig att goumlra anvaumlndbarhetstest och analysera

kundernas beteende Hur anvaumlndarna kaumlnner sig naumlr de anvaumlnder sidan aumlr mycket

viktigt och avgoumlr hur bra din business kommer att rulla

Analyseringen aumlr den kritiska inputen foumlr designen Med analyseringen ser man

dels vilka mobila apparater anvaumlndarna anvaumlnder och om det aumlr naringgra svaringrigheter

och obekvaumlmligheter anvaumlndarna upplever vid anvaumlndningen Dessa faktorer aumlr

viktiga foumlr att saumlkerstaumllla om den mobila upplevelsen uppfyller behoven hos kon-

sumenterna Testet och analysen maringste goumlras kontinuerligt foumlr att vi skall kunna

saumlkerstaumllla att kunderna har det bekvaumlmt (Mehra 2015)

7 Mindre inneharingll foumlr mobilanvaumlndarna

E-handel webbplatser brukar goumlmma inneharingll foumlr att goumlra sidan mindre Sidan aumlr

i sjaumllva verket inte mindre men bara goumlmd foumlr anvaumlndarna som anvaumlnder sina

smarttelefoner Enligt Mehra Gagan aumlr det inte bra om det finns mindre inneharingll

foumlr mobilanvaumlndarna Oavsett med vilka enheter anvaumlndarna aumlr paring sidan boumlr det

finnas lika mycket inneharingll paring alla enheterna De flesta som handlar online brukar

aumlga flera enheter och med stor sannolikhet anvaumlnder de ocksaring andra enheter foumlr

att surfa Om inneharingllet inte ser likadant ut paring stationaumlra datorer och smarttelefo-

ner kan det orsaka daringlig anvaumlndarupplevelse foumlr anvaumlndaren Enligt Google an-

vaumlnder 90 av dem som handlar paring internet olika enheter Att begraumlnsa deras

anvaumlndning aumlr naringgonting som man boumlr undvika (Mehra 2015)

25

3 MOBILANPASSADE LOumlSNINGAR

Det finns maringnga olika loumlsningar att bygga sin webbplats med Det aumlr viktigt att komma

iharingg att mobila anvaumlndande oumlkar hela tiden Det staumlller nya krav paring webbdesign och an-

vaumlndargraumlnssnitt Anvaumlndarna foumlrvaumlntar sig idag att de ska kunna ta del av allt inneharingll paring

webben oavsett om de anvaumlnder en smarttelefon eller en surfplatta De mobilanpassade

loumlsningarna foumlr e-handel kan tex vara Responsiv design Adaptiv Design Mobilbutik

eller en mobil applikation

31 Adaptiv design

En adaptiv webbplats aumlr uppbyggd saring att den aumlr optimerad foumlr specifika skaumlrmstorlekar

Den anvaumlnder servern foumlr att upptaumlcka den enhet som anvaumlnds foumlr att visa webbplatsen

Byggande av webbplatsen med adaptiv metoden aumlr tidskraumlvande paring grund av behovet att

optimera sidan foumlr varje vald plattform front-end och back-end Innan man boumlrjar bygga

webbplatsen maringste man avgoumlra vilka alla plattformar webbplatsen kommer att optimeras

till Foumlrdel med adaptiv design aumlr att den har snabb uppladdningstid

rdquoCompared to Responsiv design adaptive web design is website-optimised for each

platform separately and makes use of the opportunities presented by the platform as

well as the models and functions It offers fast-loading pages due to the server detec-

tion device and browser sending data tailored for a particular devicerdquo

-Lubo Ruska 2013

Att vaumllja den raumltta loumlsningen handlar om att foumlrstaring vad maringlgruppen foumlrvaumlntar sig och vad

de behoumlver Eftersom foumlretaget 909jp inte aumlr en jaumltte stort foumlretag saringsom Ikea eller Ama-

zon som har oberaumlknat antal med produkter tycker jag att Responsiv design med Mobile

first metoden aumlr den mest effektiva metoden foumlr denna forskning

26

32 Responsiv design

Responsiv webbdesign aumlr ett av de populaumlraste saumltten att optimera en webbplats Re-

sponsiv webbdesign moumljliggoumlr att layouten foumlraumlndras beroende paring vilken skaumlrmstorlek

och skaumlrmupploumlsningen som anvaumlndarna har och beroende paring vilka funktioner som

webblaumlsaren stoumldjer (Responsive Design 2014)

Oberoende om anvaumlndarna anvaumlnder dator laumlsplatta eller sin mobiltelefon kommer sidan

att anpassa sig paring olika saumltt foumlr att anvaumlndarna vid alla tillfaumlllen ska ha en saring rik upplevelse

som moumljligt Man kan saumlga att en webbsida paring mindre skaumlrmar aumlr med ett annat ord en

krympande version av den stoumlrre skaumlrmstorleken

Inneharingllet saringsom kolumner och bilder paring webbsidan kommer automatiskt att anpassas

beroende paring skaumlrmstorleken Och detta aumlr paring grund av Grid systemet Allt inneharingll skall

haringllas inom ett Grid system Grid systemet skall skydda allt fraringn att bryta samman naumlr

sidan anvaumlnds paring olika skaumlrmstorlekar

Det finns 11 olika Grid storlekar tvaring kolumner tre kolumner fyra kolumner fem kolum-

ner sex kolumner sju kolumner aringtta kolumner nio kolumner tio kolumner 11 kolumner

och 12 kolumner Som exempel visar jag en figur av 12 kolumners Grid system (Swan

2014)

27

Figur 31 Ett exempel paring Grid system av 5 olika skaumlrmstorlekar (Phil Swan 2014)

Responsiv webbdesign fungerar med hjaumllp av HTML5 CSS media Query och Java-

Script Det bygger paring att webbutvecklare istaumlllet foumlr exakta storlekar maumltt i pixlar anger

sidelements storlekar i procent i jaumlmfoumlrelse med skaumlrmens storlek

Naumlr sidelementens storlekar aumlr i procent goumlr det att sidan blir flexibel och den anpassas

efter webblaumlsarens storlek medan fasta pixlar ger en scrollbar (rull-list) (Responsive De-

sign 2014)

33 Varfoumlr Responsiv design

Foumlrdelar med Responsiv design aumlr att den erbjuder en bra anvaumlndarupplevelse foumlr olika

enheter och skaumlrmstorlekar Tack vare den Responsiva designen har webbredaktoumlrer laumlt-

tare att hantera inneharingllet eftersom de bara har en version att hantera Ur en SEO synvin-

kel fungerar Responsiv design baumlttre eftersom den koncentrerar inneharingllet istaumlllet foumlr att

vattna ur det med maringnga URL foumlr samma inneharingll

28

Med en Responsiv design aumlr en webbplats laumlttare att hantera Att ha flera olika versioner

av en webbplats innebaumlr mera arbete Flera olika versioner av en webbplats innebaumlr sepa-

rata sidor att redigera och separata insatser foumlr soumlkmotoroptimering och separata soumlkmo-

torkampanjer Daumlrfoumlr aumlr det en stor foumlrdel att bygga en webbplats med den Responsiva

metoden

Med en Responsiv design kaumlnner anvaumlndarna baumlttre igen sidan baringde paring stationaumlra datorer

och mobiltelefoner Bygger man specifika webbplatser foumlr mobiler och surfplattor kan

det laumltt haumlnda att det blir olika information paring webbplatserna och att de struktureras olika

Laringt oss foumlrestaumllla oss att naringgon anvaumlnder sin mobiltelefon paring lunchen foumlr att leta efter en

flygbiljett fraringn Helsingfors till Tokyo Personen hittar en webbplats som har bra erbju-

dande och bestaumlmmer sig foumlr att fortsaumltta kolla naumlr han eller hon kommer hem Naumlr per-

sonen har kommit hem anvaumlnder hen datorn istaumlllet foumlr mobilen Om webbplatsen som

personen kollade paring lunchpausen var en Responsiv webbplats faringr personen en smidig och

bra upplevelse vid oumlvergaringngen fraringn den mobila webbplatsen till stationaumlr dator

(Lindahl 2014)

Det aumlr vaumlldigt viktigt att ha sin webbplats att optimerad till saring maringnga enheter som moumljligt

foumlr att ingen vet vilka kommer att vara framtidens enheter och daumlrfoumlr anses en webbplats

som anpassar sig till maringnga olika format vara den baumlsta loumlsningen Innan man kan boumlrja

med att designa en Responsiv webbplats maringste man veta vilka skaumlrmupploumlsningar och

storlekar det finns tillgaumlngliga och aumlr populaumlra idag Foumlr att kunna rikta till de olika skaumlr-

mupploumlsningarna med Media Queries har jag listat upp olika enheternas skaumlrmupploumls-

ningar i pixlar haumlr nedan i tabellen

ResolutionGrafisk array Enhet som anvaumlnder denna resolution skaumlrmstorlek i pixel-

taumltheten i pixlar

2880x1800 15-inch Apple MacBook Pro with Retina display

2560 x 1700 Google Chromebook Pixel

2560 x 1600 Samsung Google Nexus 10

13-inch Apple MacBook Pro with Retina display

29

2560 x 1440 27-inch Apple iMac 102 111 113 122 (Late 2009 -

2012)

1920 x 1080 HTC One Samsung

Sony Xperia Z amp Xperia ZL

Asus PadFone Infinity

Acer Aspire S5

Asus Zenbook Prime

1600 x 900 Apple Macbook Air

1366 x 768 Small desktoplaptop screen resolution

Asus VivoTab RT

Samsung N350

1280 x 1024 Standard desktop screen resolution

1280 x 800 Asus PadFone 2

Samsung Galaxy Note

Sony Xperia Tablet S

1280 x 720 Sony Xperia S

HTC Windows Phone 8X

HTC One mini

1136 x 640 Apple iPhone 5 5S amp 5C

Apple iPod Touch (5th generation)

960 x 640 Apple iPhone 4 amp 4S

Apple iPod Touch (4th generation)

854 x 480 Sony Xperia ray

Nokia N9

800 x 480 Nokia Lumia 510 amp 520

Samsung Galaxy I Galaxy S Galaxy S Plus Galaxy S Ad-

vance Galaxy SL Galaxy S Duos Galaxy Xcover 2 Galaxy

Beam Nexus S Captivate Glide amp Galaxy S III mini

HTC Desire X HTC Desire V Desire VC Desire VT De-

sire U amp Windows Phone 8S

30

LG Optimus 2X Optimus EX Optimus L5 II Optimus Q2

amp Optimus Black

T-Mobile G2x

Asus E600

620 x 480 Blackberry Bold 9900 amp Bold Touch 9930

Blackberry Torch 9810

LG Optimus Z

640 x 360 Sony Ericsson Vivaz amp Vivaz Pro

Nokia 500 amp 5800 XpressMusic

Nokia N8 N97 E7 and X6

480 x 320 Apple iPhone 3G amp 3GS

Samsung Galaxy Ace

320 x 240 Nokia E71

Blackberry Curve 9220 amp 9320

Sony Ericsson txt

Samsung Galaxy Y amp Galaxy Chat

Nokia Asha 501

Figur 32 Resolutions referenser paring olika enheter

31

4 VAD AumlR MOBILE FIRST

Mobile first metoden aumlr en metod och arbetsprocess foumlr webbdesigners som aumlr skapad av

Luke Wroblewski Naumlr man jobbar med ett projekt och designar strukturerar och imple-

menterar en webbplats aumlr Mobile first metoden man paringboumlrjar arbetet med Med metoden

menar Wroblewski att man foumlrst boumlrjar designa webbsidor fraringn de minsta enheterna

Figur 41 Mobile First att bygga webbsidan fraringn den minsta skaumlrmen till den stoumlrsta skaumlrmen

Wroblewski som har skapat Mobile First metoden understryker att metoden ska priorite-

ras daring man skapar anvaumlndarupplevelser

Det finns tre viktiga anledningar foumlr att utveckla foumlr Mobile First

Den foumlrbereder foumlr den stora utveckling och nya moumljligheter som uppkommer

inom det mobila omraringdet idag (836 av vaumlrldens befolkning anvaumlnder internet

paring sin smarttelefon 2015)

Den goumlr att vi blir tvungna att prioritera och fokusera varingrt inneharingll genom att ac-

ceptera de begraumlnsningar som aumlr foumlrenade med mobil design

32

och goumlr att vi kan leverera innovativa upplevelser genom att bygga utifraringn nya

funktioner som finns inbyggda i de mobila enheterna (bla GEO lokalisering)

En mobil webbplats behoumlver endast ha en mycket enkel layout och navigeringen ska vara

laumltt och effektiv

Naumlr man designar med Mobile first metoden tvingas man goumlra viktiga beslut om vad som

ska prioriteras Naumlr den optimerad design foumlr en liten skaumlrm visas paring en stoumlrre skaumlrm

kommer det att bli laumlttare att designa paring de stoumlrre skaumlrmarna Allt som ska goumlras aumlr daring

bara att fylla paring inneharingllet och designa saring att det aumlr grafiskt tilltalande och laumltt att hitta

inneharingllet (Wroblewski 2011)

41 Varfoumlr Mobile first

Vaumlrlden vi lever i idag aumlr inte mera som foumlr tio aringr sedan Allt runtom oss har utvecklats

speciellt mobiltelefonerna Tidigare anvaumlndes mobiltelefoner bara foumlr att skicka med-

delandet ringa och ta emot samtal Nu anvaumlnds den till foumlr att dels ta bilder video GPS

navigation foumlr vaumlgvisning och speciellt internetanvaumlndningen saringsom Google nyheter

Facebook Youtube och mycket mer Paring grund av det har ocksaring varingr livsstil foumlraumlndrats

Internetanvaumlndning idag har blivit allt vanligare Idag anvaumlnder vi naumltet i skolan paring jobbet

eller var och naumlr som helst bara man har en smarttelefon eller surfplatta och naumltet kopplat

Tidigare boumlrjade man bygga en webbplats fraringn den stoumlrsta skaumlrmen medan den mobila

sidan var en biprodukt Laringt oss saumlga att man har en webbplats med en rik grafisk layout

och ser stilig ut paring stationaumlra datorer Naumlr man skalar ner sidan foumlr att passa en mobilskaumlrm

kommer resultatet att vara en smaumlrta foumlr varingra oumlgon Paring den lilla mobilskaumlrmen kommer

det att vara olaumlsligt och svaringrt att anvaumlnda Foumlr att naring inneharingllet maringste du tom zooma in

och ut eller skrolla till houmlger och vaumlnster Det haumlr kommer att ge en negativ bild av ditt

foumlretag och anvaumlndarna kanske aldrig mera besoumlker din webbplats (Wroblewski 2011)

Ett bra exempel aumlr Tokyo Skytree webbplats som aumlnnu idag inte ha byggt in funktionalitet

och designen foumlr mindre skaumlrmupploumlsningar paring den engelska sidan

33

Tokyo Skytree aumlr vaumlrldens naumlst houmlgsta torn efter Burj Khalifa Tornet aumlr Japans houmlgsta

byggnadsverk med en houmljd paring 634 meter Den oumlppnades 22 maj 2012 och under det foumlrsta

aringret hade den 64 miljoner besoumlkare fraringn hela vaumlrlden Trots det har de laringtit bli att utveckla

den engelska webbsidan Paring bilden ser man att hemsidan ser exakt likadant ut paring stationaumlr

dator och paring mobilen

Figur 42 Hemsidan paring Tokyo Skytree paring stationaumlr datorskaumlrm

34

Figur 43 Hemsidan foumlr Tokyo Skytree Foumlrsta bilden visar hur det ser ut normalt Andra bilden visar naumlr man zoomar

in

Naumlr man foumlrsoumlker zooma in foumlr att laumlsa inneharingllet hoppar sidbalken (paring vaumlnstra sidan) paring

texten Det haumlr ger en mycket daringlig anvaumlndarupplevelse och kan ge fel bild av turistplat-

sen Ett annat fel paring sidan aumlr naumlr man vaumlljer spraringk till japanska ser sidan inte likadant ut

35

Figure 44 Hemsidan paring Tokyo Skytree paring japanska

Om du kan laumlsa japanska kommer du att undra varfoumlr det finns massor med information

och sidan ser mycket trevligare ut paring den japanska sidan Paring den internationella sidan

dvs engelska ser det inte lika trevligt ut och inneharingller inte allt som det goumlr paring den

japanska sidan Det aumlr som om den stoumlrsta maringlgruppen aumlr foumlr japanska turister och som

om de skulle inte bry sig om turister fraringn utlandet

Utoumlver det har de ocksaring byggt en mobilsida foumlr den japanska webbsidan Varfoumlr satsa bara

paring den japanska sidan och inte den engelska sidan naumlr maringlgruppen aumlr hela vaumlrlden

36

Figur 45 Mobil sidan paring Tokyo Skytree paring japanska

Vi lever i 2015 saring alla borde veta att det aumlr vaumlldigt viktig att ha en mobil webbplats som

erbjuder en bra anvaumlndarupplevelse paring alla spraringk som webbplatsen erbjuder Naumlr man har

sin sida paring flera spraringk och aumlndaring bestaumlmmer sig att bygga sidan ordentligt bara paring ett spraringk

kan anvaumlndarna faring en fel bild av foumlretaget I vaumlrsta fall kommer anvaumlndarna tycka att sidan

aumlr oparinglitligt och aringterkommer aldrig igen

Mobile first metoden aumlr daumlrfoumlr en mycket effektiv metod att bygga sin webbplats med

Man boumlrjar med att bygga sin webbplats fraringn den minsta skaumlrmen Man tvingas goumlra be-

slut om vad som ska absolut prioriteras Arbetsprocessen foumlr oss webbdesigners blir

mycket effektivare genom att foumlrst designa fraringn den minsta skaumlrmen och sedan foumlrflytta

oss till de stoumlrre skaumlrmarna Har man ett 6 kvadratmeters sovrum och foumlrsoumlker faring sin saumlng

skrivbord hylla klaumldskaringp och soffan att rymmas in aumlr det ganska utmanande Men naumlr

man boumlrjar med det mest utmanande i arbetsprocessen blir arbetet ocksaring mindre utma-

nande desto stoumlrre rum eller skaumlrm det blir (Wroblewski 2011)

37

5 909JP

909jp aumlr en elektronisk handel en moumlbelaffaumlr som saumlljer vaumlsterlaumlndska produkter Den

elektroniska butiken kommer att oumlppnas i Japan 2015 Deras foumlrvaumlntningar aumlr att faring in

en miljon dollar i foumlrsaumlljning per aringr I deras elektroniska moumlbelaffaumlr saumlljs bla stolar bord

soffor och lampor Maringlgruppen aumlr alla konsumenter mellan 18-60 aringringar

Japaner aumlr intresserade av vaumlsterlaumlndska produkter och livsstil men foumlr de flesta varor aumlr

designen knutna till deras egen kultur vilket goumlr dem mer intresserad Det aumlr ocksaring mycket

viktigt att ha sin hemsida paring japanska eftersom 99 av den japanska befolkningen foumlre-

drar att inte laumlsa inneharingllet paring andra spraringk (Khurana)

Japan aumlr ett land med vaumlrldens tredje stoumlrsta ekonomi paring 5 biljoner De har vaumlrldens ti-

onde stoumlrsta befolkning med ca 1271 miljoner invaringnare varav 70 av den totala befolk-

ningen anvaumlnder internet och 24 av dem anvaumlnder internet paring sin smarttelefon

(Khurana)

Viktigt med detta projekt aumlr att sikta aringt raumltt haringll och betjaumlna kunderna paring det baumlsta saumlttet

via webbplatsen Foumlr att kunna faringnga saring maringnga kunder som moumljligt aumlr det mycket viktigt

att designa en webbplats som aumlr anvaumlndarvaumlnlig stilig och laumltt att anvaumlnda (Wroblewski

2011)

Jag har daumlrfoumlr kommit underfund med att anvaumlnda Mobile first och Responsiv design

metoden foumlr att utveckla den mobila 909jp sidan Med tanke paring att det aumlr en Responsiv

design skall layouten paring den mobila versionen ocksaring passa in med de stoumlrre skaumlrmarna

naumlr sidan skalas upp Det aumlr dock viktigt poaumlngtera att jag endast kommer att koncentrera

mig paring den mobila designen och utveckla designen endast foumlr denna forskning

38

6 ANALYS AV DEN NYA DESIGNEN

Med hjaumllp av den tidigare designen paring 909jp och de kritiska punkterna jag har hittat under

forskningen har jag skapat en ny och foumlrbaumlttrad design av webbplatsen foumlr mobiler I det

haumlr kapitlet kommer jag att visa naringgra exempel paring den tidigare designen och jaumlmfoumlra den

med nya designen samt analysera arbetet

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger)

1 Call-to-action knapparna

Under hela arbetsprocessen har jag haft i minnet att navigeringar laumlnkar och knap-

parna ska vara tillraumlckligt stora att klicka paring I den tidigare designen har de stora

bilder paring kategorier vilket jag tycker aumlr en bra design att aringtervaumlnda

39

2 Soumlkfunktionen

Paring den tidigare versionen haumlr nedan ser man att soumlkfunktionen inte finns med

medan paring den nya designen ser man soumlkfunktionen genast naumlr man kommer till

sidan Som tidigare framfoumlrdes att soumlkfunktionen alltid ska synas saring att man laumltt

skall kunna soumlka fram produkterna Om soumlkfunktionen inte finns med eller aumlr svaringr

att hitta naumlr den behoumlvs kan det orsaka missnoumlje hos anvaumlndarna (Mehra Gagan

2015)

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp

Figur 63 Soumlkfunktionen paring den nya designen 909jp

40

3 Laumltt att navigera

Naumlr skaumlrmen aumlr liten aumlr det viktig att ha en enkel layout (Wroblewski 2011)

Jag har daumlrfor i den nya designen flyttat rdquoHemrdquo och rdquoBlogrdquo knapparna bort fraringn

den oumlvre menyn Hem-knappen finns nu i hamburgarmenyn paring vaumlnstra sidan me-

dan Blog-knappen finns i footer Detta goumlr att det ser mera organiserat ut

Figur 64 Gamla designen

Laringt oss foumlrflytta vidare till menyer foumlr kategorier Paring hemsidan har man tvaring alter-

nativ att naring kategorierna Foumlrsta aumlr den hamburgarmenyn knappen paring vaumlnstra si-

dan I menyn aumlr kategorierna indelade i fyra delar stolar lampor ergonomisk och

soffa amp middag Detta goumlr det laumltt och klart foumlr anvaumlndarna var produkterna finns

Eftersom vi bara har partiell uppmaumlrksamhet fraringn anvaumlndarna naumlr de aumlr paring sina

smarttelefoner har jag valt att saumltta in ikoner i menyn (Figur 65) Naumlr anvaumlndaren

bara anvaumlnder ena oumlgat foumlr att kolla paring mobilen och andra oumlgat foumlr naringgonting annat

ska den lilla skaumlrmen med webbplatsen kunna faringnga uppmaumlrksamheten samt un-

derlaumltta anvaumlndningen av webbplatsen (Wroblewski 2011)

41

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny

Andra menyn for kategorierna aumlr de fyra bilderna under Aeron chair slideshowen

Paring den tidigare designen ser man endast ett foumlnster av kategorierna som aumlr place-

rade i en kolumn som upprepas loggraumltt (Figur 66) Det haumlr goumlr att anvaumlndaren

maringste skrolla ner foumlr att se varenda kategori vilket kan orsaka obekvaumlmlighet Att

se flera kategorier paring samma skaumlrm sparar tid och anvaumlndaren kommer aumlven baumlttre

iharingg var sakerna finns Att ha bara rdquoenrdquo stor bild som syns paring skaumlrmen och vara

tvungen att skrolla ner foumlr att se naumlsta bild aumlr frustrerande Paring den nya designen

har jag tvaring rutor av kategorier bredvid varandra (Figur 66)

42

Figur 66 Kategorier paring den gamla designen (till vaumlnster) Kategorier paring den nya designen (till houmlger)

4 Ta det roliga ur shopping

Paring den nya designen straumlvar jag efter att erbjuda en bekvaumlm shopping-upplevelse

Naumlr anvaumlndarna besoumlker e-handeln med en smarttelefon foumlrvaumlntar hanhon sig

ocksaring att kunna ta del av allt inneharingll och goumlra jaumlmfoumlrelser med andra produkter

Jag har daumlrfoumlr i den nya designen pressat ihop laumlngden paring kolumnhoumljden som om-

ringar produkten Som resultat ser vi nu fyra produkter paring samma skaumlrm (Figur

67) I den tidigare designen ser vi en enda produkt paring en skaumlrm och foumlr att se

andra produkter maringste vi skrolla ner Paring det haumlr saumlttet har anvaumlndarna svaringrare att

jaumlmfoumlra produkterna (Laya 2014)

43

Figur 67 Tidigare produktsida (till vaumlnster) Ny produktsida (till houmlger)

I den tidigare designen ser vi ocksaring att det finns endast produktens bild produk-

tens namn koumlpvagnen och infoikonen Om man vill faring reda paring produktens inform-

ation maringste man klicka paring produktens bild eller paring infoikonen som foumlr oss direkt

till sjaumllva produktens sida Bara foumlr att man vill faring reda paring vad det aumlr foumlr produkt

foumlrs man vidare till en annan sida Det haumlr kan orsaka att kunden inte njuter totalt

av shoppingen och dessutom kan han inte jaumlmfoumlra produkterna naumlr han aumlr paring ka-

tegoriernas sida (Laya 2014)

Laringt oss hoppa vidare till den nya designen (Figur 68) Paring den nya designen har

jag satt in en kort detaljbeskrivning foumlr varje produkt Dessutom naumlr man klickar

paring infoikonen paring houmlgra sidan kommer man inte direkt till produktsidan utan det

kommer att dyka upp en inforuta som har en kort beskrivning paring produkten Om

anvaumlndaren aumlr intresserad av produkten kan han garing in till sjaumllva produktsida ge-

nom att klicka paring rdquoView productrdquo eller ocksaring paring produktbilden daumlr hanhon kan

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

8

1 INLEDNING

11 Motiv foumlr aumlmnesvalet

Som Online Media studerande har jag alltid gillat att designa webbsidor Jag har alltid

varit intresserad av den haumlr inriktningen Ju mer man studerar desto mer vill man laumlra sig

Det att jag tycker om att designa webbsidor var inte enda orsaken till att jag valde mitt

aumlmne foumlr examensarbete Jag har alltid varit intresserad i elektronisk handel Hur faringr man

kunder att koumlpa sina produktertjaumlnster utan en fysisk saumlljare Hur marknadsfoumlr man och

hur naringr man baumlst kunderna daring foumlretaget med e-handel kan vara allt fraringn klaumldbutiker flyg-

bolag eller moumlbelaffaumlrer

Som webbdesigner har jag som uppgift att hjaumllpa kunderna att marknadsfoumlra deras foumlretag

eller produkter via webben Som aumlmne foumlr examensarbetet har jag valt att goumlra en fallstu-

die daumlr jag foumlrbaumlttrar den tidigare 909jp webbplatsen med hjaumllp av min forskning

Som bakgrund har jag kunskaper i webbdesign vilket jag kan anvaumlnda som verktyg En

bra webbplats maringste vara grafiskt attraktiv foumlr anvaumlndaren Med hjaumllp av det grafiska

maringste en bra webbplats daumlrmed lyckas leverera den information som anvaumlndarna aumlr ute

efter Det maringste vara laumltt att navigera runt sidorna samt hitta snabbt informationen an-

vaumlndarna vill naring Sidan maringste ocksaring kunna laddas ner snabbt aumlven via en laringngsammare

naumltuppkoppling foumlr att tillfredsstaumllla anvaumlndarna En webbplats maringste erbjuda en bra

funktionalitet samt anvaumlndarvaumlnlighet paring mindre skaumlrmar saringsom paring mobiler Som maringl

kommer jag att fokusera mig paring hur man kan utveckla och foumlrbaumlttra en e-handel design

foumlr mobiler

12 Syfte

Syftet med min uppsatts aumlr att laumlra mig att utveckla och foumlrbaumlttra anvaumlndarupplevelser i

e-handel foumlr mobiler Att handla paring naumltet med sin mobil sparar mer tid och maringnga garingnger

kan det vara mycket laumlttare Foumlr att lyckas med att bevisa aringt anvaumlndarna att en tjaumlnst aumlr

trovaumlrdig aumlr det jaumltte viktigt att erbjuda dem en bra och bekvaumlmt plats att handla online

9

Foumlr att lyckas med det maringste man ha en mycket bra design och funktionalitet paring webbsi-

dan I min uppsats kommer jag att fokusera paring design som byggs med Mobile first meto-

den Forskningsfraringgan i mitt examensarbete aumlr rdquoHur kan man baumlst utveckla en e-handel

webbplats foumlr mobilerrdquo

Arbetet skall vara till nytta foumlr webbdesigners och Online Media studerande som inte

tidigare har kunskaper inom e-handel foumlr mobiler och vill foumlrdjupa sig mera i det Arbetet

skall ocksaring vara till nytta foumlr dem som goumlr eller kommer att goumlra ett projekt inom e-han-

deln Det ska hjaumllpa dem oumlka foumlrstaringelse samt stoumlda dem i deras projekt

13 Avgraumlnsningar

I min uppsatts kommer det inte att staring om avancerad html och CSS kodning Jag kommer

fraumlmst att koncentrera mig paring strukturer och layouten och hur man baumlst kan uppnaring den

baumlsta anvaumlndarupplevelsen inom mobil e-handel Jag kommer inte att goumlra anvaumlndarbar-

hetstest men med hjaumllp av teorierna hittar jag de mest kritiska punkterna foumlr att kunna

goumlra en ny design till min fallstudie

14 Metod

Som metod kommer jag att undersoumlka strukturen layouten och anvaumlndarupplevelser foumlr

mobil e-handel i allmaumlnhet Forskningsmetoden paringminner naumlrmast om den vetenskapliga

fallstudiens metod

Metoden innebaumlr en plan foumlr att samla in organisera och integrera information och den

resulterar i ett speciellt forskningsresultat Jag kommer att anvaumlnda boumlckerna Ethan

Marcotte Responsive web design (2011) Wroblewski Luke Mobile First (2011) och

Karen McGrane Content strategy for Mobile (2012) Som material kommer jag ocksaring att

anvaumlnda kaumlllor fraringn naumltet och andra bocker

Med hjaumllp av de kritiska punkter jag hittar fraringn kaumlllor kommer jag att anvaumlnda som metod

foumlr att vidareutveckla designen foumlr den mobila e-handel webbplatsen (909jp) jag har som

fallstudie

10

Med hjaumllp av undersoumlkningen om e-handel foumlr mobiler kommer jag att veta vilka saker

det ska finnas paring sidan saringsom kategorier foumlr produkter kundvagn incheckning osv

15 Begrepp

SEO aumlr foumlrkortning fraringn engelska rdquoSearch Engine Optimizationrdquo och oumlversaumltts till Soumlk-

motoroptimering paring svenska Soumlkmotoroptimeringen anvaumlnds foumlr att faring en webbplats att

synas saring houmlgt upp som moumljligt bland resultaten vid soumlkningar i soumlkmotorer (Belinger

2014)

Call to action knapparna aumlr knappar som leder anvaumlndarna vidare till en viss sida Var-

foumlr man kallar det foumlr rdquoCall to actionrdquo aumlr for att knapparna ska kunna faringnga uppmaumlrksam-

heten paring anvaumlndarna foumlr att klicka sig vidare Knapparna kan vara tex meny- knappar

eller bilder som anvaumlnds som en laumlnk till en annan sida (Mehra 2015)

Hamburgarmenyn aumlr menyn som anvaumlnds paring webbplatsen foumlr smarttelefoner Haumlr aumlr

exempel paring menyn

Media Queries aumlr en CSS3-modul som tillaringter inneharingll rendering att anpassa sig till

olika skaumlrmupploumlsningar saringsom smarttelefoner surfplattor och datorskaumlrmar Foumlr att

kunna faring sin webbplats att anpassa sig till olika skaumlrmupploumlsningar naumlr skaumlrmen blir

mindre anvaumlnder man Media Queries i CSS3 (Wikipedia)

11

2 VAD AumlR E-HANDEL

E-handel fungerar genom att ett foumlretag eller individuell person koumlper saumlljer ut eller byter

produkter information eller tjaumlnst via internet eller andra datornaumltverk (Wikipedia)

En stor del av e-handeln aumlger rum i de saring kallade naumltbutikerna Naumltbutiker har ett lager

och en webbplats daumlr kunden goumlr sina bestaumlllningar Paring webbplatsen indelas varorna i

olika kategorier saring att anvaumlndarna paring sidan kan laumltt hitta varorna Foumlr att hitta varorna

snabbare brukar de flesta naumltbutikerna ocksaring ha en soumlkfunktion Paring sidan har anvaumlndarna

moumljligheter att saumltta produktenprodukter i kundvagnen och sedan fortsaumltta shoppa tills

man aumlr klar Vid bestaumlllningen garingr man bara till kassan daumlr anvaumlndaren kommer att vaumllja

transportsaumltt ange kontakt- och leveransuppgifter och vaumllja betalningsmetod Betalnings-

metoden aumlr vanligtvis kreditkort eller Paypal

Fakturan daumlrmed brukar inte ges till kunden daring det skulle innebaumlra oumlkade risker foumlr be-

draumlgerier foumlr naumltbutikerna Foumlr fakturakoumlp behoumlver kundens identitet faststaumlllas paring ett saumlk-

rare saumltt

Naumlr betalningen har gjorts levereras varorna vanligtvis som postpaket eller direkt leverans

till doumlrren foumlr stoumlrre varor saringsom moumlbler (E-handel 2015)

ldquoE-handeln fortsatter att vaxa Nastan hela tillvaxten sker numera i mobilen Det ar

inte priset som gor att vi handlar pa natet De viktigaste skalen ar att det ar smidigare

och att utbudet ar storre an i traditionella butikerrdquo

-Larsson Daniel 2014

21 Mobil e-handel

Mobil e-handel (m-handel) aumlr en term som beskriver en foumlrsaumlljningstransaktion som an-

vaumlnder traringdloumlsa elektroniska enheter saringsom smarttelefoner och surfplattor En mobil e-

handel webbplats fungerar i alla smarttelefoner och surfplattor och aumlr anpassad samt op-

timerad foumlr mobilens webblaumlsare

12

Foumlr att naring den mobila webbplatsen behoumlver man inte skriva in mobil adress eller aktivt

vaumllja att visa den mobila butiken Den mobila webbplatsen av en e-handel kaumlnner auto-

matiskt igen om man anvaumlnder en dator eller en mobil och visar daring upp en optimerad

version som anpassas efter anvaumlndarnas behov (Nordisk e-handel)

I den mobila versionen av e-handel brukar kategorier bestaring av endast en sida Foumlr att se

paring de resterande produkter i kategorierna kan man trycka paring rdquoVisa flerrdquo som man oftast

hittar laumlngst ner som en knapp eller laumlnk Detta goumlr uppladdningstiden paring sidan betydligt

snabbare och anvaumlndarna slipper vaumlnta Vaumlntande kan leda till avbrutna koumlp

Foumlrutom kategorier produkter och kassa i sjaumllvbetjaumlningsbutik foumlr kunder med produkter

som aumlr optimerade foumlr mobilanvaumlndarna aumlr ocksaring betalvaumlxeln foumlr kortbetalning specialan-

passad Detta goumlr det snabbare och enklare foumlr anvaumlndarnakunderna att avsluta sina koumlp

och betala med sina betalningskort (Mobil e-handel 2012)

22 Varfoumlr handla med mobil

Foumlr att kunna designa en ny mobil e-handel foumlr en kund aumlr det foumlrst jaumltte viktigt att veta

varfoumlr anvaumlndarna vaumlljer att koumlpa produktertjaumlnster med en smarttelefon eller surfplattor

Med hjaumllp av DIBS aringrliga rapport som gjordes i Sverige 2014 visas det att den viktigaste

orsaken till att anvaumlndarna handlar med sin mobil aumlr att det aumlr smidigare och sparar tid

Samtidigt aumlr det viktigt att inte heller gloumlmma bort att andra handlingsmotiv lyfts fram

som viktiga av mer aumln haumllften av alla tillfraringgade E-handel aumlr bra paring maringnga olika saumltt Den

moumlter konsumenternas behov och oumlnskemaringl i stor grad

Foumlr den nordiska befolkningen ska tidsbesparing enligt rapporten vara allra viktigaste foumlr

35-44 aringringar och minst viktig foumlr de yngsta aringldersgruppen 15-24 aringr som foumlr vilka laringga

priser istaumlllet spelar mer roll Utoumlver laringga priser drivs ungdomarna ocksaring oftast av det

stoumlrre utbudet som naumltbutikerna erbjuder paring internet

13

Figur 21 Viktigaste skaumllet att naumlthandel sparar tid

Enligt statiken visar det viktigaste skaumllet varfoumlr man anvaumlnder mobilen foumlr e-handel

64 saumlger att det sparar tid och aumlr smidigt

58 saumlger att det aumlr foumlrmaringnligare

56 saumlger att det aumlr enklare att jaumlmfoumlra mellan olika produkter

43 saumlger att det finns stoumlrre produktutbud

52 saumlger att det aumlr alltid oumlppet

23 Antalet kop okar pa mobilen

Enligt DIBS aringrliga rapport (2014) om mobil e-handel oumlkar antalet mobila e-handel kon-

sumenter hela tiden Nedan finns en figur om antalet under aringr 2013-2014 Figuren visar

hur maringnga garingnger konsumenterna har handlat varortjaumlnster med en smarttelefon eller

surfplattor under de senaste sex maringnaderna Naumlthandeln paring mobila enheterna oumlkar sakta

med saumlkert De som har handlat paring naumltet foumlrut handlar nu ocksaring allt mer Andelen stor-

konsumenter de som handlat minst 25 garingnger paring ett halvaringr har nu foumlrdubblats

De som handlade en eller tvaring garingnger har minskat fraringn 42 procent aringr 2013 till 35 procent

aringr 2014 vilket goumlr det till 17 procent mindre I snitt handlar konsumenter 1114 garingnger

per aringr med sin smarttelefon eller surfplattor

14

Figur 22 Antal oumlkar paring mobilen

Mobilen finns alltid naumlrmast

Enligt rapporten ska den vanligaste orsaken till varfoumlr anvaumlndarna vaumlljer att handla fraringn

mobilen vara foumlr att mobilen fanns naumlrmast till hands vid koumlpoumlgonblicket

Figur 23Varfoumlr handlade du med smarttelefon

15

60 saumlger att smarttelefon fanns naumlrmaste till hands vid koumlptillfaumlllet

27 anvaumlnder en app foumlr att handla online

17 oumlppnade ett erbjudande via e-mail i sin smarttelefon

5 har ingen dator

3 var i butik och koumlpte varan paring naumltet istaumlllet

4 hade ingen internetanslutning

3 scannade en QR-kod

Vad handlar vi med mobil

Foumlr att snabbt faringr en inblick i vad konsumenterna handlar med mobil ser vi haumlr nedan

(Figur 24) Konsumenter handlar mer av naumlstan allt Kunder som spenderar mer aumln 500

euro med smarttelefoner eller surfplattor koumlper i foumlrsta hand resor medan de som handlar

foumlr mindre aumln 100 euro laumlgger pengar paring media

Figur 24 Mobilt handlar vi mer av naumlstan allt

16

24 Bra mobila e-handel webbplatser

En bra mobil webbplats aumlr naumlr sidan aumlr enkel att anvaumlnda fast man bara anvaumlnder ett oumlga

och en tumme

rdquoWhen reflecting on a lot of mobile usage patterns I like to imagine people as rdquoone

eyeball and one thumb One thumb because they are likely to be holding their mobile

in one hand and using a single thumb to control it one eyeball because in many loca-

tions where mobile devices are use we only have peoples partial attentionrdquo

-Wroblewski Luke 2011)

Man kan aldrig exakt veta var anvaumlndaren befinner sig naumlr han surfar med sin smarttele-

fon Han kanske befinner sig i vardagsrummet foumlr att sloumltt surfa efter en ny lampa medan

han kollar paring Tvn Kanske anvaumlndaren sitter hemma och har en stadig wifi eller kanske

paring sommarstugan och har 3G4G som byter mellan olika naumltverk osv (Thoren 2012)

Naumlr anvaumlndaren goumlr naringgonting samtidigt som han surfar paring webbplatsen har han bara den

partiella uppmaumlrksamheten Daumlrfoumlr aumlr det betydligt fler kontexter som man maringste ta haumln-

syn till naumlr man designar webbplatser foumlr mobiler (Wroblewski 2011)

Haumlr aumlr tvaring bra exempel av lyckad e-handel foumlretag i vaumlrlden De har inte lyckats bra bara

med att saumllja produkterna utan ocksaring med designen Haumlr nedan aumlr bilderna paring mobil de-

signen av Rakutencom och Amazoncom

17

Figur 25 Hemsida paring rakutencom foumlr mobiler

Direkt naumlr man kommer paring sidan hittar man inloggningen koumlpvagnen soumlkfunktionen

menyn och speciellt de stora bilderna paring katalogerna vilket aumlr jaumltte laumltta att klicka paring

Fastaumln mobilskaumlrmen aumlr liten goumlr den haumlr det bara inte laumltt att navigera runt sidorna utan

ocksaring trevligt att vara paring sidan

Amazoncom har ocksaring lyckats bra med designen Naumlr man kommer till sidan ser man

direkt Sign in Department Wish List Deals och Search funktionen Under search funkt-

ionen ser man genast en inspirerande reklam som paringminner oss om att det aumlr varingr

rdquoSPRINGacuteS PERFECT PANTSrdquo Fast sidan har jaumltte maringnga objekt i den aumlr det trots allt

18

jaumltte laumltt att navigera runt sidorna Man tappar inte bort sig och man hittar laumltt det som

man aumlr ute efter

Figur 26 Hemsida paring amazoncom foumlr mobiler

19

25 Kritiska punkterna foumlr bra mobil design paring e-handel

Naumlr man handlar med en mindre skaumlrm aumlr det mera utmanande eftersom skaumlrmen aumlr liten

och anvaumlndarna brukar inte ha tillraumlckligt med taringlamod att sitta och soumlka naringgonting foumlr

laumlnge fraringn en liten skaumlrm Daumlrfoumlr aumlr det viktigt att veta vilka saker man boumlr beakta naumlr

man designar en mobil e-handel I det haumlr stycket kommer jag att lista upp sakerna man

boumlr veta naumlr man designar en mobil e-handel webbplats

Naumlr man handlar med en mindre skaumlrm aumlr det mera utmanande eftersom skaumlrmen aumlr liten

och anvaumlndarna brukar inte ha tillraumlckligt med taringlamod att sitta och soumlka naringgonting foumlr

laumlnge paring en liten skaumlrm Daumlrfoumlr aumlr det viktigt att veta vilka saker man boumlr beakta naumlr man

designar en mobil e-handel I det haumlr stycket kommer jag att lista upp kritiska saker man

boumlr veta naumlr man designar en mobil e-handel webbplats

1 Call-to-action knapparna foumlr smaring paring en mobilskaumlrm

Naumlr man designar webbsidor foumlr mobiler kan det ibland vara en utmaning att faring

allt att rymmas in Daumlrfoumlr brukar ocksaring webbdesigner minska de sk rdquocall to act-

ionrdquo knapparna Om anvaumlndaren maringste zooma in foumlr att klicka paring en knapp men

av misstag klickar paring en annan knapp kan det bli frustrerande foumlr dem och detta

leder sedan till att de laumlmnar sidan Daumlrfoumlr aumlr det mycket viktigt att designa knap-

parna och inneharingllet saring att anvaumlndarna laumltt naringr dem

2 Soumlkfunktionen ska alltid finnas med

Paring mobila e-handel webbplatser ska soumlkfunktionen alltid synas saring att man laumltt skall

kunna soumlka produkterna Laringt oss saumlga att kunden inte hittar produkten han soumlker

och vill anvaumlnda soumlkfunktionen Han letar och letar efter soumlkfunktionen utan re-

sultat Detta orsakar inte bara att kunden laumlmnar din sida men ocksaring kommer han

att beraumlttar det vidare aringt andra hur han upplevde din sida (Mehra 2015)

3 Laumltt att navigera

20

Det ska vara laumltt att navigera runt sidorna Anvaumlndarna ska veta var han aumlr och hur

han kommer vidare efter att han tex har valt produkten Menyerna foumlr katalo-

gerna ska vara laumltta att navigera Om menyerna foumlr katalogerna aumlr foumlrvirrande och

svaringra foumlr anvaumlndaren att hitta produkterna blir han laumltt irriterad Exemplar paring (fi-

gur 27) haumlr nedan visar att menyerna aumlr ganska foumlrvirrande paring vaumlnstra bilden me-

dan paring houmlgra sidan aumlr det klart och tydligt (Laya 2014)

Figur 27 Jaumlmfoumlrelse mellan en bra och daringlig navigation httpconversionxlcommake-mobile-convert

4 Ta de roliga ur shopping

Det vanligaste och stoumlrsta misstaget som de flesta foumlretag goumlr naumlr de designar foumlr

mobil e-handel aumlr att de foumlrsoumlker flytta kunderna fraringn shopping till koumlp Shopping

paring en stationaumlr dator goumlr det laumltt naumlr det oftast finns ett enormt antal produkter att

vaumllja mellan och det aumlr laumltt att blaumlddra runt Men foumlr mobiler aumlr det annat

Maringnga foumlretag foumlrsoumlker pressa ihop hela shopping-processen till smaring tabbar och

minska paring inneharingllet Som resultat kommer anvaumlndaren att kaumlnna sig paringtvingad

21

att goumlra snabba beslut paring inkoumlp Istaumlllet foumlr att ge anvaumlndarna en saringdan paringtvingad

upplevelse kan man istaumlllet locka anvaumlndarna med all information vi har att er-

bjuda

Det betyder inte att anvaumlndarna som besoumlker e-handeln med en smarttelefon inte

vill njuta av shoppingen saringsom de goumlr paring stationaumlra datorer Naumlr man designar en

mobil e-handel skall kunderna kunna faring njuta av shoppingen och jaumlmfoumlra mellan

olika produkter innan dem bestaumlmmer sig vilken produkt de vill koumlpa (Laya 2014)

ldquoBut we see many companies try to compress the whole shopping process into a

small number of taps The result is a mobile app or website that forces the user to

make a quick purchase decision rather than giving a great shopping experience

To the user it feels like the site switches from giving enticement to issuing de-

mandsrdquo

- Laya Peep 2014

5 Laringngsam uppladdningstid foumlr mobiler spelar en stor roll

Det aumlr mycket viktigt att haringlla sidstorleken saring liten som moumljligt saring att det aumlr snabbt

att ladda upp sidan

ldquoMobile users want to take quick action and also Google has reportedly started

including page speed for ranking websites in the search results so that makes it

even more important to have a lighter siterdquo

- Mehra Gagan 2015

Varingren 2014 rapporterade Radware (httpwwwradwarecomspring-sotu2014)

att majoriteten av besoumlkarna kommer att oumlverge webbplatsen efter att ha vaumlntat i

3 sekunder foumlr att ladda upp sidan (Laya 2014)

Om det finns mycket inneharingll paring en sida kan man som alternativ separera inne-

haringllet i olika flikar (Mehra 2015)

Jag har tagit ett exempel fraringn Amazoncom Paring produktsidan har ja valt en orange

vaumlska Foumlr att tex ytterligare laumlsa om produktbeskrivningen rdquoAbout this itemrdquo ser

22

jag en pil som aumlr paring houmlgra sidan (Figur 29) Naumlr jag trycker paring pilen eller laringdan

kommer jag till en annan sida daumlr jag kan laumlsa hela produktbeskrivningen (Figur

210) Paring det haumlr saumlttet inneharingller sidan all information man behoumlver men separe-

rade i olika flikar saring att det blir snabbare att ladda upp sidan

Figur 28 Produktsida paring amazoncom

23

Figur 29 Produktsida paring amazoncom

Figur 210 Produktsida paring amazoncom About this item

24

6 Misslyckade analyseringar av anvaumlndarna

Naumlr man bygger webbsidor aumlr det viktig att goumlra anvaumlndbarhetstest och analysera

kundernas beteende Hur anvaumlndarna kaumlnner sig naumlr de anvaumlnder sidan aumlr mycket

viktigt och avgoumlr hur bra din business kommer att rulla

Analyseringen aumlr den kritiska inputen foumlr designen Med analyseringen ser man

dels vilka mobila apparater anvaumlndarna anvaumlnder och om det aumlr naringgra svaringrigheter

och obekvaumlmligheter anvaumlndarna upplever vid anvaumlndningen Dessa faktorer aumlr

viktiga foumlr att saumlkerstaumllla om den mobila upplevelsen uppfyller behoven hos kon-

sumenterna Testet och analysen maringste goumlras kontinuerligt foumlr att vi skall kunna

saumlkerstaumllla att kunderna har det bekvaumlmt (Mehra 2015)

7 Mindre inneharingll foumlr mobilanvaumlndarna

E-handel webbplatser brukar goumlmma inneharingll foumlr att goumlra sidan mindre Sidan aumlr

i sjaumllva verket inte mindre men bara goumlmd foumlr anvaumlndarna som anvaumlnder sina

smarttelefoner Enligt Mehra Gagan aumlr det inte bra om det finns mindre inneharingll

foumlr mobilanvaumlndarna Oavsett med vilka enheter anvaumlndarna aumlr paring sidan boumlr det

finnas lika mycket inneharingll paring alla enheterna De flesta som handlar online brukar

aumlga flera enheter och med stor sannolikhet anvaumlnder de ocksaring andra enheter foumlr

att surfa Om inneharingllet inte ser likadant ut paring stationaumlra datorer och smarttelefo-

ner kan det orsaka daringlig anvaumlndarupplevelse foumlr anvaumlndaren Enligt Google an-

vaumlnder 90 av dem som handlar paring internet olika enheter Att begraumlnsa deras

anvaumlndning aumlr naringgonting som man boumlr undvika (Mehra 2015)

25

3 MOBILANPASSADE LOumlSNINGAR

Det finns maringnga olika loumlsningar att bygga sin webbplats med Det aumlr viktigt att komma

iharingg att mobila anvaumlndande oumlkar hela tiden Det staumlller nya krav paring webbdesign och an-

vaumlndargraumlnssnitt Anvaumlndarna foumlrvaumlntar sig idag att de ska kunna ta del av allt inneharingll paring

webben oavsett om de anvaumlnder en smarttelefon eller en surfplatta De mobilanpassade

loumlsningarna foumlr e-handel kan tex vara Responsiv design Adaptiv Design Mobilbutik

eller en mobil applikation

31 Adaptiv design

En adaptiv webbplats aumlr uppbyggd saring att den aumlr optimerad foumlr specifika skaumlrmstorlekar

Den anvaumlnder servern foumlr att upptaumlcka den enhet som anvaumlnds foumlr att visa webbplatsen

Byggande av webbplatsen med adaptiv metoden aumlr tidskraumlvande paring grund av behovet att

optimera sidan foumlr varje vald plattform front-end och back-end Innan man boumlrjar bygga

webbplatsen maringste man avgoumlra vilka alla plattformar webbplatsen kommer att optimeras

till Foumlrdel med adaptiv design aumlr att den har snabb uppladdningstid

rdquoCompared to Responsiv design adaptive web design is website-optimised for each

platform separately and makes use of the opportunities presented by the platform as

well as the models and functions It offers fast-loading pages due to the server detec-

tion device and browser sending data tailored for a particular devicerdquo

-Lubo Ruska 2013

Att vaumllja den raumltta loumlsningen handlar om att foumlrstaring vad maringlgruppen foumlrvaumlntar sig och vad

de behoumlver Eftersom foumlretaget 909jp inte aumlr en jaumltte stort foumlretag saringsom Ikea eller Ama-

zon som har oberaumlknat antal med produkter tycker jag att Responsiv design med Mobile

first metoden aumlr den mest effektiva metoden foumlr denna forskning

26

32 Responsiv design

Responsiv webbdesign aumlr ett av de populaumlraste saumltten att optimera en webbplats Re-

sponsiv webbdesign moumljliggoumlr att layouten foumlraumlndras beroende paring vilken skaumlrmstorlek

och skaumlrmupploumlsningen som anvaumlndarna har och beroende paring vilka funktioner som

webblaumlsaren stoumldjer (Responsive Design 2014)

Oberoende om anvaumlndarna anvaumlnder dator laumlsplatta eller sin mobiltelefon kommer sidan

att anpassa sig paring olika saumltt foumlr att anvaumlndarna vid alla tillfaumlllen ska ha en saring rik upplevelse

som moumljligt Man kan saumlga att en webbsida paring mindre skaumlrmar aumlr med ett annat ord en

krympande version av den stoumlrre skaumlrmstorleken

Inneharingllet saringsom kolumner och bilder paring webbsidan kommer automatiskt att anpassas

beroende paring skaumlrmstorleken Och detta aumlr paring grund av Grid systemet Allt inneharingll skall

haringllas inom ett Grid system Grid systemet skall skydda allt fraringn att bryta samman naumlr

sidan anvaumlnds paring olika skaumlrmstorlekar

Det finns 11 olika Grid storlekar tvaring kolumner tre kolumner fyra kolumner fem kolum-

ner sex kolumner sju kolumner aringtta kolumner nio kolumner tio kolumner 11 kolumner

och 12 kolumner Som exempel visar jag en figur av 12 kolumners Grid system (Swan

2014)

27

Figur 31 Ett exempel paring Grid system av 5 olika skaumlrmstorlekar (Phil Swan 2014)

Responsiv webbdesign fungerar med hjaumllp av HTML5 CSS media Query och Java-

Script Det bygger paring att webbutvecklare istaumlllet foumlr exakta storlekar maumltt i pixlar anger

sidelements storlekar i procent i jaumlmfoumlrelse med skaumlrmens storlek

Naumlr sidelementens storlekar aumlr i procent goumlr det att sidan blir flexibel och den anpassas

efter webblaumlsarens storlek medan fasta pixlar ger en scrollbar (rull-list) (Responsive De-

sign 2014)

33 Varfoumlr Responsiv design

Foumlrdelar med Responsiv design aumlr att den erbjuder en bra anvaumlndarupplevelse foumlr olika

enheter och skaumlrmstorlekar Tack vare den Responsiva designen har webbredaktoumlrer laumlt-

tare att hantera inneharingllet eftersom de bara har en version att hantera Ur en SEO synvin-

kel fungerar Responsiv design baumlttre eftersom den koncentrerar inneharingllet istaumlllet foumlr att

vattna ur det med maringnga URL foumlr samma inneharingll

28

Med en Responsiv design aumlr en webbplats laumlttare att hantera Att ha flera olika versioner

av en webbplats innebaumlr mera arbete Flera olika versioner av en webbplats innebaumlr sepa-

rata sidor att redigera och separata insatser foumlr soumlkmotoroptimering och separata soumlkmo-

torkampanjer Daumlrfoumlr aumlr det en stor foumlrdel att bygga en webbplats med den Responsiva

metoden

Med en Responsiv design kaumlnner anvaumlndarna baumlttre igen sidan baringde paring stationaumlra datorer

och mobiltelefoner Bygger man specifika webbplatser foumlr mobiler och surfplattor kan

det laumltt haumlnda att det blir olika information paring webbplatserna och att de struktureras olika

Laringt oss foumlrestaumllla oss att naringgon anvaumlnder sin mobiltelefon paring lunchen foumlr att leta efter en

flygbiljett fraringn Helsingfors till Tokyo Personen hittar en webbplats som har bra erbju-

dande och bestaumlmmer sig foumlr att fortsaumltta kolla naumlr han eller hon kommer hem Naumlr per-

sonen har kommit hem anvaumlnder hen datorn istaumlllet foumlr mobilen Om webbplatsen som

personen kollade paring lunchpausen var en Responsiv webbplats faringr personen en smidig och

bra upplevelse vid oumlvergaringngen fraringn den mobila webbplatsen till stationaumlr dator

(Lindahl 2014)

Det aumlr vaumlldigt viktigt att ha sin webbplats att optimerad till saring maringnga enheter som moumljligt

foumlr att ingen vet vilka kommer att vara framtidens enheter och daumlrfoumlr anses en webbplats

som anpassar sig till maringnga olika format vara den baumlsta loumlsningen Innan man kan boumlrja

med att designa en Responsiv webbplats maringste man veta vilka skaumlrmupploumlsningar och

storlekar det finns tillgaumlngliga och aumlr populaumlra idag Foumlr att kunna rikta till de olika skaumlr-

mupploumlsningarna med Media Queries har jag listat upp olika enheternas skaumlrmupploumls-

ningar i pixlar haumlr nedan i tabellen

ResolutionGrafisk array Enhet som anvaumlnder denna resolution skaumlrmstorlek i pixel-

taumltheten i pixlar

2880x1800 15-inch Apple MacBook Pro with Retina display

2560 x 1700 Google Chromebook Pixel

2560 x 1600 Samsung Google Nexus 10

13-inch Apple MacBook Pro with Retina display

29

2560 x 1440 27-inch Apple iMac 102 111 113 122 (Late 2009 -

2012)

1920 x 1080 HTC One Samsung

Sony Xperia Z amp Xperia ZL

Asus PadFone Infinity

Acer Aspire S5

Asus Zenbook Prime

1600 x 900 Apple Macbook Air

1366 x 768 Small desktoplaptop screen resolution

Asus VivoTab RT

Samsung N350

1280 x 1024 Standard desktop screen resolution

1280 x 800 Asus PadFone 2

Samsung Galaxy Note

Sony Xperia Tablet S

1280 x 720 Sony Xperia S

HTC Windows Phone 8X

HTC One mini

1136 x 640 Apple iPhone 5 5S amp 5C

Apple iPod Touch (5th generation)

960 x 640 Apple iPhone 4 amp 4S

Apple iPod Touch (4th generation)

854 x 480 Sony Xperia ray

Nokia N9

800 x 480 Nokia Lumia 510 amp 520

Samsung Galaxy I Galaxy S Galaxy S Plus Galaxy S Ad-

vance Galaxy SL Galaxy S Duos Galaxy Xcover 2 Galaxy

Beam Nexus S Captivate Glide amp Galaxy S III mini

HTC Desire X HTC Desire V Desire VC Desire VT De-

sire U amp Windows Phone 8S

30

LG Optimus 2X Optimus EX Optimus L5 II Optimus Q2

amp Optimus Black

T-Mobile G2x

Asus E600

620 x 480 Blackberry Bold 9900 amp Bold Touch 9930

Blackberry Torch 9810

LG Optimus Z

640 x 360 Sony Ericsson Vivaz amp Vivaz Pro

Nokia 500 amp 5800 XpressMusic

Nokia N8 N97 E7 and X6

480 x 320 Apple iPhone 3G amp 3GS

Samsung Galaxy Ace

320 x 240 Nokia E71

Blackberry Curve 9220 amp 9320

Sony Ericsson txt

Samsung Galaxy Y amp Galaxy Chat

Nokia Asha 501

Figur 32 Resolutions referenser paring olika enheter

31

4 VAD AumlR MOBILE FIRST

Mobile first metoden aumlr en metod och arbetsprocess foumlr webbdesigners som aumlr skapad av

Luke Wroblewski Naumlr man jobbar med ett projekt och designar strukturerar och imple-

menterar en webbplats aumlr Mobile first metoden man paringboumlrjar arbetet med Med metoden

menar Wroblewski att man foumlrst boumlrjar designa webbsidor fraringn de minsta enheterna

Figur 41 Mobile First att bygga webbsidan fraringn den minsta skaumlrmen till den stoumlrsta skaumlrmen

Wroblewski som har skapat Mobile First metoden understryker att metoden ska priorite-

ras daring man skapar anvaumlndarupplevelser

Det finns tre viktiga anledningar foumlr att utveckla foumlr Mobile First

Den foumlrbereder foumlr den stora utveckling och nya moumljligheter som uppkommer

inom det mobila omraringdet idag (836 av vaumlrldens befolkning anvaumlnder internet

paring sin smarttelefon 2015)

Den goumlr att vi blir tvungna att prioritera och fokusera varingrt inneharingll genom att ac-

ceptera de begraumlnsningar som aumlr foumlrenade med mobil design

32

och goumlr att vi kan leverera innovativa upplevelser genom att bygga utifraringn nya

funktioner som finns inbyggda i de mobila enheterna (bla GEO lokalisering)

En mobil webbplats behoumlver endast ha en mycket enkel layout och navigeringen ska vara

laumltt och effektiv

Naumlr man designar med Mobile first metoden tvingas man goumlra viktiga beslut om vad som

ska prioriteras Naumlr den optimerad design foumlr en liten skaumlrm visas paring en stoumlrre skaumlrm

kommer det att bli laumlttare att designa paring de stoumlrre skaumlrmarna Allt som ska goumlras aumlr daring

bara att fylla paring inneharingllet och designa saring att det aumlr grafiskt tilltalande och laumltt att hitta

inneharingllet (Wroblewski 2011)

41 Varfoumlr Mobile first

Vaumlrlden vi lever i idag aumlr inte mera som foumlr tio aringr sedan Allt runtom oss har utvecklats

speciellt mobiltelefonerna Tidigare anvaumlndes mobiltelefoner bara foumlr att skicka med-

delandet ringa och ta emot samtal Nu anvaumlnds den till foumlr att dels ta bilder video GPS

navigation foumlr vaumlgvisning och speciellt internetanvaumlndningen saringsom Google nyheter

Facebook Youtube och mycket mer Paring grund av det har ocksaring varingr livsstil foumlraumlndrats

Internetanvaumlndning idag har blivit allt vanligare Idag anvaumlnder vi naumltet i skolan paring jobbet

eller var och naumlr som helst bara man har en smarttelefon eller surfplatta och naumltet kopplat

Tidigare boumlrjade man bygga en webbplats fraringn den stoumlrsta skaumlrmen medan den mobila

sidan var en biprodukt Laringt oss saumlga att man har en webbplats med en rik grafisk layout

och ser stilig ut paring stationaumlra datorer Naumlr man skalar ner sidan foumlr att passa en mobilskaumlrm

kommer resultatet att vara en smaumlrta foumlr varingra oumlgon Paring den lilla mobilskaumlrmen kommer

det att vara olaumlsligt och svaringrt att anvaumlnda Foumlr att naring inneharingllet maringste du tom zooma in

och ut eller skrolla till houmlger och vaumlnster Det haumlr kommer att ge en negativ bild av ditt

foumlretag och anvaumlndarna kanske aldrig mera besoumlker din webbplats (Wroblewski 2011)

Ett bra exempel aumlr Tokyo Skytree webbplats som aumlnnu idag inte ha byggt in funktionalitet

och designen foumlr mindre skaumlrmupploumlsningar paring den engelska sidan

33

Tokyo Skytree aumlr vaumlrldens naumlst houmlgsta torn efter Burj Khalifa Tornet aumlr Japans houmlgsta

byggnadsverk med en houmljd paring 634 meter Den oumlppnades 22 maj 2012 och under det foumlrsta

aringret hade den 64 miljoner besoumlkare fraringn hela vaumlrlden Trots det har de laringtit bli att utveckla

den engelska webbsidan Paring bilden ser man att hemsidan ser exakt likadant ut paring stationaumlr

dator och paring mobilen

Figur 42 Hemsidan paring Tokyo Skytree paring stationaumlr datorskaumlrm

34

Figur 43 Hemsidan foumlr Tokyo Skytree Foumlrsta bilden visar hur det ser ut normalt Andra bilden visar naumlr man zoomar

in

Naumlr man foumlrsoumlker zooma in foumlr att laumlsa inneharingllet hoppar sidbalken (paring vaumlnstra sidan) paring

texten Det haumlr ger en mycket daringlig anvaumlndarupplevelse och kan ge fel bild av turistplat-

sen Ett annat fel paring sidan aumlr naumlr man vaumlljer spraringk till japanska ser sidan inte likadant ut

35

Figure 44 Hemsidan paring Tokyo Skytree paring japanska

Om du kan laumlsa japanska kommer du att undra varfoumlr det finns massor med information

och sidan ser mycket trevligare ut paring den japanska sidan Paring den internationella sidan

dvs engelska ser det inte lika trevligt ut och inneharingller inte allt som det goumlr paring den

japanska sidan Det aumlr som om den stoumlrsta maringlgruppen aumlr foumlr japanska turister och som

om de skulle inte bry sig om turister fraringn utlandet

Utoumlver det har de ocksaring byggt en mobilsida foumlr den japanska webbsidan Varfoumlr satsa bara

paring den japanska sidan och inte den engelska sidan naumlr maringlgruppen aumlr hela vaumlrlden

36

Figur 45 Mobil sidan paring Tokyo Skytree paring japanska

Vi lever i 2015 saring alla borde veta att det aumlr vaumlldigt viktig att ha en mobil webbplats som

erbjuder en bra anvaumlndarupplevelse paring alla spraringk som webbplatsen erbjuder Naumlr man har

sin sida paring flera spraringk och aumlndaring bestaumlmmer sig att bygga sidan ordentligt bara paring ett spraringk

kan anvaumlndarna faring en fel bild av foumlretaget I vaumlrsta fall kommer anvaumlndarna tycka att sidan

aumlr oparinglitligt och aringterkommer aldrig igen

Mobile first metoden aumlr daumlrfoumlr en mycket effektiv metod att bygga sin webbplats med

Man boumlrjar med att bygga sin webbplats fraringn den minsta skaumlrmen Man tvingas goumlra be-

slut om vad som ska absolut prioriteras Arbetsprocessen foumlr oss webbdesigners blir

mycket effektivare genom att foumlrst designa fraringn den minsta skaumlrmen och sedan foumlrflytta

oss till de stoumlrre skaumlrmarna Har man ett 6 kvadratmeters sovrum och foumlrsoumlker faring sin saumlng

skrivbord hylla klaumldskaringp och soffan att rymmas in aumlr det ganska utmanande Men naumlr

man boumlrjar med det mest utmanande i arbetsprocessen blir arbetet ocksaring mindre utma-

nande desto stoumlrre rum eller skaumlrm det blir (Wroblewski 2011)

37

5 909JP

909jp aumlr en elektronisk handel en moumlbelaffaumlr som saumlljer vaumlsterlaumlndska produkter Den

elektroniska butiken kommer att oumlppnas i Japan 2015 Deras foumlrvaumlntningar aumlr att faring in

en miljon dollar i foumlrsaumlljning per aringr I deras elektroniska moumlbelaffaumlr saumlljs bla stolar bord

soffor och lampor Maringlgruppen aumlr alla konsumenter mellan 18-60 aringringar

Japaner aumlr intresserade av vaumlsterlaumlndska produkter och livsstil men foumlr de flesta varor aumlr

designen knutna till deras egen kultur vilket goumlr dem mer intresserad Det aumlr ocksaring mycket

viktigt att ha sin hemsida paring japanska eftersom 99 av den japanska befolkningen foumlre-

drar att inte laumlsa inneharingllet paring andra spraringk (Khurana)

Japan aumlr ett land med vaumlrldens tredje stoumlrsta ekonomi paring 5 biljoner De har vaumlrldens ti-

onde stoumlrsta befolkning med ca 1271 miljoner invaringnare varav 70 av den totala befolk-

ningen anvaumlnder internet och 24 av dem anvaumlnder internet paring sin smarttelefon

(Khurana)

Viktigt med detta projekt aumlr att sikta aringt raumltt haringll och betjaumlna kunderna paring det baumlsta saumlttet

via webbplatsen Foumlr att kunna faringnga saring maringnga kunder som moumljligt aumlr det mycket viktigt

att designa en webbplats som aumlr anvaumlndarvaumlnlig stilig och laumltt att anvaumlnda (Wroblewski

2011)

Jag har daumlrfoumlr kommit underfund med att anvaumlnda Mobile first och Responsiv design

metoden foumlr att utveckla den mobila 909jp sidan Med tanke paring att det aumlr en Responsiv

design skall layouten paring den mobila versionen ocksaring passa in med de stoumlrre skaumlrmarna

naumlr sidan skalas upp Det aumlr dock viktigt poaumlngtera att jag endast kommer att koncentrera

mig paring den mobila designen och utveckla designen endast foumlr denna forskning

38

6 ANALYS AV DEN NYA DESIGNEN

Med hjaumllp av den tidigare designen paring 909jp och de kritiska punkterna jag har hittat under

forskningen har jag skapat en ny och foumlrbaumlttrad design av webbplatsen foumlr mobiler I det

haumlr kapitlet kommer jag att visa naringgra exempel paring den tidigare designen och jaumlmfoumlra den

med nya designen samt analysera arbetet

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger)

1 Call-to-action knapparna

Under hela arbetsprocessen har jag haft i minnet att navigeringar laumlnkar och knap-

parna ska vara tillraumlckligt stora att klicka paring I den tidigare designen har de stora

bilder paring kategorier vilket jag tycker aumlr en bra design att aringtervaumlnda

39

2 Soumlkfunktionen

Paring den tidigare versionen haumlr nedan ser man att soumlkfunktionen inte finns med

medan paring den nya designen ser man soumlkfunktionen genast naumlr man kommer till

sidan Som tidigare framfoumlrdes att soumlkfunktionen alltid ska synas saring att man laumltt

skall kunna soumlka fram produkterna Om soumlkfunktionen inte finns med eller aumlr svaringr

att hitta naumlr den behoumlvs kan det orsaka missnoumlje hos anvaumlndarna (Mehra Gagan

2015)

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp

Figur 63 Soumlkfunktionen paring den nya designen 909jp

40

3 Laumltt att navigera

Naumlr skaumlrmen aumlr liten aumlr det viktig att ha en enkel layout (Wroblewski 2011)

Jag har daumlrfor i den nya designen flyttat rdquoHemrdquo och rdquoBlogrdquo knapparna bort fraringn

den oumlvre menyn Hem-knappen finns nu i hamburgarmenyn paring vaumlnstra sidan me-

dan Blog-knappen finns i footer Detta goumlr att det ser mera organiserat ut

Figur 64 Gamla designen

Laringt oss foumlrflytta vidare till menyer foumlr kategorier Paring hemsidan har man tvaring alter-

nativ att naring kategorierna Foumlrsta aumlr den hamburgarmenyn knappen paring vaumlnstra si-

dan I menyn aumlr kategorierna indelade i fyra delar stolar lampor ergonomisk och

soffa amp middag Detta goumlr det laumltt och klart foumlr anvaumlndarna var produkterna finns

Eftersom vi bara har partiell uppmaumlrksamhet fraringn anvaumlndarna naumlr de aumlr paring sina

smarttelefoner har jag valt att saumltta in ikoner i menyn (Figur 65) Naumlr anvaumlndaren

bara anvaumlnder ena oumlgat foumlr att kolla paring mobilen och andra oumlgat foumlr naringgonting annat

ska den lilla skaumlrmen med webbplatsen kunna faringnga uppmaumlrksamheten samt un-

derlaumltta anvaumlndningen av webbplatsen (Wroblewski 2011)

41

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny

Andra menyn for kategorierna aumlr de fyra bilderna under Aeron chair slideshowen

Paring den tidigare designen ser man endast ett foumlnster av kategorierna som aumlr place-

rade i en kolumn som upprepas loggraumltt (Figur 66) Det haumlr goumlr att anvaumlndaren

maringste skrolla ner foumlr att se varenda kategori vilket kan orsaka obekvaumlmlighet Att

se flera kategorier paring samma skaumlrm sparar tid och anvaumlndaren kommer aumlven baumlttre

iharingg var sakerna finns Att ha bara rdquoenrdquo stor bild som syns paring skaumlrmen och vara

tvungen att skrolla ner foumlr att se naumlsta bild aumlr frustrerande Paring den nya designen

har jag tvaring rutor av kategorier bredvid varandra (Figur 66)

42

Figur 66 Kategorier paring den gamla designen (till vaumlnster) Kategorier paring den nya designen (till houmlger)

4 Ta det roliga ur shopping

Paring den nya designen straumlvar jag efter att erbjuda en bekvaumlm shopping-upplevelse

Naumlr anvaumlndarna besoumlker e-handeln med en smarttelefon foumlrvaumlntar hanhon sig

ocksaring att kunna ta del av allt inneharingll och goumlra jaumlmfoumlrelser med andra produkter

Jag har daumlrfoumlr i den nya designen pressat ihop laumlngden paring kolumnhoumljden som om-

ringar produkten Som resultat ser vi nu fyra produkter paring samma skaumlrm (Figur

67) I den tidigare designen ser vi en enda produkt paring en skaumlrm och foumlr att se

andra produkter maringste vi skrolla ner Paring det haumlr saumlttet har anvaumlndarna svaringrare att

jaumlmfoumlra produkterna (Laya 2014)

43

Figur 67 Tidigare produktsida (till vaumlnster) Ny produktsida (till houmlger)

I den tidigare designen ser vi ocksaring att det finns endast produktens bild produk-

tens namn koumlpvagnen och infoikonen Om man vill faring reda paring produktens inform-

ation maringste man klicka paring produktens bild eller paring infoikonen som foumlr oss direkt

till sjaumllva produktens sida Bara foumlr att man vill faring reda paring vad det aumlr foumlr produkt

foumlrs man vidare till en annan sida Det haumlr kan orsaka att kunden inte njuter totalt

av shoppingen och dessutom kan han inte jaumlmfoumlra produkterna naumlr han aumlr paring ka-

tegoriernas sida (Laya 2014)

Laringt oss hoppa vidare till den nya designen (Figur 68) Paring den nya designen har

jag satt in en kort detaljbeskrivning foumlr varje produkt Dessutom naumlr man klickar

paring infoikonen paring houmlgra sidan kommer man inte direkt till produktsidan utan det

kommer att dyka upp en inforuta som har en kort beskrivning paring produkten Om

anvaumlndaren aumlr intresserad av produkten kan han garing in till sjaumllva produktsida ge-

nom att klicka paring rdquoView productrdquo eller ocksaring paring produktbilden daumlr hanhon kan

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

9

Foumlr att lyckas med det maringste man ha en mycket bra design och funktionalitet paring webbsi-

dan I min uppsats kommer jag att fokusera paring design som byggs med Mobile first meto-

den Forskningsfraringgan i mitt examensarbete aumlr rdquoHur kan man baumlst utveckla en e-handel

webbplats foumlr mobilerrdquo

Arbetet skall vara till nytta foumlr webbdesigners och Online Media studerande som inte

tidigare har kunskaper inom e-handel foumlr mobiler och vill foumlrdjupa sig mera i det Arbetet

skall ocksaring vara till nytta foumlr dem som goumlr eller kommer att goumlra ett projekt inom e-han-

deln Det ska hjaumllpa dem oumlka foumlrstaringelse samt stoumlda dem i deras projekt

13 Avgraumlnsningar

I min uppsatts kommer det inte att staring om avancerad html och CSS kodning Jag kommer

fraumlmst att koncentrera mig paring strukturer och layouten och hur man baumlst kan uppnaring den

baumlsta anvaumlndarupplevelsen inom mobil e-handel Jag kommer inte att goumlra anvaumlndarbar-

hetstest men med hjaumllp av teorierna hittar jag de mest kritiska punkterna foumlr att kunna

goumlra en ny design till min fallstudie

14 Metod

Som metod kommer jag att undersoumlka strukturen layouten och anvaumlndarupplevelser foumlr

mobil e-handel i allmaumlnhet Forskningsmetoden paringminner naumlrmast om den vetenskapliga

fallstudiens metod

Metoden innebaumlr en plan foumlr att samla in organisera och integrera information och den

resulterar i ett speciellt forskningsresultat Jag kommer att anvaumlnda boumlckerna Ethan

Marcotte Responsive web design (2011) Wroblewski Luke Mobile First (2011) och

Karen McGrane Content strategy for Mobile (2012) Som material kommer jag ocksaring att

anvaumlnda kaumlllor fraringn naumltet och andra bocker

Med hjaumllp av de kritiska punkter jag hittar fraringn kaumlllor kommer jag att anvaumlnda som metod

foumlr att vidareutveckla designen foumlr den mobila e-handel webbplatsen (909jp) jag har som

fallstudie

10

Med hjaumllp av undersoumlkningen om e-handel foumlr mobiler kommer jag att veta vilka saker

det ska finnas paring sidan saringsom kategorier foumlr produkter kundvagn incheckning osv

15 Begrepp

SEO aumlr foumlrkortning fraringn engelska rdquoSearch Engine Optimizationrdquo och oumlversaumltts till Soumlk-

motoroptimering paring svenska Soumlkmotoroptimeringen anvaumlnds foumlr att faring en webbplats att

synas saring houmlgt upp som moumljligt bland resultaten vid soumlkningar i soumlkmotorer (Belinger

2014)

Call to action knapparna aumlr knappar som leder anvaumlndarna vidare till en viss sida Var-

foumlr man kallar det foumlr rdquoCall to actionrdquo aumlr for att knapparna ska kunna faringnga uppmaumlrksam-

heten paring anvaumlndarna foumlr att klicka sig vidare Knapparna kan vara tex meny- knappar

eller bilder som anvaumlnds som en laumlnk till en annan sida (Mehra 2015)

Hamburgarmenyn aumlr menyn som anvaumlnds paring webbplatsen foumlr smarttelefoner Haumlr aumlr

exempel paring menyn

Media Queries aumlr en CSS3-modul som tillaringter inneharingll rendering att anpassa sig till

olika skaumlrmupploumlsningar saringsom smarttelefoner surfplattor och datorskaumlrmar Foumlr att

kunna faring sin webbplats att anpassa sig till olika skaumlrmupploumlsningar naumlr skaumlrmen blir

mindre anvaumlnder man Media Queries i CSS3 (Wikipedia)

11

2 VAD AumlR E-HANDEL

E-handel fungerar genom att ett foumlretag eller individuell person koumlper saumlljer ut eller byter

produkter information eller tjaumlnst via internet eller andra datornaumltverk (Wikipedia)

En stor del av e-handeln aumlger rum i de saring kallade naumltbutikerna Naumltbutiker har ett lager

och en webbplats daumlr kunden goumlr sina bestaumlllningar Paring webbplatsen indelas varorna i

olika kategorier saring att anvaumlndarna paring sidan kan laumltt hitta varorna Foumlr att hitta varorna

snabbare brukar de flesta naumltbutikerna ocksaring ha en soumlkfunktion Paring sidan har anvaumlndarna

moumljligheter att saumltta produktenprodukter i kundvagnen och sedan fortsaumltta shoppa tills

man aumlr klar Vid bestaumlllningen garingr man bara till kassan daumlr anvaumlndaren kommer att vaumllja

transportsaumltt ange kontakt- och leveransuppgifter och vaumllja betalningsmetod Betalnings-

metoden aumlr vanligtvis kreditkort eller Paypal

Fakturan daumlrmed brukar inte ges till kunden daring det skulle innebaumlra oumlkade risker foumlr be-

draumlgerier foumlr naumltbutikerna Foumlr fakturakoumlp behoumlver kundens identitet faststaumlllas paring ett saumlk-

rare saumltt

Naumlr betalningen har gjorts levereras varorna vanligtvis som postpaket eller direkt leverans

till doumlrren foumlr stoumlrre varor saringsom moumlbler (E-handel 2015)

ldquoE-handeln fortsatter att vaxa Nastan hela tillvaxten sker numera i mobilen Det ar

inte priset som gor att vi handlar pa natet De viktigaste skalen ar att det ar smidigare

och att utbudet ar storre an i traditionella butikerrdquo

-Larsson Daniel 2014

21 Mobil e-handel

Mobil e-handel (m-handel) aumlr en term som beskriver en foumlrsaumlljningstransaktion som an-

vaumlnder traringdloumlsa elektroniska enheter saringsom smarttelefoner och surfplattor En mobil e-

handel webbplats fungerar i alla smarttelefoner och surfplattor och aumlr anpassad samt op-

timerad foumlr mobilens webblaumlsare

12

Foumlr att naring den mobila webbplatsen behoumlver man inte skriva in mobil adress eller aktivt

vaumllja att visa den mobila butiken Den mobila webbplatsen av en e-handel kaumlnner auto-

matiskt igen om man anvaumlnder en dator eller en mobil och visar daring upp en optimerad

version som anpassas efter anvaumlndarnas behov (Nordisk e-handel)

I den mobila versionen av e-handel brukar kategorier bestaring av endast en sida Foumlr att se

paring de resterande produkter i kategorierna kan man trycka paring rdquoVisa flerrdquo som man oftast

hittar laumlngst ner som en knapp eller laumlnk Detta goumlr uppladdningstiden paring sidan betydligt

snabbare och anvaumlndarna slipper vaumlnta Vaumlntande kan leda till avbrutna koumlp

Foumlrutom kategorier produkter och kassa i sjaumllvbetjaumlningsbutik foumlr kunder med produkter

som aumlr optimerade foumlr mobilanvaumlndarna aumlr ocksaring betalvaumlxeln foumlr kortbetalning specialan-

passad Detta goumlr det snabbare och enklare foumlr anvaumlndarnakunderna att avsluta sina koumlp

och betala med sina betalningskort (Mobil e-handel 2012)

22 Varfoumlr handla med mobil

Foumlr att kunna designa en ny mobil e-handel foumlr en kund aumlr det foumlrst jaumltte viktigt att veta

varfoumlr anvaumlndarna vaumlljer att koumlpa produktertjaumlnster med en smarttelefon eller surfplattor

Med hjaumllp av DIBS aringrliga rapport som gjordes i Sverige 2014 visas det att den viktigaste

orsaken till att anvaumlndarna handlar med sin mobil aumlr att det aumlr smidigare och sparar tid

Samtidigt aumlr det viktigt att inte heller gloumlmma bort att andra handlingsmotiv lyfts fram

som viktiga av mer aumln haumllften av alla tillfraringgade E-handel aumlr bra paring maringnga olika saumltt Den

moumlter konsumenternas behov och oumlnskemaringl i stor grad

Foumlr den nordiska befolkningen ska tidsbesparing enligt rapporten vara allra viktigaste foumlr

35-44 aringringar och minst viktig foumlr de yngsta aringldersgruppen 15-24 aringr som foumlr vilka laringga

priser istaumlllet spelar mer roll Utoumlver laringga priser drivs ungdomarna ocksaring oftast av det

stoumlrre utbudet som naumltbutikerna erbjuder paring internet

13

Figur 21 Viktigaste skaumllet att naumlthandel sparar tid

Enligt statiken visar det viktigaste skaumllet varfoumlr man anvaumlnder mobilen foumlr e-handel

64 saumlger att det sparar tid och aumlr smidigt

58 saumlger att det aumlr foumlrmaringnligare

56 saumlger att det aumlr enklare att jaumlmfoumlra mellan olika produkter

43 saumlger att det finns stoumlrre produktutbud

52 saumlger att det aumlr alltid oumlppet

23 Antalet kop okar pa mobilen

Enligt DIBS aringrliga rapport (2014) om mobil e-handel oumlkar antalet mobila e-handel kon-

sumenter hela tiden Nedan finns en figur om antalet under aringr 2013-2014 Figuren visar

hur maringnga garingnger konsumenterna har handlat varortjaumlnster med en smarttelefon eller

surfplattor under de senaste sex maringnaderna Naumlthandeln paring mobila enheterna oumlkar sakta

med saumlkert De som har handlat paring naumltet foumlrut handlar nu ocksaring allt mer Andelen stor-

konsumenter de som handlat minst 25 garingnger paring ett halvaringr har nu foumlrdubblats

De som handlade en eller tvaring garingnger har minskat fraringn 42 procent aringr 2013 till 35 procent

aringr 2014 vilket goumlr det till 17 procent mindre I snitt handlar konsumenter 1114 garingnger

per aringr med sin smarttelefon eller surfplattor

14

Figur 22 Antal oumlkar paring mobilen

Mobilen finns alltid naumlrmast

Enligt rapporten ska den vanligaste orsaken till varfoumlr anvaumlndarna vaumlljer att handla fraringn

mobilen vara foumlr att mobilen fanns naumlrmast till hands vid koumlpoumlgonblicket

Figur 23Varfoumlr handlade du med smarttelefon

15

60 saumlger att smarttelefon fanns naumlrmaste till hands vid koumlptillfaumlllet

27 anvaumlnder en app foumlr att handla online

17 oumlppnade ett erbjudande via e-mail i sin smarttelefon

5 har ingen dator

3 var i butik och koumlpte varan paring naumltet istaumlllet

4 hade ingen internetanslutning

3 scannade en QR-kod

Vad handlar vi med mobil

Foumlr att snabbt faringr en inblick i vad konsumenterna handlar med mobil ser vi haumlr nedan

(Figur 24) Konsumenter handlar mer av naumlstan allt Kunder som spenderar mer aumln 500

euro med smarttelefoner eller surfplattor koumlper i foumlrsta hand resor medan de som handlar

foumlr mindre aumln 100 euro laumlgger pengar paring media

Figur 24 Mobilt handlar vi mer av naumlstan allt

16

24 Bra mobila e-handel webbplatser

En bra mobil webbplats aumlr naumlr sidan aumlr enkel att anvaumlnda fast man bara anvaumlnder ett oumlga

och en tumme

rdquoWhen reflecting on a lot of mobile usage patterns I like to imagine people as rdquoone

eyeball and one thumb One thumb because they are likely to be holding their mobile

in one hand and using a single thumb to control it one eyeball because in many loca-

tions where mobile devices are use we only have peoples partial attentionrdquo

-Wroblewski Luke 2011)

Man kan aldrig exakt veta var anvaumlndaren befinner sig naumlr han surfar med sin smarttele-

fon Han kanske befinner sig i vardagsrummet foumlr att sloumltt surfa efter en ny lampa medan

han kollar paring Tvn Kanske anvaumlndaren sitter hemma och har en stadig wifi eller kanske

paring sommarstugan och har 3G4G som byter mellan olika naumltverk osv (Thoren 2012)

Naumlr anvaumlndaren goumlr naringgonting samtidigt som han surfar paring webbplatsen har han bara den

partiella uppmaumlrksamheten Daumlrfoumlr aumlr det betydligt fler kontexter som man maringste ta haumln-

syn till naumlr man designar webbplatser foumlr mobiler (Wroblewski 2011)

Haumlr aumlr tvaring bra exempel av lyckad e-handel foumlretag i vaumlrlden De har inte lyckats bra bara

med att saumllja produkterna utan ocksaring med designen Haumlr nedan aumlr bilderna paring mobil de-

signen av Rakutencom och Amazoncom

17

Figur 25 Hemsida paring rakutencom foumlr mobiler

Direkt naumlr man kommer paring sidan hittar man inloggningen koumlpvagnen soumlkfunktionen

menyn och speciellt de stora bilderna paring katalogerna vilket aumlr jaumltte laumltta att klicka paring

Fastaumln mobilskaumlrmen aumlr liten goumlr den haumlr det bara inte laumltt att navigera runt sidorna utan

ocksaring trevligt att vara paring sidan

Amazoncom har ocksaring lyckats bra med designen Naumlr man kommer till sidan ser man

direkt Sign in Department Wish List Deals och Search funktionen Under search funkt-

ionen ser man genast en inspirerande reklam som paringminner oss om att det aumlr varingr

rdquoSPRINGacuteS PERFECT PANTSrdquo Fast sidan har jaumltte maringnga objekt i den aumlr det trots allt

18

jaumltte laumltt att navigera runt sidorna Man tappar inte bort sig och man hittar laumltt det som

man aumlr ute efter

Figur 26 Hemsida paring amazoncom foumlr mobiler

19

25 Kritiska punkterna foumlr bra mobil design paring e-handel

Naumlr man handlar med en mindre skaumlrm aumlr det mera utmanande eftersom skaumlrmen aumlr liten

och anvaumlndarna brukar inte ha tillraumlckligt med taringlamod att sitta och soumlka naringgonting foumlr

laumlnge fraringn en liten skaumlrm Daumlrfoumlr aumlr det viktigt att veta vilka saker man boumlr beakta naumlr

man designar en mobil e-handel I det haumlr stycket kommer jag att lista upp sakerna man

boumlr veta naumlr man designar en mobil e-handel webbplats

Naumlr man handlar med en mindre skaumlrm aumlr det mera utmanande eftersom skaumlrmen aumlr liten

och anvaumlndarna brukar inte ha tillraumlckligt med taringlamod att sitta och soumlka naringgonting foumlr

laumlnge paring en liten skaumlrm Daumlrfoumlr aumlr det viktigt att veta vilka saker man boumlr beakta naumlr man

designar en mobil e-handel I det haumlr stycket kommer jag att lista upp kritiska saker man

boumlr veta naumlr man designar en mobil e-handel webbplats

1 Call-to-action knapparna foumlr smaring paring en mobilskaumlrm

Naumlr man designar webbsidor foumlr mobiler kan det ibland vara en utmaning att faring

allt att rymmas in Daumlrfoumlr brukar ocksaring webbdesigner minska de sk rdquocall to act-

ionrdquo knapparna Om anvaumlndaren maringste zooma in foumlr att klicka paring en knapp men

av misstag klickar paring en annan knapp kan det bli frustrerande foumlr dem och detta

leder sedan till att de laumlmnar sidan Daumlrfoumlr aumlr det mycket viktigt att designa knap-

parna och inneharingllet saring att anvaumlndarna laumltt naringr dem

2 Soumlkfunktionen ska alltid finnas med

Paring mobila e-handel webbplatser ska soumlkfunktionen alltid synas saring att man laumltt skall

kunna soumlka produkterna Laringt oss saumlga att kunden inte hittar produkten han soumlker

och vill anvaumlnda soumlkfunktionen Han letar och letar efter soumlkfunktionen utan re-

sultat Detta orsakar inte bara att kunden laumlmnar din sida men ocksaring kommer han

att beraumlttar det vidare aringt andra hur han upplevde din sida (Mehra 2015)

3 Laumltt att navigera

20

Det ska vara laumltt att navigera runt sidorna Anvaumlndarna ska veta var han aumlr och hur

han kommer vidare efter att han tex har valt produkten Menyerna foumlr katalo-

gerna ska vara laumltta att navigera Om menyerna foumlr katalogerna aumlr foumlrvirrande och

svaringra foumlr anvaumlndaren att hitta produkterna blir han laumltt irriterad Exemplar paring (fi-

gur 27) haumlr nedan visar att menyerna aumlr ganska foumlrvirrande paring vaumlnstra bilden me-

dan paring houmlgra sidan aumlr det klart och tydligt (Laya 2014)

Figur 27 Jaumlmfoumlrelse mellan en bra och daringlig navigation httpconversionxlcommake-mobile-convert

4 Ta de roliga ur shopping

Det vanligaste och stoumlrsta misstaget som de flesta foumlretag goumlr naumlr de designar foumlr

mobil e-handel aumlr att de foumlrsoumlker flytta kunderna fraringn shopping till koumlp Shopping

paring en stationaumlr dator goumlr det laumltt naumlr det oftast finns ett enormt antal produkter att

vaumllja mellan och det aumlr laumltt att blaumlddra runt Men foumlr mobiler aumlr det annat

Maringnga foumlretag foumlrsoumlker pressa ihop hela shopping-processen till smaring tabbar och

minska paring inneharingllet Som resultat kommer anvaumlndaren att kaumlnna sig paringtvingad

21

att goumlra snabba beslut paring inkoumlp Istaumlllet foumlr att ge anvaumlndarna en saringdan paringtvingad

upplevelse kan man istaumlllet locka anvaumlndarna med all information vi har att er-

bjuda

Det betyder inte att anvaumlndarna som besoumlker e-handeln med en smarttelefon inte

vill njuta av shoppingen saringsom de goumlr paring stationaumlra datorer Naumlr man designar en

mobil e-handel skall kunderna kunna faring njuta av shoppingen och jaumlmfoumlra mellan

olika produkter innan dem bestaumlmmer sig vilken produkt de vill koumlpa (Laya 2014)

ldquoBut we see many companies try to compress the whole shopping process into a

small number of taps The result is a mobile app or website that forces the user to

make a quick purchase decision rather than giving a great shopping experience

To the user it feels like the site switches from giving enticement to issuing de-

mandsrdquo

- Laya Peep 2014

5 Laringngsam uppladdningstid foumlr mobiler spelar en stor roll

Det aumlr mycket viktigt att haringlla sidstorleken saring liten som moumljligt saring att det aumlr snabbt

att ladda upp sidan

ldquoMobile users want to take quick action and also Google has reportedly started

including page speed for ranking websites in the search results so that makes it

even more important to have a lighter siterdquo

- Mehra Gagan 2015

Varingren 2014 rapporterade Radware (httpwwwradwarecomspring-sotu2014)

att majoriteten av besoumlkarna kommer att oumlverge webbplatsen efter att ha vaumlntat i

3 sekunder foumlr att ladda upp sidan (Laya 2014)

Om det finns mycket inneharingll paring en sida kan man som alternativ separera inne-

haringllet i olika flikar (Mehra 2015)

Jag har tagit ett exempel fraringn Amazoncom Paring produktsidan har ja valt en orange

vaumlska Foumlr att tex ytterligare laumlsa om produktbeskrivningen rdquoAbout this itemrdquo ser

22

jag en pil som aumlr paring houmlgra sidan (Figur 29) Naumlr jag trycker paring pilen eller laringdan

kommer jag till en annan sida daumlr jag kan laumlsa hela produktbeskrivningen (Figur

210) Paring det haumlr saumlttet inneharingller sidan all information man behoumlver men separe-

rade i olika flikar saring att det blir snabbare att ladda upp sidan

Figur 28 Produktsida paring amazoncom

23

Figur 29 Produktsida paring amazoncom

Figur 210 Produktsida paring amazoncom About this item

24

6 Misslyckade analyseringar av anvaumlndarna

Naumlr man bygger webbsidor aumlr det viktig att goumlra anvaumlndbarhetstest och analysera

kundernas beteende Hur anvaumlndarna kaumlnner sig naumlr de anvaumlnder sidan aumlr mycket

viktigt och avgoumlr hur bra din business kommer att rulla

Analyseringen aumlr den kritiska inputen foumlr designen Med analyseringen ser man

dels vilka mobila apparater anvaumlndarna anvaumlnder och om det aumlr naringgra svaringrigheter

och obekvaumlmligheter anvaumlndarna upplever vid anvaumlndningen Dessa faktorer aumlr

viktiga foumlr att saumlkerstaumllla om den mobila upplevelsen uppfyller behoven hos kon-

sumenterna Testet och analysen maringste goumlras kontinuerligt foumlr att vi skall kunna

saumlkerstaumllla att kunderna har det bekvaumlmt (Mehra 2015)

7 Mindre inneharingll foumlr mobilanvaumlndarna

E-handel webbplatser brukar goumlmma inneharingll foumlr att goumlra sidan mindre Sidan aumlr

i sjaumllva verket inte mindre men bara goumlmd foumlr anvaumlndarna som anvaumlnder sina

smarttelefoner Enligt Mehra Gagan aumlr det inte bra om det finns mindre inneharingll

foumlr mobilanvaumlndarna Oavsett med vilka enheter anvaumlndarna aumlr paring sidan boumlr det

finnas lika mycket inneharingll paring alla enheterna De flesta som handlar online brukar

aumlga flera enheter och med stor sannolikhet anvaumlnder de ocksaring andra enheter foumlr

att surfa Om inneharingllet inte ser likadant ut paring stationaumlra datorer och smarttelefo-

ner kan det orsaka daringlig anvaumlndarupplevelse foumlr anvaumlndaren Enligt Google an-

vaumlnder 90 av dem som handlar paring internet olika enheter Att begraumlnsa deras

anvaumlndning aumlr naringgonting som man boumlr undvika (Mehra 2015)

25

3 MOBILANPASSADE LOumlSNINGAR

Det finns maringnga olika loumlsningar att bygga sin webbplats med Det aumlr viktigt att komma

iharingg att mobila anvaumlndande oumlkar hela tiden Det staumlller nya krav paring webbdesign och an-

vaumlndargraumlnssnitt Anvaumlndarna foumlrvaumlntar sig idag att de ska kunna ta del av allt inneharingll paring

webben oavsett om de anvaumlnder en smarttelefon eller en surfplatta De mobilanpassade

loumlsningarna foumlr e-handel kan tex vara Responsiv design Adaptiv Design Mobilbutik

eller en mobil applikation

31 Adaptiv design

En adaptiv webbplats aumlr uppbyggd saring att den aumlr optimerad foumlr specifika skaumlrmstorlekar

Den anvaumlnder servern foumlr att upptaumlcka den enhet som anvaumlnds foumlr att visa webbplatsen

Byggande av webbplatsen med adaptiv metoden aumlr tidskraumlvande paring grund av behovet att

optimera sidan foumlr varje vald plattform front-end och back-end Innan man boumlrjar bygga

webbplatsen maringste man avgoumlra vilka alla plattformar webbplatsen kommer att optimeras

till Foumlrdel med adaptiv design aumlr att den har snabb uppladdningstid

rdquoCompared to Responsiv design adaptive web design is website-optimised for each

platform separately and makes use of the opportunities presented by the platform as

well as the models and functions It offers fast-loading pages due to the server detec-

tion device and browser sending data tailored for a particular devicerdquo

-Lubo Ruska 2013

Att vaumllja den raumltta loumlsningen handlar om att foumlrstaring vad maringlgruppen foumlrvaumlntar sig och vad

de behoumlver Eftersom foumlretaget 909jp inte aumlr en jaumltte stort foumlretag saringsom Ikea eller Ama-

zon som har oberaumlknat antal med produkter tycker jag att Responsiv design med Mobile

first metoden aumlr den mest effektiva metoden foumlr denna forskning

26

32 Responsiv design

Responsiv webbdesign aumlr ett av de populaumlraste saumltten att optimera en webbplats Re-

sponsiv webbdesign moumljliggoumlr att layouten foumlraumlndras beroende paring vilken skaumlrmstorlek

och skaumlrmupploumlsningen som anvaumlndarna har och beroende paring vilka funktioner som

webblaumlsaren stoumldjer (Responsive Design 2014)

Oberoende om anvaumlndarna anvaumlnder dator laumlsplatta eller sin mobiltelefon kommer sidan

att anpassa sig paring olika saumltt foumlr att anvaumlndarna vid alla tillfaumlllen ska ha en saring rik upplevelse

som moumljligt Man kan saumlga att en webbsida paring mindre skaumlrmar aumlr med ett annat ord en

krympande version av den stoumlrre skaumlrmstorleken

Inneharingllet saringsom kolumner och bilder paring webbsidan kommer automatiskt att anpassas

beroende paring skaumlrmstorleken Och detta aumlr paring grund av Grid systemet Allt inneharingll skall

haringllas inom ett Grid system Grid systemet skall skydda allt fraringn att bryta samman naumlr

sidan anvaumlnds paring olika skaumlrmstorlekar

Det finns 11 olika Grid storlekar tvaring kolumner tre kolumner fyra kolumner fem kolum-

ner sex kolumner sju kolumner aringtta kolumner nio kolumner tio kolumner 11 kolumner

och 12 kolumner Som exempel visar jag en figur av 12 kolumners Grid system (Swan

2014)

27

Figur 31 Ett exempel paring Grid system av 5 olika skaumlrmstorlekar (Phil Swan 2014)

Responsiv webbdesign fungerar med hjaumllp av HTML5 CSS media Query och Java-

Script Det bygger paring att webbutvecklare istaumlllet foumlr exakta storlekar maumltt i pixlar anger

sidelements storlekar i procent i jaumlmfoumlrelse med skaumlrmens storlek

Naumlr sidelementens storlekar aumlr i procent goumlr det att sidan blir flexibel och den anpassas

efter webblaumlsarens storlek medan fasta pixlar ger en scrollbar (rull-list) (Responsive De-

sign 2014)

33 Varfoumlr Responsiv design

Foumlrdelar med Responsiv design aumlr att den erbjuder en bra anvaumlndarupplevelse foumlr olika

enheter och skaumlrmstorlekar Tack vare den Responsiva designen har webbredaktoumlrer laumlt-

tare att hantera inneharingllet eftersom de bara har en version att hantera Ur en SEO synvin-

kel fungerar Responsiv design baumlttre eftersom den koncentrerar inneharingllet istaumlllet foumlr att

vattna ur det med maringnga URL foumlr samma inneharingll

28

Med en Responsiv design aumlr en webbplats laumlttare att hantera Att ha flera olika versioner

av en webbplats innebaumlr mera arbete Flera olika versioner av en webbplats innebaumlr sepa-

rata sidor att redigera och separata insatser foumlr soumlkmotoroptimering och separata soumlkmo-

torkampanjer Daumlrfoumlr aumlr det en stor foumlrdel att bygga en webbplats med den Responsiva

metoden

Med en Responsiv design kaumlnner anvaumlndarna baumlttre igen sidan baringde paring stationaumlra datorer

och mobiltelefoner Bygger man specifika webbplatser foumlr mobiler och surfplattor kan

det laumltt haumlnda att det blir olika information paring webbplatserna och att de struktureras olika

Laringt oss foumlrestaumllla oss att naringgon anvaumlnder sin mobiltelefon paring lunchen foumlr att leta efter en

flygbiljett fraringn Helsingfors till Tokyo Personen hittar en webbplats som har bra erbju-

dande och bestaumlmmer sig foumlr att fortsaumltta kolla naumlr han eller hon kommer hem Naumlr per-

sonen har kommit hem anvaumlnder hen datorn istaumlllet foumlr mobilen Om webbplatsen som

personen kollade paring lunchpausen var en Responsiv webbplats faringr personen en smidig och

bra upplevelse vid oumlvergaringngen fraringn den mobila webbplatsen till stationaumlr dator

(Lindahl 2014)

Det aumlr vaumlldigt viktigt att ha sin webbplats att optimerad till saring maringnga enheter som moumljligt

foumlr att ingen vet vilka kommer att vara framtidens enheter och daumlrfoumlr anses en webbplats

som anpassar sig till maringnga olika format vara den baumlsta loumlsningen Innan man kan boumlrja

med att designa en Responsiv webbplats maringste man veta vilka skaumlrmupploumlsningar och

storlekar det finns tillgaumlngliga och aumlr populaumlra idag Foumlr att kunna rikta till de olika skaumlr-

mupploumlsningarna med Media Queries har jag listat upp olika enheternas skaumlrmupploumls-

ningar i pixlar haumlr nedan i tabellen

ResolutionGrafisk array Enhet som anvaumlnder denna resolution skaumlrmstorlek i pixel-

taumltheten i pixlar

2880x1800 15-inch Apple MacBook Pro with Retina display

2560 x 1700 Google Chromebook Pixel

2560 x 1600 Samsung Google Nexus 10

13-inch Apple MacBook Pro with Retina display

29

2560 x 1440 27-inch Apple iMac 102 111 113 122 (Late 2009 -

2012)

1920 x 1080 HTC One Samsung

Sony Xperia Z amp Xperia ZL

Asus PadFone Infinity

Acer Aspire S5

Asus Zenbook Prime

1600 x 900 Apple Macbook Air

1366 x 768 Small desktoplaptop screen resolution

Asus VivoTab RT

Samsung N350

1280 x 1024 Standard desktop screen resolution

1280 x 800 Asus PadFone 2

Samsung Galaxy Note

Sony Xperia Tablet S

1280 x 720 Sony Xperia S

HTC Windows Phone 8X

HTC One mini

1136 x 640 Apple iPhone 5 5S amp 5C

Apple iPod Touch (5th generation)

960 x 640 Apple iPhone 4 amp 4S

Apple iPod Touch (4th generation)

854 x 480 Sony Xperia ray

Nokia N9

800 x 480 Nokia Lumia 510 amp 520

Samsung Galaxy I Galaxy S Galaxy S Plus Galaxy S Ad-

vance Galaxy SL Galaxy S Duos Galaxy Xcover 2 Galaxy

Beam Nexus S Captivate Glide amp Galaxy S III mini

HTC Desire X HTC Desire V Desire VC Desire VT De-

sire U amp Windows Phone 8S

30

LG Optimus 2X Optimus EX Optimus L5 II Optimus Q2

amp Optimus Black

T-Mobile G2x

Asus E600

620 x 480 Blackberry Bold 9900 amp Bold Touch 9930

Blackberry Torch 9810

LG Optimus Z

640 x 360 Sony Ericsson Vivaz amp Vivaz Pro

Nokia 500 amp 5800 XpressMusic

Nokia N8 N97 E7 and X6

480 x 320 Apple iPhone 3G amp 3GS

Samsung Galaxy Ace

320 x 240 Nokia E71

Blackberry Curve 9220 amp 9320

Sony Ericsson txt

Samsung Galaxy Y amp Galaxy Chat

Nokia Asha 501

Figur 32 Resolutions referenser paring olika enheter

31

4 VAD AumlR MOBILE FIRST

Mobile first metoden aumlr en metod och arbetsprocess foumlr webbdesigners som aumlr skapad av

Luke Wroblewski Naumlr man jobbar med ett projekt och designar strukturerar och imple-

menterar en webbplats aumlr Mobile first metoden man paringboumlrjar arbetet med Med metoden

menar Wroblewski att man foumlrst boumlrjar designa webbsidor fraringn de minsta enheterna

Figur 41 Mobile First att bygga webbsidan fraringn den minsta skaumlrmen till den stoumlrsta skaumlrmen

Wroblewski som har skapat Mobile First metoden understryker att metoden ska priorite-

ras daring man skapar anvaumlndarupplevelser

Det finns tre viktiga anledningar foumlr att utveckla foumlr Mobile First

Den foumlrbereder foumlr den stora utveckling och nya moumljligheter som uppkommer

inom det mobila omraringdet idag (836 av vaumlrldens befolkning anvaumlnder internet

paring sin smarttelefon 2015)

Den goumlr att vi blir tvungna att prioritera och fokusera varingrt inneharingll genom att ac-

ceptera de begraumlnsningar som aumlr foumlrenade med mobil design

32

och goumlr att vi kan leverera innovativa upplevelser genom att bygga utifraringn nya

funktioner som finns inbyggda i de mobila enheterna (bla GEO lokalisering)

En mobil webbplats behoumlver endast ha en mycket enkel layout och navigeringen ska vara

laumltt och effektiv

Naumlr man designar med Mobile first metoden tvingas man goumlra viktiga beslut om vad som

ska prioriteras Naumlr den optimerad design foumlr en liten skaumlrm visas paring en stoumlrre skaumlrm

kommer det att bli laumlttare att designa paring de stoumlrre skaumlrmarna Allt som ska goumlras aumlr daring

bara att fylla paring inneharingllet och designa saring att det aumlr grafiskt tilltalande och laumltt att hitta

inneharingllet (Wroblewski 2011)

41 Varfoumlr Mobile first

Vaumlrlden vi lever i idag aumlr inte mera som foumlr tio aringr sedan Allt runtom oss har utvecklats

speciellt mobiltelefonerna Tidigare anvaumlndes mobiltelefoner bara foumlr att skicka med-

delandet ringa och ta emot samtal Nu anvaumlnds den till foumlr att dels ta bilder video GPS

navigation foumlr vaumlgvisning och speciellt internetanvaumlndningen saringsom Google nyheter

Facebook Youtube och mycket mer Paring grund av det har ocksaring varingr livsstil foumlraumlndrats

Internetanvaumlndning idag har blivit allt vanligare Idag anvaumlnder vi naumltet i skolan paring jobbet

eller var och naumlr som helst bara man har en smarttelefon eller surfplatta och naumltet kopplat

Tidigare boumlrjade man bygga en webbplats fraringn den stoumlrsta skaumlrmen medan den mobila

sidan var en biprodukt Laringt oss saumlga att man har en webbplats med en rik grafisk layout

och ser stilig ut paring stationaumlra datorer Naumlr man skalar ner sidan foumlr att passa en mobilskaumlrm

kommer resultatet att vara en smaumlrta foumlr varingra oumlgon Paring den lilla mobilskaumlrmen kommer

det att vara olaumlsligt och svaringrt att anvaumlnda Foumlr att naring inneharingllet maringste du tom zooma in

och ut eller skrolla till houmlger och vaumlnster Det haumlr kommer att ge en negativ bild av ditt

foumlretag och anvaumlndarna kanske aldrig mera besoumlker din webbplats (Wroblewski 2011)

Ett bra exempel aumlr Tokyo Skytree webbplats som aumlnnu idag inte ha byggt in funktionalitet

och designen foumlr mindre skaumlrmupploumlsningar paring den engelska sidan

33

Tokyo Skytree aumlr vaumlrldens naumlst houmlgsta torn efter Burj Khalifa Tornet aumlr Japans houmlgsta

byggnadsverk med en houmljd paring 634 meter Den oumlppnades 22 maj 2012 och under det foumlrsta

aringret hade den 64 miljoner besoumlkare fraringn hela vaumlrlden Trots det har de laringtit bli att utveckla

den engelska webbsidan Paring bilden ser man att hemsidan ser exakt likadant ut paring stationaumlr

dator och paring mobilen

Figur 42 Hemsidan paring Tokyo Skytree paring stationaumlr datorskaumlrm

34

Figur 43 Hemsidan foumlr Tokyo Skytree Foumlrsta bilden visar hur det ser ut normalt Andra bilden visar naumlr man zoomar

in

Naumlr man foumlrsoumlker zooma in foumlr att laumlsa inneharingllet hoppar sidbalken (paring vaumlnstra sidan) paring

texten Det haumlr ger en mycket daringlig anvaumlndarupplevelse och kan ge fel bild av turistplat-

sen Ett annat fel paring sidan aumlr naumlr man vaumlljer spraringk till japanska ser sidan inte likadant ut

35

Figure 44 Hemsidan paring Tokyo Skytree paring japanska

Om du kan laumlsa japanska kommer du att undra varfoumlr det finns massor med information

och sidan ser mycket trevligare ut paring den japanska sidan Paring den internationella sidan

dvs engelska ser det inte lika trevligt ut och inneharingller inte allt som det goumlr paring den

japanska sidan Det aumlr som om den stoumlrsta maringlgruppen aumlr foumlr japanska turister och som

om de skulle inte bry sig om turister fraringn utlandet

Utoumlver det har de ocksaring byggt en mobilsida foumlr den japanska webbsidan Varfoumlr satsa bara

paring den japanska sidan och inte den engelska sidan naumlr maringlgruppen aumlr hela vaumlrlden

36

Figur 45 Mobil sidan paring Tokyo Skytree paring japanska

Vi lever i 2015 saring alla borde veta att det aumlr vaumlldigt viktig att ha en mobil webbplats som

erbjuder en bra anvaumlndarupplevelse paring alla spraringk som webbplatsen erbjuder Naumlr man har

sin sida paring flera spraringk och aumlndaring bestaumlmmer sig att bygga sidan ordentligt bara paring ett spraringk

kan anvaumlndarna faring en fel bild av foumlretaget I vaumlrsta fall kommer anvaumlndarna tycka att sidan

aumlr oparinglitligt och aringterkommer aldrig igen

Mobile first metoden aumlr daumlrfoumlr en mycket effektiv metod att bygga sin webbplats med

Man boumlrjar med att bygga sin webbplats fraringn den minsta skaumlrmen Man tvingas goumlra be-

slut om vad som ska absolut prioriteras Arbetsprocessen foumlr oss webbdesigners blir

mycket effektivare genom att foumlrst designa fraringn den minsta skaumlrmen och sedan foumlrflytta

oss till de stoumlrre skaumlrmarna Har man ett 6 kvadratmeters sovrum och foumlrsoumlker faring sin saumlng

skrivbord hylla klaumldskaringp och soffan att rymmas in aumlr det ganska utmanande Men naumlr

man boumlrjar med det mest utmanande i arbetsprocessen blir arbetet ocksaring mindre utma-

nande desto stoumlrre rum eller skaumlrm det blir (Wroblewski 2011)

37

5 909JP

909jp aumlr en elektronisk handel en moumlbelaffaumlr som saumlljer vaumlsterlaumlndska produkter Den

elektroniska butiken kommer att oumlppnas i Japan 2015 Deras foumlrvaumlntningar aumlr att faring in

en miljon dollar i foumlrsaumlljning per aringr I deras elektroniska moumlbelaffaumlr saumlljs bla stolar bord

soffor och lampor Maringlgruppen aumlr alla konsumenter mellan 18-60 aringringar

Japaner aumlr intresserade av vaumlsterlaumlndska produkter och livsstil men foumlr de flesta varor aumlr

designen knutna till deras egen kultur vilket goumlr dem mer intresserad Det aumlr ocksaring mycket

viktigt att ha sin hemsida paring japanska eftersom 99 av den japanska befolkningen foumlre-

drar att inte laumlsa inneharingllet paring andra spraringk (Khurana)

Japan aumlr ett land med vaumlrldens tredje stoumlrsta ekonomi paring 5 biljoner De har vaumlrldens ti-

onde stoumlrsta befolkning med ca 1271 miljoner invaringnare varav 70 av den totala befolk-

ningen anvaumlnder internet och 24 av dem anvaumlnder internet paring sin smarttelefon

(Khurana)

Viktigt med detta projekt aumlr att sikta aringt raumltt haringll och betjaumlna kunderna paring det baumlsta saumlttet

via webbplatsen Foumlr att kunna faringnga saring maringnga kunder som moumljligt aumlr det mycket viktigt

att designa en webbplats som aumlr anvaumlndarvaumlnlig stilig och laumltt att anvaumlnda (Wroblewski

2011)

Jag har daumlrfoumlr kommit underfund med att anvaumlnda Mobile first och Responsiv design

metoden foumlr att utveckla den mobila 909jp sidan Med tanke paring att det aumlr en Responsiv

design skall layouten paring den mobila versionen ocksaring passa in med de stoumlrre skaumlrmarna

naumlr sidan skalas upp Det aumlr dock viktigt poaumlngtera att jag endast kommer att koncentrera

mig paring den mobila designen och utveckla designen endast foumlr denna forskning

38

6 ANALYS AV DEN NYA DESIGNEN

Med hjaumllp av den tidigare designen paring 909jp och de kritiska punkterna jag har hittat under

forskningen har jag skapat en ny och foumlrbaumlttrad design av webbplatsen foumlr mobiler I det

haumlr kapitlet kommer jag att visa naringgra exempel paring den tidigare designen och jaumlmfoumlra den

med nya designen samt analysera arbetet

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger)

1 Call-to-action knapparna

Under hela arbetsprocessen har jag haft i minnet att navigeringar laumlnkar och knap-

parna ska vara tillraumlckligt stora att klicka paring I den tidigare designen har de stora

bilder paring kategorier vilket jag tycker aumlr en bra design att aringtervaumlnda

39

2 Soumlkfunktionen

Paring den tidigare versionen haumlr nedan ser man att soumlkfunktionen inte finns med

medan paring den nya designen ser man soumlkfunktionen genast naumlr man kommer till

sidan Som tidigare framfoumlrdes att soumlkfunktionen alltid ska synas saring att man laumltt

skall kunna soumlka fram produkterna Om soumlkfunktionen inte finns med eller aumlr svaringr

att hitta naumlr den behoumlvs kan det orsaka missnoumlje hos anvaumlndarna (Mehra Gagan

2015)

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp

Figur 63 Soumlkfunktionen paring den nya designen 909jp

40

3 Laumltt att navigera

Naumlr skaumlrmen aumlr liten aumlr det viktig att ha en enkel layout (Wroblewski 2011)

Jag har daumlrfor i den nya designen flyttat rdquoHemrdquo och rdquoBlogrdquo knapparna bort fraringn

den oumlvre menyn Hem-knappen finns nu i hamburgarmenyn paring vaumlnstra sidan me-

dan Blog-knappen finns i footer Detta goumlr att det ser mera organiserat ut

Figur 64 Gamla designen

Laringt oss foumlrflytta vidare till menyer foumlr kategorier Paring hemsidan har man tvaring alter-

nativ att naring kategorierna Foumlrsta aumlr den hamburgarmenyn knappen paring vaumlnstra si-

dan I menyn aumlr kategorierna indelade i fyra delar stolar lampor ergonomisk och

soffa amp middag Detta goumlr det laumltt och klart foumlr anvaumlndarna var produkterna finns

Eftersom vi bara har partiell uppmaumlrksamhet fraringn anvaumlndarna naumlr de aumlr paring sina

smarttelefoner har jag valt att saumltta in ikoner i menyn (Figur 65) Naumlr anvaumlndaren

bara anvaumlnder ena oumlgat foumlr att kolla paring mobilen och andra oumlgat foumlr naringgonting annat

ska den lilla skaumlrmen med webbplatsen kunna faringnga uppmaumlrksamheten samt un-

derlaumltta anvaumlndningen av webbplatsen (Wroblewski 2011)

41

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny

Andra menyn for kategorierna aumlr de fyra bilderna under Aeron chair slideshowen

Paring den tidigare designen ser man endast ett foumlnster av kategorierna som aumlr place-

rade i en kolumn som upprepas loggraumltt (Figur 66) Det haumlr goumlr att anvaumlndaren

maringste skrolla ner foumlr att se varenda kategori vilket kan orsaka obekvaumlmlighet Att

se flera kategorier paring samma skaumlrm sparar tid och anvaumlndaren kommer aumlven baumlttre

iharingg var sakerna finns Att ha bara rdquoenrdquo stor bild som syns paring skaumlrmen och vara

tvungen att skrolla ner foumlr att se naumlsta bild aumlr frustrerande Paring den nya designen

har jag tvaring rutor av kategorier bredvid varandra (Figur 66)

42

Figur 66 Kategorier paring den gamla designen (till vaumlnster) Kategorier paring den nya designen (till houmlger)

4 Ta det roliga ur shopping

Paring den nya designen straumlvar jag efter att erbjuda en bekvaumlm shopping-upplevelse

Naumlr anvaumlndarna besoumlker e-handeln med en smarttelefon foumlrvaumlntar hanhon sig

ocksaring att kunna ta del av allt inneharingll och goumlra jaumlmfoumlrelser med andra produkter

Jag har daumlrfoumlr i den nya designen pressat ihop laumlngden paring kolumnhoumljden som om-

ringar produkten Som resultat ser vi nu fyra produkter paring samma skaumlrm (Figur

67) I den tidigare designen ser vi en enda produkt paring en skaumlrm och foumlr att se

andra produkter maringste vi skrolla ner Paring det haumlr saumlttet har anvaumlndarna svaringrare att

jaumlmfoumlra produkterna (Laya 2014)

43

Figur 67 Tidigare produktsida (till vaumlnster) Ny produktsida (till houmlger)

I den tidigare designen ser vi ocksaring att det finns endast produktens bild produk-

tens namn koumlpvagnen och infoikonen Om man vill faring reda paring produktens inform-

ation maringste man klicka paring produktens bild eller paring infoikonen som foumlr oss direkt

till sjaumllva produktens sida Bara foumlr att man vill faring reda paring vad det aumlr foumlr produkt

foumlrs man vidare till en annan sida Det haumlr kan orsaka att kunden inte njuter totalt

av shoppingen och dessutom kan han inte jaumlmfoumlra produkterna naumlr han aumlr paring ka-

tegoriernas sida (Laya 2014)

Laringt oss hoppa vidare till den nya designen (Figur 68) Paring den nya designen har

jag satt in en kort detaljbeskrivning foumlr varje produkt Dessutom naumlr man klickar

paring infoikonen paring houmlgra sidan kommer man inte direkt till produktsidan utan det

kommer att dyka upp en inforuta som har en kort beskrivning paring produkten Om

anvaumlndaren aumlr intresserad av produkten kan han garing in till sjaumllva produktsida ge-

nom att klicka paring rdquoView productrdquo eller ocksaring paring produktbilden daumlr hanhon kan

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

10

Med hjaumllp av undersoumlkningen om e-handel foumlr mobiler kommer jag att veta vilka saker

det ska finnas paring sidan saringsom kategorier foumlr produkter kundvagn incheckning osv

15 Begrepp

SEO aumlr foumlrkortning fraringn engelska rdquoSearch Engine Optimizationrdquo och oumlversaumltts till Soumlk-

motoroptimering paring svenska Soumlkmotoroptimeringen anvaumlnds foumlr att faring en webbplats att

synas saring houmlgt upp som moumljligt bland resultaten vid soumlkningar i soumlkmotorer (Belinger

2014)

Call to action knapparna aumlr knappar som leder anvaumlndarna vidare till en viss sida Var-

foumlr man kallar det foumlr rdquoCall to actionrdquo aumlr for att knapparna ska kunna faringnga uppmaumlrksam-

heten paring anvaumlndarna foumlr att klicka sig vidare Knapparna kan vara tex meny- knappar

eller bilder som anvaumlnds som en laumlnk till en annan sida (Mehra 2015)

Hamburgarmenyn aumlr menyn som anvaumlnds paring webbplatsen foumlr smarttelefoner Haumlr aumlr

exempel paring menyn

Media Queries aumlr en CSS3-modul som tillaringter inneharingll rendering att anpassa sig till

olika skaumlrmupploumlsningar saringsom smarttelefoner surfplattor och datorskaumlrmar Foumlr att

kunna faring sin webbplats att anpassa sig till olika skaumlrmupploumlsningar naumlr skaumlrmen blir

mindre anvaumlnder man Media Queries i CSS3 (Wikipedia)

11

2 VAD AumlR E-HANDEL

E-handel fungerar genom att ett foumlretag eller individuell person koumlper saumlljer ut eller byter

produkter information eller tjaumlnst via internet eller andra datornaumltverk (Wikipedia)

En stor del av e-handeln aumlger rum i de saring kallade naumltbutikerna Naumltbutiker har ett lager

och en webbplats daumlr kunden goumlr sina bestaumlllningar Paring webbplatsen indelas varorna i

olika kategorier saring att anvaumlndarna paring sidan kan laumltt hitta varorna Foumlr att hitta varorna

snabbare brukar de flesta naumltbutikerna ocksaring ha en soumlkfunktion Paring sidan har anvaumlndarna

moumljligheter att saumltta produktenprodukter i kundvagnen och sedan fortsaumltta shoppa tills

man aumlr klar Vid bestaumlllningen garingr man bara till kassan daumlr anvaumlndaren kommer att vaumllja

transportsaumltt ange kontakt- och leveransuppgifter och vaumllja betalningsmetod Betalnings-

metoden aumlr vanligtvis kreditkort eller Paypal

Fakturan daumlrmed brukar inte ges till kunden daring det skulle innebaumlra oumlkade risker foumlr be-

draumlgerier foumlr naumltbutikerna Foumlr fakturakoumlp behoumlver kundens identitet faststaumlllas paring ett saumlk-

rare saumltt

Naumlr betalningen har gjorts levereras varorna vanligtvis som postpaket eller direkt leverans

till doumlrren foumlr stoumlrre varor saringsom moumlbler (E-handel 2015)

ldquoE-handeln fortsatter att vaxa Nastan hela tillvaxten sker numera i mobilen Det ar

inte priset som gor att vi handlar pa natet De viktigaste skalen ar att det ar smidigare

och att utbudet ar storre an i traditionella butikerrdquo

-Larsson Daniel 2014

21 Mobil e-handel

Mobil e-handel (m-handel) aumlr en term som beskriver en foumlrsaumlljningstransaktion som an-

vaumlnder traringdloumlsa elektroniska enheter saringsom smarttelefoner och surfplattor En mobil e-

handel webbplats fungerar i alla smarttelefoner och surfplattor och aumlr anpassad samt op-

timerad foumlr mobilens webblaumlsare

12

Foumlr att naring den mobila webbplatsen behoumlver man inte skriva in mobil adress eller aktivt

vaumllja att visa den mobila butiken Den mobila webbplatsen av en e-handel kaumlnner auto-

matiskt igen om man anvaumlnder en dator eller en mobil och visar daring upp en optimerad

version som anpassas efter anvaumlndarnas behov (Nordisk e-handel)

I den mobila versionen av e-handel brukar kategorier bestaring av endast en sida Foumlr att se

paring de resterande produkter i kategorierna kan man trycka paring rdquoVisa flerrdquo som man oftast

hittar laumlngst ner som en knapp eller laumlnk Detta goumlr uppladdningstiden paring sidan betydligt

snabbare och anvaumlndarna slipper vaumlnta Vaumlntande kan leda till avbrutna koumlp

Foumlrutom kategorier produkter och kassa i sjaumllvbetjaumlningsbutik foumlr kunder med produkter

som aumlr optimerade foumlr mobilanvaumlndarna aumlr ocksaring betalvaumlxeln foumlr kortbetalning specialan-

passad Detta goumlr det snabbare och enklare foumlr anvaumlndarnakunderna att avsluta sina koumlp

och betala med sina betalningskort (Mobil e-handel 2012)

22 Varfoumlr handla med mobil

Foumlr att kunna designa en ny mobil e-handel foumlr en kund aumlr det foumlrst jaumltte viktigt att veta

varfoumlr anvaumlndarna vaumlljer att koumlpa produktertjaumlnster med en smarttelefon eller surfplattor

Med hjaumllp av DIBS aringrliga rapport som gjordes i Sverige 2014 visas det att den viktigaste

orsaken till att anvaumlndarna handlar med sin mobil aumlr att det aumlr smidigare och sparar tid

Samtidigt aumlr det viktigt att inte heller gloumlmma bort att andra handlingsmotiv lyfts fram

som viktiga av mer aumln haumllften av alla tillfraringgade E-handel aumlr bra paring maringnga olika saumltt Den

moumlter konsumenternas behov och oumlnskemaringl i stor grad

Foumlr den nordiska befolkningen ska tidsbesparing enligt rapporten vara allra viktigaste foumlr

35-44 aringringar och minst viktig foumlr de yngsta aringldersgruppen 15-24 aringr som foumlr vilka laringga

priser istaumlllet spelar mer roll Utoumlver laringga priser drivs ungdomarna ocksaring oftast av det

stoumlrre utbudet som naumltbutikerna erbjuder paring internet

13

Figur 21 Viktigaste skaumllet att naumlthandel sparar tid

Enligt statiken visar det viktigaste skaumllet varfoumlr man anvaumlnder mobilen foumlr e-handel

64 saumlger att det sparar tid och aumlr smidigt

58 saumlger att det aumlr foumlrmaringnligare

56 saumlger att det aumlr enklare att jaumlmfoumlra mellan olika produkter

43 saumlger att det finns stoumlrre produktutbud

52 saumlger att det aumlr alltid oumlppet

23 Antalet kop okar pa mobilen

Enligt DIBS aringrliga rapport (2014) om mobil e-handel oumlkar antalet mobila e-handel kon-

sumenter hela tiden Nedan finns en figur om antalet under aringr 2013-2014 Figuren visar

hur maringnga garingnger konsumenterna har handlat varortjaumlnster med en smarttelefon eller

surfplattor under de senaste sex maringnaderna Naumlthandeln paring mobila enheterna oumlkar sakta

med saumlkert De som har handlat paring naumltet foumlrut handlar nu ocksaring allt mer Andelen stor-

konsumenter de som handlat minst 25 garingnger paring ett halvaringr har nu foumlrdubblats

De som handlade en eller tvaring garingnger har minskat fraringn 42 procent aringr 2013 till 35 procent

aringr 2014 vilket goumlr det till 17 procent mindre I snitt handlar konsumenter 1114 garingnger

per aringr med sin smarttelefon eller surfplattor

14

Figur 22 Antal oumlkar paring mobilen

Mobilen finns alltid naumlrmast

Enligt rapporten ska den vanligaste orsaken till varfoumlr anvaumlndarna vaumlljer att handla fraringn

mobilen vara foumlr att mobilen fanns naumlrmast till hands vid koumlpoumlgonblicket

Figur 23Varfoumlr handlade du med smarttelefon

15

60 saumlger att smarttelefon fanns naumlrmaste till hands vid koumlptillfaumlllet

27 anvaumlnder en app foumlr att handla online

17 oumlppnade ett erbjudande via e-mail i sin smarttelefon

5 har ingen dator

3 var i butik och koumlpte varan paring naumltet istaumlllet

4 hade ingen internetanslutning

3 scannade en QR-kod

Vad handlar vi med mobil

Foumlr att snabbt faringr en inblick i vad konsumenterna handlar med mobil ser vi haumlr nedan

(Figur 24) Konsumenter handlar mer av naumlstan allt Kunder som spenderar mer aumln 500

euro med smarttelefoner eller surfplattor koumlper i foumlrsta hand resor medan de som handlar

foumlr mindre aumln 100 euro laumlgger pengar paring media

Figur 24 Mobilt handlar vi mer av naumlstan allt

16

24 Bra mobila e-handel webbplatser

En bra mobil webbplats aumlr naumlr sidan aumlr enkel att anvaumlnda fast man bara anvaumlnder ett oumlga

och en tumme

rdquoWhen reflecting on a lot of mobile usage patterns I like to imagine people as rdquoone

eyeball and one thumb One thumb because they are likely to be holding their mobile

in one hand and using a single thumb to control it one eyeball because in many loca-

tions where mobile devices are use we only have peoples partial attentionrdquo

-Wroblewski Luke 2011)

Man kan aldrig exakt veta var anvaumlndaren befinner sig naumlr han surfar med sin smarttele-

fon Han kanske befinner sig i vardagsrummet foumlr att sloumltt surfa efter en ny lampa medan

han kollar paring Tvn Kanske anvaumlndaren sitter hemma och har en stadig wifi eller kanske

paring sommarstugan och har 3G4G som byter mellan olika naumltverk osv (Thoren 2012)

Naumlr anvaumlndaren goumlr naringgonting samtidigt som han surfar paring webbplatsen har han bara den

partiella uppmaumlrksamheten Daumlrfoumlr aumlr det betydligt fler kontexter som man maringste ta haumln-

syn till naumlr man designar webbplatser foumlr mobiler (Wroblewski 2011)

Haumlr aumlr tvaring bra exempel av lyckad e-handel foumlretag i vaumlrlden De har inte lyckats bra bara

med att saumllja produkterna utan ocksaring med designen Haumlr nedan aumlr bilderna paring mobil de-

signen av Rakutencom och Amazoncom

17

Figur 25 Hemsida paring rakutencom foumlr mobiler

Direkt naumlr man kommer paring sidan hittar man inloggningen koumlpvagnen soumlkfunktionen

menyn och speciellt de stora bilderna paring katalogerna vilket aumlr jaumltte laumltta att klicka paring

Fastaumln mobilskaumlrmen aumlr liten goumlr den haumlr det bara inte laumltt att navigera runt sidorna utan

ocksaring trevligt att vara paring sidan

Amazoncom har ocksaring lyckats bra med designen Naumlr man kommer till sidan ser man

direkt Sign in Department Wish List Deals och Search funktionen Under search funkt-

ionen ser man genast en inspirerande reklam som paringminner oss om att det aumlr varingr

rdquoSPRINGacuteS PERFECT PANTSrdquo Fast sidan har jaumltte maringnga objekt i den aumlr det trots allt

18

jaumltte laumltt att navigera runt sidorna Man tappar inte bort sig och man hittar laumltt det som

man aumlr ute efter

Figur 26 Hemsida paring amazoncom foumlr mobiler

19

25 Kritiska punkterna foumlr bra mobil design paring e-handel

Naumlr man handlar med en mindre skaumlrm aumlr det mera utmanande eftersom skaumlrmen aumlr liten

och anvaumlndarna brukar inte ha tillraumlckligt med taringlamod att sitta och soumlka naringgonting foumlr

laumlnge fraringn en liten skaumlrm Daumlrfoumlr aumlr det viktigt att veta vilka saker man boumlr beakta naumlr

man designar en mobil e-handel I det haumlr stycket kommer jag att lista upp sakerna man

boumlr veta naumlr man designar en mobil e-handel webbplats

Naumlr man handlar med en mindre skaumlrm aumlr det mera utmanande eftersom skaumlrmen aumlr liten

och anvaumlndarna brukar inte ha tillraumlckligt med taringlamod att sitta och soumlka naringgonting foumlr

laumlnge paring en liten skaumlrm Daumlrfoumlr aumlr det viktigt att veta vilka saker man boumlr beakta naumlr man

designar en mobil e-handel I det haumlr stycket kommer jag att lista upp kritiska saker man

boumlr veta naumlr man designar en mobil e-handel webbplats

1 Call-to-action knapparna foumlr smaring paring en mobilskaumlrm

Naumlr man designar webbsidor foumlr mobiler kan det ibland vara en utmaning att faring

allt att rymmas in Daumlrfoumlr brukar ocksaring webbdesigner minska de sk rdquocall to act-

ionrdquo knapparna Om anvaumlndaren maringste zooma in foumlr att klicka paring en knapp men

av misstag klickar paring en annan knapp kan det bli frustrerande foumlr dem och detta

leder sedan till att de laumlmnar sidan Daumlrfoumlr aumlr det mycket viktigt att designa knap-

parna och inneharingllet saring att anvaumlndarna laumltt naringr dem

2 Soumlkfunktionen ska alltid finnas med

Paring mobila e-handel webbplatser ska soumlkfunktionen alltid synas saring att man laumltt skall

kunna soumlka produkterna Laringt oss saumlga att kunden inte hittar produkten han soumlker

och vill anvaumlnda soumlkfunktionen Han letar och letar efter soumlkfunktionen utan re-

sultat Detta orsakar inte bara att kunden laumlmnar din sida men ocksaring kommer han

att beraumlttar det vidare aringt andra hur han upplevde din sida (Mehra 2015)

3 Laumltt att navigera

20

Det ska vara laumltt att navigera runt sidorna Anvaumlndarna ska veta var han aumlr och hur

han kommer vidare efter att han tex har valt produkten Menyerna foumlr katalo-

gerna ska vara laumltta att navigera Om menyerna foumlr katalogerna aumlr foumlrvirrande och

svaringra foumlr anvaumlndaren att hitta produkterna blir han laumltt irriterad Exemplar paring (fi-

gur 27) haumlr nedan visar att menyerna aumlr ganska foumlrvirrande paring vaumlnstra bilden me-

dan paring houmlgra sidan aumlr det klart och tydligt (Laya 2014)

Figur 27 Jaumlmfoumlrelse mellan en bra och daringlig navigation httpconversionxlcommake-mobile-convert

4 Ta de roliga ur shopping

Det vanligaste och stoumlrsta misstaget som de flesta foumlretag goumlr naumlr de designar foumlr

mobil e-handel aumlr att de foumlrsoumlker flytta kunderna fraringn shopping till koumlp Shopping

paring en stationaumlr dator goumlr det laumltt naumlr det oftast finns ett enormt antal produkter att

vaumllja mellan och det aumlr laumltt att blaumlddra runt Men foumlr mobiler aumlr det annat

Maringnga foumlretag foumlrsoumlker pressa ihop hela shopping-processen till smaring tabbar och

minska paring inneharingllet Som resultat kommer anvaumlndaren att kaumlnna sig paringtvingad

21

att goumlra snabba beslut paring inkoumlp Istaumlllet foumlr att ge anvaumlndarna en saringdan paringtvingad

upplevelse kan man istaumlllet locka anvaumlndarna med all information vi har att er-

bjuda

Det betyder inte att anvaumlndarna som besoumlker e-handeln med en smarttelefon inte

vill njuta av shoppingen saringsom de goumlr paring stationaumlra datorer Naumlr man designar en

mobil e-handel skall kunderna kunna faring njuta av shoppingen och jaumlmfoumlra mellan

olika produkter innan dem bestaumlmmer sig vilken produkt de vill koumlpa (Laya 2014)

ldquoBut we see many companies try to compress the whole shopping process into a

small number of taps The result is a mobile app or website that forces the user to

make a quick purchase decision rather than giving a great shopping experience

To the user it feels like the site switches from giving enticement to issuing de-

mandsrdquo

- Laya Peep 2014

5 Laringngsam uppladdningstid foumlr mobiler spelar en stor roll

Det aumlr mycket viktigt att haringlla sidstorleken saring liten som moumljligt saring att det aumlr snabbt

att ladda upp sidan

ldquoMobile users want to take quick action and also Google has reportedly started

including page speed for ranking websites in the search results so that makes it

even more important to have a lighter siterdquo

- Mehra Gagan 2015

Varingren 2014 rapporterade Radware (httpwwwradwarecomspring-sotu2014)

att majoriteten av besoumlkarna kommer att oumlverge webbplatsen efter att ha vaumlntat i

3 sekunder foumlr att ladda upp sidan (Laya 2014)

Om det finns mycket inneharingll paring en sida kan man som alternativ separera inne-

haringllet i olika flikar (Mehra 2015)

Jag har tagit ett exempel fraringn Amazoncom Paring produktsidan har ja valt en orange

vaumlska Foumlr att tex ytterligare laumlsa om produktbeskrivningen rdquoAbout this itemrdquo ser

22

jag en pil som aumlr paring houmlgra sidan (Figur 29) Naumlr jag trycker paring pilen eller laringdan

kommer jag till en annan sida daumlr jag kan laumlsa hela produktbeskrivningen (Figur

210) Paring det haumlr saumlttet inneharingller sidan all information man behoumlver men separe-

rade i olika flikar saring att det blir snabbare att ladda upp sidan

Figur 28 Produktsida paring amazoncom

23

Figur 29 Produktsida paring amazoncom

Figur 210 Produktsida paring amazoncom About this item

24

6 Misslyckade analyseringar av anvaumlndarna

Naumlr man bygger webbsidor aumlr det viktig att goumlra anvaumlndbarhetstest och analysera

kundernas beteende Hur anvaumlndarna kaumlnner sig naumlr de anvaumlnder sidan aumlr mycket

viktigt och avgoumlr hur bra din business kommer att rulla

Analyseringen aumlr den kritiska inputen foumlr designen Med analyseringen ser man

dels vilka mobila apparater anvaumlndarna anvaumlnder och om det aumlr naringgra svaringrigheter

och obekvaumlmligheter anvaumlndarna upplever vid anvaumlndningen Dessa faktorer aumlr

viktiga foumlr att saumlkerstaumllla om den mobila upplevelsen uppfyller behoven hos kon-

sumenterna Testet och analysen maringste goumlras kontinuerligt foumlr att vi skall kunna

saumlkerstaumllla att kunderna har det bekvaumlmt (Mehra 2015)

7 Mindre inneharingll foumlr mobilanvaumlndarna

E-handel webbplatser brukar goumlmma inneharingll foumlr att goumlra sidan mindre Sidan aumlr

i sjaumllva verket inte mindre men bara goumlmd foumlr anvaumlndarna som anvaumlnder sina

smarttelefoner Enligt Mehra Gagan aumlr det inte bra om det finns mindre inneharingll

foumlr mobilanvaumlndarna Oavsett med vilka enheter anvaumlndarna aumlr paring sidan boumlr det

finnas lika mycket inneharingll paring alla enheterna De flesta som handlar online brukar

aumlga flera enheter och med stor sannolikhet anvaumlnder de ocksaring andra enheter foumlr

att surfa Om inneharingllet inte ser likadant ut paring stationaumlra datorer och smarttelefo-

ner kan det orsaka daringlig anvaumlndarupplevelse foumlr anvaumlndaren Enligt Google an-

vaumlnder 90 av dem som handlar paring internet olika enheter Att begraumlnsa deras

anvaumlndning aumlr naringgonting som man boumlr undvika (Mehra 2015)

25

3 MOBILANPASSADE LOumlSNINGAR

Det finns maringnga olika loumlsningar att bygga sin webbplats med Det aumlr viktigt att komma

iharingg att mobila anvaumlndande oumlkar hela tiden Det staumlller nya krav paring webbdesign och an-

vaumlndargraumlnssnitt Anvaumlndarna foumlrvaumlntar sig idag att de ska kunna ta del av allt inneharingll paring

webben oavsett om de anvaumlnder en smarttelefon eller en surfplatta De mobilanpassade

loumlsningarna foumlr e-handel kan tex vara Responsiv design Adaptiv Design Mobilbutik

eller en mobil applikation

31 Adaptiv design

En adaptiv webbplats aumlr uppbyggd saring att den aumlr optimerad foumlr specifika skaumlrmstorlekar

Den anvaumlnder servern foumlr att upptaumlcka den enhet som anvaumlnds foumlr att visa webbplatsen

Byggande av webbplatsen med adaptiv metoden aumlr tidskraumlvande paring grund av behovet att

optimera sidan foumlr varje vald plattform front-end och back-end Innan man boumlrjar bygga

webbplatsen maringste man avgoumlra vilka alla plattformar webbplatsen kommer att optimeras

till Foumlrdel med adaptiv design aumlr att den har snabb uppladdningstid

rdquoCompared to Responsiv design adaptive web design is website-optimised for each

platform separately and makes use of the opportunities presented by the platform as

well as the models and functions It offers fast-loading pages due to the server detec-

tion device and browser sending data tailored for a particular devicerdquo

-Lubo Ruska 2013

Att vaumllja den raumltta loumlsningen handlar om att foumlrstaring vad maringlgruppen foumlrvaumlntar sig och vad

de behoumlver Eftersom foumlretaget 909jp inte aumlr en jaumltte stort foumlretag saringsom Ikea eller Ama-

zon som har oberaumlknat antal med produkter tycker jag att Responsiv design med Mobile

first metoden aumlr den mest effektiva metoden foumlr denna forskning

26

32 Responsiv design

Responsiv webbdesign aumlr ett av de populaumlraste saumltten att optimera en webbplats Re-

sponsiv webbdesign moumljliggoumlr att layouten foumlraumlndras beroende paring vilken skaumlrmstorlek

och skaumlrmupploumlsningen som anvaumlndarna har och beroende paring vilka funktioner som

webblaumlsaren stoumldjer (Responsive Design 2014)

Oberoende om anvaumlndarna anvaumlnder dator laumlsplatta eller sin mobiltelefon kommer sidan

att anpassa sig paring olika saumltt foumlr att anvaumlndarna vid alla tillfaumlllen ska ha en saring rik upplevelse

som moumljligt Man kan saumlga att en webbsida paring mindre skaumlrmar aumlr med ett annat ord en

krympande version av den stoumlrre skaumlrmstorleken

Inneharingllet saringsom kolumner och bilder paring webbsidan kommer automatiskt att anpassas

beroende paring skaumlrmstorleken Och detta aumlr paring grund av Grid systemet Allt inneharingll skall

haringllas inom ett Grid system Grid systemet skall skydda allt fraringn att bryta samman naumlr

sidan anvaumlnds paring olika skaumlrmstorlekar

Det finns 11 olika Grid storlekar tvaring kolumner tre kolumner fyra kolumner fem kolum-

ner sex kolumner sju kolumner aringtta kolumner nio kolumner tio kolumner 11 kolumner

och 12 kolumner Som exempel visar jag en figur av 12 kolumners Grid system (Swan

2014)

27

Figur 31 Ett exempel paring Grid system av 5 olika skaumlrmstorlekar (Phil Swan 2014)

Responsiv webbdesign fungerar med hjaumllp av HTML5 CSS media Query och Java-

Script Det bygger paring att webbutvecklare istaumlllet foumlr exakta storlekar maumltt i pixlar anger

sidelements storlekar i procent i jaumlmfoumlrelse med skaumlrmens storlek

Naumlr sidelementens storlekar aumlr i procent goumlr det att sidan blir flexibel och den anpassas

efter webblaumlsarens storlek medan fasta pixlar ger en scrollbar (rull-list) (Responsive De-

sign 2014)

33 Varfoumlr Responsiv design

Foumlrdelar med Responsiv design aumlr att den erbjuder en bra anvaumlndarupplevelse foumlr olika

enheter och skaumlrmstorlekar Tack vare den Responsiva designen har webbredaktoumlrer laumlt-

tare att hantera inneharingllet eftersom de bara har en version att hantera Ur en SEO synvin-

kel fungerar Responsiv design baumlttre eftersom den koncentrerar inneharingllet istaumlllet foumlr att

vattna ur det med maringnga URL foumlr samma inneharingll

28

Med en Responsiv design aumlr en webbplats laumlttare att hantera Att ha flera olika versioner

av en webbplats innebaumlr mera arbete Flera olika versioner av en webbplats innebaumlr sepa-

rata sidor att redigera och separata insatser foumlr soumlkmotoroptimering och separata soumlkmo-

torkampanjer Daumlrfoumlr aumlr det en stor foumlrdel att bygga en webbplats med den Responsiva

metoden

Med en Responsiv design kaumlnner anvaumlndarna baumlttre igen sidan baringde paring stationaumlra datorer

och mobiltelefoner Bygger man specifika webbplatser foumlr mobiler och surfplattor kan

det laumltt haumlnda att det blir olika information paring webbplatserna och att de struktureras olika

Laringt oss foumlrestaumllla oss att naringgon anvaumlnder sin mobiltelefon paring lunchen foumlr att leta efter en

flygbiljett fraringn Helsingfors till Tokyo Personen hittar en webbplats som har bra erbju-

dande och bestaumlmmer sig foumlr att fortsaumltta kolla naumlr han eller hon kommer hem Naumlr per-

sonen har kommit hem anvaumlnder hen datorn istaumlllet foumlr mobilen Om webbplatsen som

personen kollade paring lunchpausen var en Responsiv webbplats faringr personen en smidig och

bra upplevelse vid oumlvergaringngen fraringn den mobila webbplatsen till stationaumlr dator

(Lindahl 2014)

Det aumlr vaumlldigt viktigt att ha sin webbplats att optimerad till saring maringnga enheter som moumljligt

foumlr att ingen vet vilka kommer att vara framtidens enheter och daumlrfoumlr anses en webbplats

som anpassar sig till maringnga olika format vara den baumlsta loumlsningen Innan man kan boumlrja

med att designa en Responsiv webbplats maringste man veta vilka skaumlrmupploumlsningar och

storlekar det finns tillgaumlngliga och aumlr populaumlra idag Foumlr att kunna rikta till de olika skaumlr-

mupploumlsningarna med Media Queries har jag listat upp olika enheternas skaumlrmupploumls-

ningar i pixlar haumlr nedan i tabellen

ResolutionGrafisk array Enhet som anvaumlnder denna resolution skaumlrmstorlek i pixel-

taumltheten i pixlar

2880x1800 15-inch Apple MacBook Pro with Retina display

2560 x 1700 Google Chromebook Pixel

2560 x 1600 Samsung Google Nexus 10

13-inch Apple MacBook Pro with Retina display

29

2560 x 1440 27-inch Apple iMac 102 111 113 122 (Late 2009 -

2012)

1920 x 1080 HTC One Samsung

Sony Xperia Z amp Xperia ZL

Asus PadFone Infinity

Acer Aspire S5

Asus Zenbook Prime

1600 x 900 Apple Macbook Air

1366 x 768 Small desktoplaptop screen resolution

Asus VivoTab RT

Samsung N350

1280 x 1024 Standard desktop screen resolution

1280 x 800 Asus PadFone 2

Samsung Galaxy Note

Sony Xperia Tablet S

1280 x 720 Sony Xperia S

HTC Windows Phone 8X

HTC One mini

1136 x 640 Apple iPhone 5 5S amp 5C

Apple iPod Touch (5th generation)

960 x 640 Apple iPhone 4 amp 4S

Apple iPod Touch (4th generation)

854 x 480 Sony Xperia ray

Nokia N9

800 x 480 Nokia Lumia 510 amp 520

Samsung Galaxy I Galaxy S Galaxy S Plus Galaxy S Ad-

vance Galaxy SL Galaxy S Duos Galaxy Xcover 2 Galaxy

Beam Nexus S Captivate Glide amp Galaxy S III mini

HTC Desire X HTC Desire V Desire VC Desire VT De-

sire U amp Windows Phone 8S

30

LG Optimus 2X Optimus EX Optimus L5 II Optimus Q2

amp Optimus Black

T-Mobile G2x

Asus E600

620 x 480 Blackberry Bold 9900 amp Bold Touch 9930

Blackberry Torch 9810

LG Optimus Z

640 x 360 Sony Ericsson Vivaz amp Vivaz Pro

Nokia 500 amp 5800 XpressMusic

Nokia N8 N97 E7 and X6

480 x 320 Apple iPhone 3G amp 3GS

Samsung Galaxy Ace

320 x 240 Nokia E71

Blackberry Curve 9220 amp 9320

Sony Ericsson txt

Samsung Galaxy Y amp Galaxy Chat

Nokia Asha 501

Figur 32 Resolutions referenser paring olika enheter

31

4 VAD AumlR MOBILE FIRST

Mobile first metoden aumlr en metod och arbetsprocess foumlr webbdesigners som aumlr skapad av

Luke Wroblewski Naumlr man jobbar med ett projekt och designar strukturerar och imple-

menterar en webbplats aumlr Mobile first metoden man paringboumlrjar arbetet med Med metoden

menar Wroblewski att man foumlrst boumlrjar designa webbsidor fraringn de minsta enheterna

Figur 41 Mobile First att bygga webbsidan fraringn den minsta skaumlrmen till den stoumlrsta skaumlrmen

Wroblewski som har skapat Mobile First metoden understryker att metoden ska priorite-

ras daring man skapar anvaumlndarupplevelser

Det finns tre viktiga anledningar foumlr att utveckla foumlr Mobile First

Den foumlrbereder foumlr den stora utveckling och nya moumljligheter som uppkommer

inom det mobila omraringdet idag (836 av vaumlrldens befolkning anvaumlnder internet

paring sin smarttelefon 2015)

Den goumlr att vi blir tvungna att prioritera och fokusera varingrt inneharingll genom att ac-

ceptera de begraumlnsningar som aumlr foumlrenade med mobil design

32

och goumlr att vi kan leverera innovativa upplevelser genom att bygga utifraringn nya

funktioner som finns inbyggda i de mobila enheterna (bla GEO lokalisering)

En mobil webbplats behoumlver endast ha en mycket enkel layout och navigeringen ska vara

laumltt och effektiv

Naumlr man designar med Mobile first metoden tvingas man goumlra viktiga beslut om vad som

ska prioriteras Naumlr den optimerad design foumlr en liten skaumlrm visas paring en stoumlrre skaumlrm

kommer det att bli laumlttare att designa paring de stoumlrre skaumlrmarna Allt som ska goumlras aumlr daring

bara att fylla paring inneharingllet och designa saring att det aumlr grafiskt tilltalande och laumltt att hitta

inneharingllet (Wroblewski 2011)

41 Varfoumlr Mobile first

Vaumlrlden vi lever i idag aumlr inte mera som foumlr tio aringr sedan Allt runtom oss har utvecklats

speciellt mobiltelefonerna Tidigare anvaumlndes mobiltelefoner bara foumlr att skicka med-

delandet ringa och ta emot samtal Nu anvaumlnds den till foumlr att dels ta bilder video GPS

navigation foumlr vaumlgvisning och speciellt internetanvaumlndningen saringsom Google nyheter

Facebook Youtube och mycket mer Paring grund av det har ocksaring varingr livsstil foumlraumlndrats

Internetanvaumlndning idag har blivit allt vanligare Idag anvaumlnder vi naumltet i skolan paring jobbet

eller var och naumlr som helst bara man har en smarttelefon eller surfplatta och naumltet kopplat

Tidigare boumlrjade man bygga en webbplats fraringn den stoumlrsta skaumlrmen medan den mobila

sidan var en biprodukt Laringt oss saumlga att man har en webbplats med en rik grafisk layout

och ser stilig ut paring stationaumlra datorer Naumlr man skalar ner sidan foumlr att passa en mobilskaumlrm

kommer resultatet att vara en smaumlrta foumlr varingra oumlgon Paring den lilla mobilskaumlrmen kommer

det att vara olaumlsligt och svaringrt att anvaumlnda Foumlr att naring inneharingllet maringste du tom zooma in

och ut eller skrolla till houmlger och vaumlnster Det haumlr kommer att ge en negativ bild av ditt

foumlretag och anvaumlndarna kanske aldrig mera besoumlker din webbplats (Wroblewski 2011)

Ett bra exempel aumlr Tokyo Skytree webbplats som aumlnnu idag inte ha byggt in funktionalitet

och designen foumlr mindre skaumlrmupploumlsningar paring den engelska sidan

33

Tokyo Skytree aumlr vaumlrldens naumlst houmlgsta torn efter Burj Khalifa Tornet aumlr Japans houmlgsta

byggnadsverk med en houmljd paring 634 meter Den oumlppnades 22 maj 2012 och under det foumlrsta

aringret hade den 64 miljoner besoumlkare fraringn hela vaumlrlden Trots det har de laringtit bli att utveckla

den engelska webbsidan Paring bilden ser man att hemsidan ser exakt likadant ut paring stationaumlr

dator och paring mobilen

Figur 42 Hemsidan paring Tokyo Skytree paring stationaumlr datorskaumlrm

34

Figur 43 Hemsidan foumlr Tokyo Skytree Foumlrsta bilden visar hur det ser ut normalt Andra bilden visar naumlr man zoomar

in

Naumlr man foumlrsoumlker zooma in foumlr att laumlsa inneharingllet hoppar sidbalken (paring vaumlnstra sidan) paring

texten Det haumlr ger en mycket daringlig anvaumlndarupplevelse och kan ge fel bild av turistplat-

sen Ett annat fel paring sidan aumlr naumlr man vaumlljer spraringk till japanska ser sidan inte likadant ut

35

Figure 44 Hemsidan paring Tokyo Skytree paring japanska

Om du kan laumlsa japanska kommer du att undra varfoumlr det finns massor med information

och sidan ser mycket trevligare ut paring den japanska sidan Paring den internationella sidan

dvs engelska ser det inte lika trevligt ut och inneharingller inte allt som det goumlr paring den

japanska sidan Det aumlr som om den stoumlrsta maringlgruppen aumlr foumlr japanska turister och som

om de skulle inte bry sig om turister fraringn utlandet

Utoumlver det har de ocksaring byggt en mobilsida foumlr den japanska webbsidan Varfoumlr satsa bara

paring den japanska sidan och inte den engelska sidan naumlr maringlgruppen aumlr hela vaumlrlden

36

Figur 45 Mobil sidan paring Tokyo Skytree paring japanska

Vi lever i 2015 saring alla borde veta att det aumlr vaumlldigt viktig att ha en mobil webbplats som

erbjuder en bra anvaumlndarupplevelse paring alla spraringk som webbplatsen erbjuder Naumlr man har

sin sida paring flera spraringk och aumlndaring bestaumlmmer sig att bygga sidan ordentligt bara paring ett spraringk

kan anvaumlndarna faring en fel bild av foumlretaget I vaumlrsta fall kommer anvaumlndarna tycka att sidan

aumlr oparinglitligt och aringterkommer aldrig igen

Mobile first metoden aumlr daumlrfoumlr en mycket effektiv metod att bygga sin webbplats med

Man boumlrjar med att bygga sin webbplats fraringn den minsta skaumlrmen Man tvingas goumlra be-

slut om vad som ska absolut prioriteras Arbetsprocessen foumlr oss webbdesigners blir

mycket effektivare genom att foumlrst designa fraringn den minsta skaumlrmen och sedan foumlrflytta

oss till de stoumlrre skaumlrmarna Har man ett 6 kvadratmeters sovrum och foumlrsoumlker faring sin saumlng

skrivbord hylla klaumldskaringp och soffan att rymmas in aumlr det ganska utmanande Men naumlr

man boumlrjar med det mest utmanande i arbetsprocessen blir arbetet ocksaring mindre utma-

nande desto stoumlrre rum eller skaumlrm det blir (Wroblewski 2011)

37

5 909JP

909jp aumlr en elektronisk handel en moumlbelaffaumlr som saumlljer vaumlsterlaumlndska produkter Den

elektroniska butiken kommer att oumlppnas i Japan 2015 Deras foumlrvaumlntningar aumlr att faring in

en miljon dollar i foumlrsaumlljning per aringr I deras elektroniska moumlbelaffaumlr saumlljs bla stolar bord

soffor och lampor Maringlgruppen aumlr alla konsumenter mellan 18-60 aringringar

Japaner aumlr intresserade av vaumlsterlaumlndska produkter och livsstil men foumlr de flesta varor aumlr

designen knutna till deras egen kultur vilket goumlr dem mer intresserad Det aumlr ocksaring mycket

viktigt att ha sin hemsida paring japanska eftersom 99 av den japanska befolkningen foumlre-

drar att inte laumlsa inneharingllet paring andra spraringk (Khurana)

Japan aumlr ett land med vaumlrldens tredje stoumlrsta ekonomi paring 5 biljoner De har vaumlrldens ti-

onde stoumlrsta befolkning med ca 1271 miljoner invaringnare varav 70 av den totala befolk-

ningen anvaumlnder internet och 24 av dem anvaumlnder internet paring sin smarttelefon

(Khurana)

Viktigt med detta projekt aumlr att sikta aringt raumltt haringll och betjaumlna kunderna paring det baumlsta saumlttet

via webbplatsen Foumlr att kunna faringnga saring maringnga kunder som moumljligt aumlr det mycket viktigt

att designa en webbplats som aumlr anvaumlndarvaumlnlig stilig och laumltt att anvaumlnda (Wroblewski

2011)

Jag har daumlrfoumlr kommit underfund med att anvaumlnda Mobile first och Responsiv design

metoden foumlr att utveckla den mobila 909jp sidan Med tanke paring att det aumlr en Responsiv

design skall layouten paring den mobila versionen ocksaring passa in med de stoumlrre skaumlrmarna

naumlr sidan skalas upp Det aumlr dock viktigt poaumlngtera att jag endast kommer att koncentrera

mig paring den mobila designen och utveckla designen endast foumlr denna forskning

38

6 ANALYS AV DEN NYA DESIGNEN

Med hjaumllp av den tidigare designen paring 909jp och de kritiska punkterna jag har hittat under

forskningen har jag skapat en ny och foumlrbaumlttrad design av webbplatsen foumlr mobiler I det

haumlr kapitlet kommer jag att visa naringgra exempel paring den tidigare designen och jaumlmfoumlra den

med nya designen samt analysera arbetet

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger)

1 Call-to-action knapparna

Under hela arbetsprocessen har jag haft i minnet att navigeringar laumlnkar och knap-

parna ska vara tillraumlckligt stora att klicka paring I den tidigare designen har de stora

bilder paring kategorier vilket jag tycker aumlr en bra design att aringtervaumlnda

39

2 Soumlkfunktionen

Paring den tidigare versionen haumlr nedan ser man att soumlkfunktionen inte finns med

medan paring den nya designen ser man soumlkfunktionen genast naumlr man kommer till

sidan Som tidigare framfoumlrdes att soumlkfunktionen alltid ska synas saring att man laumltt

skall kunna soumlka fram produkterna Om soumlkfunktionen inte finns med eller aumlr svaringr

att hitta naumlr den behoumlvs kan det orsaka missnoumlje hos anvaumlndarna (Mehra Gagan

2015)

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp

Figur 63 Soumlkfunktionen paring den nya designen 909jp

40

3 Laumltt att navigera

Naumlr skaumlrmen aumlr liten aumlr det viktig att ha en enkel layout (Wroblewski 2011)

Jag har daumlrfor i den nya designen flyttat rdquoHemrdquo och rdquoBlogrdquo knapparna bort fraringn

den oumlvre menyn Hem-knappen finns nu i hamburgarmenyn paring vaumlnstra sidan me-

dan Blog-knappen finns i footer Detta goumlr att det ser mera organiserat ut

Figur 64 Gamla designen

Laringt oss foumlrflytta vidare till menyer foumlr kategorier Paring hemsidan har man tvaring alter-

nativ att naring kategorierna Foumlrsta aumlr den hamburgarmenyn knappen paring vaumlnstra si-

dan I menyn aumlr kategorierna indelade i fyra delar stolar lampor ergonomisk och

soffa amp middag Detta goumlr det laumltt och klart foumlr anvaumlndarna var produkterna finns

Eftersom vi bara har partiell uppmaumlrksamhet fraringn anvaumlndarna naumlr de aumlr paring sina

smarttelefoner har jag valt att saumltta in ikoner i menyn (Figur 65) Naumlr anvaumlndaren

bara anvaumlnder ena oumlgat foumlr att kolla paring mobilen och andra oumlgat foumlr naringgonting annat

ska den lilla skaumlrmen med webbplatsen kunna faringnga uppmaumlrksamheten samt un-

derlaumltta anvaumlndningen av webbplatsen (Wroblewski 2011)

41

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny

Andra menyn for kategorierna aumlr de fyra bilderna under Aeron chair slideshowen

Paring den tidigare designen ser man endast ett foumlnster av kategorierna som aumlr place-

rade i en kolumn som upprepas loggraumltt (Figur 66) Det haumlr goumlr att anvaumlndaren

maringste skrolla ner foumlr att se varenda kategori vilket kan orsaka obekvaumlmlighet Att

se flera kategorier paring samma skaumlrm sparar tid och anvaumlndaren kommer aumlven baumlttre

iharingg var sakerna finns Att ha bara rdquoenrdquo stor bild som syns paring skaumlrmen och vara

tvungen att skrolla ner foumlr att se naumlsta bild aumlr frustrerande Paring den nya designen

har jag tvaring rutor av kategorier bredvid varandra (Figur 66)

42

Figur 66 Kategorier paring den gamla designen (till vaumlnster) Kategorier paring den nya designen (till houmlger)

4 Ta det roliga ur shopping

Paring den nya designen straumlvar jag efter att erbjuda en bekvaumlm shopping-upplevelse

Naumlr anvaumlndarna besoumlker e-handeln med en smarttelefon foumlrvaumlntar hanhon sig

ocksaring att kunna ta del av allt inneharingll och goumlra jaumlmfoumlrelser med andra produkter

Jag har daumlrfoumlr i den nya designen pressat ihop laumlngden paring kolumnhoumljden som om-

ringar produkten Som resultat ser vi nu fyra produkter paring samma skaumlrm (Figur

67) I den tidigare designen ser vi en enda produkt paring en skaumlrm och foumlr att se

andra produkter maringste vi skrolla ner Paring det haumlr saumlttet har anvaumlndarna svaringrare att

jaumlmfoumlra produkterna (Laya 2014)

43

Figur 67 Tidigare produktsida (till vaumlnster) Ny produktsida (till houmlger)

I den tidigare designen ser vi ocksaring att det finns endast produktens bild produk-

tens namn koumlpvagnen och infoikonen Om man vill faring reda paring produktens inform-

ation maringste man klicka paring produktens bild eller paring infoikonen som foumlr oss direkt

till sjaumllva produktens sida Bara foumlr att man vill faring reda paring vad det aumlr foumlr produkt

foumlrs man vidare till en annan sida Det haumlr kan orsaka att kunden inte njuter totalt

av shoppingen och dessutom kan han inte jaumlmfoumlra produkterna naumlr han aumlr paring ka-

tegoriernas sida (Laya 2014)

Laringt oss hoppa vidare till den nya designen (Figur 68) Paring den nya designen har

jag satt in en kort detaljbeskrivning foumlr varje produkt Dessutom naumlr man klickar

paring infoikonen paring houmlgra sidan kommer man inte direkt till produktsidan utan det

kommer att dyka upp en inforuta som har en kort beskrivning paring produkten Om

anvaumlndaren aumlr intresserad av produkten kan han garing in till sjaumllva produktsida ge-

nom att klicka paring rdquoView productrdquo eller ocksaring paring produktbilden daumlr hanhon kan

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

11

2 VAD AumlR E-HANDEL

E-handel fungerar genom att ett foumlretag eller individuell person koumlper saumlljer ut eller byter

produkter information eller tjaumlnst via internet eller andra datornaumltverk (Wikipedia)

En stor del av e-handeln aumlger rum i de saring kallade naumltbutikerna Naumltbutiker har ett lager

och en webbplats daumlr kunden goumlr sina bestaumlllningar Paring webbplatsen indelas varorna i

olika kategorier saring att anvaumlndarna paring sidan kan laumltt hitta varorna Foumlr att hitta varorna

snabbare brukar de flesta naumltbutikerna ocksaring ha en soumlkfunktion Paring sidan har anvaumlndarna

moumljligheter att saumltta produktenprodukter i kundvagnen och sedan fortsaumltta shoppa tills

man aumlr klar Vid bestaumlllningen garingr man bara till kassan daumlr anvaumlndaren kommer att vaumllja

transportsaumltt ange kontakt- och leveransuppgifter och vaumllja betalningsmetod Betalnings-

metoden aumlr vanligtvis kreditkort eller Paypal

Fakturan daumlrmed brukar inte ges till kunden daring det skulle innebaumlra oumlkade risker foumlr be-

draumlgerier foumlr naumltbutikerna Foumlr fakturakoumlp behoumlver kundens identitet faststaumlllas paring ett saumlk-

rare saumltt

Naumlr betalningen har gjorts levereras varorna vanligtvis som postpaket eller direkt leverans

till doumlrren foumlr stoumlrre varor saringsom moumlbler (E-handel 2015)

ldquoE-handeln fortsatter att vaxa Nastan hela tillvaxten sker numera i mobilen Det ar

inte priset som gor att vi handlar pa natet De viktigaste skalen ar att det ar smidigare

och att utbudet ar storre an i traditionella butikerrdquo

-Larsson Daniel 2014

21 Mobil e-handel

Mobil e-handel (m-handel) aumlr en term som beskriver en foumlrsaumlljningstransaktion som an-

vaumlnder traringdloumlsa elektroniska enheter saringsom smarttelefoner och surfplattor En mobil e-

handel webbplats fungerar i alla smarttelefoner och surfplattor och aumlr anpassad samt op-

timerad foumlr mobilens webblaumlsare

12

Foumlr att naring den mobila webbplatsen behoumlver man inte skriva in mobil adress eller aktivt

vaumllja att visa den mobila butiken Den mobila webbplatsen av en e-handel kaumlnner auto-

matiskt igen om man anvaumlnder en dator eller en mobil och visar daring upp en optimerad

version som anpassas efter anvaumlndarnas behov (Nordisk e-handel)

I den mobila versionen av e-handel brukar kategorier bestaring av endast en sida Foumlr att se

paring de resterande produkter i kategorierna kan man trycka paring rdquoVisa flerrdquo som man oftast

hittar laumlngst ner som en knapp eller laumlnk Detta goumlr uppladdningstiden paring sidan betydligt

snabbare och anvaumlndarna slipper vaumlnta Vaumlntande kan leda till avbrutna koumlp

Foumlrutom kategorier produkter och kassa i sjaumllvbetjaumlningsbutik foumlr kunder med produkter

som aumlr optimerade foumlr mobilanvaumlndarna aumlr ocksaring betalvaumlxeln foumlr kortbetalning specialan-

passad Detta goumlr det snabbare och enklare foumlr anvaumlndarnakunderna att avsluta sina koumlp

och betala med sina betalningskort (Mobil e-handel 2012)

22 Varfoumlr handla med mobil

Foumlr att kunna designa en ny mobil e-handel foumlr en kund aumlr det foumlrst jaumltte viktigt att veta

varfoumlr anvaumlndarna vaumlljer att koumlpa produktertjaumlnster med en smarttelefon eller surfplattor

Med hjaumllp av DIBS aringrliga rapport som gjordes i Sverige 2014 visas det att den viktigaste

orsaken till att anvaumlndarna handlar med sin mobil aumlr att det aumlr smidigare och sparar tid

Samtidigt aumlr det viktigt att inte heller gloumlmma bort att andra handlingsmotiv lyfts fram

som viktiga av mer aumln haumllften av alla tillfraringgade E-handel aumlr bra paring maringnga olika saumltt Den

moumlter konsumenternas behov och oumlnskemaringl i stor grad

Foumlr den nordiska befolkningen ska tidsbesparing enligt rapporten vara allra viktigaste foumlr

35-44 aringringar och minst viktig foumlr de yngsta aringldersgruppen 15-24 aringr som foumlr vilka laringga

priser istaumlllet spelar mer roll Utoumlver laringga priser drivs ungdomarna ocksaring oftast av det

stoumlrre utbudet som naumltbutikerna erbjuder paring internet

13

Figur 21 Viktigaste skaumllet att naumlthandel sparar tid

Enligt statiken visar det viktigaste skaumllet varfoumlr man anvaumlnder mobilen foumlr e-handel

64 saumlger att det sparar tid och aumlr smidigt

58 saumlger att det aumlr foumlrmaringnligare

56 saumlger att det aumlr enklare att jaumlmfoumlra mellan olika produkter

43 saumlger att det finns stoumlrre produktutbud

52 saumlger att det aumlr alltid oumlppet

23 Antalet kop okar pa mobilen

Enligt DIBS aringrliga rapport (2014) om mobil e-handel oumlkar antalet mobila e-handel kon-

sumenter hela tiden Nedan finns en figur om antalet under aringr 2013-2014 Figuren visar

hur maringnga garingnger konsumenterna har handlat varortjaumlnster med en smarttelefon eller

surfplattor under de senaste sex maringnaderna Naumlthandeln paring mobila enheterna oumlkar sakta

med saumlkert De som har handlat paring naumltet foumlrut handlar nu ocksaring allt mer Andelen stor-

konsumenter de som handlat minst 25 garingnger paring ett halvaringr har nu foumlrdubblats

De som handlade en eller tvaring garingnger har minskat fraringn 42 procent aringr 2013 till 35 procent

aringr 2014 vilket goumlr det till 17 procent mindre I snitt handlar konsumenter 1114 garingnger

per aringr med sin smarttelefon eller surfplattor

14

Figur 22 Antal oumlkar paring mobilen

Mobilen finns alltid naumlrmast

Enligt rapporten ska den vanligaste orsaken till varfoumlr anvaumlndarna vaumlljer att handla fraringn

mobilen vara foumlr att mobilen fanns naumlrmast till hands vid koumlpoumlgonblicket

Figur 23Varfoumlr handlade du med smarttelefon

15

60 saumlger att smarttelefon fanns naumlrmaste till hands vid koumlptillfaumlllet

27 anvaumlnder en app foumlr att handla online

17 oumlppnade ett erbjudande via e-mail i sin smarttelefon

5 har ingen dator

3 var i butik och koumlpte varan paring naumltet istaumlllet

4 hade ingen internetanslutning

3 scannade en QR-kod

Vad handlar vi med mobil

Foumlr att snabbt faringr en inblick i vad konsumenterna handlar med mobil ser vi haumlr nedan

(Figur 24) Konsumenter handlar mer av naumlstan allt Kunder som spenderar mer aumln 500

euro med smarttelefoner eller surfplattor koumlper i foumlrsta hand resor medan de som handlar

foumlr mindre aumln 100 euro laumlgger pengar paring media

Figur 24 Mobilt handlar vi mer av naumlstan allt

16

24 Bra mobila e-handel webbplatser

En bra mobil webbplats aumlr naumlr sidan aumlr enkel att anvaumlnda fast man bara anvaumlnder ett oumlga

och en tumme

rdquoWhen reflecting on a lot of mobile usage patterns I like to imagine people as rdquoone

eyeball and one thumb One thumb because they are likely to be holding their mobile

in one hand and using a single thumb to control it one eyeball because in many loca-

tions where mobile devices are use we only have peoples partial attentionrdquo

-Wroblewski Luke 2011)

Man kan aldrig exakt veta var anvaumlndaren befinner sig naumlr han surfar med sin smarttele-

fon Han kanske befinner sig i vardagsrummet foumlr att sloumltt surfa efter en ny lampa medan

han kollar paring Tvn Kanske anvaumlndaren sitter hemma och har en stadig wifi eller kanske

paring sommarstugan och har 3G4G som byter mellan olika naumltverk osv (Thoren 2012)

Naumlr anvaumlndaren goumlr naringgonting samtidigt som han surfar paring webbplatsen har han bara den

partiella uppmaumlrksamheten Daumlrfoumlr aumlr det betydligt fler kontexter som man maringste ta haumln-

syn till naumlr man designar webbplatser foumlr mobiler (Wroblewski 2011)

Haumlr aumlr tvaring bra exempel av lyckad e-handel foumlretag i vaumlrlden De har inte lyckats bra bara

med att saumllja produkterna utan ocksaring med designen Haumlr nedan aumlr bilderna paring mobil de-

signen av Rakutencom och Amazoncom

17

Figur 25 Hemsida paring rakutencom foumlr mobiler

Direkt naumlr man kommer paring sidan hittar man inloggningen koumlpvagnen soumlkfunktionen

menyn och speciellt de stora bilderna paring katalogerna vilket aumlr jaumltte laumltta att klicka paring

Fastaumln mobilskaumlrmen aumlr liten goumlr den haumlr det bara inte laumltt att navigera runt sidorna utan

ocksaring trevligt att vara paring sidan

Amazoncom har ocksaring lyckats bra med designen Naumlr man kommer till sidan ser man

direkt Sign in Department Wish List Deals och Search funktionen Under search funkt-

ionen ser man genast en inspirerande reklam som paringminner oss om att det aumlr varingr

rdquoSPRINGacuteS PERFECT PANTSrdquo Fast sidan har jaumltte maringnga objekt i den aumlr det trots allt

18

jaumltte laumltt att navigera runt sidorna Man tappar inte bort sig och man hittar laumltt det som

man aumlr ute efter

Figur 26 Hemsida paring amazoncom foumlr mobiler

19

25 Kritiska punkterna foumlr bra mobil design paring e-handel

Naumlr man handlar med en mindre skaumlrm aumlr det mera utmanande eftersom skaumlrmen aumlr liten

och anvaumlndarna brukar inte ha tillraumlckligt med taringlamod att sitta och soumlka naringgonting foumlr

laumlnge fraringn en liten skaumlrm Daumlrfoumlr aumlr det viktigt att veta vilka saker man boumlr beakta naumlr

man designar en mobil e-handel I det haumlr stycket kommer jag att lista upp sakerna man

boumlr veta naumlr man designar en mobil e-handel webbplats

Naumlr man handlar med en mindre skaumlrm aumlr det mera utmanande eftersom skaumlrmen aumlr liten

och anvaumlndarna brukar inte ha tillraumlckligt med taringlamod att sitta och soumlka naringgonting foumlr

laumlnge paring en liten skaumlrm Daumlrfoumlr aumlr det viktigt att veta vilka saker man boumlr beakta naumlr man

designar en mobil e-handel I det haumlr stycket kommer jag att lista upp kritiska saker man

boumlr veta naumlr man designar en mobil e-handel webbplats

1 Call-to-action knapparna foumlr smaring paring en mobilskaumlrm

Naumlr man designar webbsidor foumlr mobiler kan det ibland vara en utmaning att faring

allt att rymmas in Daumlrfoumlr brukar ocksaring webbdesigner minska de sk rdquocall to act-

ionrdquo knapparna Om anvaumlndaren maringste zooma in foumlr att klicka paring en knapp men

av misstag klickar paring en annan knapp kan det bli frustrerande foumlr dem och detta

leder sedan till att de laumlmnar sidan Daumlrfoumlr aumlr det mycket viktigt att designa knap-

parna och inneharingllet saring att anvaumlndarna laumltt naringr dem

2 Soumlkfunktionen ska alltid finnas med

Paring mobila e-handel webbplatser ska soumlkfunktionen alltid synas saring att man laumltt skall

kunna soumlka produkterna Laringt oss saumlga att kunden inte hittar produkten han soumlker

och vill anvaumlnda soumlkfunktionen Han letar och letar efter soumlkfunktionen utan re-

sultat Detta orsakar inte bara att kunden laumlmnar din sida men ocksaring kommer han

att beraumlttar det vidare aringt andra hur han upplevde din sida (Mehra 2015)

3 Laumltt att navigera

20

Det ska vara laumltt att navigera runt sidorna Anvaumlndarna ska veta var han aumlr och hur

han kommer vidare efter att han tex har valt produkten Menyerna foumlr katalo-

gerna ska vara laumltta att navigera Om menyerna foumlr katalogerna aumlr foumlrvirrande och

svaringra foumlr anvaumlndaren att hitta produkterna blir han laumltt irriterad Exemplar paring (fi-

gur 27) haumlr nedan visar att menyerna aumlr ganska foumlrvirrande paring vaumlnstra bilden me-

dan paring houmlgra sidan aumlr det klart och tydligt (Laya 2014)

Figur 27 Jaumlmfoumlrelse mellan en bra och daringlig navigation httpconversionxlcommake-mobile-convert

4 Ta de roliga ur shopping

Det vanligaste och stoumlrsta misstaget som de flesta foumlretag goumlr naumlr de designar foumlr

mobil e-handel aumlr att de foumlrsoumlker flytta kunderna fraringn shopping till koumlp Shopping

paring en stationaumlr dator goumlr det laumltt naumlr det oftast finns ett enormt antal produkter att

vaumllja mellan och det aumlr laumltt att blaumlddra runt Men foumlr mobiler aumlr det annat

Maringnga foumlretag foumlrsoumlker pressa ihop hela shopping-processen till smaring tabbar och

minska paring inneharingllet Som resultat kommer anvaumlndaren att kaumlnna sig paringtvingad

21

att goumlra snabba beslut paring inkoumlp Istaumlllet foumlr att ge anvaumlndarna en saringdan paringtvingad

upplevelse kan man istaumlllet locka anvaumlndarna med all information vi har att er-

bjuda

Det betyder inte att anvaumlndarna som besoumlker e-handeln med en smarttelefon inte

vill njuta av shoppingen saringsom de goumlr paring stationaumlra datorer Naumlr man designar en

mobil e-handel skall kunderna kunna faring njuta av shoppingen och jaumlmfoumlra mellan

olika produkter innan dem bestaumlmmer sig vilken produkt de vill koumlpa (Laya 2014)

ldquoBut we see many companies try to compress the whole shopping process into a

small number of taps The result is a mobile app or website that forces the user to

make a quick purchase decision rather than giving a great shopping experience

To the user it feels like the site switches from giving enticement to issuing de-

mandsrdquo

- Laya Peep 2014

5 Laringngsam uppladdningstid foumlr mobiler spelar en stor roll

Det aumlr mycket viktigt att haringlla sidstorleken saring liten som moumljligt saring att det aumlr snabbt

att ladda upp sidan

ldquoMobile users want to take quick action and also Google has reportedly started

including page speed for ranking websites in the search results so that makes it

even more important to have a lighter siterdquo

- Mehra Gagan 2015

Varingren 2014 rapporterade Radware (httpwwwradwarecomspring-sotu2014)

att majoriteten av besoumlkarna kommer att oumlverge webbplatsen efter att ha vaumlntat i

3 sekunder foumlr att ladda upp sidan (Laya 2014)

Om det finns mycket inneharingll paring en sida kan man som alternativ separera inne-

haringllet i olika flikar (Mehra 2015)

Jag har tagit ett exempel fraringn Amazoncom Paring produktsidan har ja valt en orange

vaumlska Foumlr att tex ytterligare laumlsa om produktbeskrivningen rdquoAbout this itemrdquo ser

22

jag en pil som aumlr paring houmlgra sidan (Figur 29) Naumlr jag trycker paring pilen eller laringdan

kommer jag till en annan sida daumlr jag kan laumlsa hela produktbeskrivningen (Figur

210) Paring det haumlr saumlttet inneharingller sidan all information man behoumlver men separe-

rade i olika flikar saring att det blir snabbare att ladda upp sidan

Figur 28 Produktsida paring amazoncom

23

Figur 29 Produktsida paring amazoncom

Figur 210 Produktsida paring amazoncom About this item

24

6 Misslyckade analyseringar av anvaumlndarna

Naumlr man bygger webbsidor aumlr det viktig att goumlra anvaumlndbarhetstest och analysera

kundernas beteende Hur anvaumlndarna kaumlnner sig naumlr de anvaumlnder sidan aumlr mycket

viktigt och avgoumlr hur bra din business kommer att rulla

Analyseringen aumlr den kritiska inputen foumlr designen Med analyseringen ser man

dels vilka mobila apparater anvaumlndarna anvaumlnder och om det aumlr naringgra svaringrigheter

och obekvaumlmligheter anvaumlndarna upplever vid anvaumlndningen Dessa faktorer aumlr

viktiga foumlr att saumlkerstaumllla om den mobila upplevelsen uppfyller behoven hos kon-

sumenterna Testet och analysen maringste goumlras kontinuerligt foumlr att vi skall kunna

saumlkerstaumllla att kunderna har det bekvaumlmt (Mehra 2015)

7 Mindre inneharingll foumlr mobilanvaumlndarna

E-handel webbplatser brukar goumlmma inneharingll foumlr att goumlra sidan mindre Sidan aumlr

i sjaumllva verket inte mindre men bara goumlmd foumlr anvaumlndarna som anvaumlnder sina

smarttelefoner Enligt Mehra Gagan aumlr det inte bra om det finns mindre inneharingll

foumlr mobilanvaumlndarna Oavsett med vilka enheter anvaumlndarna aumlr paring sidan boumlr det

finnas lika mycket inneharingll paring alla enheterna De flesta som handlar online brukar

aumlga flera enheter och med stor sannolikhet anvaumlnder de ocksaring andra enheter foumlr

att surfa Om inneharingllet inte ser likadant ut paring stationaumlra datorer och smarttelefo-

ner kan det orsaka daringlig anvaumlndarupplevelse foumlr anvaumlndaren Enligt Google an-

vaumlnder 90 av dem som handlar paring internet olika enheter Att begraumlnsa deras

anvaumlndning aumlr naringgonting som man boumlr undvika (Mehra 2015)

25

3 MOBILANPASSADE LOumlSNINGAR

Det finns maringnga olika loumlsningar att bygga sin webbplats med Det aumlr viktigt att komma

iharingg att mobila anvaumlndande oumlkar hela tiden Det staumlller nya krav paring webbdesign och an-

vaumlndargraumlnssnitt Anvaumlndarna foumlrvaumlntar sig idag att de ska kunna ta del av allt inneharingll paring

webben oavsett om de anvaumlnder en smarttelefon eller en surfplatta De mobilanpassade

loumlsningarna foumlr e-handel kan tex vara Responsiv design Adaptiv Design Mobilbutik

eller en mobil applikation

31 Adaptiv design

En adaptiv webbplats aumlr uppbyggd saring att den aumlr optimerad foumlr specifika skaumlrmstorlekar

Den anvaumlnder servern foumlr att upptaumlcka den enhet som anvaumlnds foumlr att visa webbplatsen

Byggande av webbplatsen med adaptiv metoden aumlr tidskraumlvande paring grund av behovet att

optimera sidan foumlr varje vald plattform front-end och back-end Innan man boumlrjar bygga

webbplatsen maringste man avgoumlra vilka alla plattformar webbplatsen kommer att optimeras

till Foumlrdel med adaptiv design aumlr att den har snabb uppladdningstid

rdquoCompared to Responsiv design adaptive web design is website-optimised for each

platform separately and makes use of the opportunities presented by the platform as

well as the models and functions It offers fast-loading pages due to the server detec-

tion device and browser sending data tailored for a particular devicerdquo

-Lubo Ruska 2013

Att vaumllja den raumltta loumlsningen handlar om att foumlrstaring vad maringlgruppen foumlrvaumlntar sig och vad

de behoumlver Eftersom foumlretaget 909jp inte aumlr en jaumltte stort foumlretag saringsom Ikea eller Ama-

zon som har oberaumlknat antal med produkter tycker jag att Responsiv design med Mobile

first metoden aumlr den mest effektiva metoden foumlr denna forskning

26

32 Responsiv design

Responsiv webbdesign aumlr ett av de populaumlraste saumltten att optimera en webbplats Re-

sponsiv webbdesign moumljliggoumlr att layouten foumlraumlndras beroende paring vilken skaumlrmstorlek

och skaumlrmupploumlsningen som anvaumlndarna har och beroende paring vilka funktioner som

webblaumlsaren stoumldjer (Responsive Design 2014)

Oberoende om anvaumlndarna anvaumlnder dator laumlsplatta eller sin mobiltelefon kommer sidan

att anpassa sig paring olika saumltt foumlr att anvaumlndarna vid alla tillfaumlllen ska ha en saring rik upplevelse

som moumljligt Man kan saumlga att en webbsida paring mindre skaumlrmar aumlr med ett annat ord en

krympande version av den stoumlrre skaumlrmstorleken

Inneharingllet saringsom kolumner och bilder paring webbsidan kommer automatiskt att anpassas

beroende paring skaumlrmstorleken Och detta aumlr paring grund av Grid systemet Allt inneharingll skall

haringllas inom ett Grid system Grid systemet skall skydda allt fraringn att bryta samman naumlr

sidan anvaumlnds paring olika skaumlrmstorlekar

Det finns 11 olika Grid storlekar tvaring kolumner tre kolumner fyra kolumner fem kolum-

ner sex kolumner sju kolumner aringtta kolumner nio kolumner tio kolumner 11 kolumner

och 12 kolumner Som exempel visar jag en figur av 12 kolumners Grid system (Swan

2014)

27

Figur 31 Ett exempel paring Grid system av 5 olika skaumlrmstorlekar (Phil Swan 2014)

Responsiv webbdesign fungerar med hjaumllp av HTML5 CSS media Query och Java-

Script Det bygger paring att webbutvecklare istaumlllet foumlr exakta storlekar maumltt i pixlar anger

sidelements storlekar i procent i jaumlmfoumlrelse med skaumlrmens storlek

Naumlr sidelementens storlekar aumlr i procent goumlr det att sidan blir flexibel och den anpassas

efter webblaumlsarens storlek medan fasta pixlar ger en scrollbar (rull-list) (Responsive De-

sign 2014)

33 Varfoumlr Responsiv design

Foumlrdelar med Responsiv design aumlr att den erbjuder en bra anvaumlndarupplevelse foumlr olika

enheter och skaumlrmstorlekar Tack vare den Responsiva designen har webbredaktoumlrer laumlt-

tare att hantera inneharingllet eftersom de bara har en version att hantera Ur en SEO synvin-

kel fungerar Responsiv design baumlttre eftersom den koncentrerar inneharingllet istaumlllet foumlr att

vattna ur det med maringnga URL foumlr samma inneharingll

28

Med en Responsiv design aumlr en webbplats laumlttare att hantera Att ha flera olika versioner

av en webbplats innebaumlr mera arbete Flera olika versioner av en webbplats innebaumlr sepa-

rata sidor att redigera och separata insatser foumlr soumlkmotoroptimering och separata soumlkmo-

torkampanjer Daumlrfoumlr aumlr det en stor foumlrdel att bygga en webbplats med den Responsiva

metoden

Med en Responsiv design kaumlnner anvaumlndarna baumlttre igen sidan baringde paring stationaumlra datorer

och mobiltelefoner Bygger man specifika webbplatser foumlr mobiler och surfplattor kan

det laumltt haumlnda att det blir olika information paring webbplatserna och att de struktureras olika

Laringt oss foumlrestaumllla oss att naringgon anvaumlnder sin mobiltelefon paring lunchen foumlr att leta efter en

flygbiljett fraringn Helsingfors till Tokyo Personen hittar en webbplats som har bra erbju-

dande och bestaumlmmer sig foumlr att fortsaumltta kolla naumlr han eller hon kommer hem Naumlr per-

sonen har kommit hem anvaumlnder hen datorn istaumlllet foumlr mobilen Om webbplatsen som

personen kollade paring lunchpausen var en Responsiv webbplats faringr personen en smidig och

bra upplevelse vid oumlvergaringngen fraringn den mobila webbplatsen till stationaumlr dator

(Lindahl 2014)

Det aumlr vaumlldigt viktigt att ha sin webbplats att optimerad till saring maringnga enheter som moumljligt

foumlr att ingen vet vilka kommer att vara framtidens enheter och daumlrfoumlr anses en webbplats

som anpassar sig till maringnga olika format vara den baumlsta loumlsningen Innan man kan boumlrja

med att designa en Responsiv webbplats maringste man veta vilka skaumlrmupploumlsningar och

storlekar det finns tillgaumlngliga och aumlr populaumlra idag Foumlr att kunna rikta till de olika skaumlr-

mupploumlsningarna med Media Queries har jag listat upp olika enheternas skaumlrmupploumls-

ningar i pixlar haumlr nedan i tabellen

ResolutionGrafisk array Enhet som anvaumlnder denna resolution skaumlrmstorlek i pixel-

taumltheten i pixlar

2880x1800 15-inch Apple MacBook Pro with Retina display

2560 x 1700 Google Chromebook Pixel

2560 x 1600 Samsung Google Nexus 10

13-inch Apple MacBook Pro with Retina display

29

2560 x 1440 27-inch Apple iMac 102 111 113 122 (Late 2009 -

2012)

1920 x 1080 HTC One Samsung

Sony Xperia Z amp Xperia ZL

Asus PadFone Infinity

Acer Aspire S5

Asus Zenbook Prime

1600 x 900 Apple Macbook Air

1366 x 768 Small desktoplaptop screen resolution

Asus VivoTab RT

Samsung N350

1280 x 1024 Standard desktop screen resolution

1280 x 800 Asus PadFone 2

Samsung Galaxy Note

Sony Xperia Tablet S

1280 x 720 Sony Xperia S

HTC Windows Phone 8X

HTC One mini

1136 x 640 Apple iPhone 5 5S amp 5C

Apple iPod Touch (5th generation)

960 x 640 Apple iPhone 4 amp 4S

Apple iPod Touch (4th generation)

854 x 480 Sony Xperia ray

Nokia N9

800 x 480 Nokia Lumia 510 amp 520

Samsung Galaxy I Galaxy S Galaxy S Plus Galaxy S Ad-

vance Galaxy SL Galaxy S Duos Galaxy Xcover 2 Galaxy

Beam Nexus S Captivate Glide amp Galaxy S III mini

HTC Desire X HTC Desire V Desire VC Desire VT De-

sire U amp Windows Phone 8S

30

LG Optimus 2X Optimus EX Optimus L5 II Optimus Q2

amp Optimus Black

T-Mobile G2x

Asus E600

620 x 480 Blackberry Bold 9900 amp Bold Touch 9930

Blackberry Torch 9810

LG Optimus Z

640 x 360 Sony Ericsson Vivaz amp Vivaz Pro

Nokia 500 amp 5800 XpressMusic

Nokia N8 N97 E7 and X6

480 x 320 Apple iPhone 3G amp 3GS

Samsung Galaxy Ace

320 x 240 Nokia E71

Blackberry Curve 9220 amp 9320

Sony Ericsson txt

Samsung Galaxy Y amp Galaxy Chat

Nokia Asha 501

Figur 32 Resolutions referenser paring olika enheter

31

4 VAD AumlR MOBILE FIRST

Mobile first metoden aumlr en metod och arbetsprocess foumlr webbdesigners som aumlr skapad av

Luke Wroblewski Naumlr man jobbar med ett projekt och designar strukturerar och imple-

menterar en webbplats aumlr Mobile first metoden man paringboumlrjar arbetet med Med metoden

menar Wroblewski att man foumlrst boumlrjar designa webbsidor fraringn de minsta enheterna

Figur 41 Mobile First att bygga webbsidan fraringn den minsta skaumlrmen till den stoumlrsta skaumlrmen

Wroblewski som har skapat Mobile First metoden understryker att metoden ska priorite-

ras daring man skapar anvaumlndarupplevelser

Det finns tre viktiga anledningar foumlr att utveckla foumlr Mobile First

Den foumlrbereder foumlr den stora utveckling och nya moumljligheter som uppkommer

inom det mobila omraringdet idag (836 av vaumlrldens befolkning anvaumlnder internet

paring sin smarttelefon 2015)

Den goumlr att vi blir tvungna att prioritera och fokusera varingrt inneharingll genom att ac-

ceptera de begraumlnsningar som aumlr foumlrenade med mobil design

32

och goumlr att vi kan leverera innovativa upplevelser genom att bygga utifraringn nya

funktioner som finns inbyggda i de mobila enheterna (bla GEO lokalisering)

En mobil webbplats behoumlver endast ha en mycket enkel layout och navigeringen ska vara

laumltt och effektiv

Naumlr man designar med Mobile first metoden tvingas man goumlra viktiga beslut om vad som

ska prioriteras Naumlr den optimerad design foumlr en liten skaumlrm visas paring en stoumlrre skaumlrm

kommer det att bli laumlttare att designa paring de stoumlrre skaumlrmarna Allt som ska goumlras aumlr daring

bara att fylla paring inneharingllet och designa saring att det aumlr grafiskt tilltalande och laumltt att hitta

inneharingllet (Wroblewski 2011)

41 Varfoumlr Mobile first

Vaumlrlden vi lever i idag aumlr inte mera som foumlr tio aringr sedan Allt runtom oss har utvecklats

speciellt mobiltelefonerna Tidigare anvaumlndes mobiltelefoner bara foumlr att skicka med-

delandet ringa och ta emot samtal Nu anvaumlnds den till foumlr att dels ta bilder video GPS

navigation foumlr vaumlgvisning och speciellt internetanvaumlndningen saringsom Google nyheter

Facebook Youtube och mycket mer Paring grund av det har ocksaring varingr livsstil foumlraumlndrats

Internetanvaumlndning idag har blivit allt vanligare Idag anvaumlnder vi naumltet i skolan paring jobbet

eller var och naumlr som helst bara man har en smarttelefon eller surfplatta och naumltet kopplat

Tidigare boumlrjade man bygga en webbplats fraringn den stoumlrsta skaumlrmen medan den mobila

sidan var en biprodukt Laringt oss saumlga att man har en webbplats med en rik grafisk layout

och ser stilig ut paring stationaumlra datorer Naumlr man skalar ner sidan foumlr att passa en mobilskaumlrm

kommer resultatet att vara en smaumlrta foumlr varingra oumlgon Paring den lilla mobilskaumlrmen kommer

det att vara olaumlsligt och svaringrt att anvaumlnda Foumlr att naring inneharingllet maringste du tom zooma in

och ut eller skrolla till houmlger och vaumlnster Det haumlr kommer att ge en negativ bild av ditt

foumlretag och anvaumlndarna kanske aldrig mera besoumlker din webbplats (Wroblewski 2011)

Ett bra exempel aumlr Tokyo Skytree webbplats som aumlnnu idag inte ha byggt in funktionalitet

och designen foumlr mindre skaumlrmupploumlsningar paring den engelska sidan

33

Tokyo Skytree aumlr vaumlrldens naumlst houmlgsta torn efter Burj Khalifa Tornet aumlr Japans houmlgsta

byggnadsverk med en houmljd paring 634 meter Den oumlppnades 22 maj 2012 och under det foumlrsta

aringret hade den 64 miljoner besoumlkare fraringn hela vaumlrlden Trots det har de laringtit bli att utveckla

den engelska webbsidan Paring bilden ser man att hemsidan ser exakt likadant ut paring stationaumlr

dator och paring mobilen

Figur 42 Hemsidan paring Tokyo Skytree paring stationaumlr datorskaumlrm

34

Figur 43 Hemsidan foumlr Tokyo Skytree Foumlrsta bilden visar hur det ser ut normalt Andra bilden visar naumlr man zoomar

in

Naumlr man foumlrsoumlker zooma in foumlr att laumlsa inneharingllet hoppar sidbalken (paring vaumlnstra sidan) paring

texten Det haumlr ger en mycket daringlig anvaumlndarupplevelse och kan ge fel bild av turistplat-

sen Ett annat fel paring sidan aumlr naumlr man vaumlljer spraringk till japanska ser sidan inte likadant ut

35

Figure 44 Hemsidan paring Tokyo Skytree paring japanska

Om du kan laumlsa japanska kommer du att undra varfoumlr det finns massor med information

och sidan ser mycket trevligare ut paring den japanska sidan Paring den internationella sidan

dvs engelska ser det inte lika trevligt ut och inneharingller inte allt som det goumlr paring den

japanska sidan Det aumlr som om den stoumlrsta maringlgruppen aumlr foumlr japanska turister och som

om de skulle inte bry sig om turister fraringn utlandet

Utoumlver det har de ocksaring byggt en mobilsida foumlr den japanska webbsidan Varfoumlr satsa bara

paring den japanska sidan och inte den engelska sidan naumlr maringlgruppen aumlr hela vaumlrlden

36

Figur 45 Mobil sidan paring Tokyo Skytree paring japanska

Vi lever i 2015 saring alla borde veta att det aumlr vaumlldigt viktig att ha en mobil webbplats som

erbjuder en bra anvaumlndarupplevelse paring alla spraringk som webbplatsen erbjuder Naumlr man har

sin sida paring flera spraringk och aumlndaring bestaumlmmer sig att bygga sidan ordentligt bara paring ett spraringk

kan anvaumlndarna faring en fel bild av foumlretaget I vaumlrsta fall kommer anvaumlndarna tycka att sidan

aumlr oparinglitligt och aringterkommer aldrig igen

Mobile first metoden aumlr daumlrfoumlr en mycket effektiv metod att bygga sin webbplats med

Man boumlrjar med att bygga sin webbplats fraringn den minsta skaumlrmen Man tvingas goumlra be-

slut om vad som ska absolut prioriteras Arbetsprocessen foumlr oss webbdesigners blir

mycket effektivare genom att foumlrst designa fraringn den minsta skaumlrmen och sedan foumlrflytta

oss till de stoumlrre skaumlrmarna Har man ett 6 kvadratmeters sovrum och foumlrsoumlker faring sin saumlng

skrivbord hylla klaumldskaringp och soffan att rymmas in aumlr det ganska utmanande Men naumlr

man boumlrjar med det mest utmanande i arbetsprocessen blir arbetet ocksaring mindre utma-

nande desto stoumlrre rum eller skaumlrm det blir (Wroblewski 2011)

37

5 909JP

909jp aumlr en elektronisk handel en moumlbelaffaumlr som saumlljer vaumlsterlaumlndska produkter Den

elektroniska butiken kommer att oumlppnas i Japan 2015 Deras foumlrvaumlntningar aumlr att faring in

en miljon dollar i foumlrsaumlljning per aringr I deras elektroniska moumlbelaffaumlr saumlljs bla stolar bord

soffor och lampor Maringlgruppen aumlr alla konsumenter mellan 18-60 aringringar

Japaner aumlr intresserade av vaumlsterlaumlndska produkter och livsstil men foumlr de flesta varor aumlr

designen knutna till deras egen kultur vilket goumlr dem mer intresserad Det aumlr ocksaring mycket

viktigt att ha sin hemsida paring japanska eftersom 99 av den japanska befolkningen foumlre-

drar att inte laumlsa inneharingllet paring andra spraringk (Khurana)

Japan aumlr ett land med vaumlrldens tredje stoumlrsta ekonomi paring 5 biljoner De har vaumlrldens ti-

onde stoumlrsta befolkning med ca 1271 miljoner invaringnare varav 70 av den totala befolk-

ningen anvaumlnder internet och 24 av dem anvaumlnder internet paring sin smarttelefon

(Khurana)

Viktigt med detta projekt aumlr att sikta aringt raumltt haringll och betjaumlna kunderna paring det baumlsta saumlttet

via webbplatsen Foumlr att kunna faringnga saring maringnga kunder som moumljligt aumlr det mycket viktigt

att designa en webbplats som aumlr anvaumlndarvaumlnlig stilig och laumltt att anvaumlnda (Wroblewski

2011)

Jag har daumlrfoumlr kommit underfund med att anvaumlnda Mobile first och Responsiv design

metoden foumlr att utveckla den mobila 909jp sidan Med tanke paring att det aumlr en Responsiv

design skall layouten paring den mobila versionen ocksaring passa in med de stoumlrre skaumlrmarna

naumlr sidan skalas upp Det aumlr dock viktigt poaumlngtera att jag endast kommer att koncentrera

mig paring den mobila designen och utveckla designen endast foumlr denna forskning

38

6 ANALYS AV DEN NYA DESIGNEN

Med hjaumllp av den tidigare designen paring 909jp och de kritiska punkterna jag har hittat under

forskningen har jag skapat en ny och foumlrbaumlttrad design av webbplatsen foumlr mobiler I det

haumlr kapitlet kommer jag att visa naringgra exempel paring den tidigare designen och jaumlmfoumlra den

med nya designen samt analysera arbetet

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger)

1 Call-to-action knapparna

Under hela arbetsprocessen har jag haft i minnet att navigeringar laumlnkar och knap-

parna ska vara tillraumlckligt stora att klicka paring I den tidigare designen har de stora

bilder paring kategorier vilket jag tycker aumlr en bra design att aringtervaumlnda

39

2 Soumlkfunktionen

Paring den tidigare versionen haumlr nedan ser man att soumlkfunktionen inte finns med

medan paring den nya designen ser man soumlkfunktionen genast naumlr man kommer till

sidan Som tidigare framfoumlrdes att soumlkfunktionen alltid ska synas saring att man laumltt

skall kunna soumlka fram produkterna Om soumlkfunktionen inte finns med eller aumlr svaringr

att hitta naumlr den behoumlvs kan det orsaka missnoumlje hos anvaumlndarna (Mehra Gagan

2015)

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp

Figur 63 Soumlkfunktionen paring den nya designen 909jp

40

3 Laumltt att navigera

Naumlr skaumlrmen aumlr liten aumlr det viktig att ha en enkel layout (Wroblewski 2011)

Jag har daumlrfor i den nya designen flyttat rdquoHemrdquo och rdquoBlogrdquo knapparna bort fraringn

den oumlvre menyn Hem-knappen finns nu i hamburgarmenyn paring vaumlnstra sidan me-

dan Blog-knappen finns i footer Detta goumlr att det ser mera organiserat ut

Figur 64 Gamla designen

Laringt oss foumlrflytta vidare till menyer foumlr kategorier Paring hemsidan har man tvaring alter-

nativ att naring kategorierna Foumlrsta aumlr den hamburgarmenyn knappen paring vaumlnstra si-

dan I menyn aumlr kategorierna indelade i fyra delar stolar lampor ergonomisk och

soffa amp middag Detta goumlr det laumltt och klart foumlr anvaumlndarna var produkterna finns

Eftersom vi bara har partiell uppmaumlrksamhet fraringn anvaumlndarna naumlr de aumlr paring sina

smarttelefoner har jag valt att saumltta in ikoner i menyn (Figur 65) Naumlr anvaumlndaren

bara anvaumlnder ena oumlgat foumlr att kolla paring mobilen och andra oumlgat foumlr naringgonting annat

ska den lilla skaumlrmen med webbplatsen kunna faringnga uppmaumlrksamheten samt un-

derlaumltta anvaumlndningen av webbplatsen (Wroblewski 2011)

41

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny

Andra menyn for kategorierna aumlr de fyra bilderna under Aeron chair slideshowen

Paring den tidigare designen ser man endast ett foumlnster av kategorierna som aumlr place-

rade i en kolumn som upprepas loggraumltt (Figur 66) Det haumlr goumlr att anvaumlndaren

maringste skrolla ner foumlr att se varenda kategori vilket kan orsaka obekvaumlmlighet Att

se flera kategorier paring samma skaumlrm sparar tid och anvaumlndaren kommer aumlven baumlttre

iharingg var sakerna finns Att ha bara rdquoenrdquo stor bild som syns paring skaumlrmen och vara

tvungen att skrolla ner foumlr att se naumlsta bild aumlr frustrerande Paring den nya designen

har jag tvaring rutor av kategorier bredvid varandra (Figur 66)

42

Figur 66 Kategorier paring den gamla designen (till vaumlnster) Kategorier paring den nya designen (till houmlger)

4 Ta det roliga ur shopping

Paring den nya designen straumlvar jag efter att erbjuda en bekvaumlm shopping-upplevelse

Naumlr anvaumlndarna besoumlker e-handeln med en smarttelefon foumlrvaumlntar hanhon sig

ocksaring att kunna ta del av allt inneharingll och goumlra jaumlmfoumlrelser med andra produkter

Jag har daumlrfoumlr i den nya designen pressat ihop laumlngden paring kolumnhoumljden som om-

ringar produkten Som resultat ser vi nu fyra produkter paring samma skaumlrm (Figur

67) I den tidigare designen ser vi en enda produkt paring en skaumlrm och foumlr att se

andra produkter maringste vi skrolla ner Paring det haumlr saumlttet har anvaumlndarna svaringrare att

jaumlmfoumlra produkterna (Laya 2014)

43

Figur 67 Tidigare produktsida (till vaumlnster) Ny produktsida (till houmlger)

I den tidigare designen ser vi ocksaring att det finns endast produktens bild produk-

tens namn koumlpvagnen och infoikonen Om man vill faring reda paring produktens inform-

ation maringste man klicka paring produktens bild eller paring infoikonen som foumlr oss direkt

till sjaumllva produktens sida Bara foumlr att man vill faring reda paring vad det aumlr foumlr produkt

foumlrs man vidare till en annan sida Det haumlr kan orsaka att kunden inte njuter totalt

av shoppingen och dessutom kan han inte jaumlmfoumlra produkterna naumlr han aumlr paring ka-

tegoriernas sida (Laya 2014)

Laringt oss hoppa vidare till den nya designen (Figur 68) Paring den nya designen har

jag satt in en kort detaljbeskrivning foumlr varje produkt Dessutom naumlr man klickar

paring infoikonen paring houmlgra sidan kommer man inte direkt till produktsidan utan det

kommer att dyka upp en inforuta som har en kort beskrivning paring produkten Om

anvaumlndaren aumlr intresserad av produkten kan han garing in till sjaumllva produktsida ge-

nom att klicka paring rdquoView productrdquo eller ocksaring paring produktbilden daumlr hanhon kan

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

12

Foumlr att naring den mobila webbplatsen behoumlver man inte skriva in mobil adress eller aktivt

vaumllja att visa den mobila butiken Den mobila webbplatsen av en e-handel kaumlnner auto-

matiskt igen om man anvaumlnder en dator eller en mobil och visar daring upp en optimerad

version som anpassas efter anvaumlndarnas behov (Nordisk e-handel)

I den mobila versionen av e-handel brukar kategorier bestaring av endast en sida Foumlr att se

paring de resterande produkter i kategorierna kan man trycka paring rdquoVisa flerrdquo som man oftast

hittar laumlngst ner som en knapp eller laumlnk Detta goumlr uppladdningstiden paring sidan betydligt

snabbare och anvaumlndarna slipper vaumlnta Vaumlntande kan leda till avbrutna koumlp

Foumlrutom kategorier produkter och kassa i sjaumllvbetjaumlningsbutik foumlr kunder med produkter

som aumlr optimerade foumlr mobilanvaumlndarna aumlr ocksaring betalvaumlxeln foumlr kortbetalning specialan-

passad Detta goumlr det snabbare och enklare foumlr anvaumlndarnakunderna att avsluta sina koumlp

och betala med sina betalningskort (Mobil e-handel 2012)

22 Varfoumlr handla med mobil

Foumlr att kunna designa en ny mobil e-handel foumlr en kund aumlr det foumlrst jaumltte viktigt att veta

varfoumlr anvaumlndarna vaumlljer att koumlpa produktertjaumlnster med en smarttelefon eller surfplattor

Med hjaumllp av DIBS aringrliga rapport som gjordes i Sverige 2014 visas det att den viktigaste

orsaken till att anvaumlndarna handlar med sin mobil aumlr att det aumlr smidigare och sparar tid

Samtidigt aumlr det viktigt att inte heller gloumlmma bort att andra handlingsmotiv lyfts fram

som viktiga av mer aumln haumllften av alla tillfraringgade E-handel aumlr bra paring maringnga olika saumltt Den

moumlter konsumenternas behov och oumlnskemaringl i stor grad

Foumlr den nordiska befolkningen ska tidsbesparing enligt rapporten vara allra viktigaste foumlr

35-44 aringringar och minst viktig foumlr de yngsta aringldersgruppen 15-24 aringr som foumlr vilka laringga

priser istaumlllet spelar mer roll Utoumlver laringga priser drivs ungdomarna ocksaring oftast av det

stoumlrre utbudet som naumltbutikerna erbjuder paring internet

13

Figur 21 Viktigaste skaumllet att naumlthandel sparar tid

Enligt statiken visar det viktigaste skaumllet varfoumlr man anvaumlnder mobilen foumlr e-handel

64 saumlger att det sparar tid och aumlr smidigt

58 saumlger att det aumlr foumlrmaringnligare

56 saumlger att det aumlr enklare att jaumlmfoumlra mellan olika produkter

43 saumlger att det finns stoumlrre produktutbud

52 saumlger att det aumlr alltid oumlppet

23 Antalet kop okar pa mobilen

Enligt DIBS aringrliga rapport (2014) om mobil e-handel oumlkar antalet mobila e-handel kon-

sumenter hela tiden Nedan finns en figur om antalet under aringr 2013-2014 Figuren visar

hur maringnga garingnger konsumenterna har handlat varortjaumlnster med en smarttelefon eller

surfplattor under de senaste sex maringnaderna Naumlthandeln paring mobila enheterna oumlkar sakta

med saumlkert De som har handlat paring naumltet foumlrut handlar nu ocksaring allt mer Andelen stor-

konsumenter de som handlat minst 25 garingnger paring ett halvaringr har nu foumlrdubblats

De som handlade en eller tvaring garingnger har minskat fraringn 42 procent aringr 2013 till 35 procent

aringr 2014 vilket goumlr det till 17 procent mindre I snitt handlar konsumenter 1114 garingnger

per aringr med sin smarttelefon eller surfplattor

14

Figur 22 Antal oumlkar paring mobilen

Mobilen finns alltid naumlrmast

Enligt rapporten ska den vanligaste orsaken till varfoumlr anvaumlndarna vaumlljer att handla fraringn

mobilen vara foumlr att mobilen fanns naumlrmast till hands vid koumlpoumlgonblicket

Figur 23Varfoumlr handlade du med smarttelefon

15

60 saumlger att smarttelefon fanns naumlrmaste till hands vid koumlptillfaumlllet

27 anvaumlnder en app foumlr att handla online

17 oumlppnade ett erbjudande via e-mail i sin smarttelefon

5 har ingen dator

3 var i butik och koumlpte varan paring naumltet istaumlllet

4 hade ingen internetanslutning

3 scannade en QR-kod

Vad handlar vi med mobil

Foumlr att snabbt faringr en inblick i vad konsumenterna handlar med mobil ser vi haumlr nedan

(Figur 24) Konsumenter handlar mer av naumlstan allt Kunder som spenderar mer aumln 500

euro med smarttelefoner eller surfplattor koumlper i foumlrsta hand resor medan de som handlar

foumlr mindre aumln 100 euro laumlgger pengar paring media

Figur 24 Mobilt handlar vi mer av naumlstan allt

16

24 Bra mobila e-handel webbplatser

En bra mobil webbplats aumlr naumlr sidan aumlr enkel att anvaumlnda fast man bara anvaumlnder ett oumlga

och en tumme

rdquoWhen reflecting on a lot of mobile usage patterns I like to imagine people as rdquoone

eyeball and one thumb One thumb because they are likely to be holding their mobile

in one hand and using a single thumb to control it one eyeball because in many loca-

tions where mobile devices are use we only have peoples partial attentionrdquo

-Wroblewski Luke 2011)

Man kan aldrig exakt veta var anvaumlndaren befinner sig naumlr han surfar med sin smarttele-

fon Han kanske befinner sig i vardagsrummet foumlr att sloumltt surfa efter en ny lampa medan

han kollar paring Tvn Kanske anvaumlndaren sitter hemma och har en stadig wifi eller kanske

paring sommarstugan och har 3G4G som byter mellan olika naumltverk osv (Thoren 2012)

Naumlr anvaumlndaren goumlr naringgonting samtidigt som han surfar paring webbplatsen har han bara den

partiella uppmaumlrksamheten Daumlrfoumlr aumlr det betydligt fler kontexter som man maringste ta haumln-

syn till naumlr man designar webbplatser foumlr mobiler (Wroblewski 2011)

Haumlr aumlr tvaring bra exempel av lyckad e-handel foumlretag i vaumlrlden De har inte lyckats bra bara

med att saumllja produkterna utan ocksaring med designen Haumlr nedan aumlr bilderna paring mobil de-

signen av Rakutencom och Amazoncom

17

Figur 25 Hemsida paring rakutencom foumlr mobiler

Direkt naumlr man kommer paring sidan hittar man inloggningen koumlpvagnen soumlkfunktionen

menyn och speciellt de stora bilderna paring katalogerna vilket aumlr jaumltte laumltta att klicka paring

Fastaumln mobilskaumlrmen aumlr liten goumlr den haumlr det bara inte laumltt att navigera runt sidorna utan

ocksaring trevligt att vara paring sidan

Amazoncom har ocksaring lyckats bra med designen Naumlr man kommer till sidan ser man

direkt Sign in Department Wish List Deals och Search funktionen Under search funkt-

ionen ser man genast en inspirerande reklam som paringminner oss om att det aumlr varingr

rdquoSPRINGacuteS PERFECT PANTSrdquo Fast sidan har jaumltte maringnga objekt i den aumlr det trots allt

18

jaumltte laumltt att navigera runt sidorna Man tappar inte bort sig och man hittar laumltt det som

man aumlr ute efter

Figur 26 Hemsida paring amazoncom foumlr mobiler

19

25 Kritiska punkterna foumlr bra mobil design paring e-handel

Naumlr man handlar med en mindre skaumlrm aumlr det mera utmanande eftersom skaumlrmen aumlr liten

och anvaumlndarna brukar inte ha tillraumlckligt med taringlamod att sitta och soumlka naringgonting foumlr

laumlnge fraringn en liten skaumlrm Daumlrfoumlr aumlr det viktigt att veta vilka saker man boumlr beakta naumlr

man designar en mobil e-handel I det haumlr stycket kommer jag att lista upp sakerna man

boumlr veta naumlr man designar en mobil e-handel webbplats

Naumlr man handlar med en mindre skaumlrm aumlr det mera utmanande eftersom skaumlrmen aumlr liten

och anvaumlndarna brukar inte ha tillraumlckligt med taringlamod att sitta och soumlka naringgonting foumlr

laumlnge paring en liten skaumlrm Daumlrfoumlr aumlr det viktigt att veta vilka saker man boumlr beakta naumlr man

designar en mobil e-handel I det haumlr stycket kommer jag att lista upp kritiska saker man

boumlr veta naumlr man designar en mobil e-handel webbplats

1 Call-to-action knapparna foumlr smaring paring en mobilskaumlrm

Naumlr man designar webbsidor foumlr mobiler kan det ibland vara en utmaning att faring

allt att rymmas in Daumlrfoumlr brukar ocksaring webbdesigner minska de sk rdquocall to act-

ionrdquo knapparna Om anvaumlndaren maringste zooma in foumlr att klicka paring en knapp men

av misstag klickar paring en annan knapp kan det bli frustrerande foumlr dem och detta

leder sedan till att de laumlmnar sidan Daumlrfoumlr aumlr det mycket viktigt att designa knap-

parna och inneharingllet saring att anvaumlndarna laumltt naringr dem

2 Soumlkfunktionen ska alltid finnas med

Paring mobila e-handel webbplatser ska soumlkfunktionen alltid synas saring att man laumltt skall

kunna soumlka produkterna Laringt oss saumlga att kunden inte hittar produkten han soumlker

och vill anvaumlnda soumlkfunktionen Han letar och letar efter soumlkfunktionen utan re-

sultat Detta orsakar inte bara att kunden laumlmnar din sida men ocksaring kommer han

att beraumlttar det vidare aringt andra hur han upplevde din sida (Mehra 2015)

3 Laumltt att navigera

20

Det ska vara laumltt att navigera runt sidorna Anvaumlndarna ska veta var han aumlr och hur

han kommer vidare efter att han tex har valt produkten Menyerna foumlr katalo-

gerna ska vara laumltta att navigera Om menyerna foumlr katalogerna aumlr foumlrvirrande och

svaringra foumlr anvaumlndaren att hitta produkterna blir han laumltt irriterad Exemplar paring (fi-

gur 27) haumlr nedan visar att menyerna aumlr ganska foumlrvirrande paring vaumlnstra bilden me-

dan paring houmlgra sidan aumlr det klart och tydligt (Laya 2014)

Figur 27 Jaumlmfoumlrelse mellan en bra och daringlig navigation httpconversionxlcommake-mobile-convert

4 Ta de roliga ur shopping

Det vanligaste och stoumlrsta misstaget som de flesta foumlretag goumlr naumlr de designar foumlr

mobil e-handel aumlr att de foumlrsoumlker flytta kunderna fraringn shopping till koumlp Shopping

paring en stationaumlr dator goumlr det laumltt naumlr det oftast finns ett enormt antal produkter att

vaumllja mellan och det aumlr laumltt att blaumlddra runt Men foumlr mobiler aumlr det annat

Maringnga foumlretag foumlrsoumlker pressa ihop hela shopping-processen till smaring tabbar och

minska paring inneharingllet Som resultat kommer anvaumlndaren att kaumlnna sig paringtvingad

21

att goumlra snabba beslut paring inkoumlp Istaumlllet foumlr att ge anvaumlndarna en saringdan paringtvingad

upplevelse kan man istaumlllet locka anvaumlndarna med all information vi har att er-

bjuda

Det betyder inte att anvaumlndarna som besoumlker e-handeln med en smarttelefon inte

vill njuta av shoppingen saringsom de goumlr paring stationaumlra datorer Naumlr man designar en

mobil e-handel skall kunderna kunna faring njuta av shoppingen och jaumlmfoumlra mellan

olika produkter innan dem bestaumlmmer sig vilken produkt de vill koumlpa (Laya 2014)

ldquoBut we see many companies try to compress the whole shopping process into a

small number of taps The result is a mobile app or website that forces the user to

make a quick purchase decision rather than giving a great shopping experience

To the user it feels like the site switches from giving enticement to issuing de-

mandsrdquo

- Laya Peep 2014

5 Laringngsam uppladdningstid foumlr mobiler spelar en stor roll

Det aumlr mycket viktigt att haringlla sidstorleken saring liten som moumljligt saring att det aumlr snabbt

att ladda upp sidan

ldquoMobile users want to take quick action and also Google has reportedly started

including page speed for ranking websites in the search results so that makes it

even more important to have a lighter siterdquo

- Mehra Gagan 2015

Varingren 2014 rapporterade Radware (httpwwwradwarecomspring-sotu2014)

att majoriteten av besoumlkarna kommer att oumlverge webbplatsen efter att ha vaumlntat i

3 sekunder foumlr att ladda upp sidan (Laya 2014)

Om det finns mycket inneharingll paring en sida kan man som alternativ separera inne-

haringllet i olika flikar (Mehra 2015)

Jag har tagit ett exempel fraringn Amazoncom Paring produktsidan har ja valt en orange

vaumlska Foumlr att tex ytterligare laumlsa om produktbeskrivningen rdquoAbout this itemrdquo ser

22

jag en pil som aumlr paring houmlgra sidan (Figur 29) Naumlr jag trycker paring pilen eller laringdan

kommer jag till en annan sida daumlr jag kan laumlsa hela produktbeskrivningen (Figur

210) Paring det haumlr saumlttet inneharingller sidan all information man behoumlver men separe-

rade i olika flikar saring att det blir snabbare att ladda upp sidan

Figur 28 Produktsida paring amazoncom

23

Figur 29 Produktsida paring amazoncom

Figur 210 Produktsida paring amazoncom About this item

24

6 Misslyckade analyseringar av anvaumlndarna

Naumlr man bygger webbsidor aumlr det viktig att goumlra anvaumlndbarhetstest och analysera

kundernas beteende Hur anvaumlndarna kaumlnner sig naumlr de anvaumlnder sidan aumlr mycket

viktigt och avgoumlr hur bra din business kommer att rulla

Analyseringen aumlr den kritiska inputen foumlr designen Med analyseringen ser man

dels vilka mobila apparater anvaumlndarna anvaumlnder och om det aumlr naringgra svaringrigheter

och obekvaumlmligheter anvaumlndarna upplever vid anvaumlndningen Dessa faktorer aumlr

viktiga foumlr att saumlkerstaumllla om den mobila upplevelsen uppfyller behoven hos kon-

sumenterna Testet och analysen maringste goumlras kontinuerligt foumlr att vi skall kunna

saumlkerstaumllla att kunderna har det bekvaumlmt (Mehra 2015)

7 Mindre inneharingll foumlr mobilanvaumlndarna

E-handel webbplatser brukar goumlmma inneharingll foumlr att goumlra sidan mindre Sidan aumlr

i sjaumllva verket inte mindre men bara goumlmd foumlr anvaumlndarna som anvaumlnder sina

smarttelefoner Enligt Mehra Gagan aumlr det inte bra om det finns mindre inneharingll

foumlr mobilanvaumlndarna Oavsett med vilka enheter anvaumlndarna aumlr paring sidan boumlr det

finnas lika mycket inneharingll paring alla enheterna De flesta som handlar online brukar

aumlga flera enheter och med stor sannolikhet anvaumlnder de ocksaring andra enheter foumlr

att surfa Om inneharingllet inte ser likadant ut paring stationaumlra datorer och smarttelefo-

ner kan det orsaka daringlig anvaumlndarupplevelse foumlr anvaumlndaren Enligt Google an-

vaumlnder 90 av dem som handlar paring internet olika enheter Att begraumlnsa deras

anvaumlndning aumlr naringgonting som man boumlr undvika (Mehra 2015)

25

3 MOBILANPASSADE LOumlSNINGAR

Det finns maringnga olika loumlsningar att bygga sin webbplats med Det aumlr viktigt att komma

iharingg att mobila anvaumlndande oumlkar hela tiden Det staumlller nya krav paring webbdesign och an-

vaumlndargraumlnssnitt Anvaumlndarna foumlrvaumlntar sig idag att de ska kunna ta del av allt inneharingll paring

webben oavsett om de anvaumlnder en smarttelefon eller en surfplatta De mobilanpassade

loumlsningarna foumlr e-handel kan tex vara Responsiv design Adaptiv Design Mobilbutik

eller en mobil applikation

31 Adaptiv design

En adaptiv webbplats aumlr uppbyggd saring att den aumlr optimerad foumlr specifika skaumlrmstorlekar

Den anvaumlnder servern foumlr att upptaumlcka den enhet som anvaumlnds foumlr att visa webbplatsen

Byggande av webbplatsen med adaptiv metoden aumlr tidskraumlvande paring grund av behovet att

optimera sidan foumlr varje vald plattform front-end och back-end Innan man boumlrjar bygga

webbplatsen maringste man avgoumlra vilka alla plattformar webbplatsen kommer att optimeras

till Foumlrdel med adaptiv design aumlr att den har snabb uppladdningstid

rdquoCompared to Responsiv design adaptive web design is website-optimised for each

platform separately and makes use of the opportunities presented by the platform as

well as the models and functions It offers fast-loading pages due to the server detec-

tion device and browser sending data tailored for a particular devicerdquo

-Lubo Ruska 2013

Att vaumllja den raumltta loumlsningen handlar om att foumlrstaring vad maringlgruppen foumlrvaumlntar sig och vad

de behoumlver Eftersom foumlretaget 909jp inte aumlr en jaumltte stort foumlretag saringsom Ikea eller Ama-

zon som har oberaumlknat antal med produkter tycker jag att Responsiv design med Mobile

first metoden aumlr den mest effektiva metoden foumlr denna forskning

26

32 Responsiv design

Responsiv webbdesign aumlr ett av de populaumlraste saumltten att optimera en webbplats Re-

sponsiv webbdesign moumljliggoumlr att layouten foumlraumlndras beroende paring vilken skaumlrmstorlek

och skaumlrmupploumlsningen som anvaumlndarna har och beroende paring vilka funktioner som

webblaumlsaren stoumldjer (Responsive Design 2014)

Oberoende om anvaumlndarna anvaumlnder dator laumlsplatta eller sin mobiltelefon kommer sidan

att anpassa sig paring olika saumltt foumlr att anvaumlndarna vid alla tillfaumlllen ska ha en saring rik upplevelse

som moumljligt Man kan saumlga att en webbsida paring mindre skaumlrmar aumlr med ett annat ord en

krympande version av den stoumlrre skaumlrmstorleken

Inneharingllet saringsom kolumner och bilder paring webbsidan kommer automatiskt att anpassas

beroende paring skaumlrmstorleken Och detta aumlr paring grund av Grid systemet Allt inneharingll skall

haringllas inom ett Grid system Grid systemet skall skydda allt fraringn att bryta samman naumlr

sidan anvaumlnds paring olika skaumlrmstorlekar

Det finns 11 olika Grid storlekar tvaring kolumner tre kolumner fyra kolumner fem kolum-

ner sex kolumner sju kolumner aringtta kolumner nio kolumner tio kolumner 11 kolumner

och 12 kolumner Som exempel visar jag en figur av 12 kolumners Grid system (Swan

2014)

27

Figur 31 Ett exempel paring Grid system av 5 olika skaumlrmstorlekar (Phil Swan 2014)

Responsiv webbdesign fungerar med hjaumllp av HTML5 CSS media Query och Java-

Script Det bygger paring att webbutvecklare istaumlllet foumlr exakta storlekar maumltt i pixlar anger

sidelements storlekar i procent i jaumlmfoumlrelse med skaumlrmens storlek

Naumlr sidelementens storlekar aumlr i procent goumlr det att sidan blir flexibel och den anpassas

efter webblaumlsarens storlek medan fasta pixlar ger en scrollbar (rull-list) (Responsive De-

sign 2014)

33 Varfoumlr Responsiv design

Foumlrdelar med Responsiv design aumlr att den erbjuder en bra anvaumlndarupplevelse foumlr olika

enheter och skaumlrmstorlekar Tack vare den Responsiva designen har webbredaktoumlrer laumlt-

tare att hantera inneharingllet eftersom de bara har en version att hantera Ur en SEO synvin-

kel fungerar Responsiv design baumlttre eftersom den koncentrerar inneharingllet istaumlllet foumlr att

vattna ur det med maringnga URL foumlr samma inneharingll

28

Med en Responsiv design aumlr en webbplats laumlttare att hantera Att ha flera olika versioner

av en webbplats innebaumlr mera arbete Flera olika versioner av en webbplats innebaumlr sepa-

rata sidor att redigera och separata insatser foumlr soumlkmotoroptimering och separata soumlkmo-

torkampanjer Daumlrfoumlr aumlr det en stor foumlrdel att bygga en webbplats med den Responsiva

metoden

Med en Responsiv design kaumlnner anvaumlndarna baumlttre igen sidan baringde paring stationaumlra datorer

och mobiltelefoner Bygger man specifika webbplatser foumlr mobiler och surfplattor kan

det laumltt haumlnda att det blir olika information paring webbplatserna och att de struktureras olika

Laringt oss foumlrestaumllla oss att naringgon anvaumlnder sin mobiltelefon paring lunchen foumlr att leta efter en

flygbiljett fraringn Helsingfors till Tokyo Personen hittar en webbplats som har bra erbju-

dande och bestaumlmmer sig foumlr att fortsaumltta kolla naumlr han eller hon kommer hem Naumlr per-

sonen har kommit hem anvaumlnder hen datorn istaumlllet foumlr mobilen Om webbplatsen som

personen kollade paring lunchpausen var en Responsiv webbplats faringr personen en smidig och

bra upplevelse vid oumlvergaringngen fraringn den mobila webbplatsen till stationaumlr dator

(Lindahl 2014)

Det aumlr vaumlldigt viktigt att ha sin webbplats att optimerad till saring maringnga enheter som moumljligt

foumlr att ingen vet vilka kommer att vara framtidens enheter och daumlrfoumlr anses en webbplats

som anpassar sig till maringnga olika format vara den baumlsta loumlsningen Innan man kan boumlrja

med att designa en Responsiv webbplats maringste man veta vilka skaumlrmupploumlsningar och

storlekar det finns tillgaumlngliga och aumlr populaumlra idag Foumlr att kunna rikta till de olika skaumlr-

mupploumlsningarna med Media Queries har jag listat upp olika enheternas skaumlrmupploumls-

ningar i pixlar haumlr nedan i tabellen

ResolutionGrafisk array Enhet som anvaumlnder denna resolution skaumlrmstorlek i pixel-

taumltheten i pixlar

2880x1800 15-inch Apple MacBook Pro with Retina display

2560 x 1700 Google Chromebook Pixel

2560 x 1600 Samsung Google Nexus 10

13-inch Apple MacBook Pro with Retina display

29

2560 x 1440 27-inch Apple iMac 102 111 113 122 (Late 2009 -

2012)

1920 x 1080 HTC One Samsung

Sony Xperia Z amp Xperia ZL

Asus PadFone Infinity

Acer Aspire S5

Asus Zenbook Prime

1600 x 900 Apple Macbook Air

1366 x 768 Small desktoplaptop screen resolution

Asus VivoTab RT

Samsung N350

1280 x 1024 Standard desktop screen resolution

1280 x 800 Asus PadFone 2

Samsung Galaxy Note

Sony Xperia Tablet S

1280 x 720 Sony Xperia S

HTC Windows Phone 8X

HTC One mini

1136 x 640 Apple iPhone 5 5S amp 5C

Apple iPod Touch (5th generation)

960 x 640 Apple iPhone 4 amp 4S

Apple iPod Touch (4th generation)

854 x 480 Sony Xperia ray

Nokia N9

800 x 480 Nokia Lumia 510 amp 520

Samsung Galaxy I Galaxy S Galaxy S Plus Galaxy S Ad-

vance Galaxy SL Galaxy S Duos Galaxy Xcover 2 Galaxy

Beam Nexus S Captivate Glide amp Galaxy S III mini

HTC Desire X HTC Desire V Desire VC Desire VT De-

sire U amp Windows Phone 8S

30

LG Optimus 2X Optimus EX Optimus L5 II Optimus Q2

amp Optimus Black

T-Mobile G2x

Asus E600

620 x 480 Blackberry Bold 9900 amp Bold Touch 9930

Blackberry Torch 9810

LG Optimus Z

640 x 360 Sony Ericsson Vivaz amp Vivaz Pro

Nokia 500 amp 5800 XpressMusic

Nokia N8 N97 E7 and X6

480 x 320 Apple iPhone 3G amp 3GS

Samsung Galaxy Ace

320 x 240 Nokia E71

Blackberry Curve 9220 amp 9320

Sony Ericsson txt

Samsung Galaxy Y amp Galaxy Chat

Nokia Asha 501

Figur 32 Resolutions referenser paring olika enheter

31

4 VAD AumlR MOBILE FIRST

Mobile first metoden aumlr en metod och arbetsprocess foumlr webbdesigners som aumlr skapad av

Luke Wroblewski Naumlr man jobbar med ett projekt och designar strukturerar och imple-

menterar en webbplats aumlr Mobile first metoden man paringboumlrjar arbetet med Med metoden

menar Wroblewski att man foumlrst boumlrjar designa webbsidor fraringn de minsta enheterna

Figur 41 Mobile First att bygga webbsidan fraringn den minsta skaumlrmen till den stoumlrsta skaumlrmen

Wroblewski som har skapat Mobile First metoden understryker att metoden ska priorite-

ras daring man skapar anvaumlndarupplevelser

Det finns tre viktiga anledningar foumlr att utveckla foumlr Mobile First

Den foumlrbereder foumlr den stora utveckling och nya moumljligheter som uppkommer

inom det mobila omraringdet idag (836 av vaumlrldens befolkning anvaumlnder internet

paring sin smarttelefon 2015)

Den goumlr att vi blir tvungna att prioritera och fokusera varingrt inneharingll genom att ac-

ceptera de begraumlnsningar som aumlr foumlrenade med mobil design

32

och goumlr att vi kan leverera innovativa upplevelser genom att bygga utifraringn nya

funktioner som finns inbyggda i de mobila enheterna (bla GEO lokalisering)

En mobil webbplats behoumlver endast ha en mycket enkel layout och navigeringen ska vara

laumltt och effektiv

Naumlr man designar med Mobile first metoden tvingas man goumlra viktiga beslut om vad som

ska prioriteras Naumlr den optimerad design foumlr en liten skaumlrm visas paring en stoumlrre skaumlrm

kommer det att bli laumlttare att designa paring de stoumlrre skaumlrmarna Allt som ska goumlras aumlr daring

bara att fylla paring inneharingllet och designa saring att det aumlr grafiskt tilltalande och laumltt att hitta

inneharingllet (Wroblewski 2011)

41 Varfoumlr Mobile first

Vaumlrlden vi lever i idag aumlr inte mera som foumlr tio aringr sedan Allt runtom oss har utvecklats

speciellt mobiltelefonerna Tidigare anvaumlndes mobiltelefoner bara foumlr att skicka med-

delandet ringa och ta emot samtal Nu anvaumlnds den till foumlr att dels ta bilder video GPS

navigation foumlr vaumlgvisning och speciellt internetanvaumlndningen saringsom Google nyheter

Facebook Youtube och mycket mer Paring grund av det har ocksaring varingr livsstil foumlraumlndrats

Internetanvaumlndning idag har blivit allt vanligare Idag anvaumlnder vi naumltet i skolan paring jobbet

eller var och naumlr som helst bara man har en smarttelefon eller surfplatta och naumltet kopplat

Tidigare boumlrjade man bygga en webbplats fraringn den stoumlrsta skaumlrmen medan den mobila

sidan var en biprodukt Laringt oss saumlga att man har en webbplats med en rik grafisk layout

och ser stilig ut paring stationaumlra datorer Naumlr man skalar ner sidan foumlr att passa en mobilskaumlrm

kommer resultatet att vara en smaumlrta foumlr varingra oumlgon Paring den lilla mobilskaumlrmen kommer

det att vara olaumlsligt och svaringrt att anvaumlnda Foumlr att naring inneharingllet maringste du tom zooma in

och ut eller skrolla till houmlger och vaumlnster Det haumlr kommer att ge en negativ bild av ditt

foumlretag och anvaumlndarna kanske aldrig mera besoumlker din webbplats (Wroblewski 2011)

Ett bra exempel aumlr Tokyo Skytree webbplats som aumlnnu idag inte ha byggt in funktionalitet

och designen foumlr mindre skaumlrmupploumlsningar paring den engelska sidan

33

Tokyo Skytree aumlr vaumlrldens naumlst houmlgsta torn efter Burj Khalifa Tornet aumlr Japans houmlgsta

byggnadsverk med en houmljd paring 634 meter Den oumlppnades 22 maj 2012 och under det foumlrsta

aringret hade den 64 miljoner besoumlkare fraringn hela vaumlrlden Trots det har de laringtit bli att utveckla

den engelska webbsidan Paring bilden ser man att hemsidan ser exakt likadant ut paring stationaumlr

dator och paring mobilen

Figur 42 Hemsidan paring Tokyo Skytree paring stationaumlr datorskaumlrm

34

Figur 43 Hemsidan foumlr Tokyo Skytree Foumlrsta bilden visar hur det ser ut normalt Andra bilden visar naumlr man zoomar

in

Naumlr man foumlrsoumlker zooma in foumlr att laumlsa inneharingllet hoppar sidbalken (paring vaumlnstra sidan) paring

texten Det haumlr ger en mycket daringlig anvaumlndarupplevelse och kan ge fel bild av turistplat-

sen Ett annat fel paring sidan aumlr naumlr man vaumlljer spraringk till japanska ser sidan inte likadant ut

35

Figure 44 Hemsidan paring Tokyo Skytree paring japanska

Om du kan laumlsa japanska kommer du att undra varfoumlr det finns massor med information

och sidan ser mycket trevligare ut paring den japanska sidan Paring den internationella sidan

dvs engelska ser det inte lika trevligt ut och inneharingller inte allt som det goumlr paring den

japanska sidan Det aumlr som om den stoumlrsta maringlgruppen aumlr foumlr japanska turister och som

om de skulle inte bry sig om turister fraringn utlandet

Utoumlver det har de ocksaring byggt en mobilsida foumlr den japanska webbsidan Varfoumlr satsa bara

paring den japanska sidan och inte den engelska sidan naumlr maringlgruppen aumlr hela vaumlrlden

36

Figur 45 Mobil sidan paring Tokyo Skytree paring japanska

Vi lever i 2015 saring alla borde veta att det aumlr vaumlldigt viktig att ha en mobil webbplats som

erbjuder en bra anvaumlndarupplevelse paring alla spraringk som webbplatsen erbjuder Naumlr man har

sin sida paring flera spraringk och aumlndaring bestaumlmmer sig att bygga sidan ordentligt bara paring ett spraringk

kan anvaumlndarna faring en fel bild av foumlretaget I vaumlrsta fall kommer anvaumlndarna tycka att sidan

aumlr oparinglitligt och aringterkommer aldrig igen

Mobile first metoden aumlr daumlrfoumlr en mycket effektiv metod att bygga sin webbplats med

Man boumlrjar med att bygga sin webbplats fraringn den minsta skaumlrmen Man tvingas goumlra be-

slut om vad som ska absolut prioriteras Arbetsprocessen foumlr oss webbdesigners blir

mycket effektivare genom att foumlrst designa fraringn den minsta skaumlrmen och sedan foumlrflytta

oss till de stoumlrre skaumlrmarna Har man ett 6 kvadratmeters sovrum och foumlrsoumlker faring sin saumlng

skrivbord hylla klaumldskaringp och soffan att rymmas in aumlr det ganska utmanande Men naumlr

man boumlrjar med det mest utmanande i arbetsprocessen blir arbetet ocksaring mindre utma-

nande desto stoumlrre rum eller skaumlrm det blir (Wroblewski 2011)

37

5 909JP

909jp aumlr en elektronisk handel en moumlbelaffaumlr som saumlljer vaumlsterlaumlndska produkter Den

elektroniska butiken kommer att oumlppnas i Japan 2015 Deras foumlrvaumlntningar aumlr att faring in

en miljon dollar i foumlrsaumlljning per aringr I deras elektroniska moumlbelaffaumlr saumlljs bla stolar bord

soffor och lampor Maringlgruppen aumlr alla konsumenter mellan 18-60 aringringar

Japaner aumlr intresserade av vaumlsterlaumlndska produkter och livsstil men foumlr de flesta varor aumlr

designen knutna till deras egen kultur vilket goumlr dem mer intresserad Det aumlr ocksaring mycket

viktigt att ha sin hemsida paring japanska eftersom 99 av den japanska befolkningen foumlre-

drar att inte laumlsa inneharingllet paring andra spraringk (Khurana)

Japan aumlr ett land med vaumlrldens tredje stoumlrsta ekonomi paring 5 biljoner De har vaumlrldens ti-

onde stoumlrsta befolkning med ca 1271 miljoner invaringnare varav 70 av den totala befolk-

ningen anvaumlnder internet och 24 av dem anvaumlnder internet paring sin smarttelefon

(Khurana)

Viktigt med detta projekt aumlr att sikta aringt raumltt haringll och betjaumlna kunderna paring det baumlsta saumlttet

via webbplatsen Foumlr att kunna faringnga saring maringnga kunder som moumljligt aumlr det mycket viktigt

att designa en webbplats som aumlr anvaumlndarvaumlnlig stilig och laumltt att anvaumlnda (Wroblewski

2011)

Jag har daumlrfoumlr kommit underfund med att anvaumlnda Mobile first och Responsiv design

metoden foumlr att utveckla den mobila 909jp sidan Med tanke paring att det aumlr en Responsiv

design skall layouten paring den mobila versionen ocksaring passa in med de stoumlrre skaumlrmarna

naumlr sidan skalas upp Det aumlr dock viktigt poaumlngtera att jag endast kommer att koncentrera

mig paring den mobila designen och utveckla designen endast foumlr denna forskning

38

6 ANALYS AV DEN NYA DESIGNEN

Med hjaumllp av den tidigare designen paring 909jp och de kritiska punkterna jag har hittat under

forskningen har jag skapat en ny och foumlrbaumlttrad design av webbplatsen foumlr mobiler I det

haumlr kapitlet kommer jag att visa naringgra exempel paring den tidigare designen och jaumlmfoumlra den

med nya designen samt analysera arbetet

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger)

1 Call-to-action knapparna

Under hela arbetsprocessen har jag haft i minnet att navigeringar laumlnkar och knap-

parna ska vara tillraumlckligt stora att klicka paring I den tidigare designen har de stora

bilder paring kategorier vilket jag tycker aumlr en bra design att aringtervaumlnda

39

2 Soumlkfunktionen

Paring den tidigare versionen haumlr nedan ser man att soumlkfunktionen inte finns med

medan paring den nya designen ser man soumlkfunktionen genast naumlr man kommer till

sidan Som tidigare framfoumlrdes att soumlkfunktionen alltid ska synas saring att man laumltt

skall kunna soumlka fram produkterna Om soumlkfunktionen inte finns med eller aumlr svaringr

att hitta naumlr den behoumlvs kan det orsaka missnoumlje hos anvaumlndarna (Mehra Gagan

2015)

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp

Figur 63 Soumlkfunktionen paring den nya designen 909jp

40

3 Laumltt att navigera

Naumlr skaumlrmen aumlr liten aumlr det viktig att ha en enkel layout (Wroblewski 2011)

Jag har daumlrfor i den nya designen flyttat rdquoHemrdquo och rdquoBlogrdquo knapparna bort fraringn

den oumlvre menyn Hem-knappen finns nu i hamburgarmenyn paring vaumlnstra sidan me-

dan Blog-knappen finns i footer Detta goumlr att det ser mera organiserat ut

Figur 64 Gamla designen

Laringt oss foumlrflytta vidare till menyer foumlr kategorier Paring hemsidan har man tvaring alter-

nativ att naring kategorierna Foumlrsta aumlr den hamburgarmenyn knappen paring vaumlnstra si-

dan I menyn aumlr kategorierna indelade i fyra delar stolar lampor ergonomisk och

soffa amp middag Detta goumlr det laumltt och klart foumlr anvaumlndarna var produkterna finns

Eftersom vi bara har partiell uppmaumlrksamhet fraringn anvaumlndarna naumlr de aumlr paring sina

smarttelefoner har jag valt att saumltta in ikoner i menyn (Figur 65) Naumlr anvaumlndaren

bara anvaumlnder ena oumlgat foumlr att kolla paring mobilen och andra oumlgat foumlr naringgonting annat

ska den lilla skaumlrmen med webbplatsen kunna faringnga uppmaumlrksamheten samt un-

derlaumltta anvaumlndningen av webbplatsen (Wroblewski 2011)

41

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny

Andra menyn for kategorierna aumlr de fyra bilderna under Aeron chair slideshowen

Paring den tidigare designen ser man endast ett foumlnster av kategorierna som aumlr place-

rade i en kolumn som upprepas loggraumltt (Figur 66) Det haumlr goumlr att anvaumlndaren

maringste skrolla ner foumlr att se varenda kategori vilket kan orsaka obekvaumlmlighet Att

se flera kategorier paring samma skaumlrm sparar tid och anvaumlndaren kommer aumlven baumlttre

iharingg var sakerna finns Att ha bara rdquoenrdquo stor bild som syns paring skaumlrmen och vara

tvungen att skrolla ner foumlr att se naumlsta bild aumlr frustrerande Paring den nya designen

har jag tvaring rutor av kategorier bredvid varandra (Figur 66)

42

Figur 66 Kategorier paring den gamla designen (till vaumlnster) Kategorier paring den nya designen (till houmlger)

4 Ta det roliga ur shopping

Paring den nya designen straumlvar jag efter att erbjuda en bekvaumlm shopping-upplevelse

Naumlr anvaumlndarna besoumlker e-handeln med en smarttelefon foumlrvaumlntar hanhon sig

ocksaring att kunna ta del av allt inneharingll och goumlra jaumlmfoumlrelser med andra produkter

Jag har daumlrfoumlr i den nya designen pressat ihop laumlngden paring kolumnhoumljden som om-

ringar produkten Som resultat ser vi nu fyra produkter paring samma skaumlrm (Figur

67) I den tidigare designen ser vi en enda produkt paring en skaumlrm och foumlr att se

andra produkter maringste vi skrolla ner Paring det haumlr saumlttet har anvaumlndarna svaringrare att

jaumlmfoumlra produkterna (Laya 2014)

43

Figur 67 Tidigare produktsida (till vaumlnster) Ny produktsida (till houmlger)

I den tidigare designen ser vi ocksaring att det finns endast produktens bild produk-

tens namn koumlpvagnen och infoikonen Om man vill faring reda paring produktens inform-

ation maringste man klicka paring produktens bild eller paring infoikonen som foumlr oss direkt

till sjaumllva produktens sida Bara foumlr att man vill faring reda paring vad det aumlr foumlr produkt

foumlrs man vidare till en annan sida Det haumlr kan orsaka att kunden inte njuter totalt

av shoppingen och dessutom kan han inte jaumlmfoumlra produkterna naumlr han aumlr paring ka-

tegoriernas sida (Laya 2014)

Laringt oss hoppa vidare till den nya designen (Figur 68) Paring den nya designen har

jag satt in en kort detaljbeskrivning foumlr varje produkt Dessutom naumlr man klickar

paring infoikonen paring houmlgra sidan kommer man inte direkt till produktsidan utan det

kommer att dyka upp en inforuta som har en kort beskrivning paring produkten Om

anvaumlndaren aumlr intresserad av produkten kan han garing in till sjaumllva produktsida ge-

nom att klicka paring rdquoView productrdquo eller ocksaring paring produktbilden daumlr hanhon kan

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

13

Figur 21 Viktigaste skaumllet att naumlthandel sparar tid

Enligt statiken visar det viktigaste skaumllet varfoumlr man anvaumlnder mobilen foumlr e-handel

64 saumlger att det sparar tid och aumlr smidigt

58 saumlger att det aumlr foumlrmaringnligare

56 saumlger att det aumlr enklare att jaumlmfoumlra mellan olika produkter

43 saumlger att det finns stoumlrre produktutbud

52 saumlger att det aumlr alltid oumlppet

23 Antalet kop okar pa mobilen

Enligt DIBS aringrliga rapport (2014) om mobil e-handel oumlkar antalet mobila e-handel kon-

sumenter hela tiden Nedan finns en figur om antalet under aringr 2013-2014 Figuren visar

hur maringnga garingnger konsumenterna har handlat varortjaumlnster med en smarttelefon eller

surfplattor under de senaste sex maringnaderna Naumlthandeln paring mobila enheterna oumlkar sakta

med saumlkert De som har handlat paring naumltet foumlrut handlar nu ocksaring allt mer Andelen stor-

konsumenter de som handlat minst 25 garingnger paring ett halvaringr har nu foumlrdubblats

De som handlade en eller tvaring garingnger har minskat fraringn 42 procent aringr 2013 till 35 procent

aringr 2014 vilket goumlr det till 17 procent mindre I snitt handlar konsumenter 1114 garingnger

per aringr med sin smarttelefon eller surfplattor

14

Figur 22 Antal oumlkar paring mobilen

Mobilen finns alltid naumlrmast

Enligt rapporten ska den vanligaste orsaken till varfoumlr anvaumlndarna vaumlljer att handla fraringn

mobilen vara foumlr att mobilen fanns naumlrmast till hands vid koumlpoumlgonblicket

Figur 23Varfoumlr handlade du med smarttelefon

15

60 saumlger att smarttelefon fanns naumlrmaste till hands vid koumlptillfaumlllet

27 anvaumlnder en app foumlr att handla online

17 oumlppnade ett erbjudande via e-mail i sin smarttelefon

5 har ingen dator

3 var i butik och koumlpte varan paring naumltet istaumlllet

4 hade ingen internetanslutning

3 scannade en QR-kod

Vad handlar vi med mobil

Foumlr att snabbt faringr en inblick i vad konsumenterna handlar med mobil ser vi haumlr nedan

(Figur 24) Konsumenter handlar mer av naumlstan allt Kunder som spenderar mer aumln 500

euro med smarttelefoner eller surfplattor koumlper i foumlrsta hand resor medan de som handlar

foumlr mindre aumln 100 euro laumlgger pengar paring media

Figur 24 Mobilt handlar vi mer av naumlstan allt

16

24 Bra mobila e-handel webbplatser

En bra mobil webbplats aumlr naumlr sidan aumlr enkel att anvaumlnda fast man bara anvaumlnder ett oumlga

och en tumme

rdquoWhen reflecting on a lot of mobile usage patterns I like to imagine people as rdquoone

eyeball and one thumb One thumb because they are likely to be holding their mobile

in one hand and using a single thumb to control it one eyeball because in many loca-

tions where mobile devices are use we only have peoples partial attentionrdquo

-Wroblewski Luke 2011)

Man kan aldrig exakt veta var anvaumlndaren befinner sig naumlr han surfar med sin smarttele-

fon Han kanske befinner sig i vardagsrummet foumlr att sloumltt surfa efter en ny lampa medan

han kollar paring Tvn Kanske anvaumlndaren sitter hemma och har en stadig wifi eller kanske

paring sommarstugan och har 3G4G som byter mellan olika naumltverk osv (Thoren 2012)

Naumlr anvaumlndaren goumlr naringgonting samtidigt som han surfar paring webbplatsen har han bara den

partiella uppmaumlrksamheten Daumlrfoumlr aumlr det betydligt fler kontexter som man maringste ta haumln-

syn till naumlr man designar webbplatser foumlr mobiler (Wroblewski 2011)

Haumlr aumlr tvaring bra exempel av lyckad e-handel foumlretag i vaumlrlden De har inte lyckats bra bara

med att saumllja produkterna utan ocksaring med designen Haumlr nedan aumlr bilderna paring mobil de-

signen av Rakutencom och Amazoncom

17

Figur 25 Hemsida paring rakutencom foumlr mobiler

Direkt naumlr man kommer paring sidan hittar man inloggningen koumlpvagnen soumlkfunktionen

menyn och speciellt de stora bilderna paring katalogerna vilket aumlr jaumltte laumltta att klicka paring

Fastaumln mobilskaumlrmen aumlr liten goumlr den haumlr det bara inte laumltt att navigera runt sidorna utan

ocksaring trevligt att vara paring sidan

Amazoncom har ocksaring lyckats bra med designen Naumlr man kommer till sidan ser man

direkt Sign in Department Wish List Deals och Search funktionen Under search funkt-

ionen ser man genast en inspirerande reklam som paringminner oss om att det aumlr varingr

rdquoSPRINGacuteS PERFECT PANTSrdquo Fast sidan har jaumltte maringnga objekt i den aumlr det trots allt

18

jaumltte laumltt att navigera runt sidorna Man tappar inte bort sig och man hittar laumltt det som

man aumlr ute efter

Figur 26 Hemsida paring amazoncom foumlr mobiler

19

25 Kritiska punkterna foumlr bra mobil design paring e-handel

Naumlr man handlar med en mindre skaumlrm aumlr det mera utmanande eftersom skaumlrmen aumlr liten

och anvaumlndarna brukar inte ha tillraumlckligt med taringlamod att sitta och soumlka naringgonting foumlr

laumlnge fraringn en liten skaumlrm Daumlrfoumlr aumlr det viktigt att veta vilka saker man boumlr beakta naumlr

man designar en mobil e-handel I det haumlr stycket kommer jag att lista upp sakerna man

boumlr veta naumlr man designar en mobil e-handel webbplats

Naumlr man handlar med en mindre skaumlrm aumlr det mera utmanande eftersom skaumlrmen aumlr liten

och anvaumlndarna brukar inte ha tillraumlckligt med taringlamod att sitta och soumlka naringgonting foumlr

laumlnge paring en liten skaumlrm Daumlrfoumlr aumlr det viktigt att veta vilka saker man boumlr beakta naumlr man

designar en mobil e-handel I det haumlr stycket kommer jag att lista upp kritiska saker man

boumlr veta naumlr man designar en mobil e-handel webbplats

1 Call-to-action knapparna foumlr smaring paring en mobilskaumlrm

Naumlr man designar webbsidor foumlr mobiler kan det ibland vara en utmaning att faring

allt att rymmas in Daumlrfoumlr brukar ocksaring webbdesigner minska de sk rdquocall to act-

ionrdquo knapparna Om anvaumlndaren maringste zooma in foumlr att klicka paring en knapp men

av misstag klickar paring en annan knapp kan det bli frustrerande foumlr dem och detta

leder sedan till att de laumlmnar sidan Daumlrfoumlr aumlr det mycket viktigt att designa knap-

parna och inneharingllet saring att anvaumlndarna laumltt naringr dem

2 Soumlkfunktionen ska alltid finnas med

Paring mobila e-handel webbplatser ska soumlkfunktionen alltid synas saring att man laumltt skall

kunna soumlka produkterna Laringt oss saumlga att kunden inte hittar produkten han soumlker

och vill anvaumlnda soumlkfunktionen Han letar och letar efter soumlkfunktionen utan re-

sultat Detta orsakar inte bara att kunden laumlmnar din sida men ocksaring kommer han

att beraumlttar det vidare aringt andra hur han upplevde din sida (Mehra 2015)

3 Laumltt att navigera

20

Det ska vara laumltt att navigera runt sidorna Anvaumlndarna ska veta var han aumlr och hur

han kommer vidare efter att han tex har valt produkten Menyerna foumlr katalo-

gerna ska vara laumltta att navigera Om menyerna foumlr katalogerna aumlr foumlrvirrande och

svaringra foumlr anvaumlndaren att hitta produkterna blir han laumltt irriterad Exemplar paring (fi-

gur 27) haumlr nedan visar att menyerna aumlr ganska foumlrvirrande paring vaumlnstra bilden me-

dan paring houmlgra sidan aumlr det klart och tydligt (Laya 2014)

Figur 27 Jaumlmfoumlrelse mellan en bra och daringlig navigation httpconversionxlcommake-mobile-convert

4 Ta de roliga ur shopping

Det vanligaste och stoumlrsta misstaget som de flesta foumlretag goumlr naumlr de designar foumlr

mobil e-handel aumlr att de foumlrsoumlker flytta kunderna fraringn shopping till koumlp Shopping

paring en stationaumlr dator goumlr det laumltt naumlr det oftast finns ett enormt antal produkter att

vaumllja mellan och det aumlr laumltt att blaumlddra runt Men foumlr mobiler aumlr det annat

Maringnga foumlretag foumlrsoumlker pressa ihop hela shopping-processen till smaring tabbar och

minska paring inneharingllet Som resultat kommer anvaumlndaren att kaumlnna sig paringtvingad

21

att goumlra snabba beslut paring inkoumlp Istaumlllet foumlr att ge anvaumlndarna en saringdan paringtvingad

upplevelse kan man istaumlllet locka anvaumlndarna med all information vi har att er-

bjuda

Det betyder inte att anvaumlndarna som besoumlker e-handeln med en smarttelefon inte

vill njuta av shoppingen saringsom de goumlr paring stationaumlra datorer Naumlr man designar en

mobil e-handel skall kunderna kunna faring njuta av shoppingen och jaumlmfoumlra mellan

olika produkter innan dem bestaumlmmer sig vilken produkt de vill koumlpa (Laya 2014)

ldquoBut we see many companies try to compress the whole shopping process into a

small number of taps The result is a mobile app or website that forces the user to

make a quick purchase decision rather than giving a great shopping experience

To the user it feels like the site switches from giving enticement to issuing de-

mandsrdquo

- Laya Peep 2014

5 Laringngsam uppladdningstid foumlr mobiler spelar en stor roll

Det aumlr mycket viktigt att haringlla sidstorleken saring liten som moumljligt saring att det aumlr snabbt

att ladda upp sidan

ldquoMobile users want to take quick action and also Google has reportedly started

including page speed for ranking websites in the search results so that makes it

even more important to have a lighter siterdquo

- Mehra Gagan 2015

Varingren 2014 rapporterade Radware (httpwwwradwarecomspring-sotu2014)

att majoriteten av besoumlkarna kommer att oumlverge webbplatsen efter att ha vaumlntat i

3 sekunder foumlr att ladda upp sidan (Laya 2014)

Om det finns mycket inneharingll paring en sida kan man som alternativ separera inne-

haringllet i olika flikar (Mehra 2015)

Jag har tagit ett exempel fraringn Amazoncom Paring produktsidan har ja valt en orange

vaumlska Foumlr att tex ytterligare laumlsa om produktbeskrivningen rdquoAbout this itemrdquo ser

22

jag en pil som aumlr paring houmlgra sidan (Figur 29) Naumlr jag trycker paring pilen eller laringdan

kommer jag till en annan sida daumlr jag kan laumlsa hela produktbeskrivningen (Figur

210) Paring det haumlr saumlttet inneharingller sidan all information man behoumlver men separe-

rade i olika flikar saring att det blir snabbare att ladda upp sidan

Figur 28 Produktsida paring amazoncom

23

Figur 29 Produktsida paring amazoncom

Figur 210 Produktsida paring amazoncom About this item

24

6 Misslyckade analyseringar av anvaumlndarna

Naumlr man bygger webbsidor aumlr det viktig att goumlra anvaumlndbarhetstest och analysera

kundernas beteende Hur anvaumlndarna kaumlnner sig naumlr de anvaumlnder sidan aumlr mycket

viktigt och avgoumlr hur bra din business kommer att rulla

Analyseringen aumlr den kritiska inputen foumlr designen Med analyseringen ser man

dels vilka mobila apparater anvaumlndarna anvaumlnder och om det aumlr naringgra svaringrigheter

och obekvaumlmligheter anvaumlndarna upplever vid anvaumlndningen Dessa faktorer aumlr

viktiga foumlr att saumlkerstaumllla om den mobila upplevelsen uppfyller behoven hos kon-

sumenterna Testet och analysen maringste goumlras kontinuerligt foumlr att vi skall kunna

saumlkerstaumllla att kunderna har det bekvaumlmt (Mehra 2015)

7 Mindre inneharingll foumlr mobilanvaumlndarna

E-handel webbplatser brukar goumlmma inneharingll foumlr att goumlra sidan mindre Sidan aumlr

i sjaumllva verket inte mindre men bara goumlmd foumlr anvaumlndarna som anvaumlnder sina

smarttelefoner Enligt Mehra Gagan aumlr det inte bra om det finns mindre inneharingll

foumlr mobilanvaumlndarna Oavsett med vilka enheter anvaumlndarna aumlr paring sidan boumlr det

finnas lika mycket inneharingll paring alla enheterna De flesta som handlar online brukar

aumlga flera enheter och med stor sannolikhet anvaumlnder de ocksaring andra enheter foumlr

att surfa Om inneharingllet inte ser likadant ut paring stationaumlra datorer och smarttelefo-

ner kan det orsaka daringlig anvaumlndarupplevelse foumlr anvaumlndaren Enligt Google an-

vaumlnder 90 av dem som handlar paring internet olika enheter Att begraumlnsa deras

anvaumlndning aumlr naringgonting som man boumlr undvika (Mehra 2015)

25

3 MOBILANPASSADE LOumlSNINGAR

Det finns maringnga olika loumlsningar att bygga sin webbplats med Det aumlr viktigt att komma

iharingg att mobila anvaumlndande oumlkar hela tiden Det staumlller nya krav paring webbdesign och an-

vaumlndargraumlnssnitt Anvaumlndarna foumlrvaumlntar sig idag att de ska kunna ta del av allt inneharingll paring

webben oavsett om de anvaumlnder en smarttelefon eller en surfplatta De mobilanpassade

loumlsningarna foumlr e-handel kan tex vara Responsiv design Adaptiv Design Mobilbutik

eller en mobil applikation

31 Adaptiv design

En adaptiv webbplats aumlr uppbyggd saring att den aumlr optimerad foumlr specifika skaumlrmstorlekar

Den anvaumlnder servern foumlr att upptaumlcka den enhet som anvaumlnds foumlr att visa webbplatsen

Byggande av webbplatsen med adaptiv metoden aumlr tidskraumlvande paring grund av behovet att

optimera sidan foumlr varje vald plattform front-end och back-end Innan man boumlrjar bygga

webbplatsen maringste man avgoumlra vilka alla plattformar webbplatsen kommer att optimeras

till Foumlrdel med adaptiv design aumlr att den har snabb uppladdningstid

rdquoCompared to Responsiv design adaptive web design is website-optimised for each

platform separately and makes use of the opportunities presented by the platform as

well as the models and functions It offers fast-loading pages due to the server detec-

tion device and browser sending data tailored for a particular devicerdquo

-Lubo Ruska 2013

Att vaumllja den raumltta loumlsningen handlar om att foumlrstaring vad maringlgruppen foumlrvaumlntar sig och vad

de behoumlver Eftersom foumlretaget 909jp inte aumlr en jaumltte stort foumlretag saringsom Ikea eller Ama-

zon som har oberaumlknat antal med produkter tycker jag att Responsiv design med Mobile

first metoden aumlr den mest effektiva metoden foumlr denna forskning

26

32 Responsiv design

Responsiv webbdesign aumlr ett av de populaumlraste saumltten att optimera en webbplats Re-

sponsiv webbdesign moumljliggoumlr att layouten foumlraumlndras beroende paring vilken skaumlrmstorlek

och skaumlrmupploumlsningen som anvaumlndarna har och beroende paring vilka funktioner som

webblaumlsaren stoumldjer (Responsive Design 2014)

Oberoende om anvaumlndarna anvaumlnder dator laumlsplatta eller sin mobiltelefon kommer sidan

att anpassa sig paring olika saumltt foumlr att anvaumlndarna vid alla tillfaumlllen ska ha en saring rik upplevelse

som moumljligt Man kan saumlga att en webbsida paring mindre skaumlrmar aumlr med ett annat ord en

krympande version av den stoumlrre skaumlrmstorleken

Inneharingllet saringsom kolumner och bilder paring webbsidan kommer automatiskt att anpassas

beroende paring skaumlrmstorleken Och detta aumlr paring grund av Grid systemet Allt inneharingll skall

haringllas inom ett Grid system Grid systemet skall skydda allt fraringn att bryta samman naumlr

sidan anvaumlnds paring olika skaumlrmstorlekar

Det finns 11 olika Grid storlekar tvaring kolumner tre kolumner fyra kolumner fem kolum-

ner sex kolumner sju kolumner aringtta kolumner nio kolumner tio kolumner 11 kolumner

och 12 kolumner Som exempel visar jag en figur av 12 kolumners Grid system (Swan

2014)

27

Figur 31 Ett exempel paring Grid system av 5 olika skaumlrmstorlekar (Phil Swan 2014)

Responsiv webbdesign fungerar med hjaumllp av HTML5 CSS media Query och Java-

Script Det bygger paring att webbutvecklare istaumlllet foumlr exakta storlekar maumltt i pixlar anger

sidelements storlekar i procent i jaumlmfoumlrelse med skaumlrmens storlek

Naumlr sidelementens storlekar aumlr i procent goumlr det att sidan blir flexibel och den anpassas

efter webblaumlsarens storlek medan fasta pixlar ger en scrollbar (rull-list) (Responsive De-

sign 2014)

33 Varfoumlr Responsiv design

Foumlrdelar med Responsiv design aumlr att den erbjuder en bra anvaumlndarupplevelse foumlr olika

enheter och skaumlrmstorlekar Tack vare den Responsiva designen har webbredaktoumlrer laumlt-

tare att hantera inneharingllet eftersom de bara har en version att hantera Ur en SEO synvin-

kel fungerar Responsiv design baumlttre eftersom den koncentrerar inneharingllet istaumlllet foumlr att

vattna ur det med maringnga URL foumlr samma inneharingll

28

Med en Responsiv design aumlr en webbplats laumlttare att hantera Att ha flera olika versioner

av en webbplats innebaumlr mera arbete Flera olika versioner av en webbplats innebaumlr sepa-

rata sidor att redigera och separata insatser foumlr soumlkmotoroptimering och separata soumlkmo-

torkampanjer Daumlrfoumlr aumlr det en stor foumlrdel att bygga en webbplats med den Responsiva

metoden

Med en Responsiv design kaumlnner anvaumlndarna baumlttre igen sidan baringde paring stationaumlra datorer

och mobiltelefoner Bygger man specifika webbplatser foumlr mobiler och surfplattor kan

det laumltt haumlnda att det blir olika information paring webbplatserna och att de struktureras olika

Laringt oss foumlrestaumllla oss att naringgon anvaumlnder sin mobiltelefon paring lunchen foumlr att leta efter en

flygbiljett fraringn Helsingfors till Tokyo Personen hittar en webbplats som har bra erbju-

dande och bestaumlmmer sig foumlr att fortsaumltta kolla naumlr han eller hon kommer hem Naumlr per-

sonen har kommit hem anvaumlnder hen datorn istaumlllet foumlr mobilen Om webbplatsen som

personen kollade paring lunchpausen var en Responsiv webbplats faringr personen en smidig och

bra upplevelse vid oumlvergaringngen fraringn den mobila webbplatsen till stationaumlr dator

(Lindahl 2014)

Det aumlr vaumlldigt viktigt att ha sin webbplats att optimerad till saring maringnga enheter som moumljligt

foumlr att ingen vet vilka kommer att vara framtidens enheter och daumlrfoumlr anses en webbplats

som anpassar sig till maringnga olika format vara den baumlsta loumlsningen Innan man kan boumlrja

med att designa en Responsiv webbplats maringste man veta vilka skaumlrmupploumlsningar och

storlekar det finns tillgaumlngliga och aumlr populaumlra idag Foumlr att kunna rikta till de olika skaumlr-

mupploumlsningarna med Media Queries har jag listat upp olika enheternas skaumlrmupploumls-

ningar i pixlar haumlr nedan i tabellen

ResolutionGrafisk array Enhet som anvaumlnder denna resolution skaumlrmstorlek i pixel-

taumltheten i pixlar

2880x1800 15-inch Apple MacBook Pro with Retina display

2560 x 1700 Google Chromebook Pixel

2560 x 1600 Samsung Google Nexus 10

13-inch Apple MacBook Pro with Retina display

29

2560 x 1440 27-inch Apple iMac 102 111 113 122 (Late 2009 -

2012)

1920 x 1080 HTC One Samsung

Sony Xperia Z amp Xperia ZL

Asus PadFone Infinity

Acer Aspire S5

Asus Zenbook Prime

1600 x 900 Apple Macbook Air

1366 x 768 Small desktoplaptop screen resolution

Asus VivoTab RT

Samsung N350

1280 x 1024 Standard desktop screen resolution

1280 x 800 Asus PadFone 2

Samsung Galaxy Note

Sony Xperia Tablet S

1280 x 720 Sony Xperia S

HTC Windows Phone 8X

HTC One mini

1136 x 640 Apple iPhone 5 5S amp 5C

Apple iPod Touch (5th generation)

960 x 640 Apple iPhone 4 amp 4S

Apple iPod Touch (4th generation)

854 x 480 Sony Xperia ray

Nokia N9

800 x 480 Nokia Lumia 510 amp 520

Samsung Galaxy I Galaxy S Galaxy S Plus Galaxy S Ad-

vance Galaxy SL Galaxy S Duos Galaxy Xcover 2 Galaxy

Beam Nexus S Captivate Glide amp Galaxy S III mini

HTC Desire X HTC Desire V Desire VC Desire VT De-

sire U amp Windows Phone 8S

30

LG Optimus 2X Optimus EX Optimus L5 II Optimus Q2

amp Optimus Black

T-Mobile G2x

Asus E600

620 x 480 Blackberry Bold 9900 amp Bold Touch 9930

Blackberry Torch 9810

LG Optimus Z

640 x 360 Sony Ericsson Vivaz amp Vivaz Pro

Nokia 500 amp 5800 XpressMusic

Nokia N8 N97 E7 and X6

480 x 320 Apple iPhone 3G amp 3GS

Samsung Galaxy Ace

320 x 240 Nokia E71

Blackberry Curve 9220 amp 9320

Sony Ericsson txt

Samsung Galaxy Y amp Galaxy Chat

Nokia Asha 501

Figur 32 Resolutions referenser paring olika enheter

31

4 VAD AumlR MOBILE FIRST

Mobile first metoden aumlr en metod och arbetsprocess foumlr webbdesigners som aumlr skapad av

Luke Wroblewski Naumlr man jobbar med ett projekt och designar strukturerar och imple-

menterar en webbplats aumlr Mobile first metoden man paringboumlrjar arbetet med Med metoden

menar Wroblewski att man foumlrst boumlrjar designa webbsidor fraringn de minsta enheterna

Figur 41 Mobile First att bygga webbsidan fraringn den minsta skaumlrmen till den stoumlrsta skaumlrmen

Wroblewski som har skapat Mobile First metoden understryker att metoden ska priorite-

ras daring man skapar anvaumlndarupplevelser

Det finns tre viktiga anledningar foumlr att utveckla foumlr Mobile First

Den foumlrbereder foumlr den stora utveckling och nya moumljligheter som uppkommer

inom det mobila omraringdet idag (836 av vaumlrldens befolkning anvaumlnder internet

paring sin smarttelefon 2015)

Den goumlr att vi blir tvungna att prioritera och fokusera varingrt inneharingll genom att ac-

ceptera de begraumlnsningar som aumlr foumlrenade med mobil design

32

och goumlr att vi kan leverera innovativa upplevelser genom att bygga utifraringn nya

funktioner som finns inbyggda i de mobila enheterna (bla GEO lokalisering)

En mobil webbplats behoumlver endast ha en mycket enkel layout och navigeringen ska vara

laumltt och effektiv

Naumlr man designar med Mobile first metoden tvingas man goumlra viktiga beslut om vad som

ska prioriteras Naumlr den optimerad design foumlr en liten skaumlrm visas paring en stoumlrre skaumlrm

kommer det att bli laumlttare att designa paring de stoumlrre skaumlrmarna Allt som ska goumlras aumlr daring

bara att fylla paring inneharingllet och designa saring att det aumlr grafiskt tilltalande och laumltt att hitta

inneharingllet (Wroblewski 2011)

41 Varfoumlr Mobile first

Vaumlrlden vi lever i idag aumlr inte mera som foumlr tio aringr sedan Allt runtom oss har utvecklats

speciellt mobiltelefonerna Tidigare anvaumlndes mobiltelefoner bara foumlr att skicka med-

delandet ringa och ta emot samtal Nu anvaumlnds den till foumlr att dels ta bilder video GPS

navigation foumlr vaumlgvisning och speciellt internetanvaumlndningen saringsom Google nyheter

Facebook Youtube och mycket mer Paring grund av det har ocksaring varingr livsstil foumlraumlndrats

Internetanvaumlndning idag har blivit allt vanligare Idag anvaumlnder vi naumltet i skolan paring jobbet

eller var och naumlr som helst bara man har en smarttelefon eller surfplatta och naumltet kopplat

Tidigare boumlrjade man bygga en webbplats fraringn den stoumlrsta skaumlrmen medan den mobila

sidan var en biprodukt Laringt oss saumlga att man har en webbplats med en rik grafisk layout

och ser stilig ut paring stationaumlra datorer Naumlr man skalar ner sidan foumlr att passa en mobilskaumlrm

kommer resultatet att vara en smaumlrta foumlr varingra oumlgon Paring den lilla mobilskaumlrmen kommer

det att vara olaumlsligt och svaringrt att anvaumlnda Foumlr att naring inneharingllet maringste du tom zooma in

och ut eller skrolla till houmlger och vaumlnster Det haumlr kommer att ge en negativ bild av ditt

foumlretag och anvaumlndarna kanske aldrig mera besoumlker din webbplats (Wroblewski 2011)

Ett bra exempel aumlr Tokyo Skytree webbplats som aumlnnu idag inte ha byggt in funktionalitet

och designen foumlr mindre skaumlrmupploumlsningar paring den engelska sidan

33

Tokyo Skytree aumlr vaumlrldens naumlst houmlgsta torn efter Burj Khalifa Tornet aumlr Japans houmlgsta

byggnadsverk med en houmljd paring 634 meter Den oumlppnades 22 maj 2012 och under det foumlrsta

aringret hade den 64 miljoner besoumlkare fraringn hela vaumlrlden Trots det har de laringtit bli att utveckla

den engelska webbsidan Paring bilden ser man att hemsidan ser exakt likadant ut paring stationaumlr

dator och paring mobilen

Figur 42 Hemsidan paring Tokyo Skytree paring stationaumlr datorskaumlrm

34

Figur 43 Hemsidan foumlr Tokyo Skytree Foumlrsta bilden visar hur det ser ut normalt Andra bilden visar naumlr man zoomar

in

Naumlr man foumlrsoumlker zooma in foumlr att laumlsa inneharingllet hoppar sidbalken (paring vaumlnstra sidan) paring

texten Det haumlr ger en mycket daringlig anvaumlndarupplevelse och kan ge fel bild av turistplat-

sen Ett annat fel paring sidan aumlr naumlr man vaumlljer spraringk till japanska ser sidan inte likadant ut

35

Figure 44 Hemsidan paring Tokyo Skytree paring japanska

Om du kan laumlsa japanska kommer du att undra varfoumlr det finns massor med information

och sidan ser mycket trevligare ut paring den japanska sidan Paring den internationella sidan

dvs engelska ser det inte lika trevligt ut och inneharingller inte allt som det goumlr paring den

japanska sidan Det aumlr som om den stoumlrsta maringlgruppen aumlr foumlr japanska turister och som

om de skulle inte bry sig om turister fraringn utlandet

Utoumlver det har de ocksaring byggt en mobilsida foumlr den japanska webbsidan Varfoumlr satsa bara

paring den japanska sidan och inte den engelska sidan naumlr maringlgruppen aumlr hela vaumlrlden

36

Figur 45 Mobil sidan paring Tokyo Skytree paring japanska

Vi lever i 2015 saring alla borde veta att det aumlr vaumlldigt viktig att ha en mobil webbplats som

erbjuder en bra anvaumlndarupplevelse paring alla spraringk som webbplatsen erbjuder Naumlr man har

sin sida paring flera spraringk och aumlndaring bestaumlmmer sig att bygga sidan ordentligt bara paring ett spraringk

kan anvaumlndarna faring en fel bild av foumlretaget I vaumlrsta fall kommer anvaumlndarna tycka att sidan

aumlr oparinglitligt och aringterkommer aldrig igen

Mobile first metoden aumlr daumlrfoumlr en mycket effektiv metod att bygga sin webbplats med

Man boumlrjar med att bygga sin webbplats fraringn den minsta skaumlrmen Man tvingas goumlra be-

slut om vad som ska absolut prioriteras Arbetsprocessen foumlr oss webbdesigners blir

mycket effektivare genom att foumlrst designa fraringn den minsta skaumlrmen och sedan foumlrflytta

oss till de stoumlrre skaumlrmarna Har man ett 6 kvadratmeters sovrum och foumlrsoumlker faring sin saumlng

skrivbord hylla klaumldskaringp och soffan att rymmas in aumlr det ganska utmanande Men naumlr

man boumlrjar med det mest utmanande i arbetsprocessen blir arbetet ocksaring mindre utma-

nande desto stoumlrre rum eller skaumlrm det blir (Wroblewski 2011)

37

5 909JP

909jp aumlr en elektronisk handel en moumlbelaffaumlr som saumlljer vaumlsterlaumlndska produkter Den

elektroniska butiken kommer att oumlppnas i Japan 2015 Deras foumlrvaumlntningar aumlr att faring in

en miljon dollar i foumlrsaumlljning per aringr I deras elektroniska moumlbelaffaumlr saumlljs bla stolar bord

soffor och lampor Maringlgruppen aumlr alla konsumenter mellan 18-60 aringringar

Japaner aumlr intresserade av vaumlsterlaumlndska produkter och livsstil men foumlr de flesta varor aumlr

designen knutna till deras egen kultur vilket goumlr dem mer intresserad Det aumlr ocksaring mycket

viktigt att ha sin hemsida paring japanska eftersom 99 av den japanska befolkningen foumlre-

drar att inte laumlsa inneharingllet paring andra spraringk (Khurana)

Japan aumlr ett land med vaumlrldens tredje stoumlrsta ekonomi paring 5 biljoner De har vaumlrldens ti-

onde stoumlrsta befolkning med ca 1271 miljoner invaringnare varav 70 av den totala befolk-

ningen anvaumlnder internet och 24 av dem anvaumlnder internet paring sin smarttelefon

(Khurana)

Viktigt med detta projekt aumlr att sikta aringt raumltt haringll och betjaumlna kunderna paring det baumlsta saumlttet

via webbplatsen Foumlr att kunna faringnga saring maringnga kunder som moumljligt aumlr det mycket viktigt

att designa en webbplats som aumlr anvaumlndarvaumlnlig stilig och laumltt att anvaumlnda (Wroblewski

2011)

Jag har daumlrfoumlr kommit underfund med att anvaumlnda Mobile first och Responsiv design

metoden foumlr att utveckla den mobila 909jp sidan Med tanke paring att det aumlr en Responsiv

design skall layouten paring den mobila versionen ocksaring passa in med de stoumlrre skaumlrmarna

naumlr sidan skalas upp Det aumlr dock viktigt poaumlngtera att jag endast kommer att koncentrera

mig paring den mobila designen och utveckla designen endast foumlr denna forskning

38

6 ANALYS AV DEN NYA DESIGNEN

Med hjaumllp av den tidigare designen paring 909jp och de kritiska punkterna jag har hittat under

forskningen har jag skapat en ny och foumlrbaumlttrad design av webbplatsen foumlr mobiler I det

haumlr kapitlet kommer jag att visa naringgra exempel paring den tidigare designen och jaumlmfoumlra den

med nya designen samt analysera arbetet

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger)

1 Call-to-action knapparna

Under hela arbetsprocessen har jag haft i minnet att navigeringar laumlnkar och knap-

parna ska vara tillraumlckligt stora att klicka paring I den tidigare designen har de stora

bilder paring kategorier vilket jag tycker aumlr en bra design att aringtervaumlnda

39

2 Soumlkfunktionen

Paring den tidigare versionen haumlr nedan ser man att soumlkfunktionen inte finns med

medan paring den nya designen ser man soumlkfunktionen genast naumlr man kommer till

sidan Som tidigare framfoumlrdes att soumlkfunktionen alltid ska synas saring att man laumltt

skall kunna soumlka fram produkterna Om soumlkfunktionen inte finns med eller aumlr svaringr

att hitta naumlr den behoumlvs kan det orsaka missnoumlje hos anvaumlndarna (Mehra Gagan

2015)

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp

Figur 63 Soumlkfunktionen paring den nya designen 909jp

40

3 Laumltt att navigera

Naumlr skaumlrmen aumlr liten aumlr det viktig att ha en enkel layout (Wroblewski 2011)

Jag har daumlrfor i den nya designen flyttat rdquoHemrdquo och rdquoBlogrdquo knapparna bort fraringn

den oumlvre menyn Hem-knappen finns nu i hamburgarmenyn paring vaumlnstra sidan me-

dan Blog-knappen finns i footer Detta goumlr att det ser mera organiserat ut

Figur 64 Gamla designen

Laringt oss foumlrflytta vidare till menyer foumlr kategorier Paring hemsidan har man tvaring alter-

nativ att naring kategorierna Foumlrsta aumlr den hamburgarmenyn knappen paring vaumlnstra si-

dan I menyn aumlr kategorierna indelade i fyra delar stolar lampor ergonomisk och

soffa amp middag Detta goumlr det laumltt och klart foumlr anvaumlndarna var produkterna finns

Eftersom vi bara har partiell uppmaumlrksamhet fraringn anvaumlndarna naumlr de aumlr paring sina

smarttelefoner har jag valt att saumltta in ikoner i menyn (Figur 65) Naumlr anvaumlndaren

bara anvaumlnder ena oumlgat foumlr att kolla paring mobilen och andra oumlgat foumlr naringgonting annat

ska den lilla skaumlrmen med webbplatsen kunna faringnga uppmaumlrksamheten samt un-

derlaumltta anvaumlndningen av webbplatsen (Wroblewski 2011)

41

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny

Andra menyn for kategorierna aumlr de fyra bilderna under Aeron chair slideshowen

Paring den tidigare designen ser man endast ett foumlnster av kategorierna som aumlr place-

rade i en kolumn som upprepas loggraumltt (Figur 66) Det haumlr goumlr att anvaumlndaren

maringste skrolla ner foumlr att se varenda kategori vilket kan orsaka obekvaumlmlighet Att

se flera kategorier paring samma skaumlrm sparar tid och anvaumlndaren kommer aumlven baumlttre

iharingg var sakerna finns Att ha bara rdquoenrdquo stor bild som syns paring skaumlrmen och vara

tvungen att skrolla ner foumlr att se naumlsta bild aumlr frustrerande Paring den nya designen

har jag tvaring rutor av kategorier bredvid varandra (Figur 66)

42

Figur 66 Kategorier paring den gamla designen (till vaumlnster) Kategorier paring den nya designen (till houmlger)

4 Ta det roliga ur shopping

Paring den nya designen straumlvar jag efter att erbjuda en bekvaumlm shopping-upplevelse

Naumlr anvaumlndarna besoumlker e-handeln med en smarttelefon foumlrvaumlntar hanhon sig

ocksaring att kunna ta del av allt inneharingll och goumlra jaumlmfoumlrelser med andra produkter

Jag har daumlrfoumlr i den nya designen pressat ihop laumlngden paring kolumnhoumljden som om-

ringar produkten Som resultat ser vi nu fyra produkter paring samma skaumlrm (Figur

67) I den tidigare designen ser vi en enda produkt paring en skaumlrm och foumlr att se

andra produkter maringste vi skrolla ner Paring det haumlr saumlttet har anvaumlndarna svaringrare att

jaumlmfoumlra produkterna (Laya 2014)

43

Figur 67 Tidigare produktsida (till vaumlnster) Ny produktsida (till houmlger)

I den tidigare designen ser vi ocksaring att det finns endast produktens bild produk-

tens namn koumlpvagnen och infoikonen Om man vill faring reda paring produktens inform-

ation maringste man klicka paring produktens bild eller paring infoikonen som foumlr oss direkt

till sjaumllva produktens sida Bara foumlr att man vill faring reda paring vad det aumlr foumlr produkt

foumlrs man vidare till en annan sida Det haumlr kan orsaka att kunden inte njuter totalt

av shoppingen och dessutom kan han inte jaumlmfoumlra produkterna naumlr han aumlr paring ka-

tegoriernas sida (Laya 2014)

Laringt oss hoppa vidare till den nya designen (Figur 68) Paring den nya designen har

jag satt in en kort detaljbeskrivning foumlr varje produkt Dessutom naumlr man klickar

paring infoikonen paring houmlgra sidan kommer man inte direkt till produktsidan utan det

kommer att dyka upp en inforuta som har en kort beskrivning paring produkten Om

anvaumlndaren aumlr intresserad av produkten kan han garing in till sjaumllva produktsida ge-

nom att klicka paring rdquoView productrdquo eller ocksaring paring produktbilden daumlr hanhon kan

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

14

Figur 22 Antal oumlkar paring mobilen

Mobilen finns alltid naumlrmast

Enligt rapporten ska den vanligaste orsaken till varfoumlr anvaumlndarna vaumlljer att handla fraringn

mobilen vara foumlr att mobilen fanns naumlrmast till hands vid koumlpoumlgonblicket

Figur 23Varfoumlr handlade du med smarttelefon

15

60 saumlger att smarttelefon fanns naumlrmaste till hands vid koumlptillfaumlllet

27 anvaumlnder en app foumlr att handla online

17 oumlppnade ett erbjudande via e-mail i sin smarttelefon

5 har ingen dator

3 var i butik och koumlpte varan paring naumltet istaumlllet

4 hade ingen internetanslutning

3 scannade en QR-kod

Vad handlar vi med mobil

Foumlr att snabbt faringr en inblick i vad konsumenterna handlar med mobil ser vi haumlr nedan

(Figur 24) Konsumenter handlar mer av naumlstan allt Kunder som spenderar mer aumln 500

euro med smarttelefoner eller surfplattor koumlper i foumlrsta hand resor medan de som handlar

foumlr mindre aumln 100 euro laumlgger pengar paring media

Figur 24 Mobilt handlar vi mer av naumlstan allt

16

24 Bra mobila e-handel webbplatser

En bra mobil webbplats aumlr naumlr sidan aumlr enkel att anvaumlnda fast man bara anvaumlnder ett oumlga

och en tumme

rdquoWhen reflecting on a lot of mobile usage patterns I like to imagine people as rdquoone

eyeball and one thumb One thumb because they are likely to be holding their mobile

in one hand and using a single thumb to control it one eyeball because in many loca-

tions where mobile devices are use we only have peoples partial attentionrdquo

-Wroblewski Luke 2011)

Man kan aldrig exakt veta var anvaumlndaren befinner sig naumlr han surfar med sin smarttele-

fon Han kanske befinner sig i vardagsrummet foumlr att sloumltt surfa efter en ny lampa medan

han kollar paring Tvn Kanske anvaumlndaren sitter hemma och har en stadig wifi eller kanske

paring sommarstugan och har 3G4G som byter mellan olika naumltverk osv (Thoren 2012)

Naumlr anvaumlndaren goumlr naringgonting samtidigt som han surfar paring webbplatsen har han bara den

partiella uppmaumlrksamheten Daumlrfoumlr aumlr det betydligt fler kontexter som man maringste ta haumln-

syn till naumlr man designar webbplatser foumlr mobiler (Wroblewski 2011)

Haumlr aumlr tvaring bra exempel av lyckad e-handel foumlretag i vaumlrlden De har inte lyckats bra bara

med att saumllja produkterna utan ocksaring med designen Haumlr nedan aumlr bilderna paring mobil de-

signen av Rakutencom och Amazoncom

17

Figur 25 Hemsida paring rakutencom foumlr mobiler

Direkt naumlr man kommer paring sidan hittar man inloggningen koumlpvagnen soumlkfunktionen

menyn och speciellt de stora bilderna paring katalogerna vilket aumlr jaumltte laumltta att klicka paring

Fastaumln mobilskaumlrmen aumlr liten goumlr den haumlr det bara inte laumltt att navigera runt sidorna utan

ocksaring trevligt att vara paring sidan

Amazoncom har ocksaring lyckats bra med designen Naumlr man kommer till sidan ser man

direkt Sign in Department Wish List Deals och Search funktionen Under search funkt-

ionen ser man genast en inspirerande reklam som paringminner oss om att det aumlr varingr

rdquoSPRINGacuteS PERFECT PANTSrdquo Fast sidan har jaumltte maringnga objekt i den aumlr det trots allt

18

jaumltte laumltt att navigera runt sidorna Man tappar inte bort sig och man hittar laumltt det som

man aumlr ute efter

Figur 26 Hemsida paring amazoncom foumlr mobiler

19

25 Kritiska punkterna foumlr bra mobil design paring e-handel

Naumlr man handlar med en mindre skaumlrm aumlr det mera utmanande eftersom skaumlrmen aumlr liten

och anvaumlndarna brukar inte ha tillraumlckligt med taringlamod att sitta och soumlka naringgonting foumlr

laumlnge fraringn en liten skaumlrm Daumlrfoumlr aumlr det viktigt att veta vilka saker man boumlr beakta naumlr

man designar en mobil e-handel I det haumlr stycket kommer jag att lista upp sakerna man

boumlr veta naumlr man designar en mobil e-handel webbplats

Naumlr man handlar med en mindre skaumlrm aumlr det mera utmanande eftersom skaumlrmen aumlr liten

och anvaumlndarna brukar inte ha tillraumlckligt med taringlamod att sitta och soumlka naringgonting foumlr

laumlnge paring en liten skaumlrm Daumlrfoumlr aumlr det viktigt att veta vilka saker man boumlr beakta naumlr man

designar en mobil e-handel I det haumlr stycket kommer jag att lista upp kritiska saker man

boumlr veta naumlr man designar en mobil e-handel webbplats

1 Call-to-action knapparna foumlr smaring paring en mobilskaumlrm

Naumlr man designar webbsidor foumlr mobiler kan det ibland vara en utmaning att faring

allt att rymmas in Daumlrfoumlr brukar ocksaring webbdesigner minska de sk rdquocall to act-

ionrdquo knapparna Om anvaumlndaren maringste zooma in foumlr att klicka paring en knapp men

av misstag klickar paring en annan knapp kan det bli frustrerande foumlr dem och detta

leder sedan till att de laumlmnar sidan Daumlrfoumlr aumlr det mycket viktigt att designa knap-

parna och inneharingllet saring att anvaumlndarna laumltt naringr dem

2 Soumlkfunktionen ska alltid finnas med

Paring mobila e-handel webbplatser ska soumlkfunktionen alltid synas saring att man laumltt skall

kunna soumlka produkterna Laringt oss saumlga att kunden inte hittar produkten han soumlker

och vill anvaumlnda soumlkfunktionen Han letar och letar efter soumlkfunktionen utan re-

sultat Detta orsakar inte bara att kunden laumlmnar din sida men ocksaring kommer han

att beraumlttar det vidare aringt andra hur han upplevde din sida (Mehra 2015)

3 Laumltt att navigera

20

Det ska vara laumltt att navigera runt sidorna Anvaumlndarna ska veta var han aumlr och hur

han kommer vidare efter att han tex har valt produkten Menyerna foumlr katalo-

gerna ska vara laumltta att navigera Om menyerna foumlr katalogerna aumlr foumlrvirrande och

svaringra foumlr anvaumlndaren att hitta produkterna blir han laumltt irriterad Exemplar paring (fi-

gur 27) haumlr nedan visar att menyerna aumlr ganska foumlrvirrande paring vaumlnstra bilden me-

dan paring houmlgra sidan aumlr det klart och tydligt (Laya 2014)

Figur 27 Jaumlmfoumlrelse mellan en bra och daringlig navigation httpconversionxlcommake-mobile-convert

4 Ta de roliga ur shopping

Det vanligaste och stoumlrsta misstaget som de flesta foumlretag goumlr naumlr de designar foumlr

mobil e-handel aumlr att de foumlrsoumlker flytta kunderna fraringn shopping till koumlp Shopping

paring en stationaumlr dator goumlr det laumltt naumlr det oftast finns ett enormt antal produkter att

vaumllja mellan och det aumlr laumltt att blaumlddra runt Men foumlr mobiler aumlr det annat

Maringnga foumlretag foumlrsoumlker pressa ihop hela shopping-processen till smaring tabbar och

minska paring inneharingllet Som resultat kommer anvaumlndaren att kaumlnna sig paringtvingad

21

att goumlra snabba beslut paring inkoumlp Istaumlllet foumlr att ge anvaumlndarna en saringdan paringtvingad

upplevelse kan man istaumlllet locka anvaumlndarna med all information vi har att er-

bjuda

Det betyder inte att anvaumlndarna som besoumlker e-handeln med en smarttelefon inte

vill njuta av shoppingen saringsom de goumlr paring stationaumlra datorer Naumlr man designar en

mobil e-handel skall kunderna kunna faring njuta av shoppingen och jaumlmfoumlra mellan

olika produkter innan dem bestaumlmmer sig vilken produkt de vill koumlpa (Laya 2014)

ldquoBut we see many companies try to compress the whole shopping process into a

small number of taps The result is a mobile app or website that forces the user to

make a quick purchase decision rather than giving a great shopping experience

To the user it feels like the site switches from giving enticement to issuing de-

mandsrdquo

- Laya Peep 2014

5 Laringngsam uppladdningstid foumlr mobiler spelar en stor roll

Det aumlr mycket viktigt att haringlla sidstorleken saring liten som moumljligt saring att det aumlr snabbt

att ladda upp sidan

ldquoMobile users want to take quick action and also Google has reportedly started

including page speed for ranking websites in the search results so that makes it

even more important to have a lighter siterdquo

- Mehra Gagan 2015

Varingren 2014 rapporterade Radware (httpwwwradwarecomspring-sotu2014)

att majoriteten av besoumlkarna kommer att oumlverge webbplatsen efter att ha vaumlntat i

3 sekunder foumlr att ladda upp sidan (Laya 2014)

Om det finns mycket inneharingll paring en sida kan man som alternativ separera inne-

haringllet i olika flikar (Mehra 2015)

Jag har tagit ett exempel fraringn Amazoncom Paring produktsidan har ja valt en orange

vaumlska Foumlr att tex ytterligare laumlsa om produktbeskrivningen rdquoAbout this itemrdquo ser

22

jag en pil som aumlr paring houmlgra sidan (Figur 29) Naumlr jag trycker paring pilen eller laringdan

kommer jag till en annan sida daumlr jag kan laumlsa hela produktbeskrivningen (Figur

210) Paring det haumlr saumlttet inneharingller sidan all information man behoumlver men separe-

rade i olika flikar saring att det blir snabbare att ladda upp sidan

Figur 28 Produktsida paring amazoncom

23

Figur 29 Produktsida paring amazoncom

Figur 210 Produktsida paring amazoncom About this item

24

6 Misslyckade analyseringar av anvaumlndarna

Naumlr man bygger webbsidor aumlr det viktig att goumlra anvaumlndbarhetstest och analysera

kundernas beteende Hur anvaumlndarna kaumlnner sig naumlr de anvaumlnder sidan aumlr mycket

viktigt och avgoumlr hur bra din business kommer att rulla

Analyseringen aumlr den kritiska inputen foumlr designen Med analyseringen ser man

dels vilka mobila apparater anvaumlndarna anvaumlnder och om det aumlr naringgra svaringrigheter

och obekvaumlmligheter anvaumlndarna upplever vid anvaumlndningen Dessa faktorer aumlr

viktiga foumlr att saumlkerstaumllla om den mobila upplevelsen uppfyller behoven hos kon-

sumenterna Testet och analysen maringste goumlras kontinuerligt foumlr att vi skall kunna

saumlkerstaumllla att kunderna har det bekvaumlmt (Mehra 2015)

7 Mindre inneharingll foumlr mobilanvaumlndarna

E-handel webbplatser brukar goumlmma inneharingll foumlr att goumlra sidan mindre Sidan aumlr

i sjaumllva verket inte mindre men bara goumlmd foumlr anvaumlndarna som anvaumlnder sina

smarttelefoner Enligt Mehra Gagan aumlr det inte bra om det finns mindre inneharingll

foumlr mobilanvaumlndarna Oavsett med vilka enheter anvaumlndarna aumlr paring sidan boumlr det

finnas lika mycket inneharingll paring alla enheterna De flesta som handlar online brukar

aumlga flera enheter och med stor sannolikhet anvaumlnder de ocksaring andra enheter foumlr

att surfa Om inneharingllet inte ser likadant ut paring stationaumlra datorer och smarttelefo-

ner kan det orsaka daringlig anvaumlndarupplevelse foumlr anvaumlndaren Enligt Google an-

vaumlnder 90 av dem som handlar paring internet olika enheter Att begraumlnsa deras

anvaumlndning aumlr naringgonting som man boumlr undvika (Mehra 2015)

25

3 MOBILANPASSADE LOumlSNINGAR

Det finns maringnga olika loumlsningar att bygga sin webbplats med Det aumlr viktigt att komma

iharingg att mobila anvaumlndande oumlkar hela tiden Det staumlller nya krav paring webbdesign och an-

vaumlndargraumlnssnitt Anvaumlndarna foumlrvaumlntar sig idag att de ska kunna ta del av allt inneharingll paring

webben oavsett om de anvaumlnder en smarttelefon eller en surfplatta De mobilanpassade

loumlsningarna foumlr e-handel kan tex vara Responsiv design Adaptiv Design Mobilbutik

eller en mobil applikation

31 Adaptiv design

En adaptiv webbplats aumlr uppbyggd saring att den aumlr optimerad foumlr specifika skaumlrmstorlekar

Den anvaumlnder servern foumlr att upptaumlcka den enhet som anvaumlnds foumlr att visa webbplatsen

Byggande av webbplatsen med adaptiv metoden aumlr tidskraumlvande paring grund av behovet att

optimera sidan foumlr varje vald plattform front-end och back-end Innan man boumlrjar bygga

webbplatsen maringste man avgoumlra vilka alla plattformar webbplatsen kommer att optimeras

till Foumlrdel med adaptiv design aumlr att den har snabb uppladdningstid

rdquoCompared to Responsiv design adaptive web design is website-optimised for each

platform separately and makes use of the opportunities presented by the platform as

well as the models and functions It offers fast-loading pages due to the server detec-

tion device and browser sending data tailored for a particular devicerdquo

-Lubo Ruska 2013

Att vaumllja den raumltta loumlsningen handlar om att foumlrstaring vad maringlgruppen foumlrvaumlntar sig och vad

de behoumlver Eftersom foumlretaget 909jp inte aumlr en jaumltte stort foumlretag saringsom Ikea eller Ama-

zon som har oberaumlknat antal med produkter tycker jag att Responsiv design med Mobile

first metoden aumlr den mest effektiva metoden foumlr denna forskning

26

32 Responsiv design

Responsiv webbdesign aumlr ett av de populaumlraste saumltten att optimera en webbplats Re-

sponsiv webbdesign moumljliggoumlr att layouten foumlraumlndras beroende paring vilken skaumlrmstorlek

och skaumlrmupploumlsningen som anvaumlndarna har och beroende paring vilka funktioner som

webblaumlsaren stoumldjer (Responsive Design 2014)

Oberoende om anvaumlndarna anvaumlnder dator laumlsplatta eller sin mobiltelefon kommer sidan

att anpassa sig paring olika saumltt foumlr att anvaumlndarna vid alla tillfaumlllen ska ha en saring rik upplevelse

som moumljligt Man kan saumlga att en webbsida paring mindre skaumlrmar aumlr med ett annat ord en

krympande version av den stoumlrre skaumlrmstorleken

Inneharingllet saringsom kolumner och bilder paring webbsidan kommer automatiskt att anpassas

beroende paring skaumlrmstorleken Och detta aumlr paring grund av Grid systemet Allt inneharingll skall

haringllas inom ett Grid system Grid systemet skall skydda allt fraringn att bryta samman naumlr

sidan anvaumlnds paring olika skaumlrmstorlekar

Det finns 11 olika Grid storlekar tvaring kolumner tre kolumner fyra kolumner fem kolum-

ner sex kolumner sju kolumner aringtta kolumner nio kolumner tio kolumner 11 kolumner

och 12 kolumner Som exempel visar jag en figur av 12 kolumners Grid system (Swan

2014)

27

Figur 31 Ett exempel paring Grid system av 5 olika skaumlrmstorlekar (Phil Swan 2014)

Responsiv webbdesign fungerar med hjaumllp av HTML5 CSS media Query och Java-

Script Det bygger paring att webbutvecklare istaumlllet foumlr exakta storlekar maumltt i pixlar anger

sidelements storlekar i procent i jaumlmfoumlrelse med skaumlrmens storlek

Naumlr sidelementens storlekar aumlr i procent goumlr det att sidan blir flexibel och den anpassas

efter webblaumlsarens storlek medan fasta pixlar ger en scrollbar (rull-list) (Responsive De-

sign 2014)

33 Varfoumlr Responsiv design

Foumlrdelar med Responsiv design aumlr att den erbjuder en bra anvaumlndarupplevelse foumlr olika

enheter och skaumlrmstorlekar Tack vare den Responsiva designen har webbredaktoumlrer laumlt-

tare att hantera inneharingllet eftersom de bara har en version att hantera Ur en SEO synvin-

kel fungerar Responsiv design baumlttre eftersom den koncentrerar inneharingllet istaumlllet foumlr att

vattna ur det med maringnga URL foumlr samma inneharingll

28

Med en Responsiv design aumlr en webbplats laumlttare att hantera Att ha flera olika versioner

av en webbplats innebaumlr mera arbete Flera olika versioner av en webbplats innebaumlr sepa-

rata sidor att redigera och separata insatser foumlr soumlkmotoroptimering och separata soumlkmo-

torkampanjer Daumlrfoumlr aumlr det en stor foumlrdel att bygga en webbplats med den Responsiva

metoden

Med en Responsiv design kaumlnner anvaumlndarna baumlttre igen sidan baringde paring stationaumlra datorer

och mobiltelefoner Bygger man specifika webbplatser foumlr mobiler och surfplattor kan

det laumltt haumlnda att det blir olika information paring webbplatserna och att de struktureras olika

Laringt oss foumlrestaumllla oss att naringgon anvaumlnder sin mobiltelefon paring lunchen foumlr att leta efter en

flygbiljett fraringn Helsingfors till Tokyo Personen hittar en webbplats som har bra erbju-

dande och bestaumlmmer sig foumlr att fortsaumltta kolla naumlr han eller hon kommer hem Naumlr per-

sonen har kommit hem anvaumlnder hen datorn istaumlllet foumlr mobilen Om webbplatsen som

personen kollade paring lunchpausen var en Responsiv webbplats faringr personen en smidig och

bra upplevelse vid oumlvergaringngen fraringn den mobila webbplatsen till stationaumlr dator

(Lindahl 2014)

Det aumlr vaumlldigt viktigt att ha sin webbplats att optimerad till saring maringnga enheter som moumljligt

foumlr att ingen vet vilka kommer att vara framtidens enheter och daumlrfoumlr anses en webbplats

som anpassar sig till maringnga olika format vara den baumlsta loumlsningen Innan man kan boumlrja

med att designa en Responsiv webbplats maringste man veta vilka skaumlrmupploumlsningar och

storlekar det finns tillgaumlngliga och aumlr populaumlra idag Foumlr att kunna rikta till de olika skaumlr-

mupploumlsningarna med Media Queries har jag listat upp olika enheternas skaumlrmupploumls-

ningar i pixlar haumlr nedan i tabellen

ResolutionGrafisk array Enhet som anvaumlnder denna resolution skaumlrmstorlek i pixel-

taumltheten i pixlar

2880x1800 15-inch Apple MacBook Pro with Retina display

2560 x 1700 Google Chromebook Pixel

2560 x 1600 Samsung Google Nexus 10

13-inch Apple MacBook Pro with Retina display

29

2560 x 1440 27-inch Apple iMac 102 111 113 122 (Late 2009 -

2012)

1920 x 1080 HTC One Samsung

Sony Xperia Z amp Xperia ZL

Asus PadFone Infinity

Acer Aspire S5

Asus Zenbook Prime

1600 x 900 Apple Macbook Air

1366 x 768 Small desktoplaptop screen resolution

Asus VivoTab RT

Samsung N350

1280 x 1024 Standard desktop screen resolution

1280 x 800 Asus PadFone 2

Samsung Galaxy Note

Sony Xperia Tablet S

1280 x 720 Sony Xperia S

HTC Windows Phone 8X

HTC One mini

1136 x 640 Apple iPhone 5 5S amp 5C

Apple iPod Touch (5th generation)

960 x 640 Apple iPhone 4 amp 4S

Apple iPod Touch (4th generation)

854 x 480 Sony Xperia ray

Nokia N9

800 x 480 Nokia Lumia 510 amp 520

Samsung Galaxy I Galaxy S Galaxy S Plus Galaxy S Ad-

vance Galaxy SL Galaxy S Duos Galaxy Xcover 2 Galaxy

Beam Nexus S Captivate Glide amp Galaxy S III mini

HTC Desire X HTC Desire V Desire VC Desire VT De-

sire U amp Windows Phone 8S

30

LG Optimus 2X Optimus EX Optimus L5 II Optimus Q2

amp Optimus Black

T-Mobile G2x

Asus E600

620 x 480 Blackberry Bold 9900 amp Bold Touch 9930

Blackberry Torch 9810

LG Optimus Z

640 x 360 Sony Ericsson Vivaz amp Vivaz Pro

Nokia 500 amp 5800 XpressMusic

Nokia N8 N97 E7 and X6

480 x 320 Apple iPhone 3G amp 3GS

Samsung Galaxy Ace

320 x 240 Nokia E71

Blackberry Curve 9220 amp 9320

Sony Ericsson txt

Samsung Galaxy Y amp Galaxy Chat

Nokia Asha 501

Figur 32 Resolutions referenser paring olika enheter

31

4 VAD AumlR MOBILE FIRST

Mobile first metoden aumlr en metod och arbetsprocess foumlr webbdesigners som aumlr skapad av

Luke Wroblewski Naumlr man jobbar med ett projekt och designar strukturerar och imple-

menterar en webbplats aumlr Mobile first metoden man paringboumlrjar arbetet med Med metoden

menar Wroblewski att man foumlrst boumlrjar designa webbsidor fraringn de minsta enheterna

Figur 41 Mobile First att bygga webbsidan fraringn den minsta skaumlrmen till den stoumlrsta skaumlrmen

Wroblewski som har skapat Mobile First metoden understryker att metoden ska priorite-

ras daring man skapar anvaumlndarupplevelser

Det finns tre viktiga anledningar foumlr att utveckla foumlr Mobile First

Den foumlrbereder foumlr den stora utveckling och nya moumljligheter som uppkommer

inom det mobila omraringdet idag (836 av vaumlrldens befolkning anvaumlnder internet

paring sin smarttelefon 2015)

Den goumlr att vi blir tvungna att prioritera och fokusera varingrt inneharingll genom att ac-

ceptera de begraumlnsningar som aumlr foumlrenade med mobil design

32

och goumlr att vi kan leverera innovativa upplevelser genom att bygga utifraringn nya

funktioner som finns inbyggda i de mobila enheterna (bla GEO lokalisering)

En mobil webbplats behoumlver endast ha en mycket enkel layout och navigeringen ska vara

laumltt och effektiv

Naumlr man designar med Mobile first metoden tvingas man goumlra viktiga beslut om vad som

ska prioriteras Naumlr den optimerad design foumlr en liten skaumlrm visas paring en stoumlrre skaumlrm

kommer det att bli laumlttare att designa paring de stoumlrre skaumlrmarna Allt som ska goumlras aumlr daring

bara att fylla paring inneharingllet och designa saring att det aumlr grafiskt tilltalande och laumltt att hitta

inneharingllet (Wroblewski 2011)

41 Varfoumlr Mobile first

Vaumlrlden vi lever i idag aumlr inte mera som foumlr tio aringr sedan Allt runtom oss har utvecklats

speciellt mobiltelefonerna Tidigare anvaumlndes mobiltelefoner bara foumlr att skicka med-

delandet ringa och ta emot samtal Nu anvaumlnds den till foumlr att dels ta bilder video GPS

navigation foumlr vaumlgvisning och speciellt internetanvaumlndningen saringsom Google nyheter

Facebook Youtube och mycket mer Paring grund av det har ocksaring varingr livsstil foumlraumlndrats

Internetanvaumlndning idag har blivit allt vanligare Idag anvaumlnder vi naumltet i skolan paring jobbet

eller var och naumlr som helst bara man har en smarttelefon eller surfplatta och naumltet kopplat

Tidigare boumlrjade man bygga en webbplats fraringn den stoumlrsta skaumlrmen medan den mobila

sidan var en biprodukt Laringt oss saumlga att man har en webbplats med en rik grafisk layout

och ser stilig ut paring stationaumlra datorer Naumlr man skalar ner sidan foumlr att passa en mobilskaumlrm

kommer resultatet att vara en smaumlrta foumlr varingra oumlgon Paring den lilla mobilskaumlrmen kommer

det att vara olaumlsligt och svaringrt att anvaumlnda Foumlr att naring inneharingllet maringste du tom zooma in

och ut eller skrolla till houmlger och vaumlnster Det haumlr kommer att ge en negativ bild av ditt

foumlretag och anvaumlndarna kanske aldrig mera besoumlker din webbplats (Wroblewski 2011)

Ett bra exempel aumlr Tokyo Skytree webbplats som aumlnnu idag inte ha byggt in funktionalitet

och designen foumlr mindre skaumlrmupploumlsningar paring den engelska sidan

33

Tokyo Skytree aumlr vaumlrldens naumlst houmlgsta torn efter Burj Khalifa Tornet aumlr Japans houmlgsta

byggnadsverk med en houmljd paring 634 meter Den oumlppnades 22 maj 2012 och under det foumlrsta

aringret hade den 64 miljoner besoumlkare fraringn hela vaumlrlden Trots det har de laringtit bli att utveckla

den engelska webbsidan Paring bilden ser man att hemsidan ser exakt likadant ut paring stationaumlr

dator och paring mobilen

Figur 42 Hemsidan paring Tokyo Skytree paring stationaumlr datorskaumlrm

34

Figur 43 Hemsidan foumlr Tokyo Skytree Foumlrsta bilden visar hur det ser ut normalt Andra bilden visar naumlr man zoomar

in

Naumlr man foumlrsoumlker zooma in foumlr att laumlsa inneharingllet hoppar sidbalken (paring vaumlnstra sidan) paring

texten Det haumlr ger en mycket daringlig anvaumlndarupplevelse och kan ge fel bild av turistplat-

sen Ett annat fel paring sidan aumlr naumlr man vaumlljer spraringk till japanska ser sidan inte likadant ut

35

Figure 44 Hemsidan paring Tokyo Skytree paring japanska

Om du kan laumlsa japanska kommer du att undra varfoumlr det finns massor med information

och sidan ser mycket trevligare ut paring den japanska sidan Paring den internationella sidan

dvs engelska ser det inte lika trevligt ut och inneharingller inte allt som det goumlr paring den

japanska sidan Det aumlr som om den stoumlrsta maringlgruppen aumlr foumlr japanska turister och som

om de skulle inte bry sig om turister fraringn utlandet

Utoumlver det har de ocksaring byggt en mobilsida foumlr den japanska webbsidan Varfoumlr satsa bara

paring den japanska sidan och inte den engelska sidan naumlr maringlgruppen aumlr hela vaumlrlden

36

Figur 45 Mobil sidan paring Tokyo Skytree paring japanska

Vi lever i 2015 saring alla borde veta att det aumlr vaumlldigt viktig att ha en mobil webbplats som

erbjuder en bra anvaumlndarupplevelse paring alla spraringk som webbplatsen erbjuder Naumlr man har

sin sida paring flera spraringk och aumlndaring bestaumlmmer sig att bygga sidan ordentligt bara paring ett spraringk

kan anvaumlndarna faring en fel bild av foumlretaget I vaumlrsta fall kommer anvaumlndarna tycka att sidan

aumlr oparinglitligt och aringterkommer aldrig igen

Mobile first metoden aumlr daumlrfoumlr en mycket effektiv metod att bygga sin webbplats med

Man boumlrjar med att bygga sin webbplats fraringn den minsta skaumlrmen Man tvingas goumlra be-

slut om vad som ska absolut prioriteras Arbetsprocessen foumlr oss webbdesigners blir

mycket effektivare genom att foumlrst designa fraringn den minsta skaumlrmen och sedan foumlrflytta

oss till de stoumlrre skaumlrmarna Har man ett 6 kvadratmeters sovrum och foumlrsoumlker faring sin saumlng

skrivbord hylla klaumldskaringp och soffan att rymmas in aumlr det ganska utmanande Men naumlr

man boumlrjar med det mest utmanande i arbetsprocessen blir arbetet ocksaring mindre utma-

nande desto stoumlrre rum eller skaumlrm det blir (Wroblewski 2011)

37

5 909JP

909jp aumlr en elektronisk handel en moumlbelaffaumlr som saumlljer vaumlsterlaumlndska produkter Den

elektroniska butiken kommer att oumlppnas i Japan 2015 Deras foumlrvaumlntningar aumlr att faring in

en miljon dollar i foumlrsaumlljning per aringr I deras elektroniska moumlbelaffaumlr saumlljs bla stolar bord

soffor och lampor Maringlgruppen aumlr alla konsumenter mellan 18-60 aringringar

Japaner aumlr intresserade av vaumlsterlaumlndska produkter och livsstil men foumlr de flesta varor aumlr

designen knutna till deras egen kultur vilket goumlr dem mer intresserad Det aumlr ocksaring mycket

viktigt att ha sin hemsida paring japanska eftersom 99 av den japanska befolkningen foumlre-

drar att inte laumlsa inneharingllet paring andra spraringk (Khurana)

Japan aumlr ett land med vaumlrldens tredje stoumlrsta ekonomi paring 5 biljoner De har vaumlrldens ti-

onde stoumlrsta befolkning med ca 1271 miljoner invaringnare varav 70 av den totala befolk-

ningen anvaumlnder internet och 24 av dem anvaumlnder internet paring sin smarttelefon

(Khurana)

Viktigt med detta projekt aumlr att sikta aringt raumltt haringll och betjaumlna kunderna paring det baumlsta saumlttet

via webbplatsen Foumlr att kunna faringnga saring maringnga kunder som moumljligt aumlr det mycket viktigt

att designa en webbplats som aumlr anvaumlndarvaumlnlig stilig och laumltt att anvaumlnda (Wroblewski

2011)

Jag har daumlrfoumlr kommit underfund med att anvaumlnda Mobile first och Responsiv design

metoden foumlr att utveckla den mobila 909jp sidan Med tanke paring att det aumlr en Responsiv

design skall layouten paring den mobila versionen ocksaring passa in med de stoumlrre skaumlrmarna

naumlr sidan skalas upp Det aumlr dock viktigt poaumlngtera att jag endast kommer att koncentrera

mig paring den mobila designen och utveckla designen endast foumlr denna forskning

38

6 ANALYS AV DEN NYA DESIGNEN

Med hjaumllp av den tidigare designen paring 909jp och de kritiska punkterna jag har hittat under

forskningen har jag skapat en ny och foumlrbaumlttrad design av webbplatsen foumlr mobiler I det

haumlr kapitlet kommer jag att visa naringgra exempel paring den tidigare designen och jaumlmfoumlra den

med nya designen samt analysera arbetet

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger)

1 Call-to-action knapparna

Under hela arbetsprocessen har jag haft i minnet att navigeringar laumlnkar och knap-

parna ska vara tillraumlckligt stora att klicka paring I den tidigare designen har de stora

bilder paring kategorier vilket jag tycker aumlr en bra design att aringtervaumlnda

39

2 Soumlkfunktionen

Paring den tidigare versionen haumlr nedan ser man att soumlkfunktionen inte finns med

medan paring den nya designen ser man soumlkfunktionen genast naumlr man kommer till

sidan Som tidigare framfoumlrdes att soumlkfunktionen alltid ska synas saring att man laumltt

skall kunna soumlka fram produkterna Om soumlkfunktionen inte finns med eller aumlr svaringr

att hitta naumlr den behoumlvs kan det orsaka missnoumlje hos anvaumlndarna (Mehra Gagan

2015)

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp

Figur 63 Soumlkfunktionen paring den nya designen 909jp

40

3 Laumltt att navigera

Naumlr skaumlrmen aumlr liten aumlr det viktig att ha en enkel layout (Wroblewski 2011)

Jag har daumlrfor i den nya designen flyttat rdquoHemrdquo och rdquoBlogrdquo knapparna bort fraringn

den oumlvre menyn Hem-knappen finns nu i hamburgarmenyn paring vaumlnstra sidan me-

dan Blog-knappen finns i footer Detta goumlr att det ser mera organiserat ut

Figur 64 Gamla designen

Laringt oss foumlrflytta vidare till menyer foumlr kategorier Paring hemsidan har man tvaring alter-

nativ att naring kategorierna Foumlrsta aumlr den hamburgarmenyn knappen paring vaumlnstra si-

dan I menyn aumlr kategorierna indelade i fyra delar stolar lampor ergonomisk och

soffa amp middag Detta goumlr det laumltt och klart foumlr anvaumlndarna var produkterna finns

Eftersom vi bara har partiell uppmaumlrksamhet fraringn anvaumlndarna naumlr de aumlr paring sina

smarttelefoner har jag valt att saumltta in ikoner i menyn (Figur 65) Naumlr anvaumlndaren

bara anvaumlnder ena oumlgat foumlr att kolla paring mobilen och andra oumlgat foumlr naringgonting annat

ska den lilla skaumlrmen med webbplatsen kunna faringnga uppmaumlrksamheten samt un-

derlaumltta anvaumlndningen av webbplatsen (Wroblewski 2011)

41

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny

Andra menyn for kategorierna aumlr de fyra bilderna under Aeron chair slideshowen

Paring den tidigare designen ser man endast ett foumlnster av kategorierna som aumlr place-

rade i en kolumn som upprepas loggraumltt (Figur 66) Det haumlr goumlr att anvaumlndaren

maringste skrolla ner foumlr att se varenda kategori vilket kan orsaka obekvaumlmlighet Att

se flera kategorier paring samma skaumlrm sparar tid och anvaumlndaren kommer aumlven baumlttre

iharingg var sakerna finns Att ha bara rdquoenrdquo stor bild som syns paring skaumlrmen och vara

tvungen att skrolla ner foumlr att se naumlsta bild aumlr frustrerande Paring den nya designen

har jag tvaring rutor av kategorier bredvid varandra (Figur 66)

42

Figur 66 Kategorier paring den gamla designen (till vaumlnster) Kategorier paring den nya designen (till houmlger)

4 Ta det roliga ur shopping

Paring den nya designen straumlvar jag efter att erbjuda en bekvaumlm shopping-upplevelse

Naumlr anvaumlndarna besoumlker e-handeln med en smarttelefon foumlrvaumlntar hanhon sig

ocksaring att kunna ta del av allt inneharingll och goumlra jaumlmfoumlrelser med andra produkter

Jag har daumlrfoumlr i den nya designen pressat ihop laumlngden paring kolumnhoumljden som om-

ringar produkten Som resultat ser vi nu fyra produkter paring samma skaumlrm (Figur

67) I den tidigare designen ser vi en enda produkt paring en skaumlrm och foumlr att se

andra produkter maringste vi skrolla ner Paring det haumlr saumlttet har anvaumlndarna svaringrare att

jaumlmfoumlra produkterna (Laya 2014)

43

Figur 67 Tidigare produktsida (till vaumlnster) Ny produktsida (till houmlger)

I den tidigare designen ser vi ocksaring att det finns endast produktens bild produk-

tens namn koumlpvagnen och infoikonen Om man vill faring reda paring produktens inform-

ation maringste man klicka paring produktens bild eller paring infoikonen som foumlr oss direkt

till sjaumllva produktens sida Bara foumlr att man vill faring reda paring vad det aumlr foumlr produkt

foumlrs man vidare till en annan sida Det haumlr kan orsaka att kunden inte njuter totalt

av shoppingen och dessutom kan han inte jaumlmfoumlra produkterna naumlr han aumlr paring ka-

tegoriernas sida (Laya 2014)

Laringt oss hoppa vidare till den nya designen (Figur 68) Paring den nya designen har

jag satt in en kort detaljbeskrivning foumlr varje produkt Dessutom naumlr man klickar

paring infoikonen paring houmlgra sidan kommer man inte direkt till produktsidan utan det

kommer att dyka upp en inforuta som har en kort beskrivning paring produkten Om

anvaumlndaren aumlr intresserad av produkten kan han garing in till sjaumllva produktsida ge-

nom att klicka paring rdquoView productrdquo eller ocksaring paring produktbilden daumlr hanhon kan

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

15

60 saumlger att smarttelefon fanns naumlrmaste till hands vid koumlptillfaumlllet

27 anvaumlnder en app foumlr att handla online

17 oumlppnade ett erbjudande via e-mail i sin smarttelefon

5 har ingen dator

3 var i butik och koumlpte varan paring naumltet istaumlllet

4 hade ingen internetanslutning

3 scannade en QR-kod

Vad handlar vi med mobil

Foumlr att snabbt faringr en inblick i vad konsumenterna handlar med mobil ser vi haumlr nedan

(Figur 24) Konsumenter handlar mer av naumlstan allt Kunder som spenderar mer aumln 500

euro med smarttelefoner eller surfplattor koumlper i foumlrsta hand resor medan de som handlar

foumlr mindre aumln 100 euro laumlgger pengar paring media

Figur 24 Mobilt handlar vi mer av naumlstan allt

16

24 Bra mobila e-handel webbplatser

En bra mobil webbplats aumlr naumlr sidan aumlr enkel att anvaumlnda fast man bara anvaumlnder ett oumlga

och en tumme

rdquoWhen reflecting on a lot of mobile usage patterns I like to imagine people as rdquoone

eyeball and one thumb One thumb because they are likely to be holding their mobile

in one hand and using a single thumb to control it one eyeball because in many loca-

tions where mobile devices are use we only have peoples partial attentionrdquo

-Wroblewski Luke 2011)

Man kan aldrig exakt veta var anvaumlndaren befinner sig naumlr han surfar med sin smarttele-

fon Han kanske befinner sig i vardagsrummet foumlr att sloumltt surfa efter en ny lampa medan

han kollar paring Tvn Kanske anvaumlndaren sitter hemma och har en stadig wifi eller kanske

paring sommarstugan och har 3G4G som byter mellan olika naumltverk osv (Thoren 2012)

Naumlr anvaumlndaren goumlr naringgonting samtidigt som han surfar paring webbplatsen har han bara den

partiella uppmaumlrksamheten Daumlrfoumlr aumlr det betydligt fler kontexter som man maringste ta haumln-

syn till naumlr man designar webbplatser foumlr mobiler (Wroblewski 2011)

Haumlr aumlr tvaring bra exempel av lyckad e-handel foumlretag i vaumlrlden De har inte lyckats bra bara

med att saumllja produkterna utan ocksaring med designen Haumlr nedan aumlr bilderna paring mobil de-

signen av Rakutencom och Amazoncom

17

Figur 25 Hemsida paring rakutencom foumlr mobiler

Direkt naumlr man kommer paring sidan hittar man inloggningen koumlpvagnen soumlkfunktionen

menyn och speciellt de stora bilderna paring katalogerna vilket aumlr jaumltte laumltta att klicka paring

Fastaumln mobilskaumlrmen aumlr liten goumlr den haumlr det bara inte laumltt att navigera runt sidorna utan

ocksaring trevligt att vara paring sidan

Amazoncom har ocksaring lyckats bra med designen Naumlr man kommer till sidan ser man

direkt Sign in Department Wish List Deals och Search funktionen Under search funkt-

ionen ser man genast en inspirerande reklam som paringminner oss om att det aumlr varingr

rdquoSPRINGacuteS PERFECT PANTSrdquo Fast sidan har jaumltte maringnga objekt i den aumlr det trots allt

18

jaumltte laumltt att navigera runt sidorna Man tappar inte bort sig och man hittar laumltt det som

man aumlr ute efter

Figur 26 Hemsida paring amazoncom foumlr mobiler

19

25 Kritiska punkterna foumlr bra mobil design paring e-handel

Naumlr man handlar med en mindre skaumlrm aumlr det mera utmanande eftersom skaumlrmen aumlr liten

och anvaumlndarna brukar inte ha tillraumlckligt med taringlamod att sitta och soumlka naringgonting foumlr

laumlnge fraringn en liten skaumlrm Daumlrfoumlr aumlr det viktigt att veta vilka saker man boumlr beakta naumlr

man designar en mobil e-handel I det haumlr stycket kommer jag att lista upp sakerna man

boumlr veta naumlr man designar en mobil e-handel webbplats

Naumlr man handlar med en mindre skaumlrm aumlr det mera utmanande eftersom skaumlrmen aumlr liten

och anvaumlndarna brukar inte ha tillraumlckligt med taringlamod att sitta och soumlka naringgonting foumlr

laumlnge paring en liten skaumlrm Daumlrfoumlr aumlr det viktigt att veta vilka saker man boumlr beakta naumlr man

designar en mobil e-handel I det haumlr stycket kommer jag att lista upp kritiska saker man

boumlr veta naumlr man designar en mobil e-handel webbplats

1 Call-to-action knapparna foumlr smaring paring en mobilskaumlrm

Naumlr man designar webbsidor foumlr mobiler kan det ibland vara en utmaning att faring

allt att rymmas in Daumlrfoumlr brukar ocksaring webbdesigner minska de sk rdquocall to act-

ionrdquo knapparna Om anvaumlndaren maringste zooma in foumlr att klicka paring en knapp men

av misstag klickar paring en annan knapp kan det bli frustrerande foumlr dem och detta

leder sedan till att de laumlmnar sidan Daumlrfoumlr aumlr det mycket viktigt att designa knap-

parna och inneharingllet saring att anvaumlndarna laumltt naringr dem

2 Soumlkfunktionen ska alltid finnas med

Paring mobila e-handel webbplatser ska soumlkfunktionen alltid synas saring att man laumltt skall

kunna soumlka produkterna Laringt oss saumlga att kunden inte hittar produkten han soumlker

och vill anvaumlnda soumlkfunktionen Han letar och letar efter soumlkfunktionen utan re-

sultat Detta orsakar inte bara att kunden laumlmnar din sida men ocksaring kommer han

att beraumlttar det vidare aringt andra hur han upplevde din sida (Mehra 2015)

3 Laumltt att navigera

20

Det ska vara laumltt att navigera runt sidorna Anvaumlndarna ska veta var han aumlr och hur

han kommer vidare efter att han tex har valt produkten Menyerna foumlr katalo-

gerna ska vara laumltta att navigera Om menyerna foumlr katalogerna aumlr foumlrvirrande och

svaringra foumlr anvaumlndaren att hitta produkterna blir han laumltt irriterad Exemplar paring (fi-

gur 27) haumlr nedan visar att menyerna aumlr ganska foumlrvirrande paring vaumlnstra bilden me-

dan paring houmlgra sidan aumlr det klart och tydligt (Laya 2014)

Figur 27 Jaumlmfoumlrelse mellan en bra och daringlig navigation httpconversionxlcommake-mobile-convert

4 Ta de roliga ur shopping

Det vanligaste och stoumlrsta misstaget som de flesta foumlretag goumlr naumlr de designar foumlr

mobil e-handel aumlr att de foumlrsoumlker flytta kunderna fraringn shopping till koumlp Shopping

paring en stationaumlr dator goumlr det laumltt naumlr det oftast finns ett enormt antal produkter att

vaumllja mellan och det aumlr laumltt att blaumlddra runt Men foumlr mobiler aumlr det annat

Maringnga foumlretag foumlrsoumlker pressa ihop hela shopping-processen till smaring tabbar och

minska paring inneharingllet Som resultat kommer anvaumlndaren att kaumlnna sig paringtvingad

21

att goumlra snabba beslut paring inkoumlp Istaumlllet foumlr att ge anvaumlndarna en saringdan paringtvingad

upplevelse kan man istaumlllet locka anvaumlndarna med all information vi har att er-

bjuda

Det betyder inte att anvaumlndarna som besoumlker e-handeln med en smarttelefon inte

vill njuta av shoppingen saringsom de goumlr paring stationaumlra datorer Naumlr man designar en

mobil e-handel skall kunderna kunna faring njuta av shoppingen och jaumlmfoumlra mellan

olika produkter innan dem bestaumlmmer sig vilken produkt de vill koumlpa (Laya 2014)

ldquoBut we see many companies try to compress the whole shopping process into a

small number of taps The result is a mobile app or website that forces the user to

make a quick purchase decision rather than giving a great shopping experience

To the user it feels like the site switches from giving enticement to issuing de-

mandsrdquo

- Laya Peep 2014

5 Laringngsam uppladdningstid foumlr mobiler spelar en stor roll

Det aumlr mycket viktigt att haringlla sidstorleken saring liten som moumljligt saring att det aumlr snabbt

att ladda upp sidan

ldquoMobile users want to take quick action and also Google has reportedly started

including page speed for ranking websites in the search results so that makes it

even more important to have a lighter siterdquo

- Mehra Gagan 2015

Varingren 2014 rapporterade Radware (httpwwwradwarecomspring-sotu2014)

att majoriteten av besoumlkarna kommer att oumlverge webbplatsen efter att ha vaumlntat i

3 sekunder foumlr att ladda upp sidan (Laya 2014)

Om det finns mycket inneharingll paring en sida kan man som alternativ separera inne-

haringllet i olika flikar (Mehra 2015)

Jag har tagit ett exempel fraringn Amazoncom Paring produktsidan har ja valt en orange

vaumlska Foumlr att tex ytterligare laumlsa om produktbeskrivningen rdquoAbout this itemrdquo ser

22

jag en pil som aumlr paring houmlgra sidan (Figur 29) Naumlr jag trycker paring pilen eller laringdan

kommer jag till en annan sida daumlr jag kan laumlsa hela produktbeskrivningen (Figur

210) Paring det haumlr saumlttet inneharingller sidan all information man behoumlver men separe-

rade i olika flikar saring att det blir snabbare att ladda upp sidan

Figur 28 Produktsida paring amazoncom

23

Figur 29 Produktsida paring amazoncom

Figur 210 Produktsida paring amazoncom About this item

24

6 Misslyckade analyseringar av anvaumlndarna

Naumlr man bygger webbsidor aumlr det viktig att goumlra anvaumlndbarhetstest och analysera

kundernas beteende Hur anvaumlndarna kaumlnner sig naumlr de anvaumlnder sidan aumlr mycket

viktigt och avgoumlr hur bra din business kommer att rulla

Analyseringen aumlr den kritiska inputen foumlr designen Med analyseringen ser man

dels vilka mobila apparater anvaumlndarna anvaumlnder och om det aumlr naringgra svaringrigheter

och obekvaumlmligheter anvaumlndarna upplever vid anvaumlndningen Dessa faktorer aumlr

viktiga foumlr att saumlkerstaumllla om den mobila upplevelsen uppfyller behoven hos kon-

sumenterna Testet och analysen maringste goumlras kontinuerligt foumlr att vi skall kunna

saumlkerstaumllla att kunderna har det bekvaumlmt (Mehra 2015)

7 Mindre inneharingll foumlr mobilanvaumlndarna

E-handel webbplatser brukar goumlmma inneharingll foumlr att goumlra sidan mindre Sidan aumlr

i sjaumllva verket inte mindre men bara goumlmd foumlr anvaumlndarna som anvaumlnder sina

smarttelefoner Enligt Mehra Gagan aumlr det inte bra om det finns mindre inneharingll

foumlr mobilanvaumlndarna Oavsett med vilka enheter anvaumlndarna aumlr paring sidan boumlr det

finnas lika mycket inneharingll paring alla enheterna De flesta som handlar online brukar

aumlga flera enheter och med stor sannolikhet anvaumlnder de ocksaring andra enheter foumlr

att surfa Om inneharingllet inte ser likadant ut paring stationaumlra datorer och smarttelefo-

ner kan det orsaka daringlig anvaumlndarupplevelse foumlr anvaumlndaren Enligt Google an-

vaumlnder 90 av dem som handlar paring internet olika enheter Att begraumlnsa deras

anvaumlndning aumlr naringgonting som man boumlr undvika (Mehra 2015)

25

3 MOBILANPASSADE LOumlSNINGAR

Det finns maringnga olika loumlsningar att bygga sin webbplats med Det aumlr viktigt att komma

iharingg att mobila anvaumlndande oumlkar hela tiden Det staumlller nya krav paring webbdesign och an-

vaumlndargraumlnssnitt Anvaumlndarna foumlrvaumlntar sig idag att de ska kunna ta del av allt inneharingll paring

webben oavsett om de anvaumlnder en smarttelefon eller en surfplatta De mobilanpassade

loumlsningarna foumlr e-handel kan tex vara Responsiv design Adaptiv Design Mobilbutik

eller en mobil applikation

31 Adaptiv design

En adaptiv webbplats aumlr uppbyggd saring att den aumlr optimerad foumlr specifika skaumlrmstorlekar

Den anvaumlnder servern foumlr att upptaumlcka den enhet som anvaumlnds foumlr att visa webbplatsen

Byggande av webbplatsen med adaptiv metoden aumlr tidskraumlvande paring grund av behovet att

optimera sidan foumlr varje vald plattform front-end och back-end Innan man boumlrjar bygga

webbplatsen maringste man avgoumlra vilka alla plattformar webbplatsen kommer att optimeras

till Foumlrdel med adaptiv design aumlr att den har snabb uppladdningstid

rdquoCompared to Responsiv design adaptive web design is website-optimised for each

platform separately and makes use of the opportunities presented by the platform as

well as the models and functions It offers fast-loading pages due to the server detec-

tion device and browser sending data tailored for a particular devicerdquo

-Lubo Ruska 2013

Att vaumllja den raumltta loumlsningen handlar om att foumlrstaring vad maringlgruppen foumlrvaumlntar sig och vad

de behoumlver Eftersom foumlretaget 909jp inte aumlr en jaumltte stort foumlretag saringsom Ikea eller Ama-

zon som har oberaumlknat antal med produkter tycker jag att Responsiv design med Mobile

first metoden aumlr den mest effektiva metoden foumlr denna forskning

26

32 Responsiv design

Responsiv webbdesign aumlr ett av de populaumlraste saumltten att optimera en webbplats Re-

sponsiv webbdesign moumljliggoumlr att layouten foumlraumlndras beroende paring vilken skaumlrmstorlek

och skaumlrmupploumlsningen som anvaumlndarna har och beroende paring vilka funktioner som

webblaumlsaren stoumldjer (Responsive Design 2014)

Oberoende om anvaumlndarna anvaumlnder dator laumlsplatta eller sin mobiltelefon kommer sidan

att anpassa sig paring olika saumltt foumlr att anvaumlndarna vid alla tillfaumlllen ska ha en saring rik upplevelse

som moumljligt Man kan saumlga att en webbsida paring mindre skaumlrmar aumlr med ett annat ord en

krympande version av den stoumlrre skaumlrmstorleken

Inneharingllet saringsom kolumner och bilder paring webbsidan kommer automatiskt att anpassas

beroende paring skaumlrmstorleken Och detta aumlr paring grund av Grid systemet Allt inneharingll skall

haringllas inom ett Grid system Grid systemet skall skydda allt fraringn att bryta samman naumlr

sidan anvaumlnds paring olika skaumlrmstorlekar

Det finns 11 olika Grid storlekar tvaring kolumner tre kolumner fyra kolumner fem kolum-

ner sex kolumner sju kolumner aringtta kolumner nio kolumner tio kolumner 11 kolumner

och 12 kolumner Som exempel visar jag en figur av 12 kolumners Grid system (Swan

2014)

27

Figur 31 Ett exempel paring Grid system av 5 olika skaumlrmstorlekar (Phil Swan 2014)

Responsiv webbdesign fungerar med hjaumllp av HTML5 CSS media Query och Java-

Script Det bygger paring att webbutvecklare istaumlllet foumlr exakta storlekar maumltt i pixlar anger

sidelements storlekar i procent i jaumlmfoumlrelse med skaumlrmens storlek

Naumlr sidelementens storlekar aumlr i procent goumlr det att sidan blir flexibel och den anpassas

efter webblaumlsarens storlek medan fasta pixlar ger en scrollbar (rull-list) (Responsive De-

sign 2014)

33 Varfoumlr Responsiv design

Foumlrdelar med Responsiv design aumlr att den erbjuder en bra anvaumlndarupplevelse foumlr olika

enheter och skaumlrmstorlekar Tack vare den Responsiva designen har webbredaktoumlrer laumlt-

tare att hantera inneharingllet eftersom de bara har en version att hantera Ur en SEO synvin-

kel fungerar Responsiv design baumlttre eftersom den koncentrerar inneharingllet istaumlllet foumlr att

vattna ur det med maringnga URL foumlr samma inneharingll

28

Med en Responsiv design aumlr en webbplats laumlttare att hantera Att ha flera olika versioner

av en webbplats innebaumlr mera arbete Flera olika versioner av en webbplats innebaumlr sepa-

rata sidor att redigera och separata insatser foumlr soumlkmotoroptimering och separata soumlkmo-

torkampanjer Daumlrfoumlr aumlr det en stor foumlrdel att bygga en webbplats med den Responsiva

metoden

Med en Responsiv design kaumlnner anvaumlndarna baumlttre igen sidan baringde paring stationaumlra datorer

och mobiltelefoner Bygger man specifika webbplatser foumlr mobiler och surfplattor kan

det laumltt haumlnda att det blir olika information paring webbplatserna och att de struktureras olika

Laringt oss foumlrestaumllla oss att naringgon anvaumlnder sin mobiltelefon paring lunchen foumlr att leta efter en

flygbiljett fraringn Helsingfors till Tokyo Personen hittar en webbplats som har bra erbju-

dande och bestaumlmmer sig foumlr att fortsaumltta kolla naumlr han eller hon kommer hem Naumlr per-

sonen har kommit hem anvaumlnder hen datorn istaumlllet foumlr mobilen Om webbplatsen som

personen kollade paring lunchpausen var en Responsiv webbplats faringr personen en smidig och

bra upplevelse vid oumlvergaringngen fraringn den mobila webbplatsen till stationaumlr dator

(Lindahl 2014)

Det aumlr vaumlldigt viktigt att ha sin webbplats att optimerad till saring maringnga enheter som moumljligt

foumlr att ingen vet vilka kommer att vara framtidens enheter och daumlrfoumlr anses en webbplats

som anpassar sig till maringnga olika format vara den baumlsta loumlsningen Innan man kan boumlrja

med att designa en Responsiv webbplats maringste man veta vilka skaumlrmupploumlsningar och

storlekar det finns tillgaumlngliga och aumlr populaumlra idag Foumlr att kunna rikta till de olika skaumlr-

mupploumlsningarna med Media Queries har jag listat upp olika enheternas skaumlrmupploumls-

ningar i pixlar haumlr nedan i tabellen

ResolutionGrafisk array Enhet som anvaumlnder denna resolution skaumlrmstorlek i pixel-

taumltheten i pixlar

2880x1800 15-inch Apple MacBook Pro with Retina display

2560 x 1700 Google Chromebook Pixel

2560 x 1600 Samsung Google Nexus 10

13-inch Apple MacBook Pro with Retina display

29

2560 x 1440 27-inch Apple iMac 102 111 113 122 (Late 2009 -

2012)

1920 x 1080 HTC One Samsung

Sony Xperia Z amp Xperia ZL

Asus PadFone Infinity

Acer Aspire S5

Asus Zenbook Prime

1600 x 900 Apple Macbook Air

1366 x 768 Small desktoplaptop screen resolution

Asus VivoTab RT

Samsung N350

1280 x 1024 Standard desktop screen resolution

1280 x 800 Asus PadFone 2

Samsung Galaxy Note

Sony Xperia Tablet S

1280 x 720 Sony Xperia S

HTC Windows Phone 8X

HTC One mini

1136 x 640 Apple iPhone 5 5S amp 5C

Apple iPod Touch (5th generation)

960 x 640 Apple iPhone 4 amp 4S

Apple iPod Touch (4th generation)

854 x 480 Sony Xperia ray

Nokia N9

800 x 480 Nokia Lumia 510 amp 520

Samsung Galaxy I Galaxy S Galaxy S Plus Galaxy S Ad-

vance Galaxy SL Galaxy S Duos Galaxy Xcover 2 Galaxy

Beam Nexus S Captivate Glide amp Galaxy S III mini

HTC Desire X HTC Desire V Desire VC Desire VT De-

sire U amp Windows Phone 8S

30

LG Optimus 2X Optimus EX Optimus L5 II Optimus Q2

amp Optimus Black

T-Mobile G2x

Asus E600

620 x 480 Blackberry Bold 9900 amp Bold Touch 9930

Blackberry Torch 9810

LG Optimus Z

640 x 360 Sony Ericsson Vivaz amp Vivaz Pro

Nokia 500 amp 5800 XpressMusic

Nokia N8 N97 E7 and X6

480 x 320 Apple iPhone 3G amp 3GS

Samsung Galaxy Ace

320 x 240 Nokia E71

Blackberry Curve 9220 amp 9320

Sony Ericsson txt

Samsung Galaxy Y amp Galaxy Chat

Nokia Asha 501

Figur 32 Resolutions referenser paring olika enheter

31

4 VAD AumlR MOBILE FIRST

Mobile first metoden aumlr en metod och arbetsprocess foumlr webbdesigners som aumlr skapad av

Luke Wroblewski Naumlr man jobbar med ett projekt och designar strukturerar och imple-

menterar en webbplats aumlr Mobile first metoden man paringboumlrjar arbetet med Med metoden

menar Wroblewski att man foumlrst boumlrjar designa webbsidor fraringn de minsta enheterna

Figur 41 Mobile First att bygga webbsidan fraringn den minsta skaumlrmen till den stoumlrsta skaumlrmen

Wroblewski som har skapat Mobile First metoden understryker att metoden ska priorite-

ras daring man skapar anvaumlndarupplevelser

Det finns tre viktiga anledningar foumlr att utveckla foumlr Mobile First

Den foumlrbereder foumlr den stora utveckling och nya moumljligheter som uppkommer

inom det mobila omraringdet idag (836 av vaumlrldens befolkning anvaumlnder internet

paring sin smarttelefon 2015)

Den goumlr att vi blir tvungna att prioritera och fokusera varingrt inneharingll genom att ac-

ceptera de begraumlnsningar som aumlr foumlrenade med mobil design

32

och goumlr att vi kan leverera innovativa upplevelser genom att bygga utifraringn nya

funktioner som finns inbyggda i de mobila enheterna (bla GEO lokalisering)

En mobil webbplats behoumlver endast ha en mycket enkel layout och navigeringen ska vara

laumltt och effektiv

Naumlr man designar med Mobile first metoden tvingas man goumlra viktiga beslut om vad som

ska prioriteras Naumlr den optimerad design foumlr en liten skaumlrm visas paring en stoumlrre skaumlrm

kommer det att bli laumlttare att designa paring de stoumlrre skaumlrmarna Allt som ska goumlras aumlr daring

bara att fylla paring inneharingllet och designa saring att det aumlr grafiskt tilltalande och laumltt att hitta

inneharingllet (Wroblewski 2011)

41 Varfoumlr Mobile first

Vaumlrlden vi lever i idag aumlr inte mera som foumlr tio aringr sedan Allt runtom oss har utvecklats

speciellt mobiltelefonerna Tidigare anvaumlndes mobiltelefoner bara foumlr att skicka med-

delandet ringa och ta emot samtal Nu anvaumlnds den till foumlr att dels ta bilder video GPS

navigation foumlr vaumlgvisning och speciellt internetanvaumlndningen saringsom Google nyheter

Facebook Youtube och mycket mer Paring grund av det har ocksaring varingr livsstil foumlraumlndrats

Internetanvaumlndning idag har blivit allt vanligare Idag anvaumlnder vi naumltet i skolan paring jobbet

eller var och naumlr som helst bara man har en smarttelefon eller surfplatta och naumltet kopplat

Tidigare boumlrjade man bygga en webbplats fraringn den stoumlrsta skaumlrmen medan den mobila

sidan var en biprodukt Laringt oss saumlga att man har en webbplats med en rik grafisk layout

och ser stilig ut paring stationaumlra datorer Naumlr man skalar ner sidan foumlr att passa en mobilskaumlrm

kommer resultatet att vara en smaumlrta foumlr varingra oumlgon Paring den lilla mobilskaumlrmen kommer

det att vara olaumlsligt och svaringrt att anvaumlnda Foumlr att naring inneharingllet maringste du tom zooma in

och ut eller skrolla till houmlger och vaumlnster Det haumlr kommer att ge en negativ bild av ditt

foumlretag och anvaumlndarna kanske aldrig mera besoumlker din webbplats (Wroblewski 2011)

Ett bra exempel aumlr Tokyo Skytree webbplats som aumlnnu idag inte ha byggt in funktionalitet

och designen foumlr mindre skaumlrmupploumlsningar paring den engelska sidan

33

Tokyo Skytree aumlr vaumlrldens naumlst houmlgsta torn efter Burj Khalifa Tornet aumlr Japans houmlgsta

byggnadsverk med en houmljd paring 634 meter Den oumlppnades 22 maj 2012 och under det foumlrsta

aringret hade den 64 miljoner besoumlkare fraringn hela vaumlrlden Trots det har de laringtit bli att utveckla

den engelska webbsidan Paring bilden ser man att hemsidan ser exakt likadant ut paring stationaumlr

dator och paring mobilen

Figur 42 Hemsidan paring Tokyo Skytree paring stationaumlr datorskaumlrm

34

Figur 43 Hemsidan foumlr Tokyo Skytree Foumlrsta bilden visar hur det ser ut normalt Andra bilden visar naumlr man zoomar

in

Naumlr man foumlrsoumlker zooma in foumlr att laumlsa inneharingllet hoppar sidbalken (paring vaumlnstra sidan) paring

texten Det haumlr ger en mycket daringlig anvaumlndarupplevelse och kan ge fel bild av turistplat-

sen Ett annat fel paring sidan aumlr naumlr man vaumlljer spraringk till japanska ser sidan inte likadant ut

35

Figure 44 Hemsidan paring Tokyo Skytree paring japanska

Om du kan laumlsa japanska kommer du att undra varfoumlr det finns massor med information

och sidan ser mycket trevligare ut paring den japanska sidan Paring den internationella sidan

dvs engelska ser det inte lika trevligt ut och inneharingller inte allt som det goumlr paring den

japanska sidan Det aumlr som om den stoumlrsta maringlgruppen aumlr foumlr japanska turister och som

om de skulle inte bry sig om turister fraringn utlandet

Utoumlver det har de ocksaring byggt en mobilsida foumlr den japanska webbsidan Varfoumlr satsa bara

paring den japanska sidan och inte den engelska sidan naumlr maringlgruppen aumlr hela vaumlrlden

36

Figur 45 Mobil sidan paring Tokyo Skytree paring japanska

Vi lever i 2015 saring alla borde veta att det aumlr vaumlldigt viktig att ha en mobil webbplats som

erbjuder en bra anvaumlndarupplevelse paring alla spraringk som webbplatsen erbjuder Naumlr man har

sin sida paring flera spraringk och aumlndaring bestaumlmmer sig att bygga sidan ordentligt bara paring ett spraringk

kan anvaumlndarna faring en fel bild av foumlretaget I vaumlrsta fall kommer anvaumlndarna tycka att sidan

aumlr oparinglitligt och aringterkommer aldrig igen

Mobile first metoden aumlr daumlrfoumlr en mycket effektiv metod att bygga sin webbplats med

Man boumlrjar med att bygga sin webbplats fraringn den minsta skaumlrmen Man tvingas goumlra be-

slut om vad som ska absolut prioriteras Arbetsprocessen foumlr oss webbdesigners blir

mycket effektivare genom att foumlrst designa fraringn den minsta skaumlrmen och sedan foumlrflytta

oss till de stoumlrre skaumlrmarna Har man ett 6 kvadratmeters sovrum och foumlrsoumlker faring sin saumlng

skrivbord hylla klaumldskaringp och soffan att rymmas in aumlr det ganska utmanande Men naumlr

man boumlrjar med det mest utmanande i arbetsprocessen blir arbetet ocksaring mindre utma-

nande desto stoumlrre rum eller skaumlrm det blir (Wroblewski 2011)

37

5 909JP

909jp aumlr en elektronisk handel en moumlbelaffaumlr som saumlljer vaumlsterlaumlndska produkter Den

elektroniska butiken kommer att oumlppnas i Japan 2015 Deras foumlrvaumlntningar aumlr att faring in

en miljon dollar i foumlrsaumlljning per aringr I deras elektroniska moumlbelaffaumlr saumlljs bla stolar bord

soffor och lampor Maringlgruppen aumlr alla konsumenter mellan 18-60 aringringar

Japaner aumlr intresserade av vaumlsterlaumlndska produkter och livsstil men foumlr de flesta varor aumlr

designen knutna till deras egen kultur vilket goumlr dem mer intresserad Det aumlr ocksaring mycket

viktigt att ha sin hemsida paring japanska eftersom 99 av den japanska befolkningen foumlre-

drar att inte laumlsa inneharingllet paring andra spraringk (Khurana)

Japan aumlr ett land med vaumlrldens tredje stoumlrsta ekonomi paring 5 biljoner De har vaumlrldens ti-

onde stoumlrsta befolkning med ca 1271 miljoner invaringnare varav 70 av den totala befolk-

ningen anvaumlnder internet och 24 av dem anvaumlnder internet paring sin smarttelefon

(Khurana)

Viktigt med detta projekt aumlr att sikta aringt raumltt haringll och betjaumlna kunderna paring det baumlsta saumlttet

via webbplatsen Foumlr att kunna faringnga saring maringnga kunder som moumljligt aumlr det mycket viktigt

att designa en webbplats som aumlr anvaumlndarvaumlnlig stilig och laumltt att anvaumlnda (Wroblewski

2011)

Jag har daumlrfoumlr kommit underfund med att anvaumlnda Mobile first och Responsiv design

metoden foumlr att utveckla den mobila 909jp sidan Med tanke paring att det aumlr en Responsiv

design skall layouten paring den mobila versionen ocksaring passa in med de stoumlrre skaumlrmarna

naumlr sidan skalas upp Det aumlr dock viktigt poaumlngtera att jag endast kommer att koncentrera

mig paring den mobila designen och utveckla designen endast foumlr denna forskning

38

6 ANALYS AV DEN NYA DESIGNEN

Med hjaumllp av den tidigare designen paring 909jp och de kritiska punkterna jag har hittat under

forskningen har jag skapat en ny och foumlrbaumlttrad design av webbplatsen foumlr mobiler I det

haumlr kapitlet kommer jag att visa naringgra exempel paring den tidigare designen och jaumlmfoumlra den

med nya designen samt analysera arbetet

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger)

1 Call-to-action knapparna

Under hela arbetsprocessen har jag haft i minnet att navigeringar laumlnkar och knap-

parna ska vara tillraumlckligt stora att klicka paring I den tidigare designen har de stora

bilder paring kategorier vilket jag tycker aumlr en bra design att aringtervaumlnda

39

2 Soumlkfunktionen

Paring den tidigare versionen haumlr nedan ser man att soumlkfunktionen inte finns med

medan paring den nya designen ser man soumlkfunktionen genast naumlr man kommer till

sidan Som tidigare framfoumlrdes att soumlkfunktionen alltid ska synas saring att man laumltt

skall kunna soumlka fram produkterna Om soumlkfunktionen inte finns med eller aumlr svaringr

att hitta naumlr den behoumlvs kan det orsaka missnoumlje hos anvaumlndarna (Mehra Gagan

2015)

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp

Figur 63 Soumlkfunktionen paring den nya designen 909jp

40

3 Laumltt att navigera

Naumlr skaumlrmen aumlr liten aumlr det viktig att ha en enkel layout (Wroblewski 2011)

Jag har daumlrfor i den nya designen flyttat rdquoHemrdquo och rdquoBlogrdquo knapparna bort fraringn

den oumlvre menyn Hem-knappen finns nu i hamburgarmenyn paring vaumlnstra sidan me-

dan Blog-knappen finns i footer Detta goumlr att det ser mera organiserat ut

Figur 64 Gamla designen

Laringt oss foumlrflytta vidare till menyer foumlr kategorier Paring hemsidan har man tvaring alter-

nativ att naring kategorierna Foumlrsta aumlr den hamburgarmenyn knappen paring vaumlnstra si-

dan I menyn aumlr kategorierna indelade i fyra delar stolar lampor ergonomisk och

soffa amp middag Detta goumlr det laumltt och klart foumlr anvaumlndarna var produkterna finns

Eftersom vi bara har partiell uppmaumlrksamhet fraringn anvaumlndarna naumlr de aumlr paring sina

smarttelefoner har jag valt att saumltta in ikoner i menyn (Figur 65) Naumlr anvaumlndaren

bara anvaumlnder ena oumlgat foumlr att kolla paring mobilen och andra oumlgat foumlr naringgonting annat

ska den lilla skaumlrmen med webbplatsen kunna faringnga uppmaumlrksamheten samt un-

derlaumltta anvaumlndningen av webbplatsen (Wroblewski 2011)

41

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny

Andra menyn for kategorierna aumlr de fyra bilderna under Aeron chair slideshowen

Paring den tidigare designen ser man endast ett foumlnster av kategorierna som aumlr place-

rade i en kolumn som upprepas loggraumltt (Figur 66) Det haumlr goumlr att anvaumlndaren

maringste skrolla ner foumlr att se varenda kategori vilket kan orsaka obekvaumlmlighet Att

se flera kategorier paring samma skaumlrm sparar tid och anvaumlndaren kommer aumlven baumlttre

iharingg var sakerna finns Att ha bara rdquoenrdquo stor bild som syns paring skaumlrmen och vara

tvungen att skrolla ner foumlr att se naumlsta bild aumlr frustrerande Paring den nya designen

har jag tvaring rutor av kategorier bredvid varandra (Figur 66)

42

Figur 66 Kategorier paring den gamla designen (till vaumlnster) Kategorier paring den nya designen (till houmlger)

4 Ta det roliga ur shopping

Paring den nya designen straumlvar jag efter att erbjuda en bekvaumlm shopping-upplevelse

Naumlr anvaumlndarna besoumlker e-handeln med en smarttelefon foumlrvaumlntar hanhon sig

ocksaring att kunna ta del av allt inneharingll och goumlra jaumlmfoumlrelser med andra produkter

Jag har daumlrfoumlr i den nya designen pressat ihop laumlngden paring kolumnhoumljden som om-

ringar produkten Som resultat ser vi nu fyra produkter paring samma skaumlrm (Figur

67) I den tidigare designen ser vi en enda produkt paring en skaumlrm och foumlr att se

andra produkter maringste vi skrolla ner Paring det haumlr saumlttet har anvaumlndarna svaringrare att

jaumlmfoumlra produkterna (Laya 2014)

43

Figur 67 Tidigare produktsida (till vaumlnster) Ny produktsida (till houmlger)

I den tidigare designen ser vi ocksaring att det finns endast produktens bild produk-

tens namn koumlpvagnen och infoikonen Om man vill faring reda paring produktens inform-

ation maringste man klicka paring produktens bild eller paring infoikonen som foumlr oss direkt

till sjaumllva produktens sida Bara foumlr att man vill faring reda paring vad det aumlr foumlr produkt

foumlrs man vidare till en annan sida Det haumlr kan orsaka att kunden inte njuter totalt

av shoppingen och dessutom kan han inte jaumlmfoumlra produkterna naumlr han aumlr paring ka-

tegoriernas sida (Laya 2014)

Laringt oss hoppa vidare till den nya designen (Figur 68) Paring den nya designen har

jag satt in en kort detaljbeskrivning foumlr varje produkt Dessutom naumlr man klickar

paring infoikonen paring houmlgra sidan kommer man inte direkt till produktsidan utan det

kommer att dyka upp en inforuta som har en kort beskrivning paring produkten Om

anvaumlndaren aumlr intresserad av produkten kan han garing in till sjaumllva produktsida ge-

nom att klicka paring rdquoView productrdquo eller ocksaring paring produktbilden daumlr hanhon kan

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

16

24 Bra mobila e-handel webbplatser

En bra mobil webbplats aumlr naumlr sidan aumlr enkel att anvaumlnda fast man bara anvaumlnder ett oumlga

och en tumme

rdquoWhen reflecting on a lot of mobile usage patterns I like to imagine people as rdquoone

eyeball and one thumb One thumb because they are likely to be holding their mobile

in one hand and using a single thumb to control it one eyeball because in many loca-

tions where mobile devices are use we only have peoples partial attentionrdquo

-Wroblewski Luke 2011)

Man kan aldrig exakt veta var anvaumlndaren befinner sig naumlr han surfar med sin smarttele-

fon Han kanske befinner sig i vardagsrummet foumlr att sloumltt surfa efter en ny lampa medan

han kollar paring Tvn Kanske anvaumlndaren sitter hemma och har en stadig wifi eller kanske

paring sommarstugan och har 3G4G som byter mellan olika naumltverk osv (Thoren 2012)

Naumlr anvaumlndaren goumlr naringgonting samtidigt som han surfar paring webbplatsen har han bara den

partiella uppmaumlrksamheten Daumlrfoumlr aumlr det betydligt fler kontexter som man maringste ta haumln-

syn till naumlr man designar webbplatser foumlr mobiler (Wroblewski 2011)

Haumlr aumlr tvaring bra exempel av lyckad e-handel foumlretag i vaumlrlden De har inte lyckats bra bara

med att saumllja produkterna utan ocksaring med designen Haumlr nedan aumlr bilderna paring mobil de-

signen av Rakutencom och Amazoncom

17

Figur 25 Hemsida paring rakutencom foumlr mobiler

Direkt naumlr man kommer paring sidan hittar man inloggningen koumlpvagnen soumlkfunktionen

menyn och speciellt de stora bilderna paring katalogerna vilket aumlr jaumltte laumltta att klicka paring

Fastaumln mobilskaumlrmen aumlr liten goumlr den haumlr det bara inte laumltt att navigera runt sidorna utan

ocksaring trevligt att vara paring sidan

Amazoncom har ocksaring lyckats bra med designen Naumlr man kommer till sidan ser man

direkt Sign in Department Wish List Deals och Search funktionen Under search funkt-

ionen ser man genast en inspirerande reklam som paringminner oss om att det aumlr varingr

rdquoSPRINGacuteS PERFECT PANTSrdquo Fast sidan har jaumltte maringnga objekt i den aumlr det trots allt

18

jaumltte laumltt att navigera runt sidorna Man tappar inte bort sig och man hittar laumltt det som

man aumlr ute efter

Figur 26 Hemsida paring amazoncom foumlr mobiler

19

25 Kritiska punkterna foumlr bra mobil design paring e-handel

Naumlr man handlar med en mindre skaumlrm aumlr det mera utmanande eftersom skaumlrmen aumlr liten

och anvaumlndarna brukar inte ha tillraumlckligt med taringlamod att sitta och soumlka naringgonting foumlr

laumlnge fraringn en liten skaumlrm Daumlrfoumlr aumlr det viktigt att veta vilka saker man boumlr beakta naumlr

man designar en mobil e-handel I det haumlr stycket kommer jag att lista upp sakerna man

boumlr veta naumlr man designar en mobil e-handel webbplats

Naumlr man handlar med en mindre skaumlrm aumlr det mera utmanande eftersom skaumlrmen aumlr liten

och anvaumlndarna brukar inte ha tillraumlckligt med taringlamod att sitta och soumlka naringgonting foumlr

laumlnge paring en liten skaumlrm Daumlrfoumlr aumlr det viktigt att veta vilka saker man boumlr beakta naumlr man

designar en mobil e-handel I det haumlr stycket kommer jag att lista upp kritiska saker man

boumlr veta naumlr man designar en mobil e-handel webbplats

1 Call-to-action knapparna foumlr smaring paring en mobilskaumlrm

Naumlr man designar webbsidor foumlr mobiler kan det ibland vara en utmaning att faring

allt att rymmas in Daumlrfoumlr brukar ocksaring webbdesigner minska de sk rdquocall to act-

ionrdquo knapparna Om anvaumlndaren maringste zooma in foumlr att klicka paring en knapp men

av misstag klickar paring en annan knapp kan det bli frustrerande foumlr dem och detta

leder sedan till att de laumlmnar sidan Daumlrfoumlr aumlr det mycket viktigt att designa knap-

parna och inneharingllet saring att anvaumlndarna laumltt naringr dem

2 Soumlkfunktionen ska alltid finnas med

Paring mobila e-handel webbplatser ska soumlkfunktionen alltid synas saring att man laumltt skall

kunna soumlka produkterna Laringt oss saumlga att kunden inte hittar produkten han soumlker

och vill anvaumlnda soumlkfunktionen Han letar och letar efter soumlkfunktionen utan re-

sultat Detta orsakar inte bara att kunden laumlmnar din sida men ocksaring kommer han

att beraumlttar det vidare aringt andra hur han upplevde din sida (Mehra 2015)

3 Laumltt att navigera

20

Det ska vara laumltt att navigera runt sidorna Anvaumlndarna ska veta var han aumlr och hur

han kommer vidare efter att han tex har valt produkten Menyerna foumlr katalo-

gerna ska vara laumltta att navigera Om menyerna foumlr katalogerna aumlr foumlrvirrande och

svaringra foumlr anvaumlndaren att hitta produkterna blir han laumltt irriterad Exemplar paring (fi-

gur 27) haumlr nedan visar att menyerna aumlr ganska foumlrvirrande paring vaumlnstra bilden me-

dan paring houmlgra sidan aumlr det klart och tydligt (Laya 2014)

Figur 27 Jaumlmfoumlrelse mellan en bra och daringlig navigation httpconversionxlcommake-mobile-convert

4 Ta de roliga ur shopping

Det vanligaste och stoumlrsta misstaget som de flesta foumlretag goumlr naumlr de designar foumlr

mobil e-handel aumlr att de foumlrsoumlker flytta kunderna fraringn shopping till koumlp Shopping

paring en stationaumlr dator goumlr det laumltt naumlr det oftast finns ett enormt antal produkter att

vaumllja mellan och det aumlr laumltt att blaumlddra runt Men foumlr mobiler aumlr det annat

Maringnga foumlretag foumlrsoumlker pressa ihop hela shopping-processen till smaring tabbar och

minska paring inneharingllet Som resultat kommer anvaumlndaren att kaumlnna sig paringtvingad

21

att goumlra snabba beslut paring inkoumlp Istaumlllet foumlr att ge anvaumlndarna en saringdan paringtvingad

upplevelse kan man istaumlllet locka anvaumlndarna med all information vi har att er-

bjuda

Det betyder inte att anvaumlndarna som besoumlker e-handeln med en smarttelefon inte

vill njuta av shoppingen saringsom de goumlr paring stationaumlra datorer Naumlr man designar en

mobil e-handel skall kunderna kunna faring njuta av shoppingen och jaumlmfoumlra mellan

olika produkter innan dem bestaumlmmer sig vilken produkt de vill koumlpa (Laya 2014)

ldquoBut we see many companies try to compress the whole shopping process into a

small number of taps The result is a mobile app or website that forces the user to

make a quick purchase decision rather than giving a great shopping experience

To the user it feels like the site switches from giving enticement to issuing de-

mandsrdquo

- Laya Peep 2014

5 Laringngsam uppladdningstid foumlr mobiler spelar en stor roll

Det aumlr mycket viktigt att haringlla sidstorleken saring liten som moumljligt saring att det aumlr snabbt

att ladda upp sidan

ldquoMobile users want to take quick action and also Google has reportedly started

including page speed for ranking websites in the search results so that makes it

even more important to have a lighter siterdquo

- Mehra Gagan 2015

Varingren 2014 rapporterade Radware (httpwwwradwarecomspring-sotu2014)

att majoriteten av besoumlkarna kommer att oumlverge webbplatsen efter att ha vaumlntat i

3 sekunder foumlr att ladda upp sidan (Laya 2014)

Om det finns mycket inneharingll paring en sida kan man som alternativ separera inne-

haringllet i olika flikar (Mehra 2015)

Jag har tagit ett exempel fraringn Amazoncom Paring produktsidan har ja valt en orange

vaumlska Foumlr att tex ytterligare laumlsa om produktbeskrivningen rdquoAbout this itemrdquo ser

22

jag en pil som aumlr paring houmlgra sidan (Figur 29) Naumlr jag trycker paring pilen eller laringdan

kommer jag till en annan sida daumlr jag kan laumlsa hela produktbeskrivningen (Figur

210) Paring det haumlr saumlttet inneharingller sidan all information man behoumlver men separe-

rade i olika flikar saring att det blir snabbare att ladda upp sidan

Figur 28 Produktsida paring amazoncom

23

Figur 29 Produktsida paring amazoncom

Figur 210 Produktsida paring amazoncom About this item

24

6 Misslyckade analyseringar av anvaumlndarna

Naumlr man bygger webbsidor aumlr det viktig att goumlra anvaumlndbarhetstest och analysera

kundernas beteende Hur anvaumlndarna kaumlnner sig naumlr de anvaumlnder sidan aumlr mycket

viktigt och avgoumlr hur bra din business kommer att rulla

Analyseringen aumlr den kritiska inputen foumlr designen Med analyseringen ser man

dels vilka mobila apparater anvaumlndarna anvaumlnder och om det aumlr naringgra svaringrigheter

och obekvaumlmligheter anvaumlndarna upplever vid anvaumlndningen Dessa faktorer aumlr

viktiga foumlr att saumlkerstaumllla om den mobila upplevelsen uppfyller behoven hos kon-

sumenterna Testet och analysen maringste goumlras kontinuerligt foumlr att vi skall kunna

saumlkerstaumllla att kunderna har det bekvaumlmt (Mehra 2015)

7 Mindre inneharingll foumlr mobilanvaumlndarna

E-handel webbplatser brukar goumlmma inneharingll foumlr att goumlra sidan mindre Sidan aumlr

i sjaumllva verket inte mindre men bara goumlmd foumlr anvaumlndarna som anvaumlnder sina

smarttelefoner Enligt Mehra Gagan aumlr det inte bra om det finns mindre inneharingll

foumlr mobilanvaumlndarna Oavsett med vilka enheter anvaumlndarna aumlr paring sidan boumlr det

finnas lika mycket inneharingll paring alla enheterna De flesta som handlar online brukar

aumlga flera enheter och med stor sannolikhet anvaumlnder de ocksaring andra enheter foumlr

att surfa Om inneharingllet inte ser likadant ut paring stationaumlra datorer och smarttelefo-

ner kan det orsaka daringlig anvaumlndarupplevelse foumlr anvaumlndaren Enligt Google an-

vaumlnder 90 av dem som handlar paring internet olika enheter Att begraumlnsa deras

anvaumlndning aumlr naringgonting som man boumlr undvika (Mehra 2015)

25

3 MOBILANPASSADE LOumlSNINGAR

Det finns maringnga olika loumlsningar att bygga sin webbplats med Det aumlr viktigt att komma

iharingg att mobila anvaumlndande oumlkar hela tiden Det staumlller nya krav paring webbdesign och an-

vaumlndargraumlnssnitt Anvaumlndarna foumlrvaumlntar sig idag att de ska kunna ta del av allt inneharingll paring

webben oavsett om de anvaumlnder en smarttelefon eller en surfplatta De mobilanpassade

loumlsningarna foumlr e-handel kan tex vara Responsiv design Adaptiv Design Mobilbutik

eller en mobil applikation

31 Adaptiv design

En adaptiv webbplats aumlr uppbyggd saring att den aumlr optimerad foumlr specifika skaumlrmstorlekar

Den anvaumlnder servern foumlr att upptaumlcka den enhet som anvaumlnds foumlr att visa webbplatsen

Byggande av webbplatsen med adaptiv metoden aumlr tidskraumlvande paring grund av behovet att

optimera sidan foumlr varje vald plattform front-end och back-end Innan man boumlrjar bygga

webbplatsen maringste man avgoumlra vilka alla plattformar webbplatsen kommer att optimeras

till Foumlrdel med adaptiv design aumlr att den har snabb uppladdningstid

rdquoCompared to Responsiv design adaptive web design is website-optimised for each

platform separately and makes use of the opportunities presented by the platform as

well as the models and functions It offers fast-loading pages due to the server detec-

tion device and browser sending data tailored for a particular devicerdquo

-Lubo Ruska 2013

Att vaumllja den raumltta loumlsningen handlar om att foumlrstaring vad maringlgruppen foumlrvaumlntar sig och vad

de behoumlver Eftersom foumlretaget 909jp inte aumlr en jaumltte stort foumlretag saringsom Ikea eller Ama-

zon som har oberaumlknat antal med produkter tycker jag att Responsiv design med Mobile

first metoden aumlr den mest effektiva metoden foumlr denna forskning

26

32 Responsiv design

Responsiv webbdesign aumlr ett av de populaumlraste saumltten att optimera en webbplats Re-

sponsiv webbdesign moumljliggoumlr att layouten foumlraumlndras beroende paring vilken skaumlrmstorlek

och skaumlrmupploumlsningen som anvaumlndarna har och beroende paring vilka funktioner som

webblaumlsaren stoumldjer (Responsive Design 2014)

Oberoende om anvaumlndarna anvaumlnder dator laumlsplatta eller sin mobiltelefon kommer sidan

att anpassa sig paring olika saumltt foumlr att anvaumlndarna vid alla tillfaumlllen ska ha en saring rik upplevelse

som moumljligt Man kan saumlga att en webbsida paring mindre skaumlrmar aumlr med ett annat ord en

krympande version av den stoumlrre skaumlrmstorleken

Inneharingllet saringsom kolumner och bilder paring webbsidan kommer automatiskt att anpassas

beroende paring skaumlrmstorleken Och detta aumlr paring grund av Grid systemet Allt inneharingll skall

haringllas inom ett Grid system Grid systemet skall skydda allt fraringn att bryta samman naumlr

sidan anvaumlnds paring olika skaumlrmstorlekar

Det finns 11 olika Grid storlekar tvaring kolumner tre kolumner fyra kolumner fem kolum-

ner sex kolumner sju kolumner aringtta kolumner nio kolumner tio kolumner 11 kolumner

och 12 kolumner Som exempel visar jag en figur av 12 kolumners Grid system (Swan

2014)

27

Figur 31 Ett exempel paring Grid system av 5 olika skaumlrmstorlekar (Phil Swan 2014)

Responsiv webbdesign fungerar med hjaumllp av HTML5 CSS media Query och Java-

Script Det bygger paring att webbutvecklare istaumlllet foumlr exakta storlekar maumltt i pixlar anger

sidelements storlekar i procent i jaumlmfoumlrelse med skaumlrmens storlek

Naumlr sidelementens storlekar aumlr i procent goumlr det att sidan blir flexibel och den anpassas

efter webblaumlsarens storlek medan fasta pixlar ger en scrollbar (rull-list) (Responsive De-

sign 2014)

33 Varfoumlr Responsiv design

Foumlrdelar med Responsiv design aumlr att den erbjuder en bra anvaumlndarupplevelse foumlr olika

enheter och skaumlrmstorlekar Tack vare den Responsiva designen har webbredaktoumlrer laumlt-

tare att hantera inneharingllet eftersom de bara har en version att hantera Ur en SEO synvin-

kel fungerar Responsiv design baumlttre eftersom den koncentrerar inneharingllet istaumlllet foumlr att

vattna ur det med maringnga URL foumlr samma inneharingll

28

Med en Responsiv design aumlr en webbplats laumlttare att hantera Att ha flera olika versioner

av en webbplats innebaumlr mera arbete Flera olika versioner av en webbplats innebaumlr sepa-

rata sidor att redigera och separata insatser foumlr soumlkmotoroptimering och separata soumlkmo-

torkampanjer Daumlrfoumlr aumlr det en stor foumlrdel att bygga en webbplats med den Responsiva

metoden

Med en Responsiv design kaumlnner anvaumlndarna baumlttre igen sidan baringde paring stationaumlra datorer

och mobiltelefoner Bygger man specifika webbplatser foumlr mobiler och surfplattor kan

det laumltt haumlnda att det blir olika information paring webbplatserna och att de struktureras olika

Laringt oss foumlrestaumllla oss att naringgon anvaumlnder sin mobiltelefon paring lunchen foumlr att leta efter en

flygbiljett fraringn Helsingfors till Tokyo Personen hittar en webbplats som har bra erbju-

dande och bestaumlmmer sig foumlr att fortsaumltta kolla naumlr han eller hon kommer hem Naumlr per-

sonen har kommit hem anvaumlnder hen datorn istaumlllet foumlr mobilen Om webbplatsen som

personen kollade paring lunchpausen var en Responsiv webbplats faringr personen en smidig och

bra upplevelse vid oumlvergaringngen fraringn den mobila webbplatsen till stationaumlr dator

(Lindahl 2014)

Det aumlr vaumlldigt viktigt att ha sin webbplats att optimerad till saring maringnga enheter som moumljligt

foumlr att ingen vet vilka kommer att vara framtidens enheter och daumlrfoumlr anses en webbplats

som anpassar sig till maringnga olika format vara den baumlsta loumlsningen Innan man kan boumlrja

med att designa en Responsiv webbplats maringste man veta vilka skaumlrmupploumlsningar och

storlekar det finns tillgaumlngliga och aumlr populaumlra idag Foumlr att kunna rikta till de olika skaumlr-

mupploumlsningarna med Media Queries har jag listat upp olika enheternas skaumlrmupploumls-

ningar i pixlar haumlr nedan i tabellen

ResolutionGrafisk array Enhet som anvaumlnder denna resolution skaumlrmstorlek i pixel-

taumltheten i pixlar

2880x1800 15-inch Apple MacBook Pro with Retina display

2560 x 1700 Google Chromebook Pixel

2560 x 1600 Samsung Google Nexus 10

13-inch Apple MacBook Pro with Retina display

29

2560 x 1440 27-inch Apple iMac 102 111 113 122 (Late 2009 -

2012)

1920 x 1080 HTC One Samsung

Sony Xperia Z amp Xperia ZL

Asus PadFone Infinity

Acer Aspire S5

Asus Zenbook Prime

1600 x 900 Apple Macbook Air

1366 x 768 Small desktoplaptop screen resolution

Asus VivoTab RT

Samsung N350

1280 x 1024 Standard desktop screen resolution

1280 x 800 Asus PadFone 2

Samsung Galaxy Note

Sony Xperia Tablet S

1280 x 720 Sony Xperia S

HTC Windows Phone 8X

HTC One mini

1136 x 640 Apple iPhone 5 5S amp 5C

Apple iPod Touch (5th generation)

960 x 640 Apple iPhone 4 amp 4S

Apple iPod Touch (4th generation)

854 x 480 Sony Xperia ray

Nokia N9

800 x 480 Nokia Lumia 510 amp 520

Samsung Galaxy I Galaxy S Galaxy S Plus Galaxy S Ad-

vance Galaxy SL Galaxy S Duos Galaxy Xcover 2 Galaxy

Beam Nexus S Captivate Glide amp Galaxy S III mini

HTC Desire X HTC Desire V Desire VC Desire VT De-

sire U amp Windows Phone 8S

30

LG Optimus 2X Optimus EX Optimus L5 II Optimus Q2

amp Optimus Black

T-Mobile G2x

Asus E600

620 x 480 Blackberry Bold 9900 amp Bold Touch 9930

Blackberry Torch 9810

LG Optimus Z

640 x 360 Sony Ericsson Vivaz amp Vivaz Pro

Nokia 500 amp 5800 XpressMusic

Nokia N8 N97 E7 and X6

480 x 320 Apple iPhone 3G amp 3GS

Samsung Galaxy Ace

320 x 240 Nokia E71

Blackberry Curve 9220 amp 9320

Sony Ericsson txt

Samsung Galaxy Y amp Galaxy Chat

Nokia Asha 501

Figur 32 Resolutions referenser paring olika enheter

31

4 VAD AumlR MOBILE FIRST

Mobile first metoden aumlr en metod och arbetsprocess foumlr webbdesigners som aumlr skapad av

Luke Wroblewski Naumlr man jobbar med ett projekt och designar strukturerar och imple-

menterar en webbplats aumlr Mobile first metoden man paringboumlrjar arbetet med Med metoden

menar Wroblewski att man foumlrst boumlrjar designa webbsidor fraringn de minsta enheterna

Figur 41 Mobile First att bygga webbsidan fraringn den minsta skaumlrmen till den stoumlrsta skaumlrmen

Wroblewski som har skapat Mobile First metoden understryker att metoden ska priorite-

ras daring man skapar anvaumlndarupplevelser

Det finns tre viktiga anledningar foumlr att utveckla foumlr Mobile First

Den foumlrbereder foumlr den stora utveckling och nya moumljligheter som uppkommer

inom det mobila omraringdet idag (836 av vaumlrldens befolkning anvaumlnder internet

paring sin smarttelefon 2015)

Den goumlr att vi blir tvungna att prioritera och fokusera varingrt inneharingll genom att ac-

ceptera de begraumlnsningar som aumlr foumlrenade med mobil design

32

och goumlr att vi kan leverera innovativa upplevelser genom att bygga utifraringn nya

funktioner som finns inbyggda i de mobila enheterna (bla GEO lokalisering)

En mobil webbplats behoumlver endast ha en mycket enkel layout och navigeringen ska vara

laumltt och effektiv

Naumlr man designar med Mobile first metoden tvingas man goumlra viktiga beslut om vad som

ska prioriteras Naumlr den optimerad design foumlr en liten skaumlrm visas paring en stoumlrre skaumlrm

kommer det att bli laumlttare att designa paring de stoumlrre skaumlrmarna Allt som ska goumlras aumlr daring

bara att fylla paring inneharingllet och designa saring att det aumlr grafiskt tilltalande och laumltt att hitta

inneharingllet (Wroblewski 2011)

41 Varfoumlr Mobile first

Vaumlrlden vi lever i idag aumlr inte mera som foumlr tio aringr sedan Allt runtom oss har utvecklats

speciellt mobiltelefonerna Tidigare anvaumlndes mobiltelefoner bara foumlr att skicka med-

delandet ringa och ta emot samtal Nu anvaumlnds den till foumlr att dels ta bilder video GPS

navigation foumlr vaumlgvisning och speciellt internetanvaumlndningen saringsom Google nyheter

Facebook Youtube och mycket mer Paring grund av det har ocksaring varingr livsstil foumlraumlndrats

Internetanvaumlndning idag har blivit allt vanligare Idag anvaumlnder vi naumltet i skolan paring jobbet

eller var och naumlr som helst bara man har en smarttelefon eller surfplatta och naumltet kopplat

Tidigare boumlrjade man bygga en webbplats fraringn den stoumlrsta skaumlrmen medan den mobila

sidan var en biprodukt Laringt oss saumlga att man har en webbplats med en rik grafisk layout

och ser stilig ut paring stationaumlra datorer Naumlr man skalar ner sidan foumlr att passa en mobilskaumlrm

kommer resultatet att vara en smaumlrta foumlr varingra oumlgon Paring den lilla mobilskaumlrmen kommer

det att vara olaumlsligt och svaringrt att anvaumlnda Foumlr att naring inneharingllet maringste du tom zooma in

och ut eller skrolla till houmlger och vaumlnster Det haumlr kommer att ge en negativ bild av ditt

foumlretag och anvaumlndarna kanske aldrig mera besoumlker din webbplats (Wroblewski 2011)

Ett bra exempel aumlr Tokyo Skytree webbplats som aumlnnu idag inte ha byggt in funktionalitet

och designen foumlr mindre skaumlrmupploumlsningar paring den engelska sidan

33

Tokyo Skytree aumlr vaumlrldens naumlst houmlgsta torn efter Burj Khalifa Tornet aumlr Japans houmlgsta

byggnadsverk med en houmljd paring 634 meter Den oumlppnades 22 maj 2012 och under det foumlrsta

aringret hade den 64 miljoner besoumlkare fraringn hela vaumlrlden Trots det har de laringtit bli att utveckla

den engelska webbsidan Paring bilden ser man att hemsidan ser exakt likadant ut paring stationaumlr

dator och paring mobilen

Figur 42 Hemsidan paring Tokyo Skytree paring stationaumlr datorskaumlrm

34

Figur 43 Hemsidan foumlr Tokyo Skytree Foumlrsta bilden visar hur det ser ut normalt Andra bilden visar naumlr man zoomar

in

Naumlr man foumlrsoumlker zooma in foumlr att laumlsa inneharingllet hoppar sidbalken (paring vaumlnstra sidan) paring

texten Det haumlr ger en mycket daringlig anvaumlndarupplevelse och kan ge fel bild av turistplat-

sen Ett annat fel paring sidan aumlr naumlr man vaumlljer spraringk till japanska ser sidan inte likadant ut

35

Figure 44 Hemsidan paring Tokyo Skytree paring japanska

Om du kan laumlsa japanska kommer du att undra varfoumlr det finns massor med information

och sidan ser mycket trevligare ut paring den japanska sidan Paring den internationella sidan

dvs engelska ser det inte lika trevligt ut och inneharingller inte allt som det goumlr paring den

japanska sidan Det aumlr som om den stoumlrsta maringlgruppen aumlr foumlr japanska turister och som

om de skulle inte bry sig om turister fraringn utlandet

Utoumlver det har de ocksaring byggt en mobilsida foumlr den japanska webbsidan Varfoumlr satsa bara

paring den japanska sidan och inte den engelska sidan naumlr maringlgruppen aumlr hela vaumlrlden

36

Figur 45 Mobil sidan paring Tokyo Skytree paring japanska

Vi lever i 2015 saring alla borde veta att det aumlr vaumlldigt viktig att ha en mobil webbplats som

erbjuder en bra anvaumlndarupplevelse paring alla spraringk som webbplatsen erbjuder Naumlr man har

sin sida paring flera spraringk och aumlndaring bestaumlmmer sig att bygga sidan ordentligt bara paring ett spraringk

kan anvaumlndarna faring en fel bild av foumlretaget I vaumlrsta fall kommer anvaumlndarna tycka att sidan

aumlr oparinglitligt och aringterkommer aldrig igen

Mobile first metoden aumlr daumlrfoumlr en mycket effektiv metod att bygga sin webbplats med

Man boumlrjar med att bygga sin webbplats fraringn den minsta skaumlrmen Man tvingas goumlra be-

slut om vad som ska absolut prioriteras Arbetsprocessen foumlr oss webbdesigners blir

mycket effektivare genom att foumlrst designa fraringn den minsta skaumlrmen och sedan foumlrflytta

oss till de stoumlrre skaumlrmarna Har man ett 6 kvadratmeters sovrum och foumlrsoumlker faring sin saumlng

skrivbord hylla klaumldskaringp och soffan att rymmas in aumlr det ganska utmanande Men naumlr

man boumlrjar med det mest utmanande i arbetsprocessen blir arbetet ocksaring mindre utma-

nande desto stoumlrre rum eller skaumlrm det blir (Wroblewski 2011)

37

5 909JP

909jp aumlr en elektronisk handel en moumlbelaffaumlr som saumlljer vaumlsterlaumlndska produkter Den

elektroniska butiken kommer att oumlppnas i Japan 2015 Deras foumlrvaumlntningar aumlr att faring in

en miljon dollar i foumlrsaumlljning per aringr I deras elektroniska moumlbelaffaumlr saumlljs bla stolar bord

soffor och lampor Maringlgruppen aumlr alla konsumenter mellan 18-60 aringringar

Japaner aumlr intresserade av vaumlsterlaumlndska produkter och livsstil men foumlr de flesta varor aumlr

designen knutna till deras egen kultur vilket goumlr dem mer intresserad Det aumlr ocksaring mycket

viktigt att ha sin hemsida paring japanska eftersom 99 av den japanska befolkningen foumlre-

drar att inte laumlsa inneharingllet paring andra spraringk (Khurana)

Japan aumlr ett land med vaumlrldens tredje stoumlrsta ekonomi paring 5 biljoner De har vaumlrldens ti-

onde stoumlrsta befolkning med ca 1271 miljoner invaringnare varav 70 av den totala befolk-

ningen anvaumlnder internet och 24 av dem anvaumlnder internet paring sin smarttelefon

(Khurana)

Viktigt med detta projekt aumlr att sikta aringt raumltt haringll och betjaumlna kunderna paring det baumlsta saumlttet

via webbplatsen Foumlr att kunna faringnga saring maringnga kunder som moumljligt aumlr det mycket viktigt

att designa en webbplats som aumlr anvaumlndarvaumlnlig stilig och laumltt att anvaumlnda (Wroblewski

2011)

Jag har daumlrfoumlr kommit underfund med att anvaumlnda Mobile first och Responsiv design

metoden foumlr att utveckla den mobila 909jp sidan Med tanke paring att det aumlr en Responsiv

design skall layouten paring den mobila versionen ocksaring passa in med de stoumlrre skaumlrmarna

naumlr sidan skalas upp Det aumlr dock viktigt poaumlngtera att jag endast kommer att koncentrera

mig paring den mobila designen och utveckla designen endast foumlr denna forskning

38

6 ANALYS AV DEN NYA DESIGNEN

Med hjaumllp av den tidigare designen paring 909jp och de kritiska punkterna jag har hittat under

forskningen har jag skapat en ny och foumlrbaumlttrad design av webbplatsen foumlr mobiler I det

haumlr kapitlet kommer jag att visa naringgra exempel paring den tidigare designen och jaumlmfoumlra den

med nya designen samt analysera arbetet

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger)

1 Call-to-action knapparna

Under hela arbetsprocessen har jag haft i minnet att navigeringar laumlnkar och knap-

parna ska vara tillraumlckligt stora att klicka paring I den tidigare designen har de stora

bilder paring kategorier vilket jag tycker aumlr en bra design att aringtervaumlnda

39

2 Soumlkfunktionen

Paring den tidigare versionen haumlr nedan ser man att soumlkfunktionen inte finns med

medan paring den nya designen ser man soumlkfunktionen genast naumlr man kommer till

sidan Som tidigare framfoumlrdes att soumlkfunktionen alltid ska synas saring att man laumltt

skall kunna soumlka fram produkterna Om soumlkfunktionen inte finns med eller aumlr svaringr

att hitta naumlr den behoumlvs kan det orsaka missnoumlje hos anvaumlndarna (Mehra Gagan

2015)

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp

Figur 63 Soumlkfunktionen paring den nya designen 909jp

40

3 Laumltt att navigera

Naumlr skaumlrmen aumlr liten aumlr det viktig att ha en enkel layout (Wroblewski 2011)

Jag har daumlrfor i den nya designen flyttat rdquoHemrdquo och rdquoBlogrdquo knapparna bort fraringn

den oumlvre menyn Hem-knappen finns nu i hamburgarmenyn paring vaumlnstra sidan me-

dan Blog-knappen finns i footer Detta goumlr att det ser mera organiserat ut

Figur 64 Gamla designen

Laringt oss foumlrflytta vidare till menyer foumlr kategorier Paring hemsidan har man tvaring alter-

nativ att naring kategorierna Foumlrsta aumlr den hamburgarmenyn knappen paring vaumlnstra si-

dan I menyn aumlr kategorierna indelade i fyra delar stolar lampor ergonomisk och

soffa amp middag Detta goumlr det laumltt och klart foumlr anvaumlndarna var produkterna finns

Eftersom vi bara har partiell uppmaumlrksamhet fraringn anvaumlndarna naumlr de aumlr paring sina

smarttelefoner har jag valt att saumltta in ikoner i menyn (Figur 65) Naumlr anvaumlndaren

bara anvaumlnder ena oumlgat foumlr att kolla paring mobilen och andra oumlgat foumlr naringgonting annat

ska den lilla skaumlrmen med webbplatsen kunna faringnga uppmaumlrksamheten samt un-

derlaumltta anvaumlndningen av webbplatsen (Wroblewski 2011)

41

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny

Andra menyn for kategorierna aumlr de fyra bilderna under Aeron chair slideshowen

Paring den tidigare designen ser man endast ett foumlnster av kategorierna som aumlr place-

rade i en kolumn som upprepas loggraumltt (Figur 66) Det haumlr goumlr att anvaumlndaren

maringste skrolla ner foumlr att se varenda kategori vilket kan orsaka obekvaumlmlighet Att

se flera kategorier paring samma skaumlrm sparar tid och anvaumlndaren kommer aumlven baumlttre

iharingg var sakerna finns Att ha bara rdquoenrdquo stor bild som syns paring skaumlrmen och vara

tvungen att skrolla ner foumlr att se naumlsta bild aumlr frustrerande Paring den nya designen

har jag tvaring rutor av kategorier bredvid varandra (Figur 66)

42

Figur 66 Kategorier paring den gamla designen (till vaumlnster) Kategorier paring den nya designen (till houmlger)

4 Ta det roliga ur shopping

Paring den nya designen straumlvar jag efter att erbjuda en bekvaumlm shopping-upplevelse

Naumlr anvaumlndarna besoumlker e-handeln med en smarttelefon foumlrvaumlntar hanhon sig

ocksaring att kunna ta del av allt inneharingll och goumlra jaumlmfoumlrelser med andra produkter

Jag har daumlrfoumlr i den nya designen pressat ihop laumlngden paring kolumnhoumljden som om-

ringar produkten Som resultat ser vi nu fyra produkter paring samma skaumlrm (Figur

67) I den tidigare designen ser vi en enda produkt paring en skaumlrm och foumlr att se

andra produkter maringste vi skrolla ner Paring det haumlr saumlttet har anvaumlndarna svaringrare att

jaumlmfoumlra produkterna (Laya 2014)

43

Figur 67 Tidigare produktsida (till vaumlnster) Ny produktsida (till houmlger)

I den tidigare designen ser vi ocksaring att det finns endast produktens bild produk-

tens namn koumlpvagnen och infoikonen Om man vill faring reda paring produktens inform-

ation maringste man klicka paring produktens bild eller paring infoikonen som foumlr oss direkt

till sjaumllva produktens sida Bara foumlr att man vill faring reda paring vad det aumlr foumlr produkt

foumlrs man vidare till en annan sida Det haumlr kan orsaka att kunden inte njuter totalt

av shoppingen och dessutom kan han inte jaumlmfoumlra produkterna naumlr han aumlr paring ka-

tegoriernas sida (Laya 2014)

Laringt oss hoppa vidare till den nya designen (Figur 68) Paring den nya designen har

jag satt in en kort detaljbeskrivning foumlr varje produkt Dessutom naumlr man klickar

paring infoikonen paring houmlgra sidan kommer man inte direkt till produktsidan utan det

kommer att dyka upp en inforuta som har en kort beskrivning paring produkten Om

anvaumlndaren aumlr intresserad av produkten kan han garing in till sjaumllva produktsida ge-

nom att klicka paring rdquoView productrdquo eller ocksaring paring produktbilden daumlr hanhon kan

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

17

Figur 25 Hemsida paring rakutencom foumlr mobiler

Direkt naumlr man kommer paring sidan hittar man inloggningen koumlpvagnen soumlkfunktionen

menyn och speciellt de stora bilderna paring katalogerna vilket aumlr jaumltte laumltta att klicka paring

Fastaumln mobilskaumlrmen aumlr liten goumlr den haumlr det bara inte laumltt att navigera runt sidorna utan

ocksaring trevligt att vara paring sidan

Amazoncom har ocksaring lyckats bra med designen Naumlr man kommer till sidan ser man

direkt Sign in Department Wish List Deals och Search funktionen Under search funkt-

ionen ser man genast en inspirerande reklam som paringminner oss om att det aumlr varingr

rdquoSPRINGacuteS PERFECT PANTSrdquo Fast sidan har jaumltte maringnga objekt i den aumlr det trots allt

18

jaumltte laumltt att navigera runt sidorna Man tappar inte bort sig och man hittar laumltt det som

man aumlr ute efter

Figur 26 Hemsida paring amazoncom foumlr mobiler

19

25 Kritiska punkterna foumlr bra mobil design paring e-handel

Naumlr man handlar med en mindre skaumlrm aumlr det mera utmanande eftersom skaumlrmen aumlr liten

och anvaumlndarna brukar inte ha tillraumlckligt med taringlamod att sitta och soumlka naringgonting foumlr

laumlnge fraringn en liten skaumlrm Daumlrfoumlr aumlr det viktigt att veta vilka saker man boumlr beakta naumlr

man designar en mobil e-handel I det haumlr stycket kommer jag att lista upp sakerna man

boumlr veta naumlr man designar en mobil e-handel webbplats

Naumlr man handlar med en mindre skaumlrm aumlr det mera utmanande eftersom skaumlrmen aumlr liten

och anvaumlndarna brukar inte ha tillraumlckligt med taringlamod att sitta och soumlka naringgonting foumlr

laumlnge paring en liten skaumlrm Daumlrfoumlr aumlr det viktigt att veta vilka saker man boumlr beakta naumlr man

designar en mobil e-handel I det haumlr stycket kommer jag att lista upp kritiska saker man

boumlr veta naumlr man designar en mobil e-handel webbplats

1 Call-to-action knapparna foumlr smaring paring en mobilskaumlrm

Naumlr man designar webbsidor foumlr mobiler kan det ibland vara en utmaning att faring

allt att rymmas in Daumlrfoumlr brukar ocksaring webbdesigner minska de sk rdquocall to act-

ionrdquo knapparna Om anvaumlndaren maringste zooma in foumlr att klicka paring en knapp men

av misstag klickar paring en annan knapp kan det bli frustrerande foumlr dem och detta

leder sedan till att de laumlmnar sidan Daumlrfoumlr aumlr det mycket viktigt att designa knap-

parna och inneharingllet saring att anvaumlndarna laumltt naringr dem

2 Soumlkfunktionen ska alltid finnas med

Paring mobila e-handel webbplatser ska soumlkfunktionen alltid synas saring att man laumltt skall

kunna soumlka produkterna Laringt oss saumlga att kunden inte hittar produkten han soumlker

och vill anvaumlnda soumlkfunktionen Han letar och letar efter soumlkfunktionen utan re-

sultat Detta orsakar inte bara att kunden laumlmnar din sida men ocksaring kommer han

att beraumlttar det vidare aringt andra hur han upplevde din sida (Mehra 2015)

3 Laumltt att navigera

20

Det ska vara laumltt att navigera runt sidorna Anvaumlndarna ska veta var han aumlr och hur

han kommer vidare efter att han tex har valt produkten Menyerna foumlr katalo-

gerna ska vara laumltta att navigera Om menyerna foumlr katalogerna aumlr foumlrvirrande och

svaringra foumlr anvaumlndaren att hitta produkterna blir han laumltt irriterad Exemplar paring (fi-

gur 27) haumlr nedan visar att menyerna aumlr ganska foumlrvirrande paring vaumlnstra bilden me-

dan paring houmlgra sidan aumlr det klart och tydligt (Laya 2014)

Figur 27 Jaumlmfoumlrelse mellan en bra och daringlig navigation httpconversionxlcommake-mobile-convert

4 Ta de roliga ur shopping

Det vanligaste och stoumlrsta misstaget som de flesta foumlretag goumlr naumlr de designar foumlr

mobil e-handel aumlr att de foumlrsoumlker flytta kunderna fraringn shopping till koumlp Shopping

paring en stationaumlr dator goumlr det laumltt naumlr det oftast finns ett enormt antal produkter att

vaumllja mellan och det aumlr laumltt att blaumlddra runt Men foumlr mobiler aumlr det annat

Maringnga foumlretag foumlrsoumlker pressa ihop hela shopping-processen till smaring tabbar och

minska paring inneharingllet Som resultat kommer anvaumlndaren att kaumlnna sig paringtvingad

21

att goumlra snabba beslut paring inkoumlp Istaumlllet foumlr att ge anvaumlndarna en saringdan paringtvingad

upplevelse kan man istaumlllet locka anvaumlndarna med all information vi har att er-

bjuda

Det betyder inte att anvaumlndarna som besoumlker e-handeln med en smarttelefon inte

vill njuta av shoppingen saringsom de goumlr paring stationaumlra datorer Naumlr man designar en

mobil e-handel skall kunderna kunna faring njuta av shoppingen och jaumlmfoumlra mellan

olika produkter innan dem bestaumlmmer sig vilken produkt de vill koumlpa (Laya 2014)

ldquoBut we see many companies try to compress the whole shopping process into a

small number of taps The result is a mobile app or website that forces the user to

make a quick purchase decision rather than giving a great shopping experience

To the user it feels like the site switches from giving enticement to issuing de-

mandsrdquo

- Laya Peep 2014

5 Laringngsam uppladdningstid foumlr mobiler spelar en stor roll

Det aumlr mycket viktigt att haringlla sidstorleken saring liten som moumljligt saring att det aumlr snabbt

att ladda upp sidan

ldquoMobile users want to take quick action and also Google has reportedly started

including page speed for ranking websites in the search results so that makes it

even more important to have a lighter siterdquo

- Mehra Gagan 2015

Varingren 2014 rapporterade Radware (httpwwwradwarecomspring-sotu2014)

att majoriteten av besoumlkarna kommer att oumlverge webbplatsen efter att ha vaumlntat i

3 sekunder foumlr att ladda upp sidan (Laya 2014)

Om det finns mycket inneharingll paring en sida kan man som alternativ separera inne-

haringllet i olika flikar (Mehra 2015)

Jag har tagit ett exempel fraringn Amazoncom Paring produktsidan har ja valt en orange

vaumlska Foumlr att tex ytterligare laumlsa om produktbeskrivningen rdquoAbout this itemrdquo ser

22

jag en pil som aumlr paring houmlgra sidan (Figur 29) Naumlr jag trycker paring pilen eller laringdan

kommer jag till en annan sida daumlr jag kan laumlsa hela produktbeskrivningen (Figur

210) Paring det haumlr saumlttet inneharingller sidan all information man behoumlver men separe-

rade i olika flikar saring att det blir snabbare att ladda upp sidan

Figur 28 Produktsida paring amazoncom

23

Figur 29 Produktsida paring amazoncom

Figur 210 Produktsida paring amazoncom About this item

24

6 Misslyckade analyseringar av anvaumlndarna

Naumlr man bygger webbsidor aumlr det viktig att goumlra anvaumlndbarhetstest och analysera

kundernas beteende Hur anvaumlndarna kaumlnner sig naumlr de anvaumlnder sidan aumlr mycket

viktigt och avgoumlr hur bra din business kommer att rulla

Analyseringen aumlr den kritiska inputen foumlr designen Med analyseringen ser man

dels vilka mobila apparater anvaumlndarna anvaumlnder och om det aumlr naringgra svaringrigheter

och obekvaumlmligheter anvaumlndarna upplever vid anvaumlndningen Dessa faktorer aumlr

viktiga foumlr att saumlkerstaumllla om den mobila upplevelsen uppfyller behoven hos kon-

sumenterna Testet och analysen maringste goumlras kontinuerligt foumlr att vi skall kunna

saumlkerstaumllla att kunderna har det bekvaumlmt (Mehra 2015)

7 Mindre inneharingll foumlr mobilanvaumlndarna

E-handel webbplatser brukar goumlmma inneharingll foumlr att goumlra sidan mindre Sidan aumlr

i sjaumllva verket inte mindre men bara goumlmd foumlr anvaumlndarna som anvaumlnder sina

smarttelefoner Enligt Mehra Gagan aumlr det inte bra om det finns mindre inneharingll

foumlr mobilanvaumlndarna Oavsett med vilka enheter anvaumlndarna aumlr paring sidan boumlr det

finnas lika mycket inneharingll paring alla enheterna De flesta som handlar online brukar

aumlga flera enheter och med stor sannolikhet anvaumlnder de ocksaring andra enheter foumlr

att surfa Om inneharingllet inte ser likadant ut paring stationaumlra datorer och smarttelefo-

ner kan det orsaka daringlig anvaumlndarupplevelse foumlr anvaumlndaren Enligt Google an-

vaumlnder 90 av dem som handlar paring internet olika enheter Att begraumlnsa deras

anvaumlndning aumlr naringgonting som man boumlr undvika (Mehra 2015)

25

3 MOBILANPASSADE LOumlSNINGAR

Det finns maringnga olika loumlsningar att bygga sin webbplats med Det aumlr viktigt att komma

iharingg att mobila anvaumlndande oumlkar hela tiden Det staumlller nya krav paring webbdesign och an-

vaumlndargraumlnssnitt Anvaumlndarna foumlrvaumlntar sig idag att de ska kunna ta del av allt inneharingll paring

webben oavsett om de anvaumlnder en smarttelefon eller en surfplatta De mobilanpassade

loumlsningarna foumlr e-handel kan tex vara Responsiv design Adaptiv Design Mobilbutik

eller en mobil applikation

31 Adaptiv design

En adaptiv webbplats aumlr uppbyggd saring att den aumlr optimerad foumlr specifika skaumlrmstorlekar

Den anvaumlnder servern foumlr att upptaumlcka den enhet som anvaumlnds foumlr att visa webbplatsen

Byggande av webbplatsen med adaptiv metoden aumlr tidskraumlvande paring grund av behovet att

optimera sidan foumlr varje vald plattform front-end och back-end Innan man boumlrjar bygga

webbplatsen maringste man avgoumlra vilka alla plattformar webbplatsen kommer att optimeras

till Foumlrdel med adaptiv design aumlr att den har snabb uppladdningstid

rdquoCompared to Responsiv design adaptive web design is website-optimised for each

platform separately and makes use of the opportunities presented by the platform as

well as the models and functions It offers fast-loading pages due to the server detec-

tion device and browser sending data tailored for a particular devicerdquo

-Lubo Ruska 2013

Att vaumllja den raumltta loumlsningen handlar om att foumlrstaring vad maringlgruppen foumlrvaumlntar sig och vad

de behoumlver Eftersom foumlretaget 909jp inte aumlr en jaumltte stort foumlretag saringsom Ikea eller Ama-

zon som har oberaumlknat antal med produkter tycker jag att Responsiv design med Mobile

first metoden aumlr den mest effektiva metoden foumlr denna forskning

26

32 Responsiv design

Responsiv webbdesign aumlr ett av de populaumlraste saumltten att optimera en webbplats Re-

sponsiv webbdesign moumljliggoumlr att layouten foumlraumlndras beroende paring vilken skaumlrmstorlek

och skaumlrmupploumlsningen som anvaumlndarna har och beroende paring vilka funktioner som

webblaumlsaren stoumldjer (Responsive Design 2014)

Oberoende om anvaumlndarna anvaumlnder dator laumlsplatta eller sin mobiltelefon kommer sidan

att anpassa sig paring olika saumltt foumlr att anvaumlndarna vid alla tillfaumlllen ska ha en saring rik upplevelse

som moumljligt Man kan saumlga att en webbsida paring mindre skaumlrmar aumlr med ett annat ord en

krympande version av den stoumlrre skaumlrmstorleken

Inneharingllet saringsom kolumner och bilder paring webbsidan kommer automatiskt att anpassas

beroende paring skaumlrmstorleken Och detta aumlr paring grund av Grid systemet Allt inneharingll skall

haringllas inom ett Grid system Grid systemet skall skydda allt fraringn att bryta samman naumlr

sidan anvaumlnds paring olika skaumlrmstorlekar

Det finns 11 olika Grid storlekar tvaring kolumner tre kolumner fyra kolumner fem kolum-

ner sex kolumner sju kolumner aringtta kolumner nio kolumner tio kolumner 11 kolumner

och 12 kolumner Som exempel visar jag en figur av 12 kolumners Grid system (Swan

2014)

27

Figur 31 Ett exempel paring Grid system av 5 olika skaumlrmstorlekar (Phil Swan 2014)

Responsiv webbdesign fungerar med hjaumllp av HTML5 CSS media Query och Java-

Script Det bygger paring att webbutvecklare istaumlllet foumlr exakta storlekar maumltt i pixlar anger

sidelements storlekar i procent i jaumlmfoumlrelse med skaumlrmens storlek

Naumlr sidelementens storlekar aumlr i procent goumlr det att sidan blir flexibel och den anpassas

efter webblaumlsarens storlek medan fasta pixlar ger en scrollbar (rull-list) (Responsive De-

sign 2014)

33 Varfoumlr Responsiv design

Foumlrdelar med Responsiv design aumlr att den erbjuder en bra anvaumlndarupplevelse foumlr olika

enheter och skaumlrmstorlekar Tack vare den Responsiva designen har webbredaktoumlrer laumlt-

tare att hantera inneharingllet eftersom de bara har en version att hantera Ur en SEO synvin-

kel fungerar Responsiv design baumlttre eftersom den koncentrerar inneharingllet istaumlllet foumlr att

vattna ur det med maringnga URL foumlr samma inneharingll

28

Med en Responsiv design aumlr en webbplats laumlttare att hantera Att ha flera olika versioner

av en webbplats innebaumlr mera arbete Flera olika versioner av en webbplats innebaumlr sepa-

rata sidor att redigera och separata insatser foumlr soumlkmotoroptimering och separata soumlkmo-

torkampanjer Daumlrfoumlr aumlr det en stor foumlrdel att bygga en webbplats med den Responsiva

metoden

Med en Responsiv design kaumlnner anvaumlndarna baumlttre igen sidan baringde paring stationaumlra datorer

och mobiltelefoner Bygger man specifika webbplatser foumlr mobiler och surfplattor kan

det laumltt haumlnda att det blir olika information paring webbplatserna och att de struktureras olika

Laringt oss foumlrestaumllla oss att naringgon anvaumlnder sin mobiltelefon paring lunchen foumlr att leta efter en

flygbiljett fraringn Helsingfors till Tokyo Personen hittar en webbplats som har bra erbju-

dande och bestaumlmmer sig foumlr att fortsaumltta kolla naumlr han eller hon kommer hem Naumlr per-

sonen har kommit hem anvaumlnder hen datorn istaumlllet foumlr mobilen Om webbplatsen som

personen kollade paring lunchpausen var en Responsiv webbplats faringr personen en smidig och

bra upplevelse vid oumlvergaringngen fraringn den mobila webbplatsen till stationaumlr dator

(Lindahl 2014)

Det aumlr vaumlldigt viktigt att ha sin webbplats att optimerad till saring maringnga enheter som moumljligt

foumlr att ingen vet vilka kommer att vara framtidens enheter och daumlrfoumlr anses en webbplats

som anpassar sig till maringnga olika format vara den baumlsta loumlsningen Innan man kan boumlrja

med att designa en Responsiv webbplats maringste man veta vilka skaumlrmupploumlsningar och

storlekar det finns tillgaumlngliga och aumlr populaumlra idag Foumlr att kunna rikta till de olika skaumlr-

mupploumlsningarna med Media Queries har jag listat upp olika enheternas skaumlrmupploumls-

ningar i pixlar haumlr nedan i tabellen

ResolutionGrafisk array Enhet som anvaumlnder denna resolution skaumlrmstorlek i pixel-

taumltheten i pixlar

2880x1800 15-inch Apple MacBook Pro with Retina display

2560 x 1700 Google Chromebook Pixel

2560 x 1600 Samsung Google Nexus 10

13-inch Apple MacBook Pro with Retina display

29

2560 x 1440 27-inch Apple iMac 102 111 113 122 (Late 2009 -

2012)

1920 x 1080 HTC One Samsung

Sony Xperia Z amp Xperia ZL

Asus PadFone Infinity

Acer Aspire S5

Asus Zenbook Prime

1600 x 900 Apple Macbook Air

1366 x 768 Small desktoplaptop screen resolution

Asus VivoTab RT

Samsung N350

1280 x 1024 Standard desktop screen resolution

1280 x 800 Asus PadFone 2

Samsung Galaxy Note

Sony Xperia Tablet S

1280 x 720 Sony Xperia S

HTC Windows Phone 8X

HTC One mini

1136 x 640 Apple iPhone 5 5S amp 5C

Apple iPod Touch (5th generation)

960 x 640 Apple iPhone 4 amp 4S

Apple iPod Touch (4th generation)

854 x 480 Sony Xperia ray

Nokia N9

800 x 480 Nokia Lumia 510 amp 520

Samsung Galaxy I Galaxy S Galaxy S Plus Galaxy S Ad-

vance Galaxy SL Galaxy S Duos Galaxy Xcover 2 Galaxy

Beam Nexus S Captivate Glide amp Galaxy S III mini

HTC Desire X HTC Desire V Desire VC Desire VT De-

sire U amp Windows Phone 8S

30

LG Optimus 2X Optimus EX Optimus L5 II Optimus Q2

amp Optimus Black

T-Mobile G2x

Asus E600

620 x 480 Blackberry Bold 9900 amp Bold Touch 9930

Blackberry Torch 9810

LG Optimus Z

640 x 360 Sony Ericsson Vivaz amp Vivaz Pro

Nokia 500 amp 5800 XpressMusic

Nokia N8 N97 E7 and X6

480 x 320 Apple iPhone 3G amp 3GS

Samsung Galaxy Ace

320 x 240 Nokia E71

Blackberry Curve 9220 amp 9320

Sony Ericsson txt

Samsung Galaxy Y amp Galaxy Chat

Nokia Asha 501

Figur 32 Resolutions referenser paring olika enheter

31

4 VAD AumlR MOBILE FIRST

Mobile first metoden aumlr en metod och arbetsprocess foumlr webbdesigners som aumlr skapad av

Luke Wroblewski Naumlr man jobbar med ett projekt och designar strukturerar och imple-

menterar en webbplats aumlr Mobile first metoden man paringboumlrjar arbetet med Med metoden

menar Wroblewski att man foumlrst boumlrjar designa webbsidor fraringn de minsta enheterna

Figur 41 Mobile First att bygga webbsidan fraringn den minsta skaumlrmen till den stoumlrsta skaumlrmen

Wroblewski som har skapat Mobile First metoden understryker att metoden ska priorite-

ras daring man skapar anvaumlndarupplevelser

Det finns tre viktiga anledningar foumlr att utveckla foumlr Mobile First

Den foumlrbereder foumlr den stora utveckling och nya moumljligheter som uppkommer

inom det mobila omraringdet idag (836 av vaumlrldens befolkning anvaumlnder internet

paring sin smarttelefon 2015)

Den goumlr att vi blir tvungna att prioritera och fokusera varingrt inneharingll genom att ac-

ceptera de begraumlnsningar som aumlr foumlrenade med mobil design

32

och goumlr att vi kan leverera innovativa upplevelser genom att bygga utifraringn nya

funktioner som finns inbyggda i de mobila enheterna (bla GEO lokalisering)

En mobil webbplats behoumlver endast ha en mycket enkel layout och navigeringen ska vara

laumltt och effektiv

Naumlr man designar med Mobile first metoden tvingas man goumlra viktiga beslut om vad som

ska prioriteras Naumlr den optimerad design foumlr en liten skaumlrm visas paring en stoumlrre skaumlrm

kommer det att bli laumlttare att designa paring de stoumlrre skaumlrmarna Allt som ska goumlras aumlr daring

bara att fylla paring inneharingllet och designa saring att det aumlr grafiskt tilltalande och laumltt att hitta

inneharingllet (Wroblewski 2011)

41 Varfoumlr Mobile first

Vaumlrlden vi lever i idag aumlr inte mera som foumlr tio aringr sedan Allt runtom oss har utvecklats

speciellt mobiltelefonerna Tidigare anvaumlndes mobiltelefoner bara foumlr att skicka med-

delandet ringa och ta emot samtal Nu anvaumlnds den till foumlr att dels ta bilder video GPS

navigation foumlr vaumlgvisning och speciellt internetanvaumlndningen saringsom Google nyheter

Facebook Youtube och mycket mer Paring grund av det har ocksaring varingr livsstil foumlraumlndrats

Internetanvaumlndning idag har blivit allt vanligare Idag anvaumlnder vi naumltet i skolan paring jobbet

eller var och naumlr som helst bara man har en smarttelefon eller surfplatta och naumltet kopplat

Tidigare boumlrjade man bygga en webbplats fraringn den stoumlrsta skaumlrmen medan den mobila

sidan var en biprodukt Laringt oss saumlga att man har en webbplats med en rik grafisk layout

och ser stilig ut paring stationaumlra datorer Naumlr man skalar ner sidan foumlr att passa en mobilskaumlrm

kommer resultatet att vara en smaumlrta foumlr varingra oumlgon Paring den lilla mobilskaumlrmen kommer

det att vara olaumlsligt och svaringrt att anvaumlnda Foumlr att naring inneharingllet maringste du tom zooma in

och ut eller skrolla till houmlger och vaumlnster Det haumlr kommer att ge en negativ bild av ditt

foumlretag och anvaumlndarna kanske aldrig mera besoumlker din webbplats (Wroblewski 2011)

Ett bra exempel aumlr Tokyo Skytree webbplats som aumlnnu idag inte ha byggt in funktionalitet

och designen foumlr mindre skaumlrmupploumlsningar paring den engelska sidan

33

Tokyo Skytree aumlr vaumlrldens naumlst houmlgsta torn efter Burj Khalifa Tornet aumlr Japans houmlgsta

byggnadsverk med en houmljd paring 634 meter Den oumlppnades 22 maj 2012 och under det foumlrsta

aringret hade den 64 miljoner besoumlkare fraringn hela vaumlrlden Trots det har de laringtit bli att utveckla

den engelska webbsidan Paring bilden ser man att hemsidan ser exakt likadant ut paring stationaumlr

dator och paring mobilen

Figur 42 Hemsidan paring Tokyo Skytree paring stationaumlr datorskaumlrm

34

Figur 43 Hemsidan foumlr Tokyo Skytree Foumlrsta bilden visar hur det ser ut normalt Andra bilden visar naumlr man zoomar

in

Naumlr man foumlrsoumlker zooma in foumlr att laumlsa inneharingllet hoppar sidbalken (paring vaumlnstra sidan) paring

texten Det haumlr ger en mycket daringlig anvaumlndarupplevelse och kan ge fel bild av turistplat-

sen Ett annat fel paring sidan aumlr naumlr man vaumlljer spraringk till japanska ser sidan inte likadant ut

35

Figure 44 Hemsidan paring Tokyo Skytree paring japanska

Om du kan laumlsa japanska kommer du att undra varfoumlr det finns massor med information

och sidan ser mycket trevligare ut paring den japanska sidan Paring den internationella sidan

dvs engelska ser det inte lika trevligt ut och inneharingller inte allt som det goumlr paring den

japanska sidan Det aumlr som om den stoumlrsta maringlgruppen aumlr foumlr japanska turister och som

om de skulle inte bry sig om turister fraringn utlandet

Utoumlver det har de ocksaring byggt en mobilsida foumlr den japanska webbsidan Varfoumlr satsa bara

paring den japanska sidan och inte den engelska sidan naumlr maringlgruppen aumlr hela vaumlrlden

36

Figur 45 Mobil sidan paring Tokyo Skytree paring japanska

Vi lever i 2015 saring alla borde veta att det aumlr vaumlldigt viktig att ha en mobil webbplats som

erbjuder en bra anvaumlndarupplevelse paring alla spraringk som webbplatsen erbjuder Naumlr man har

sin sida paring flera spraringk och aumlndaring bestaumlmmer sig att bygga sidan ordentligt bara paring ett spraringk

kan anvaumlndarna faring en fel bild av foumlretaget I vaumlrsta fall kommer anvaumlndarna tycka att sidan

aumlr oparinglitligt och aringterkommer aldrig igen

Mobile first metoden aumlr daumlrfoumlr en mycket effektiv metod att bygga sin webbplats med

Man boumlrjar med att bygga sin webbplats fraringn den minsta skaumlrmen Man tvingas goumlra be-

slut om vad som ska absolut prioriteras Arbetsprocessen foumlr oss webbdesigners blir

mycket effektivare genom att foumlrst designa fraringn den minsta skaumlrmen och sedan foumlrflytta

oss till de stoumlrre skaumlrmarna Har man ett 6 kvadratmeters sovrum och foumlrsoumlker faring sin saumlng

skrivbord hylla klaumldskaringp och soffan att rymmas in aumlr det ganska utmanande Men naumlr

man boumlrjar med det mest utmanande i arbetsprocessen blir arbetet ocksaring mindre utma-

nande desto stoumlrre rum eller skaumlrm det blir (Wroblewski 2011)

37

5 909JP

909jp aumlr en elektronisk handel en moumlbelaffaumlr som saumlljer vaumlsterlaumlndska produkter Den

elektroniska butiken kommer att oumlppnas i Japan 2015 Deras foumlrvaumlntningar aumlr att faring in

en miljon dollar i foumlrsaumlljning per aringr I deras elektroniska moumlbelaffaumlr saumlljs bla stolar bord

soffor och lampor Maringlgruppen aumlr alla konsumenter mellan 18-60 aringringar

Japaner aumlr intresserade av vaumlsterlaumlndska produkter och livsstil men foumlr de flesta varor aumlr

designen knutna till deras egen kultur vilket goumlr dem mer intresserad Det aumlr ocksaring mycket

viktigt att ha sin hemsida paring japanska eftersom 99 av den japanska befolkningen foumlre-

drar att inte laumlsa inneharingllet paring andra spraringk (Khurana)

Japan aumlr ett land med vaumlrldens tredje stoumlrsta ekonomi paring 5 biljoner De har vaumlrldens ti-

onde stoumlrsta befolkning med ca 1271 miljoner invaringnare varav 70 av den totala befolk-

ningen anvaumlnder internet och 24 av dem anvaumlnder internet paring sin smarttelefon

(Khurana)

Viktigt med detta projekt aumlr att sikta aringt raumltt haringll och betjaumlna kunderna paring det baumlsta saumlttet

via webbplatsen Foumlr att kunna faringnga saring maringnga kunder som moumljligt aumlr det mycket viktigt

att designa en webbplats som aumlr anvaumlndarvaumlnlig stilig och laumltt att anvaumlnda (Wroblewski

2011)

Jag har daumlrfoumlr kommit underfund med att anvaumlnda Mobile first och Responsiv design

metoden foumlr att utveckla den mobila 909jp sidan Med tanke paring att det aumlr en Responsiv

design skall layouten paring den mobila versionen ocksaring passa in med de stoumlrre skaumlrmarna

naumlr sidan skalas upp Det aumlr dock viktigt poaumlngtera att jag endast kommer att koncentrera

mig paring den mobila designen och utveckla designen endast foumlr denna forskning

38

6 ANALYS AV DEN NYA DESIGNEN

Med hjaumllp av den tidigare designen paring 909jp och de kritiska punkterna jag har hittat under

forskningen har jag skapat en ny och foumlrbaumlttrad design av webbplatsen foumlr mobiler I det

haumlr kapitlet kommer jag att visa naringgra exempel paring den tidigare designen och jaumlmfoumlra den

med nya designen samt analysera arbetet

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger)

1 Call-to-action knapparna

Under hela arbetsprocessen har jag haft i minnet att navigeringar laumlnkar och knap-

parna ska vara tillraumlckligt stora att klicka paring I den tidigare designen har de stora

bilder paring kategorier vilket jag tycker aumlr en bra design att aringtervaumlnda

39

2 Soumlkfunktionen

Paring den tidigare versionen haumlr nedan ser man att soumlkfunktionen inte finns med

medan paring den nya designen ser man soumlkfunktionen genast naumlr man kommer till

sidan Som tidigare framfoumlrdes att soumlkfunktionen alltid ska synas saring att man laumltt

skall kunna soumlka fram produkterna Om soumlkfunktionen inte finns med eller aumlr svaringr

att hitta naumlr den behoumlvs kan det orsaka missnoumlje hos anvaumlndarna (Mehra Gagan

2015)

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp

Figur 63 Soumlkfunktionen paring den nya designen 909jp

40

3 Laumltt att navigera

Naumlr skaumlrmen aumlr liten aumlr det viktig att ha en enkel layout (Wroblewski 2011)

Jag har daumlrfor i den nya designen flyttat rdquoHemrdquo och rdquoBlogrdquo knapparna bort fraringn

den oumlvre menyn Hem-knappen finns nu i hamburgarmenyn paring vaumlnstra sidan me-

dan Blog-knappen finns i footer Detta goumlr att det ser mera organiserat ut

Figur 64 Gamla designen

Laringt oss foumlrflytta vidare till menyer foumlr kategorier Paring hemsidan har man tvaring alter-

nativ att naring kategorierna Foumlrsta aumlr den hamburgarmenyn knappen paring vaumlnstra si-

dan I menyn aumlr kategorierna indelade i fyra delar stolar lampor ergonomisk och

soffa amp middag Detta goumlr det laumltt och klart foumlr anvaumlndarna var produkterna finns

Eftersom vi bara har partiell uppmaumlrksamhet fraringn anvaumlndarna naumlr de aumlr paring sina

smarttelefoner har jag valt att saumltta in ikoner i menyn (Figur 65) Naumlr anvaumlndaren

bara anvaumlnder ena oumlgat foumlr att kolla paring mobilen och andra oumlgat foumlr naringgonting annat

ska den lilla skaumlrmen med webbplatsen kunna faringnga uppmaumlrksamheten samt un-

derlaumltta anvaumlndningen av webbplatsen (Wroblewski 2011)

41

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny

Andra menyn for kategorierna aumlr de fyra bilderna under Aeron chair slideshowen

Paring den tidigare designen ser man endast ett foumlnster av kategorierna som aumlr place-

rade i en kolumn som upprepas loggraumltt (Figur 66) Det haumlr goumlr att anvaumlndaren

maringste skrolla ner foumlr att se varenda kategori vilket kan orsaka obekvaumlmlighet Att

se flera kategorier paring samma skaumlrm sparar tid och anvaumlndaren kommer aumlven baumlttre

iharingg var sakerna finns Att ha bara rdquoenrdquo stor bild som syns paring skaumlrmen och vara

tvungen att skrolla ner foumlr att se naumlsta bild aumlr frustrerande Paring den nya designen

har jag tvaring rutor av kategorier bredvid varandra (Figur 66)

42

Figur 66 Kategorier paring den gamla designen (till vaumlnster) Kategorier paring den nya designen (till houmlger)

4 Ta det roliga ur shopping

Paring den nya designen straumlvar jag efter att erbjuda en bekvaumlm shopping-upplevelse

Naumlr anvaumlndarna besoumlker e-handeln med en smarttelefon foumlrvaumlntar hanhon sig

ocksaring att kunna ta del av allt inneharingll och goumlra jaumlmfoumlrelser med andra produkter

Jag har daumlrfoumlr i den nya designen pressat ihop laumlngden paring kolumnhoumljden som om-

ringar produkten Som resultat ser vi nu fyra produkter paring samma skaumlrm (Figur

67) I den tidigare designen ser vi en enda produkt paring en skaumlrm och foumlr att se

andra produkter maringste vi skrolla ner Paring det haumlr saumlttet har anvaumlndarna svaringrare att

jaumlmfoumlra produkterna (Laya 2014)

43

Figur 67 Tidigare produktsida (till vaumlnster) Ny produktsida (till houmlger)

I den tidigare designen ser vi ocksaring att det finns endast produktens bild produk-

tens namn koumlpvagnen och infoikonen Om man vill faring reda paring produktens inform-

ation maringste man klicka paring produktens bild eller paring infoikonen som foumlr oss direkt

till sjaumllva produktens sida Bara foumlr att man vill faring reda paring vad det aumlr foumlr produkt

foumlrs man vidare till en annan sida Det haumlr kan orsaka att kunden inte njuter totalt

av shoppingen och dessutom kan han inte jaumlmfoumlra produkterna naumlr han aumlr paring ka-

tegoriernas sida (Laya 2014)

Laringt oss hoppa vidare till den nya designen (Figur 68) Paring den nya designen har

jag satt in en kort detaljbeskrivning foumlr varje produkt Dessutom naumlr man klickar

paring infoikonen paring houmlgra sidan kommer man inte direkt till produktsidan utan det

kommer att dyka upp en inforuta som har en kort beskrivning paring produkten Om

anvaumlndaren aumlr intresserad av produkten kan han garing in till sjaumllva produktsida ge-

nom att klicka paring rdquoView productrdquo eller ocksaring paring produktbilden daumlr hanhon kan

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

18

jaumltte laumltt att navigera runt sidorna Man tappar inte bort sig och man hittar laumltt det som

man aumlr ute efter

Figur 26 Hemsida paring amazoncom foumlr mobiler

19

25 Kritiska punkterna foumlr bra mobil design paring e-handel

Naumlr man handlar med en mindre skaumlrm aumlr det mera utmanande eftersom skaumlrmen aumlr liten

och anvaumlndarna brukar inte ha tillraumlckligt med taringlamod att sitta och soumlka naringgonting foumlr

laumlnge fraringn en liten skaumlrm Daumlrfoumlr aumlr det viktigt att veta vilka saker man boumlr beakta naumlr

man designar en mobil e-handel I det haumlr stycket kommer jag att lista upp sakerna man

boumlr veta naumlr man designar en mobil e-handel webbplats

Naumlr man handlar med en mindre skaumlrm aumlr det mera utmanande eftersom skaumlrmen aumlr liten

och anvaumlndarna brukar inte ha tillraumlckligt med taringlamod att sitta och soumlka naringgonting foumlr

laumlnge paring en liten skaumlrm Daumlrfoumlr aumlr det viktigt att veta vilka saker man boumlr beakta naumlr man

designar en mobil e-handel I det haumlr stycket kommer jag att lista upp kritiska saker man

boumlr veta naumlr man designar en mobil e-handel webbplats

1 Call-to-action knapparna foumlr smaring paring en mobilskaumlrm

Naumlr man designar webbsidor foumlr mobiler kan det ibland vara en utmaning att faring

allt att rymmas in Daumlrfoumlr brukar ocksaring webbdesigner minska de sk rdquocall to act-

ionrdquo knapparna Om anvaumlndaren maringste zooma in foumlr att klicka paring en knapp men

av misstag klickar paring en annan knapp kan det bli frustrerande foumlr dem och detta

leder sedan till att de laumlmnar sidan Daumlrfoumlr aumlr det mycket viktigt att designa knap-

parna och inneharingllet saring att anvaumlndarna laumltt naringr dem

2 Soumlkfunktionen ska alltid finnas med

Paring mobila e-handel webbplatser ska soumlkfunktionen alltid synas saring att man laumltt skall

kunna soumlka produkterna Laringt oss saumlga att kunden inte hittar produkten han soumlker

och vill anvaumlnda soumlkfunktionen Han letar och letar efter soumlkfunktionen utan re-

sultat Detta orsakar inte bara att kunden laumlmnar din sida men ocksaring kommer han

att beraumlttar det vidare aringt andra hur han upplevde din sida (Mehra 2015)

3 Laumltt att navigera

20

Det ska vara laumltt att navigera runt sidorna Anvaumlndarna ska veta var han aumlr och hur

han kommer vidare efter att han tex har valt produkten Menyerna foumlr katalo-

gerna ska vara laumltta att navigera Om menyerna foumlr katalogerna aumlr foumlrvirrande och

svaringra foumlr anvaumlndaren att hitta produkterna blir han laumltt irriterad Exemplar paring (fi-

gur 27) haumlr nedan visar att menyerna aumlr ganska foumlrvirrande paring vaumlnstra bilden me-

dan paring houmlgra sidan aumlr det klart och tydligt (Laya 2014)

Figur 27 Jaumlmfoumlrelse mellan en bra och daringlig navigation httpconversionxlcommake-mobile-convert

4 Ta de roliga ur shopping

Det vanligaste och stoumlrsta misstaget som de flesta foumlretag goumlr naumlr de designar foumlr

mobil e-handel aumlr att de foumlrsoumlker flytta kunderna fraringn shopping till koumlp Shopping

paring en stationaumlr dator goumlr det laumltt naumlr det oftast finns ett enormt antal produkter att

vaumllja mellan och det aumlr laumltt att blaumlddra runt Men foumlr mobiler aumlr det annat

Maringnga foumlretag foumlrsoumlker pressa ihop hela shopping-processen till smaring tabbar och

minska paring inneharingllet Som resultat kommer anvaumlndaren att kaumlnna sig paringtvingad

21

att goumlra snabba beslut paring inkoumlp Istaumlllet foumlr att ge anvaumlndarna en saringdan paringtvingad

upplevelse kan man istaumlllet locka anvaumlndarna med all information vi har att er-

bjuda

Det betyder inte att anvaumlndarna som besoumlker e-handeln med en smarttelefon inte

vill njuta av shoppingen saringsom de goumlr paring stationaumlra datorer Naumlr man designar en

mobil e-handel skall kunderna kunna faring njuta av shoppingen och jaumlmfoumlra mellan

olika produkter innan dem bestaumlmmer sig vilken produkt de vill koumlpa (Laya 2014)

ldquoBut we see many companies try to compress the whole shopping process into a

small number of taps The result is a mobile app or website that forces the user to

make a quick purchase decision rather than giving a great shopping experience

To the user it feels like the site switches from giving enticement to issuing de-

mandsrdquo

- Laya Peep 2014

5 Laringngsam uppladdningstid foumlr mobiler spelar en stor roll

Det aumlr mycket viktigt att haringlla sidstorleken saring liten som moumljligt saring att det aumlr snabbt

att ladda upp sidan

ldquoMobile users want to take quick action and also Google has reportedly started

including page speed for ranking websites in the search results so that makes it

even more important to have a lighter siterdquo

- Mehra Gagan 2015

Varingren 2014 rapporterade Radware (httpwwwradwarecomspring-sotu2014)

att majoriteten av besoumlkarna kommer att oumlverge webbplatsen efter att ha vaumlntat i

3 sekunder foumlr att ladda upp sidan (Laya 2014)

Om det finns mycket inneharingll paring en sida kan man som alternativ separera inne-

haringllet i olika flikar (Mehra 2015)

Jag har tagit ett exempel fraringn Amazoncom Paring produktsidan har ja valt en orange

vaumlska Foumlr att tex ytterligare laumlsa om produktbeskrivningen rdquoAbout this itemrdquo ser

22

jag en pil som aumlr paring houmlgra sidan (Figur 29) Naumlr jag trycker paring pilen eller laringdan

kommer jag till en annan sida daumlr jag kan laumlsa hela produktbeskrivningen (Figur

210) Paring det haumlr saumlttet inneharingller sidan all information man behoumlver men separe-

rade i olika flikar saring att det blir snabbare att ladda upp sidan

Figur 28 Produktsida paring amazoncom

23

Figur 29 Produktsida paring amazoncom

Figur 210 Produktsida paring amazoncom About this item

24

6 Misslyckade analyseringar av anvaumlndarna

Naumlr man bygger webbsidor aumlr det viktig att goumlra anvaumlndbarhetstest och analysera

kundernas beteende Hur anvaumlndarna kaumlnner sig naumlr de anvaumlnder sidan aumlr mycket

viktigt och avgoumlr hur bra din business kommer att rulla

Analyseringen aumlr den kritiska inputen foumlr designen Med analyseringen ser man

dels vilka mobila apparater anvaumlndarna anvaumlnder och om det aumlr naringgra svaringrigheter

och obekvaumlmligheter anvaumlndarna upplever vid anvaumlndningen Dessa faktorer aumlr

viktiga foumlr att saumlkerstaumllla om den mobila upplevelsen uppfyller behoven hos kon-

sumenterna Testet och analysen maringste goumlras kontinuerligt foumlr att vi skall kunna

saumlkerstaumllla att kunderna har det bekvaumlmt (Mehra 2015)

7 Mindre inneharingll foumlr mobilanvaumlndarna

E-handel webbplatser brukar goumlmma inneharingll foumlr att goumlra sidan mindre Sidan aumlr

i sjaumllva verket inte mindre men bara goumlmd foumlr anvaumlndarna som anvaumlnder sina

smarttelefoner Enligt Mehra Gagan aumlr det inte bra om det finns mindre inneharingll

foumlr mobilanvaumlndarna Oavsett med vilka enheter anvaumlndarna aumlr paring sidan boumlr det

finnas lika mycket inneharingll paring alla enheterna De flesta som handlar online brukar

aumlga flera enheter och med stor sannolikhet anvaumlnder de ocksaring andra enheter foumlr

att surfa Om inneharingllet inte ser likadant ut paring stationaumlra datorer och smarttelefo-

ner kan det orsaka daringlig anvaumlndarupplevelse foumlr anvaumlndaren Enligt Google an-

vaumlnder 90 av dem som handlar paring internet olika enheter Att begraumlnsa deras

anvaumlndning aumlr naringgonting som man boumlr undvika (Mehra 2015)

25

3 MOBILANPASSADE LOumlSNINGAR

Det finns maringnga olika loumlsningar att bygga sin webbplats med Det aumlr viktigt att komma

iharingg att mobila anvaumlndande oumlkar hela tiden Det staumlller nya krav paring webbdesign och an-

vaumlndargraumlnssnitt Anvaumlndarna foumlrvaumlntar sig idag att de ska kunna ta del av allt inneharingll paring

webben oavsett om de anvaumlnder en smarttelefon eller en surfplatta De mobilanpassade

loumlsningarna foumlr e-handel kan tex vara Responsiv design Adaptiv Design Mobilbutik

eller en mobil applikation

31 Adaptiv design

En adaptiv webbplats aumlr uppbyggd saring att den aumlr optimerad foumlr specifika skaumlrmstorlekar

Den anvaumlnder servern foumlr att upptaumlcka den enhet som anvaumlnds foumlr att visa webbplatsen

Byggande av webbplatsen med adaptiv metoden aumlr tidskraumlvande paring grund av behovet att

optimera sidan foumlr varje vald plattform front-end och back-end Innan man boumlrjar bygga

webbplatsen maringste man avgoumlra vilka alla plattformar webbplatsen kommer att optimeras

till Foumlrdel med adaptiv design aumlr att den har snabb uppladdningstid

rdquoCompared to Responsiv design adaptive web design is website-optimised for each

platform separately and makes use of the opportunities presented by the platform as

well as the models and functions It offers fast-loading pages due to the server detec-

tion device and browser sending data tailored for a particular devicerdquo

-Lubo Ruska 2013

Att vaumllja den raumltta loumlsningen handlar om att foumlrstaring vad maringlgruppen foumlrvaumlntar sig och vad

de behoumlver Eftersom foumlretaget 909jp inte aumlr en jaumltte stort foumlretag saringsom Ikea eller Ama-

zon som har oberaumlknat antal med produkter tycker jag att Responsiv design med Mobile

first metoden aumlr den mest effektiva metoden foumlr denna forskning

26

32 Responsiv design

Responsiv webbdesign aumlr ett av de populaumlraste saumltten att optimera en webbplats Re-

sponsiv webbdesign moumljliggoumlr att layouten foumlraumlndras beroende paring vilken skaumlrmstorlek

och skaumlrmupploumlsningen som anvaumlndarna har och beroende paring vilka funktioner som

webblaumlsaren stoumldjer (Responsive Design 2014)

Oberoende om anvaumlndarna anvaumlnder dator laumlsplatta eller sin mobiltelefon kommer sidan

att anpassa sig paring olika saumltt foumlr att anvaumlndarna vid alla tillfaumlllen ska ha en saring rik upplevelse

som moumljligt Man kan saumlga att en webbsida paring mindre skaumlrmar aumlr med ett annat ord en

krympande version av den stoumlrre skaumlrmstorleken

Inneharingllet saringsom kolumner och bilder paring webbsidan kommer automatiskt att anpassas

beroende paring skaumlrmstorleken Och detta aumlr paring grund av Grid systemet Allt inneharingll skall

haringllas inom ett Grid system Grid systemet skall skydda allt fraringn att bryta samman naumlr

sidan anvaumlnds paring olika skaumlrmstorlekar

Det finns 11 olika Grid storlekar tvaring kolumner tre kolumner fyra kolumner fem kolum-

ner sex kolumner sju kolumner aringtta kolumner nio kolumner tio kolumner 11 kolumner

och 12 kolumner Som exempel visar jag en figur av 12 kolumners Grid system (Swan

2014)

27

Figur 31 Ett exempel paring Grid system av 5 olika skaumlrmstorlekar (Phil Swan 2014)

Responsiv webbdesign fungerar med hjaumllp av HTML5 CSS media Query och Java-

Script Det bygger paring att webbutvecklare istaumlllet foumlr exakta storlekar maumltt i pixlar anger

sidelements storlekar i procent i jaumlmfoumlrelse med skaumlrmens storlek

Naumlr sidelementens storlekar aumlr i procent goumlr det att sidan blir flexibel och den anpassas

efter webblaumlsarens storlek medan fasta pixlar ger en scrollbar (rull-list) (Responsive De-

sign 2014)

33 Varfoumlr Responsiv design

Foumlrdelar med Responsiv design aumlr att den erbjuder en bra anvaumlndarupplevelse foumlr olika

enheter och skaumlrmstorlekar Tack vare den Responsiva designen har webbredaktoumlrer laumlt-

tare att hantera inneharingllet eftersom de bara har en version att hantera Ur en SEO synvin-

kel fungerar Responsiv design baumlttre eftersom den koncentrerar inneharingllet istaumlllet foumlr att

vattna ur det med maringnga URL foumlr samma inneharingll

28

Med en Responsiv design aumlr en webbplats laumlttare att hantera Att ha flera olika versioner

av en webbplats innebaumlr mera arbete Flera olika versioner av en webbplats innebaumlr sepa-

rata sidor att redigera och separata insatser foumlr soumlkmotoroptimering och separata soumlkmo-

torkampanjer Daumlrfoumlr aumlr det en stor foumlrdel att bygga en webbplats med den Responsiva

metoden

Med en Responsiv design kaumlnner anvaumlndarna baumlttre igen sidan baringde paring stationaumlra datorer

och mobiltelefoner Bygger man specifika webbplatser foumlr mobiler och surfplattor kan

det laumltt haumlnda att det blir olika information paring webbplatserna och att de struktureras olika

Laringt oss foumlrestaumllla oss att naringgon anvaumlnder sin mobiltelefon paring lunchen foumlr att leta efter en

flygbiljett fraringn Helsingfors till Tokyo Personen hittar en webbplats som har bra erbju-

dande och bestaumlmmer sig foumlr att fortsaumltta kolla naumlr han eller hon kommer hem Naumlr per-

sonen har kommit hem anvaumlnder hen datorn istaumlllet foumlr mobilen Om webbplatsen som

personen kollade paring lunchpausen var en Responsiv webbplats faringr personen en smidig och

bra upplevelse vid oumlvergaringngen fraringn den mobila webbplatsen till stationaumlr dator

(Lindahl 2014)

Det aumlr vaumlldigt viktigt att ha sin webbplats att optimerad till saring maringnga enheter som moumljligt

foumlr att ingen vet vilka kommer att vara framtidens enheter och daumlrfoumlr anses en webbplats

som anpassar sig till maringnga olika format vara den baumlsta loumlsningen Innan man kan boumlrja

med att designa en Responsiv webbplats maringste man veta vilka skaumlrmupploumlsningar och

storlekar det finns tillgaumlngliga och aumlr populaumlra idag Foumlr att kunna rikta till de olika skaumlr-

mupploumlsningarna med Media Queries har jag listat upp olika enheternas skaumlrmupploumls-

ningar i pixlar haumlr nedan i tabellen

ResolutionGrafisk array Enhet som anvaumlnder denna resolution skaumlrmstorlek i pixel-

taumltheten i pixlar

2880x1800 15-inch Apple MacBook Pro with Retina display

2560 x 1700 Google Chromebook Pixel

2560 x 1600 Samsung Google Nexus 10

13-inch Apple MacBook Pro with Retina display

29

2560 x 1440 27-inch Apple iMac 102 111 113 122 (Late 2009 -

2012)

1920 x 1080 HTC One Samsung

Sony Xperia Z amp Xperia ZL

Asus PadFone Infinity

Acer Aspire S5

Asus Zenbook Prime

1600 x 900 Apple Macbook Air

1366 x 768 Small desktoplaptop screen resolution

Asus VivoTab RT

Samsung N350

1280 x 1024 Standard desktop screen resolution

1280 x 800 Asus PadFone 2

Samsung Galaxy Note

Sony Xperia Tablet S

1280 x 720 Sony Xperia S

HTC Windows Phone 8X

HTC One mini

1136 x 640 Apple iPhone 5 5S amp 5C

Apple iPod Touch (5th generation)

960 x 640 Apple iPhone 4 amp 4S

Apple iPod Touch (4th generation)

854 x 480 Sony Xperia ray

Nokia N9

800 x 480 Nokia Lumia 510 amp 520

Samsung Galaxy I Galaxy S Galaxy S Plus Galaxy S Ad-

vance Galaxy SL Galaxy S Duos Galaxy Xcover 2 Galaxy

Beam Nexus S Captivate Glide amp Galaxy S III mini

HTC Desire X HTC Desire V Desire VC Desire VT De-

sire U amp Windows Phone 8S

30

LG Optimus 2X Optimus EX Optimus L5 II Optimus Q2

amp Optimus Black

T-Mobile G2x

Asus E600

620 x 480 Blackberry Bold 9900 amp Bold Touch 9930

Blackberry Torch 9810

LG Optimus Z

640 x 360 Sony Ericsson Vivaz amp Vivaz Pro

Nokia 500 amp 5800 XpressMusic

Nokia N8 N97 E7 and X6

480 x 320 Apple iPhone 3G amp 3GS

Samsung Galaxy Ace

320 x 240 Nokia E71

Blackberry Curve 9220 amp 9320

Sony Ericsson txt

Samsung Galaxy Y amp Galaxy Chat

Nokia Asha 501

Figur 32 Resolutions referenser paring olika enheter

31

4 VAD AumlR MOBILE FIRST

Mobile first metoden aumlr en metod och arbetsprocess foumlr webbdesigners som aumlr skapad av

Luke Wroblewski Naumlr man jobbar med ett projekt och designar strukturerar och imple-

menterar en webbplats aumlr Mobile first metoden man paringboumlrjar arbetet med Med metoden

menar Wroblewski att man foumlrst boumlrjar designa webbsidor fraringn de minsta enheterna

Figur 41 Mobile First att bygga webbsidan fraringn den minsta skaumlrmen till den stoumlrsta skaumlrmen

Wroblewski som har skapat Mobile First metoden understryker att metoden ska priorite-

ras daring man skapar anvaumlndarupplevelser

Det finns tre viktiga anledningar foumlr att utveckla foumlr Mobile First

Den foumlrbereder foumlr den stora utveckling och nya moumljligheter som uppkommer

inom det mobila omraringdet idag (836 av vaumlrldens befolkning anvaumlnder internet

paring sin smarttelefon 2015)

Den goumlr att vi blir tvungna att prioritera och fokusera varingrt inneharingll genom att ac-

ceptera de begraumlnsningar som aumlr foumlrenade med mobil design

32

och goumlr att vi kan leverera innovativa upplevelser genom att bygga utifraringn nya

funktioner som finns inbyggda i de mobila enheterna (bla GEO lokalisering)

En mobil webbplats behoumlver endast ha en mycket enkel layout och navigeringen ska vara

laumltt och effektiv

Naumlr man designar med Mobile first metoden tvingas man goumlra viktiga beslut om vad som

ska prioriteras Naumlr den optimerad design foumlr en liten skaumlrm visas paring en stoumlrre skaumlrm

kommer det att bli laumlttare att designa paring de stoumlrre skaumlrmarna Allt som ska goumlras aumlr daring

bara att fylla paring inneharingllet och designa saring att det aumlr grafiskt tilltalande och laumltt att hitta

inneharingllet (Wroblewski 2011)

41 Varfoumlr Mobile first

Vaumlrlden vi lever i idag aumlr inte mera som foumlr tio aringr sedan Allt runtom oss har utvecklats

speciellt mobiltelefonerna Tidigare anvaumlndes mobiltelefoner bara foumlr att skicka med-

delandet ringa och ta emot samtal Nu anvaumlnds den till foumlr att dels ta bilder video GPS

navigation foumlr vaumlgvisning och speciellt internetanvaumlndningen saringsom Google nyheter

Facebook Youtube och mycket mer Paring grund av det har ocksaring varingr livsstil foumlraumlndrats

Internetanvaumlndning idag har blivit allt vanligare Idag anvaumlnder vi naumltet i skolan paring jobbet

eller var och naumlr som helst bara man har en smarttelefon eller surfplatta och naumltet kopplat

Tidigare boumlrjade man bygga en webbplats fraringn den stoumlrsta skaumlrmen medan den mobila

sidan var en biprodukt Laringt oss saumlga att man har en webbplats med en rik grafisk layout

och ser stilig ut paring stationaumlra datorer Naumlr man skalar ner sidan foumlr att passa en mobilskaumlrm

kommer resultatet att vara en smaumlrta foumlr varingra oumlgon Paring den lilla mobilskaumlrmen kommer

det att vara olaumlsligt och svaringrt att anvaumlnda Foumlr att naring inneharingllet maringste du tom zooma in

och ut eller skrolla till houmlger och vaumlnster Det haumlr kommer att ge en negativ bild av ditt

foumlretag och anvaumlndarna kanske aldrig mera besoumlker din webbplats (Wroblewski 2011)

Ett bra exempel aumlr Tokyo Skytree webbplats som aumlnnu idag inte ha byggt in funktionalitet

och designen foumlr mindre skaumlrmupploumlsningar paring den engelska sidan

33

Tokyo Skytree aumlr vaumlrldens naumlst houmlgsta torn efter Burj Khalifa Tornet aumlr Japans houmlgsta

byggnadsverk med en houmljd paring 634 meter Den oumlppnades 22 maj 2012 och under det foumlrsta

aringret hade den 64 miljoner besoumlkare fraringn hela vaumlrlden Trots det har de laringtit bli att utveckla

den engelska webbsidan Paring bilden ser man att hemsidan ser exakt likadant ut paring stationaumlr

dator och paring mobilen

Figur 42 Hemsidan paring Tokyo Skytree paring stationaumlr datorskaumlrm

34

Figur 43 Hemsidan foumlr Tokyo Skytree Foumlrsta bilden visar hur det ser ut normalt Andra bilden visar naumlr man zoomar

in

Naumlr man foumlrsoumlker zooma in foumlr att laumlsa inneharingllet hoppar sidbalken (paring vaumlnstra sidan) paring

texten Det haumlr ger en mycket daringlig anvaumlndarupplevelse och kan ge fel bild av turistplat-

sen Ett annat fel paring sidan aumlr naumlr man vaumlljer spraringk till japanska ser sidan inte likadant ut

35

Figure 44 Hemsidan paring Tokyo Skytree paring japanska

Om du kan laumlsa japanska kommer du att undra varfoumlr det finns massor med information

och sidan ser mycket trevligare ut paring den japanska sidan Paring den internationella sidan

dvs engelska ser det inte lika trevligt ut och inneharingller inte allt som det goumlr paring den

japanska sidan Det aumlr som om den stoumlrsta maringlgruppen aumlr foumlr japanska turister och som

om de skulle inte bry sig om turister fraringn utlandet

Utoumlver det har de ocksaring byggt en mobilsida foumlr den japanska webbsidan Varfoumlr satsa bara

paring den japanska sidan och inte den engelska sidan naumlr maringlgruppen aumlr hela vaumlrlden

36

Figur 45 Mobil sidan paring Tokyo Skytree paring japanska

Vi lever i 2015 saring alla borde veta att det aumlr vaumlldigt viktig att ha en mobil webbplats som

erbjuder en bra anvaumlndarupplevelse paring alla spraringk som webbplatsen erbjuder Naumlr man har

sin sida paring flera spraringk och aumlndaring bestaumlmmer sig att bygga sidan ordentligt bara paring ett spraringk

kan anvaumlndarna faring en fel bild av foumlretaget I vaumlrsta fall kommer anvaumlndarna tycka att sidan

aumlr oparinglitligt och aringterkommer aldrig igen

Mobile first metoden aumlr daumlrfoumlr en mycket effektiv metod att bygga sin webbplats med

Man boumlrjar med att bygga sin webbplats fraringn den minsta skaumlrmen Man tvingas goumlra be-

slut om vad som ska absolut prioriteras Arbetsprocessen foumlr oss webbdesigners blir

mycket effektivare genom att foumlrst designa fraringn den minsta skaumlrmen och sedan foumlrflytta

oss till de stoumlrre skaumlrmarna Har man ett 6 kvadratmeters sovrum och foumlrsoumlker faring sin saumlng

skrivbord hylla klaumldskaringp och soffan att rymmas in aumlr det ganska utmanande Men naumlr

man boumlrjar med det mest utmanande i arbetsprocessen blir arbetet ocksaring mindre utma-

nande desto stoumlrre rum eller skaumlrm det blir (Wroblewski 2011)

37

5 909JP

909jp aumlr en elektronisk handel en moumlbelaffaumlr som saumlljer vaumlsterlaumlndska produkter Den

elektroniska butiken kommer att oumlppnas i Japan 2015 Deras foumlrvaumlntningar aumlr att faring in

en miljon dollar i foumlrsaumlljning per aringr I deras elektroniska moumlbelaffaumlr saumlljs bla stolar bord

soffor och lampor Maringlgruppen aumlr alla konsumenter mellan 18-60 aringringar

Japaner aumlr intresserade av vaumlsterlaumlndska produkter och livsstil men foumlr de flesta varor aumlr

designen knutna till deras egen kultur vilket goumlr dem mer intresserad Det aumlr ocksaring mycket

viktigt att ha sin hemsida paring japanska eftersom 99 av den japanska befolkningen foumlre-

drar att inte laumlsa inneharingllet paring andra spraringk (Khurana)

Japan aumlr ett land med vaumlrldens tredje stoumlrsta ekonomi paring 5 biljoner De har vaumlrldens ti-

onde stoumlrsta befolkning med ca 1271 miljoner invaringnare varav 70 av den totala befolk-

ningen anvaumlnder internet och 24 av dem anvaumlnder internet paring sin smarttelefon

(Khurana)

Viktigt med detta projekt aumlr att sikta aringt raumltt haringll och betjaumlna kunderna paring det baumlsta saumlttet

via webbplatsen Foumlr att kunna faringnga saring maringnga kunder som moumljligt aumlr det mycket viktigt

att designa en webbplats som aumlr anvaumlndarvaumlnlig stilig och laumltt att anvaumlnda (Wroblewski

2011)

Jag har daumlrfoumlr kommit underfund med att anvaumlnda Mobile first och Responsiv design

metoden foumlr att utveckla den mobila 909jp sidan Med tanke paring att det aumlr en Responsiv

design skall layouten paring den mobila versionen ocksaring passa in med de stoumlrre skaumlrmarna

naumlr sidan skalas upp Det aumlr dock viktigt poaumlngtera att jag endast kommer att koncentrera

mig paring den mobila designen och utveckla designen endast foumlr denna forskning

38

6 ANALYS AV DEN NYA DESIGNEN

Med hjaumllp av den tidigare designen paring 909jp och de kritiska punkterna jag har hittat under

forskningen har jag skapat en ny och foumlrbaumlttrad design av webbplatsen foumlr mobiler I det

haumlr kapitlet kommer jag att visa naringgra exempel paring den tidigare designen och jaumlmfoumlra den

med nya designen samt analysera arbetet

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger)

1 Call-to-action knapparna

Under hela arbetsprocessen har jag haft i minnet att navigeringar laumlnkar och knap-

parna ska vara tillraumlckligt stora att klicka paring I den tidigare designen har de stora

bilder paring kategorier vilket jag tycker aumlr en bra design att aringtervaumlnda

39

2 Soumlkfunktionen

Paring den tidigare versionen haumlr nedan ser man att soumlkfunktionen inte finns med

medan paring den nya designen ser man soumlkfunktionen genast naumlr man kommer till

sidan Som tidigare framfoumlrdes att soumlkfunktionen alltid ska synas saring att man laumltt

skall kunna soumlka fram produkterna Om soumlkfunktionen inte finns med eller aumlr svaringr

att hitta naumlr den behoumlvs kan det orsaka missnoumlje hos anvaumlndarna (Mehra Gagan

2015)

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp

Figur 63 Soumlkfunktionen paring den nya designen 909jp

40

3 Laumltt att navigera

Naumlr skaumlrmen aumlr liten aumlr det viktig att ha en enkel layout (Wroblewski 2011)

Jag har daumlrfor i den nya designen flyttat rdquoHemrdquo och rdquoBlogrdquo knapparna bort fraringn

den oumlvre menyn Hem-knappen finns nu i hamburgarmenyn paring vaumlnstra sidan me-

dan Blog-knappen finns i footer Detta goumlr att det ser mera organiserat ut

Figur 64 Gamla designen

Laringt oss foumlrflytta vidare till menyer foumlr kategorier Paring hemsidan har man tvaring alter-

nativ att naring kategorierna Foumlrsta aumlr den hamburgarmenyn knappen paring vaumlnstra si-

dan I menyn aumlr kategorierna indelade i fyra delar stolar lampor ergonomisk och

soffa amp middag Detta goumlr det laumltt och klart foumlr anvaumlndarna var produkterna finns

Eftersom vi bara har partiell uppmaumlrksamhet fraringn anvaumlndarna naumlr de aumlr paring sina

smarttelefoner har jag valt att saumltta in ikoner i menyn (Figur 65) Naumlr anvaumlndaren

bara anvaumlnder ena oumlgat foumlr att kolla paring mobilen och andra oumlgat foumlr naringgonting annat

ska den lilla skaumlrmen med webbplatsen kunna faringnga uppmaumlrksamheten samt un-

derlaumltta anvaumlndningen av webbplatsen (Wroblewski 2011)

41

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny

Andra menyn for kategorierna aumlr de fyra bilderna under Aeron chair slideshowen

Paring den tidigare designen ser man endast ett foumlnster av kategorierna som aumlr place-

rade i en kolumn som upprepas loggraumltt (Figur 66) Det haumlr goumlr att anvaumlndaren

maringste skrolla ner foumlr att se varenda kategori vilket kan orsaka obekvaumlmlighet Att

se flera kategorier paring samma skaumlrm sparar tid och anvaumlndaren kommer aumlven baumlttre

iharingg var sakerna finns Att ha bara rdquoenrdquo stor bild som syns paring skaumlrmen och vara

tvungen att skrolla ner foumlr att se naumlsta bild aumlr frustrerande Paring den nya designen

har jag tvaring rutor av kategorier bredvid varandra (Figur 66)

42

Figur 66 Kategorier paring den gamla designen (till vaumlnster) Kategorier paring den nya designen (till houmlger)

4 Ta det roliga ur shopping

Paring den nya designen straumlvar jag efter att erbjuda en bekvaumlm shopping-upplevelse

Naumlr anvaumlndarna besoumlker e-handeln med en smarttelefon foumlrvaumlntar hanhon sig

ocksaring att kunna ta del av allt inneharingll och goumlra jaumlmfoumlrelser med andra produkter

Jag har daumlrfoumlr i den nya designen pressat ihop laumlngden paring kolumnhoumljden som om-

ringar produkten Som resultat ser vi nu fyra produkter paring samma skaumlrm (Figur

67) I den tidigare designen ser vi en enda produkt paring en skaumlrm och foumlr att se

andra produkter maringste vi skrolla ner Paring det haumlr saumlttet har anvaumlndarna svaringrare att

jaumlmfoumlra produkterna (Laya 2014)

43

Figur 67 Tidigare produktsida (till vaumlnster) Ny produktsida (till houmlger)

I den tidigare designen ser vi ocksaring att det finns endast produktens bild produk-

tens namn koumlpvagnen och infoikonen Om man vill faring reda paring produktens inform-

ation maringste man klicka paring produktens bild eller paring infoikonen som foumlr oss direkt

till sjaumllva produktens sida Bara foumlr att man vill faring reda paring vad det aumlr foumlr produkt

foumlrs man vidare till en annan sida Det haumlr kan orsaka att kunden inte njuter totalt

av shoppingen och dessutom kan han inte jaumlmfoumlra produkterna naumlr han aumlr paring ka-

tegoriernas sida (Laya 2014)

Laringt oss hoppa vidare till den nya designen (Figur 68) Paring den nya designen har

jag satt in en kort detaljbeskrivning foumlr varje produkt Dessutom naumlr man klickar

paring infoikonen paring houmlgra sidan kommer man inte direkt till produktsidan utan det

kommer att dyka upp en inforuta som har en kort beskrivning paring produkten Om

anvaumlndaren aumlr intresserad av produkten kan han garing in till sjaumllva produktsida ge-

nom att klicka paring rdquoView productrdquo eller ocksaring paring produktbilden daumlr hanhon kan

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

19

25 Kritiska punkterna foumlr bra mobil design paring e-handel

Naumlr man handlar med en mindre skaumlrm aumlr det mera utmanande eftersom skaumlrmen aumlr liten

och anvaumlndarna brukar inte ha tillraumlckligt med taringlamod att sitta och soumlka naringgonting foumlr

laumlnge fraringn en liten skaumlrm Daumlrfoumlr aumlr det viktigt att veta vilka saker man boumlr beakta naumlr

man designar en mobil e-handel I det haumlr stycket kommer jag att lista upp sakerna man

boumlr veta naumlr man designar en mobil e-handel webbplats

Naumlr man handlar med en mindre skaumlrm aumlr det mera utmanande eftersom skaumlrmen aumlr liten

och anvaumlndarna brukar inte ha tillraumlckligt med taringlamod att sitta och soumlka naringgonting foumlr

laumlnge paring en liten skaumlrm Daumlrfoumlr aumlr det viktigt att veta vilka saker man boumlr beakta naumlr man

designar en mobil e-handel I det haumlr stycket kommer jag att lista upp kritiska saker man

boumlr veta naumlr man designar en mobil e-handel webbplats

1 Call-to-action knapparna foumlr smaring paring en mobilskaumlrm

Naumlr man designar webbsidor foumlr mobiler kan det ibland vara en utmaning att faring

allt att rymmas in Daumlrfoumlr brukar ocksaring webbdesigner minska de sk rdquocall to act-

ionrdquo knapparna Om anvaumlndaren maringste zooma in foumlr att klicka paring en knapp men

av misstag klickar paring en annan knapp kan det bli frustrerande foumlr dem och detta

leder sedan till att de laumlmnar sidan Daumlrfoumlr aumlr det mycket viktigt att designa knap-

parna och inneharingllet saring att anvaumlndarna laumltt naringr dem

2 Soumlkfunktionen ska alltid finnas med

Paring mobila e-handel webbplatser ska soumlkfunktionen alltid synas saring att man laumltt skall

kunna soumlka produkterna Laringt oss saumlga att kunden inte hittar produkten han soumlker

och vill anvaumlnda soumlkfunktionen Han letar och letar efter soumlkfunktionen utan re-

sultat Detta orsakar inte bara att kunden laumlmnar din sida men ocksaring kommer han

att beraumlttar det vidare aringt andra hur han upplevde din sida (Mehra 2015)

3 Laumltt att navigera

20

Det ska vara laumltt att navigera runt sidorna Anvaumlndarna ska veta var han aumlr och hur

han kommer vidare efter att han tex har valt produkten Menyerna foumlr katalo-

gerna ska vara laumltta att navigera Om menyerna foumlr katalogerna aumlr foumlrvirrande och

svaringra foumlr anvaumlndaren att hitta produkterna blir han laumltt irriterad Exemplar paring (fi-

gur 27) haumlr nedan visar att menyerna aumlr ganska foumlrvirrande paring vaumlnstra bilden me-

dan paring houmlgra sidan aumlr det klart och tydligt (Laya 2014)

Figur 27 Jaumlmfoumlrelse mellan en bra och daringlig navigation httpconversionxlcommake-mobile-convert

4 Ta de roliga ur shopping

Det vanligaste och stoumlrsta misstaget som de flesta foumlretag goumlr naumlr de designar foumlr

mobil e-handel aumlr att de foumlrsoumlker flytta kunderna fraringn shopping till koumlp Shopping

paring en stationaumlr dator goumlr det laumltt naumlr det oftast finns ett enormt antal produkter att

vaumllja mellan och det aumlr laumltt att blaumlddra runt Men foumlr mobiler aumlr det annat

Maringnga foumlretag foumlrsoumlker pressa ihop hela shopping-processen till smaring tabbar och

minska paring inneharingllet Som resultat kommer anvaumlndaren att kaumlnna sig paringtvingad

21

att goumlra snabba beslut paring inkoumlp Istaumlllet foumlr att ge anvaumlndarna en saringdan paringtvingad

upplevelse kan man istaumlllet locka anvaumlndarna med all information vi har att er-

bjuda

Det betyder inte att anvaumlndarna som besoumlker e-handeln med en smarttelefon inte

vill njuta av shoppingen saringsom de goumlr paring stationaumlra datorer Naumlr man designar en

mobil e-handel skall kunderna kunna faring njuta av shoppingen och jaumlmfoumlra mellan

olika produkter innan dem bestaumlmmer sig vilken produkt de vill koumlpa (Laya 2014)

ldquoBut we see many companies try to compress the whole shopping process into a

small number of taps The result is a mobile app or website that forces the user to

make a quick purchase decision rather than giving a great shopping experience

To the user it feels like the site switches from giving enticement to issuing de-

mandsrdquo

- Laya Peep 2014

5 Laringngsam uppladdningstid foumlr mobiler spelar en stor roll

Det aumlr mycket viktigt att haringlla sidstorleken saring liten som moumljligt saring att det aumlr snabbt

att ladda upp sidan

ldquoMobile users want to take quick action and also Google has reportedly started

including page speed for ranking websites in the search results so that makes it

even more important to have a lighter siterdquo

- Mehra Gagan 2015

Varingren 2014 rapporterade Radware (httpwwwradwarecomspring-sotu2014)

att majoriteten av besoumlkarna kommer att oumlverge webbplatsen efter att ha vaumlntat i

3 sekunder foumlr att ladda upp sidan (Laya 2014)

Om det finns mycket inneharingll paring en sida kan man som alternativ separera inne-

haringllet i olika flikar (Mehra 2015)

Jag har tagit ett exempel fraringn Amazoncom Paring produktsidan har ja valt en orange

vaumlska Foumlr att tex ytterligare laumlsa om produktbeskrivningen rdquoAbout this itemrdquo ser

22

jag en pil som aumlr paring houmlgra sidan (Figur 29) Naumlr jag trycker paring pilen eller laringdan

kommer jag till en annan sida daumlr jag kan laumlsa hela produktbeskrivningen (Figur

210) Paring det haumlr saumlttet inneharingller sidan all information man behoumlver men separe-

rade i olika flikar saring att det blir snabbare att ladda upp sidan

Figur 28 Produktsida paring amazoncom

23

Figur 29 Produktsida paring amazoncom

Figur 210 Produktsida paring amazoncom About this item

24

6 Misslyckade analyseringar av anvaumlndarna

Naumlr man bygger webbsidor aumlr det viktig att goumlra anvaumlndbarhetstest och analysera

kundernas beteende Hur anvaumlndarna kaumlnner sig naumlr de anvaumlnder sidan aumlr mycket

viktigt och avgoumlr hur bra din business kommer att rulla

Analyseringen aumlr den kritiska inputen foumlr designen Med analyseringen ser man

dels vilka mobila apparater anvaumlndarna anvaumlnder och om det aumlr naringgra svaringrigheter

och obekvaumlmligheter anvaumlndarna upplever vid anvaumlndningen Dessa faktorer aumlr

viktiga foumlr att saumlkerstaumllla om den mobila upplevelsen uppfyller behoven hos kon-

sumenterna Testet och analysen maringste goumlras kontinuerligt foumlr att vi skall kunna

saumlkerstaumllla att kunderna har det bekvaumlmt (Mehra 2015)

7 Mindre inneharingll foumlr mobilanvaumlndarna

E-handel webbplatser brukar goumlmma inneharingll foumlr att goumlra sidan mindre Sidan aumlr

i sjaumllva verket inte mindre men bara goumlmd foumlr anvaumlndarna som anvaumlnder sina

smarttelefoner Enligt Mehra Gagan aumlr det inte bra om det finns mindre inneharingll

foumlr mobilanvaumlndarna Oavsett med vilka enheter anvaumlndarna aumlr paring sidan boumlr det

finnas lika mycket inneharingll paring alla enheterna De flesta som handlar online brukar

aumlga flera enheter och med stor sannolikhet anvaumlnder de ocksaring andra enheter foumlr

att surfa Om inneharingllet inte ser likadant ut paring stationaumlra datorer och smarttelefo-

ner kan det orsaka daringlig anvaumlndarupplevelse foumlr anvaumlndaren Enligt Google an-

vaumlnder 90 av dem som handlar paring internet olika enheter Att begraumlnsa deras

anvaumlndning aumlr naringgonting som man boumlr undvika (Mehra 2015)

25

3 MOBILANPASSADE LOumlSNINGAR

Det finns maringnga olika loumlsningar att bygga sin webbplats med Det aumlr viktigt att komma

iharingg att mobila anvaumlndande oumlkar hela tiden Det staumlller nya krav paring webbdesign och an-

vaumlndargraumlnssnitt Anvaumlndarna foumlrvaumlntar sig idag att de ska kunna ta del av allt inneharingll paring

webben oavsett om de anvaumlnder en smarttelefon eller en surfplatta De mobilanpassade

loumlsningarna foumlr e-handel kan tex vara Responsiv design Adaptiv Design Mobilbutik

eller en mobil applikation

31 Adaptiv design

En adaptiv webbplats aumlr uppbyggd saring att den aumlr optimerad foumlr specifika skaumlrmstorlekar

Den anvaumlnder servern foumlr att upptaumlcka den enhet som anvaumlnds foumlr att visa webbplatsen

Byggande av webbplatsen med adaptiv metoden aumlr tidskraumlvande paring grund av behovet att

optimera sidan foumlr varje vald plattform front-end och back-end Innan man boumlrjar bygga

webbplatsen maringste man avgoumlra vilka alla plattformar webbplatsen kommer att optimeras

till Foumlrdel med adaptiv design aumlr att den har snabb uppladdningstid

rdquoCompared to Responsiv design adaptive web design is website-optimised for each

platform separately and makes use of the opportunities presented by the platform as

well as the models and functions It offers fast-loading pages due to the server detec-

tion device and browser sending data tailored for a particular devicerdquo

-Lubo Ruska 2013

Att vaumllja den raumltta loumlsningen handlar om att foumlrstaring vad maringlgruppen foumlrvaumlntar sig och vad

de behoumlver Eftersom foumlretaget 909jp inte aumlr en jaumltte stort foumlretag saringsom Ikea eller Ama-

zon som har oberaumlknat antal med produkter tycker jag att Responsiv design med Mobile

first metoden aumlr den mest effektiva metoden foumlr denna forskning

26

32 Responsiv design

Responsiv webbdesign aumlr ett av de populaumlraste saumltten att optimera en webbplats Re-

sponsiv webbdesign moumljliggoumlr att layouten foumlraumlndras beroende paring vilken skaumlrmstorlek

och skaumlrmupploumlsningen som anvaumlndarna har och beroende paring vilka funktioner som

webblaumlsaren stoumldjer (Responsive Design 2014)

Oberoende om anvaumlndarna anvaumlnder dator laumlsplatta eller sin mobiltelefon kommer sidan

att anpassa sig paring olika saumltt foumlr att anvaumlndarna vid alla tillfaumlllen ska ha en saring rik upplevelse

som moumljligt Man kan saumlga att en webbsida paring mindre skaumlrmar aumlr med ett annat ord en

krympande version av den stoumlrre skaumlrmstorleken

Inneharingllet saringsom kolumner och bilder paring webbsidan kommer automatiskt att anpassas

beroende paring skaumlrmstorleken Och detta aumlr paring grund av Grid systemet Allt inneharingll skall

haringllas inom ett Grid system Grid systemet skall skydda allt fraringn att bryta samman naumlr

sidan anvaumlnds paring olika skaumlrmstorlekar

Det finns 11 olika Grid storlekar tvaring kolumner tre kolumner fyra kolumner fem kolum-

ner sex kolumner sju kolumner aringtta kolumner nio kolumner tio kolumner 11 kolumner

och 12 kolumner Som exempel visar jag en figur av 12 kolumners Grid system (Swan

2014)

27

Figur 31 Ett exempel paring Grid system av 5 olika skaumlrmstorlekar (Phil Swan 2014)

Responsiv webbdesign fungerar med hjaumllp av HTML5 CSS media Query och Java-

Script Det bygger paring att webbutvecklare istaumlllet foumlr exakta storlekar maumltt i pixlar anger

sidelements storlekar i procent i jaumlmfoumlrelse med skaumlrmens storlek

Naumlr sidelementens storlekar aumlr i procent goumlr det att sidan blir flexibel och den anpassas

efter webblaumlsarens storlek medan fasta pixlar ger en scrollbar (rull-list) (Responsive De-

sign 2014)

33 Varfoumlr Responsiv design

Foumlrdelar med Responsiv design aumlr att den erbjuder en bra anvaumlndarupplevelse foumlr olika

enheter och skaumlrmstorlekar Tack vare den Responsiva designen har webbredaktoumlrer laumlt-

tare att hantera inneharingllet eftersom de bara har en version att hantera Ur en SEO synvin-

kel fungerar Responsiv design baumlttre eftersom den koncentrerar inneharingllet istaumlllet foumlr att

vattna ur det med maringnga URL foumlr samma inneharingll

28

Med en Responsiv design aumlr en webbplats laumlttare att hantera Att ha flera olika versioner

av en webbplats innebaumlr mera arbete Flera olika versioner av en webbplats innebaumlr sepa-

rata sidor att redigera och separata insatser foumlr soumlkmotoroptimering och separata soumlkmo-

torkampanjer Daumlrfoumlr aumlr det en stor foumlrdel att bygga en webbplats med den Responsiva

metoden

Med en Responsiv design kaumlnner anvaumlndarna baumlttre igen sidan baringde paring stationaumlra datorer

och mobiltelefoner Bygger man specifika webbplatser foumlr mobiler och surfplattor kan

det laumltt haumlnda att det blir olika information paring webbplatserna och att de struktureras olika

Laringt oss foumlrestaumllla oss att naringgon anvaumlnder sin mobiltelefon paring lunchen foumlr att leta efter en

flygbiljett fraringn Helsingfors till Tokyo Personen hittar en webbplats som har bra erbju-

dande och bestaumlmmer sig foumlr att fortsaumltta kolla naumlr han eller hon kommer hem Naumlr per-

sonen har kommit hem anvaumlnder hen datorn istaumlllet foumlr mobilen Om webbplatsen som

personen kollade paring lunchpausen var en Responsiv webbplats faringr personen en smidig och

bra upplevelse vid oumlvergaringngen fraringn den mobila webbplatsen till stationaumlr dator

(Lindahl 2014)

Det aumlr vaumlldigt viktigt att ha sin webbplats att optimerad till saring maringnga enheter som moumljligt

foumlr att ingen vet vilka kommer att vara framtidens enheter och daumlrfoumlr anses en webbplats

som anpassar sig till maringnga olika format vara den baumlsta loumlsningen Innan man kan boumlrja

med att designa en Responsiv webbplats maringste man veta vilka skaumlrmupploumlsningar och

storlekar det finns tillgaumlngliga och aumlr populaumlra idag Foumlr att kunna rikta till de olika skaumlr-

mupploumlsningarna med Media Queries har jag listat upp olika enheternas skaumlrmupploumls-

ningar i pixlar haumlr nedan i tabellen

ResolutionGrafisk array Enhet som anvaumlnder denna resolution skaumlrmstorlek i pixel-

taumltheten i pixlar

2880x1800 15-inch Apple MacBook Pro with Retina display

2560 x 1700 Google Chromebook Pixel

2560 x 1600 Samsung Google Nexus 10

13-inch Apple MacBook Pro with Retina display

29

2560 x 1440 27-inch Apple iMac 102 111 113 122 (Late 2009 -

2012)

1920 x 1080 HTC One Samsung

Sony Xperia Z amp Xperia ZL

Asus PadFone Infinity

Acer Aspire S5

Asus Zenbook Prime

1600 x 900 Apple Macbook Air

1366 x 768 Small desktoplaptop screen resolution

Asus VivoTab RT

Samsung N350

1280 x 1024 Standard desktop screen resolution

1280 x 800 Asus PadFone 2

Samsung Galaxy Note

Sony Xperia Tablet S

1280 x 720 Sony Xperia S

HTC Windows Phone 8X

HTC One mini

1136 x 640 Apple iPhone 5 5S amp 5C

Apple iPod Touch (5th generation)

960 x 640 Apple iPhone 4 amp 4S

Apple iPod Touch (4th generation)

854 x 480 Sony Xperia ray

Nokia N9

800 x 480 Nokia Lumia 510 amp 520

Samsung Galaxy I Galaxy S Galaxy S Plus Galaxy S Ad-

vance Galaxy SL Galaxy S Duos Galaxy Xcover 2 Galaxy

Beam Nexus S Captivate Glide amp Galaxy S III mini

HTC Desire X HTC Desire V Desire VC Desire VT De-

sire U amp Windows Phone 8S

30

LG Optimus 2X Optimus EX Optimus L5 II Optimus Q2

amp Optimus Black

T-Mobile G2x

Asus E600

620 x 480 Blackberry Bold 9900 amp Bold Touch 9930

Blackberry Torch 9810

LG Optimus Z

640 x 360 Sony Ericsson Vivaz amp Vivaz Pro

Nokia 500 amp 5800 XpressMusic

Nokia N8 N97 E7 and X6

480 x 320 Apple iPhone 3G amp 3GS

Samsung Galaxy Ace

320 x 240 Nokia E71

Blackberry Curve 9220 amp 9320

Sony Ericsson txt

Samsung Galaxy Y amp Galaxy Chat

Nokia Asha 501

Figur 32 Resolutions referenser paring olika enheter

31

4 VAD AumlR MOBILE FIRST

Mobile first metoden aumlr en metod och arbetsprocess foumlr webbdesigners som aumlr skapad av

Luke Wroblewski Naumlr man jobbar med ett projekt och designar strukturerar och imple-

menterar en webbplats aumlr Mobile first metoden man paringboumlrjar arbetet med Med metoden

menar Wroblewski att man foumlrst boumlrjar designa webbsidor fraringn de minsta enheterna

Figur 41 Mobile First att bygga webbsidan fraringn den minsta skaumlrmen till den stoumlrsta skaumlrmen

Wroblewski som har skapat Mobile First metoden understryker att metoden ska priorite-

ras daring man skapar anvaumlndarupplevelser

Det finns tre viktiga anledningar foumlr att utveckla foumlr Mobile First

Den foumlrbereder foumlr den stora utveckling och nya moumljligheter som uppkommer

inom det mobila omraringdet idag (836 av vaumlrldens befolkning anvaumlnder internet

paring sin smarttelefon 2015)

Den goumlr att vi blir tvungna att prioritera och fokusera varingrt inneharingll genom att ac-

ceptera de begraumlnsningar som aumlr foumlrenade med mobil design

32

och goumlr att vi kan leverera innovativa upplevelser genom att bygga utifraringn nya

funktioner som finns inbyggda i de mobila enheterna (bla GEO lokalisering)

En mobil webbplats behoumlver endast ha en mycket enkel layout och navigeringen ska vara

laumltt och effektiv

Naumlr man designar med Mobile first metoden tvingas man goumlra viktiga beslut om vad som

ska prioriteras Naumlr den optimerad design foumlr en liten skaumlrm visas paring en stoumlrre skaumlrm

kommer det att bli laumlttare att designa paring de stoumlrre skaumlrmarna Allt som ska goumlras aumlr daring

bara att fylla paring inneharingllet och designa saring att det aumlr grafiskt tilltalande och laumltt att hitta

inneharingllet (Wroblewski 2011)

41 Varfoumlr Mobile first

Vaumlrlden vi lever i idag aumlr inte mera som foumlr tio aringr sedan Allt runtom oss har utvecklats

speciellt mobiltelefonerna Tidigare anvaumlndes mobiltelefoner bara foumlr att skicka med-

delandet ringa och ta emot samtal Nu anvaumlnds den till foumlr att dels ta bilder video GPS

navigation foumlr vaumlgvisning och speciellt internetanvaumlndningen saringsom Google nyheter

Facebook Youtube och mycket mer Paring grund av det har ocksaring varingr livsstil foumlraumlndrats

Internetanvaumlndning idag har blivit allt vanligare Idag anvaumlnder vi naumltet i skolan paring jobbet

eller var och naumlr som helst bara man har en smarttelefon eller surfplatta och naumltet kopplat

Tidigare boumlrjade man bygga en webbplats fraringn den stoumlrsta skaumlrmen medan den mobila

sidan var en biprodukt Laringt oss saumlga att man har en webbplats med en rik grafisk layout

och ser stilig ut paring stationaumlra datorer Naumlr man skalar ner sidan foumlr att passa en mobilskaumlrm

kommer resultatet att vara en smaumlrta foumlr varingra oumlgon Paring den lilla mobilskaumlrmen kommer

det att vara olaumlsligt och svaringrt att anvaumlnda Foumlr att naring inneharingllet maringste du tom zooma in

och ut eller skrolla till houmlger och vaumlnster Det haumlr kommer att ge en negativ bild av ditt

foumlretag och anvaumlndarna kanske aldrig mera besoumlker din webbplats (Wroblewski 2011)

Ett bra exempel aumlr Tokyo Skytree webbplats som aumlnnu idag inte ha byggt in funktionalitet

och designen foumlr mindre skaumlrmupploumlsningar paring den engelska sidan

33

Tokyo Skytree aumlr vaumlrldens naumlst houmlgsta torn efter Burj Khalifa Tornet aumlr Japans houmlgsta

byggnadsverk med en houmljd paring 634 meter Den oumlppnades 22 maj 2012 och under det foumlrsta

aringret hade den 64 miljoner besoumlkare fraringn hela vaumlrlden Trots det har de laringtit bli att utveckla

den engelska webbsidan Paring bilden ser man att hemsidan ser exakt likadant ut paring stationaumlr

dator och paring mobilen

Figur 42 Hemsidan paring Tokyo Skytree paring stationaumlr datorskaumlrm

34

Figur 43 Hemsidan foumlr Tokyo Skytree Foumlrsta bilden visar hur det ser ut normalt Andra bilden visar naumlr man zoomar

in

Naumlr man foumlrsoumlker zooma in foumlr att laumlsa inneharingllet hoppar sidbalken (paring vaumlnstra sidan) paring

texten Det haumlr ger en mycket daringlig anvaumlndarupplevelse och kan ge fel bild av turistplat-

sen Ett annat fel paring sidan aumlr naumlr man vaumlljer spraringk till japanska ser sidan inte likadant ut

35

Figure 44 Hemsidan paring Tokyo Skytree paring japanska

Om du kan laumlsa japanska kommer du att undra varfoumlr det finns massor med information

och sidan ser mycket trevligare ut paring den japanska sidan Paring den internationella sidan

dvs engelska ser det inte lika trevligt ut och inneharingller inte allt som det goumlr paring den

japanska sidan Det aumlr som om den stoumlrsta maringlgruppen aumlr foumlr japanska turister och som

om de skulle inte bry sig om turister fraringn utlandet

Utoumlver det har de ocksaring byggt en mobilsida foumlr den japanska webbsidan Varfoumlr satsa bara

paring den japanska sidan och inte den engelska sidan naumlr maringlgruppen aumlr hela vaumlrlden

36

Figur 45 Mobil sidan paring Tokyo Skytree paring japanska

Vi lever i 2015 saring alla borde veta att det aumlr vaumlldigt viktig att ha en mobil webbplats som

erbjuder en bra anvaumlndarupplevelse paring alla spraringk som webbplatsen erbjuder Naumlr man har

sin sida paring flera spraringk och aumlndaring bestaumlmmer sig att bygga sidan ordentligt bara paring ett spraringk

kan anvaumlndarna faring en fel bild av foumlretaget I vaumlrsta fall kommer anvaumlndarna tycka att sidan

aumlr oparinglitligt och aringterkommer aldrig igen

Mobile first metoden aumlr daumlrfoumlr en mycket effektiv metod att bygga sin webbplats med

Man boumlrjar med att bygga sin webbplats fraringn den minsta skaumlrmen Man tvingas goumlra be-

slut om vad som ska absolut prioriteras Arbetsprocessen foumlr oss webbdesigners blir

mycket effektivare genom att foumlrst designa fraringn den minsta skaumlrmen och sedan foumlrflytta

oss till de stoumlrre skaumlrmarna Har man ett 6 kvadratmeters sovrum och foumlrsoumlker faring sin saumlng

skrivbord hylla klaumldskaringp och soffan att rymmas in aumlr det ganska utmanande Men naumlr

man boumlrjar med det mest utmanande i arbetsprocessen blir arbetet ocksaring mindre utma-

nande desto stoumlrre rum eller skaumlrm det blir (Wroblewski 2011)

37

5 909JP

909jp aumlr en elektronisk handel en moumlbelaffaumlr som saumlljer vaumlsterlaumlndska produkter Den

elektroniska butiken kommer att oumlppnas i Japan 2015 Deras foumlrvaumlntningar aumlr att faring in

en miljon dollar i foumlrsaumlljning per aringr I deras elektroniska moumlbelaffaumlr saumlljs bla stolar bord

soffor och lampor Maringlgruppen aumlr alla konsumenter mellan 18-60 aringringar

Japaner aumlr intresserade av vaumlsterlaumlndska produkter och livsstil men foumlr de flesta varor aumlr

designen knutna till deras egen kultur vilket goumlr dem mer intresserad Det aumlr ocksaring mycket

viktigt att ha sin hemsida paring japanska eftersom 99 av den japanska befolkningen foumlre-

drar att inte laumlsa inneharingllet paring andra spraringk (Khurana)

Japan aumlr ett land med vaumlrldens tredje stoumlrsta ekonomi paring 5 biljoner De har vaumlrldens ti-

onde stoumlrsta befolkning med ca 1271 miljoner invaringnare varav 70 av den totala befolk-

ningen anvaumlnder internet och 24 av dem anvaumlnder internet paring sin smarttelefon

(Khurana)

Viktigt med detta projekt aumlr att sikta aringt raumltt haringll och betjaumlna kunderna paring det baumlsta saumlttet

via webbplatsen Foumlr att kunna faringnga saring maringnga kunder som moumljligt aumlr det mycket viktigt

att designa en webbplats som aumlr anvaumlndarvaumlnlig stilig och laumltt att anvaumlnda (Wroblewski

2011)

Jag har daumlrfoumlr kommit underfund med att anvaumlnda Mobile first och Responsiv design

metoden foumlr att utveckla den mobila 909jp sidan Med tanke paring att det aumlr en Responsiv

design skall layouten paring den mobila versionen ocksaring passa in med de stoumlrre skaumlrmarna

naumlr sidan skalas upp Det aumlr dock viktigt poaumlngtera att jag endast kommer att koncentrera

mig paring den mobila designen och utveckla designen endast foumlr denna forskning

38

6 ANALYS AV DEN NYA DESIGNEN

Med hjaumllp av den tidigare designen paring 909jp och de kritiska punkterna jag har hittat under

forskningen har jag skapat en ny och foumlrbaumlttrad design av webbplatsen foumlr mobiler I det

haumlr kapitlet kommer jag att visa naringgra exempel paring den tidigare designen och jaumlmfoumlra den

med nya designen samt analysera arbetet

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger)

1 Call-to-action knapparna

Under hela arbetsprocessen har jag haft i minnet att navigeringar laumlnkar och knap-

parna ska vara tillraumlckligt stora att klicka paring I den tidigare designen har de stora

bilder paring kategorier vilket jag tycker aumlr en bra design att aringtervaumlnda

39

2 Soumlkfunktionen

Paring den tidigare versionen haumlr nedan ser man att soumlkfunktionen inte finns med

medan paring den nya designen ser man soumlkfunktionen genast naumlr man kommer till

sidan Som tidigare framfoumlrdes att soumlkfunktionen alltid ska synas saring att man laumltt

skall kunna soumlka fram produkterna Om soumlkfunktionen inte finns med eller aumlr svaringr

att hitta naumlr den behoumlvs kan det orsaka missnoumlje hos anvaumlndarna (Mehra Gagan

2015)

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp

Figur 63 Soumlkfunktionen paring den nya designen 909jp

40

3 Laumltt att navigera

Naumlr skaumlrmen aumlr liten aumlr det viktig att ha en enkel layout (Wroblewski 2011)

Jag har daumlrfor i den nya designen flyttat rdquoHemrdquo och rdquoBlogrdquo knapparna bort fraringn

den oumlvre menyn Hem-knappen finns nu i hamburgarmenyn paring vaumlnstra sidan me-

dan Blog-knappen finns i footer Detta goumlr att det ser mera organiserat ut

Figur 64 Gamla designen

Laringt oss foumlrflytta vidare till menyer foumlr kategorier Paring hemsidan har man tvaring alter-

nativ att naring kategorierna Foumlrsta aumlr den hamburgarmenyn knappen paring vaumlnstra si-

dan I menyn aumlr kategorierna indelade i fyra delar stolar lampor ergonomisk och

soffa amp middag Detta goumlr det laumltt och klart foumlr anvaumlndarna var produkterna finns

Eftersom vi bara har partiell uppmaumlrksamhet fraringn anvaumlndarna naumlr de aumlr paring sina

smarttelefoner har jag valt att saumltta in ikoner i menyn (Figur 65) Naumlr anvaumlndaren

bara anvaumlnder ena oumlgat foumlr att kolla paring mobilen och andra oumlgat foumlr naringgonting annat

ska den lilla skaumlrmen med webbplatsen kunna faringnga uppmaumlrksamheten samt un-

derlaumltta anvaumlndningen av webbplatsen (Wroblewski 2011)

41

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny

Andra menyn for kategorierna aumlr de fyra bilderna under Aeron chair slideshowen

Paring den tidigare designen ser man endast ett foumlnster av kategorierna som aumlr place-

rade i en kolumn som upprepas loggraumltt (Figur 66) Det haumlr goumlr att anvaumlndaren

maringste skrolla ner foumlr att se varenda kategori vilket kan orsaka obekvaumlmlighet Att

se flera kategorier paring samma skaumlrm sparar tid och anvaumlndaren kommer aumlven baumlttre

iharingg var sakerna finns Att ha bara rdquoenrdquo stor bild som syns paring skaumlrmen och vara

tvungen att skrolla ner foumlr att se naumlsta bild aumlr frustrerande Paring den nya designen

har jag tvaring rutor av kategorier bredvid varandra (Figur 66)

42

Figur 66 Kategorier paring den gamla designen (till vaumlnster) Kategorier paring den nya designen (till houmlger)

4 Ta det roliga ur shopping

Paring den nya designen straumlvar jag efter att erbjuda en bekvaumlm shopping-upplevelse

Naumlr anvaumlndarna besoumlker e-handeln med en smarttelefon foumlrvaumlntar hanhon sig

ocksaring att kunna ta del av allt inneharingll och goumlra jaumlmfoumlrelser med andra produkter

Jag har daumlrfoumlr i den nya designen pressat ihop laumlngden paring kolumnhoumljden som om-

ringar produkten Som resultat ser vi nu fyra produkter paring samma skaumlrm (Figur

67) I den tidigare designen ser vi en enda produkt paring en skaumlrm och foumlr att se

andra produkter maringste vi skrolla ner Paring det haumlr saumlttet har anvaumlndarna svaringrare att

jaumlmfoumlra produkterna (Laya 2014)

43

Figur 67 Tidigare produktsida (till vaumlnster) Ny produktsida (till houmlger)

I den tidigare designen ser vi ocksaring att det finns endast produktens bild produk-

tens namn koumlpvagnen och infoikonen Om man vill faring reda paring produktens inform-

ation maringste man klicka paring produktens bild eller paring infoikonen som foumlr oss direkt

till sjaumllva produktens sida Bara foumlr att man vill faring reda paring vad det aumlr foumlr produkt

foumlrs man vidare till en annan sida Det haumlr kan orsaka att kunden inte njuter totalt

av shoppingen och dessutom kan han inte jaumlmfoumlra produkterna naumlr han aumlr paring ka-

tegoriernas sida (Laya 2014)

Laringt oss hoppa vidare till den nya designen (Figur 68) Paring den nya designen har

jag satt in en kort detaljbeskrivning foumlr varje produkt Dessutom naumlr man klickar

paring infoikonen paring houmlgra sidan kommer man inte direkt till produktsidan utan det

kommer att dyka upp en inforuta som har en kort beskrivning paring produkten Om

anvaumlndaren aumlr intresserad av produkten kan han garing in till sjaumllva produktsida ge-

nom att klicka paring rdquoView productrdquo eller ocksaring paring produktbilden daumlr hanhon kan

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

20

Det ska vara laumltt att navigera runt sidorna Anvaumlndarna ska veta var han aumlr och hur

han kommer vidare efter att han tex har valt produkten Menyerna foumlr katalo-

gerna ska vara laumltta att navigera Om menyerna foumlr katalogerna aumlr foumlrvirrande och

svaringra foumlr anvaumlndaren att hitta produkterna blir han laumltt irriterad Exemplar paring (fi-

gur 27) haumlr nedan visar att menyerna aumlr ganska foumlrvirrande paring vaumlnstra bilden me-

dan paring houmlgra sidan aumlr det klart och tydligt (Laya 2014)

Figur 27 Jaumlmfoumlrelse mellan en bra och daringlig navigation httpconversionxlcommake-mobile-convert

4 Ta de roliga ur shopping

Det vanligaste och stoumlrsta misstaget som de flesta foumlretag goumlr naumlr de designar foumlr

mobil e-handel aumlr att de foumlrsoumlker flytta kunderna fraringn shopping till koumlp Shopping

paring en stationaumlr dator goumlr det laumltt naumlr det oftast finns ett enormt antal produkter att

vaumllja mellan och det aumlr laumltt att blaumlddra runt Men foumlr mobiler aumlr det annat

Maringnga foumlretag foumlrsoumlker pressa ihop hela shopping-processen till smaring tabbar och

minska paring inneharingllet Som resultat kommer anvaumlndaren att kaumlnna sig paringtvingad

21

att goumlra snabba beslut paring inkoumlp Istaumlllet foumlr att ge anvaumlndarna en saringdan paringtvingad

upplevelse kan man istaumlllet locka anvaumlndarna med all information vi har att er-

bjuda

Det betyder inte att anvaumlndarna som besoumlker e-handeln med en smarttelefon inte

vill njuta av shoppingen saringsom de goumlr paring stationaumlra datorer Naumlr man designar en

mobil e-handel skall kunderna kunna faring njuta av shoppingen och jaumlmfoumlra mellan

olika produkter innan dem bestaumlmmer sig vilken produkt de vill koumlpa (Laya 2014)

ldquoBut we see many companies try to compress the whole shopping process into a

small number of taps The result is a mobile app or website that forces the user to

make a quick purchase decision rather than giving a great shopping experience

To the user it feels like the site switches from giving enticement to issuing de-

mandsrdquo

- Laya Peep 2014

5 Laringngsam uppladdningstid foumlr mobiler spelar en stor roll

Det aumlr mycket viktigt att haringlla sidstorleken saring liten som moumljligt saring att det aumlr snabbt

att ladda upp sidan

ldquoMobile users want to take quick action and also Google has reportedly started

including page speed for ranking websites in the search results so that makes it

even more important to have a lighter siterdquo

- Mehra Gagan 2015

Varingren 2014 rapporterade Radware (httpwwwradwarecomspring-sotu2014)

att majoriteten av besoumlkarna kommer att oumlverge webbplatsen efter att ha vaumlntat i

3 sekunder foumlr att ladda upp sidan (Laya 2014)

Om det finns mycket inneharingll paring en sida kan man som alternativ separera inne-

haringllet i olika flikar (Mehra 2015)

Jag har tagit ett exempel fraringn Amazoncom Paring produktsidan har ja valt en orange

vaumlska Foumlr att tex ytterligare laumlsa om produktbeskrivningen rdquoAbout this itemrdquo ser

22

jag en pil som aumlr paring houmlgra sidan (Figur 29) Naumlr jag trycker paring pilen eller laringdan

kommer jag till en annan sida daumlr jag kan laumlsa hela produktbeskrivningen (Figur

210) Paring det haumlr saumlttet inneharingller sidan all information man behoumlver men separe-

rade i olika flikar saring att det blir snabbare att ladda upp sidan

Figur 28 Produktsida paring amazoncom

23

Figur 29 Produktsida paring amazoncom

Figur 210 Produktsida paring amazoncom About this item

24

6 Misslyckade analyseringar av anvaumlndarna

Naumlr man bygger webbsidor aumlr det viktig att goumlra anvaumlndbarhetstest och analysera

kundernas beteende Hur anvaumlndarna kaumlnner sig naumlr de anvaumlnder sidan aumlr mycket

viktigt och avgoumlr hur bra din business kommer att rulla

Analyseringen aumlr den kritiska inputen foumlr designen Med analyseringen ser man

dels vilka mobila apparater anvaumlndarna anvaumlnder och om det aumlr naringgra svaringrigheter

och obekvaumlmligheter anvaumlndarna upplever vid anvaumlndningen Dessa faktorer aumlr

viktiga foumlr att saumlkerstaumllla om den mobila upplevelsen uppfyller behoven hos kon-

sumenterna Testet och analysen maringste goumlras kontinuerligt foumlr att vi skall kunna

saumlkerstaumllla att kunderna har det bekvaumlmt (Mehra 2015)

7 Mindre inneharingll foumlr mobilanvaumlndarna

E-handel webbplatser brukar goumlmma inneharingll foumlr att goumlra sidan mindre Sidan aumlr

i sjaumllva verket inte mindre men bara goumlmd foumlr anvaumlndarna som anvaumlnder sina

smarttelefoner Enligt Mehra Gagan aumlr det inte bra om det finns mindre inneharingll

foumlr mobilanvaumlndarna Oavsett med vilka enheter anvaumlndarna aumlr paring sidan boumlr det

finnas lika mycket inneharingll paring alla enheterna De flesta som handlar online brukar

aumlga flera enheter och med stor sannolikhet anvaumlnder de ocksaring andra enheter foumlr

att surfa Om inneharingllet inte ser likadant ut paring stationaumlra datorer och smarttelefo-

ner kan det orsaka daringlig anvaumlndarupplevelse foumlr anvaumlndaren Enligt Google an-

vaumlnder 90 av dem som handlar paring internet olika enheter Att begraumlnsa deras

anvaumlndning aumlr naringgonting som man boumlr undvika (Mehra 2015)

25

3 MOBILANPASSADE LOumlSNINGAR

Det finns maringnga olika loumlsningar att bygga sin webbplats med Det aumlr viktigt att komma

iharingg att mobila anvaumlndande oumlkar hela tiden Det staumlller nya krav paring webbdesign och an-

vaumlndargraumlnssnitt Anvaumlndarna foumlrvaumlntar sig idag att de ska kunna ta del av allt inneharingll paring

webben oavsett om de anvaumlnder en smarttelefon eller en surfplatta De mobilanpassade

loumlsningarna foumlr e-handel kan tex vara Responsiv design Adaptiv Design Mobilbutik

eller en mobil applikation

31 Adaptiv design

En adaptiv webbplats aumlr uppbyggd saring att den aumlr optimerad foumlr specifika skaumlrmstorlekar

Den anvaumlnder servern foumlr att upptaumlcka den enhet som anvaumlnds foumlr att visa webbplatsen

Byggande av webbplatsen med adaptiv metoden aumlr tidskraumlvande paring grund av behovet att

optimera sidan foumlr varje vald plattform front-end och back-end Innan man boumlrjar bygga

webbplatsen maringste man avgoumlra vilka alla plattformar webbplatsen kommer att optimeras

till Foumlrdel med adaptiv design aumlr att den har snabb uppladdningstid

rdquoCompared to Responsiv design adaptive web design is website-optimised for each

platform separately and makes use of the opportunities presented by the platform as

well as the models and functions It offers fast-loading pages due to the server detec-

tion device and browser sending data tailored for a particular devicerdquo

-Lubo Ruska 2013

Att vaumllja den raumltta loumlsningen handlar om att foumlrstaring vad maringlgruppen foumlrvaumlntar sig och vad

de behoumlver Eftersom foumlretaget 909jp inte aumlr en jaumltte stort foumlretag saringsom Ikea eller Ama-

zon som har oberaumlknat antal med produkter tycker jag att Responsiv design med Mobile

first metoden aumlr den mest effektiva metoden foumlr denna forskning

26

32 Responsiv design

Responsiv webbdesign aumlr ett av de populaumlraste saumltten att optimera en webbplats Re-

sponsiv webbdesign moumljliggoumlr att layouten foumlraumlndras beroende paring vilken skaumlrmstorlek

och skaumlrmupploumlsningen som anvaumlndarna har och beroende paring vilka funktioner som

webblaumlsaren stoumldjer (Responsive Design 2014)

Oberoende om anvaumlndarna anvaumlnder dator laumlsplatta eller sin mobiltelefon kommer sidan

att anpassa sig paring olika saumltt foumlr att anvaumlndarna vid alla tillfaumlllen ska ha en saring rik upplevelse

som moumljligt Man kan saumlga att en webbsida paring mindre skaumlrmar aumlr med ett annat ord en

krympande version av den stoumlrre skaumlrmstorleken

Inneharingllet saringsom kolumner och bilder paring webbsidan kommer automatiskt att anpassas

beroende paring skaumlrmstorleken Och detta aumlr paring grund av Grid systemet Allt inneharingll skall

haringllas inom ett Grid system Grid systemet skall skydda allt fraringn att bryta samman naumlr

sidan anvaumlnds paring olika skaumlrmstorlekar

Det finns 11 olika Grid storlekar tvaring kolumner tre kolumner fyra kolumner fem kolum-

ner sex kolumner sju kolumner aringtta kolumner nio kolumner tio kolumner 11 kolumner

och 12 kolumner Som exempel visar jag en figur av 12 kolumners Grid system (Swan

2014)

27

Figur 31 Ett exempel paring Grid system av 5 olika skaumlrmstorlekar (Phil Swan 2014)

Responsiv webbdesign fungerar med hjaumllp av HTML5 CSS media Query och Java-

Script Det bygger paring att webbutvecklare istaumlllet foumlr exakta storlekar maumltt i pixlar anger

sidelements storlekar i procent i jaumlmfoumlrelse med skaumlrmens storlek

Naumlr sidelementens storlekar aumlr i procent goumlr det att sidan blir flexibel och den anpassas

efter webblaumlsarens storlek medan fasta pixlar ger en scrollbar (rull-list) (Responsive De-

sign 2014)

33 Varfoumlr Responsiv design

Foumlrdelar med Responsiv design aumlr att den erbjuder en bra anvaumlndarupplevelse foumlr olika

enheter och skaumlrmstorlekar Tack vare den Responsiva designen har webbredaktoumlrer laumlt-

tare att hantera inneharingllet eftersom de bara har en version att hantera Ur en SEO synvin-

kel fungerar Responsiv design baumlttre eftersom den koncentrerar inneharingllet istaumlllet foumlr att

vattna ur det med maringnga URL foumlr samma inneharingll

28

Med en Responsiv design aumlr en webbplats laumlttare att hantera Att ha flera olika versioner

av en webbplats innebaumlr mera arbete Flera olika versioner av en webbplats innebaumlr sepa-

rata sidor att redigera och separata insatser foumlr soumlkmotoroptimering och separata soumlkmo-

torkampanjer Daumlrfoumlr aumlr det en stor foumlrdel att bygga en webbplats med den Responsiva

metoden

Med en Responsiv design kaumlnner anvaumlndarna baumlttre igen sidan baringde paring stationaumlra datorer

och mobiltelefoner Bygger man specifika webbplatser foumlr mobiler och surfplattor kan

det laumltt haumlnda att det blir olika information paring webbplatserna och att de struktureras olika

Laringt oss foumlrestaumllla oss att naringgon anvaumlnder sin mobiltelefon paring lunchen foumlr att leta efter en

flygbiljett fraringn Helsingfors till Tokyo Personen hittar en webbplats som har bra erbju-

dande och bestaumlmmer sig foumlr att fortsaumltta kolla naumlr han eller hon kommer hem Naumlr per-

sonen har kommit hem anvaumlnder hen datorn istaumlllet foumlr mobilen Om webbplatsen som

personen kollade paring lunchpausen var en Responsiv webbplats faringr personen en smidig och

bra upplevelse vid oumlvergaringngen fraringn den mobila webbplatsen till stationaumlr dator

(Lindahl 2014)

Det aumlr vaumlldigt viktigt att ha sin webbplats att optimerad till saring maringnga enheter som moumljligt

foumlr att ingen vet vilka kommer att vara framtidens enheter och daumlrfoumlr anses en webbplats

som anpassar sig till maringnga olika format vara den baumlsta loumlsningen Innan man kan boumlrja

med att designa en Responsiv webbplats maringste man veta vilka skaumlrmupploumlsningar och

storlekar det finns tillgaumlngliga och aumlr populaumlra idag Foumlr att kunna rikta till de olika skaumlr-

mupploumlsningarna med Media Queries har jag listat upp olika enheternas skaumlrmupploumls-

ningar i pixlar haumlr nedan i tabellen

ResolutionGrafisk array Enhet som anvaumlnder denna resolution skaumlrmstorlek i pixel-

taumltheten i pixlar

2880x1800 15-inch Apple MacBook Pro with Retina display

2560 x 1700 Google Chromebook Pixel

2560 x 1600 Samsung Google Nexus 10

13-inch Apple MacBook Pro with Retina display

29

2560 x 1440 27-inch Apple iMac 102 111 113 122 (Late 2009 -

2012)

1920 x 1080 HTC One Samsung

Sony Xperia Z amp Xperia ZL

Asus PadFone Infinity

Acer Aspire S5

Asus Zenbook Prime

1600 x 900 Apple Macbook Air

1366 x 768 Small desktoplaptop screen resolution

Asus VivoTab RT

Samsung N350

1280 x 1024 Standard desktop screen resolution

1280 x 800 Asus PadFone 2

Samsung Galaxy Note

Sony Xperia Tablet S

1280 x 720 Sony Xperia S

HTC Windows Phone 8X

HTC One mini

1136 x 640 Apple iPhone 5 5S amp 5C

Apple iPod Touch (5th generation)

960 x 640 Apple iPhone 4 amp 4S

Apple iPod Touch (4th generation)

854 x 480 Sony Xperia ray

Nokia N9

800 x 480 Nokia Lumia 510 amp 520

Samsung Galaxy I Galaxy S Galaxy S Plus Galaxy S Ad-

vance Galaxy SL Galaxy S Duos Galaxy Xcover 2 Galaxy

Beam Nexus S Captivate Glide amp Galaxy S III mini

HTC Desire X HTC Desire V Desire VC Desire VT De-

sire U amp Windows Phone 8S

30

LG Optimus 2X Optimus EX Optimus L5 II Optimus Q2

amp Optimus Black

T-Mobile G2x

Asus E600

620 x 480 Blackberry Bold 9900 amp Bold Touch 9930

Blackberry Torch 9810

LG Optimus Z

640 x 360 Sony Ericsson Vivaz amp Vivaz Pro

Nokia 500 amp 5800 XpressMusic

Nokia N8 N97 E7 and X6

480 x 320 Apple iPhone 3G amp 3GS

Samsung Galaxy Ace

320 x 240 Nokia E71

Blackberry Curve 9220 amp 9320

Sony Ericsson txt

Samsung Galaxy Y amp Galaxy Chat

Nokia Asha 501

Figur 32 Resolutions referenser paring olika enheter

31

4 VAD AumlR MOBILE FIRST

Mobile first metoden aumlr en metod och arbetsprocess foumlr webbdesigners som aumlr skapad av

Luke Wroblewski Naumlr man jobbar med ett projekt och designar strukturerar och imple-

menterar en webbplats aumlr Mobile first metoden man paringboumlrjar arbetet med Med metoden

menar Wroblewski att man foumlrst boumlrjar designa webbsidor fraringn de minsta enheterna

Figur 41 Mobile First att bygga webbsidan fraringn den minsta skaumlrmen till den stoumlrsta skaumlrmen

Wroblewski som har skapat Mobile First metoden understryker att metoden ska priorite-

ras daring man skapar anvaumlndarupplevelser

Det finns tre viktiga anledningar foumlr att utveckla foumlr Mobile First

Den foumlrbereder foumlr den stora utveckling och nya moumljligheter som uppkommer

inom det mobila omraringdet idag (836 av vaumlrldens befolkning anvaumlnder internet

paring sin smarttelefon 2015)

Den goumlr att vi blir tvungna att prioritera och fokusera varingrt inneharingll genom att ac-

ceptera de begraumlnsningar som aumlr foumlrenade med mobil design

32

och goumlr att vi kan leverera innovativa upplevelser genom att bygga utifraringn nya

funktioner som finns inbyggda i de mobila enheterna (bla GEO lokalisering)

En mobil webbplats behoumlver endast ha en mycket enkel layout och navigeringen ska vara

laumltt och effektiv

Naumlr man designar med Mobile first metoden tvingas man goumlra viktiga beslut om vad som

ska prioriteras Naumlr den optimerad design foumlr en liten skaumlrm visas paring en stoumlrre skaumlrm

kommer det att bli laumlttare att designa paring de stoumlrre skaumlrmarna Allt som ska goumlras aumlr daring

bara att fylla paring inneharingllet och designa saring att det aumlr grafiskt tilltalande och laumltt att hitta

inneharingllet (Wroblewski 2011)

41 Varfoumlr Mobile first

Vaumlrlden vi lever i idag aumlr inte mera som foumlr tio aringr sedan Allt runtom oss har utvecklats

speciellt mobiltelefonerna Tidigare anvaumlndes mobiltelefoner bara foumlr att skicka med-

delandet ringa och ta emot samtal Nu anvaumlnds den till foumlr att dels ta bilder video GPS

navigation foumlr vaumlgvisning och speciellt internetanvaumlndningen saringsom Google nyheter

Facebook Youtube och mycket mer Paring grund av det har ocksaring varingr livsstil foumlraumlndrats

Internetanvaumlndning idag har blivit allt vanligare Idag anvaumlnder vi naumltet i skolan paring jobbet

eller var och naumlr som helst bara man har en smarttelefon eller surfplatta och naumltet kopplat

Tidigare boumlrjade man bygga en webbplats fraringn den stoumlrsta skaumlrmen medan den mobila

sidan var en biprodukt Laringt oss saumlga att man har en webbplats med en rik grafisk layout

och ser stilig ut paring stationaumlra datorer Naumlr man skalar ner sidan foumlr att passa en mobilskaumlrm

kommer resultatet att vara en smaumlrta foumlr varingra oumlgon Paring den lilla mobilskaumlrmen kommer

det att vara olaumlsligt och svaringrt att anvaumlnda Foumlr att naring inneharingllet maringste du tom zooma in

och ut eller skrolla till houmlger och vaumlnster Det haumlr kommer att ge en negativ bild av ditt

foumlretag och anvaumlndarna kanske aldrig mera besoumlker din webbplats (Wroblewski 2011)

Ett bra exempel aumlr Tokyo Skytree webbplats som aumlnnu idag inte ha byggt in funktionalitet

och designen foumlr mindre skaumlrmupploumlsningar paring den engelska sidan

33

Tokyo Skytree aumlr vaumlrldens naumlst houmlgsta torn efter Burj Khalifa Tornet aumlr Japans houmlgsta

byggnadsverk med en houmljd paring 634 meter Den oumlppnades 22 maj 2012 och under det foumlrsta

aringret hade den 64 miljoner besoumlkare fraringn hela vaumlrlden Trots det har de laringtit bli att utveckla

den engelska webbsidan Paring bilden ser man att hemsidan ser exakt likadant ut paring stationaumlr

dator och paring mobilen

Figur 42 Hemsidan paring Tokyo Skytree paring stationaumlr datorskaumlrm

34

Figur 43 Hemsidan foumlr Tokyo Skytree Foumlrsta bilden visar hur det ser ut normalt Andra bilden visar naumlr man zoomar

in

Naumlr man foumlrsoumlker zooma in foumlr att laumlsa inneharingllet hoppar sidbalken (paring vaumlnstra sidan) paring

texten Det haumlr ger en mycket daringlig anvaumlndarupplevelse och kan ge fel bild av turistplat-

sen Ett annat fel paring sidan aumlr naumlr man vaumlljer spraringk till japanska ser sidan inte likadant ut

35

Figure 44 Hemsidan paring Tokyo Skytree paring japanska

Om du kan laumlsa japanska kommer du att undra varfoumlr det finns massor med information

och sidan ser mycket trevligare ut paring den japanska sidan Paring den internationella sidan

dvs engelska ser det inte lika trevligt ut och inneharingller inte allt som det goumlr paring den

japanska sidan Det aumlr som om den stoumlrsta maringlgruppen aumlr foumlr japanska turister och som

om de skulle inte bry sig om turister fraringn utlandet

Utoumlver det har de ocksaring byggt en mobilsida foumlr den japanska webbsidan Varfoumlr satsa bara

paring den japanska sidan och inte den engelska sidan naumlr maringlgruppen aumlr hela vaumlrlden

36

Figur 45 Mobil sidan paring Tokyo Skytree paring japanska

Vi lever i 2015 saring alla borde veta att det aumlr vaumlldigt viktig att ha en mobil webbplats som

erbjuder en bra anvaumlndarupplevelse paring alla spraringk som webbplatsen erbjuder Naumlr man har

sin sida paring flera spraringk och aumlndaring bestaumlmmer sig att bygga sidan ordentligt bara paring ett spraringk

kan anvaumlndarna faring en fel bild av foumlretaget I vaumlrsta fall kommer anvaumlndarna tycka att sidan

aumlr oparinglitligt och aringterkommer aldrig igen

Mobile first metoden aumlr daumlrfoumlr en mycket effektiv metod att bygga sin webbplats med

Man boumlrjar med att bygga sin webbplats fraringn den minsta skaumlrmen Man tvingas goumlra be-

slut om vad som ska absolut prioriteras Arbetsprocessen foumlr oss webbdesigners blir

mycket effektivare genom att foumlrst designa fraringn den minsta skaumlrmen och sedan foumlrflytta

oss till de stoumlrre skaumlrmarna Har man ett 6 kvadratmeters sovrum och foumlrsoumlker faring sin saumlng

skrivbord hylla klaumldskaringp och soffan att rymmas in aumlr det ganska utmanande Men naumlr

man boumlrjar med det mest utmanande i arbetsprocessen blir arbetet ocksaring mindre utma-

nande desto stoumlrre rum eller skaumlrm det blir (Wroblewski 2011)

37

5 909JP

909jp aumlr en elektronisk handel en moumlbelaffaumlr som saumlljer vaumlsterlaumlndska produkter Den

elektroniska butiken kommer att oumlppnas i Japan 2015 Deras foumlrvaumlntningar aumlr att faring in

en miljon dollar i foumlrsaumlljning per aringr I deras elektroniska moumlbelaffaumlr saumlljs bla stolar bord

soffor och lampor Maringlgruppen aumlr alla konsumenter mellan 18-60 aringringar

Japaner aumlr intresserade av vaumlsterlaumlndska produkter och livsstil men foumlr de flesta varor aumlr

designen knutna till deras egen kultur vilket goumlr dem mer intresserad Det aumlr ocksaring mycket

viktigt att ha sin hemsida paring japanska eftersom 99 av den japanska befolkningen foumlre-

drar att inte laumlsa inneharingllet paring andra spraringk (Khurana)

Japan aumlr ett land med vaumlrldens tredje stoumlrsta ekonomi paring 5 biljoner De har vaumlrldens ti-

onde stoumlrsta befolkning med ca 1271 miljoner invaringnare varav 70 av den totala befolk-

ningen anvaumlnder internet och 24 av dem anvaumlnder internet paring sin smarttelefon

(Khurana)

Viktigt med detta projekt aumlr att sikta aringt raumltt haringll och betjaumlna kunderna paring det baumlsta saumlttet

via webbplatsen Foumlr att kunna faringnga saring maringnga kunder som moumljligt aumlr det mycket viktigt

att designa en webbplats som aumlr anvaumlndarvaumlnlig stilig och laumltt att anvaumlnda (Wroblewski

2011)

Jag har daumlrfoumlr kommit underfund med att anvaumlnda Mobile first och Responsiv design

metoden foumlr att utveckla den mobila 909jp sidan Med tanke paring att det aumlr en Responsiv

design skall layouten paring den mobila versionen ocksaring passa in med de stoumlrre skaumlrmarna

naumlr sidan skalas upp Det aumlr dock viktigt poaumlngtera att jag endast kommer att koncentrera

mig paring den mobila designen och utveckla designen endast foumlr denna forskning

38

6 ANALYS AV DEN NYA DESIGNEN

Med hjaumllp av den tidigare designen paring 909jp och de kritiska punkterna jag har hittat under

forskningen har jag skapat en ny och foumlrbaumlttrad design av webbplatsen foumlr mobiler I det

haumlr kapitlet kommer jag att visa naringgra exempel paring den tidigare designen och jaumlmfoumlra den

med nya designen samt analysera arbetet

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger)

1 Call-to-action knapparna

Under hela arbetsprocessen har jag haft i minnet att navigeringar laumlnkar och knap-

parna ska vara tillraumlckligt stora att klicka paring I den tidigare designen har de stora

bilder paring kategorier vilket jag tycker aumlr en bra design att aringtervaumlnda

39

2 Soumlkfunktionen

Paring den tidigare versionen haumlr nedan ser man att soumlkfunktionen inte finns med

medan paring den nya designen ser man soumlkfunktionen genast naumlr man kommer till

sidan Som tidigare framfoumlrdes att soumlkfunktionen alltid ska synas saring att man laumltt

skall kunna soumlka fram produkterna Om soumlkfunktionen inte finns med eller aumlr svaringr

att hitta naumlr den behoumlvs kan det orsaka missnoumlje hos anvaumlndarna (Mehra Gagan

2015)

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp

Figur 63 Soumlkfunktionen paring den nya designen 909jp

40

3 Laumltt att navigera

Naumlr skaumlrmen aumlr liten aumlr det viktig att ha en enkel layout (Wroblewski 2011)

Jag har daumlrfor i den nya designen flyttat rdquoHemrdquo och rdquoBlogrdquo knapparna bort fraringn

den oumlvre menyn Hem-knappen finns nu i hamburgarmenyn paring vaumlnstra sidan me-

dan Blog-knappen finns i footer Detta goumlr att det ser mera organiserat ut

Figur 64 Gamla designen

Laringt oss foumlrflytta vidare till menyer foumlr kategorier Paring hemsidan har man tvaring alter-

nativ att naring kategorierna Foumlrsta aumlr den hamburgarmenyn knappen paring vaumlnstra si-

dan I menyn aumlr kategorierna indelade i fyra delar stolar lampor ergonomisk och

soffa amp middag Detta goumlr det laumltt och klart foumlr anvaumlndarna var produkterna finns

Eftersom vi bara har partiell uppmaumlrksamhet fraringn anvaumlndarna naumlr de aumlr paring sina

smarttelefoner har jag valt att saumltta in ikoner i menyn (Figur 65) Naumlr anvaumlndaren

bara anvaumlnder ena oumlgat foumlr att kolla paring mobilen och andra oumlgat foumlr naringgonting annat

ska den lilla skaumlrmen med webbplatsen kunna faringnga uppmaumlrksamheten samt un-

derlaumltta anvaumlndningen av webbplatsen (Wroblewski 2011)

41

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny

Andra menyn for kategorierna aumlr de fyra bilderna under Aeron chair slideshowen

Paring den tidigare designen ser man endast ett foumlnster av kategorierna som aumlr place-

rade i en kolumn som upprepas loggraumltt (Figur 66) Det haumlr goumlr att anvaumlndaren

maringste skrolla ner foumlr att se varenda kategori vilket kan orsaka obekvaumlmlighet Att

se flera kategorier paring samma skaumlrm sparar tid och anvaumlndaren kommer aumlven baumlttre

iharingg var sakerna finns Att ha bara rdquoenrdquo stor bild som syns paring skaumlrmen och vara

tvungen att skrolla ner foumlr att se naumlsta bild aumlr frustrerande Paring den nya designen

har jag tvaring rutor av kategorier bredvid varandra (Figur 66)

42

Figur 66 Kategorier paring den gamla designen (till vaumlnster) Kategorier paring den nya designen (till houmlger)

4 Ta det roliga ur shopping

Paring den nya designen straumlvar jag efter att erbjuda en bekvaumlm shopping-upplevelse

Naumlr anvaumlndarna besoumlker e-handeln med en smarttelefon foumlrvaumlntar hanhon sig

ocksaring att kunna ta del av allt inneharingll och goumlra jaumlmfoumlrelser med andra produkter

Jag har daumlrfoumlr i den nya designen pressat ihop laumlngden paring kolumnhoumljden som om-

ringar produkten Som resultat ser vi nu fyra produkter paring samma skaumlrm (Figur

67) I den tidigare designen ser vi en enda produkt paring en skaumlrm och foumlr att se

andra produkter maringste vi skrolla ner Paring det haumlr saumlttet har anvaumlndarna svaringrare att

jaumlmfoumlra produkterna (Laya 2014)

43

Figur 67 Tidigare produktsida (till vaumlnster) Ny produktsida (till houmlger)

I den tidigare designen ser vi ocksaring att det finns endast produktens bild produk-

tens namn koumlpvagnen och infoikonen Om man vill faring reda paring produktens inform-

ation maringste man klicka paring produktens bild eller paring infoikonen som foumlr oss direkt

till sjaumllva produktens sida Bara foumlr att man vill faring reda paring vad det aumlr foumlr produkt

foumlrs man vidare till en annan sida Det haumlr kan orsaka att kunden inte njuter totalt

av shoppingen och dessutom kan han inte jaumlmfoumlra produkterna naumlr han aumlr paring ka-

tegoriernas sida (Laya 2014)

Laringt oss hoppa vidare till den nya designen (Figur 68) Paring den nya designen har

jag satt in en kort detaljbeskrivning foumlr varje produkt Dessutom naumlr man klickar

paring infoikonen paring houmlgra sidan kommer man inte direkt till produktsidan utan det

kommer att dyka upp en inforuta som har en kort beskrivning paring produkten Om

anvaumlndaren aumlr intresserad av produkten kan han garing in till sjaumllva produktsida ge-

nom att klicka paring rdquoView productrdquo eller ocksaring paring produktbilden daumlr hanhon kan

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

21

att goumlra snabba beslut paring inkoumlp Istaumlllet foumlr att ge anvaumlndarna en saringdan paringtvingad

upplevelse kan man istaumlllet locka anvaumlndarna med all information vi har att er-

bjuda

Det betyder inte att anvaumlndarna som besoumlker e-handeln med en smarttelefon inte

vill njuta av shoppingen saringsom de goumlr paring stationaumlra datorer Naumlr man designar en

mobil e-handel skall kunderna kunna faring njuta av shoppingen och jaumlmfoumlra mellan

olika produkter innan dem bestaumlmmer sig vilken produkt de vill koumlpa (Laya 2014)

ldquoBut we see many companies try to compress the whole shopping process into a

small number of taps The result is a mobile app or website that forces the user to

make a quick purchase decision rather than giving a great shopping experience

To the user it feels like the site switches from giving enticement to issuing de-

mandsrdquo

- Laya Peep 2014

5 Laringngsam uppladdningstid foumlr mobiler spelar en stor roll

Det aumlr mycket viktigt att haringlla sidstorleken saring liten som moumljligt saring att det aumlr snabbt

att ladda upp sidan

ldquoMobile users want to take quick action and also Google has reportedly started

including page speed for ranking websites in the search results so that makes it

even more important to have a lighter siterdquo

- Mehra Gagan 2015

Varingren 2014 rapporterade Radware (httpwwwradwarecomspring-sotu2014)

att majoriteten av besoumlkarna kommer att oumlverge webbplatsen efter att ha vaumlntat i

3 sekunder foumlr att ladda upp sidan (Laya 2014)

Om det finns mycket inneharingll paring en sida kan man som alternativ separera inne-

haringllet i olika flikar (Mehra 2015)

Jag har tagit ett exempel fraringn Amazoncom Paring produktsidan har ja valt en orange

vaumlska Foumlr att tex ytterligare laumlsa om produktbeskrivningen rdquoAbout this itemrdquo ser

22

jag en pil som aumlr paring houmlgra sidan (Figur 29) Naumlr jag trycker paring pilen eller laringdan

kommer jag till en annan sida daumlr jag kan laumlsa hela produktbeskrivningen (Figur

210) Paring det haumlr saumlttet inneharingller sidan all information man behoumlver men separe-

rade i olika flikar saring att det blir snabbare att ladda upp sidan

Figur 28 Produktsida paring amazoncom

23

Figur 29 Produktsida paring amazoncom

Figur 210 Produktsida paring amazoncom About this item

24

6 Misslyckade analyseringar av anvaumlndarna

Naumlr man bygger webbsidor aumlr det viktig att goumlra anvaumlndbarhetstest och analysera

kundernas beteende Hur anvaumlndarna kaumlnner sig naumlr de anvaumlnder sidan aumlr mycket

viktigt och avgoumlr hur bra din business kommer att rulla

Analyseringen aumlr den kritiska inputen foumlr designen Med analyseringen ser man

dels vilka mobila apparater anvaumlndarna anvaumlnder och om det aumlr naringgra svaringrigheter

och obekvaumlmligheter anvaumlndarna upplever vid anvaumlndningen Dessa faktorer aumlr

viktiga foumlr att saumlkerstaumllla om den mobila upplevelsen uppfyller behoven hos kon-

sumenterna Testet och analysen maringste goumlras kontinuerligt foumlr att vi skall kunna

saumlkerstaumllla att kunderna har det bekvaumlmt (Mehra 2015)

7 Mindre inneharingll foumlr mobilanvaumlndarna

E-handel webbplatser brukar goumlmma inneharingll foumlr att goumlra sidan mindre Sidan aumlr

i sjaumllva verket inte mindre men bara goumlmd foumlr anvaumlndarna som anvaumlnder sina

smarttelefoner Enligt Mehra Gagan aumlr det inte bra om det finns mindre inneharingll

foumlr mobilanvaumlndarna Oavsett med vilka enheter anvaumlndarna aumlr paring sidan boumlr det

finnas lika mycket inneharingll paring alla enheterna De flesta som handlar online brukar

aumlga flera enheter och med stor sannolikhet anvaumlnder de ocksaring andra enheter foumlr

att surfa Om inneharingllet inte ser likadant ut paring stationaumlra datorer och smarttelefo-

ner kan det orsaka daringlig anvaumlndarupplevelse foumlr anvaumlndaren Enligt Google an-

vaumlnder 90 av dem som handlar paring internet olika enheter Att begraumlnsa deras

anvaumlndning aumlr naringgonting som man boumlr undvika (Mehra 2015)

25

3 MOBILANPASSADE LOumlSNINGAR

Det finns maringnga olika loumlsningar att bygga sin webbplats med Det aumlr viktigt att komma

iharingg att mobila anvaumlndande oumlkar hela tiden Det staumlller nya krav paring webbdesign och an-

vaumlndargraumlnssnitt Anvaumlndarna foumlrvaumlntar sig idag att de ska kunna ta del av allt inneharingll paring

webben oavsett om de anvaumlnder en smarttelefon eller en surfplatta De mobilanpassade

loumlsningarna foumlr e-handel kan tex vara Responsiv design Adaptiv Design Mobilbutik

eller en mobil applikation

31 Adaptiv design

En adaptiv webbplats aumlr uppbyggd saring att den aumlr optimerad foumlr specifika skaumlrmstorlekar

Den anvaumlnder servern foumlr att upptaumlcka den enhet som anvaumlnds foumlr att visa webbplatsen

Byggande av webbplatsen med adaptiv metoden aumlr tidskraumlvande paring grund av behovet att

optimera sidan foumlr varje vald plattform front-end och back-end Innan man boumlrjar bygga

webbplatsen maringste man avgoumlra vilka alla plattformar webbplatsen kommer att optimeras

till Foumlrdel med adaptiv design aumlr att den har snabb uppladdningstid

rdquoCompared to Responsiv design adaptive web design is website-optimised for each

platform separately and makes use of the opportunities presented by the platform as

well as the models and functions It offers fast-loading pages due to the server detec-

tion device and browser sending data tailored for a particular devicerdquo

-Lubo Ruska 2013

Att vaumllja den raumltta loumlsningen handlar om att foumlrstaring vad maringlgruppen foumlrvaumlntar sig och vad

de behoumlver Eftersom foumlretaget 909jp inte aumlr en jaumltte stort foumlretag saringsom Ikea eller Ama-

zon som har oberaumlknat antal med produkter tycker jag att Responsiv design med Mobile

first metoden aumlr den mest effektiva metoden foumlr denna forskning

26

32 Responsiv design

Responsiv webbdesign aumlr ett av de populaumlraste saumltten att optimera en webbplats Re-

sponsiv webbdesign moumljliggoumlr att layouten foumlraumlndras beroende paring vilken skaumlrmstorlek

och skaumlrmupploumlsningen som anvaumlndarna har och beroende paring vilka funktioner som

webblaumlsaren stoumldjer (Responsive Design 2014)

Oberoende om anvaumlndarna anvaumlnder dator laumlsplatta eller sin mobiltelefon kommer sidan

att anpassa sig paring olika saumltt foumlr att anvaumlndarna vid alla tillfaumlllen ska ha en saring rik upplevelse

som moumljligt Man kan saumlga att en webbsida paring mindre skaumlrmar aumlr med ett annat ord en

krympande version av den stoumlrre skaumlrmstorleken

Inneharingllet saringsom kolumner och bilder paring webbsidan kommer automatiskt att anpassas

beroende paring skaumlrmstorleken Och detta aumlr paring grund av Grid systemet Allt inneharingll skall

haringllas inom ett Grid system Grid systemet skall skydda allt fraringn att bryta samman naumlr

sidan anvaumlnds paring olika skaumlrmstorlekar

Det finns 11 olika Grid storlekar tvaring kolumner tre kolumner fyra kolumner fem kolum-

ner sex kolumner sju kolumner aringtta kolumner nio kolumner tio kolumner 11 kolumner

och 12 kolumner Som exempel visar jag en figur av 12 kolumners Grid system (Swan

2014)

27

Figur 31 Ett exempel paring Grid system av 5 olika skaumlrmstorlekar (Phil Swan 2014)

Responsiv webbdesign fungerar med hjaumllp av HTML5 CSS media Query och Java-

Script Det bygger paring att webbutvecklare istaumlllet foumlr exakta storlekar maumltt i pixlar anger

sidelements storlekar i procent i jaumlmfoumlrelse med skaumlrmens storlek

Naumlr sidelementens storlekar aumlr i procent goumlr det att sidan blir flexibel och den anpassas

efter webblaumlsarens storlek medan fasta pixlar ger en scrollbar (rull-list) (Responsive De-

sign 2014)

33 Varfoumlr Responsiv design

Foumlrdelar med Responsiv design aumlr att den erbjuder en bra anvaumlndarupplevelse foumlr olika

enheter och skaumlrmstorlekar Tack vare den Responsiva designen har webbredaktoumlrer laumlt-

tare att hantera inneharingllet eftersom de bara har en version att hantera Ur en SEO synvin-

kel fungerar Responsiv design baumlttre eftersom den koncentrerar inneharingllet istaumlllet foumlr att

vattna ur det med maringnga URL foumlr samma inneharingll

28

Med en Responsiv design aumlr en webbplats laumlttare att hantera Att ha flera olika versioner

av en webbplats innebaumlr mera arbete Flera olika versioner av en webbplats innebaumlr sepa-

rata sidor att redigera och separata insatser foumlr soumlkmotoroptimering och separata soumlkmo-

torkampanjer Daumlrfoumlr aumlr det en stor foumlrdel att bygga en webbplats med den Responsiva

metoden

Med en Responsiv design kaumlnner anvaumlndarna baumlttre igen sidan baringde paring stationaumlra datorer

och mobiltelefoner Bygger man specifika webbplatser foumlr mobiler och surfplattor kan

det laumltt haumlnda att det blir olika information paring webbplatserna och att de struktureras olika

Laringt oss foumlrestaumllla oss att naringgon anvaumlnder sin mobiltelefon paring lunchen foumlr att leta efter en

flygbiljett fraringn Helsingfors till Tokyo Personen hittar en webbplats som har bra erbju-

dande och bestaumlmmer sig foumlr att fortsaumltta kolla naumlr han eller hon kommer hem Naumlr per-

sonen har kommit hem anvaumlnder hen datorn istaumlllet foumlr mobilen Om webbplatsen som

personen kollade paring lunchpausen var en Responsiv webbplats faringr personen en smidig och

bra upplevelse vid oumlvergaringngen fraringn den mobila webbplatsen till stationaumlr dator

(Lindahl 2014)

Det aumlr vaumlldigt viktigt att ha sin webbplats att optimerad till saring maringnga enheter som moumljligt

foumlr att ingen vet vilka kommer att vara framtidens enheter och daumlrfoumlr anses en webbplats

som anpassar sig till maringnga olika format vara den baumlsta loumlsningen Innan man kan boumlrja

med att designa en Responsiv webbplats maringste man veta vilka skaumlrmupploumlsningar och

storlekar det finns tillgaumlngliga och aumlr populaumlra idag Foumlr att kunna rikta till de olika skaumlr-

mupploumlsningarna med Media Queries har jag listat upp olika enheternas skaumlrmupploumls-

ningar i pixlar haumlr nedan i tabellen

ResolutionGrafisk array Enhet som anvaumlnder denna resolution skaumlrmstorlek i pixel-

taumltheten i pixlar

2880x1800 15-inch Apple MacBook Pro with Retina display

2560 x 1700 Google Chromebook Pixel

2560 x 1600 Samsung Google Nexus 10

13-inch Apple MacBook Pro with Retina display

29

2560 x 1440 27-inch Apple iMac 102 111 113 122 (Late 2009 -

2012)

1920 x 1080 HTC One Samsung

Sony Xperia Z amp Xperia ZL

Asus PadFone Infinity

Acer Aspire S5

Asus Zenbook Prime

1600 x 900 Apple Macbook Air

1366 x 768 Small desktoplaptop screen resolution

Asus VivoTab RT

Samsung N350

1280 x 1024 Standard desktop screen resolution

1280 x 800 Asus PadFone 2

Samsung Galaxy Note

Sony Xperia Tablet S

1280 x 720 Sony Xperia S

HTC Windows Phone 8X

HTC One mini

1136 x 640 Apple iPhone 5 5S amp 5C

Apple iPod Touch (5th generation)

960 x 640 Apple iPhone 4 amp 4S

Apple iPod Touch (4th generation)

854 x 480 Sony Xperia ray

Nokia N9

800 x 480 Nokia Lumia 510 amp 520

Samsung Galaxy I Galaxy S Galaxy S Plus Galaxy S Ad-

vance Galaxy SL Galaxy S Duos Galaxy Xcover 2 Galaxy

Beam Nexus S Captivate Glide amp Galaxy S III mini

HTC Desire X HTC Desire V Desire VC Desire VT De-

sire U amp Windows Phone 8S

30

LG Optimus 2X Optimus EX Optimus L5 II Optimus Q2

amp Optimus Black

T-Mobile G2x

Asus E600

620 x 480 Blackberry Bold 9900 amp Bold Touch 9930

Blackberry Torch 9810

LG Optimus Z

640 x 360 Sony Ericsson Vivaz amp Vivaz Pro

Nokia 500 amp 5800 XpressMusic

Nokia N8 N97 E7 and X6

480 x 320 Apple iPhone 3G amp 3GS

Samsung Galaxy Ace

320 x 240 Nokia E71

Blackberry Curve 9220 amp 9320

Sony Ericsson txt

Samsung Galaxy Y amp Galaxy Chat

Nokia Asha 501

Figur 32 Resolutions referenser paring olika enheter

31

4 VAD AumlR MOBILE FIRST

Mobile first metoden aumlr en metod och arbetsprocess foumlr webbdesigners som aumlr skapad av

Luke Wroblewski Naumlr man jobbar med ett projekt och designar strukturerar och imple-

menterar en webbplats aumlr Mobile first metoden man paringboumlrjar arbetet med Med metoden

menar Wroblewski att man foumlrst boumlrjar designa webbsidor fraringn de minsta enheterna

Figur 41 Mobile First att bygga webbsidan fraringn den minsta skaumlrmen till den stoumlrsta skaumlrmen

Wroblewski som har skapat Mobile First metoden understryker att metoden ska priorite-

ras daring man skapar anvaumlndarupplevelser

Det finns tre viktiga anledningar foumlr att utveckla foumlr Mobile First

Den foumlrbereder foumlr den stora utveckling och nya moumljligheter som uppkommer

inom det mobila omraringdet idag (836 av vaumlrldens befolkning anvaumlnder internet

paring sin smarttelefon 2015)

Den goumlr att vi blir tvungna att prioritera och fokusera varingrt inneharingll genom att ac-

ceptera de begraumlnsningar som aumlr foumlrenade med mobil design

32

och goumlr att vi kan leverera innovativa upplevelser genom att bygga utifraringn nya

funktioner som finns inbyggda i de mobila enheterna (bla GEO lokalisering)

En mobil webbplats behoumlver endast ha en mycket enkel layout och navigeringen ska vara

laumltt och effektiv

Naumlr man designar med Mobile first metoden tvingas man goumlra viktiga beslut om vad som

ska prioriteras Naumlr den optimerad design foumlr en liten skaumlrm visas paring en stoumlrre skaumlrm

kommer det att bli laumlttare att designa paring de stoumlrre skaumlrmarna Allt som ska goumlras aumlr daring

bara att fylla paring inneharingllet och designa saring att det aumlr grafiskt tilltalande och laumltt att hitta

inneharingllet (Wroblewski 2011)

41 Varfoumlr Mobile first

Vaumlrlden vi lever i idag aumlr inte mera som foumlr tio aringr sedan Allt runtom oss har utvecklats

speciellt mobiltelefonerna Tidigare anvaumlndes mobiltelefoner bara foumlr att skicka med-

delandet ringa och ta emot samtal Nu anvaumlnds den till foumlr att dels ta bilder video GPS

navigation foumlr vaumlgvisning och speciellt internetanvaumlndningen saringsom Google nyheter

Facebook Youtube och mycket mer Paring grund av det har ocksaring varingr livsstil foumlraumlndrats

Internetanvaumlndning idag har blivit allt vanligare Idag anvaumlnder vi naumltet i skolan paring jobbet

eller var och naumlr som helst bara man har en smarttelefon eller surfplatta och naumltet kopplat

Tidigare boumlrjade man bygga en webbplats fraringn den stoumlrsta skaumlrmen medan den mobila

sidan var en biprodukt Laringt oss saumlga att man har en webbplats med en rik grafisk layout

och ser stilig ut paring stationaumlra datorer Naumlr man skalar ner sidan foumlr att passa en mobilskaumlrm

kommer resultatet att vara en smaumlrta foumlr varingra oumlgon Paring den lilla mobilskaumlrmen kommer

det att vara olaumlsligt och svaringrt att anvaumlnda Foumlr att naring inneharingllet maringste du tom zooma in

och ut eller skrolla till houmlger och vaumlnster Det haumlr kommer att ge en negativ bild av ditt

foumlretag och anvaumlndarna kanske aldrig mera besoumlker din webbplats (Wroblewski 2011)

Ett bra exempel aumlr Tokyo Skytree webbplats som aumlnnu idag inte ha byggt in funktionalitet

och designen foumlr mindre skaumlrmupploumlsningar paring den engelska sidan

33

Tokyo Skytree aumlr vaumlrldens naumlst houmlgsta torn efter Burj Khalifa Tornet aumlr Japans houmlgsta

byggnadsverk med en houmljd paring 634 meter Den oumlppnades 22 maj 2012 och under det foumlrsta

aringret hade den 64 miljoner besoumlkare fraringn hela vaumlrlden Trots det har de laringtit bli att utveckla

den engelska webbsidan Paring bilden ser man att hemsidan ser exakt likadant ut paring stationaumlr

dator och paring mobilen

Figur 42 Hemsidan paring Tokyo Skytree paring stationaumlr datorskaumlrm

34

Figur 43 Hemsidan foumlr Tokyo Skytree Foumlrsta bilden visar hur det ser ut normalt Andra bilden visar naumlr man zoomar

in

Naumlr man foumlrsoumlker zooma in foumlr att laumlsa inneharingllet hoppar sidbalken (paring vaumlnstra sidan) paring

texten Det haumlr ger en mycket daringlig anvaumlndarupplevelse och kan ge fel bild av turistplat-

sen Ett annat fel paring sidan aumlr naumlr man vaumlljer spraringk till japanska ser sidan inte likadant ut

35

Figure 44 Hemsidan paring Tokyo Skytree paring japanska

Om du kan laumlsa japanska kommer du att undra varfoumlr det finns massor med information

och sidan ser mycket trevligare ut paring den japanska sidan Paring den internationella sidan

dvs engelska ser det inte lika trevligt ut och inneharingller inte allt som det goumlr paring den

japanska sidan Det aumlr som om den stoumlrsta maringlgruppen aumlr foumlr japanska turister och som

om de skulle inte bry sig om turister fraringn utlandet

Utoumlver det har de ocksaring byggt en mobilsida foumlr den japanska webbsidan Varfoumlr satsa bara

paring den japanska sidan och inte den engelska sidan naumlr maringlgruppen aumlr hela vaumlrlden

36

Figur 45 Mobil sidan paring Tokyo Skytree paring japanska

Vi lever i 2015 saring alla borde veta att det aumlr vaumlldigt viktig att ha en mobil webbplats som

erbjuder en bra anvaumlndarupplevelse paring alla spraringk som webbplatsen erbjuder Naumlr man har

sin sida paring flera spraringk och aumlndaring bestaumlmmer sig att bygga sidan ordentligt bara paring ett spraringk

kan anvaumlndarna faring en fel bild av foumlretaget I vaumlrsta fall kommer anvaumlndarna tycka att sidan

aumlr oparinglitligt och aringterkommer aldrig igen

Mobile first metoden aumlr daumlrfoumlr en mycket effektiv metod att bygga sin webbplats med

Man boumlrjar med att bygga sin webbplats fraringn den minsta skaumlrmen Man tvingas goumlra be-

slut om vad som ska absolut prioriteras Arbetsprocessen foumlr oss webbdesigners blir

mycket effektivare genom att foumlrst designa fraringn den minsta skaumlrmen och sedan foumlrflytta

oss till de stoumlrre skaumlrmarna Har man ett 6 kvadratmeters sovrum och foumlrsoumlker faring sin saumlng

skrivbord hylla klaumldskaringp och soffan att rymmas in aumlr det ganska utmanande Men naumlr

man boumlrjar med det mest utmanande i arbetsprocessen blir arbetet ocksaring mindre utma-

nande desto stoumlrre rum eller skaumlrm det blir (Wroblewski 2011)

37

5 909JP

909jp aumlr en elektronisk handel en moumlbelaffaumlr som saumlljer vaumlsterlaumlndska produkter Den

elektroniska butiken kommer att oumlppnas i Japan 2015 Deras foumlrvaumlntningar aumlr att faring in

en miljon dollar i foumlrsaumlljning per aringr I deras elektroniska moumlbelaffaumlr saumlljs bla stolar bord

soffor och lampor Maringlgruppen aumlr alla konsumenter mellan 18-60 aringringar

Japaner aumlr intresserade av vaumlsterlaumlndska produkter och livsstil men foumlr de flesta varor aumlr

designen knutna till deras egen kultur vilket goumlr dem mer intresserad Det aumlr ocksaring mycket

viktigt att ha sin hemsida paring japanska eftersom 99 av den japanska befolkningen foumlre-

drar att inte laumlsa inneharingllet paring andra spraringk (Khurana)

Japan aumlr ett land med vaumlrldens tredje stoumlrsta ekonomi paring 5 biljoner De har vaumlrldens ti-

onde stoumlrsta befolkning med ca 1271 miljoner invaringnare varav 70 av den totala befolk-

ningen anvaumlnder internet och 24 av dem anvaumlnder internet paring sin smarttelefon

(Khurana)

Viktigt med detta projekt aumlr att sikta aringt raumltt haringll och betjaumlna kunderna paring det baumlsta saumlttet

via webbplatsen Foumlr att kunna faringnga saring maringnga kunder som moumljligt aumlr det mycket viktigt

att designa en webbplats som aumlr anvaumlndarvaumlnlig stilig och laumltt att anvaumlnda (Wroblewski

2011)

Jag har daumlrfoumlr kommit underfund med att anvaumlnda Mobile first och Responsiv design

metoden foumlr att utveckla den mobila 909jp sidan Med tanke paring att det aumlr en Responsiv

design skall layouten paring den mobila versionen ocksaring passa in med de stoumlrre skaumlrmarna

naumlr sidan skalas upp Det aumlr dock viktigt poaumlngtera att jag endast kommer att koncentrera

mig paring den mobila designen och utveckla designen endast foumlr denna forskning

38

6 ANALYS AV DEN NYA DESIGNEN

Med hjaumllp av den tidigare designen paring 909jp och de kritiska punkterna jag har hittat under

forskningen har jag skapat en ny och foumlrbaumlttrad design av webbplatsen foumlr mobiler I det

haumlr kapitlet kommer jag att visa naringgra exempel paring den tidigare designen och jaumlmfoumlra den

med nya designen samt analysera arbetet

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger)

1 Call-to-action knapparna

Under hela arbetsprocessen har jag haft i minnet att navigeringar laumlnkar och knap-

parna ska vara tillraumlckligt stora att klicka paring I den tidigare designen har de stora

bilder paring kategorier vilket jag tycker aumlr en bra design att aringtervaumlnda

39

2 Soumlkfunktionen

Paring den tidigare versionen haumlr nedan ser man att soumlkfunktionen inte finns med

medan paring den nya designen ser man soumlkfunktionen genast naumlr man kommer till

sidan Som tidigare framfoumlrdes att soumlkfunktionen alltid ska synas saring att man laumltt

skall kunna soumlka fram produkterna Om soumlkfunktionen inte finns med eller aumlr svaringr

att hitta naumlr den behoumlvs kan det orsaka missnoumlje hos anvaumlndarna (Mehra Gagan

2015)

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp

Figur 63 Soumlkfunktionen paring den nya designen 909jp

40

3 Laumltt att navigera

Naumlr skaumlrmen aumlr liten aumlr det viktig att ha en enkel layout (Wroblewski 2011)

Jag har daumlrfor i den nya designen flyttat rdquoHemrdquo och rdquoBlogrdquo knapparna bort fraringn

den oumlvre menyn Hem-knappen finns nu i hamburgarmenyn paring vaumlnstra sidan me-

dan Blog-knappen finns i footer Detta goumlr att det ser mera organiserat ut

Figur 64 Gamla designen

Laringt oss foumlrflytta vidare till menyer foumlr kategorier Paring hemsidan har man tvaring alter-

nativ att naring kategorierna Foumlrsta aumlr den hamburgarmenyn knappen paring vaumlnstra si-

dan I menyn aumlr kategorierna indelade i fyra delar stolar lampor ergonomisk och

soffa amp middag Detta goumlr det laumltt och klart foumlr anvaumlndarna var produkterna finns

Eftersom vi bara har partiell uppmaumlrksamhet fraringn anvaumlndarna naumlr de aumlr paring sina

smarttelefoner har jag valt att saumltta in ikoner i menyn (Figur 65) Naumlr anvaumlndaren

bara anvaumlnder ena oumlgat foumlr att kolla paring mobilen och andra oumlgat foumlr naringgonting annat

ska den lilla skaumlrmen med webbplatsen kunna faringnga uppmaumlrksamheten samt un-

derlaumltta anvaumlndningen av webbplatsen (Wroblewski 2011)

41

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny

Andra menyn for kategorierna aumlr de fyra bilderna under Aeron chair slideshowen

Paring den tidigare designen ser man endast ett foumlnster av kategorierna som aumlr place-

rade i en kolumn som upprepas loggraumltt (Figur 66) Det haumlr goumlr att anvaumlndaren

maringste skrolla ner foumlr att se varenda kategori vilket kan orsaka obekvaumlmlighet Att

se flera kategorier paring samma skaumlrm sparar tid och anvaumlndaren kommer aumlven baumlttre

iharingg var sakerna finns Att ha bara rdquoenrdquo stor bild som syns paring skaumlrmen och vara

tvungen att skrolla ner foumlr att se naumlsta bild aumlr frustrerande Paring den nya designen

har jag tvaring rutor av kategorier bredvid varandra (Figur 66)

42

Figur 66 Kategorier paring den gamla designen (till vaumlnster) Kategorier paring den nya designen (till houmlger)

4 Ta det roliga ur shopping

Paring den nya designen straumlvar jag efter att erbjuda en bekvaumlm shopping-upplevelse

Naumlr anvaumlndarna besoumlker e-handeln med en smarttelefon foumlrvaumlntar hanhon sig

ocksaring att kunna ta del av allt inneharingll och goumlra jaumlmfoumlrelser med andra produkter

Jag har daumlrfoumlr i den nya designen pressat ihop laumlngden paring kolumnhoumljden som om-

ringar produkten Som resultat ser vi nu fyra produkter paring samma skaumlrm (Figur

67) I den tidigare designen ser vi en enda produkt paring en skaumlrm och foumlr att se

andra produkter maringste vi skrolla ner Paring det haumlr saumlttet har anvaumlndarna svaringrare att

jaumlmfoumlra produkterna (Laya 2014)

43

Figur 67 Tidigare produktsida (till vaumlnster) Ny produktsida (till houmlger)

I den tidigare designen ser vi ocksaring att det finns endast produktens bild produk-

tens namn koumlpvagnen och infoikonen Om man vill faring reda paring produktens inform-

ation maringste man klicka paring produktens bild eller paring infoikonen som foumlr oss direkt

till sjaumllva produktens sida Bara foumlr att man vill faring reda paring vad det aumlr foumlr produkt

foumlrs man vidare till en annan sida Det haumlr kan orsaka att kunden inte njuter totalt

av shoppingen och dessutom kan han inte jaumlmfoumlra produkterna naumlr han aumlr paring ka-

tegoriernas sida (Laya 2014)

Laringt oss hoppa vidare till den nya designen (Figur 68) Paring den nya designen har

jag satt in en kort detaljbeskrivning foumlr varje produkt Dessutom naumlr man klickar

paring infoikonen paring houmlgra sidan kommer man inte direkt till produktsidan utan det

kommer att dyka upp en inforuta som har en kort beskrivning paring produkten Om

anvaumlndaren aumlr intresserad av produkten kan han garing in till sjaumllva produktsida ge-

nom att klicka paring rdquoView productrdquo eller ocksaring paring produktbilden daumlr hanhon kan

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

22

jag en pil som aumlr paring houmlgra sidan (Figur 29) Naumlr jag trycker paring pilen eller laringdan

kommer jag till en annan sida daumlr jag kan laumlsa hela produktbeskrivningen (Figur

210) Paring det haumlr saumlttet inneharingller sidan all information man behoumlver men separe-

rade i olika flikar saring att det blir snabbare att ladda upp sidan

Figur 28 Produktsida paring amazoncom

23

Figur 29 Produktsida paring amazoncom

Figur 210 Produktsida paring amazoncom About this item

24

6 Misslyckade analyseringar av anvaumlndarna

Naumlr man bygger webbsidor aumlr det viktig att goumlra anvaumlndbarhetstest och analysera

kundernas beteende Hur anvaumlndarna kaumlnner sig naumlr de anvaumlnder sidan aumlr mycket

viktigt och avgoumlr hur bra din business kommer att rulla

Analyseringen aumlr den kritiska inputen foumlr designen Med analyseringen ser man

dels vilka mobila apparater anvaumlndarna anvaumlnder och om det aumlr naringgra svaringrigheter

och obekvaumlmligheter anvaumlndarna upplever vid anvaumlndningen Dessa faktorer aumlr

viktiga foumlr att saumlkerstaumllla om den mobila upplevelsen uppfyller behoven hos kon-

sumenterna Testet och analysen maringste goumlras kontinuerligt foumlr att vi skall kunna

saumlkerstaumllla att kunderna har det bekvaumlmt (Mehra 2015)

7 Mindre inneharingll foumlr mobilanvaumlndarna

E-handel webbplatser brukar goumlmma inneharingll foumlr att goumlra sidan mindre Sidan aumlr

i sjaumllva verket inte mindre men bara goumlmd foumlr anvaumlndarna som anvaumlnder sina

smarttelefoner Enligt Mehra Gagan aumlr det inte bra om det finns mindre inneharingll

foumlr mobilanvaumlndarna Oavsett med vilka enheter anvaumlndarna aumlr paring sidan boumlr det

finnas lika mycket inneharingll paring alla enheterna De flesta som handlar online brukar

aumlga flera enheter och med stor sannolikhet anvaumlnder de ocksaring andra enheter foumlr

att surfa Om inneharingllet inte ser likadant ut paring stationaumlra datorer och smarttelefo-

ner kan det orsaka daringlig anvaumlndarupplevelse foumlr anvaumlndaren Enligt Google an-

vaumlnder 90 av dem som handlar paring internet olika enheter Att begraumlnsa deras

anvaumlndning aumlr naringgonting som man boumlr undvika (Mehra 2015)

25

3 MOBILANPASSADE LOumlSNINGAR

Det finns maringnga olika loumlsningar att bygga sin webbplats med Det aumlr viktigt att komma

iharingg att mobila anvaumlndande oumlkar hela tiden Det staumlller nya krav paring webbdesign och an-

vaumlndargraumlnssnitt Anvaumlndarna foumlrvaumlntar sig idag att de ska kunna ta del av allt inneharingll paring

webben oavsett om de anvaumlnder en smarttelefon eller en surfplatta De mobilanpassade

loumlsningarna foumlr e-handel kan tex vara Responsiv design Adaptiv Design Mobilbutik

eller en mobil applikation

31 Adaptiv design

En adaptiv webbplats aumlr uppbyggd saring att den aumlr optimerad foumlr specifika skaumlrmstorlekar

Den anvaumlnder servern foumlr att upptaumlcka den enhet som anvaumlnds foumlr att visa webbplatsen

Byggande av webbplatsen med adaptiv metoden aumlr tidskraumlvande paring grund av behovet att

optimera sidan foumlr varje vald plattform front-end och back-end Innan man boumlrjar bygga

webbplatsen maringste man avgoumlra vilka alla plattformar webbplatsen kommer att optimeras

till Foumlrdel med adaptiv design aumlr att den har snabb uppladdningstid

rdquoCompared to Responsiv design adaptive web design is website-optimised for each

platform separately and makes use of the opportunities presented by the platform as

well as the models and functions It offers fast-loading pages due to the server detec-

tion device and browser sending data tailored for a particular devicerdquo

-Lubo Ruska 2013

Att vaumllja den raumltta loumlsningen handlar om att foumlrstaring vad maringlgruppen foumlrvaumlntar sig och vad

de behoumlver Eftersom foumlretaget 909jp inte aumlr en jaumltte stort foumlretag saringsom Ikea eller Ama-

zon som har oberaumlknat antal med produkter tycker jag att Responsiv design med Mobile

first metoden aumlr den mest effektiva metoden foumlr denna forskning

26

32 Responsiv design

Responsiv webbdesign aumlr ett av de populaumlraste saumltten att optimera en webbplats Re-

sponsiv webbdesign moumljliggoumlr att layouten foumlraumlndras beroende paring vilken skaumlrmstorlek

och skaumlrmupploumlsningen som anvaumlndarna har och beroende paring vilka funktioner som

webblaumlsaren stoumldjer (Responsive Design 2014)

Oberoende om anvaumlndarna anvaumlnder dator laumlsplatta eller sin mobiltelefon kommer sidan

att anpassa sig paring olika saumltt foumlr att anvaumlndarna vid alla tillfaumlllen ska ha en saring rik upplevelse

som moumljligt Man kan saumlga att en webbsida paring mindre skaumlrmar aumlr med ett annat ord en

krympande version av den stoumlrre skaumlrmstorleken

Inneharingllet saringsom kolumner och bilder paring webbsidan kommer automatiskt att anpassas

beroende paring skaumlrmstorleken Och detta aumlr paring grund av Grid systemet Allt inneharingll skall

haringllas inom ett Grid system Grid systemet skall skydda allt fraringn att bryta samman naumlr

sidan anvaumlnds paring olika skaumlrmstorlekar

Det finns 11 olika Grid storlekar tvaring kolumner tre kolumner fyra kolumner fem kolum-

ner sex kolumner sju kolumner aringtta kolumner nio kolumner tio kolumner 11 kolumner

och 12 kolumner Som exempel visar jag en figur av 12 kolumners Grid system (Swan

2014)

27

Figur 31 Ett exempel paring Grid system av 5 olika skaumlrmstorlekar (Phil Swan 2014)

Responsiv webbdesign fungerar med hjaumllp av HTML5 CSS media Query och Java-

Script Det bygger paring att webbutvecklare istaumlllet foumlr exakta storlekar maumltt i pixlar anger

sidelements storlekar i procent i jaumlmfoumlrelse med skaumlrmens storlek

Naumlr sidelementens storlekar aumlr i procent goumlr det att sidan blir flexibel och den anpassas

efter webblaumlsarens storlek medan fasta pixlar ger en scrollbar (rull-list) (Responsive De-

sign 2014)

33 Varfoumlr Responsiv design

Foumlrdelar med Responsiv design aumlr att den erbjuder en bra anvaumlndarupplevelse foumlr olika

enheter och skaumlrmstorlekar Tack vare den Responsiva designen har webbredaktoumlrer laumlt-

tare att hantera inneharingllet eftersom de bara har en version att hantera Ur en SEO synvin-

kel fungerar Responsiv design baumlttre eftersom den koncentrerar inneharingllet istaumlllet foumlr att

vattna ur det med maringnga URL foumlr samma inneharingll

28

Med en Responsiv design aumlr en webbplats laumlttare att hantera Att ha flera olika versioner

av en webbplats innebaumlr mera arbete Flera olika versioner av en webbplats innebaumlr sepa-

rata sidor att redigera och separata insatser foumlr soumlkmotoroptimering och separata soumlkmo-

torkampanjer Daumlrfoumlr aumlr det en stor foumlrdel att bygga en webbplats med den Responsiva

metoden

Med en Responsiv design kaumlnner anvaumlndarna baumlttre igen sidan baringde paring stationaumlra datorer

och mobiltelefoner Bygger man specifika webbplatser foumlr mobiler och surfplattor kan

det laumltt haumlnda att det blir olika information paring webbplatserna och att de struktureras olika

Laringt oss foumlrestaumllla oss att naringgon anvaumlnder sin mobiltelefon paring lunchen foumlr att leta efter en

flygbiljett fraringn Helsingfors till Tokyo Personen hittar en webbplats som har bra erbju-

dande och bestaumlmmer sig foumlr att fortsaumltta kolla naumlr han eller hon kommer hem Naumlr per-

sonen har kommit hem anvaumlnder hen datorn istaumlllet foumlr mobilen Om webbplatsen som

personen kollade paring lunchpausen var en Responsiv webbplats faringr personen en smidig och

bra upplevelse vid oumlvergaringngen fraringn den mobila webbplatsen till stationaumlr dator

(Lindahl 2014)

Det aumlr vaumlldigt viktigt att ha sin webbplats att optimerad till saring maringnga enheter som moumljligt

foumlr att ingen vet vilka kommer att vara framtidens enheter och daumlrfoumlr anses en webbplats

som anpassar sig till maringnga olika format vara den baumlsta loumlsningen Innan man kan boumlrja

med att designa en Responsiv webbplats maringste man veta vilka skaumlrmupploumlsningar och

storlekar det finns tillgaumlngliga och aumlr populaumlra idag Foumlr att kunna rikta till de olika skaumlr-

mupploumlsningarna med Media Queries har jag listat upp olika enheternas skaumlrmupploumls-

ningar i pixlar haumlr nedan i tabellen

ResolutionGrafisk array Enhet som anvaumlnder denna resolution skaumlrmstorlek i pixel-

taumltheten i pixlar

2880x1800 15-inch Apple MacBook Pro with Retina display

2560 x 1700 Google Chromebook Pixel

2560 x 1600 Samsung Google Nexus 10

13-inch Apple MacBook Pro with Retina display

29

2560 x 1440 27-inch Apple iMac 102 111 113 122 (Late 2009 -

2012)

1920 x 1080 HTC One Samsung

Sony Xperia Z amp Xperia ZL

Asus PadFone Infinity

Acer Aspire S5

Asus Zenbook Prime

1600 x 900 Apple Macbook Air

1366 x 768 Small desktoplaptop screen resolution

Asus VivoTab RT

Samsung N350

1280 x 1024 Standard desktop screen resolution

1280 x 800 Asus PadFone 2

Samsung Galaxy Note

Sony Xperia Tablet S

1280 x 720 Sony Xperia S

HTC Windows Phone 8X

HTC One mini

1136 x 640 Apple iPhone 5 5S amp 5C

Apple iPod Touch (5th generation)

960 x 640 Apple iPhone 4 amp 4S

Apple iPod Touch (4th generation)

854 x 480 Sony Xperia ray

Nokia N9

800 x 480 Nokia Lumia 510 amp 520

Samsung Galaxy I Galaxy S Galaxy S Plus Galaxy S Ad-

vance Galaxy SL Galaxy S Duos Galaxy Xcover 2 Galaxy

Beam Nexus S Captivate Glide amp Galaxy S III mini

HTC Desire X HTC Desire V Desire VC Desire VT De-

sire U amp Windows Phone 8S

30

LG Optimus 2X Optimus EX Optimus L5 II Optimus Q2

amp Optimus Black

T-Mobile G2x

Asus E600

620 x 480 Blackberry Bold 9900 amp Bold Touch 9930

Blackberry Torch 9810

LG Optimus Z

640 x 360 Sony Ericsson Vivaz amp Vivaz Pro

Nokia 500 amp 5800 XpressMusic

Nokia N8 N97 E7 and X6

480 x 320 Apple iPhone 3G amp 3GS

Samsung Galaxy Ace

320 x 240 Nokia E71

Blackberry Curve 9220 amp 9320

Sony Ericsson txt

Samsung Galaxy Y amp Galaxy Chat

Nokia Asha 501

Figur 32 Resolutions referenser paring olika enheter

31

4 VAD AumlR MOBILE FIRST

Mobile first metoden aumlr en metod och arbetsprocess foumlr webbdesigners som aumlr skapad av

Luke Wroblewski Naumlr man jobbar med ett projekt och designar strukturerar och imple-

menterar en webbplats aumlr Mobile first metoden man paringboumlrjar arbetet med Med metoden

menar Wroblewski att man foumlrst boumlrjar designa webbsidor fraringn de minsta enheterna

Figur 41 Mobile First att bygga webbsidan fraringn den minsta skaumlrmen till den stoumlrsta skaumlrmen

Wroblewski som har skapat Mobile First metoden understryker att metoden ska priorite-

ras daring man skapar anvaumlndarupplevelser

Det finns tre viktiga anledningar foumlr att utveckla foumlr Mobile First

Den foumlrbereder foumlr den stora utveckling och nya moumljligheter som uppkommer

inom det mobila omraringdet idag (836 av vaumlrldens befolkning anvaumlnder internet

paring sin smarttelefon 2015)

Den goumlr att vi blir tvungna att prioritera och fokusera varingrt inneharingll genom att ac-

ceptera de begraumlnsningar som aumlr foumlrenade med mobil design

32

och goumlr att vi kan leverera innovativa upplevelser genom att bygga utifraringn nya

funktioner som finns inbyggda i de mobila enheterna (bla GEO lokalisering)

En mobil webbplats behoumlver endast ha en mycket enkel layout och navigeringen ska vara

laumltt och effektiv

Naumlr man designar med Mobile first metoden tvingas man goumlra viktiga beslut om vad som

ska prioriteras Naumlr den optimerad design foumlr en liten skaumlrm visas paring en stoumlrre skaumlrm

kommer det att bli laumlttare att designa paring de stoumlrre skaumlrmarna Allt som ska goumlras aumlr daring

bara att fylla paring inneharingllet och designa saring att det aumlr grafiskt tilltalande och laumltt att hitta

inneharingllet (Wroblewski 2011)

41 Varfoumlr Mobile first

Vaumlrlden vi lever i idag aumlr inte mera som foumlr tio aringr sedan Allt runtom oss har utvecklats

speciellt mobiltelefonerna Tidigare anvaumlndes mobiltelefoner bara foumlr att skicka med-

delandet ringa och ta emot samtal Nu anvaumlnds den till foumlr att dels ta bilder video GPS

navigation foumlr vaumlgvisning och speciellt internetanvaumlndningen saringsom Google nyheter

Facebook Youtube och mycket mer Paring grund av det har ocksaring varingr livsstil foumlraumlndrats

Internetanvaumlndning idag har blivit allt vanligare Idag anvaumlnder vi naumltet i skolan paring jobbet

eller var och naumlr som helst bara man har en smarttelefon eller surfplatta och naumltet kopplat

Tidigare boumlrjade man bygga en webbplats fraringn den stoumlrsta skaumlrmen medan den mobila

sidan var en biprodukt Laringt oss saumlga att man har en webbplats med en rik grafisk layout

och ser stilig ut paring stationaumlra datorer Naumlr man skalar ner sidan foumlr att passa en mobilskaumlrm

kommer resultatet att vara en smaumlrta foumlr varingra oumlgon Paring den lilla mobilskaumlrmen kommer

det att vara olaumlsligt och svaringrt att anvaumlnda Foumlr att naring inneharingllet maringste du tom zooma in

och ut eller skrolla till houmlger och vaumlnster Det haumlr kommer att ge en negativ bild av ditt

foumlretag och anvaumlndarna kanske aldrig mera besoumlker din webbplats (Wroblewski 2011)

Ett bra exempel aumlr Tokyo Skytree webbplats som aumlnnu idag inte ha byggt in funktionalitet

och designen foumlr mindre skaumlrmupploumlsningar paring den engelska sidan

33

Tokyo Skytree aumlr vaumlrldens naumlst houmlgsta torn efter Burj Khalifa Tornet aumlr Japans houmlgsta

byggnadsverk med en houmljd paring 634 meter Den oumlppnades 22 maj 2012 och under det foumlrsta

aringret hade den 64 miljoner besoumlkare fraringn hela vaumlrlden Trots det har de laringtit bli att utveckla

den engelska webbsidan Paring bilden ser man att hemsidan ser exakt likadant ut paring stationaumlr

dator och paring mobilen

Figur 42 Hemsidan paring Tokyo Skytree paring stationaumlr datorskaumlrm

34

Figur 43 Hemsidan foumlr Tokyo Skytree Foumlrsta bilden visar hur det ser ut normalt Andra bilden visar naumlr man zoomar

in

Naumlr man foumlrsoumlker zooma in foumlr att laumlsa inneharingllet hoppar sidbalken (paring vaumlnstra sidan) paring

texten Det haumlr ger en mycket daringlig anvaumlndarupplevelse och kan ge fel bild av turistplat-

sen Ett annat fel paring sidan aumlr naumlr man vaumlljer spraringk till japanska ser sidan inte likadant ut

35

Figure 44 Hemsidan paring Tokyo Skytree paring japanska

Om du kan laumlsa japanska kommer du att undra varfoumlr det finns massor med information

och sidan ser mycket trevligare ut paring den japanska sidan Paring den internationella sidan

dvs engelska ser det inte lika trevligt ut och inneharingller inte allt som det goumlr paring den

japanska sidan Det aumlr som om den stoumlrsta maringlgruppen aumlr foumlr japanska turister och som

om de skulle inte bry sig om turister fraringn utlandet

Utoumlver det har de ocksaring byggt en mobilsida foumlr den japanska webbsidan Varfoumlr satsa bara

paring den japanska sidan och inte den engelska sidan naumlr maringlgruppen aumlr hela vaumlrlden

36

Figur 45 Mobil sidan paring Tokyo Skytree paring japanska

Vi lever i 2015 saring alla borde veta att det aumlr vaumlldigt viktig att ha en mobil webbplats som

erbjuder en bra anvaumlndarupplevelse paring alla spraringk som webbplatsen erbjuder Naumlr man har

sin sida paring flera spraringk och aumlndaring bestaumlmmer sig att bygga sidan ordentligt bara paring ett spraringk

kan anvaumlndarna faring en fel bild av foumlretaget I vaumlrsta fall kommer anvaumlndarna tycka att sidan

aumlr oparinglitligt och aringterkommer aldrig igen

Mobile first metoden aumlr daumlrfoumlr en mycket effektiv metod att bygga sin webbplats med

Man boumlrjar med att bygga sin webbplats fraringn den minsta skaumlrmen Man tvingas goumlra be-

slut om vad som ska absolut prioriteras Arbetsprocessen foumlr oss webbdesigners blir

mycket effektivare genom att foumlrst designa fraringn den minsta skaumlrmen och sedan foumlrflytta

oss till de stoumlrre skaumlrmarna Har man ett 6 kvadratmeters sovrum och foumlrsoumlker faring sin saumlng

skrivbord hylla klaumldskaringp och soffan att rymmas in aumlr det ganska utmanande Men naumlr

man boumlrjar med det mest utmanande i arbetsprocessen blir arbetet ocksaring mindre utma-

nande desto stoumlrre rum eller skaumlrm det blir (Wroblewski 2011)

37

5 909JP

909jp aumlr en elektronisk handel en moumlbelaffaumlr som saumlljer vaumlsterlaumlndska produkter Den

elektroniska butiken kommer att oumlppnas i Japan 2015 Deras foumlrvaumlntningar aumlr att faring in

en miljon dollar i foumlrsaumlljning per aringr I deras elektroniska moumlbelaffaumlr saumlljs bla stolar bord

soffor och lampor Maringlgruppen aumlr alla konsumenter mellan 18-60 aringringar

Japaner aumlr intresserade av vaumlsterlaumlndska produkter och livsstil men foumlr de flesta varor aumlr

designen knutna till deras egen kultur vilket goumlr dem mer intresserad Det aumlr ocksaring mycket

viktigt att ha sin hemsida paring japanska eftersom 99 av den japanska befolkningen foumlre-

drar att inte laumlsa inneharingllet paring andra spraringk (Khurana)

Japan aumlr ett land med vaumlrldens tredje stoumlrsta ekonomi paring 5 biljoner De har vaumlrldens ti-

onde stoumlrsta befolkning med ca 1271 miljoner invaringnare varav 70 av den totala befolk-

ningen anvaumlnder internet och 24 av dem anvaumlnder internet paring sin smarttelefon

(Khurana)

Viktigt med detta projekt aumlr att sikta aringt raumltt haringll och betjaumlna kunderna paring det baumlsta saumlttet

via webbplatsen Foumlr att kunna faringnga saring maringnga kunder som moumljligt aumlr det mycket viktigt

att designa en webbplats som aumlr anvaumlndarvaumlnlig stilig och laumltt att anvaumlnda (Wroblewski

2011)

Jag har daumlrfoumlr kommit underfund med att anvaumlnda Mobile first och Responsiv design

metoden foumlr att utveckla den mobila 909jp sidan Med tanke paring att det aumlr en Responsiv

design skall layouten paring den mobila versionen ocksaring passa in med de stoumlrre skaumlrmarna

naumlr sidan skalas upp Det aumlr dock viktigt poaumlngtera att jag endast kommer att koncentrera

mig paring den mobila designen och utveckla designen endast foumlr denna forskning

38

6 ANALYS AV DEN NYA DESIGNEN

Med hjaumllp av den tidigare designen paring 909jp och de kritiska punkterna jag har hittat under

forskningen har jag skapat en ny och foumlrbaumlttrad design av webbplatsen foumlr mobiler I det

haumlr kapitlet kommer jag att visa naringgra exempel paring den tidigare designen och jaumlmfoumlra den

med nya designen samt analysera arbetet

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger)

1 Call-to-action knapparna

Under hela arbetsprocessen har jag haft i minnet att navigeringar laumlnkar och knap-

parna ska vara tillraumlckligt stora att klicka paring I den tidigare designen har de stora

bilder paring kategorier vilket jag tycker aumlr en bra design att aringtervaumlnda

39

2 Soumlkfunktionen

Paring den tidigare versionen haumlr nedan ser man att soumlkfunktionen inte finns med

medan paring den nya designen ser man soumlkfunktionen genast naumlr man kommer till

sidan Som tidigare framfoumlrdes att soumlkfunktionen alltid ska synas saring att man laumltt

skall kunna soumlka fram produkterna Om soumlkfunktionen inte finns med eller aumlr svaringr

att hitta naumlr den behoumlvs kan det orsaka missnoumlje hos anvaumlndarna (Mehra Gagan

2015)

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp

Figur 63 Soumlkfunktionen paring den nya designen 909jp

40

3 Laumltt att navigera

Naumlr skaumlrmen aumlr liten aumlr det viktig att ha en enkel layout (Wroblewski 2011)

Jag har daumlrfor i den nya designen flyttat rdquoHemrdquo och rdquoBlogrdquo knapparna bort fraringn

den oumlvre menyn Hem-knappen finns nu i hamburgarmenyn paring vaumlnstra sidan me-

dan Blog-knappen finns i footer Detta goumlr att det ser mera organiserat ut

Figur 64 Gamla designen

Laringt oss foumlrflytta vidare till menyer foumlr kategorier Paring hemsidan har man tvaring alter-

nativ att naring kategorierna Foumlrsta aumlr den hamburgarmenyn knappen paring vaumlnstra si-

dan I menyn aumlr kategorierna indelade i fyra delar stolar lampor ergonomisk och

soffa amp middag Detta goumlr det laumltt och klart foumlr anvaumlndarna var produkterna finns

Eftersom vi bara har partiell uppmaumlrksamhet fraringn anvaumlndarna naumlr de aumlr paring sina

smarttelefoner har jag valt att saumltta in ikoner i menyn (Figur 65) Naumlr anvaumlndaren

bara anvaumlnder ena oumlgat foumlr att kolla paring mobilen och andra oumlgat foumlr naringgonting annat

ska den lilla skaumlrmen med webbplatsen kunna faringnga uppmaumlrksamheten samt un-

derlaumltta anvaumlndningen av webbplatsen (Wroblewski 2011)

41

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny

Andra menyn for kategorierna aumlr de fyra bilderna under Aeron chair slideshowen

Paring den tidigare designen ser man endast ett foumlnster av kategorierna som aumlr place-

rade i en kolumn som upprepas loggraumltt (Figur 66) Det haumlr goumlr att anvaumlndaren

maringste skrolla ner foumlr att se varenda kategori vilket kan orsaka obekvaumlmlighet Att

se flera kategorier paring samma skaumlrm sparar tid och anvaumlndaren kommer aumlven baumlttre

iharingg var sakerna finns Att ha bara rdquoenrdquo stor bild som syns paring skaumlrmen och vara

tvungen att skrolla ner foumlr att se naumlsta bild aumlr frustrerande Paring den nya designen

har jag tvaring rutor av kategorier bredvid varandra (Figur 66)

42

Figur 66 Kategorier paring den gamla designen (till vaumlnster) Kategorier paring den nya designen (till houmlger)

4 Ta det roliga ur shopping

Paring den nya designen straumlvar jag efter att erbjuda en bekvaumlm shopping-upplevelse

Naumlr anvaumlndarna besoumlker e-handeln med en smarttelefon foumlrvaumlntar hanhon sig

ocksaring att kunna ta del av allt inneharingll och goumlra jaumlmfoumlrelser med andra produkter

Jag har daumlrfoumlr i den nya designen pressat ihop laumlngden paring kolumnhoumljden som om-

ringar produkten Som resultat ser vi nu fyra produkter paring samma skaumlrm (Figur

67) I den tidigare designen ser vi en enda produkt paring en skaumlrm och foumlr att se

andra produkter maringste vi skrolla ner Paring det haumlr saumlttet har anvaumlndarna svaringrare att

jaumlmfoumlra produkterna (Laya 2014)

43

Figur 67 Tidigare produktsida (till vaumlnster) Ny produktsida (till houmlger)

I den tidigare designen ser vi ocksaring att det finns endast produktens bild produk-

tens namn koumlpvagnen och infoikonen Om man vill faring reda paring produktens inform-

ation maringste man klicka paring produktens bild eller paring infoikonen som foumlr oss direkt

till sjaumllva produktens sida Bara foumlr att man vill faring reda paring vad det aumlr foumlr produkt

foumlrs man vidare till en annan sida Det haumlr kan orsaka att kunden inte njuter totalt

av shoppingen och dessutom kan han inte jaumlmfoumlra produkterna naumlr han aumlr paring ka-

tegoriernas sida (Laya 2014)

Laringt oss hoppa vidare till den nya designen (Figur 68) Paring den nya designen har

jag satt in en kort detaljbeskrivning foumlr varje produkt Dessutom naumlr man klickar

paring infoikonen paring houmlgra sidan kommer man inte direkt till produktsidan utan det

kommer att dyka upp en inforuta som har en kort beskrivning paring produkten Om

anvaumlndaren aumlr intresserad av produkten kan han garing in till sjaumllva produktsida ge-

nom att klicka paring rdquoView productrdquo eller ocksaring paring produktbilden daumlr hanhon kan

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

23

Figur 29 Produktsida paring amazoncom

Figur 210 Produktsida paring amazoncom About this item

24

6 Misslyckade analyseringar av anvaumlndarna

Naumlr man bygger webbsidor aumlr det viktig att goumlra anvaumlndbarhetstest och analysera

kundernas beteende Hur anvaumlndarna kaumlnner sig naumlr de anvaumlnder sidan aumlr mycket

viktigt och avgoumlr hur bra din business kommer att rulla

Analyseringen aumlr den kritiska inputen foumlr designen Med analyseringen ser man

dels vilka mobila apparater anvaumlndarna anvaumlnder och om det aumlr naringgra svaringrigheter

och obekvaumlmligheter anvaumlndarna upplever vid anvaumlndningen Dessa faktorer aumlr

viktiga foumlr att saumlkerstaumllla om den mobila upplevelsen uppfyller behoven hos kon-

sumenterna Testet och analysen maringste goumlras kontinuerligt foumlr att vi skall kunna

saumlkerstaumllla att kunderna har det bekvaumlmt (Mehra 2015)

7 Mindre inneharingll foumlr mobilanvaumlndarna

E-handel webbplatser brukar goumlmma inneharingll foumlr att goumlra sidan mindre Sidan aumlr

i sjaumllva verket inte mindre men bara goumlmd foumlr anvaumlndarna som anvaumlnder sina

smarttelefoner Enligt Mehra Gagan aumlr det inte bra om det finns mindre inneharingll

foumlr mobilanvaumlndarna Oavsett med vilka enheter anvaumlndarna aumlr paring sidan boumlr det

finnas lika mycket inneharingll paring alla enheterna De flesta som handlar online brukar

aumlga flera enheter och med stor sannolikhet anvaumlnder de ocksaring andra enheter foumlr

att surfa Om inneharingllet inte ser likadant ut paring stationaumlra datorer och smarttelefo-

ner kan det orsaka daringlig anvaumlndarupplevelse foumlr anvaumlndaren Enligt Google an-

vaumlnder 90 av dem som handlar paring internet olika enheter Att begraumlnsa deras

anvaumlndning aumlr naringgonting som man boumlr undvika (Mehra 2015)

25

3 MOBILANPASSADE LOumlSNINGAR

Det finns maringnga olika loumlsningar att bygga sin webbplats med Det aumlr viktigt att komma

iharingg att mobila anvaumlndande oumlkar hela tiden Det staumlller nya krav paring webbdesign och an-

vaumlndargraumlnssnitt Anvaumlndarna foumlrvaumlntar sig idag att de ska kunna ta del av allt inneharingll paring

webben oavsett om de anvaumlnder en smarttelefon eller en surfplatta De mobilanpassade

loumlsningarna foumlr e-handel kan tex vara Responsiv design Adaptiv Design Mobilbutik

eller en mobil applikation

31 Adaptiv design

En adaptiv webbplats aumlr uppbyggd saring att den aumlr optimerad foumlr specifika skaumlrmstorlekar

Den anvaumlnder servern foumlr att upptaumlcka den enhet som anvaumlnds foumlr att visa webbplatsen

Byggande av webbplatsen med adaptiv metoden aumlr tidskraumlvande paring grund av behovet att

optimera sidan foumlr varje vald plattform front-end och back-end Innan man boumlrjar bygga

webbplatsen maringste man avgoumlra vilka alla plattformar webbplatsen kommer att optimeras

till Foumlrdel med adaptiv design aumlr att den har snabb uppladdningstid

rdquoCompared to Responsiv design adaptive web design is website-optimised for each

platform separately and makes use of the opportunities presented by the platform as

well as the models and functions It offers fast-loading pages due to the server detec-

tion device and browser sending data tailored for a particular devicerdquo

-Lubo Ruska 2013

Att vaumllja den raumltta loumlsningen handlar om att foumlrstaring vad maringlgruppen foumlrvaumlntar sig och vad

de behoumlver Eftersom foumlretaget 909jp inte aumlr en jaumltte stort foumlretag saringsom Ikea eller Ama-

zon som har oberaumlknat antal med produkter tycker jag att Responsiv design med Mobile

first metoden aumlr den mest effektiva metoden foumlr denna forskning

26

32 Responsiv design

Responsiv webbdesign aumlr ett av de populaumlraste saumltten att optimera en webbplats Re-

sponsiv webbdesign moumljliggoumlr att layouten foumlraumlndras beroende paring vilken skaumlrmstorlek

och skaumlrmupploumlsningen som anvaumlndarna har och beroende paring vilka funktioner som

webblaumlsaren stoumldjer (Responsive Design 2014)

Oberoende om anvaumlndarna anvaumlnder dator laumlsplatta eller sin mobiltelefon kommer sidan

att anpassa sig paring olika saumltt foumlr att anvaumlndarna vid alla tillfaumlllen ska ha en saring rik upplevelse

som moumljligt Man kan saumlga att en webbsida paring mindre skaumlrmar aumlr med ett annat ord en

krympande version av den stoumlrre skaumlrmstorleken

Inneharingllet saringsom kolumner och bilder paring webbsidan kommer automatiskt att anpassas

beroende paring skaumlrmstorleken Och detta aumlr paring grund av Grid systemet Allt inneharingll skall

haringllas inom ett Grid system Grid systemet skall skydda allt fraringn att bryta samman naumlr

sidan anvaumlnds paring olika skaumlrmstorlekar

Det finns 11 olika Grid storlekar tvaring kolumner tre kolumner fyra kolumner fem kolum-

ner sex kolumner sju kolumner aringtta kolumner nio kolumner tio kolumner 11 kolumner

och 12 kolumner Som exempel visar jag en figur av 12 kolumners Grid system (Swan

2014)

27

Figur 31 Ett exempel paring Grid system av 5 olika skaumlrmstorlekar (Phil Swan 2014)

Responsiv webbdesign fungerar med hjaumllp av HTML5 CSS media Query och Java-

Script Det bygger paring att webbutvecklare istaumlllet foumlr exakta storlekar maumltt i pixlar anger

sidelements storlekar i procent i jaumlmfoumlrelse med skaumlrmens storlek

Naumlr sidelementens storlekar aumlr i procent goumlr det att sidan blir flexibel och den anpassas

efter webblaumlsarens storlek medan fasta pixlar ger en scrollbar (rull-list) (Responsive De-

sign 2014)

33 Varfoumlr Responsiv design

Foumlrdelar med Responsiv design aumlr att den erbjuder en bra anvaumlndarupplevelse foumlr olika

enheter och skaumlrmstorlekar Tack vare den Responsiva designen har webbredaktoumlrer laumlt-

tare att hantera inneharingllet eftersom de bara har en version att hantera Ur en SEO synvin-

kel fungerar Responsiv design baumlttre eftersom den koncentrerar inneharingllet istaumlllet foumlr att

vattna ur det med maringnga URL foumlr samma inneharingll

28

Med en Responsiv design aumlr en webbplats laumlttare att hantera Att ha flera olika versioner

av en webbplats innebaumlr mera arbete Flera olika versioner av en webbplats innebaumlr sepa-

rata sidor att redigera och separata insatser foumlr soumlkmotoroptimering och separata soumlkmo-

torkampanjer Daumlrfoumlr aumlr det en stor foumlrdel att bygga en webbplats med den Responsiva

metoden

Med en Responsiv design kaumlnner anvaumlndarna baumlttre igen sidan baringde paring stationaumlra datorer

och mobiltelefoner Bygger man specifika webbplatser foumlr mobiler och surfplattor kan

det laumltt haumlnda att det blir olika information paring webbplatserna och att de struktureras olika

Laringt oss foumlrestaumllla oss att naringgon anvaumlnder sin mobiltelefon paring lunchen foumlr att leta efter en

flygbiljett fraringn Helsingfors till Tokyo Personen hittar en webbplats som har bra erbju-

dande och bestaumlmmer sig foumlr att fortsaumltta kolla naumlr han eller hon kommer hem Naumlr per-

sonen har kommit hem anvaumlnder hen datorn istaumlllet foumlr mobilen Om webbplatsen som

personen kollade paring lunchpausen var en Responsiv webbplats faringr personen en smidig och

bra upplevelse vid oumlvergaringngen fraringn den mobila webbplatsen till stationaumlr dator

(Lindahl 2014)

Det aumlr vaumlldigt viktigt att ha sin webbplats att optimerad till saring maringnga enheter som moumljligt

foumlr att ingen vet vilka kommer att vara framtidens enheter och daumlrfoumlr anses en webbplats

som anpassar sig till maringnga olika format vara den baumlsta loumlsningen Innan man kan boumlrja

med att designa en Responsiv webbplats maringste man veta vilka skaumlrmupploumlsningar och

storlekar det finns tillgaumlngliga och aumlr populaumlra idag Foumlr att kunna rikta till de olika skaumlr-

mupploumlsningarna med Media Queries har jag listat upp olika enheternas skaumlrmupploumls-

ningar i pixlar haumlr nedan i tabellen

ResolutionGrafisk array Enhet som anvaumlnder denna resolution skaumlrmstorlek i pixel-

taumltheten i pixlar

2880x1800 15-inch Apple MacBook Pro with Retina display

2560 x 1700 Google Chromebook Pixel

2560 x 1600 Samsung Google Nexus 10

13-inch Apple MacBook Pro with Retina display

29

2560 x 1440 27-inch Apple iMac 102 111 113 122 (Late 2009 -

2012)

1920 x 1080 HTC One Samsung

Sony Xperia Z amp Xperia ZL

Asus PadFone Infinity

Acer Aspire S5

Asus Zenbook Prime

1600 x 900 Apple Macbook Air

1366 x 768 Small desktoplaptop screen resolution

Asus VivoTab RT

Samsung N350

1280 x 1024 Standard desktop screen resolution

1280 x 800 Asus PadFone 2

Samsung Galaxy Note

Sony Xperia Tablet S

1280 x 720 Sony Xperia S

HTC Windows Phone 8X

HTC One mini

1136 x 640 Apple iPhone 5 5S amp 5C

Apple iPod Touch (5th generation)

960 x 640 Apple iPhone 4 amp 4S

Apple iPod Touch (4th generation)

854 x 480 Sony Xperia ray

Nokia N9

800 x 480 Nokia Lumia 510 amp 520

Samsung Galaxy I Galaxy S Galaxy S Plus Galaxy S Ad-

vance Galaxy SL Galaxy S Duos Galaxy Xcover 2 Galaxy

Beam Nexus S Captivate Glide amp Galaxy S III mini

HTC Desire X HTC Desire V Desire VC Desire VT De-

sire U amp Windows Phone 8S

30

LG Optimus 2X Optimus EX Optimus L5 II Optimus Q2

amp Optimus Black

T-Mobile G2x

Asus E600

620 x 480 Blackberry Bold 9900 amp Bold Touch 9930

Blackberry Torch 9810

LG Optimus Z

640 x 360 Sony Ericsson Vivaz amp Vivaz Pro

Nokia 500 amp 5800 XpressMusic

Nokia N8 N97 E7 and X6

480 x 320 Apple iPhone 3G amp 3GS

Samsung Galaxy Ace

320 x 240 Nokia E71

Blackberry Curve 9220 amp 9320

Sony Ericsson txt

Samsung Galaxy Y amp Galaxy Chat

Nokia Asha 501

Figur 32 Resolutions referenser paring olika enheter

31

4 VAD AumlR MOBILE FIRST

Mobile first metoden aumlr en metod och arbetsprocess foumlr webbdesigners som aumlr skapad av

Luke Wroblewski Naumlr man jobbar med ett projekt och designar strukturerar och imple-

menterar en webbplats aumlr Mobile first metoden man paringboumlrjar arbetet med Med metoden

menar Wroblewski att man foumlrst boumlrjar designa webbsidor fraringn de minsta enheterna

Figur 41 Mobile First att bygga webbsidan fraringn den minsta skaumlrmen till den stoumlrsta skaumlrmen

Wroblewski som har skapat Mobile First metoden understryker att metoden ska priorite-

ras daring man skapar anvaumlndarupplevelser

Det finns tre viktiga anledningar foumlr att utveckla foumlr Mobile First

Den foumlrbereder foumlr den stora utveckling och nya moumljligheter som uppkommer

inom det mobila omraringdet idag (836 av vaumlrldens befolkning anvaumlnder internet

paring sin smarttelefon 2015)

Den goumlr att vi blir tvungna att prioritera och fokusera varingrt inneharingll genom att ac-

ceptera de begraumlnsningar som aumlr foumlrenade med mobil design

32

och goumlr att vi kan leverera innovativa upplevelser genom att bygga utifraringn nya

funktioner som finns inbyggda i de mobila enheterna (bla GEO lokalisering)

En mobil webbplats behoumlver endast ha en mycket enkel layout och navigeringen ska vara

laumltt och effektiv

Naumlr man designar med Mobile first metoden tvingas man goumlra viktiga beslut om vad som

ska prioriteras Naumlr den optimerad design foumlr en liten skaumlrm visas paring en stoumlrre skaumlrm

kommer det att bli laumlttare att designa paring de stoumlrre skaumlrmarna Allt som ska goumlras aumlr daring

bara att fylla paring inneharingllet och designa saring att det aumlr grafiskt tilltalande och laumltt att hitta

inneharingllet (Wroblewski 2011)

41 Varfoumlr Mobile first

Vaumlrlden vi lever i idag aumlr inte mera som foumlr tio aringr sedan Allt runtom oss har utvecklats

speciellt mobiltelefonerna Tidigare anvaumlndes mobiltelefoner bara foumlr att skicka med-

delandet ringa och ta emot samtal Nu anvaumlnds den till foumlr att dels ta bilder video GPS

navigation foumlr vaumlgvisning och speciellt internetanvaumlndningen saringsom Google nyheter

Facebook Youtube och mycket mer Paring grund av det har ocksaring varingr livsstil foumlraumlndrats

Internetanvaumlndning idag har blivit allt vanligare Idag anvaumlnder vi naumltet i skolan paring jobbet

eller var och naumlr som helst bara man har en smarttelefon eller surfplatta och naumltet kopplat

Tidigare boumlrjade man bygga en webbplats fraringn den stoumlrsta skaumlrmen medan den mobila

sidan var en biprodukt Laringt oss saumlga att man har en webbplats med en rik grafisk layout

och ser stilig ut paring stationaumlra datorer Naumlr man skalar ner sidan foumlr att passa en mobilskaumlrm

kommer resultatet att vara en smaumlrta foumlr varingra oumlgon Paring den lilla mobilskaumlrmen kommer

det att vara olaumlsligt och svaringrt att anvaumlnda Foumlr att naring inneharingllet maringste du tom zooma in

och ut eller skrolla till houmlger och vaumlnster Det haumlr kommer att ge en negativ bild av ditt

foumlretag och anvaumlndarna kanske aldrig mera besoumlker din webbplats (Wroblewski 2011)

Ett bra exempel aumlr Tokyo Skytree webbplats som aumlnnu idag inte ha byggt in funktionalitet

och designen foumlr mindre skaumlrmupploumlsningar paring den engelska sidan

33

Tokyo Skytree aumlr vaumlrldens naumlst houmlgsta torn efter Burj Khalifa Tornet aumlr Japans houmlgsta

byggnadsverk med en houmljd paring 634 meter Den oumlppnades 22 maj 2012 och under det foumlrsta

aringret hade den 64 miljoner besoumlkare fraringn hela vaumlrlden Trots det har de laringtit bli att utveckla

den engelska webbsidan Paring bilden ser man att hemsidan ser exakt likadant ut paring stationaumlr

dator och paring mobilen

Figur 42 Hemsidan paring Tokyo Skytree paring stationaumlr datorskaumlrm

34

Figur 43 Hemsidan foumlr Tokyo Skytree Foumlrsta bilden visar hur det ser ut normalt Andra bilden visar naumlr man zoomar

in

Naumlr man foumlrsoumlker zooma in foumlr att laumlsa inneharingllet hoppar sidbalken (paring vaumlnstra sidan) paring

texten Det haumlr ger en mycket daringlig anvaumlndarupplevelse och kan ge fel bild av turistplat-

sen Ett annat fel paring sidan aumlr naumlr man vaumlljer spraringk till japanska ser sidan inte likadant ut

35

Figure 44 Hemsidan paring Tokyo Skytree paring japanska

Om du kan laumlsa japanska kommer du att undra varfoumlr det finns massor med information

och sidan ser mycket trevligare ut paring den japanska sidan Paring den internationella sidan

dvs engelska ser det inte lika trevligt ut och inneharingller inte allt som det goumlr paring den

japanska sidan Det aumlr som om den stoumlrsta maringlgruppen aumlr foumlr japanska turister och som

om de skulle inte bry sig om turister fraringn utlandet

Utoumlver det har de ocksaring byggt en mobilsida foumlr den japanska webbsidan Varfoumlr satsa bara

paring den japanska sidan och inte den engelska sidan naumlr maringlgruppen aumlr hela vaumlrlden

36

Figur 45 Mobil sidan paring Tokyo Skytree paring japanska

Vi lever i 2015 saring alla borde veta att det aumlr vaumlldigt viktig att ha en mobil webbplats som

erbjuder en bra anvaumlndarupplevelse paring alla spraringk som webbplatsen erbjuder Naumlr man har

sin sida paring flera spraringk och aumlndaring bestaumlmmer sig att bygga sidan ordentligt bara paring ett spraringk

kan anvaumlndarna faring en fel bild av foumlretaget I vaumlrsta fall kommer anvaumlndarna tycka att sidan

aumlr oparinglitligt och aringterkommer aldrig igen

Mobile first metoden aumlr daumlrfoumlr en mycket effektiv metod att bygga sin webbplats med

Man boumlrjar med att bygga sin webbplats fraringn den minsta skaumlrmen Man tvingas goumlra be-

slut om vad som ska absolut prioriteras Arbetsprocessen foumlr oss webbdesigners blir

mycket effektivare genom att foumlrst designa fraringn den minsta skaumlrmen och sedan foumlrflytta

oss till de stoumlrre skaumlrmarna Har man ett 6 kvadratmeters sovrum och foumlrsoumlker faring sin saumlng

skrivbord hylla klaumldskaringp och soffan att rymmas in aumlr det ganska utmanande Men naumlr

man boumlrjar med det mest utmanande i arbetsprocessen blir arbetet ocksaring mindre utma-

nande desto stoumlrre rum eller skaumlrm det blir (Wroblewski 2011)

37

5 909JP

909jp aumlr en elektronisk handel en moumlbelaffaumlr som saumlljer vaumlsterlaumlndska produkter Den

elektroniska butiken kommer att oumlppnas i Japan 2015 Deras foumlrvaumlntningar aumlr att faring in

en miljon dollar i foumlrsaumlljning per aringr I deras elektroniska moumlbelaffaumlr saumlljs bla stolar bord

soffor och lampor Maringlgruppen aumlr alla konsumenter mellan 18-60 aringringar

Japaner aumlr intresserade av vaumlsterlaumlndska produkter och livsstil men foumlr de flesta varor aumlr

designen knutna till deras egen kultur vilket goumlr dem mer intresserad Det aumlr ocksaring mycket

viktigt att ha sin hemsida paring japanska eftersom 99 av den japanska befolkningen foumlre-

drar att inte laumlsa inneharingllet paring andra spraringk (Khurana)

Japan aumlr ett land med vaumlrldens tredje stoumlrsta ekonomi paring 5 biljoner De har vaumlrldens ti-

onde stoumlrsta befolkning med ca 1271 miljoner invaringnare varav 70 av den totala befolk-

ningen anvaumlnder internet och 24 av dem anvaumlnder internet paring sin smarttelefon

(Khurana)

Viktigt med detta projekt aumlr att sikta aringt raumltt haringll och betjaumlna kunderna paring det baumlsta saumlttet

via webbplatsen Foumlr att kunna faringnga saring maringnga kunder som moumljligt aumlr det mycket viktigt

att designa en webbplats som aumlr anvaumlndarvaumlnlig stilig och laumltt att anvaumlnda (Wroblewski

2011)

Jag har daumlrfoumlr kommit underfund med att anvaumlnda Mobile first och Responsiv design

metoden foumlr att utveckla den mobila 909jp sidan Med tanke paring att det aumlr en Responsiv

design skall layouten paring den mobila versionen ocksaring passa in med de stoumlrre skaumlrmarna

naumlr sidan skalas upp Det aumlr dock viktigt poaumlngtera att jag endast kommer att koncentrera

mig paring den mobila designen och utveckla designen endast foumlr denna forskning

38

6 ANALYS AV DEN NYA DESIGNEN

Med hjaumllp av den tidigare designen paring 909jp och de kritiska punkterna jag har hittat under

forskningen har jag skapat en ny och foumlrbaumlttrad design av webbplatsen foumlr mobiler I det

haumlr kapitlet kommer jag att visa naringgra exempel paring den tidigare designen och jaumlmfoumlra den

med nya designen samt analysera arbetet

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger)

1 Call-to-action knapparna

Under hela arbetsprocessen har jag haft i minnet att navigeringar laumlnkar och knap-

parna ska vara tillraumlckligt stora att klicka paring I den tidigare designen har de stora

bilder paring kategorier vilket jag tycker aumlr en bra design att aringtervaumlnda

39

2 Soumlkfunktionen

Paring den tidigare versionen haumlr nedan ser man att soumlkfunktionen inte finns med

medan paring den nya designen ser man soumlkfunktionen genast naumlr man kommer till

sidan Som tidigare framfoumlrdes att soumlkfunktionen alltid ska synas saring att man laumltt

skall kunna soumlka fram produkterna Om soumlkfunktionen inte finns med eller aumlr svaringr

att hitta naumlr den behoumlvs kan det orsaka missnoumlje hos anvaumlndarna (Mehra Gagan

2015)

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp

Figur 63 Soumlkfunktionen paring den nya designen 909jp

40

3 Laumltt att navigera

Naumlr skaumlrmen aumlr liten aumlr det viktig att ha en enkel layout (Wroblewski 2011)

Jag har daumlrfor i den nya designen flyttat rdquoHemrdquo och rdquoBlogrdquo knapparna bort fraringn

den oumlvre menyn Hem-knappen finns nu i hamburgarmenyn paring vaumlnstra sidan me-

dan Blog-knappen finns i footer Detta goumlr att det ser mera organiserat ut

Figur 64 Gamla designen

Laringt oss foumlrflytta vidare till menyer foumlr kategorier Paring hemsidan har man tvaring alter-

nativ att naring kategorierna Foumlrsta aumlr den hamburgarmenyn knappen paring vaumlnstra si-

dan I menyn aumlr kategorierna indelade i fyra delar stolar lampor ergonomisk och

soffa amp middag Detta goumlr det laumltt och klart foumlr anvaumlndarna var produkterna finns

Eftersom vi bara har partiell uppmaumlrksamhet fraringn anvaumlndarna naumlr de aumlr paring sina

smarttelefoner har jag valt att saumltta in ikoner i menyn (Figur 65) Naumlr anvaumlndaren

bara anvaumlnder ena oumlgat foumlr att kolla paring mobilen och andra oumlgat foumlr naringgonting annat

ska den lilla skaumlrmen med webbplatsen kunna faringnga uppmaumlrksamheten samt un-

derlaumltta anvaumlndningen av webbplatsen (Wroblewski 2011)

41

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny

Andra menyn for kategorierna aumlr de fyra bilderna under Aeron chair slideshowen

Paring den tidigare designen ser man endast ett foumlnster av kategorierna som aumlr place-

rade i en kolumn som upprepas loggraumltt (Figur 66) Det haumlr goumlr att anvaumlndaren

maringste skrolla ner foumlr att se varenda kategori vilket kan orsaka obekvaumlmlighet Att

se flera kategorier paring samma skaumlrm sparar tid och anvaumlndaren kommer aumlven baumlttre

iharingg var sakerna finns Att ha bara rdquoenrdquo stor bild som syns paring skaumlrmen och vara

tvungen att skrolla ner foumlr att se naumlsta bild aumlr frustrerande Paring den nya designen

har jag tvaring rutor av kategorier bredvid varandra (Figur 66)

42

Figur 66 Kategorier paring den gamla designen (till vaumlnster) Kategorier paring den nya designen (till houmlger)

4 Ta det roliga ur shopping

Paring den nya designen straumlvar jag efter att erbjuda en bekvaumlm shopping-upplevelse

Naumlr anvaumlndarna besoumlker e-handeln med en smarttelefon foumlrvaumlntar hanhon sig

ocksaring att kunna ta del av allt inneharingll och goumlra jaumlmfoumlrelser med andra produkter

Jag har daumlrfoumlr i den nya designen pressat ihop laumlngden paring kolumnhoumljden som om-

ringar produkten Som resultat ser vi nu fyra produkter paring samma skaumlrm (Figur

67) I den tidigare designen ser vi en enda produkt paring en skaumlrm och foumlr att se

andra produkter maringste vi skrolla ner Paring det haumlr saumlttet har anvaumlndarna svaringrare att

jaumlmfoumlra produkterna (Laya 2014)

43

Figur 67 Tidigare produktsida (till vaumlnster) Ny produktsida (till houmlger)

I den tidigare designen ser vi ocksaring att det finns endast produktens bild produk-

tens namn koumlpvagnen och infoikonen Om man vill faring reda paring produktens inform-

ation maringste man klicka paring produktens bild eller paring infoikonen som foumlr oss direkt

till sjaumllva produktens sida Bara foumlr att man vill faring reda paring vad det aumlr foumlr produkt

foumlrs man vidare till en annan sida Det haumlr kan orsaka att kunden inte njuter totalt

av shoppingen och dessutom kan han inte jaumlmfoumlra produkterna naumlr han aumlr paring ka-

tegoriernas sida (Laya 2014)

Laringt oss hoppa vidare till den nya designen (Figur 68) Paring den nya designen har

jag satt in en kort detaljbeskrivning foumlr varje produkt Dessutom naumlr man klickar

paring infoikonen paring houmlgra sidan kommer man inte direkt till produktsidan utan det

kommer att dyka upp en inforuta som har en kort beskrivning paring produkten Om

anvaumlndaren aumlr intresserad av produkten kan han garing in till sjaumllva produktsida ge-

nom att klicka paring rdquoView productrdquo eller ocksaring paring produktbilden daumlr hanhon kan

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

24

6 Misslyckade analyseringar av anvaumlndarna

Naumlr man bygger webbsidor aumlr det viktig att goumlra anvaumlndbarhetstest och analysera

kundernas beteende Hur anvaumlndarna kaumlnner sig naumlr de anvaumlnder sidan aumlr mycket

viktigt och avgoumlr hur bra din business kommer att rulla

Analyseringen aumlr den kritiska inputen foumlr designen Med analyseringen ser man

dels vilka mobila apparater anvaumlndarna anvaumlnder och om det aumlr naringgra svaringrigheter

och obekvaumlmligheter anvaumlndarna upplever vid anvaumlndningen Dessa faktorer aumlr

viktiga foumlr att saumlkerstaumllla om den mobila upplevelsen uppfyller behoven hos kon-

sumenterna Testet och analysen maringste goumlras kontinuerligt foumlr att vi skall kunna

saumlkerstaumllla att kunderna har det bekvaumlmt (Mehra 2015)

7 Mindre inneharingll foumlr mobilanvaumlndarna

E-handel webbplatser brukar goumlmma inneharingll foumlr att goumlra sidan mindre Sidan aumlr

i sjaumllva verket inte mindre men bara goumlmd foumlr anvaumlndarna som anvaumlnder sina

smarttelefoner Enligt Mehra Gagan aumlr det inte bra om det finns mindre inneharingll

foumlr mobilanvaumlndarna Oavsett med vilka enheter anvaumlndarna aumlr paring sidan boumlr det

finnas lika mycket inneharingll paring alla enheterna De flesta som handlar online brukar

aumlga flera enheter och med stor sannolikhet anvaumlnder de ocksaring andra enheter foumlr

att surfa Om inneharingllet inte ser likadant ut paring stationaumlra datorer och smarttelefo-

ner kan det orsaka daringlig anvaumlndarupplevelse foumlr anvaumlndaren Enligt Google an-

vaumlnder 90 av dem som handlar paring internet olika enheter Att begraumlnsa deras

anvaumlndning aumlr naringgonting som man boumlr undvika (Mehra 2015)

25

3 MOBILANPASSADE LOumlSNINGAR

Det finns maringnga olika loumlsningar att bygga sin webbplats med Det aumlr viktigt att komma

iharingg att mobila anvaumlndande oumlkar hela tiden Det staumlller nya krav paring webbdesign och an-

vaumlndargraumlnssnitt Anvaumlndarna foumlrvaumlntar sig idag att de ska kunna ta del av allt inneharingll paring

webben oavsett om de anvaumlnder en smarttelefon eller en surfplatta De mobilanpassade

loumlsningarna foumlr e-handel kan tex vara Responsiv design Adaptiv Design Mobilbutik

eller en mobil applikation

31 Adaptiv design

En adaptiv webbplats aumlr uppbyggd saring att den aumlr optimerad foumlr specifika skaumlrmstorlekar

Den anvaumlnder servern foumlr att upptaumlcka den enhet som anvaumlnds foumlr att visa webbplatsen

Byggande av webbplatsen med adaptiv metoden aumlr tidskraumlvande paring grund av behovet att

optimera sidan foumlr varje vald plattform front-end och back-end Innan man boumlrjar bygga

webbplatsen maringste man avgoumlra vilka alla plattformar webbplatsen kommer att optimeras

till Foumlrdel med adaptiv design aumlr att den har snabb uppladdningstid

rdquoCompared to Responsiv design adaptive web design is website-optimised for each

platform separately and makes use of the opportunities presented by the platform as

well as the models and functions It offers fast-loading pages due to the server detec-

tion device and browser sending data tailored for a particular devicerdquo

-Lubo Ruska 2013

Att vaumllja den raumltta loumlsningen handlar om att foumlrstaring vad maringlgruppen foumlrvaumlntar sig och vad

de behoumlver Eftersom foumlretaget 909jp inte aumlr en jaumltte stort foumlretag saringsom Ikea eller Ama-

zon som har oberaumlknat antal med produkter tycker jag att Responsiv design med Mobile

first metoden aumlr den mest effektiva metoden foumlr denna forskning

26

32 Responsiv design

Responsiv webbdesign aumlr ett av de populaumlraste saumltten att optimera en webbplats Re-

sponsiv webbdesign moumljliggoumlr att layouten foumlraumlndras beroende paring vilken skaumlrmstorlek

och skaumlrmupploumlsningen som anvaumlndarna har och beroende paring vilka funktioner som

webblaumlsaren stoumldjer (Responsive Design 2014)

Oberoende om anvaumlndarna anvaumlnder dator laumlsplatta eller sin mobiltelefon kommer sidan

att anpassa sig paring olika saumltt foumlr att anvaumlndarna vid alla tillfaumlllen ska ha en saring rik upplevelse

som moumljligt Man kan saumlga att en webbsida paring mindre skaumlrmar aumlr med ett annat ord en

krympande version av den stoumlrre skaumlrmstorleken

Inneharingllet saringsom kolumner och bilder paring webbsidan kommer automatiskt att anpassas

beroende paring skaumlrmstorleken Och detta aumlr paring grund av Grid systemet Allt inneharingll skall

haringllas inom ett Grid system Grid systemet skall skydda allt fraringn att bryta samman naumlr

sidan anvaumlnds paring olika skaumlrmstorlekar

Det finns 11 olika Grid storlekar tvaring kolumner tre kolumner fyra kolumner fem kolum-

ner sex kolumner sju kolumner aringtta kolumner nio kolumner tio kolumner 11 kolumner

och 12 kolumner Som exempel visar jag en figur av 12 kolumners Grid system (Swan

2014)

27

Figur 31 Ett exempel paring Grid system av 5 olika skaumlrmstorlekar (Phil Swan 2014)

Responsiv webbdesign fungerar med hjaumllp av HTML5 CSS media Query och Java-

Script Det bygger paring att webbutvecklare istaumlllet foumlr exakta storlekar maumltt i pixlar anger

sidelements storlekar i procent i jaumlmfoumlrelse med skaumlrmens storlek

Naumlr sidelementens storlekar aumlr i procent goumlr det att sidan blir flexibel och den anpassas

efter webblaumlsarens storlek medan fasta pixlar ger en scrollbar (rull-list) (Responsive De-

sign 2014)

33 Varfoumlr Responsiv design

Foumlrdelar med Responsiv design aumlr att den erbjuder en bra anvaumlndarupplevelse foumlr olika

enheter och skaumlrmstorlekar Tack vare den Responsiva designen har webbredaktoumlrer laumlt-

tare att hantera inneharingllet eftersom de bara har en version att hantera Ur en SEO synvin-

kel fungerar Responsiv design baumlttre eftersom den koncentrerar inneharingllet istaumlllet foumlr att

vattna ur det med maringnga URL foumlr samma inneharingll

28

Med en Responsiv design aumlr en webbplats laumlttare att hantera Att ha flera olika versioner

av en webbplats innebaumlr mera arbete Flera olika versioner av en webbplats innebaumlr sepa-

rata sidor att redigera och separata insatser foumlr soumlkmotoroptimering och separata soumlkmo-

torkampanjer Daumlrfoumlr aumlr det en stor foumlrdel att bygga en webbplats med den Responsiva

metoden

Med en Responsiv design kaumlnner anvaumlndarna baumlttre igen sidan baringde paring stationaumlra datorer

och mobiltelefoner Bygger man specifika webbplatser foumlr mobiler och surfplattor kan

det laumltt haumlnda att det blir olika information paring webbplatserna och att de struktureras olika

Laringt oss foumlrestaumllla oss att naringgon anvaumlnder sin mobiltelefon paring lunchen foumlr att leta efter en

flygbiljett fraringn Helsingfors till Tokyo Personen hittar en webbplats som har bra erbju-

dande och bestaumlmmer sig foumlr att fortsaumltta kolla naumlr han eller hon kommer hem Naumlr per-

sonen har kommit hem anvaumlnder hen datorn istaumlllet foumlr mobilen Om webbplatsen som

personen kollade paring lunchpausen var en Responsiv webbplats faringr personen en smidig och

bra upplevelse vid oumlvergaringngen fraringn den mobila webbplatsen till stationaumlr dator

(Lindahl 2014)

Det aumlr vaumlldigt viktigt att ha sin webbplats att optimerad till saring maringnga enheter som moumljligt

foumlr att ingen vet vilka kommer att vara framtidens enheter och daumlrfoumlr anses en webbplats

som anpassar sig till maringnga olika format vara den baumlsta loumlsningen Innan man kan boumlrja

med att designa en Responsiv webbplats maringste man veta vilka skaumlrmupploumlsningar och

storlekar det finns tillgaumlngliga och aumlr populaumlra idag Foumlr att kunna rikta till de olika skaumlr-

mupploumlsningarna med Media Queries har jag listat upp olika enheternas skaumlrmupploumls-

ningar i pixlar haumlr nedan i tabellen

ResolutionGrafisk array Enhet som anvaumlnder denna resolution skaumlrmstorlek i pixel-

taumltheten i pixlar

2880x1800 15-inch Apple MacBook Pro with Retina display

2560 x 1700 Google Chromebook Pixel

2560 x 1600 Samsung Google Nexus 10

13-inch Apple MacBook Pro with Retina display

29

2560 x 1440 27-inch Apple iMac 102 111 113 122 (Late 2009 -

2012)

1920 x 1080 HTC One Samsung

Sony Xperia Z amp Xperia ZL

Asus PadFone Infinity

Acer Aspire S5

Asus Zenbook Prime

1600 x 900 Apple Macbook Air

1366 x 768 Small desktoplaptop screen resolution

Asus VivoTab RT

Samsung N350

1280 x 1024 Standard desktop screen resolution

1280 x 800 Asus PadFone 2

Samsung Galaxy Note

Sony Xperia Tablet S

1280 x 720 Sony Xperia S

HTC Windows Phone 8X

HTC One mini

1136 x 640 Apple iPhone 5 5S amp 5C

Apple iPod Touch (5th generation)

960 x 640 Apple iPhone 4 amp 4S

Apple iPod Touch (4th generation)

854 x 480 Sony Xperia ray

Nokia N9

800 x 480 Nokia Lumia 510 amp 520

Samsung Galaxy I Galaxy S Galaxy S Plus Galaxy S Ad-

vance Galaxy SL Galaxy S Duos Galaxy Xcover 2 Galaxy

Beam Nexus S Captivate Glide amp Galaxy S III mini

HTC Desire X HTC Desire V Desire VC Desire VT De-

sire U amp Windows Phone 8S

30

LG Optimus 2X Optimus EX Optimus L5 II Optimus Q2

amp Optimus Black

T-Mobile G2x

Asus E600

620 x 480 Blackberry Bold 9900 amp Bold Touch 9930

Blackberry Torch 9810

LG Optimus Z

640 x 360 Sony Ericsson Vivaz amp Vivaz Pro

Nokia 500 amp 5800 XpressMusic

Nokia N8 N97 E7 and X6

480 x 320 Apple iPhone 3G amp 3GS

Samsung Galaxy Ace

320 x 240 Nokia E71

Blackberry Curve 9220 amp 9320

Sony Ericsson txt

Samsung Galaxy Y amp Galaxy Chat

Nokia Asha 501

Figur 32 Resolutions referenser paring olika enheter

31

4 VAD AumlR MOBILE FIRST

Mobile first metoden aumlr en metod och arbetsprocess foumlr webbdesigners som aumlr skapad av

Luke Wroblewski Naumlr man jobbar med ett projekt och designar strukturerar och imple-

menterar en webbplats aumlr Mobile first metoden man paringboumlrjar arbetet med Med metoden

menar Wroblewski att man foumlrst boumlrjar designa webbsidor fraringn de minsta enheterna

Figur 41 Mobile First att bygga webbsidan fraringn den minsta skaumlrmen till den stoumlrsta skaumlrmen

Wroblewski som har skapat Mobile First metoden understryker att metoden ska priorite-

ras daring man skapar anvaumlndarupplevelser

Det finns tre viktiga anledningar foumlr att utveckla foumlr Mobile First

Den foumlrbereder foumlr den stora utveckling och nya moumljligheter som uppkommer

inom det mobila omraringdet idag (836 av vaumlrldens befolkning anvaumlnder internet

paring sin smarttelefon 2015)

Den goumlr att vi blir tvungna att prioritera och fokusera varingrt inneharingll genom att ac-

ceptera de begraumlnsningar som aumlr foumlrenade med mobil design

32

och goumlr att vi kan leverera innovativa upplevelser genom att bygga utifraringn nya

funktioner som finns inbyggda i de mobila enheterna (bla GEO lokalisering)

En mobil webbplats behoumlver endast ha en mycket enkel layout och navigeringen ska vara

laumltt och effektiv

Naumlr man designar med Mobile first metoden tvingas man goumlra viktiga beslut om vad som

ska prioriteras Naumlr den optimerad design foumlr en liten skaumlrm visas paring en stoumlrre skaumlrm

kommer det att bli laumlttare att designa paring de stoumlrre skaumlrmarna Allt som ska goumlras aumlr daring

bara att fylla paring inneharingllet och designa saring att det aumlr grafiskt tilltalande och laumltt att hitta

inneharingllet (Wroblewski 2011)

41 Varfoumlr Mobile first

Vaumlrlden vi lever i idag aumlr inte mera som foumlr tio aringr sedan Allt runtom oss har utvecklats

speciellt mobiltelefonerna Tidigare anvaumlndes mobiltelefoner bara foumlr att skicka med-

delandet ringa och ta emot samtal Nu anvaumlnds den till foumlr att dels ta bilder video GPS

navigation foumlr vaumlgvisning och speciellt internetanvaumlndningen saringsom Google nyheter

Facebook Youtube och mycket mer Paring grund av det har ocksaring varingr livsstil foumlraumlndrats

Internetanvaumlndning idag har blivit allt vanligare Idag anvaumlnder vi naumltet i skolan paring jobbet

eller var och naumlr som helst bara man har en smarttelefon eller surfplatta och naumltet kopplat

Tidigare boumlrjade man bygga en webbplats fraringn den stoumlrsta skaumlrmen medan den mobila

sidan var en biprodukt Laringt oss saumlga att man har en webbplats med en rik grafisk layout

och ser stilig ut paring stationaumlra datorer Naumlr man skalar ner sidan foumlr att passa en mobilskaumlrm

kommer resultatet att vara en smaumlrta foumlr varingra oumlgon Paring den lilla mobilskaumlrmen kommer

det att vara olaumlsligt och svaringrt att anvaumlnda Foumlr att naring inneharingllet maringste du tom zooma in

och ut eller skrolla till houmlger och vaumlnster Det haumlr kommer att ge en negativ bild av ditt

foumlretag och anvaumlndarna kanske aldrig mera besoumlker din webbplats (Wroblewski 2011)

Ett bra exempel aumlr Tokyo Skytree webbplats som aumlnnu idag inte ha byggt in funktionalitet

och designen foumlr mindre skaumlrmupploumlsningar paring den engelska sidan

33

Tokyo Skytree aumlr vaumlrldens naumlst houmlgsta torn efter Burj Khalifa Tornet aumlr Japans houmlgsta

byggnadsverk med en houmljd paring 634 meter Den oumlppnades 22 maj 2012 och under det foumlrsta

aringret hade den 64 miljoner besoumlkare fraringn hela vaumlrlden Trots det har de laringtit bli att utveckla

den engelska webbsidan Paring bilden ser man att hemsidan ser exakt likadant ut paring stationaumlr

dator och paring mobilen

Figur 42 Hemsidan paring Tokyo Skytree paring stationaumlr datorskaumlrm

34

Figur 43 Hemsidan foumlr Tokyo Skytree Foumlrsta bilden visar hur det ser ut normalt Andra bilden visar naumlr man zoomar

in

Naumlr man foumlrsoumlker zooma in foumlr att laumlsa inneharingllet hoppar sidbalken (paring vaumlnstra sidan) paring

texten Det haumlr ger en mycket daringlig anvaumlndarupplevelse och kan ge fel bild av turistplat-

sen Ett annat fel paring sidan aumlr naumlr man vaumlljer spraringk till japanska ser sidan inte likadant ut

35

Figure 44 Hemsidan paring Tokyo Skytree paring japanska

Om du kan laumlsa japanska kommer du att undra varfoumlr det finns massor med information

och sidan ser mycket trevligare ut paring den japanska sidan Paring den internationella sidan

dvs engelska ser det inte lika trevligt ut och inneharingller inte allt som det goumlr paring den

japanska sidan Det aumlr som om den stoumlrsta maringlgruppen aumlr foumlr japanska turister och som

om de skulle inte bry sig om turister fraringn utlandet

Utoumlver det har de ocksaring byggt en mobilsida foumlr den japanska webbsidan Varfoumlr satsa bara

paring den japanska sidan och inte den engelska sidan naumlr maringlgruppen aumlr hela vaumlrlden

36

Figur 45 Mobil sidan paring Tokyo Skytree paring japanska

Vi lever i 2015 saring alla borde veta att det aumlr vaumlldigt viktig att ha en mobil webbplats som

erbjuder en bra anvaumlndarupplevelse paring alla spraringk som webbplatsen erbjuder Naumlr man har

sin sida paring flera spraringk och aumlndaring bestaumlmmer sig att bygga sidan ordentligt bara paring ett spraringk

kan anvaumlndarna faring en fel bild av foumlretaget I vaumlrsta fall kommer anvaumlndarna tycka att sidan

aumlr oparinglitligt och aringterkommer aldrig igen

Mobile first metoden aumlr daumlrfoumlr en mycket effektiv metod att bygga sin webbplats med

Man boumlrjar med att bygga sin webbplats fraringn den minsta skaumlrmen Man tvingas goumlra be-

slut om vad som ska absolut prioriteras Arbetsprocessen foumlr oss webbdesigners blir

mycket effektivare genom att foumlrst designa fraringn den minsta skaumlrmen och sedan foumlrflytta

oss till de stoumlrre skaumlrmarna Har man ett 6 kvadratmeters sovrum och foumlrsoumlker faring sin saumlng

skrivbord hylla klaumldskaringp och soffan att rymmas in aumlr det ganska utmanande Men naumlr

man boumlrjar med det mest utmanande i arbetsprocessen blir arbetet ocksaring mindre utma-

nande desto stoumlrre rum eller skaumlrm det blir (Wroblewski 2011)

37

5 909JP

909jp aumlr en elektronisk handel en moumlbelaffaumlr som saumlljer vaumlsterlaumlndska produkter Den

elektroniska butiken kommer att oumlppnas i Japan 2015 Deras foumlrvaumlntningar aumlr att faring in

en miljon dollar i foumlrsaumlljning per aringr I deras elektroniska moumlbelaffaumlr saumlljs bla stolar bord

soffor och lampor Maringlgruppen aumlr alla konsumenter mellan 18-60 aringringar

Japaner aumlr intresserade av vaumlsterlaumlndska produkter och livsstil men foumlr de flesta varor aumlr

designen knutna till deras egen kultur vilket goumlr dem mer intresserad Det aumlr ocksaring mycket

viktigt att ha sin hemsida paring japanska eftersom 99 av den japanska befolkningen foumlre-

drar att inte laumlsa inneharingllet paring andra spraringk (Khurana)

Japan aumlr ett land med vaumlrldens tredje stoumlrsta ekonomi paring 5 biljoner De har vaumlrldens ti-

onde stoumlrsta befolkning med ca 1271 miljoner invaringnare varav 70 av den totala befolk-

ningen anvaumlnder internet och 24 av dem anvaumlnder internet paring sin smarttelefon

(Khurana)

Viktigt med detta projekt aumlr att sikta aringt raumltt haringll och betjaumlna kunderna paring det baumlsta saumlttet

via webbplatsen Foumlr att kunna faringnga saring maringnga kunder som moumljligt aumlr det mycket viktigt

att designa en webbplats som aumlr anvaumlndarvaumlnlig stilig och laumltt att anvaumlnda (Wroblewski

2011)

Jag har daumlrfoumlr kommit underfund med att anvaumlnda Mobile first och Responsiv design

metoden foumlr att utveckla den mobila 909jp sidan Med tanke paring att det aumlr en Responsiv

design skall layouten paring den mobila versionen ocksaring passa in med de stoumlrre skaumlrmarna

naumlr sidan skalas upp Det aumlr dock viktigt poaumlngtera att jag endast kommer att koncentrera

mig paring den mobila designen och utveckla designen endast foumlr denna forskning

38

6 ANALYS AV DEN NYA DESIGNEN

Med hjaumllp av den tidigare designen paring 909jp och de kritiska punkterna jag har hittat under

forskningen har jag skapat en ny och foumlrbaumlttrad design av webbplatsen foumlr mobiler I det

haumlr kapitlet kommer jag att visa naringgra exempel paring den tidigare designen och jaumlmfoumlra den

med nya designen samt analysera arbetet

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger)

1 Call-to-action knapparna

Under hela arbetsprocessen har jag haft i minnet att navigeringar laumlnkar och knap-

parna ska vara tillraumlckligt stora att klicka paring I den tidigare designen har de stora

bilder paring kategorier vilket jag tycker aumlr en bra design att aringtervaumlnda

39

2 Soumlkfunktionen

Paring den tidigare versionen haumlr nedan ser man att soumlkfunktionen inte finns med

medan paring den nya designen ser man soumlkfunktionen genast naumlr man kommer till

sidan Som tidigare framfoumlrdes att soumlkfunktionen alltid ska synas saring att man laumltt

skall kunna soumlka fram produkterna Om soumlkfunktionen inte finns med eller aumlr svaringr

att hitta naumlr den behoumlvs kan det orsaka missnoumlje hos anvaumlndarna (Mehra Gagan

2015)

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp

Figur 63 Soumlkfunktionen paring den nya designen 909jp

40

3 Laumltt att navigera

Naumlr skaumlrmen aumlr liten aumlr det viktig att ha en enkel layout (Wroblewski 2011)

Jag har daumlrfor i den nya designen flyttat rdquoHemrdquo och rdquoBlogrdquo knapparna bort fraringn

den oumlvre menyn Hem-knappen finns nu i hamburgarmenyn paring vaumlnstra sidan me-

dan Blog-knappen finns i footer Detta goumlr att det ser mera organiserat ut

Figur 64 Gamla designen

Laringt oss foumlrflytta vidare till menyer foumlr kategorier Paring hemsidan har man tvaring alter-

nativ att naring kategorierna Foumlrsta aumlr den hamburgarmenyn knappen paring vaumlnstra si-

dan I menyn aumlr kategorierna indelade i fyra delar stolar lampor ergonomisk och

soffa amp middag Detta goumlr det laumltt och klart foumlr anvaumlndarna var produkterna finns

Eftersom vi bara har partiell uppmaumlrksamhet fraringn anvaumlndarna naumlr de aumlr paring sina

smarttelefoner har jag valt att saumltta in ikoner i menyn (Figur 65) Naumlr anvaumlndaren

bara anvaumlnder ena oumlgat foumlr att kolla paring mobilen och andra oumlgat foumlr naringgonting annat

ska den lilla skaumlrmen med webbplatsen kunna faringnga uppmaumlrksamheten samt un-

derlaumltta anvaumlndningen av webbplatsen (Wroblewski 2011)

41

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny

Andra menyn for kategorierna aumlr de fyra bilderna under Aeron chair slideshowen

Paring den tidigare designen ser man endast ett foumlnster av kategorierna som aumlr place-

rade i en kolumn som upprepas loggraumltt (Figur 66) Det haumlr goumlr att anvaumlndaren

maringste skrolla ner foumlr att se varenda kategori vilket kan orsaka obekvaumlmlighet Att

se flera kategorier paring samma skaumlrm sparar tid och anvaumlndaren kommer aumlven baumlttre

iharingg var sakerna finns Att ha bara rdquoenrdquo stor bild som syns paring skaumlrmen och vara

tvungen att skrolla ner foumlr att se naumlsta bild aumlr frustrerande Paring den nya designen

har jag tvaring rutor av kategorier bredvid varandra (Figur 66)

42

Figur 66 Kategorier paring den gamla designen (till vaumlnster) Kategorier paring den nya designen (till houmlger)

4 Ta det roliga ur shopping

Paring den nya designen straumlvar jag efter att erbjuda en bekvaumlm shopping-upplevelse

Naumlr anvaumlndarna besoumlker e-handeln med en smarttelefon foumlrvaumlntar hanhon sig

ocksaring att kunna ta del av allt inneharingll och goumlra jaumlmfoumlrelser med andra produkter

Jag har daumlrfoumlr i den nya designen pressat ihop laumlngden paring kolumnhoumljden som om-

ringar produkten Som resultat ser vi nu fyra produkter paring samma skaumlrm (Figur

67) I den tidigare designen ser vi en enda produkt paring en skaumlrm och foumlr att se

andra produkter maringste vi skrolla ner Paring det haumlr saumlttet har anvaumlndarna svaringrare att

jaumlmfoumlra produkterna (Laya 2014)

43

Figur 67 Tidigare produktsida (till vaumlnster) Ny produktsida (till houmlger)

I den tidigare designen ser vi ocksaring att det finns endast produktens bild produk-

tens namn koumlpvagnen och infoikonen Om man vill faring reda paring produktens inform-

ation maringste man klicka paring produktens bild eller paring infoikonen som foumlr oss direkt

till sjaumllva produktens sida Bara foumlr att man vill faring reda paring vad det aumlr foumlr produkt

foumlrs man vidare till en annan sida Det haumlr kan orsaka att kunden inte njuter totalt

av shoppingen och dessutom kan han inte jaumlmfoumlra produkterna naumlr han aumlr paring ka-

tegoriernas sida (Laya 2014)

Laringt oss hoppa vidare till den nya designen (Figur 68) Paring den nya designen har

jag satt in en kort detaljbeskrivning foumlr varje produkt Dessutom naumlr man klickar

paring infoikonen paring houmlgra sidan kommer man inte direkt till produktsidan utan det

kommer att dyka upp en inforuta som har en kort beskrivning paring produkten Om

anvaumlndaren aumlr intresserad av produkten kan han garing in till sjaumllva produktsida ge-

nom att klicka paring rdquoView productrdquo eller ocksaring paring produktbilden daumlr hanhon kan

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

25

3 MOBILANPASSADE LOumlSNINGAR

Det finns maringnga olika loumlsningar att bygga sin webbplats med Det aumlr viktigt att komma

iharingg att mobila anvaumlndande oumlkar hela tiden Det staumlller nya krav paring webbdesign och an-

vaumlndargraumlnssnitt Anvaumlndarna foumlrvaumlntar sig idag att de ska kunna ta del av allt inneharingll paring

webben oavsett om de anvaumlnder en smarttelefon eller en surfplatta De mobilanpassade

loumlsningarna foumlr e-handel kan tex vara Responsiv design Adaptiv Design Mobilbutik

eller en mobil applikation

31 Adaptiv design

En adaptiv webbplats aumlr uppbyggd saring att den aumlr optimerad foumlr specifika skaumlrmstorlekar

Den anvaumlnder servern foumlr att upptaumlcka den enhet som anvaumlnds foumlr att visa webbplatsen

Byggande av webbplatsen med adaptiv metoden aumlr tidskraumlvande paring grund av behovet att

optimera sidan foumlr varje vald plattform front-end och back-end Innan man boumlrjar bygga

webbplatsen maringste man avgoumlra vilka alla plattformar webbplatsen kommer att optimeras

till Foumlrdel med adaptiv design aumlr att den har snabb uppladdningstid

rdquoCompared to Responsiv design adaptive web design is website-optimised for each

platform separately and makes use of the opportunities presented by the platform as

well as the models and functions It offers fast-loading pages due to the server detec-

tion device and browser sending data tailored for a particular devicerdquo

-Lubo Ruska 2013

Att vaumllja den raumltta loumlsningen handlar om att foumlrstaring vad maringlgruppen foumlrvaumlntar sig och vad

de behoumlver Eftersom foumlretaget 909jp inte aumlr en jaumltte stort foumlretag saringsom Ikea eller Ama-

zon som har oberaumlknat antal med produkter tycker jag att Responsiv design med Mobile

first metoden aumlr den mest effektiva metoden foumlr denna forskning

26

32 Responsiv design

Responsiv webbdesign aumlr ett av de populaumlraste saumltten att optimera en webbplats Re-

sponsiv webbdesign moumljliggoumlr att layouten foumlraumlndras beroende paring vilken skaumlrmstorlek

och skaumlrmupploumlsningen som anvaumlndarna har och beroende paring vilka funktioner som

webblaumlsaren stoumldjer (Responsive Design 2014)

Oberoende om anvaumlndarna anvaumlnder dator laumlsplatta eller sin mobiltelefon kommer sidan

att anpassa sig paring olika saumltt foumlr att anvaumlndarna vid alla tillfaumlllen ska ha en saring rik upplevelse

som moumljligt Man kan saumlga att en webbsida paring mindre skaumlrmar aumlr med ett annat ord en

krympande version av den stoumlrre skaumlrmstorleken

Inneharingllet saringsom kolumner och bilder paring webbsidan kommer automatiskt att anpassas

beroende paring skaumlrmstorleken Och detta aumlr paring grund av Grid systemet Allt inneharingll skall

haringllas inom ett Grid system Grid systemet skall skydda allt fraringn att bryta samman naumlr

sidan anvaumlnds paring olika skaumlrmstorlekar

Det finns 11 olika Grid storlekar tvaring kolumner tre kolumner fyra kolumner fem kolum-

ner sex kolumner sju kolumner aringtta kolumner nio kolumner tio kolumner 11 kolumner

och 12 kolumner Som exempel visar jag en figur av 12 kolumners Grid system (Swan

2014)

27

Figur 31 Ett exempel paring Grid system av 5 olika skaumlrmstorlekar (Phil Swan 2014)

Responsiv webbdesign fungerar med hjaumllp av HTML5 CSS media Query och Java-

Script Det bygger paring att webbutvecklare istaumlllet foumlr exakta storlekar maumltt i pixlar anger

sidelements storlekar i procent i jaumlmfoumlrelse med skaumlrmens storlek

Naumlr sidelementens storlekar aumlr i procent goumlr det att sidan blir flexibel och den anpassas

efter webblaumlsarens storlek medan fasta pixlar ger en scrollbar (rull-list) (Responsive De-

sign 2014)

33 Varfoumlr Responsiv design

Foumlrdelar med Responsiv design aumlr att den erbjuder en bra anvaumlndarupplevelse foumlr olika

enheter och skaumlrmstorlekar Tack vare den Responsiva designen har webbredaktoumlrer laumlt-

tare att hantera inneharingllet eftersom de bara har en version att hantera Ur en SEO synvin-

kel fungerar Responsiv design baumlttre eftersom den koncentrerar inneharingllet istaumlllet foumlr att

vattna ur det med maringnga URL foumlr samma inneharingll

28

Med en Responsiv design aumlr en webbplats laumlttare att hantera Att ha flera olika versioner

av en webbplats innebaumlr mera arbete Flera olika versioner av en webbplats innebaumlr sepa-

rata sidor att redigera och separata insatser foumlr soumlkmotoroptimering och separata soumlkmo-

torkampanjer Daumlrfoumlr aumlr det en stor foumlrdel att bygga en webbplats med den Responsiva

metoden

Med en Responsiv design kaumlnner anvaumlndarna baumlttre igen sidan baringde paring stationaumlra datorer

och mobiltelefoner Bygger man specifika webbplatser foumlr mobiler och surfplattor kan

det laumltt haumlnda att det blir olika information paring webbplatserna och att de struktureras olika

Laringt oss foumlrestaumllla oss att naringgon anvaumlnder sin mobiltelefon paring lunchen foumlr att leta efter en

flygbiljett fraringn Helsingfors till Tokyo Personen hittar en webbplats som har bra erbju-

dande och bestaumlmmer sig foumlr att fortsaumltta kolla naumlr han eller hon kommer hem Naumlr per-

sonen har kommit hem anvaumlnder hen datorn istaumlllet foumlr mobilen Om webbplatsen som

personen kollade paring lunchpausen var en Responsiv webbplats faringr personen en smidig och

bra upplevelse vid oumlvergaringngen fraringn den mobila webbplatsen till stationaumlr dator

(Lindahl 2014)

Det aumlr vaumlldigt viktigt att ha sin webbplats att optimerad till saring maringnga enheter som moumljligt

foumlr att ingen vet vilka kommer att vara framtidens enheter och daumlrfoumlr anses en webbplats

som anpassar sig till maringnga olika format vara den baumlsta loumlsningen Innan man kan boumlrja

med att designa en Responsiv webbplats maringste man veta vilka skaumlrmupploumlsningar och

storlekar det finns tillgaumlngliga och aumlr populaumlra idag Foumlr att kunna rikta till de olika skaumlr-

mupploumlsningarna med Media Queries har jag listat upp olika enheternas skaumlrmupploumls-

ningar i pixlar haumlr nedan i tabellen

ResolutionGrafisk array Enhet som anvaumlnder denna resolution skaumlrmstorlek i pixel-

taumltheten i pixlar

2880x1800 15-inch Apple MacBook Pro with Retina display

2560 x 1700 Google Chromebook Pixel

2560 x 1600 Samsung Google Nexus 10

13-inch Apple MacBook Pro with Retina display

29

2560 x 1440 27-inch Apple iMac 102 111 113 122 (Late 2009 -

2012)

1920 x 1080 HTC One Samsung

Sony Xperia Z amp Xperia ZL

Asus PadFone Infinity

Acer Aspire S5

Asus Zenbook Prime

1600 x 900 Apple Macbook Air

1366 x 768 Small desktoplaptop screen resolution

Asus VivoTab RT

Samsung N350

1280 x 1024 Standard desktop screen resolution

1280 x 800 Asus PadFone 2

Samsung Galaxy Note

Sony Xperia Tablet S

1280 x 720 Sony Xperia S

HTC Windows Phone 8X

HTC One mini

1136 x 640 Apple iPhone 5 5S amp 5C

Apple iPod Touch (5th generation)

960 x 640 Apple iPhone 4 amp 4S

Apple iPod Touch (4th generation)

854 x 480 Sony Xperia ray

Nokia N9

800 x 480 Nokia Lumia 510 amp 520

Samsung Galaxy I Galaxy S Galaxy S Plus Galaxy S Ad-

vance Galaxy SL Galaxy S Duos Galaxy Xcover 2 Galaxy

Beam Nexus S Captivate Glide amp Galaxy S III mini

HTC Desire X HTC Desire V Desire VC Desire VT De-

sire U amp Windows Phone 8S

30

LG Optimus 2X Optimus EX Optimus L5 II Optimus Q2

amp Optimus Black

T-Mobile G2x

Asus E600

620 x 480 Blackberry Bold 9900 amp Bold Touch 9930

Blackberry Torch 9810

LG Optimus Z

640 x 360 Sony Ericsson Vivaz amp Vivaz Pro

Nokia 500 amp 5800 XpressMusic

Nokia N8 N97 E7 and X6

480 x 320 Apple iPhone 3G amp 3GS

Samsung Galaxy Ace

320 x 240 Nokia E71

Blackberry Curve 9220 amp 9320

Sony Ericsson txt

Samsung Galaxy Y amp Galaxy Chat

Nokia Asha 501

Figur 32 Resolutions referenser paring olika enheter

31

4 VAD AumlR MOBILE FIRST

Mobile first metoden aumlr en metod och arbetsprocess foumlr webbdesigners som aumlr skapad av

Luke Wroblewski Naumlr man jobbar med ett projekt och designar strukturerar och imple-

menterar en webbplats aumlr Mobile first metoden man paringboumlrjar arbetet med Med metoden

menar Wroblewski att man foumlrst boumlrjar designa webbsidor fraringn de minsta enheterna

Figur 41 Mobile First att bygga webbsidan fraringn den minsta skaumlrmen till den stoumlrsta skaumlrmen

Wroblewski som har skapat Mobile First metoden understryker att metoden ska priorite-

ras daring man skapar anvaumlndarupplevelser

Det finns tre viktiga anledningar foumlr att utveckla foumlr Mobile First

Den foumlrbereder foumlr den stora utveckling och nya moumljligheter som uppkommer

inom det mobila omraringdet idag (836 av vaumlrldens befolkning anvaumlnder internet

paring sin smarttelefon 2015)

Den goumlr att vi blir tvungna att prioritera och fokusera varingrt inneharingll genom att ac-

ceptera de begraumlnsningar som aumlr foumlrenade med mobil design

32

och goumlr att vi kan leverera innovativa upplevelser genom att bygga utifraringn nya

funktioner som finns inbyggda i de mobila enheterna (bla GEO lokalisering)

En mobil webbplats behoumlver endast ha en mycket enkel layout och navigeringen ska vara

laumltt och effektiv

Naumlr man designar med Mobile first metoden tvingas man goumlra viktiga beslut om vad som

ska prioriteras Naumlr den optimerad design foumlr en liten skaumlrm visas paring en stoumlrre skaumlrm

kommer det att bli laumlttare att designa paring de stoumlrre skaumlrmarna Allt som ska goumlras aumlr daring

bara att fylla paring inneharingllet och designa saring att det aumlr grafiskt tilltalande och laumltt att hitta

inneharingllet (Wroblewski 2011)

41 Varfoumlr Mobile first

Vaumlrlden vi lever i idag aumlr inte mera som foumlr tio aringr sedan Allt runtom oss har utvecklats

speciellt mobiltelefonerna Tidigare anvaumlndes mobiltelefoner bara foumlr att skicka med-

delandet ringa och ta emot samtal Nu anvaumlnds den till foumlr att dels ta bilder video GPS

navigation foumlr vaumlgvisning och speciellt internetanvaumlndningen saringsom Google nyheter

Facebook Youtube och mycket mer Paring grund av det har ocksaring varingr livsstil foumlraumlndrats

Internetanvaumlndning idag har blivit allt vanligare Idag anvaumlnder vi naumltet i skolan paring jobbet

eller var och naumlr som helst bara man har en smarttelefon eller surfplatta och naumltet kopplat

Tidigare boumlrjade man bygga en webbplats fraringn den stoumlrsta skaumlrmen medan den mobila

sidan var en biprodukt Laringt oss saumlga att man har en webbplats med en rik grafisk layout

och ser stilig ut paring stationaumlra datorer Naumlr man skalar ner sidan foumlr att passa en mobilskaumlrm

kommer resultatet att vara en smaumlrta foumlr varingra oumlgon Paring den lilla mobilskaumlrmen kommer

det att vara olaumlsligt och svaringrt att anvaumlnda Foumlr att naring inneharingllet maringste du tom zooma in

och ut eller skrolla till houmlger och vaumlnster Det haumlr kommer att ge en negativ bild av ditt

foumlretag och anvaumlndarna kanske aldrig mera besoumlker din webbplats (Wroblewski 2011)

Ett bra exempel aumlr Tokyo Skytree webbplats som aumlnnu idag inte ha byggt in funktionalitet

och designen foumlr mindre skaumlrmupploumlsningar paring den engelska sidan

33

Tokyo Skytree aumlr vaumlrldens naumlst houmlgsta torn efter Burj Khalifa Tornet aumlr Japans houmlgsta

byggnadsverk med en houmljd paring 634 meter Den oumlppnades 22 maj 2012 och under det foumlrsta

aringret hade den 64 miljoner besoumlkare fraringn hela vaumlrlden Trots det har de laringtit bli att utveckla

den engelska webbsidan Paring bilden ser man att hemsidan ser exakt likadant ut paring stationaumlr

dator och paring mobilen

Figur 42 Hemsidan paring Tokyo Skytree paring stationaumlr datorskaumlrm

34

Figur 43 Hemsidan foumlr Tokyo Skytree Foumlrsta bilden visar hur det ser ut normalt Andra bilden visar naumlr man zoomar

in

Naumlr man foumlrsoumlker zooma in foumlr att laumlsa inneharingllet hoppar sidbalken (paring vaumlnstra sidan) paring

texten Det haumlr ger en mycket daringlig anvaumlndarupplevelse och kan ge fel bild av turistplat-

sen Ett annat fel paring sidan aumlr naumlr man vaumlljer spraringk till japanska ser sidan inte likadant ut

35

Figure 44 Hemsidan paring Tokyo Skytree paring japanska

Om du kan laumlsa japanska kommer du att undra varfoumlr det finns massor med information

och sidan ser mycket trevligare ut paring den japanska sidan Paring den internationella sidan

dvs engelska ser det inte lika trevligt ut och inneharingller inte allt som det goumlr paring den

japanska sidan Det aumlr som om den stoumlrsta maringlgruppen aumlr foumlr japanska turister och som

om de skulle inte bry sig om turister fraringn utlandet

Utoumlver det har de ocksaring byggt en mobilsida foumlr den japanska webbsidan Varfoumlr satsa bara

paring den japanska sidan och inte den engelska sidan naumlr maringlgruppen aumlr hela vaumlrlden

36

Figur 45 Mobil sidan paring Tokyo Skytree paring japanska

Vi lever i 2015 saring alla borde veta att det aumlr vaumlldigt viktig att ha en mobil webbplats som

erbjuder en bra anvaumlndarupplevelse paring alla spraringk som webbplatsen erbjuder Naumlr man har

sin sida paring flera spraringk och aumlndaring bestaumlmmer sig att bygga sidan ordentligt bara paring ett spraringk

kan anvaumlndarna faring en fel bild av foumlretaget I vaumlrsta fall kommer anvaumlndarna tycka att sidan

aumlr oparinglitligt och aringterkommer aldrig igen

Mobile first metoden aumlr daumlrfoumlr en mycket effektiv metod att bygga sin webbplats med

Man boumlrjar med att bygga sin webbplats fraringn den minsta skaumlrmen Man tvingas goumlra be-

slut om vad som ska absolut prioriteras Arbetsprocessen foumlr oss webbdesigners blir

mycket effektivare genom att foumlrst designa fraringn den minsta skaumlrmen och sedan foumlrflytta

oss till de stoumlrre skaumlrmarna Har man ett 6 kvadratmeters sovrum och foumlrsoumlker faring sin saumlng

skrivbord hylla klaumldskaringp och soffan att rymmas in aumlr det ganska utmanande Men naumlr

man boumlrjar med det mest utmanande i arbetsprocessen blir arbetet ocksaring mindre utma-

nande desto stoumlrre rum eller skaumlrm det blir (Wroblewski 2011)

37

5 909JP

909jp aumlr en elektronisk handel en moumlbelaffaumlr som saumlljer vaumlsterlaumlndska produkter Den

elektroniska butiken kommer att oumlppnas i Japan 2015 Deras foumlrvaumlntningar aumlr att faring in

en miljon dollar i foumlrsaumlljning per aringr I deras elektroniska moumlbelaffaumlr saumlljs bla stolar bord

soffor och lampor Maringlgruppen aumlr alla konsumenter mellan 18-60 aringringar

Japaner aumlr intresserade av vaumlsterlaumlndska produkter och livsstil men foumlr de flesta varor aumlr

designen knutna till deras egen kultur vilket goumlr dem mer intresserad Det aumlr ocksaring mycket

viktigt att ha sin hemsida paring japanska eftersom 99 av den japanska befolkningen foumlre-

drar att inte laumlsa inneharingllet paring andra spraringk (Khurana)

Japan aumlr ett land med vaumlrldens tredje stoumlrsta ekonomi paring 5 biljoner De har vaumlrldens ti-

onde stoumlrsta befolkning med ca 1271 miljoner invaringnare varav 70 av den totala befolk-

ningen anvaumlnder internet och 24 av dem anvaumlnder internet paring sin smarttelefon

(Khurana)

Viktigt med detta projekt aumlr att sikta aringt raumltt haringll och betjaumlna kunderna paring det baumlsta saumlttet

via webbplatsen Foumlr att kunna faringnga saring maringnga kunder som moumljligt aumlr det mycket viktigt

att designa en webbplats som aumlr anvaumlndarvaumlnlig stilig och laumltt att anvaumlnda (Wroblewski

2011)

Jag har daumlrfoumlr kommit underfund med att anvaumlnda Mobile first och Responsiv design

metoden foumlr att utveckla den mobila 909jp sidan Med tanke paring att det aumlr en Responsiv

design skall layouten paring den mobila versionen ocksaring passa in med de stoumlrre skaumlrmarna

naumlr sidan skalas upp Det aumlr dock viktigt poaumlngtera att jag endast kommer att koncentrera

mig paring den mobila designen och utveckla designen endast foumlr denna forskning

38

6 ANALYS AV DEN NYA DESIGNEN

Med hjaumllp av den tidigare designen paring 909jp och de kritiska punkterna jag har hittat under

forskningen har jag skapat en ny och foumlrbaumlttrad design av webbplatsen foumlr mobiler I det

haumlr kapitlet kommer jag att visa naringgra exempel paring den tidigare designen och jaumlmfoumlra den

med nya designen samt analysera arbetet

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger)

1 Call-to-action knapparna

Under hela arbetsprocessen har jag haft i minnet att navigeringar laumlnkar och knap-

parna ska vara tillraumlckligt stora att klicka paring I den tidigare designen har de stora

bilder paring kategorier vilket jag tycker aumlr en bra design att aringtervaumlnda

39

2 Soumlkfunktionen

Paring den tidigare versionen haumlr nedan ser man att soumlkfunktionen inte finns med

medan paring den nya designen ser man soumlkfunktionen genast naumlr man kommer till

sidan Som tidigare framfoumlrdes att soumlkfunktionen alltid ska synas saring att man laumltt

skall kunna soumlka fram produkterna Om soumlkfunktionen inte finns med eller aumlr svaringr

att hitta naumlr den behoumlvs kan det orsaka missnoumlje hos anvaumlndarna (Mehra Gagan

2015)

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp

Figur 63 Soumlkfunktionen paring den nya designen 909jp

40

3 Laumltt att navigera

Naumlr skaumlrmen aumlr liten aumlr det viktig att ha en enkel layout (Wroblewski 2011)

Jag har daumlrfor i den nya designen flyttat rdquoHemrdquo och rdquoBlogrdquo knapparna bort fraringn

den oumlvre menyn Hem-knappen finns nu i hamburgarmenyn paring vaumlnstra sidan me-

dan Blog-knappen finns i footer Detta goumlr att det ser mera organiserat ut

Figur 64 Gamla designen

Laringt oss foumlrflytta vidare till menyer foumlr kategorier Paring hemsidan har man tvaring alter-

nativ att naring kategorierna Foumlrsta aumlr den hamburgarmenyn knappen paring vaumlnstra si-

dan I menyn aumlr kategorierna indelade i fyra delar stolar lampor ergonomisk och

soffa amp middag Detta goumlr det laumltt och klart foumlr anvaumlndarna var produkterna finns

Eftersom vi bara har partiell uppmaumlrksamhet fraringn anvaumlndarna naumlr de aumlr paring sina

smarttelefoner har jag valt att saumltta in ikoner i menyn (Figur 65) Naumlr anvaumlndaren

bara anvaumlnder ena oumlgat foumlr att kolla paring mobilen och andra oumlgat foumlr naringgonting annat

ska den lilla skaumlrmen med webbplatsen kunna faringnga uppmaumlrksamheten samt un-

derlaumltta anvaumlndningen av webbplatsen (Wroblewski 2011)

41

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny

Andra menyn for kategorierna aumlr de fyra bilderna under Aeron chair slideshowen

Paring den tidigare designen ser man endast ett foumlnster av kategorierna som aumlr place-

rade i en kolumn som upprepas loggraumltt (Figur 66) Det haumlr goumlr att anvaumlndaren

maringste skrolla ner foumlr att se varenda kategori vilket kan orsaka obekvaumlmlighet Att

se flera kategorier paring samma skaumlrm sparar tid och anvaumlndaren kommer aumlven baumlttre

iharingg var sakerna finns Att ha bara rdquoenrdquo stor bild som syns paring skaumlrmen och vara

tvungen att skrolla ner foumlr att se naumlsta bild aumlr frustrerande Paring den nya designen

har jag tvaring rutor av kategorier bredvid varandra (Figur 66)

42

Figur 66 Kategorier paring den gamla designen (till vaumlnster) Kategorier paring den nya designen (till houmlger)

4 Ta det roliga ur shopping

Paring den nya designen straumlvar jag efter att erbjuda en bekvaumlm shopping-upplevelse

Naumlr anvaumlndarna besoumlker e-handeln med en smarttelefon foumlrvaumlntar hanhon sig

ocksaring att kunna ta del av allt inneharingll och goumlra jaumlmfoumlrelser med andra produkter

Jag har daumlrfoumlr i den nya designen pressat ihop laumlngden paring kolumnhoumljden som om-

ringar produkten Som resultat ser vi nu fyra produkter paring samma skaumlrm (Figur

67) I den tidigare designen ser vi en enda produkt paring en skaumlrm och foumlr att se

andra produkter maringste vi skrolla ner Paring det haumlr saumlttet har anvaumlndarna svaringrare att

jaumlmfoumlra produkterna (Laya 2014)

43

Figur 67 Tidigare produktsida (till vaumlnster) Ny produktsida (till houmlger)

I den tidigare designen ser vi ocksaring att det finns endast produktens bild produk-

tens namn koumlpvagnen och infoikonen Om man vill faring reda paring produktens inform-

ation maringste man klicka paring produktens bild eller paring infoikonen som foumlr oss direkt

till sjaumllva produktens sida Bara foumlr att man vill faring reda paring vad det aumlr foumlr produkt

foumlrs man vidare till en annan sida Det haumlr kan orsaka att kunden inte njuter totalt

av shoppingen och dessutom kan han inte jaumlmfoumlra produkterna naumlr han aumlr paring ka-

tegoriernas sida (Laya 2014)

Laringt oss hoppa vidare till den nya designen (Figur 68) Paring den nya designen har

jag satt in en kort detaljbeskrivning foumlr varje produkt Dessutom naumlr man klickar

paring infoikonen paring houmlgra sidan kommer man inte direkt till produktsidan utan det

kommer att dyka upp en inforuta som har en kort beskrivning paring produkten Om

anvaumlndaren aumlr intresserad av produkten kan han garing in till sjaumllva produktsida ge-

nom att klicka paring rdquoView productrdquo eller ocksaring paring produktbilden daumlr hanhon kan

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

26

32 Responsiv design

Responsiv webbdesign aumlr ett av de populaumlraste saumltten att optimera en webbplats Re-

sponsiv webbdesign moumljliggoumlr att layouten foumlraumlndras beroende paring vilken skaumlrmstorlek

och skaumlrmupploumlsningen som anvaumlndarna har och beroende paring vilka funktioner som

webblaumlsaren stoumldjer (Responsive Design 2014)

Oberoende om anvaumlndarna anvaumlnder dator laumlsplatta eller sin mobiltelefon kommer sidan

att anpassa sig paring olika saumltt foumlr att anvaumlndarna vid alla tillfaumlllen ska ha en saring rik upplevelse

som moumljligt Man kan saumlga att en webbsida paring mindre skaumlrmar aumlr med ett annat ord en

krympande version av den stoumlrre skaumlrmstorleken

Inneharingllet saringsom kolumner och bilder paring webbsidan kommer automatiskt att anpassas

beroende paring skaumlrmstorleken Och detta aumlr paring grund av Grid systemet Allt inneharingll skall

haringllas inom ett Grid system Grid systemet skall skydda allt fraringn att bryta samman naumlr

sidan anvaumlnds paring olika skaumlrmstorlekar

Det finns 11 olika Grid storlekar tvaring kolumner tre kolumner fyra kolumner fem kolum-

ner sex kolumner sju kolumner aringtta kolumner nio kolumner tio kolumner 11 kolumner

och 12 kolumner Som exempel visar jag en figur av 12 kolumners Grid system (Swan

2014)

27

Figur 31 Ett exempel paring Grid system av 5 olika skaumlrmstorlekar (Phil Swan 2014)

Responsiv webbdesign fungerar med hjaumllp av HTML5 CSS media Query och Java-

Script Det bygger paring att webbutvecklare istaumlllet foumlr exakta storlekar maumltt i pixlar anger

sidelements storlekar i procent i jaumlmfoumlrelse med skaumlrmens storlek

Naumlr sidelementens storlekar aumlr i procent goumlr det att sidan blir flexibel och den anpassas

efter webblaumlsarens storlek medan fasta pixlar ger en scrollbar (rull-list) (Responsive De-

sign 2014)

33 Varfoumlr Responsiv design

Foumlrdelar med Responsiv design aumlr att den erbjuder en bra anvaumlndarupplevelse foumlr olika

enheter och skaumlrmstorlekar Tack vare den Responsiva designen har webbredaktoumlrer laumlt-

tare att hantera inneharingllet eftersom de bara har en version att hantera Ur en SEO synvin-

kel fungerar Responsiv design baumlttre eftersom den koncentrerar inneharingllet istaumlllet foumlr att

vattna ur det med maringnga URL foumlr samma inneharingll

28

Med en Responsiv design aumlr en webbplats laumlttare att hantera Att ha flera olika versioner

av en webbplats innebaumlr mera arbete Flera olika versioner av en webbplats innebaumlr sepa-

rata sidor att redigera och separata insatser foumlr soumlkmotoroptimering och separata soumlkmo-

torkampanjer Daumlrfoumlr aumlr det en stor foumlrdel att bygga en webbplats med den Responsiva

metoden

Med en Responsiv design kaumlnner anvaumlndarna baumlttre igen sidan baringde paring stationaumlra datorer

och mobiltelefoner Bygger man specifika webbplatser foumlr mobiler och surfplattor kan

det laumltt haumlnda att det blir olika information paring webbplatserna och att de struktureras olika

Laringt oss foumlrestaumllla oss att naringgon anvaumlnder sin mobiltelefon paring lunchen foumlr att leta efter en

flygbiljett fraringn Helsingfors till Tokyo Personen hittar en webbplats som har bra erbju-

dande och bestaumlmmer sig foumlr att fortsaumltta kolla naumlr han eller hon kommer hem Naumlr per-

sonen har kommit hem anvaumlnder hen datorn istaumlllet foumlr mobilen Om webbplatsen som

personen kollade paring lunchpausen var en Responsiv webbplats faringr personen en smidig och

bra upplevelse vid oumlvergaringngen fraringn den mobila webbplatsen till stationaumlr dator

(Lindahl 2014)

Det aumlr vaumlldigt viktigt att ha sin webbplats att optimerad till saring maringnga enheter som moumljligt

foumlr att ingen vet vilka kommer att vara framtidens enheter och daumlrfoumlr anses en webbplats

som anpassar sig till maringnga olika format vara den baumlsta loumlsningen Innan man kan boumlrja

med att designa en Responsiv webbplats maringste man veta vilka skaumlrmupploumlsningar och

storlekar det finns tillgaumlngliga och aumlr populaumlra idag Foumlr att kunna rikta till de olika skaumlr-

mupploumlsningarna med Media Queries har jag listat upp olika enheternas skaumlrmupploumls-

ningar i pixlar haumlr nedan i tabellen

ResolutionGrafisk array Enhet som anvaumlnder denna resolution skaumlrmstorlek i pixel-

taumltheten i pixlar

2880x1800 15-inch Apple MacBook Pro with Retina display

2560 x 1700 Google Chromebook Pixel

2560 x 1600 Samsung Google Nexus 10

13-inch Apple MacBook Pro with Retina display

29

2560 x 1440 27-inch Apple iMac 102 111 113 122 (Late 2009 -

2012)

1920 x 1080 HTC One Samsung

Sony Xperia Z amp Xperia ZL

Asus PadFone Infinity

Acer Aspire S5

Asus Zenbook Prime

1600 x 900 Apple Macbook Air

1366 x 768 Small desktoplaptop screen resolution

Asus VivoTab RT

Samsung N350

1280 x 1024 Standard desktop screen resolution

1280 x 800 Asus PadFone 2

Samsung Galaxy Note

Sony Xperia Tablet S

1280 x 720 Sony Xperia S

HTC Windows Phone 8X

HTC One mini

1136 x 640 Apple iPhone 5 5S amp 5C

Apple iPod Touch (5th generation)

960 x 640 Apple iPhone 4 amp 4S

Apple iPod Touch (4th generation)

854 x 480 Sony Xperia ray

Nokia N9

800 x 480 Nokia Lumia 510 amp 520

Samsung Galaxy I Galaxy S Galaxy S Plus Galaxy S Ad-

vance Galaxy SL Galaxy S Duos Galaxy Xcover 2 Galaxy

Beam Nexus S Captivate Glide amp Galaxy S III mini

HTC Desire X HTC Desire V Desire VC Desire VT De-

sire U amp Windows Phone 8S

30

LG Optimus 2X Optimus EX Optimus L5 II Optimus Q2

amp Optimus Black

T-Mobile G2x

Asus E600

620 x 480 Blackberry Bold 9900 amp Bold Touch 9930

Blackberry Torch 9810

LG Optimus Z

640 x 360 Sony Ericsson Vivaz amp Vivaz Pro

Nokia 500 amp 5800 XpressMusic

Nokia N8 N97 E7 and X6

480 x 320 Apple iPhone 3G amp 3GS

Samsung Galaxy Ace

320 x 240 Nokia E71

Blackberry Curve 9220 amp 9320

Sony Ericsson txt

Samsung Galaxy Y amp Galaxy Chat

Nokia Asha 501

Figur 32 Resolutions referenser paring olika enheter

31

4 VAD AumlR MOBILE FIRST

Mobile first metoden aumlr en metod och arbetsprocess foumlr webbdesigners som aumlr skapad av

Luke Wroblewski Naumlr man jobbar med ett projekt och designar strukturerar och imple-

menterar en webbplats aumlr Mobile first metoden man paringboumlrjar arbetet med Med metoden

menar Wroblewski att man foumlrst boumlrjar designa webbsidor fraringn de minsta enheterna

Figur 41 Mobile First att bygga webbsidan fraringn den minsta skaumlrmen till den stoumlrsta skaumlrmen

Wroblewski som har skapat Mobile First metoden understryker att metoden ska priorite-

ras daring man skapar anvaumlndarupplevelser

Det finns tre viktiga anledningar foumlr att utveckla foumlr Mobile First

Den foumlrbereder foumlr den stora utveckling och nya moumljligheter som uppkommer

inom det mobila omraringdet idag (836 av vaumlrldens befolkning anvaumlnder internet

paring sin smarttelefon 2015)

Den goumlr att vi blir tvungna att prioritera och fokusera varingrt inneharingll genom att ac-

ceptera de begraumlnsningar som aumlr foumlrenade med mobil design

32

och goumlr att vi kan leverera innovativa upplevelser genom att bygga utifraringn nya

funktioner som finns inbyggda i de mobila enheterna (bla GEO lokalisering)

En mobil webbplats behoumlver endast ha en mycket enkel layout och navigeringen ska vara

laumltt och effektiv

Naumlr man designar med Mobile first metoden tvingas man goumlra viktiga beslut om vad som

ska prioriteras Naumlr den optimerad design foumlr en liten skaumlrm visas paring en stoumlrre skaumlrm

kommer det att bli laumlttare att designa paring de stoumlrre skaumlrmarna Allt som ska goumlras aumlr daring

bara att fylla paring inneharingllet och designa saring att det aumlr grafiskt tilltalande och laumltt att hitta

inneharingllet (Wroblewski 2011)

41 Varfoumlr Mobile first

Vaumlrlden vi lever i idag aumlr inte mera som foumlr tio aringr sedan Allt runtom oss har utvecklats

speciellt mobiltelefonerna Tidigare anvaumlndes mobiltelefoner bara foumlr att skicka med-

delandet ringa och ta emot samtal Nu anvaumlnds den till foumlr att dels ta bilder video GPS

navigation foumlr vaumlgvisning och speciellt internetanvaumlndningen saringsom Google nyheter

Facebook Youtube och mycket mer Paring grund av det har ocksaring varingr livsstil foumlraumlndrats

Internetanvaumlndning idag har blivit allt vanligare Idag anvaumlnder vi naumltet i skolan paring jobbet

eller var och naumlr som helst bara man har en smarttelefon eller surfplatta och naumltet kopplat

Tidigare boumlrjade man bygga en webbplats fraringn den stoumlrsta skaumlrmen medan den mobila

sidan var en biprodukt Laringt oss saumlga att man har en webbplats med en rik grafisk layout

och ser stilig ut paring stationaumlra datorer Naumlr man skalar ner sidan foumlr att passa en mobilskaumlrm

kommer resultatet att vara en smaumlrta foumlr varingra oumlgon Paring den lilla mobilskaumlrmen kommer

det att vara olaumlsligt och svaringrt att anvaumlnda Foumlr att naring inneharingllet maringste du tom zooma in

och ut eller skrolla till houmlger och vaumlnster Det haumlr kommer att ge en negativ bild av ditt

foumlretag och anvaumlndarna kanske aldrig mera besoumlker din webbplats (Wroblewski 2011)

Ett bra exempel aumlr Tokyo Skytree webbplats som aumlnnu idag inte ha byggt in funktionalitet

och designen foumlr mindre skaumlrmupploumlsningar paring den engelska sidan

33

Tokyo Skytree aumlr vaumlrldens naumlst houmlgsta torn efter Burj Khalifa Tornet aumlr Japans houmlgsta

byggnadsverk med en houmljd paring 634 meter Den oumlppnades 22 maj 2012 och under det foumlrsta

aringret hade den 64 miljoner besoumlkare fraringn hela vaumlrlden Trots det har de laringtit bli att utveckla

den engelska webbsidan Paring bilden ser man att hemsidan ser exakt likadant ut paring stationaumlr

dator och paring mobilen

Figur 42 Hemsidan paring Tokyo Skytree paring stationaumlr datorskaumlrm

34

Figur 43 Hemsidan foumlr Tokyo Skytree Foumlrsta bilden visar hur det ser ut normalt Andra bilden visar naumlr man zoomar

in

Naumlr man foumlrsoumlker zooma in foumlr att laumlsa inneharingllet hoppar sidbalken (paring vaumlnstra sidan) paring

texten Det haumlr ger en mycket daringlig anvaumlndarupplevelse och kan ge fel bild av turistplat-

sen Ett annat fel paring sidan aumlr naumlr man vaumlljer spraringk till japanska ser sidan inte likadant ut

35

Figure 44 Hemsidan paring Tokyo Skytree paring japanska

Om du kan laumlsa japanska kommer du att undra varfoumlr det finns massor med information

och sidan ser mycket trevligare ut paring den japanska sidan Paring den internationella sidan

dvs engelska ser det inte lika trevligt ut och inneharingller inte allt som det goumlr paring den

japanska sidan Det aumlr som om den stoumlrsta maringlgruppen aumlr foumlr japanska turister och som

om de skulle inte bry sig om turister fraringn utlandet

Utoumlver det har de ocksaring byggt en mobilsida foumlr den japanska webbsidan Varfoumlr satsa bara

paring den japanska sidan och inte den engelska sidan naumlr maringlgruppen aumlr hela vaumlrlden

36

Figur 45 Mobil sidan paring Tokyo Skytree paring japanska

Vi lever i 2015 saring alla borde veta att det aumlr vaumlldigt viktig att ha en mobil webbplats som

erbjuder en bra anvaumlndarupplevelse paring alla spraringk som webbplatsen erbjuder Naumlr man har

sin sida paring flera spraringk och aumlndaring bestaumlmmer sig att bygga sidan ordentligt bara paring ett spraringk

kan anvaumlndarna faring en fel bild av foumlretaget I vaumlrsta fall kommer anvaumlndarna tycka att sidan

aumlr oparinglitligt och aringterkommer aldrig igen

Mobile first metoden aumlr daumlrfoumlr en mycket effektiv metod att bygga sin webbplats med

Man boumlrjar med att bygga sin webbplats fraringn den minsta skaumlrmen Man tvingas goumlra be-

slut om vad som ska absolut prioriteras Arbetsprocessen foumlr oss webbdesigners blir

mycket effektivare genom att foumlrst designa fraringn den minsta skaumlrmen och sedan foumlrflytta

oss till de stoumlrre skaumlrmarna Har man ett 6 kvadratmeters sovrum och foumlrsoumlker faring sin saumlng

skrivbord hylla klaumldskaringp och soffan att rymmas in aumlr det ganska utmanande Men naumlr

man boumlrjar med det mest utmanande i arbetsprocessen blir arbetet ocksaring mindre utma-

nande desto stoumlrre rum eller skaumlrm det blir (Wroblewski 2011)

37

5 909JP

909jp aumlr en elektronisk handel en moumlbelaffaumlr som saumlljer vaumlsterlaumlndska produkter Den

elektroniska butiken kommer att oumlppnas i Japan 2015 Deras foumlrvaumlntningar aumlr att faring in

en miljon dollar i foumlrsaumlljning per aringr I deras elektroniska moumlbelaffaumlr saumlljs bla stolar bord

soffor och lampor Maringlgruppen aumlr alla konsumenter mellan 18-60 aringringar

Japaner aumlr intresserade av vaumlsterlaumlndska produkter och livsstil men foumlr de flesta varor aumlr

designen knutna till deras egen kultur vilket goumlr dem mer intresserad Det aumlr ocksaring mycket

viktigt att ha sin hemsida paring japanska eftersom 99 av den japanska befolkningen foumlre-

drar att inte laumlsa inneharingllet paring andra spraringk (Khurana)

Japan aumlr ett land med vaumlrldens tredje stoumlrsta ekonomi paring 5 biljoner De har vaumlrldens ti-

onde stoumlrsta befolkning med ca 1271 miljoner invaringnare varav 70 av den totala befolk-

ningen anvaumlnder internet och 24 av dem anvaumlnder internet paring sin smarttelefon

(Khurana)

Viktigt med detta projekt aumlr att sikta aringt raumltt haringll och betjaumlna kunderna paring det baumlsta saumlttet

via webbplatsen Foumlr att kunna faringnga saring maringnga kunder som moumljligt aumlr det mycket viktigt

att designa en webbplats som aumlr anvaumlndarvaumlnlig stilig och laumltt att anvaumlnda (Wroblewski

2011)

Jag har daumlrfoumlr kommit underfund med att anvaumlnda Mobile first och Responsiv design

metoden foumlr att utveckla den mobila 909jp sidan Med tanke paring att det aumlr en Responsiv

design skall layouten paring den mobila versionen ocksaring passa in med de stoumlrre skaumlrmarna

naumlr sidan skalas upp Det aumlr dock viktigt poaumlngtera att jag endast kommer att koncentrera

mig paring den mobila designen och utveckla designen endast foumlr denna forskning

38

6 ANALYS AV DEN NYA DESIGNEN

Med hjaumllp av den tidigare designen paring 909jp och de kritiska punkterna jag har hittat under

forskningen har jag skapat en ny och foumlrbaumlttrad design av webbplatsen foumlr mobiler I det

haumlr kapitlet kommer jag att visa naringgra exempel paring den tidigare designen och jaumlmfoumlra den

med nya designen samt analysera arbetet

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger)

1 Call-to-action knapparna

Under hela arbetsprocessen har jag haft i minnet att navigeringar laumlnkar och knap-

parna ska vara tillraumlckligt stora att klicka paring I den tidigare designen har de stora

bilder paring kategorier vilket jag tycker aumlr en bra design att aringtervaumlnda

39

2 Soumlkfunktionen

Paring den tidigare versionen haumlr nedan ser man att soumlkfunktionen inte finns med

medan paring den nya designen ser man soumlkfunktionen genast naumlr man kommer till

sidan Som tidigare framfoumlrdes att soumlkfunktionen alltid ska synas saring att man laumltt

skall kunna soumlka fram produkterna Om soumlkfunktionen inte finns med eller aumlr svaringr

att hitta naumlr den behoumlvs kan det orsaka missnoumlje hos anvaumlndarna (Mehra Gagan

2015)

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp

Figur 63 Soumlkfunktionen paring den nya designen 909jp

40

3 Laumltt att navigera

Naumlr skaumlrmen aumlr liten aumlr det viktig att ha en enkel layout (Wroblewski 2011)

Jag har daumlrfor i den nya designen flyttat rdquoHemrdquo och rdquoBlogrdquo knapparna bort fraringn

den oumlvre menyn Hem-knappen finns nu i hamburgarmenyn paring vaumlnstra sidan me-

dan Blog-knappen finns i footer Detta goumlr att det ser mera organiserat ut

Figur 64 Gamla designen

Laringt oss foumlrflytta vidare till menyer foumlr kategorier Paring hemsidan har man tvaring alter-

nativ att naring kategorierna Foumlrsta aumlr den hamburgarmenyn knappen paring vaumlnstra si-

dan I menyn aumlr kategorierna indelade i fyra delar stolar lampor ergonomisk och

soffa amp middag Detta goumlr det laumltt och klart foumlr anvaumlndarna var produkterna finns

Eftersom vi bara har partiell uppmaumlrksamhet fraringn anvaumlndarna naumlr de aumlr paring sina

smarttelefoner har jag valt att saumltta in ikoner i menyn (Figur 65) Naumlr anvaumlndaren

bara anvaumlnder ena oumlgat foumlr att kolla paring mobilen och andra oumlgat foumlr naringgonting annat

ska den lilla skaumlrmen med webbplatsen kunna faringnga uppmaumlrksamheten samt un-

derlaumltta anvaumlndningen av webbplatsen (Wroblewski 2011)

41

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny

Andra menyn for kategorierna aumlr de fyra bilderna under Aeron chair slideshowen

Paring den tidigare designen ser man endast ett foumlnster av kategorierna som aumlr place-

rade i en kolumn som upprepas loggraumltt (Figur 66) Det haumlr goumlr att anvaumlndaren

maringste skrolla ner foumlr att se varenda kategori vilket kan orsaka obekvaumlmlighet Att

se flera kategorier paring samma skaumlrm sparar tid och anvaumlndaren kommer aumlven baumlttre

iharingg var sakerna finns Att ha bara rdquoenrdquo stor bild som syns paring skaumlrmen och vara

tvungen att skrolla ner foumlr att se naumlsta bild aumlr frustrerande Paring den nya designen

har jag tvaring rutor av kategorier bredvid varandra (Figur 66)

42

Figur 66 Kategorier paring den gamla designen (till vaumlnster) Kategorier paring den nya designen (till houmlger)

4 Ta det roliga ur shopping

Paring den nya designen straumlvar jag efter att erbjuda en bekvaumlm shopping-upplevelse

Naumlr anvaumlndarna besoumlker e-handeln med en smarttelefon foumlrvaumlntar hanhon sig

ocksaring att kunna ta del av allt inneharingll och goumlra jaumlmfoumlrelser med andra produkter

Jag har daumlrfoumlr i den nya designen pressat ihop laumlngden paring kolumnhoumljden som om-

ringar produkten Som resultat ser vi nu fyra produkter paring samma skaumlrm (Figur

67) I den tidigare designen ser vi en enda produkt paring en skaumlrm och foumlr att se

andra produkter maringste vi skrolla ner Paring det haumlr saumlttet har anvaumlndarna svaringrare att

jaumlmfoumlra produkterna (Laya 2014)

43

Figur 67 Tidigare produktsida (till vaumlnster) Ny produktsida (till houmlger)

I den tidigare designen ser vi ocksaring att det finns endast produktens bild produk-

tens namn koumlpvagnen och infoikonen Om man vill faring reda paring produktens inform-

ation maringste man klicka paring produktens bild eller paring infoikonen som foumlr oss direkt

till sjaumllva produktens sida Bara foumlr att man vill faring reda paring vad det aumlr foumlr produkt

foumlrs man vidare till en annan sida Det haumlr kan orsaka att kunden inte njuter totalt

av shoppingen och dessutom kan han inte jaumlmfoumlra produkterna naumlr han aumlr paring ka-

tegoriernas sida (Laya 2014)

Laringt oss hoppa vidare till den nya designen (Figur 68) Paring den nya designen har

jag satt in en kort detaljbeskrivning foumlr varje produkt Dessutom naumlr man klickar

paring infoikonen paring houmlgra sidan kommer man inte direkt till produktsidan utan det

kommer att dyka upp en inforuta som har en kort beskrivning paring produkten Om

anvaumlndaren aumlr intresserad av produkten kan han garing in till sjaumllva produktsida ge-

nom att klicka paring rdquoView productrdquo eller ocksaring paring produktbilden daumlr hanhon kan

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

27

Figur 31 Ett exempel paring Grid system av 5 olika skaumlrmstorlekar (Phil Swan 2014)

Responsiv webbdesign fungerar med hjaumllp av HTML5 CSS media Query och Java-

Script Det bygger paring att webbutvecklare istaumlllet foumlr exakta storlekar maumltt i pixlar anger

sidelements storlekar i procent i jaumlmfoumlrelse med skaumlrmens storlek

Naumlr sidelementens storlekar aumlr i procent goumlr det att sidan blir flexibel och den anpassas

efter webblaumlsarens storlek medan fasta pixlar ger en scrollbar (rull-list) (Responsive De-

sign 2014)

33 Varfoumlr Responsiv design

Foumlrdelar med Responsiv design aumlr att den erbjuder en bra anvaumlndarupplevelse foumlr olika

enheter och skaumlrmstorlekar Tack vare den Responsiva designen har webbredaktoumlrer laumlt-

tare att hantera inneharingllet eftersom de bara har en version att hantera Ur en SEO synvin-

kel fungerar Responsiv design baumlttre eftersom den koncentrerar inneharingllet istaumlllet foumlr att

vattna ur det med maringnga URL foumlr samma inneharingll

28

Med en Responsiv design aumlr en webbplats laumlttare att hantera Att ha flera olika versioner

av en webbplats innebaumlr mera arbete Flera olika versioner av en webbplats innebaumlr sepa-

rata sidor att redigera och separata insatser foumlr soumlkmotoroptimering och separata soumlkmo-

torkampanjer Daumlrfoumlr aumlr det en stor foumlrdel att bygga en webbplats med den Responsiva

metoden

Med en Responsiv design kaumlnner anvaumlndarna baumlttre igen sidan baringde paring stationaumlra datorer

och mobiltelefoner Bygger man specifika webbplatser foumlr mobiler och surfplattor kan

det laumltt haumlnda att det blir olika information paring webbplatserna och att de struktureras olika

Laringt oss foumlrestaumllla oss att naringgon anvaumlnder sin mobiltelefon paring lunchen foumlr att leta efter en

flygbiljett fraringn Helsingfors till Tokyo Personen hittar en webbplats som har bra erbju-

dande och bestaumlmmer sig foumlr att fortsaumltta kolla naumlr han eller hon kommer hem Naumlr per-

sonen har kommit hem anvaumlnder hen datorn istaumlllet foumlr mobilen Om webbplatsen som

personen kollade paring lunchpausen var en Responsiv webbplats faringr personen en smidig och

bra upplevelse vid oumlvergaringngen fraringn den mobila webbplatsen till stationaumlr dator

(Lindahl 2014)

Det aumlr vaumlldigt viktigt att ha sin webbplats att optimerad till saring maringnga enheter som moumljligt

foumlr att ingen vet vilka kommer att vara framtidens enheter och daumlrfoumlr anses en webbplats

som anpassar sig till maringnga olika format vara den baumlsta loumlsningen Innan man kan boumlrja

med att designa en Responsiv webbplats maringste man veta vilka skaumlrmupploumlsningar och

storlekar det finns tillgaumlngliga och aumlr populaumlra idag Foumlr att kunna rikta till de olika skaumlr-

mupploumlsningarna med Media Queries har jag listat upp olika enheternas skaumlrmupploumls-

ningar i pixlar haumlr nedan i tabellen

ResolutionGrafisk array Enhet som anvaumlnder denna resolution skaumlrmstorlek i pixel-

taumltheten i pixlar

2880x1800 15-inch Apple MacBook Pro with Retina display

2560 x 1700 Google Chromebook Pixel

2560 x 1600 Samsung Google Nexus 10

13-inch Apple MacBook Pro with Retina display

29

2560 x 1440 27-inch Apple iMac 102 111 113 122 (Late 2009 -

2012)

1920 x 1080 HTC One Samsung

Sony Xperia Z amp Xperia ZL

Asus PadFone Infinity

Acer Aspire S5

Asus Zenbook Prime

1600 x 900 Apple Macbook Air

1366 x 768 Small desktoplaptop screen resolution

Asus VivoTab RT

Samsung N350

1280 x 1024 Standard desktop screen resolution

1280 x 800 Asus PadFone 2

Samsung Galaxy Note

Sony Xperia Tablet S

1280 x 720 Sony Xperia S

HTC Windows Phone 8X

HTC One mini

1136 x 640 Apple iPhone 5 5S amp 5C

Apple iPod Touch (5th generation)

960 x 640 Apple iPhone 4 amp 4S

Apple iPod Touch (4th generation)

854 x 480 Sony Xperia ray

Nokia N9

800 x 480 Nokia Lumia 510 amp 520

Samsung Galaxy I Galaxy S Galaxy S Plus Galaxy S Ad-

vance Galaxy SL Galaxy S Duos Galaxy Xcover 2 Galaxy

Beam Nexus S Captivate Glide amp Galaxy S III mini

HTC Desire X HTC Desire V Desire VC Desire VT De-

sire U amp Windows Phone 8S

30

LG Optimus 2X Optimus EX Optimus L5 II Optimus Q2

amp Optimus Black

T-Mobile G2x

Asus E600

620 x 480 Blackberry Bold 9900 amp Bold Touch 9930

Blackberry Torch 9810

LG Optimus Z

640 x 360 Sony Ericsson Vivaz amp Vivaz Pro

Nokia 500 amp 5800 XpressMusic

Nokia N8 N97 E7 and X6

480 x 320 Apple iPhone 3G amp 3GS

Samsung Galaxy Ace

320 x 240 Nokia E71

Blackberry Curve 9220 amp 9320

Sony Ericsson txt

Samsung Galaxy Y amp Galaxy Chat

Nokia Asha 501

Figur 32 Resolutions referenser paring olika enheter

31

4 VAD AumlR MOBILE FIRST

Mobile first metoden aumlr en metod och arbetsprocess foumlr webbdesigners som aumlr skapad av

Luke Wroblewski Naumlr man jobbar med ett projekt och designar strukturerar och imple-

menterar en webbplats aumlr Mobile first metoden man paringboumlrjar arbetet med Med metoden

menar Wroblewski att man foumlrst boumlrjar designa webbsidor fraringn de minsta enheterna

Figur 41 Mobile First att bygga webbsidan fraringn den minsta skaumlrmen till den stoumlrsta skaumlrmen

Wroblewski som har skapat Mobile First metoden understryker att metoden ska priorite-

ras daring man skapar anvaumlndarupplevelser

Det finns tre viktiga anledningar foumlr att utveckla foumlr Mobile First

Den foumlrbereder foumlr den stora utveckling och nya moumljligheter som uppkommer

inom det mobila omraringdet idag (836 av vaumlrldens befolkning anvaumlnder internet

paring sin smarttelefon 2015)

Den goumlr att vi blir tvungna att prioritera och fokusera varingrt inneharingll genom att ac-

ceptera de begraumlnsningar som aumlr foumlrenade med mobil design

32

och goumlr att vi kan leverera innovativa upplevelser genom att bygga utifraringn nya

funktioner som finns inbyggda i de mobila enheterna (bla GEO lokalisering)

En mobil webbplats behoumlver endast ha en mycket enkel layout och navigeringen ska vara

laumltt och effektiv

Naumlr man designar med Mobile first metoden tvingas man goumlra viktiga beslut om vad som

ska prioriteras Naumlr den optimerad design foumlr en liten skaumlrm visas paring en stoumlrre skaumlrm

kommer det att bli laumlttare att designa paring de stoumlrre skaumlrmarna Allt som ska goumlras aumlr daring

bara att fylla paring inneharingllet och designa saring att det aumlr grafiskt tilltalande och laumltt att hitta

inneharingllet (Wroblewski 2011)

41 Varfoumlr Mobile first

Vaumlrlden vi lever i idag aumlr inte mera som foumlr tio aringr sedan Allt runtom oss har utvecklats

speciellt mobiltelefonerna Tidigare anvaumlndes mobiltelefoner bara foumlr att skicka med-

delandet ringa och ta emot samtal Nu anvaumlnds den till foumlr att dels ta bilder video GPS

navigation foumlr vaumlgvisning och speciellt internetanvaumlndningen saringsom Google nyheter

Facebook Youtube och mycket mer Paring grund av det har ocksaring varingr livsstil foumlraumlndrats

Internetanvaumlndning idag har blivit allt vanligare Idag anvaumlnder vi naumltet i skolan paring jobbet

eller var och naumlr som helst bara man har en smarttelefon eller surfplatta och naumltet kopplat

Tidigare boumlrjade man bygga en webbplats fraringn den stoumlrsta skaumlrmen medan den mobila

sidan var en biprodukt Laringt oss saumlga att man har en webbplats med en rik grafisk layout

och ser stilig ut paring stationaumlra datorer Naumlr man skalar ner sidan foumlr att passa en mobilskaumlrm

kommer resultatet att vara en smaumlrta foumlr varingra oumlgon Paring den lilla mobilskaumlrmen kommer

det att vara olaumlsligt och svaringrt att anvaumlnda Foumlr att naring inneharingllet maringste du tom zooma in

och ut eller skrolla till houmlger och vaumlnster Det haumlr kommer att ge en negativ bild av ditt

foumlretag och anvaumlndarna kanske aldrig mera besoumlker din webbplats (Wroblewski 2011)

Ett bra exempel aumlr Tokyo Skytree webbplats som aumlnnu idag inte ha byggt in funktionalitet

och designen foumlr mindre skaumlrmupploumlsningar paring den engelska sidan

33

Tokyo Skytree aumlr vaumlrldens naumlst houmlgsta torn efter Burj Khalifa Tornet aumlr Japans houmlgsta

byggnadsverk med en houmljd paring 634 meter Den oumlppnades 22 maj 2012 och under det foumlrsta

aringret hade den 64 miljoner besoumlkare fraringn hela vaumlrlden Trots det har de laringtit bli att utveckla

den engelska webbsidan Paring bilden ser man att hemsidan ser exakt likadant ut paring stationaumlr

dator och paring mobilen

Figur 42 Hemsidan paring Tokyo Skytree paring stationaumlr datorskaumlrm

34

Figur 43 Hemsidan foumlr Tokyo Skytree Foumlrsta bilden visar hur det ser ut normalt Andra bilden visar naumlr man zoomar

in

Naumlr man foumlrsoumlker zooma in foumlr att laumlsa inneharingllet hoppar sidbalken (paring vaumlnstra sidan) paring

texten Det haumlr ger en mycket daringlig anvaumlndarupplevelse och kan ge fel bild av turistplat-

sen Ett annat fel paring sidan aumlr naumlr man vaumlljer spraringk till japanska ser sidan inte likadant ut

35

Figure 44 Hemsidan paring Tokyo Skytree paring japanska

Om du kan laumlsa japanska kommer du att undra varfoumlr det finns massor med information

och sidan ser mycket trevligare ut paring den japanska sidan Paring den internationella sidan

dvs engelska ser det inte lika trevligt ut och inneharingller inte allt som det goumlr paring den

japanska sidan Det aumlr som om den stoumlrsta maringlgruppen aumlr foumlr japanska turister och som

om de skulle inte bry sig om turister fraringn utlandet

Utoumlver det har de ocksaring byggt en mobilsida foumlr den japanska webbsidan Varfoumlr satsa bara

paring den japanska sidan och inte den engelska sidan naumlr maringlgruppen aumlr hela vaumlrlden

36

Figur 45 Mobil sidan paring Tokyo Skytree paring japanska

Vi lever i 2015 saring alla borde veta att det aumlr vaumlldigt viktig att ha en mobil webbplats som

erbjuder en bra anvaumlndarupplevelse paring alla spraringk som webbplatsen erbjuder Naumlr man har

sin sida paring flera spraringk och aumlndaring bestaumlmmer sig att bygga sidan ordentligt bara paring ett spraringk

kan anvaumlndarna faring en fel bild av foumlretaget I vaumlrsta fall kommer anvaumlndarna tycka att sidan

aumlr oparinglitligt och aringterkommer aldrig igen

Mobile first metoden aumlr daumlrfoumlr en mycket effektiv metod att bygga sin webbplats med

Man boumlrjar med att bygga sin webbplats fraringn den minsta skaumlrmen Man tvingas goumlra be-

slut om vad som ska absolut prioriteras Arbetsprocessen foumlr oss webbdesigners blir

mycket effektivare genom att foumlrst designa fraringn den minsta skaumlrmen och sedan foumlrflytta

oss till de stoumlrre skaumlrmarna Har man ett 6 kvadratmeters sovrum och foumlrsoumlker faring sin saumlng

skrivbord hylla klaumldskaringp och soffan att rymmas in aumlr det ganska utmanande Men naumlr

man boumlrjar med det mest utmanande i arbetsprocessen blir arbetet ocksaring mindre utma-

nande desto stoumlrre rum eller skaumlrm det blir (Wroblewski 2011)

37

5 909JP

909jp aumlr en elektronisk handel en moumlbelaffaumlr som saumlljer vaumlsterlaumlndska produkter Den

elektroniska butiken kommer att oumlppnas i Japan 2015 Deras foumlrvaumlntningar aumlr att faring in

en miljon dollar i foumlrsaumlljning per aringr I deras elektroniska moumlbelaffaumlr saumlljs bla stolar bord

soffor och lampor Maringlgruppen aumlr alla konsumenter mellan 18-60 aringringar

Japaner aumlr intresserade av vaumlsterlaumlndska produkter och livsstil men foumlr de flesta varor aumlr

designen knutna till deras egen kultur vilket goumlr dem mer intresserad Det aumlr ocksaring mycket

viktigt att ha sin hemsida paring japanska eftersom 99 av den japanska befolkningen foumlre-

drar att inte laumlsa inneharingllet paring andra spraringk (Khurana)

Japan aumlr ett land med vaumlrldens tredje stoumlrsta ekonomi paring 5 biljoner De har vaumlrldens ti-

onde stoumlrsta befolkning med ca 1271 miljoner invaringnare varav 70 av den totala befolk-

ningen anvaumlnder internet och 24 av dem anvaumlnder internet paring sin smarttelefon

(Khurana)

Viktigt med detta projekt aumlr att sikta aringt raumltt haringll och betjaumlna kunderna paring det baumlsta saumlttet

via webbplatsen Foumlr att kunna faringnga saring maringnga kunder som moumljligt aumlr det mycket viktigt

att designa en webbplats som aumlr anvaumlndarvaumlnlig stilig och laumltt att anvaumlnda (Wroblewski

2011)

Jag har daumlrfoumlr kommit underfund med att anvaumlnda Mobile first och Responsiv design

metoden foumlr att utveckla den mobila 909jp sidan Med tanke paring att det aumlr en Responsiv

design skall layouten paring den mobila versionen ocksaring passa in med de stoumlrre skaumlrmarna

naumlr sidan skalas upp Det aumlr dock viktigt poaumlngtera att jag endast kommer att koncentrera

mig paring den mobila designen och utveckla designen endast foumlr denna forskning

38

6 ANALYS AV DEN NYA DESIGNEN

Med hjaumllp av den tidigare designen paring 909jp och de kritiska punkterna jag har hittat under

forskningen har jag skapat en ny och foumlrbaumlttrad design av webbplatsen foumlr mobiler I det

haumlr kapitlet kommer jag att visa naringgra exempel paring den tidigare designen och jaumlmfoumlra den

med nya designen samt analysera arbetet

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger)

1 Call-to-action knapparna

Under hela arbetsprocessen har jag haft i minnet att navigeringar laumlnkar och knap-

parna ska vara tillraumlckligt stora att klicka paring I den tidigare designen har de stora

bilder paring kategorier vilket jag tycker aumlr en bra design att aringtervaumlnda

39

2 Soumlkfunktionen

Paring den tidigare versionen haumlr nedan ser man att soumlkfunktionen inte finns med

medan paring den nya designen ser man soumlkfunktionen genast naumlr man kommer till

sidan Som tidigare framfoumlrdes att soumlkfunktionen alltid ska synas saring att man laumltt

skall kunna soumlka fram produkterna Om soumlkfunktionen inte finns med eller aumlr svaringr

att hitta naumlr den behoumlvs kan det orsaka missnoumlje hos anvaumlndarna (Mehra Gagan

2015)

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp

Figur 63 Soumlkfunktionen paring den nya designen 909jp

40

3 Laumltt att navigera

Naumlr skaumlrmen aumlr liten aumlr det viktig att ha en enkel layout (Wroblewski 2011)

Jag har daumlrfor i den nya designen flyttat rdquoHemrdquo och rdquoBlogrdquo knapparna bort fraringn

den oumlvre menyn Hem-knappen finns nu i hamburgarmenyn paring vaumlnstra sidan me-

dan Blog-knappen finns i footer Detta goumlr att det ser mera organiserat ut

Figur 64 Gamla designen

Laringt oss foumlrflytta vidare till menyer foumlr kategorier Paring hemsidan har man tvaring alter-

nativ att naring kategorierna Foumlrsta aumlr den hamburgarmenyn knappen paring vaumlnstra si-

dan I menyn aumlr kategorierna indelade i fyra delar stolar lampor ergonomisk och

soffa amp middag Detta goumlr det laumltt och klart foumlr anvaumlndarna var produkterna finns

Eftersom vi bara har partiell uppmaumlrksamhet fraringn anvaumlndarna naumlr de aumlr paring sina

smarttelefoner har jag valt att saumltta in ikoner i menyn (Figur 65) Naumlr anvaumlndaren

bara anvaumlnder ena oumlgat foumlr att kolla paring mobilen och andra oumlgat foumlr naringgonting annat

ska den lilla skaumlrmen med webbplatsen kunna faringnga uppmaumlrksamheten samt un-

derlaumltta anvaumlndningen av webbplatsen (Wroblewski 2011)

41

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny

Andra menyn for kategorierna aumlr de fyra bilderna under Aeron chair slideshowen

Paring den tidigare designen ser man endast ett foumlnster av kategorierna som aumlr place-

rade i en kolumn som upprepas loggraumltt (Figur 66) Det haumlr goumlr att anvaumlndaren

maringste skrolla ner foumlr att se varenda kategori vilket kan orsaka obekvaumlmlighet Att

se flera kategorier paring samma skaumlrm sparar tid och anvaumlndaren kommer aumlven baumlttre

iharingg var sakerna finns Att ha bara rdquoenrdquo stor bild som syns paring skaumlrmen och vara

tvungen att skrolla ner foumlr att se naumlsta bild aumlr frustrerande Paring den nya designen

har jag tvaring rutor av kategorier bredvid varandra (Figur 66)

42

Figur 66 Kategorier paring den gamla designen (till vaumlnster) Kategorier paring den nya designen (till houmlger)

4 Ta det roliga ur shopping

Paring den nya designen straumlvar jag efter att erbjuda en bekvaumlm shopping-upplevelse

Naumlr anvaumlndarna besoumlker e-handeln med en smarttelefon foumlrvaumlntar hanhon sig

ocksaring att kunna ta del av allt inneharingll och goumlra jaumlmfoumlrelser med andra produkter

Jag har daumlrfoumlr i den nya designen pressat ihop laumlngden paring kolumnhoumljden som om-

ringar produkten Som resultat ser vi nu fyra produkter paring samma skaumlrm (Figur

67) I den tidigare designen ser vi en enda produkt paring en skaumlrm och foumlr att se

andra produkter maringste vi skrolla ner Paring det haumlr saumlttet har anvaumlndarna svaringrare att

jaumlmfoumlra produkterna (Laya 2014)

43

Figur 67 Tidigare produktsida (till vaumlnster) Ny produktsida (till houmlger)

I den tidigare designen ser vi ocksaring att det finns endast produktens bild produk-

tens namn koumlpvagnen och infoikonen Om man vill faring reda paring produktens inform-

ation maringste man klicka paring produktens bild eller paring infoikonen som foumlr oss direkt

till sjaumllva produktens sida Bara foumlr att man vill faring reda paring vad det aumlr foumlr produkt

foumlrs man vidare till en annan sida Det haumlr kan orsaka att kunden inte njuter totalt

av shoppingen och dessutom kan han inte jaumlmfoumlra produkterna naumlr han aumlr paring ka-

tegoriernas sida (Laya 2014)

Laringt oss hoppa vidare till den nya designen (Figur 68) Paring den nya designen har

jag satt in en kort detaljbeskrivning foumlr varje produkt Dessutom naumlr man klickar

paring infoikonen paring houmlgra sidan kommer man inte direkt till produktsidan utan det

kommer att dyka upp en inforuta som har en kort beskrivning paring produkten Om

anvaumlndaren aumlr intresserad av produkten kan han garing in till sjaumllva produktsida ge-

nom att klicka paring rdquoView productrdquo eller ocksaring paring produktbilden daumlr hanhon kan

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

28

Med en Responsiv design aumlr en webbplats laumlttare att hantera Att ha flera olika versioner

av en webbplats innebaumlr mera arbete Flera olika versioner av en webbplats innebaumlr sepa-

rata sidor att redigera och separata insatser foumlr soumlkmotoroptimering och separata soumlkmo-

torkampanjer Daumlrfoumlr aumlr det en stor foumlrdel att bygga en webbplats med den Responsiva

metoden

Med en Responsiv design kaumlnner anvaumlndarna baumlttre igen sidan baringde paring stationaumlra datorer

och mobiltelefoner Bygger man specifika webbplatser foumlr mobiler och surfplattor kan

det laumltt haumlnda att det blir olika information paring webbplatserna och att de struktureras olika

Laringt oss foumlrestaumllla oss att naringgon anvaumlnder sin mobiltelefon paring lunchen foumlr att leta efter en

flygbiljett fraringn Helsingfors till Tokyo Personen hittar en webbplats som har bra erbju-

dande och bestaumlmmer sig foumlr att fortsaumltta kolla naumlr han eller hon kommer hem Naumlr per-

sonen har kommit hem anvaumlnder hen datorn istaumlllet foumlr mobilen Om webbplatsen som

personen kollade paring lunchpausen var en Responsiv webbplats faringr personen en smidig och

bra upplevelse vid oumlvergaringngen fraringn den mobila webbplatsen till stationaumlr dator

(Lindahl 2014)

Det aumlr vaumlldigt viktigt att ha sin webbplats att optimerad till saring maringnga enheter som moumljligt

foumlr att ingen vet vilka kommer att vara framtidens enheter och daumlrfoumlr anses en webbplats

som anpassar sig till maringnga olika format vara den baumlsta loumlsningen Innan man kan boumlrja

med att designa en Responsiv webbplats maringste man veta vilka skaumlrmupploumlsningar och

storlekar det finns tillgaumlngliga och aumlr populaumlra idag Foumlr att kunna rikta till de olika skaumlr-

mupploumlsningarna med Media Queries har jag listat upp olika enheternas skaumlrmupploumls-

ningar i pixlar haumlr nedan i tabellen

ResolutionGrafisk array Enhet som anvaumlnder denna resolution skaumlrmstorlek i pixel-

taumltheten i pixlar

2880x1800 15-inch Apple MacBook Pro with Retina display

2560 x 1700 Google Chromebook Pixel

2560 x 1600 Samsung Google Nexus 10

13-inch Apple MacBook Pro with Retina display

29

2560 x 1440 27-inch Apple iMac 102 111 113 122 (Late 2009 -

2012)

1920 x 1080 HTC One Samsung

Sony Xperia Z amp Xperia ZL

Asus PadFone Infinity

Acer Aspire S5

Asus Zenbook Prime

1600 x 900 Apple Macbook Air

1366 x 768 Small desktoplaptop screen resolution

Asus VivoTab RT

Samsung N350

1280 x 1024 Standard desktop screen resolution

1280 x 800 Asus PadFone 2

Samsung Galaxy Note

Sony Xperia Tablet S

1280 x 720 Sony Xperia S

HTC Windows Phone 8X

HTC One mini

1136 x 640 Apple iPhone 5 5S amp 5C

Apple iPod Touch (5th generation)

960 x 640 Apple iPhone 4 amp 4S

Apple iPod Touch (4th generation)

854 x 480 Sony Xperia ray

Nokia N9

800 x 480 Nokia Lumia 510 amp 520

Samsung Galaxy I Galaxy S Galaxy S Plus Galaxy S Ad-

vance Galaxy SL Galaxy S Duos Galaxy Xcover 2 Galaxy

Beam Nexus S Captivate Glide amp Galaxy S III mini

HTC Desire X HTC Desire V Desire VC Desire VT De-

sire U amp Windows Phone 8S

30

LG Optimus 2X Optimus EX Optimus L5 II Optimus Q2

amp Optimus Black

T-Mobile G2x

Asus E600

620 x 480 Blackberry Bold 9900 amp Bold Touch 9930

Blackberry Torch 9810

LG Optimus Z

640 x 360 Sony Ericsson Vivaz amp Vivaz Pro

Nokia 500 amp 5800 XpressMusic

Nokia N8 N97 E7 and X6

480 x 320 Apple iPhone 3G amp 3GS

Samsung Galaxy Ace

320 x 240 Nokia E71

Blackberry Curve 9220 amp 9320

Sony Ericsson txt

Samsung Galaxy Y amp Galaxy Chat

Nokia Asha 501

Figur 32 Resolutions referenser paring olika enheter

31

4 VAD AumlR MOBILE FIRST

Mobile first metoden aumlr en metod och arbetsprocess foumlr webbdesigners som aumlr skapad av

Luke Wroblewski Naumlr man jobbar med ett projekt och designar strukturerar och imple-

menterar en webbplats aumlr Mobile first metoden man paringboumlrjar arbetet med Med metoden

menar Wroblewski att man foumlrst boumlrjar designa webbsidor fraringn de minsta enheterna

Figur 41 Mobile First att bygga webbsidan fraringn den minsta skaumlrmen till den stoumlrsta skaumlrmen

Wroblewski som har skapat Mobile First metoden understryker att metoden ska priorite-

ras daring man skapar anvaumlndarupplevelser

Det finns tre viktiga anledningar foumlr att utveckla foumlr Mobile First

Den foumlrbereder foumlr den stora utveckling och nya moumljligheter som uppkommer

inom det mobila omraringdet idag (836 av vaumlrldens befolkning anvaumlnder internet

paring sin smarttelefon 2015)

Den goumlr att vi blir tvungna att prioritera och fokusera varingrt inneharingll genom att ac-

ceptera de begraumlnsningar som aumlr foumlrenade med mobil design

32

och goumlr att vi kan leverera innovativa upplevelser genom att bygga utifraringn nya

funktioner som finns inbyggda i de mobila enheterna (bla GEO lokalisering)

En mobil webbplats behoumlver endast ha en mycket enkel layout och navigeringen ska vara

laumltt och effektiv

Naumlr man designar med Mobile first metoden tvingas man goumlra viktiga beslut om vad som

ska prioriteras Naumlr den optimerad design foumlr en liten skaumlrm visas paring en stoumlrre skaumlrm

kommer det att bli laumlttare att designa paring de stoumlrre skaumlrmarna Allt som ska goumlras aumlr daring

bara att fylla paring inneharingllet och designa saring att det aumlr grafiskt tilltalande och laumltt att hitta

inneharingllet (Wroblewski 2011)

41 Varfoumlr Mobile first

Vaumlrlden vi lever i idag aumlr inte mera som foumlr tio aringr sedan Allt runtom oss har utvecklats

speciellt mobiltelefonerna Tidigare anvaumlndes mobiltelefoner bara foumlr att skicka med-

delandet ringa och ta emot samtal Nu anvaumlnds den till foumlr att dels ta bilder video GPS

navigation foumlr vaumlgvisning och speciellt internetanvaumlndningen saringsom Google nyheter

Facebook Youtube och mycket mer Paring grund av det har ocksaring varingr livsstil foumlraumlndrats

Internetanvaumlndning idag har blivit allt vanligare Idag anvaumlnder vi naumltet i skolan paring jobbet

eller var och naumlr som helst bara man har en smarttelefon eller surfplatta och naumltet kopplat

Tidigare boumlrjade man bygga en webbplats fraringn den stoumlrsta skaumlrmen medan den mobila

sidan var en biprodukt Laringt oss saumlga att man har en webbplats med en rik grafisk layout

och ser stilig ut paring stationaumlra datorer Naumlr man skalar ner sidan foumlr att passa en mobilskaumlrm

kommer resultatet att vara en smaumlrta foumlr varingra oumlgon Paring den lilla mobilskaumlrmen kommer

det att vara olaumlsligt och svaringrt att anvaumlnda Foumlr att naring inneharingllet maringste du tom zooma in

och ut eller skrolla till houmlger och vaumlnster Det haumlr kommer att ge en negativ bild av ditt

foumlretag och anvaumlndarna kanske aldrig mera besoumlker din webbplats (Wroblewski 2011)

Ett bra exempel aumlr Tokyo Skytree webbplats som aumlnnu idag inte ha byggt in funktionalitet

och designen foumlr mindre skaumlrmupploumlsningar paring den engelska sidan

33

Tokyo Skytree aumlr vaumlrldens naumlst houmlgsta torn efter Burj Khalifa Tornet aumlr Japans houmlgsta

byggnadsverk med en houmljd paring 634 meter Den oumlppnades 22 maj 2012 och under det foumlrsta

aringret hade den 64 miljoner besoumlkare fraringn hela vaumlrlden Trots det har de laringtit bli att utveckla

den engelska webbsidan Paring bilden ser man att hemsidan ser exakt likadant ut paring stationaumlr

dator och paring mobilen

Figur 42 Hemsidan paring Tokyo Skytree paring stationaumlr datorskaumlrm

34

Figur 43 Hemsidan foumlr Tokyo Skytree Foumlrsta bilden visar hur det ser ut normalt Andra bilden visar naumlr man zoomar

in

Naumlr man foumlrsoumlker zooma in foumlr att laumlsa inneharingllet hoppar sidbalken (paring vaumlnstra sidan) paring

texten Det haumlr ger en mycket daringlig anvaumlndarupplevelse och kan ge fel bild av turistplat-

sen Ett annat fel paring sidan aumlr naumlr man vaumlljer spraringk till japanska ser sidan inte likadant ut

35

Figure 44 Hemsidan paring Tokyo Skytree paring japanska

Om du kan laumlsa japanska kommer du att undra varfoumlr det finns massor med information

och sidan ser mycket trevligare ut paring den japanska sidan Paring den internationella sidan

dvs engelska ser det inte lika trevligt ut och inneharingller inte allt som det goumlr paring den

japanska sidan Det aumlr som om den stoumlrsta maringlgruppen aumlr foumlr japanska turister och som

om de skulle inte bry sig om turister fraringn utlandet

Utoumlver det har de ocksaring byggt en mobilsida foumlr den japanska webbsidan Varfoumlr satsa bara

paring den japanska sidan och inte den engelska sidan naumlr maringlgruppen aumlr hela vaumlrlden

36

Figur 45 Mobil sidan paring Tokyo Skytree paring japanska

Vi lever i 2015 saring alla borde veta att det aumlr vaumlldigt viktig att ha en mobil webbplats som

erbjuder en bra anvaumlndarupplevelse paring alla spraringk som webbplatsen erbjuder Naumlr man har

sin sida paring flera spraringk och aumlndaring bestaumlmmer sig att bygga sidan ordentligt bara paring ett spraringk

kan anvaumlndarna faring en fel bild av foumlretaget I vaumlrsta fall kommer anvaumlndarna tycka att sidan

aumlr oparinglitligt och aringterkommer aldrig igen

Mobile first metoden aumlr daumlrfoumlr en mycket effektiv metod att bygga sin webbplats med

Man boumlrjar med att bygga sin webbplats fraringn den minsta skaumlrmen Man tvingas goumlra be-

slut om vad som ska absolut prioriteras Arbetsprocessen foumlr oss webbdesigners blir

mycket effektivare genom att foumlrst designa fraringn den minsta skaumlrmen och sedan foumlrflytta

oss till de stoumlrre skaumlrmarna Har man ett 6 kvadratmeters sovrum och foumlrsoumlker faring sin saumlng

skrivbord hylla klaumldskaringp och soffan att rymmas in aumlr det ganska utmanande Men naumlr

man boumlrjar med det mest utmanande i arbetsprocessen blir arbetet ocksaring mindre utma-

nande desto stoumlrre rum eller skaumlrm det blir (Wroblewski 2011)

37

5 909JP

909jp aumlr en elektronisk handel en moumlbelaffaumlr som saumlljer vaumlsterlaumlndska produkter Den

elektroniska butiken kommer att oumlppnas i Japan 2015 Deras foumlrvaumlntningar aumlr att faring in

en miljon dollar i foumlrsaumlljning per aringr I deras elektroniska moumlbelaffaumlr saumlljs bla stolar bord

soffor och lampor Maringlgruppen aumlr alla konsumenter mellan 18-60 aringringar

Japaner aumlr intresserade av vaumlsterlaumlndska produkter och livsstil men foumlr de flesta varor aumlr

designen knutna till deras egen kultur vilket goumlr dem mer intresserad Det aumlr ocksaring mycket

viktigt att ha sin hemsida paring japanska eftersom 99 av den japanska befolkningen foumlre-

drar att inte laumlsa inneharingllet paring andra spraringk (Khurana)

Japan aumlr ett land med vaumlrldens tredje stoumlrsta ekonomi paring 5 biljoner De har vaumlrldens ti-

onde stoumlrsta befolkning med ca 1271 miljoner invaringnare varav 70 av den totala befolk-

ningen anvaumlnder internet och 24 av dem anvaumlnder internet paring sin smarttelefon

(Khurana)

Viktigt med detta projekt aumlr att sikta aringt raumltt haringll och betjaumlna kunderna paring det baumlsta saumlttet

via webbplatsen Foumlr att kunna faringnga saring maringnga kunder som moumljligt aumlr det mycket viktigt

att designa en webbplats som aumlr anvaumlndarvaumlnlig stilig och laumltt att anvaumlnda (Wroblewski

2011)

Jag har daumlrfoumlr kommit underfund med att anvaumlnda Mobile first och Responsiv design

metoden foumlr att utveckla den mobila 909jp sidan Med tanke paring att det aumlr en Responsiv

design skall layouten paring den mobila versionen ocksaring passa in med de stoumlrre skaumlrmarna

naumlr sidan skalas upp Det aumlr dock viktigt poaumlngtera att jag endast kommer att koncentrera

mig paring den mobila designen och utveckla designen endast foumlr denna forskning

38

6 ANALYS AV DEN NYA DESIGNEN

Med hjaumllp av den tidigare designen paring 909jp och de kritiska punkterna jag har hittat under

forskningen har jag skapat en ny och foumlrbaumlttrad design av webbplatsen foumlr mobiler I det

haumlr kapitlet kommer jag att visa naringgra exempel paring den tidigare designen och jaumlmfoumlra den

med nya designen samt analysera arbetet

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger)

1 Call-to-action knapparna

Under hela arbetsprocessen har jag haft i minnet att navigeringar laumlnkar och knap-

parna ska vara tillraumlckligt stora att klicka paring I den tidigare designen har de stora

bilder paring kategorier vilket jag tycker aumlr en bra design att aringtervaumlnda

39

2 Soumlkfunktionen

Paring den tidigare versionen haumlr nedan ser man att soumlkfunktionen inte finns med

medan paring den nya designen ser man soumlkfunktionen genast naumlr man kommer till

sidan Som tidigare framfoumlrdes att soumlkfunktionen alltid ska synas saring att man laumltt

skall kunna soumlka fram produkterna Om soumlkfunktionen inte finns med eller aumlr svaringr

att hitta naumlr den behoumlvs kan det orsaka missnoumlje hos anvaumlndarna (Mehra Gagan

2015)

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp

Figur 63 Soumlkfunktionen paring den nya designen 909jp

40

3 Laumltt att navigera

Naumlr skaumlrmen aumlr liten aumlr det viktig att ha en enkel layout (Wroblewski 2011)

Jag har daumlrfor i den nya designen flyttat rdquoHemrdquo och rdquoBlogrdquo knapparna bort fraringn

den oumlvre menyn Hem-knappen finns nu i hamburgarmenyn paring vaumlnstra sidan me-

dan Blog-knappen finns i footer Detta goumlr att det ser mera organiserat ut

Figur 64 Gamla designen

Laringt oss foumlrflytta vidare till menyer foumlr kategorier Paring hemsidan har man tvaring alter-

nativ att naring kategorierna Foumlrsta aumlr den hamburgarmenyn knappen paring vaumlnstra si-

dan I menyn aumlr kategorierna indelade i fyra delar stolar lampor ergonomisk och

soffa amp middag Detta goumlr det laumltt och klart foumlr anvaumlndarna var produkterna finns

Eftersom vi bara har partiell uppmaumlrksamhet fraringn anvaumlndarna naumlr de aumlr paring sina

smarttelefoner har jag valt att saumltta in ikoner i menyn (Figur 65) Naumlr anvaumlndaren

bara anvaumlnder ena oumlgat foumlr att kolla paring mobilen och andra oumlgat foumlr naringgonting annat

ska den lilla skaumlrmen med webbplatsen kunna faringnga uppmaumlrksamheten samt un-

derlaumltta anvaumlndningen av webbplatsen (Wroblewski 2011)

41

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny

Andra menyn for kategorierna aumlr de fyra bilderna under Aeron chair slideshowen

Paring den tidigare designen ser man endast ett foumlnster av kategorierna som aumlr place-

rade i en kolumn som upprepas loggraumltt (Figur 66) Det haumlr goumlr att anvaumlndaren

maringste skrolla ner foumlr att se varenda kategori vilket kan orsaka obekvaumlmlighet Att

se flera kategorier paring samma skaumlrm sparar tid och anvaumlndaren kommer aumlven baumlttre

iharingg var sakerna finns Att ha bara rdquoenrdquo stor bild som syns paring skaumlrmen och vara

tvungen att skrolla ner foumlr att se naumlsta bild aumlr frustrerande Paring den nya designen

har jag tvaring rutor av kategorier bredvid varandra (Figur 66)

42

Figur 66 Kategorier paring den gamla designen (till vaumlnster) Kategorier paring den nya designen (till houmlger)

4 Ta det roliga ur shopping

Paring den nya designen straumlvar jag efter att erbjuda en bekvaumlm shopping-upplevelse

Naumlr anvaumlndarna besoumlker e-handeln med en smarttelefon foumlrvaumlntar hanhon sig

ocksaring att kunna ta del av allt inneharingll och goumlra jaumlmfoumlrelser med andra produkter

Jag har daumlrfoumlr i den nya designen pressat ihop laumlngden paring kolumnhoumljden som om-

ringar produkten Som resultat ser vi nu fyra produkter paring samma skaumlrm (Figur

67) I den tidigare designen ser vi en enda produkt paring en skaumlrm och foumlr att se

andra produkter maringste vi skrolla ner Paring det haumlr saumlttet har anvaumlndarna svaringrare att

jaumlmfoumlra produkterna (Laya 2014)

43

Figur 67 Tidigare produktsida (till vaumlnster) Ny produktsida (till houmlger)

I den tidigare designen ser vi ocksaring att det finns endast produktens bild produk-

tens namn koumlpvagnen och infoikonen Om man vill faring reda paring produktens inform-

ation maringste man klicka paring produktens bild eller paring infoikonen som foumlr oss direkt

till sjaumllva produktens sida Bara foumlr att man vill faring reda paring vad det aumlr foumlr produkt

foumlrs man vidare till en annan sida Det haumlr kan orsaka att kunden inte njuter totalt

av shoppingen och dessutom kan han inte jaumlmfoumlra produkterna naumlr han aumlr paring ka-

tegoriernas sida (Laya 2014)

Laringt oss hoppa vidare till den nya designen (Figur 68) Paring den nya designen har

jag satt in en kort detaljbeskrivning foumlr varje produkt Dessutom naumlr man klickar

paring infoikonen paring houmlgra sidan kommer man inte direkt till produktsidan utan det

kommer att dyka upp en inforuta som har en kort beskrivning paring produkten Om

anvaumlndaren aumlr intresserad av produkten kan han garing in till sjaumllva produktsida ge-

nom att klicka paring rdquoView productrdquo eller ocksaring paring produktbilden daumlr hanhon kan

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

29

2560 x 1440 27-inch Apple iMac 102 111 113 122 (Late 2009 -

2012)

1920 x 1080 HTC One Samsung

Sony Xperia Z amp Xperia ZL

Asus PadFone Infinity

Acer Aspire S5

Asus Zenbook Prime

1600 x 900 Apple Macbook Air

1366 x 768 Small desktoplaptop screen resolution

Asus VivoTab RT

Samsung N350

1280 x 1024 Standard desktop screen resolution

1280 x 800 Asus PadFone 2

Samsung Galaxy Note

Sony Xperia Tablet S

1280 x 720 Sony Xperia S

HTC Windows Phone 8X

HTC One mini

1136 x 640 Apple iPhone 5 5S amp 5C

Apple iPod Touch (5th generation)

960 x 640 Apple iPhone 4 amp 4S

Apple iPod Touch (4th generation)

854 x 480 Sony Xperia ray

Nokia N9

800 x 480 Nokia Lumia 510 amp 520

Samsung Galaxy I Galaxy S Galaxy S Plus Galaxy S Ad-

vance Galaxy SL Galaxy S Duos Galaxy Xcover 2 Galaxy

Beam Nexus S Captivate Glide amp Galaxy S III mini

HTC Desire X HTC Desire V Desire VC Desire VT De-

sire U amp Windows Phone 8S

30

LG Optimus 2X Optimus EX Optimus L5 II Optimus Q2

amp Optimus Black

T-Mobile G2x

Asus E600

620 x 480 Blackberry Bold 9900 amp Bold Touch 9930

Blackberry Torch 9810

LG Optimus Z

640 x 360 Sony Ericsson Vivaz amp Vivaz Pro

Nokia 500 amp 5800 XpressMusic

Nokia N8 N97 E7 and X6

480 x 320 Apple iPhone 3G amp 3GS

Samsung Galaxy Ace

320 x 240 Nokia E71

Blackberry Curve 9220 amp 9320

Sony Ericsson txt

Samsung Galaxy Y amp Galaxy Chat

Nokia Asha 501

Figur 32 Resolutions referenser paring olika enheter

31

4 VAD AumlR MOBILE FIRST

Mobile first metoden aumlr en metod och arbetsprocess foumlr webbdesigners som aumlr skapad av

Luke Wroblewski Naumlr man jobbar med ett projekt och designar strukturerar och imple-

menterar en webbplats aumlr Mobile first metoden man paringboumlrjar arbetet med Med metoden

menar Wroblewski att man foumlrst boumlrjar designa webbsidor fraringn de minsta enheterna

Figur 41 Mobile First att bygga webbsidan fraringn den minsta skaumlrmen till den stoumlrsta skaumlrmen

Wroblewski som har skapat Mobile First metoden understryker att metoden ska priorite-

ras daring man skapar anvaumlndarupplevelser

Det finns tre viktiga anledningar foumlr att utveckla foumlr Mobile First

Den foumlrbereder foumlr den stora utveckling och nya moumljligheter som uppkommer

inom det mobila omraringdet idag (836 av vaumlrldens befolkning anvaumlnder internet

paring sin smarttelefon 2015)

Den goumlr att vi blir tvungna att prioritera och fokusera varingrt inneharingll genom att ac-

ceptera de begraumlnsningar som aumlr foumlrenade med mobil design

32

och goumlr att vi kan leverera innovativa upplevelser genom att bygga utifraringn nya

funktioner som finns inbyggda i de mobila enheterna (bla GEO lokalisering)

En mobil webbplats behoumlver endast ha en mycket enkel layout och navigeringen ska vara

laumltt och effektiv

Naumlr man designar med Mobile first metoden tvingas man goumlra viktiga beslut om vad som

ska prioriteras Naumlr den optimerad design foumlr en liten skaumlrm visas paring en stoumlrre skaumlrm

kommer det att bli laumlttare att designa paring de stoumlrre skaumlrmarna Allt som ska goumlras aumlr daring

bara att fylla paring inneharingllet och designa saring att det aumlr grafiskt tilltalande och laumltt att hitta

inneharingllet (Wroblewski 2011)

41 Varfoumlr Mobile first

Vaumlrlden vi lever i idag aumlr inte mera som foumlr tio aringr sedan Allt runtom oss har utvecklats

speciellt mobiltelefonerna Tidigare anvaumlndes mobiltelefoner bara foumlr att skicka med-

delandet ringa och ta emot samtal Nu anvaumlnds den till foumlr att dels ta bilder video GPS

navigation foumlr vaumlgvisning och speciellt internetanvaumlndningen saringsom Google nyheter

Facebook Youtube och mycket mer Paring grund av det har ocksaring varingr livsstil foumlraumlndrats

Internetanvaumlndning idag har blivit allt vanligare Idag anvaumlnder vi naumltet i skolan paring jobbet

eller var och naumlr som helst bara man har en smarttelefon eller surfplatta och naumltet kopplat

Tidigare boumlrjade man bygga en webbplats fraringn den stoumlrsta skaumlrmen medan den mobila

sidan var en biprodukt Laringt oss saumlga att man har en webbplats med en rik grafisk layout

och ser stilig ut paring stationaumlra datorer Naumlr man skalar ner sidan foumlr att passa en mobilskaumlrm

kommer resultatet att vara en smaumlrta foumlr varingra oumlgon Paring den lilla mobilskaumlrmen kommer

det att vara olaumlsligt och svaringrt att anvaumlnda Foumlr att naring inneharingllet maringste du tom zooma in

och ut eller skrolla till houmlger och vaumlnster Det haumlr kommer att ge en negativ bild av ditt

foumlretag och anvaumlndarna kanske aldrig mera besoumlker din webbplats (Wroblewski 2011)

Ett bra exempel aumlr Tokyo Skytree webbplats som aumlnnu idag inte ha byggt in funktionalitet

och designen foumlr mindre skaumlrmupploumlsningar paring den engelska sidan

33

Tokyo Skytree aumlr vaumlrldens naumlst houmlgsta torn efter Burj Khalifa Tornet aumlr Japans houmlgsta

byggnadsverk med en houmljd paring 634 meter Den oumlppnades 22 maj 2012 och under det foumlrsta

aringret hade den 64 miljoner besoumlkare fraringn hela vaumlrlden Trots det har de laringtit bli att utveckla

den engelska webbsidan Paring bilden ser man att hemsidan ser exakt likadant ut paring stationaumlr

dator och paring mobilen

Figur 42 Hemsidan paring Tokyo Skytree paring stationaumlr datorskaumlrm

34

Figur 43 Hemsidan foumlr Tokyo Skytree Foumlrsta bilden visar hur det ser ut normalt Andra bilden visar naumlr man zoomar

in

Naumlr man foumlrsoumlker zooma in foumlr att laumlsa inneharingllet hoppar sidbalken (paring vaumlnstra sidan) paring

texten Det haumlr ger en mycket daringlig anvaumlndarupplevelse och kan ge fel bild av turistplat-

sen Ett annat fel paring sidan aumlr naumlr man vaumlljer spraringk till japanska ser sidan inte likadant ut

35

Figure 44 Hemsidan paring Tokyo Skytree paring japanska

Om du kan laumlsa japanska kommer du att undra varfoumlr det finns massor med information

och sidan ser mycket trevligare ut paring den japanska sidan Paring den internationella sidan

dvs engelska ser det inte lika trevligt ut och inneharingller inte allt som det goumlr paring den

japanska sidan Det aumlr som om den stoumlrsta maringlgruppen aumlr foumlr japanska turister och som

om de skulle inte bry sig om turister fraringn utlandet

Utoumlver det har de ocksaring byggt en mobilsida foumlr den japanska webbsidan Varfoumlr satsa bara

paring den japanska sidan och inte den engelska sidan naumlr maringlgruppen aumlr hela vaumlrlden

36

Figur 45 Mobil sidan paring Tokyo Skytree paring japanska

Vi lever i 2015 saring alla borde veta att det aumlr vaumlldigt viktig att ha en mobil webbplats som

erbjuder en bra anvaumlndarupplevelse paring alla spraringk som webbplatsen erbjuder Naumlr man har

sin sida paring flera spraringk och aumlndaring bestaumlmmer sig att bygga sidan ordentligt bara paring ett spraringk

kan anvaumlndarna faring en fel bild av foumlretaget I vaumlrsta fall kommer anvaumlndarna tycka att sidan

aumlr oparinglitligt och aringterkommer aldrig igen

Mobile first metoden aumlr daumlrfoumlr en mycket effektiv metod att bygga sin webbplats med

Man boumlrjar med att bygga sin webbplats fraringn den minsta skaumlrmen Man tvingas goumlra be-

slut om vad som ska absolut prioriteras Arbetsprocessen foumlr oss webbdesigners blir

mycket effektivare genom att foumlrst designa fraringn den minsta skaumlrmen och sedan foumlrflytta

oss till de stoumlrre skaumlrmarna Har man ett 6 kvadratmeters sovrum och foumlrsoumlker faring sin saumlng

skrivbord hylla klaumldskaringp och soffan att rymmas in aumlr det ganska utmanande Men naumlr

man boumlrjar med det mest utmanande i arbetsprocessen blir arbetet ocksaring mindre utma-

nande desto stoumlrre rum eller skaumlrm det blir (Wroblewski 2011)

37

5 909JP

909jp aumlr en elektronisk handel en moumlbelaffaumlr som saumlljer vaumlsterlaumlndska produkter Den

elektroniska butiken kommer att oumlppnas i Japan 2015 Deras foumlrvaumlntningar aumlr att faring in

en miljon dollar i foumlrsaumlljning per aringr I deras elektroniska moumlbelaffaumlr saumlljs bla stolar bord

soffor och lampor Maringlgruppen aumlr alla konsumenter mellan 18-60 aringringar

Japaner aumlr intresserade av vaumlsterlaumlndska produkter och livsstil men foumlr de flesta varor aumlr

designen knutna till deras egen kultur vilket goumlr dem mer intresserad Det aumlr ocksaring mycket

viktigt att ha sin hemsida paring japanska eftersom 99 av den japanska befolkningen foumlre-

drar att inte laumlsa inneharingllet paring andra spraringk (Khurana)

Japan aumlr ett land med vaumlrldens tredje stoumlrsta ekonomi paring 5 biljoner De har vaumlrldens ti-

onde stoumlrsta befolkning med ca 1271 miljoner invaringnare varav 70 av den totala befolk-

ningen anvaumlnder internet och 24 av dem anvaumlnder internet paring sin smarttelefon

(Khurana)

Viktigt med detta projekt aumlr att sikta aringt raumltt haringll och betjaumlna kunderna paring det baumlsta saumlttet

via webbplatsen Foumlr att kunna faringnga saring maringnga kunder som moumljligt aumlr det mycket viktigt

att designa en webbplats som aumlr anvaumlndarvaumlnlig stilig och laumltt att anvaumlnda (Wroblewski

2011)

Jag har daumlrfoumlr kommit underfund med att anvaumlnda Mobile first och Responsiv design

metoden foumlr att utveckla den mobila 909jp sidan Med tanke paring att det aumlr en Responsiv

design skall layouten paring den mobila versionen ocksaring passa in med de stoumlrre skaumlrmarna

naumlr sidan skalas upp Det aumlr dock viktigt poaumlngtera att jag endast kommer att koncentrera

mig paring den mobila designen och utveckla designen endast foumlr denna forskning

38

6 ANALYS AV DEN NYA DESIGNEN

Med hjaumllp av den tidigare designen paring 909jp och de kritiska punkterna jag har hittat under

forskningen har jag skapat en ny och foumlrbaumlttrad design av webbplatsen foumlr mobiler I det

haumlr kapitlet kommer jag att visa naringgra exempel paring den tidigare designen och jaumlmfoumlra den

med nya designen samt analysera arbetet

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger)

1 Call-to-action knapparna

Under hela arbetsprocessen har jag haft i minnet att navigeringar laumlnkar och knap-

parna ska vara tillraumlckligt stora att klicka paring I den tidigare designen har de stora

bilder paring kategorier vilket jag tycker aumlr en bra design att aringtervaumlnda

39

2 Soumlkfunktionen

Paring den tidigare versionen haumlr nedan ser man att soumlkfunktionen inte finns med

medan paring den nya designen ser man soumlkfunktionen genast naumlr man kommer till

sidan Som tidigare framfoumlrdes att soumlkfunktionen alltid ska synas saring att man laumltt

skall kunna soumlka fram produkterna Om soumlkfunktionen inte finns med eller aumlr svaringr

att hitta naumlr den behoumlvs kan det orsaka missnoumlje hos anvaumlndarna (Mehra Gagan

2015)

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp

Figur 63 Soumlkfunktionen paring den nya designen 909jp

40

3 Laumltt att navigera

Naumlr skaumlrmen aumlr liten aumlr det viktig att ha en enkel layout (Wroblewski 2011)

Jag har daumlrfor i den nya designen flyttat rdquoHemrdquo och rdquoBlogrdquo knapparna bort fraringn

den oumlvre menyn Hem-knappen finns nu i hamburgarmenyn paring vaumlnstra sidan me-

dan Blog-knappen finns i footer Detta goumlr att det ser mera organiserat ut

Figur 64 Gamla designen

Laringt oss foumlrflytta vidare till menyer foumlr kategorier Paring hemsidan har man tvaring alter-

nativ att naring kategorierna Foumlrsta aumlr den hamburgarmenyn knappen paring vaumlnstra si-

dan I menyn aumlr kategorierna indelade i fyra delar stolar lampor ergonomisk och

soffa amp middag Detta goumlr det laumltt och klart foumlr anvaumlndarna var produkterna finns

Eftersom vi bara har partiell uppmaumlrksamhet fraringn anvaumlndarna naumlr de aumlr paring sina

smarttelefoner har jag valt att saumltta in ikoner i menyn (Figur 65) Naumlr anvaumlndaren

bara anvaumlnder ena oumlgat foumlr att kolla paring mobilen och andra oumlgat foumlr naringgonting annat

ska den lilla skaumlrmen med webbplatsen kunna faringnga uppmaumlrksamheten samt un-

derlaumltta anvaumlndningen av webbplatsen (Wroblewski 2011)

41

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny

Andra menyn for kategorierna aumlr de fyra bilderna under Aeron chair slideshowen

Paring den tidigare designen ser man endast ett foumlnster av kategorierna som aumlr place-

rade i en kolumn som upprepas loggraumltt (Figur 66) Det haumlr goumlr att anvaumlndaren

maringste skrolla ner foumlr att se varenda kategori vilket kan orsaka obekvaumlmlighet Att

se flera kategorier paring samma skaumlrm sparar tid och anvaumlndaren kommer aumlven baumlttre

iharingg var sakerna finns Att ha bara rdquoenrdquo stor bild som syns paring skaumlrmen och vara

tvungen att skrolla ner foumlr att se naumlsta bild aumlr frustrerande Paring den nya designen

har jag tvaring rutor av kategorier bredvid varandra (Figur 66)

42

Figur 66 Kategorier paring den gamla designen (till vaumlnster) Kategorier paring den nya designen (till houmlger)

4 Ta det roliga ur shopping

Paring den nya designen straumlvar jag efter att erbjuda en bekvaumlm shopping-upplevelse

Naumlr anvaumlndarna besoumlker e-handeln med en smarttelefon foumlrvaumlntar hanhon sig

ocksaring att kunna ta del av allt inneharingll och goumlra jaumlmfoumlrelser med andra produkter

Jag har daumlrfoumlr i den nya designen pressat ihop laumlngden paring kolumnhoumljden som om-

ringar produkten Som resultat ser vi nu fyra produkter paring samma skaumlrm (Figur

67) I den tidigare designen ser vi en enda produkt paring en skaumlrm och foumlr att se

andra produkter maringste vi skrolla ner Paring det haumlr saumlttet har anvaumlndarna svaringrare att

jaumlmfoumlra produkterna (Laya 2014)

43

Figur 67 Tidigare produktsida (till vaumlnster) Ny produktsida (till houmlger)

I den tidigare designen ser vi ocksaring att det finns endast produktens bild produk-

tens namn koumlpvagnen och infoikonen Om man vill faring reda paring produktens inform-

ation maringste man klicka paring produktens bild eller paring infoikonen som foumlr oss direkt

till sjaumllva produktens sida Bara foumlr att man vill faring reda paring vad det aumlr foumlr produkt

foumlrs man vidare till en annan sida Det haumlr kan orsaka att kunden inte njuter totalt

av shoppingen och dessutom kan han inte jaumlmfoumlra produkterna naumlr han aumlr paring ka-

tegoriernas sida (Laya 2014)

Laringt oss hoppa vidare till den nya designen (Figur 68) Paring den nya designen har

jag satt in en kort detaljbeskrivning foumlr varje produkt Dessutom naumlr man klickar

paring infoikonen paring houmlgra sidan kommer man inte direkt till produktsidan utan det

kommer att dyka upp en inforuta som har en kort beskrivning paring produkten Om

anvaumlndaren aumlr intresserad av produkten kan han garing in till sjaumllva produktsida ge-

nom att klicka paring rdquoView productrdquo eller ocksaring paring produktbilden daumlr hanhon kan

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

30

LG Optimus 2X Optimus EX Optimus L5 II Optimus Q2

amp Optimus Black

T-Mobile G2x

Asus E600

620 x 480 Blackberry Bold 9900 amp Bold Touch 9930

Blackberry Torch 9810

LG Optimus Z

640 x 360 Sony Ericsson Vivaz amp Vivaz Pro

Nokia 500 amp 5800 XpressMusic

Nokia N8 N97 E7 and X6

480 x 320 Apple iPhone 3G amp 3GS

Samsung Galaxy Ace

320 x 240 Nokia E71

Blackberry Curve 9220 amp 9320

Sony Ericsson txt

Samsung Galaxy Y amp Galaxy Chat

Nokia Asha 501

Figur 32 Resolutions referenser paring olika enheter

31

4 VAD AumlR MOBILE FIRST

Mobile first metoden aumlr en metod och arbetsprocess foumlr webbdesigners som aumlr skapad av

Luke Wroblewski Naumlr man jobbar med ett projekt och designar strukturerar och imple-

menterar en webbplats aumlr Mobile first metoden man paringboumlrjar arbetet med Med metoden

menar Wroblewski att man foumlrst boumlrjar designa webbsidor fraringn de minsta enheterna

Figur 41 Mobile First att bygga webbsidan fraringn den minsta skaumlrmen till den stoumlrsta skaumlrmen

Wroblewski som har skapat Mobile First metoden understryker att metoden ska priorite-

ras daring man skapar anvaumlndarupplevelser

Det finns tre viktiga anledningar foumlr att utveckla foumlr Mobile First

Den foumlrbereder foumlr den stora utveckling och nya moumljligheter som uppkommer

inom det mobila omraringdet idag (836 av vaumlrldens befolkning anvaumlnder internet

paring sin smarttelefon 2015)

Den goumlr att vi blir tvungna att prioritera och fokusera varingrt inneharingll genom att ac-

ceptera de begraumlnsningar som aumlr foumlrenade med mobil design

32

och goumlr att vi kan leverera innovativa upplevelser genom att bygga utifraringn nya

funktioner som finns inbyggda i de mobila enheterna (bla GEO lokalisering)

En mobil webbplats behoumlver endast ha en mycket enkel layout och navigeringen ska vara

laumltt och effektiv

Naumlr man designar med Mobile first metoden tvingas man goumlra viktiga beslut om vad som

ska prioriteras Naumlr den optimerad design foumlr en liten skaumlrm visas paring en stoumlrre skaumlrm

kommer det att bli laumlttare att designa paring de stoumlrre skaumlrmarna Allt som ska goumlras aumlr daring

bara att fylla paring inneharingllet och designa saring att det aumlr grafiskt tilltalande och laumltt att hitta

inneharingllet (Wroblewski 2011)

41 Varfoumlr Mobile first

Vaumlrlden vi lever i idag aumlr inte mera som foumlr tio aringr sedan Allt runtom oss har utvecklats

speciellt mobiltelefonerna Tidigare anvaumlndes mobiltelefoner bara foumlr att skicka med-

delandet ringa och ta emot samtal Nu anvaumlnds den till foumlr att dels ta bilder video GPS

navigation foumlr vaumlgvisning och speciellt internetanvaumlndningen saringsom Google nyheter

Facebook Youtube och mycket mer Paring grund av det har ocksaring varingr livsstil foumlraumlndrats

Internetanvaumlndning idag har blivit allt vanligare Idag anvaumlnder vi naumltet i skolan paring jobbet

eller var och naumlr som helst bara man har en smarttelefon eller surfplatta och naumltet kopplat

Tidigare boumlrjade man bygga en webbplats fraringn den stoumlrsta skaumlrmen medan den mobila

sidan var en biprodukt Laringt oss saumlga att man har en webbplats med en rik grafisk layout

och ser stilig ut paring stationaumlra datorer Naumlr man skalar ner sidan foumlr att passa en mobilskaumlrm

kommer resultatet att vara en smaumlrta foumlr varingra oumlgon Paring den lilla mobilskaumlrmen kommer

det att vara olaumlsligt och svaringrt att anvaumlnda Foumlr att naring inneharingllet maringste du tom zooma in

och ut eller skrolla till houmlger och vaumlnster Det haumlr kommer att ge en negativ bild av ditt

foumlretag och anvaumlndarna kanske aldrig mera besoumlker din webbplats (Wroblewski 2011)

Ett bra exempel aumlr Tokyo Skytree webbplats som aumlnnu idag inte ha byggt in funktionalitet

och designen foumlr mindre skaumlrmupploumlsningar paring den engelska sidan

33

Tokyo Skytree aumlr vaumlrldens naumlst houmlgsta torn efter Burj Khalifa Tornet aumlr Japans houmlgsta

byggnadsverk med en houmljd paring 634 meter Den oumlppnades 22 maj 2012 och under det foumlrsta

aringret hade den 64 miljoner besoumlkare fraringn hela vaumlrlden Trots det har de laringtit bli att utveckla

den engelska webbsidan Paring bilden ser man att hemsidan ser exakt likadant ut paring stationaumlr

dator och paring mobilen

Figur 42 Hemsidan paring Tokyo Skytree paring stationaumlr datorskaumlrm

34

Figur 43 Hemsidan foumlr Tokyo Skytree Foumlrsta bilden visar hur det ser ut normalt Andra bilden visar naumlr man zoomar

in

Naumlr man foumlrsoumlker zooma in foumlr att laumlsa inneharingllet hoppar sidbalken (paring vaumlnstra sidan) paring

texten Det haumlr ger en mycket daringlig anvaumlndarupplevelse och kan ge fel bild av turistplat-

sen Ett annat fel paring sidan aumlr naumlr man vaumlljer spraringk till japanska ser sidan inte likadant ut

35

Figure 44 Hemsidan paring Tokyo Skytree paring japanska

Om du kan laumlsa japanska kommer du att undra varfoumlr det finns massor med information

och sidan ser mycket trevligare ut paring den japanska sidan Paring den internationella sidan

dvs engelska ser det inte lika trevligt ut och inneharingller inte allt som det goumlr paring den

japanska sidan Det aumlr som om den stoumlrsta maringlgruppen aumlr foumlr japanska turister och som

om de skulle inte bry sig om turister fraringn utlandet

Utoumlver det har de ocksaring byggt en mobilsida foumlr den japanska webbsidan Varfoumlr satsa bara

paring den japanska sidan och inte den engelska sidan naumlr maringlgruppen aumlr hela vaumlrlden

36

Figur 45 Mobil sidan paring Tokyo Skytree paring japanska

Vi lever i 2015 saring alla borde veta att det aumlr vaumlldigt viktig att ha en mobil webbplats som

erbjuder en bra anvaumlndarupplevelse paring alla spraringk som webbplatsen erbjuder Naumlr man har

sin sida paring flera spraringk och aumlndaring bestaumlmmer sig att bygga sidan ordentligt bara paring ett spraringk

kan anvaumlndarna faring en fel bild av foumlretaget I vaumlrsta fall kommer anvaumlndarna tycka att sidan

aumlr oparinglitligt och aringterkommer aldrig igen

Mobile first metoden aumlr daumlrfoumlr en mycket effektiv metod att bygga sin webbplats med

Man boumlrjar med att bygga sin webbplats fraringn den minsta skaumlrmen Man tvingas goumlra be-

slut om vad som ska absolut prioriteras Arbetsprocessen foumlr oss webbdesigners blir

mycket effektivare genom att foumlrst designa fraringn den minsta skaumlrmen och sedan foumlrflytta

oss till de stoumlrre skaumlrmarna Har man ett 6 kvadratmeters sovrum och foumlrsoumlker faring sin saumlng

skrivbord hylla klaumldskaringp och soffan att rymmas in aumlr det ganska utmanande Men naumlr

man boumlrjar med det mest utmanande i arbetsprocessen blir arbetet ocksaring mindre utma-

nande desto stoumlrre rum eller skaumlrm det blir (Wroblewski 2011)

37

5 909JP

909jp aumlr en elektronisk handel en moumlbelaffaumlr som saumlljer vaumlsterlaumlndska produkter Den

elektroniska butiken kommer att oumlppnas i Japan 2015 Deras foumlrvaumlntningar aumlr att faring in

en miljon dollar i foumlrsaumlljning per aringr I deras elektroniska moumlbelaffaumlr saumlljs bla stolar bord

soffor och lampor Maringlgruppen aumlr alla konsumenter mellan 18-60 aringringar

Japaner aumlr intresserade av vaumlsterlaumlndska produkter och livsstil men foumlr de flesta varor aumlr

designen knutna till deras egen kultur vilket goumlr dem mer intresserad Det aumlr ocksaring mycket

viktigt att ha sin hemsida paring japanska eftersom 99 av den japanska befolkningen foumlre-

drar att inte laumlsa inneharingllet paring andra spraringk (Khurana)

Japan aumlr ett land med vaumlrldens tredje stoumlrsta ekonomi paring 5 biljoner De har vaumlrldens ti-

onde stoumlrsta befolkning med ca 1271 miljoner invaringnare varav 70 av den totala befolk-

ningen anvaumlnder internet och 24 av dem anvaumlnder internet paring sin smarttelefon

(Khurana)

Viktigt med detta projekt aumlr att sikta aringt raumltt haringll och betjaumlna kunderna paring det baumlsta saumlttet

via webbplatsen Foumlr att kunna faringnga saring maringnga kunder som moumljligt aumlr det mycket viktigt

att designa en webbplats som aumlr anvaumlndarvaumlnlig stilig och laumltt att anvaumlnda (Wroblewski

2011)

Jag har daumlrfoumlr kommit underfund med att anvaumlnda Mobile first och Responsiv design

metoden foumlr att utveckla den mobila 909jp sidan Med tanke paring att det aumlr en Responsiv

design skall layouten paring den mobila versionen ocksaring passa in med de stoumlrre skaumlrmarna

naumlr sidan skalas upp Det aumlr dock viktigt poaumlngtera att jag endast kommer att koncentrera

mig paring den mobila designen och utveckla designen endast foumlr denna forskning

38

6 ANALYS AV DEN NYA DESIGNEN

Med hjaumllp av den tidigare designen paring 909jp och de kritiska punkterna jag har hittat under

forskningen har jag skapat en ny och foumlrbaumlttrad design av webbplatsen foumlr mobiler I det

haumlr kapitlet kommer jag att visa naringgra exempel paring den tidigare designen och jaumlmfoumlra den

med nya designen samt analysera arbetet

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger)

1 Call-to-action knapparna

Under hela arbetsprocessen har jag haft i minnet att navigeringar laumlnkar och knap-

parna ska vara tillraumlckligt stora att klicka paring I den tidigare designen har de stora

bilder paring kategorier vilket jag tycker aumlr en bra design att aringtervaumlnda

39

2 Soumlkfunktionen

Paring den tidigare versionen haumlr nedan ser man att soumlkfunktionen inte finns med

medan paring den nya designen ser man soumlkfunktionen genast naumlr man kommer till

sidan Som tidigare framfoumlrdes att soumlkfunktionen alltid ska synas saring att man laumltt

skall kunna soumlka fram produkterna Om soumlkfunktionen inte finns med eller aumlr svaringr

att hitta naumlr den behoumlvs kan det orsaka missnoumlje hos anvaumlndarna (Mehra Gagan

2015)

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp

Figur 63 Soumlkfunktionen paring den nya designen 909jp

40

3 Laumltt att navigera

Naumlr skaumlrmen aumlr liten aumlr det viktig att ha en enkel layout (Wroblewski 2011)

Jag har daumlrfor i den nya designen flyttat rdquoHemrdquo och rdquoBlogrdquo knapparna bort fraringn

den oumlvre menyn Hem-knappen finns nu i hamburgarmenyn paring vaumlnstra sidan me-

dan Blog-knappen finns i footer Detta goumlr att det ser mera organiserat ut

Figur 64 Gamla designen

Laringt oss foumlrflytta vidare till menyer foumlr kategorier Paring hemsidan har man tvaring alter-

nativ att naring kategorierna Foumlrsta aumlr den hamburgarmenyn knappen paring vaumlnstra si-

dan I menyn aumlr kategorierna indelade i fyra delar stolar lampor ergonomisk och

soffa amp middag Detta goumlr det laumltt och klart foumlr anvaumlndarna var produkterna finns

Eftersom vi bara har partiell uppmaumlrksamhet fraringn anvaumlndarna naumlr de aumlr paring sina

smarttelefoner har jag valt att saumltta in ikoner i menyn (Figur 65) Naumlr anvaumlndaren

bara anvaumlnder ena oumlgat foumlr att kolla paring mobilen och andra oumlgat foumlr naringgonting annat

ska den lilla skaumlrmen med webbplatsen kunna faringnga uppmaumlrksamheten samt un-

derlaumltta anvaumlndningen av webbplatsen (Wroblewski 2011)

41

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny

Andra menyn for kategorierna aumlr de fyra bilderna under Aeron chair slideshowen

Paring den tidigare designen ser man endast ett foumlnster av kategorierna som aumlr place-

rade i en kolumn som upprepas loggraumltt (Figur 66) Det haumlr goumlr att anvaumlndaren

maringste skrolla ner foumlr att se varenda kategori vilket kan orsaka obekvaumlmlighet Att

se flera kategorier paring samma skaumlrm sparar tid och anvaumlndaren kommer aumlven baumlttre

iharingg var sakerna finns Att ha bara rdquoenrdquo stor bild som syns paring skaumlrmen och vara

tvungen att skrolla ner foumlr att se naumlsta bild aumlr frustrerande Paring den nya designen

har jag tvaring rutor av kategorier bredvid varandra (Figur 66)

42

Figur 66 Kategorier paring den gamla designen (till vaumlnster) Kategorier paring den nya designen (till houmlger)

4 Ta det roliga ur shopping

Paring den nya designen straumlvar jag efter att erbjuda en bekvaumlm shopping-upplevelse

Naumlr anvaumlndarna besoumlker e-handeln med en smarttelefon foumlrvaumlntar hanhon sig

ocksaring att kunna ta del av allt inneharingll och goumlra jaumlmfoumlrelser med andra produkter

Jag har daumlrfoumlr i den nya designen pressat ihop laumlngden paring kolumnhoumljden som om-

ringar produkten Som resultat ser vi nu fyra produkter paring samma skaumlrm (Figur

67) I den tidigare designen ser vi en enda produkt paring en skaumlrm och foumlr att se

andra produkter maringste vi skrolla ner Paring det haumlr saumlttet har anvaumlndarna svaringrare att

jaumlmfoumlra produkterna (Laya 2014)

43

Figur 67 Tidigare produktsida (till vaumlnster) Ny produktsida (till houmlger)

I den tidigare designen ser vi ocksaring att det finns endast produktens bild produk-

tens namn koumlpvagnen och infoikonen Om man vill faring reda paring produktens inform-

ation maringste man klicka paring produktens bild eller paring infoikonen som foumlr oss direkt

till sjaumllva produktens sida Bara foumlr att man vill faring reda paring vad det aumlr foumlr produkt

foumlrs man vidare till en annan sida Det haumlr kan orsaka att kunden inte njuter totalt

av shoppingen och dessutom kan han inte jaumlmfoumlra produkterna naumlr han aumlr paring ka-

tegoriernas sida (Laya 2014)

Laringt oss hoppa vidare till den nya designen (Figur 68) Paring den nya designen har

jag satt in en kort detaljbeskrivning foumlr varje produkt Dessutom naumlr man klickar

paring infoikonen paring houmlgra sidan kommer man inte direkt till produktsidan utan det

kommer att dyka upp en inforuta som har en kort beskrivning paring produkten Om

anvaumlndaren aumlr intresserad av produkten kan han garing in till sjaumllva produktsida ge-

nom att klicka paring rdquoView productrdquo eller ocksaring paring produktbilden daumlr hanhon kan

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

31

4 VAD AumlR MOBILE FIRST

Mobile first metoden aumlr en metod och arbetsprocess foumlr webbdesigners som aumlr skapad av

Luke Wroblewski Naumlr man jobbar med ett projekt och designar strukturerar och imple-

menterar en webbplats aumlr Mobile first metoden man paringboumlrjar arbetet med Med metoden

menar Wroblewski att man foumlrst boumlrjar designa webbsidor fraringn de minsta enheterna

Figur 41 Mobile First att bygga webbsidan fraringn den minsta skaumlrmen till den stoumlrsta skaumlrmen

Wroblewski som har skapat Mobile First metoden understryker att metoden ska priorite-

ras daring man skapar anvaumlndarupplevelser

Det finns tre viktiga anledningar foumlr att utveckla foumlr Mobile First

Den foumlrbereder foumlr den stora utveckling och nya moumljligheter som uppkommer

inom det mobila omraringdet idag (836 av vaumlrldens befolkning anvaumlnder internet

paring sin smarttelefon 2015)

Den goumlr att vi blir tvungna att prioritera och fokusera varingrt inneharingll genom att ac-

ceptera de begraumlnsningar som aumlr foumlrenade med mobil design

32

och goumlr att vi kan leverera innovativa upplevelser genom att bygga utifraringn nya

funktioner som finns inbyggda i de mobila enheterna (bla GEO lokalisering)

En mobil webbplats behoumlver endast ha en mycket enkel layout och navigeringen ska vara

laumltt och effektiv

Naumlr man designar med Mobile first metoden tvingas man goumlra viktiga beslut om vad som

ska prioriteras Naumlr den optimerad design foumlr en liten skaumlrm visas paring en stoumlrre skaumlrm

kommer det att bli laumlttare att designa paring de stoumlrre skaumlrmarna Allt som ska goumlras aumlr daring

bara att fylla paring inneharingllet och designa saring att det aumlr grafiskt tilltalande och laumltt att hitta

inneharingllet (Wroblewski 2011)

41 Varfoumlr Mobile first

Vaumlrlden vi lever i idag aumlr inte mera som foumlr tio aringr sedan Allt runtom oss har utvecklats

speciellt mobiltelefonerna Tidigare anvaumlndes mobiltelefoner bara foumlr att skicka med-

delandet ringa och ta emot samtal Nu anvaumlnds den till foumlr att dels ta bilder video GPS

navigation foumlr vaumlgvisning och speciellt internetanvaumlndningen saringsom Google nyheter

Facebook Youtube och mycket mer Paring grund av det har ocksaring varingr livsstil foumlraumlndrats

Internetanvaumlndning idag har blivit allt vanligare Idag anvaumlnder vi naumltet i skolan paring jobbet

eller var och naumlr som helst bara man har en smarttelefon eller surfplatta och naumltet kopplat

Tidigare boumlrjade man bygga en webbplats fraringn den stoumlrsta skaumlrmen medan den mobila

sidan var en biprodukt Laringt oss saumlga att man har en webbplats med en rik grafisk layout

och ser stilig ut paring stationaumlra datorer Naumlr man skalar ner sidan foumlr att passa en mobilskaumlrm

kommer resultatet att vara en smaumlrta foumlr varingra oumlgon Paring den lilla mobilskaumlrmen kommer

det att vara olaumlsligt och svaringrt att anvaumlnda Foumlr att naring inneharingllet maringste du tom zooma in

och ut eller skrolla till houmlger och vaumlnster Det haumlr kommer att ge en negativ bild av ditt

foumlretag och anvaumlndarna kanske aldrig mera besoumlker din webbplats (Wroblewski 2011)

Ett bra exempel aumlr Tokyo Skytree webbplats som aumlnnu idag inte ha byggt in funktionalitet

och designen foumlr mindre skaumlrmupploumlsningar paring den engelska sidan

33

Tokyo Skytree aumlr vaumlrldens naumlst houmlgsta torn efter Burj Khalifa Tornet aumlr Japans houmlgsta

byggnadsverk med en houmljd paring 634 meter Den oumlppnades 22 maj 2012 och under det foumlrsta

aringret hade den 64 miljoner besoumlkare fraringn hela vaumlrlden Trots det har de laringtit bli att utveckla

den engelska webbsidan Paring bilden ser man att hemsidan ser exakt likadant ut paring stationaumlr

dator och paring mobilen

Figur 42 Hemsidan paring Tokyo Skytree paring stationaumlr datorskaumlrm

34

Figur 43 Hemsidan foumlr Tokyo Skytree Foumlrsta bilden visar hur det ser ut normalt Andra bilden visar naumlr man zoomar

in

Naumlr man foumlrsoumlker zooma in foumlr att laumlsa inneharingllet hoppar sidbalken (paring vaumlnstra sidan) paring

texten Det haumlr ger en mycket daringlig anvaumlndarupplevelse och kan ge fel bild av turistplat-

sen Ett annat fel paring sidan aumlr naumlr man vaumlljer spraringk till japanska ser sidan inte likadant ut

35

Figure 44 Hemsidan paring Tokyo Skytree paring japanska

Om du kan laumlsa japanska kommer du att undra varfoumlr det finns massor med information

och sidan ser mycket trevligare ut paring den japanska sidan Paring den internationella sidan

dvs engelska ser det inte lika trevligt ut och inneharingller inte allt som det goumlr paring den

japanska sidan Det aumlr som om den stoumlrsta maringlgruppen aumlr foumlr japanska turister och som

om de skulle inte bry sig om turister fraringn utlandet

Utoumlver det har de ocksaring byggt en mobilsida foumlr den japanska webbsidan Varfoumlr satsa bara

paring den japanska sidan och inte den engelska sidan naumlr maringlgruppen aumlr hela vaumlrlden

36

Figur 45 Mobil sidan paring Tokyo Skytree paring japanska

Vi lever i 2015 saring alla borde veta att det aumlr vaumlldigt viktig att ha en mobil webbplats som

erbjuder en bra anvaumlndarupplevelse paring alla spraringk som webbplatsen erbjuder Naumlr man har

sin sida paring flera spraringk och aumlndaring bestaumlmmer sig att bygga sidan ordentligt bara paring ett spraringk

kan anvaumlndarna faring en fel bild av foumlretaget I vaumlrsta fall kommer anvaumlndarna tycka att sidan

aumlr oparinglitligt och aringterkommer aldrig igen

Mobile first metoden aumlr daumlrfoumlr en mycket effektiv metod att bygga sin webbplats med

Man boumlrjar med att bygga sin webbplats fraringn den minsta skaumlrmen Man tvingas goumlra be-

slut om vad som ska absolut prioriteras Arbetsprocessen foumlr oss webbdesigners blir

mycket effektivare genom att foumlrst designa fraringn den minsta skaumlrmen och sedan foumlrflytta

oss till de stoumlrre skaumlrmarna Har man ett 6 kvadratmeters sovrum och foumlrsoumlker faring sin saumlng

skrivbord hylla klaumldskaringp och soffan att rymmas in aumlr det ganska utmanande Men naumlr

man boumlrjar med det mest utmanande i arbetsprocessen blir arbetet ocksaring mindre utma-

nande desto stoumlrre rum eller skaumlrm det blir (Wroblewski 2011)

37

5 909JP

909jp aumlr en elektronisk handel en moumlbelaffaumlr som saumlljer vaumlsterlaumlndska produkter Den

elektroniska butiken kommer att oumlppnas i Japan 2015 Deras foumlrvaumlntningar aumlr att faring in

en miljon dollar i foumlrsaumlljning per aringr I deras elektroniska moumlbelaffaumlr saumlljs bla stolar bord

soffor och lampor Maringlgruppen aumlr alla konsumenter mellan 18-60 aringringar

Japaner aumlr intresserade av vaumlsterlaumlndska produkter och livsstil men foumlr de flesta varor aumlr

designen knutna till deras egen kultur vilket goumlr dem mer intresserad Det aumlr ocksaring mycket

viktigt att ha sin hemsida paring japanska eftersom 99 av den japanska befolkningen foumlre-

drar att inte laumlsa inneharingllet paring andra spraringk (Khurana)

Japan aumlr ett land med vaumlrldens tredje stoumlrsta ekonomi paring 5 biljoner De har vaumlrldens ti-

onde stoumlrsta befolkning med ca 1271 miljoner invaringnare varav 70 av den totala befolk-

ningen anvaumlnder internet och 24 av dem anvaumlnder internet paring sin smarttelefon

(Khurana)

Viktigt med detta projekt aumlr att sikta aringt raumltt haringll och betjaumlna kunderna paring det baumlsta saumlttet

via webbplatsen Foumlr att kunna faringnga saring maringnga kunder som moumljligt aumlr det mycket viktigt

att designa en webbplats som aumlr anvaumlndarvaumlnlig stilig och laumltt att anvaumlnda (Wroblewski

2011)

Jag har daumlrfoumlr kommit underfund med att anvaumlnda Mobile first och Responsiv design

metoden foumlr att utveckla den mobila 909jp sidan Med tanke paring att det aumlr en Responsiv

design skall layouten paring den mobila versionen ocksaring passa in med de stoumlrre skaumlrmarna

naumlr sidan skalas upp Det aumlr dock viktigt poaumlngtera att jag endast kommer att koncentrera

mig paring den mobila designen och utveckla designen endast foumlr denna forskning

38

6 ANALYS AV DEN NYA DESIGNEN

Med hjaumllp av den tidigare designen paring 909jp och de kritiska punkterna jag har hittat under

forskningen har jag skapat en ny och foumlrbaumlttrad design av webbplatsen foumlr mobiler I det

haumlr kapitlet kommer jag att visa naringgra exempel paring den tidigare designen och jaumlmfoumlra den

med nya designen samt analysera arbetet

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger)

1 Call-to-action knapparna

Under hela arbetsprocessen har jag haft i minnet att navigeringar laumlnkar och knap-

parna ska vara tillraumlckligt stora att klicka paring I den tidigare designen har de stora

bilder paring kategorier vilket jag tycker aumlr en bra design att aringtervaumlnda

39

2 Soumlkfunktionen

Paring den tidigare versionen haumlr nedan ser man att soumlkfunktionen inte finns med

medan paring den nya designen ser man soumlkfunktionen genast naumlr man kommer till

sidan Som tidigare framfoumlrdes att soumlkfunktionen alltid ska synas saring att man laumltt

skall kunna soumlka fram produkterna Om soumlkfunktionen inte finns med eller aumlr svaringr

att hitta naumlr den behoumlvs kan det orsaka missnoumlje hos anvaumlndarna (Mehra Gagan

2015)

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp

Figur 63 Soumlkfunktionen paring den nya designen 909jp

40

3 Laumltt att navigera

Naumlr skaumlrmen aumlr liten aumlr det viktig att ha en enkel layout (Wroblewski 2011)

Jag har daumlrfor i den nya designen flyttat rdquoHemrdquo och rdquoBlogrdquo knapparna bort fraringn

den oumlvre menyn Hem-knappen finns nu i hamburgarmenyn paring vaumlnstra sidan me-

dan Blog-knappen finns i footer Detta goumlr att det ser mera organiserat ut

Figur 64 Gamla designen

Laringt oss foumlrflytta vidare till menyer foumlr kategorier Paring hemsidan har man tvaring alter-

nativ att naring kategorierna Foumlrsta aumlr den hamburgarmenyn knappen paring vaumlnstra si-

dan I menyn aumlr kategorierna indelade i fyra delar stolar lampor ergonomisk och

soffa amp middag Detta goumlr det laumltt och klart foumlr anvaumlndarna var produkterna finns

Eftersom vi bara har partiell uppmaumlrksamhet fraringn anvaumlndarna naumlr de aumlr paring sina

smarttelefoner har jag valt att saumltta in ikoner i menyn (Figur 65) Naumlr anvaumlndaren

bara anvaumlnder ena oumlgat foumlr att kolla paring mobilen och andra oumlgat foumlr naringgonting annat

ska den lilla skaumlrmen med webbplatsen kunna faringnga uppmaumlrksamheten samt un-

derlaumltta anvaumlndningen av webbplatsen (Wroblewski 2011)

41

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny

Andra menyn for kategorierna aumlr de fyra bilderna under Aeron chair slideshowen

Paring den tidigare designen ser man endast ett foumlnster av kategorierna som aumlr place-

rade i en kolumn som upprepas loggraumltt (Figur 66) Det haumlr goumlr att anvaumlndaren

maringste skrolla ner foumlr att se varenda kategori vilket kan orsaka obekvaumlmlighet Att

se flera kategorier paring samma skaumlrm sparar tid och anvaumlndaren kommer aumlven baumlttre

iharingg var sakerna finns Att ha bara rdquoenrdquo stor bild som syns paring skaumlrmen och vara

tvungen att skrolla ner foumlr att se naumlsta bild aumlr frustrerande Paring den nya designen

har jag tvaring rutor av kategorier bredvid varandra (Figur 66)

42

Figur 66 Kategorier paring den gamla designen (till vaumlnster) Kategorier paring den nya designen (till houmlger)

4 Ta det roliga ur shopping

Paring den nya designen straumlvar jag efter att erbjuda en bekvaumlm shopping-upplevelse

Naumlr anvaumlndarna besoumlker e-handeln med en smarttelefon foumlrvaumlntar hanhon sig

ocksaring att kunna ta del av allt inneharingll och goumlra jaumlmfoumlrelser med andra produkter

Jag har daumlrfoumlr i den nya designen pressat ihop laumlngden paring kolumnhoumljden som om-

ringar produkten Som resultat ser vi nu fyra produkter paring samma skaumlrm (Figur

67) I den tidigare designen ser vi en enda produkt paring en skaumlrm och foumlr att se

andra produkter maringste vi skrolla ner Paring det haumlr saumlttet har anvaumlndarna svaringrare att

jaumlmfoumlra produkterna (Laya 2014)

43

Figur 67 Tidigare produktsida (till vaumlnster) Ny produktsida (till houmlger)

I den tidigare designen ser vi ocksaring att det finns endast produktens bild produk-

tens namn koumlpvagnen och infoikonen Om man vill faring reda paring produktens inform-

ation maringste man klicka paring produktens bild eller paring infoikonen som foumlr oss direkt

till sjaumllva produktens sida Bara foumlr att man vill faring reda paring vad det aumlr foumlr produkt

foumlrs man vidare till en annan sida Det haumlr kan orsaka att kunden inte njuter totalt

av shoppingen och dessutom kan han inte jaumlmfoumlra produkterna naumlr han aumlr paring ka-

tegoriernas sida (Laya 2014)

Laringt oss hoppa vidare till den nya designen (Figur 68) Paring den nya designen har

jag satt in en kort detaljbeskrivning foumlr varje produkt Dessutom naumlr man klickar

paring infoikonen paring houmlgra sidan kommer man inte direkt till produktsidan utan det

kommer att dyka upp en inforuta som har en kort beskrivning paring produkten Om

anvaumlndaren aumlr intresserad av produkten kan han garing in till sjaumllva produktsida ge-

nom att klicka paring rdquoView productrdquo eller ocksaring paring produktbilden daumlr hanhon kan

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

32

och goumlr att vi kan leverera innovativa upplevelser genom att bygga utifraringn nya

funktioner som finns inbyggda i de mobila enheterna (bla GEO lokalisering)

En mobil webbplats behoumlver endast ha en mycket enkel layout och navigeringen ska vara

laumltt och effektiv

Naumlr man designar med Mobile first metoden tvingas man goumlra viktiga beslut om vad som

ska prioriteras Naumlr den optimerad design foumlr en liten skaumlrm visas paring en stoumlrre skaumlrm

kommer det att bli laumlttare att designa paring de stoumlrre skaumlrmarna Allt som ska goumlras aumlr daring

bara att fylla paring inneharingllet och designa saring att det aumlr grafiskt tilltalande och laumltt att hitta

inneharingllet (Wroblewski 2011)

41 Varfoumlr Mobile first

Vaumlrlden vi lever i idag aumlr inte mera som foumlr tio aringr sedan Allt runtom oss har utvecklats

speciellt mobiltelefonerna Tidigare anvaumlndes mobiltelefoner bara foumlr att skicka med-

delandet ringa och ta emot samtal Nu anvaumlnds den till foumlr att dels ta bilder video GPS

navigation foumlr vaumlgvisning och speciellt internetanvaumlndningen saringsom Google nyheter

Facebook Youtube och mycket mer Paring grund av det har ocksaring varingr livsstil foumlraumlndrats

Internetanvaumlndning idag har blivit allt vanligare Idag anvaumlnder vi naumltet i skolan paring jobbet

eller var och naumlr som helst bara man har en smarttelefon eller surfplatta och naumltet kopplat

Tidigare boumlrjade man bygga en webbplats fraringn den stoumlrsta skaumlrmen medan den mobila

sidan var en biprodukt Laringt oss saumlga att man har en webbplats med en rik grafisk layout

och ser stilig ut paring stationaumlra datorer Naumlr man skalar ner sidan foumlr att passa en mobilskaumlrm

kommer resultatet att vara en smaumlrta foumlr varingra oumlgon Paring den lilla mobilskaumlrmen kommer

det att vara olaumlsligt och svaringrt att anvaumlnda Foumlr att naring inneharingllet maringste du tom zooma in

och ut eller skrolla till houmlger och vaumlnster Det haumlr kommer att ge en negativ bild av ditt

foumlretag och anvaumlndarna kanske aldrig mera besoumlker din webbplats (Wroblewski 2011)

Ett bra exempel aumlr Tokyo Skytree webbplats som aumlnnu idag inte ha byggt in funktionalitet

och designen foumlr mindre skaumlrmupploumlsningar paring den engelska sidan

33

Tokyo Skytree aumlr vaumlrldens naumlst houmlgsta torn efter Burj Khalifa Tornet aumlr Japans houmlgsta

byggnadsverk med en houmljd paring 634 meter Den oumlppnades 22 maj 2012 och under det foumlrsta

aringret hade den 64 miljoner besoumlkare fraringn hela vaumlrlden Trots det har de laringtit bli att utveckla

den engelska webbsidan Paring bilden ser man att hemsidan ser exakt likadant ut paring stationaumlr

dator och paring mobilen

Figur 42 Hemsidan paring Tokyo Skytree paring stationaumlr datorskaumlrm

34

Figur 43 Hemsidan foumlr Tokyo Skytree Foumlrsta bilden visar hur det ser ut normalt Andra bilden visar naumlr man zoomar

in

Naumlr man foumlrsoumlker zooma in foumlr att laumlsa inneharingllet hoppar sidbalken (paring vaumlnstra sidan) paring

texten Det haumlr ger en mycket daringlig anvaumlndarupplevelse och kan ge fel bild av turistplat-

sen Ett annat fel paring sidan aumlr naumlr man vaumlljer spraringk till japanska ser sidan inte likadant ut

35

Figure 44 Hemsidan paring Tokyo Skytree paring japanska

Om du kan laumlsa japanska kommer du att undra varfoumlr det finns massor med information

och sidan ser mycket trevligare ut paring den japanska sidan Paring den internationella sidan

dvs engelska ser det inte lika trevligt ut och inneharingller inte allt som det goumlr paring den

japanska sidan Det aumlr som om den stoumlrsta maringlgruppen aumlr foumlr japanska turister och som

om de skulle inte bry sig om turister fraringn utlandet

Utoumlver det har de ocksaring byggt en mobilsida foumlr den japanska webbsidan Varfoumlr satsa bara

paring den japanska sidan och inte den engelska sidan naumlr maringlgruppen aumlr hela vaumlrlden

36

Figur 45 Mobil sidan paring Tokyo Skytree paring japanska

Vi lever i 2015 saring alla borde veta att det aumlr vaumlldigt viktig att ha en mobil webbplats som

erbjuder en bra anvaumlndarupplevelse paring alla spraringk som webbplatsen erbjuder Naumlr man har

sin sida paring flera spraringk och aumlndaring bestaumlmmer sig att bygga sidan ordentligt bara paring ett spraringk

kan anvaumlndarna faring en fel bild av foumlretaget I vaumlrsta fall kommer anvaumlndarna tycka att sidan

aumlr oparinglitligt och aringterkommer aldrig igen

Mobile first metoden aumlr daumlrfoumlr en mycket effektiv metod att bygga sin webbplats med

Man boumlrjar med att bygga sin webbplats fraringn den minsta skaumlrmen Man tvingas goumlra be-

slut om vad som ska absolut prioriteras Arbetsprocessen foumlr oss webbdesigners blir

mycket effektivare genom att foumlrst designa fraringn den minsta skaumlrmen och sedan foumlrflytta

oss till de stoumlrre skaumlrmarna Har man ett 6 kvadratmeters sovrum och foumlrsoumlker faring sin saumlng

skrivbord hylla klaumldskaringp och soffan att rymmas in aumlr det ganska utmanande Men naumlr

man boumlrjar med det mest utmanande i arbetsprocessen blir arbetet ocksaring mindre utma-

nande desto stoumlrre rum eller skaumlrm det blir (Wroblewski 2011)

37

5 909JP

909jp aumlr en elektronisk handel en moumlbelaffaumlr som saumlljer vaumlsterlaumlndska produkter Den

elektroniska butiken kommer att oumlppnas i Japan 2015 Deras foumlrvaumlntningar aumlr att faring in

en miljon dollar i foumlrsaumlljning per aringr I deras elektroniska moumlbelaffaumlr saumlljs bla stolar bord

soffor och lampor Maringlgruppen aumlr alla konsumenter mellan 18-60 aringringar

Japaner aumlr intresserade av vaumlsterlaumlndska produkter och livsstil men foumlr de flesta varor aumlr

designen knutna till deras egen kultur vilket goumlr dem mer intresserad Det aumlr ocksaring mycket

viktigt att ha sin hemsida paring japanska eftersom 99 av den japanska befolkningen foumlre-

drar att inte laumlsa inneharingllet paring andra spraringk (Khurana)

Japan aumlr ett land med vaumlrldens tredje stoumlrsta ekonomi paring 5 biljoner De har vaumlrldens ti-

onde stoumlrsta befolkning med ca 1271 miljoner invaringnare varav 70 av den totala befolk-

ningen anvaumlnder internet och 24 av dem anvaumlnder internet paring sin smarttelefon

(Khurana)

Viktigt med detta projekt aumlr att sikta aringt raumltt haringll och betjaumlna kunderna paring det baumlsta saumlttet

via webbplatsen Foumlr att kunna faringnga saring maringnga kunder som moumljligt aumlr det mycket viktigt

att designa en webbplats som aumlr anvaumlndarvaumlnlig stilig och laumltt att anvaumlnda (Wroblewski

2011)

Jag har daumlrfoumlr kommit underfund med att anvaumlnda Mobile first och Responsiv design

metoden foumlr att utveckla den mobila 909jp sidan Med tanke paring att det aumlr en Responsiv

design skall layouten paring den mobila versionen ocksaring passa in med de stoumlrre skaumlrmarna

naumlr sidan skalas upp Det aumlr dock viktigt poaumlngtera att jag endast kommer att koncentrera

mig paring den mobila designen och utveckla designen endast foumlr denna forskning

38

6 ANALYS AV DEN NYA DESIGNEN

Med hjaumllp av den tidigare designen paring 909jp och de kritiska punkterna jag har hittat under

forskningen har jag skapat en ny och foumlrbaumlttrad design av webbplatsen foumlr mobiler I det

haumlr kapitlet kommer jag att visa naringgra exempel paring den tidigare designen och jaumlmfoumlra den

med nya designen samt analysera arbetet

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger)

1 Call-to-action knapparna

Under hela arbetsprocessen har jag haft i minnet att navigeringar laumlnkar och knap-

parna ska vara tillraumlckligt stora att klicka paring I den tidigare designen har de stora

bilder paring kategorier vilket jag tycker aumlr en bra design att aringtervaumlnda

39

2 Soumlkfunktionen

Paring den tidigare versionen haumlr nedan ser man att soumlkfunktionen inte finns med

medan paring den nya designen ser man soumlkfunktionen genast naumlr man kommer till

sidan Som tidigare framfoumlrdes att soumlkfunktionen alltid ska synas saring att man laumltt

skall kunna soumlka fram produkterna Om soumlkfunktionen inte finns med eller aumlr svaringr

att hitta naumlr den behoumlvs kan det orsaka missnoumlje hos anvaumlndarna (Mehra Gagan

2015)

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp

Figur 63 Soumlkfunktionen paring den nya designen 909jp

40

3 Laumltt att navigera

Naumlr skaumlrmen aumlr liten aumlr det viktig att ha en enkel layout (Wroblewski 2011)

Jag har daumlrfor i den nya designen flyttat rdquoHemrdquo och rdquoBlogrdquo knapparna bort fraringn

den oumlvre menyn Hem-knappen finns nu i hamburgarmenyn paring vaumlnstra sidan me-

dan Blog-knappen finns i footer Detta goumlr att det ser mera organiserat ut

Figur 64 Gamla designen

Laringt oss foumlrflytta vidare till menyer foumlr kategorier Paring hemsidan har man tvaring alter-

nativ att naring kategorierna Foumlrsta aumlr den hamburgarmenyn knappen paring vaumlnstra si-

dan I menyn aumlr kategorierna indelade i fyra delar stolar lampor ergonomisk och

soffa amp middag Detta goumlr det laumltt och klart foumlr anvaumlndarna var produkterna finns

Eftersom vi bara har partiell uppmaumlrksamhet fraringn anvaumlndarna naumlr de aumlr paring sina

smarttelefoner har jag valt att saumltta in ikoner i menyn (Figur 65) Naumlr anvaumlndaren

bara anvaumlnder ena oumlgat foumlr att kolla paring mobilen och andra oumlgat foumlr naringgonting annat

ska den lilla skaumlrmen med webbplatsen kunna faringnga uppmaumlrksamheten samt un-

derlaumltta anvaumlndningen av webbplatsen (Wroblewski 2011)

41

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny

Andra menyn for kategorierna aumlr de fyra bilderna under Aeron chair slideshowen

Paring den tidigare designen ser man endast ett foumlnster av kategorierna som aumlr place-

rade i en kolumn som upprepas loggraumltt (Figur 66) Det haumlr goumlr att anvaumlndaren

maringste skrolla ner foumlr att se varenda kategori vilket kan orsaka obekvaumlmlighet Att

se flera kategorier paring samma skaumlrm sparar tid och anvaumlndaren kommer aumlven baumlttre

iharingg var sakerna finns Att ha bara rdquoenrdquo stor bild som syns paring skaumlrmen och vara

tvungen att skrolla ner foumlr att se naumlsta bild aumlr frustrerande Paring den nya designen

har jag tvaring rutor av kategorier bredvid varandra (Figur 66)

42

Figur 66 Kategorier paring den gamla designen (till vaumlnster) Kategorier paring den nya designen (till houmlger)

4 Ta det roliga ur shopping

Paring den nya designen straumlvar jag efter att erbjuda en bekvaumlm shopping-upplevelse

Naumlr anvaumlndarna besoumlker e-handeln med en smarttelefon foumlrvaumlntar hanhon sig

ocksaring att kunna ta del av allt inneharingll och goumlra jaumlmfoumlrelser med andra produkter

Jag har daumlrfoumlr i den nya designen pressat ihop laumlngden paring kolumnhoumljden som om-

ringar produkten Som resultat ser vi nu fyra produkter paring samma skaumlrm (Figur

67) I den tidigare designen ser vi en enda produkt paring en skaumlrm och foumlr att se

andra produkter maringste vi skrolla ner Paring det haumlr saumlttet har anvaumlndarna svaringrare att

jaumlmfoumlra produkterna (Laya 2014)

43

Figur 67 Tidigare produktsida (till vaumlnster) Ny produktsida (till houmlger)

I den tidigare designen ser vi ocksaring att det finns endast produktens bild produk-

tens namn koumlpvagnen och infoikonen Om man vill faring reda paring produktens inform-

ation maringste man klicka paring produktens bild eller paring infoikonen som foumlr oss direkt

till sjaumllva produktens sida Bara foumlr att man vill faring reda paring vad det aumlr foumlr produkt

foumlrs man vidare till en annan sida Det haumlr kan orsaka att kunden inte njuter totalt

av shoppingen och dessutom kan han inte jaumlmfoumlra produkterna naumlr han aumlr paring ka-

tegoriernas sida (Laya 2014)

Laringt oss hoppa vidare till den nya designen (Figur 68) Paring den nya designen har

jag satt in en kort detaljbeskrivning foumlr varje produkt Dessutom naumlr man klickar

paring infoikonen paring houmlgra sidan kommer man inte direkt till produktsidan utan det

kommer att dyka upp en inforuta som har en kort beskrivning paring produkten Om

anvaumlndaren aumlr intresserad av produkten kan han garing in till sjaumllva produktsida ge-

nom att klicka paring rdquoView productrdquo eller ocksaring paring produktbilden daumlr hanhon kan

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

33

Tokyo Skytree aumlr vaumlrldens naumlst houmlgsta torn efter Burj Khalifa Tornet aumlr Japans houmlgsta

byggnadsverk med en houmljd paring 634 meter Den oumlppnades 22 maj 2012 och under det foumlrsta

aringret hade den 64 miljoner besoumlkare fraringn hela vaumlrlden Trots det har de laringtit bli att utveckla

den engelska webbsidan Paring bilden ser man att hemsidan ser exakt likadant ut paring stationaumlr

dator och paring mobilen

Figur 42 Hemsidan paring Tokyo Skytree paring stationaumlr datorskaumlrm

34

Figur 43 Hemsidan foumlr Tokyo Skytree Foumlrsta bilden visar hur det ser ut normalt Andra bilden visar naumlr man zoomar

in

Naumlr man foumlrsoumlker zooma in foumlr att laumlsa inneharingllet hoppar sidbalken (paring vaumlnstra sidan) paring

texten Det haumlr ger en mycket daringlig anvaumlndarupplevelse och kan ge fel bild av turistplat-

sen Ett annat fel paring sidan aumlr naumlr man vaumlljer spraringk till japanska ser sidan inte likadant ut

35

Figure 44 Hemsidan paring Tokyo Skytree paring japanska

Om du kan laumlsa japanska kommer du att undra varfoumlr det finns massor med information

och sidan ser mycket trevligare ut paring den japanska sidan Paring den internationella sidan

dvs engelska ser det inte lika trevligt ut och inneharingller inte allt som det goumlr paring den

japanska sidan Det aumlr som om den stoumlrsta maringlgruppen aumlr foumlr japanska turister och som

om de skulle inte bry sig om turister fraringn utlandet

Utoumlver det har de ocksaring byggt en mobilsida foumlr den japanska webbsidan Varfoumlr satsa bara

paring den japanska sidan och inte den engelska sidan naumlr maringlgruppen aumlr hela vaumlrlden

36

Figur 45 Mobil sidan paring Tokyo Skytree paring japanska

Vi lever i 2015 saring alla borde veta att det aumlr vaumlldigt viktig att ha en mobil webbplats som

erbjuder en bra anvaumlndarupplevelse paring alla spraringk som webbplatsen erbjuder Naumlr man har

sin sida paring flera spraringk och aumlndaring bestaumlmmer sig att bygga sidan ordentligt bara paring ett spraringk

kan anvaumlndarna faring en fel bild av foumlretaget I vaumlrsta fall kommer anvaumlndarna tycka att sidan

aumlr oparinglitligt och aringterkommer aldrig igen

Mobile first metoden aumlr daumlrfoumlr en mycket effektiv metod att bygga sin webbplats med

Man boumlrjar med att bygga sin webbplats fraringn den minsta skaumlrmen Man tvingas goumlra be-

slut om vad som ska absolut prioriteras Arbetsprocessen foumlr oss webbdesigners blir

mycket effektivare genom att foumlrst designa fraringn den minsta skaumlrmen och sedan foumlrflytta

oss till de stoumlrre skaumlrmarna Har man ett 6 kvadratmeters sovrum och foumlrsoumlker faring sin saumlng

skrivbord hylla klaumldskaringp och soffan att rymmas in aumlr det ganska utmanande Men naumlr

man boumlrjar med det mest utmanande i arbetsprocessen blir arbetet ocksaring mindre utma-

nande desto stoumlrre rum eller skaumlrm det blir (Wroblewski 2011)

37

5 909JP

909jp aumlr en elektronisk handel en moumlbelaffaumlr som saumlljer vaumlsterlaumlndska produkter Den

elektroniska butiken kommer att oumlppnas i Japan 2015 Deras foumlrvaumlntningar aumlr att faring in

en miljon dollar i foumlrsaumlljning per aringr I deras elektroniska moumlbelaffaumlr saumlljs bla stolar bord

soffor och lampor Maringlgruppen aumlr alla konsumenter mellan 18-60 aringringar

Japaner aumlr intresserade av vaumlsterlaumlndska produkter och livsstil men foumlr de flesta varor aumlr

designen knutna till deras egen kultur vilket goumlr dem mer intresserad Det aumlr ocksaring mycket

viktigt att ha sin hemsida paring japanska eftersom 99 av den japanska befolkningen foumlre-

drar att inte laumlsa inneharingllet paring andra spraringk (Khurana)

Japan aumlr ett land med vaumlrldens tredje stoumlrsta ekonomi paring 5 biljoner De har vaumlrldens ti-

onde stoumlrsta befolkning med ca 1271 miljoner invaringnare varav 70 av den totala befolk-

ningen anvaumlnder internet och 24 av dem anvaumlnder internet paring sin smarttelefon

(Khurana)

Viktigt med detta projekt aumlr att sikta aringt raumltt haringll och betjaumlna kunderna paring det baumlsta saumlttet

via webbplatsen Foumlr att kunna faringnga saring maringnga kunder som moumljligt aumlr det mycket viktigt

att designa en webbplats som aumlr anvaumlndarvaumlnlig stilig och laumltt att anvaumlnda (Wroblewski

2011)

Jag har daumlrfoumlr kommit underfund med att anvaumlnda Mobile first och Responsiv design

metoden foumlr att utveckla den mobila 909jp sidan Med tanke paring att det aumlr en Responsiv

design skall layouten paring den mobila versionen ocksaring passa in med de stoumlrre skaumlrmarna

naumlr sidan skalas upp Det aumlr dock viktigt poaumlngtera att jag endast kommer att koncentrera

mig paring den mobila designen och utveckla designen endast foumlr denna forskning

38

6 ANALYS AV DEN NYA DESIGNEN

Med hjaumllp av den tidigare designen paring 909jp och de kritiska punkterna jag har hittat under

forskningen har jag skapat en ny och foumlrbaumlttrad design av webbplatsen foumlr mobiler I det

haumlr kapitlet kommer jag att visa naringgra exempel paring den tidigare designen och jaumlmfoumlra den

med nya designen samt analysera arbetet

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger)

1 Call-to-action knapparna

Under hela arbetsprocessen har jag haft i minnet att navigeringar laumlnkar och knap-

parna ska vara tillraumlckligt stora att klicka paring I den tidigare designen har de stora

bilder paring kategorier vilket jag tycker aumlr en bra design att aringtervaumlnda

39

2 Soumlkfunktionen

Paring den tidigare versionen haumlr nedan ser man att soumlkfunktionen inte finns med

medan paring den nya designen ser man soumlkfunktionen genast naumlr man kommer till

sidan Som tidigare framfoumlrdes att soumlkfunktionen alltid ska synas saring att man laumltt

skall kunna soumlka fram produkterna Om soumlkfunktionen inte finns med eller aumlr svaringr

att hitta naumlr den behoumlvs kan det orsaka missnoumlje hos anvaumlndarna (Mehra Gagan

2015)

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp

Figur 63 Soumlkfunktionen paring den nya designen 909jp

40

3 Laumltt att navigera

Naumlr skaumlrmen aumlr liten aumlr det viktig att ha en enkel layout (Wroblewski 2011)

Jag har daumlrfor i den nya designen flyttat rdquoHemrdquo och rdquoBlogrdquo knapparna bort fraringn

den oumlvre menyn Hem-knappen finns nu i hamburgarmenyn paring vaumlnstra sidan me-

dan Blog-knappen finns i footer Detta goumlr att det ser mera organiserat ut

Figur 64 Gamla designen

Laringt oss foumlrflytta vidare till menyer foumlr kategorier Paring hemsidan har man tvaring alter-

nativ att naring kategorierna Foumlrsta aumlr den hamburgarmenyn knappen paring vaumlnstra si-

dan I menyn aumlr kategorierna indelade i fyra delar stolar lampor ergonomisk och

soffa amp middag Detta goumlr det laumltt och klart foumlr anvaumlndarna var produkterna finns

Eftersom vi bara har partiell uppmaumlrksamhet fraringn anvaumlndarna naumlr de aumlr paring sina

smarttelefoner har jag valt att saumltta in ikoner i menyn (Figur 65) Naumlr anvaumlndaren

bara anvaumlnder ena oumlgat foumlr att kolla paring mobilen och andra oumlgat foumlr naringgonting annat

ska den lilla skaumlrmen med webbplatsen kunna faringnga uppmaumlrksamheten samt un-

derlaumltta anvaumlndningen av webbplatsen (Wroblewski 2011)

41

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny

Andra menyn for kategorierna aumlr de fyra bilderna under Aeron chair slideshowen

Paring den tidigare designen ser man endast ett foumlnster av kategorierna som aumlr place-

rade i en kolumn som upprepas loggraumltt (Figur 66) Det haumlr goumlr att anvaumlndaren

maringste skrolla ner foumlr att se varenda kategori vilket kan orsaka obekvaumlmlighet Att

se flera kategorier paring samma skaumlrm sparar tid och anvaumlndaren kommer aumlven baumlttre

iharingg var sakerna finns Att ha bara rdquoenrdquo stor bild som syns paring skaumlrmen och vara

tvungen att skrolla ner foumlr att se naumlsta bild aumlr frustrerande Paring den nya designen

har jag tvaring rutor av kategorier bredvid varandra (Figur 66)

42

Figur 66 Kategorier paring den gamla designen (till vaumlnster) Kategorier paring den nya designen (till houmlger)

4 Ta det roliga ur shopping

Paring den nya designen straumlvar jag efter att erbjuda en bekvaumlm shopping-upplevelse

Naumlr anvaumlndarna besoumlker e-handeln med en smarttelefon foumlrvaumlntar hanhon sig

ocksaring att kunna ta del av allt inneharingll och goumlra jaumlmfoumlrelser med andra produkter

Jag har daumlrfoumlr i den nya designen pressat ihop laumlngden paring kolumnhoumljden som om-

ringar produkten Som resultat ser vi nu fyra produkter paring samma skaumlrm (Figur

67) I den tidigare designen ser vi en enda produkt paring en skaumlrm och foumlr att se

andra produkter maringste vi skrolla ner Paring det haumlr saumlttet har anvaumlndarna svaringrare att

jaumlmfoumlra produkterna (Laya 2014)

43

Figur 67 Tidigare produktsida (till vaumlnster) Ny produktsida (till houmlger)

I den tidigare designen ser vi ocksaring att det finns endast produktens bild produk-

tens namn koumlpvagnen och infoikonen Om man vill faring reda paring produktens inform-

ation maringste man klicka paring produktens bild eller paring infoikonen som foumlr oss direkt

till sjaumllva produktens sida Bara foumlr att man vill faring reda paring vad det aumlr foumlr produkt

foumlrs man vidare till en annan sida Det haumlr kan orsaka att kunden inte njuter totalt

av shoppingen och dessutom kan han inte jaumlmfoumlra produkterna naumlr han aumlr paring ka-

tegoriernas sida (Laya 2014)

Laringt oss hoppa vidare till den nya designen (Figur 68) Paring den nya designen har

jag satt in en kort detaljbeskrivning foumlr varje produkt Dessutom naumlr man klickar

paring infoikonen paring houmlgra sidan kommer man inte direkt till produktsidan utan det

kommer att dyka upp en inforuta som har en kort beskrivning paring produkten Om

anvaumlndaren aumlr intresserad av produkten kan han garing in till sjaumllva produktsida ge-

nom att klicka paring rdquoView productrdquo eller ocksaring paring produktbilden daumlr hanhon kan

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

34

Figur 43 Hemsidan foumlr Tokyo Skytree Foumlrsta bilden visar hur det ser ut normalt Andra bilden visar naumlr man zoomar

in

Naumlr man foumlrsoumlker zooma in foumlr att laumlsa inneharingllet hoppar sidbalken (paring vaumlnstra sidan) paring

texten Det haumlr ger en mycket daringlig anvaumlndarupplevelse och kan ge fel bild av turistplat-

sen Ett annat fel paring sidan aumlr naumlr man vaumlljer spraringk till japanska ser sidan inte likadant ut

35

Figure 44 Hemsidan paring Tokyo Skytree paring japanska

Om du kan laumlsa japanska kommer du att undra varfoumlr det finns massor med information

och sidan ser mycket trevligare ut paring den japanska sidan Paring den internationella sidan

dvs engelska ser det inte lika trevligt ut och inneharingller inte allt som det goumlr paring den

japanska sidan Det aumlr som om den stoumlrsta maringlgruppen aumlr foumlr japanska turister och som

om de skulle inte bry sig om turister fraringn utlandet

Utoumlver det har de ocksaring byggt en mobilsida foumlr den japanska webbsidan Varfoumlr satsa bara

paring den japanska sidan och inte den engelska sidan naumlr maringlgruppen aumlr hela vaumlrlden

36

Figur 45 Mobil sidan paring Tokyo Skytree paring japanska

Vi lever i 2015 saring alla borde veta att det aumlr vaumlldigt viktig att ha en mobil webbplats som

erbjuder en bra anvaumlndarupplevelse paring alla spraringk som webbplatsen erbjuder Naumlr man har

sin sida paring flera spraringk och aumlndaring bestaumlmmer sig att bygga sidan ordentligt bara paring ett spraringk

kan anvaumlndarna faring en fel bild av foumlretaget I vaumlrsta fall kommer anvaumlndarna tycka att sidan

aumlr oparinglitligt och aringterkommer aldrig igen

Mobile first metoden aumlr daumlrfoumlr en mycket effektiv metod att bygga sin webbplats med

Man boumlrjar med att bygga sin webbplats fraringn den minsta skaumlrmen Man tvingas goumlra be-

slut om vad som ska absolut prioriteras Arbetsprocessen foumlr oss webbdesigners blir

mycket effektivare genom att foumlrst designa fraringn den minsta skaumlrmen och sedan foumlrflytta

oss till de stoumlrre skaumlrmarna Har man ett 6 kvadratmeters sovrum och foumlrsoumlker faring sin saumlng

skrivbord hylla klaumldskaringp och soffan att rymmas in aumlr det ganska utmanande Men naumlr

man boumlrjar med det mest utmanande i arbetsprocessen blir arbetet ocksaring mindre utma-

nande desto stoumlrre rum eller skaumlrm det blir (Wroblewski 2011)

37

5 909JP

909jp aumlr en elektronisk handel en moumlbelaffaumlr som saumlljer vaumlsterlaumlndska produkter Den

elektroniska butiken kommer att oumlppnas i Japan 2015 Deras foumlrvaumlntningar aumlr att faring in

en miljon dollar i foumlrsaumlljning per aringr I deras elektroniska moumlbelaffaumlr saumlljs bla stolar bord

soffor och lampor Maringlgruppen aumlr alla konsumenter mellan 18-60 aringringar

Japaner aumlr intresserade av vaumlsterlaumlndska produkter och livsstil men foumlr de flesta varor aumlr

designen knutna till deras egen kultur vilket goumlr dem mer intresserad Det aumlr ocksaring mycket

viktigt att ha sin hemsida paring japanska eftersom 99 av den japanska befolkningen foumlre-

drar att inte laumlsa inneharingllet paring andra spraringk (Khurana)

Japan aumlr ett land med vaumlrldens tredje stoumlrsta ekonomi paring 5 biljoner De har vaumlrldens ti-

onde stoumlrsta befolkning med ca 1271 miljoner invaringnare varav 70 av den totala befolk-

ningen anvaumlnder internet och 24 av dem anvaumlnder internet paring sin smarttelefon

(Khurana)

Viktigt med detta projekt aumlr att sikta aringt raumltt haringll och betjaumlna kunderna paring det baumlsta saumlttet

via webbplatsen Foumlr att kunna faringnga saring maringnga kunder som moumljligt aumlr det mycket viktigt

att designa en webbplats som aumlr anvaumlndarvaumlnlig stilig och laumltt att anvaumlnda (Wroblewski

2011)

Jag har daumlrfoumlr kommit underfund med att anvaumlnda Mobile first och Responsiv design

metoden foumlr att utveckla den mobila 909jp sidan Med tanke paring att det aumlr en Responsiv

design skall layouten paring den mobila versionen ocksaring passa in med de stoumlrre skaumlrmarna

naumlr sidan skalas upp Det aumlr dock viktigt poaumlngtera att jag endast kommer att koncentrera

mig paring den mobila designen och utveckla designen endast foumlr denna forskning

38

6 ANALYS AV DEN NYA DESIGNEN

Med hjaumllp av den tidigare designen paring 909jp och de kritiska punkterna jag har hittat under

forskningen har jag skapat en ny och foumlrbaumlttrad design av webbplatsen foumlr mobiler I det

haumlr kapitlet kommer jag att visa naringgra exempel paring den tidigare designen och jaumlmfoumlra den

med nya designen samt analysera arbetet

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger)

1 Call-to-action knapparna

Under hela arbetsprocessen har jag haft i minnet att navigeringar laumlnkar och knap-

parna ska vara tillraumlckligt stora att klicka paring I den tidigare designen har de stora

bilder paring kategorier vilket jag tycker aumlr en bra design att aringtervaumlnda

39

2 Soumlkfunktionen

Paring den tidigare versionen haumlr nedan ser man att soumlkfunktionen inte finns med

medan paring den nya designen ser man soumlkfunktionen genast naumlr man kommer till

sidan Som tidigare framfoumlrdes att soumlkfunktionen alltid ska synas saring att man laumltt

skall kunna soumlka fram produkterna Om soumlkfunktionen inte finns med eller aumlr svaringr

att hitta naumlr den behoumlvs kan det orsaka missnoumlje hos anvaumlndarna (Mehra Gagan

2015)

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp

Figur 63 Soumlkfunktionen paring den nya designen 909jp

40

3 Laumltt att navigera

Naumlr skaumlrmen aumlr liten aumlr det viktig att ha en enkel layout (Wroblewski 2011)

Jag har daumlrfor i den nya designen flyttat rdquoHemrdquo och rdquoBlogrdquo knapparna bort fraringn

den oumlvre menyn Hem-knappen finns nu i hamburgarmenyn paring vaumlnstra sidan me-

dan Blog-knappen finns i footer Detta goumlr att det ser mera organiserat ut

Figur 64 Gamla designen

Laringt oss foumlrflytta vidare till menyer foumlr kategorier Paring hemsidan har man tvaring alter-

nativ att naring kategorierna Foumlrsta aumlr den hamburgarmenyn knappen paring vaumlnstra si-

dan I menyn aumlr kategorierna indelade i fyra delar stolar lampor ergonomisk och

soffa amp middag Detta goumlr det laumltt och klart foumlr anvaumlndarna var produkterna finns

Eftersom vi bara har partiell uppmaumlrksamhet fraringn anvaumlndarna naumlr de aumlr paring sina

smarttelefoner har jag valt att saumltta in ikoner i menyn (Figur 65) Naumlr anvaumlndaren

bara anvaumlnder ena oumlgat foumlr att kolla paring mobilen och andra oumlgat foumlr naringgonting annat

ska den lilla skaumlrmen med webbplatsen kunna faringnga uppmaumlrksamheten samt un-

derlaumltta anvaumlndningen av webbplatsen (Wroblewski 2011)

41

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny

Andra menyn for kategorierna aumlr de fyra bilderna under Aeron chair slideshowen

Paring den tidigare designen ser man endast ett foumlnster av kategorierna som aumlr place-

rade i en kolumn som upprepas loggraumltt (Figur 66) Det haumlr goumlr att anvaumlndaren

maringste skrolla ner foumlr att se varenda kategori vilket kan orsaka obekvaumlmlighet Att

se flera kategorier paring samma skaumlrm sparar tid och anvaumlndaren kommer aumlven baumlttre

iharingg var sakerna finns Att ha bara rdquoenrdquo stor bild som syns paring skaumlrmen och vara

tvungen att skrolla ner foumlr att se naumlsta bild aumlr frustrerande Paring den nya designen

har jag tvaring rutor av kategorier bredvid varandra (Figur 66)

42

Figur 66 Kategorier paring den gamla designen (till vaumlnster) Kategorier paring den nya designen (till houmlger)

4 Ta det roliga ur shopping

Paring den nya designen straumlvar jag efter att erbjuda en bekvaumlm shopping-upplevelse

Naumlr anvaumlndarna besoumlker e-handeln med en smarttelefon foumlrvaumlntar hanhon sig

ocksaring att kunna ta del av allt inneharingll och goumlra jaumlmfoumlrelser med andra produkter

Jag har daumlrfoumlr i den nya designen pressat ihop laumlngden paring kolumnhoumljden som om-

ringar produkten Som resultat ser vi nu fyra produkter paring samma skaumlrm (Figur

67) I den tidigare designen ser vi en enda produkt paring en skaumlrm och foumlr att se

andra produkter maringste vi skrolla ner Paring det haumlr saumlttet har anvaumlndarna svaringrare att

jaumlmfoumlra produkterna (Laya 2014)

43

Figur 67 Tidigare produktsida (till vaumlnster) Ny produktsida (till houmlger)

I den tidigare designen ser vi ocksaring att det finns endast produktens bild produk-

tens namn koumlpvagnen och infoikonen Om man vill faring reda paring produktens inform-

ation maringste man klicka paring produktens bild eller paring infoikonen som foumlr oss direkt

till sjaumllva produktens sida Bara foumlr att man vill faring reda paring vad det aumlr foumlr produkt

foumlrs man vidare till en annan sida Det haumlr kan orsaka att kunden inte njuter totalt

av shoppingen och dessutom kan han inte jaumlmfoumlra produkterna naumlr han aumlr paring ka-

tegoriernas sida (Laya 2014)

Laringt oss hoppa vidare till den nya designen (Figur 68) Paring den nya designen har

jag satt in en kort detaljbeskrivning foumlr varje produkt Dessutom naumlr man klickar

paring infoikonen paring houmlgra sidan kommer man inte direkt till produktsidan utan det

kommer att dyka upp en inforuta som har en kort beskrivning paring produkten Om

anvaumlndaren aumlr intresserad av produkten kan han garing in till sjaumllva produktsida ge-

nom att klicka paring rdquoView productrdquo eller ocksaring paring produktbilden daumlr hanhon kan

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

35

Figure 44 Hemsidan paring Tokyo Skytree paring japanska

Om du kan laumlsa japanska kommer du att undra varfoumlr det finns massor med information

och sidan ser mycket trevligare ut paring den japanska sidan Paring den internationella sidan

dvs engelska ser det inte lika trevligt ut och inneharingller inte allt som det goumlr paring den

japanska sidan Det aumlr som om den stoumlrsta maringlgruppen aumlr foumlr japanska turister och som

om de skulle inte bry sig om turister fraringn utlandet

Utoumlver det har de ocksaring byggt en mobilsida foumlr den japanska webbsidan Varfoumlr satsa bara

paring den japanska sidan och inte den engelska sidan naumlr maringlgruppen aumlr hela vaumlrlden

36

Figur 45 Mobil sidan paring Tokyo Skytree paring japanska

Vi lever i 2015 saring alla borde veta att det aumlr vaumlldigt viktig att ha en mobil webbplats som

erbjuder en bra anvaumlndarupplevelse paring alla spraringk som webbplatsen erbjuder Naumlr man har

sin sida paring flera spraringk och aumlndaring bestaumlmmer sig att bygga sidan ordentligt bara paring ett spraringk

kan anvaumlndarna faring en fel bild av foumlretaget I vaumlrsta fall kommer anvaumlndarna tycka att sidan

aumlr oparinglitligt och aringterkommer aldrig igen

Mobile first metoden aumlr daumlrfoumlr en mycket effektiv metod att bygga sin webbplats med

Man boumlrjar med att bygga sin webbplats fraringn den minsta skaumlrmen Man tvingas goumlra be-

slut om vad som ska absolut prioriteras Arbetsprocessen foumlr oss webbdesigners blir

mycket effektivare genom att foumlrst designa fraringn den minsta skaumlrmen och sedan foumlrflytta

oss till de stoumlrre skaumlrmarna Har man ett 6 kvadratmeters sovrum och foumlrsoumlker faring sin saumlng

skrivbord hylla klaumldskaringp och soffan att rymmas in aumlr det ganska utmanande Men naumlr

man boumlrjar med det mest utmanande i arbetsprocessen blir arbetet ocksaring mindre utma-

nande desto stoumlrre rum eller skaumlrm det blir (Wroblewski 2011)

37

5 909JP

909jp aumlr en elektronisk handel en moumlbelaffaumlr som saumlljer vaumlsterlaumlndska produkter Den

elektroniska butiken kommer att oumlppnas i Japan 2015 Deras foumlrvaumlntningar aumlr att faring in

en miljon dollar i foumlrsaumlljning per aringr I deras elektroniska moumlbelaffaumlr saumlljs bla stolar bord

soffor och lampor Maringlgruppen aumlr alla konsumenter mellan 18-60 aringringar

Japaner aumlr intresserade av vaumlsterlaumlndska produkter och livsstil men foumlr de flesta varor aumlr

designen knutna till deras egen kultur vilket goumlr dem mer intresserad Det aumlr ocksaring mycket

viktigt att ha sin hemsida paring japanska eftersom 99 av den japanska befolkningen foumlre-

drar att inte laumlsa inneharingllet paring andra spraringk (Khurana)

Japan aumlr ett land med vaumlrldens tredje stoumlrsta ekonomi paring 5 biljoner De har vaumlrldens ti-

onde stoumlrsta befolkning med ca 1271 miljoner invaringnare varav 70 av den totala befolk-

ningen anvaumlnder internet och 24 av dem anvaumlnder internet paring sin smarttelefon

(Khurana)

Viktigt med detta projekt aumlr att sikta aringt raumltt haringll och betjaumlna kunderna paring det baumlsta saumlttet

via webbplatsen Foumlr att kunna faringnga saring maringnga kunder som moumljligt aumlr det mycket viktigt

att designa en webbplats som aumlr anvaumlndarvaumlnlig stilig och laumltt att anvaumlnda (Wroblewski

2011)

Jag har daumlrfoumlr kommit underfund med att anvaumlnda Mobile first och Responsiv design

metoden foumlr att utveckla den mobila 909jp sidan Med tanke paring att det aumlr en Responsiv

design skall layouten paring den mobila versionen ocksaring passa in med de stoumlrre skaumlrmarna

naumlr sidan skalas upp Det aumlr dock viktigt poaumlngtera att jag endast kommer att koncentrera

mig paring den mobila designen och utveckla designen endast foumlr denna forskning

38

6 ANALYS AV DEN NYA DESIGNEN

Med hjaumllp av den tidigare designen paring 909jp och de kritiska punkterna jag har hittat under

forskningen har jag skapat en ny och foumlrbaumlttrad design av webbplatsen foumlr mobiler I det

haumlr kapitlet kommer jag att visa naringgra exempel paring den tidigare designen och jaumlmfoumlra den

med nya designen samt analysera arbetet

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger)

1 Call-to-action knapparna

Under hela arbetsprocessen har jag haft i minnet att navigeringar laumlnkar och knap-

parna ska vara tillraumlckligt stora att klicka paring I den tidigare designen har de stora

bilder paring kategorier vilket jag tycker aumlr en bra design att aringtervaumlnda

39

2 Soumlkfunktionen

Paring den tidigare versionen haumlr nedan ser man att soumlkfunktionen inte finns med

medan paring den nya designen ser man soumlkfunktionen genast naumlr man kommer till

sidan Som tidigare framfoumlrdes att soumlkfunktionen alltid ska synas saring att man laumltt

skall kunna soumlka fram produkterna Om soumlkfunktionen inte finns med eller aumlr svaringr

att hitta naumlr den behoumlvs kan det orsaka missnoumlje hos anvaumlndarna (Mehra Gagan

2015)

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp

Figur 63 Soumlkfunktionen paring den nya designen 909jp

40

3 Laumltt att navigera

Naumlr skaumlrmen aumlr liten aumlr det viktig att ha en enkel layout (Wroblewski 2011)

Jag har daumlrfor i den nya designen flyttat rdquoHemrdquo och rdquoBlogrdquo knapparna bort fraringn

den oumlvre menyn Hem-knappen finns nu i hamburgarmenyn paring vaumlnstra sidan me-

dan Blog-knappen finns i footer Detta goumlr att det ser mera organiserat ut

Figur 64 Gamla designen

Laringt oss foumlrflytta vidare till menyer foumlr kategorier Paring hemsidan har man tvaring alter-

nativ att naring kategorierna Foumlrsta aumlr den hamburgarmenyn knappen paring vaumlnstra si-

dan I menyn aumlr kategorierna indelade i fyra delar stolar lampor ergonomisk och

soffa amp middag Detta goumlr det laumltt och klart foumlr anvaumlndarna var produkterna finns

Eftersom vi bara har partiell uppmaumlrksamhet fraringn anvaumlndarna naumlr de aumlr paring sina

smarttelefoner har jag valt att saumltta in ikoner i menyn (Figur 65) Naumlr anvaumlndaren

bara anvaumlnder ena oumlgat foumlr att kolla paring mobilen och andra oumlgat foumlr naringgonting annat

ska den lilla skaumlrmen med webbplatsen kunna faringnga uppmaumlrksamheten samt un-

derlaumltta anvaumlndningen av webbplatsen (Wroblewski 2011)

41

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny

Andra menyn for kategorierna aumlr de fyra bilderna under Aeron chair slideshowen

Paring den tidigare designen ser man endast ett foumlnster av kategorierna som aumlr place-

rade i en kolumn som upprepas loggraumltt (Figur 66) Det haumlr goumlr att anvaumlndaren

maringste skrolla ner foumlr att se varenda kategori vilket kan orsaka obekvaumlmlighet Att

se flera kategorier paring samma skaumlrm sparar tid och anvaumlndaren kommer aumlven baumlttre

iharingg var sakerna finns Att ha bara rdquoenrdquo stor bild som syns paring skaumlrmen och vara

tvungen att skrolla ner foumlr att se naumlsta bild aumlr frustrerande Paring den nya designen

har jag tvaring rutor av kategorier bredvid varandra (Figur 66)

42

Figur 66 Kategorier paring den gamla designen (till vaumlnster) Kategorier paring den nya designen (till houmlger)

4 Ta det roliga ur shopping

Paring den nya designen straumlvar jag efter att erbjuda en bekvaumlm shopping-upplevelse

Naumlr anvaumlndarna besoumlker e-handeln med en smarttelefon foumlrvaumlntar hanhon sig

ocksaring att kunna ta del av allt inneharingll och goumlra jaumlmfoumlrelser med andra produkter

Jag har daumlrfoumlr i den nya designen pressat ihop laumlngden paring kolumnhoumljden som om-

ringar produkten Som resultat ser vi nu fyra produkter paring samma skaumlrm (Figur

67) I den tidigare designen ser vi en enda produkt paring en skaumlrm och foumlr att se

andra produkter maringste vi skrolla ner Paring det haumlr saumlttet har anvaumlndarna svaringrare att

jaumlmfoumlra produkterna (Laya 2014)

43

Figur 67 Tidigare produktsida (till vaumlnster) Ny produktsida (till houmlger)

I den tidigare designen ser vi ocksaring att det finns endast produktens bild produk-

tens namn koumlpvagnen och infoikonen Om man vill faring reda paring produktens inform-

ation maringste man klicka paring produktens bild eller paring infoikonen som foumlr oss direkt

till sjaumllva produktens sida Bara foumlr att man vill faring reda paring vad det aumlr foumlr produkt

foumlrs man vidare till en annan sida Det haumlr kan orsaka att kunden inte njuter totalt

av shoppingen och dessutom kan han inte jaumlmfoumlra produkterna naumlr han aumlr paring ka-

tegoriernas sida (Laya 2014)

Laringt oss hoppa vidare till den nya designen (Figur 68) Paring den nya designen har

jag satt in en kort detaljbeskrivning foumlr varje produkt Dessutom naumlr man klickar

paring infoikonen paring houmlgra sidan kommer man inte direkt till produktsidan utan det

kommer att dyka upp en inforuta som har en kort beskrivning paring produkten Om

anvaumlndaren aumlr intresserad av produkten kan han garing in till sjaumllva produktsida ge-

nom att klicka paring rdquoView productrdquo eller ocksaring paring produktbilden daumlr hanhon kan

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

36

Figur 45 Mobil sidan paring Tokyo Skytree paring japanska

Vi lever i 2015 saring alla borde veta att det aumlr vaumlldigt viktig att ha en mobil webbplats som

erbjuder en bra anvaumlndarupplevelse paring alla spraringk som webbplatsen erbjuder Naumlr man har

sin sida paring flera spraringk och aumlndaring bestaumlmmer sig att bygga sidan ordentligt bara paring ett spraringk

kan anvaumlndarna faring en fel bild av foumlretaget I vaumlrsta fall kommer anvaumlndarna tycka att sidan

aumlr oparinglitligt och aringterkommer aldrig igen

Mobile first metoden aumlr daumlrfoumlr en mycket effektiv metod att bygga sin webbplats med

Man boumlrjar med att bygga sin webbplats fraringn den minsta skaumlrmen Man tvingas goumlra be-

slut om vad som ska absolut prioriteras Arbetsprocessen foumlr oss webbdesigners blir

mycket effektivare genom att foumlrst designa fraringn den minsta skaumlrmen och sedan foumlrflytta

oss till de stoumlrre skaumlrmarna Har man ett 6 kvadratmeters sovrum och foumlrsoumlker faring sin saumlng

skrivbord hylla klaumldskaringp och soffan att rymmas in aumlr det ganska utmanande Men naumlr

man boumlrjar med det mest utmanande i arbetsprocessen blir arbetet ocksaring mindre utma-

nande desto stoumlrre rum eller skaumlrm det blir (Wroblewski 2011)

37

5 909JP

909jp aumlr en elektronisk handel en moumlbelaffaumlr som saumlljer vaumlsterlaumlndska produkter Den

elektroniska butiken kommer att oumlppnas i Japan 2015 Deras foumlrvaumlntningar aumlr att faring in

en miljon dollar i foumlrsaumlljning per aringr I deras elektroniska moumlbelaffaumlr saumlljs bla stolar bord

soffor och lampor Maringlgruppen aumlr alla konsumenter mellan 18-60 aringringar

Japaner aumlr intresserade av vaumlsterlaumlndska produkter och livsstil men foumlr de flesta varor aumlr

designen knutna till deras egen kultur vilket goumlr dem mer intresserad Det aumlr ocksaring mycket

viktigt att ha sin hemsida paring japanska eftersom 99 av den japanska befolkningen foumlre-

drar att inte laumlsa inneharingllet paring andra spraringk (Khurana)

Japan aumlr ett land med vaumlrldens tredje stoumlrsta ekonomi paring 5 biljoner De har vaumlrldens ti-

onde stoumlrsta befolkning med ca 1271 miljoner invaringnare varav 70 av den totala befolk-

ningen anvaumlnder internet och 24 av dem anvaumlnder internet paring sin smarttelefon

(Khurana)

Viktigt med detta projekt aumlr att sikta aringt raumltt haringll och betjaumlna kunderna paring det baumlsta saumlttet

via webbplatsen Foumlr att kunna faringnga saring maringnga kunder som moumljligt aumlr det mycket viktigt

att designa en webbplats som aumlr anvaumlndarvaumlnlig stilig och laumltt att anvaumlnda (Wroblewski

2011)

Jag har daumlrfoumlr kommit underfund med att anvaumlnda Mobile first och Responsiv design

metoden foumlr att utveckla den mobila 909jp sidan Med tanke paring att det aumlr en Responsiv

design skall layouten paring den mobila versionen ocksaring passa in med de stoumlrre skaumlrmarna

naumlr sidan skalas upp Det aumlr dock viktigt poaumlngtera att jag endast kommer att koncentrera

mig paring den mobila designen och utveckla designen endast foumlr denna forskning

38

6 ANALYS AV DEN NYA DESIGNEN

Med hjaumllp av den tidigare designen paring 909jp och de kritiska punkterna jag har hittat under

forskningen har jag skapat en ny och foumlrbaumlttrad design av webbplatsen foumlr mobiler I det

haumlr kapitlet kommer jag att visa naringgra exempel paring den tidigare designen och jaumlmfoumlra den

med nya designen samt analysera arbetet

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger)

1 Call-to-action knapparna

Under hela arbetsprocessen har jag haft i minnet att navigeringar laumlnkar och knap-

parna ska vara tillraumlckligt stora att klicka paring I den tidigare designen har de stora

bilder paring kategorier vilket jag tycker aumlr en bra design att aringtervaumlnda

39

2 Soumlkfunktionen

Paring den tidigare versionen haumlr nedan ser man att soumlkfunktionen inte finns med

medan paring den nya designen ser man soumlkfunktionen genast naumlr man kommer till

sidan Som tidigare framfoumlrdes att soumlkfunktionen alltid ska synas saring att man laumltt

skall kunna soumlka fram produkterna Om soumlkfunktionen inte finns med eller aumlr svaringr

att hitta naumlr den behoumlvs kan det orsaka missnoumlje hos anvaumlndarna (Mehra Gagan

2015)

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp

Figur 63 Soumlkfunktionen paring den nya designen 909jp

40

3 Laumltt att navigera

Naumlr skaumlrmen aumlr liten aumlr det viktig att ha en enkel layout (Wroblewski 2011)

Jag har daumlrfor i den nya designen flyttat rdquoHemrdquo och rdquoBlogrdquo knapparna bort fraringn

den oumlvre menyn Hem-knappen finns nu i hamburgarmenyn paring vaumlnstra sidan me-

dan Blog-knappen finns i footer Detta goumlr att det ser mera organiserat ut

Figur 64 Gamla designen

Laringt oss foumlrflytta vidare till menyer foumlr kategorier Paring hemsidan har man tvaring alter-

nativ att naring kategorierna Foumlrsta aumlr den hamburgarmenyn knappen paring vaumlnstra si-

dan I menyn aumlr kategorierna indelade i fyra delar stolar lampor ergonomisk och

soffa amp middag Detta goumlr det laumltt och klart foumlr anvaumlndarna var produkterna finns

Eftersom vi bara har partiell uppmaumlrksamhet fraringn anvaumlndarna naumlr de aumlr paring sina

smarttelefoner har jag valt att saumltta in ikoner i menyn (Figur 65) Naumlr anvaumlndaren

bara anvaumlnder ena oumlgat foumlr att kolla paring mobilen och andra oumlgat foumlr naringgonting annat

ska den lilla skaumlrmen med webbplatsen kunna faringnga uppmaumlrksamheten samt un-

derlaumltta anvaumlndningen av webbplatsen (Wroblewski 2011)

41

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny

Andra menyn for kategorierna aumlr de fyra bilderna under Aeron chair slideshowen

Paring den tidigare designen ser man endast ett foumlnster av kategorierna som aumlr place-

rade i en kolumn som upprepas loggraumltt (Figur 66) Det haumlr goumlr att anvaumlndaren

maringste skrolla ner foumlr att se varenda kategori vilket kan orsaka obekvaumlmlighet Att

se flera kategorier paring samma skaumlrm sparar tid och anvaumlndaren kommer aumlven baumlttre

iharingg var sakerna finns Att ha bara rdquoenrdquo stor bild som syns paring skaumlrmen och vara

tvungen att skrolla ner foumlr att se naumlsta bild aumlr frustrerande Paring den nya designen

har jag tvaring rutor av kategorier bredvid varandra (Figur 66)

42

Figur 66 Kategorier paring den gamla designen (till vaumlnster) Kategorier paring den nya designen (till houmlger)

4 Ta det roliga ur shopping

Paring den nya designen straumlvar jag efter att erbjuda en bekvaumlm shopping-upplevelse

Naumlr anvaumlndarna besoumlker e-handeln med en smarttelefon foumlrvaumlntar hanhon sig

ocksaring att kunna ta del av allt inneharingll och goumlra jaumlmfoumlrelser med andra produkter

Jag har daumlrfoumlr i den nya designen pressat ihop laumlngden paring kolumnhoumljden som om-

ringar produkten Som resultat ser vi nu fyra produkter paring samma skaumlrm (Figur

67) I den tidigare designen ser vi en enda produkt paring en skaumlrm och foumlr att se

andra produkter maringste vi skrolla ner Paring det haumlr saumlttet har anvaumlndarna svaringrare att

jaumlmfoumlra produkterna (Laya 2014)

43

Figur 67 Tidigare produktsida (till vaumlnster) Ny produktsida (till houmlger)

I den tidigare designen ser vi ocksaring att det finns endast produktens bild produk-

tens namn koumlpvagnen och infoikonen Om man vill faring reda paring produktens inform-

ation maringste man klicka paring produktens bild eller paring infoikonen som foumlr oss direkt

till sjaumllva produktens sida Bara foumlr att man vill faring reda paring vad det aumlr foumlr produkt

foumlrs man vidare till en annan sida Det haumlr kan orsaka att kunden inte njuter totalt

av shoppingen och dessutom kan han inte jaumlmfoumlra produkterna naumlr han aumlr paring ka-

tegoriernas sida (Laya 2014)

Laringt oss hoppa vidare till den nya designen (Figur 68) Paring den nya designen har

jag satt in en kort detaljbeskrivning foumlr varje produkt Dessutom naumlr man klickar

paring infoikonen paring houmlgra sidan kommer man inte direkt till produktsidan utan det

kommer att dyka upp en inforuta som har en kort beskrivning paring produkten Om

anvaumlndaren aumlr intresserad av produkten kan han garing in till sjaumllva produktsida ge-

nom att klicka paring rdquoView productrdquo eller ocksaring paring produktbilden daumlr hanhon kan

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

37

5 909JP

909jp aumlr en elektronisk handel en moumlbelaffaumlr som saumlljer vaumlsterlaumlndska produkter Den

elektroniska butiken kommer att oumlppnas i Japan 2015 Deras foumlrvaumlntningar aumlr att faring in

en miljon dollar i foumlrsaumlljning per aringr I deras elektroniska moumlbelaffaumlr saumlljs bla stolar bord

soffor och lampor Maringlgruppen aumlr alla konsumenter mellan 18-60 aringringar

Japaner aumlr intresserade av vaumlsterlaumlndska produkter och livsstil men foumlr de flesta varor aumlr

designen knutna till deras egen kultur vilket goumlr dem mer intresserad Det aumlr ocksaring mycket

viktigt att ha sin hemsida paring japanska eftersom 99 av den japanska befolkningen foumlre-

drar att inte laumlsa inneharingllet paring andra spraringk (Khurana)

Japan aumlr ett land med vaumlrldens tredje stoumlrsta ekonomi paring 5 biljoner De har vaumlrldens ti-

onde stoumlrsta befolkning med ca 1271 miljoner invaringnare varav 70 av den totala befolk-

ningen anvaumlnder internet och 24 av dem anvaumlnder internet paring sin smarttelefon

(Khurana)

Viktigt med detta projekt aumlr att sikta aringt raumltt haringll och betjaumlna kunderna paring det baumlsta saumlttet

via webbplatsen Foumlr att kunna faringnga saring maringnga kunder som moumljligt aumlr det mycket viktigt

att designa en webbplats som aumlr anvaumlndarvaumlnlig stilig och laumltt att anvaumlnda (Wroblewski

2011)

Jag har daumlrfoumlr kommit underfund med att anvaumlnda Mobile first och Responsiv design

metoden foumlr att utveckla den mobila 909jp sidan Med tanke paring att det aumlr en Responsiv

design skall layouten paring den mobila versionen ocksaring passa in med de stoumlrre skaumlrmarna

naumlr sidan skalas upp Det aumlr dock viktigt poaumlngtera att jag endast kommer att koncentrera

mig paring den mobila designen och utveckla designen endast foumlr denna forskning

38

6 ANALYS AV DEN NYA DESIGNEN

Med hjaumllp av den tidigare designen paring 909jp och de kritiska punkterna jag har hittat under

forskningen har jag skapat en ny och foumlrbaumlttrad design av webbplatsen foumlr mobiler I det

haumlr kapitlet kommer jag att visa naringgra exempel paring den tidigare designen och jaumlmfoumlra den

med nya designen samt analysera arbetet

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger)

1 Call-to-action knapparna

Under hela arbetsprocessen har jag haft i minnet att navigeringar laumlnkar och knap-

parna ska vara tillraumlckligt stora att klicka paring I den tidigare designen har de stora

bilder paring kategorier vilket jag tycker aumlr en bra design att aringtervaumlnda

39

2 Soumlkfunktionen

Paring den tidigare versionen haumlr nedan ser man att soumlkfunktionen inte finns med

medan paring den nya designen ser man soumlkfunktionen genast naumlr man kommer till

sidan Som tidigare framfoumlrdes att soumlkfunktionen alltid ska synas saring att man laumltt

skall kunna soumlka fram produkterna Om soumlkfunktionen inte finns med eller aumlr svaringr

att hitta naumlr den behoumlvs kan det orsaka missnoumlje hos anvaumlndarna (Mehra Gagan

2015)

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp

Figur 63 Soumlkfunktionen paring den nya designen 909jp

40

3 Laumltt att navigera

Naumlr skaumlrmen aumlr liten aumlr det viktig att ha en enkel layout (Wroblewski 2011)

Jag har daumlrfor i den nya designen flyttat rdquoHemrdquo och rdquoBlogrdquo knapparna bort fraringn

den oumlvre menyn Hem-knappen finns nu i hamburgarmenyn paring vaumlnstra sidan me-

dan Blog-knappen finns i footer Detta goumlr att det ser mera organiserat ut

Figur 64 Gamla designen

Laringt oss foumlrflytta vidare till menyer foumlr kategorier Paring hemsidan har man tvaring alter-

nativ att naring kategorierna Foumlrsta aumlr den hamburgarmenyn knappen paring vaumlnstra si-

dan I menyn aumlr kategorierna indelade i fyra delar stolar lampor ergonomisk och

soffa amp middag Detta goumlr det laumltt och klart foumlr anvaumlndarna var produkterna finns

Eftersom vi bara har partiell uppmaumlrksamhet fraringn anvaumlndarna naumlr de aumlr paring sina

smarttelefoner har jag valt att saumltta in ikoner i menyn (Figur 65) Naumlr anvaumlndaren

bara anvaumlnder ena oumlgat foumlr att kolla paring mobilen och andra oumlgat foumlr naringgonting annat

ska den lilla skaumlrmen med webbplatsen kunna faringnga uppmaumlrksamheten samt un-

derlaumltta anvaumlndningen av webbplatsen (Wroblewski 2011)

41

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny

Andra menyn for kategorierna aumlr de fyra bilderna under Aeron chair slideshowen

Paring den tidigare designen ser man endast ett foumlnster av kategorierna som aumlr place-

rade i en kolumn som upprepas loggraumltt (Figur 66) Det haumlr goumlr att anvaumlndaren

maringste skrolla ner foumlr att se varenda kategori vilket kan orsaka obekvaumlmlighet Att

se flera kategorier paring samma skaumlrm sparar tid och anvaumlndaren kommer aumlven baumlttre

iharingg var sakerna finns Att ha bara rdquoenrdquo stor bild som syns paring skaumlrmen och vara

tvungen att skrolla ner foumlr att se naumlsta bild aumlr frustrerande Paring den nya designen

har jag tvaring rutor av kategorier bredvid varandra (Figur 66)

42

Figur 66 Kategorier paring den gamla designen (till vaumlnster) Kategorier paring den nya designen (till houmlger)

4 Ta det roliga ur shopping

Paring den nya designen straumlvar jag efter att erbjuda en bekvaumlm shopping-upplevelse

Naumlr anvaumlndarna besoumlker e-handeln med en smarttelefon foumlrvaumlntar hanhon sig

ocksaring att kunna ta del av allt inneharingll och goumlra jaumlmfoumlrelser med andra produkter

Jag har daumlrfoumlr i den nya designen pressat ihop laumlngden paring kolumnhoumljden som om-

ringar produkten Som resultat ser vi nu fyra produkter paring samma skaumlrm (Figur

67) I den tidigare designen ser vi en enda produkt paring en skaumlrm och foumlr att se

andra produkter maringste vi skrolla ner Paring det haumlr saumlttet har anvaumlndarna svaringrare att

jaumlmfoumlra produkterna (Laya 2014)

43

Figur 67 Tidigare produktsida (till vaumlnster) Ny produktsida (till houmlger)

I den tidigare designen ser vi ocksaring att det finns endast produktens bild produk-

tens namn koumlpvagnen och infoikonen Om man vill faring reda paring produktens inform-

ation maringste man klicka paring produktens bild eller paring infoikonen som foumlr oss direkt

till sjaumllva produktens sida Bara foumlr att man vill faring reda paring vad det aumlr foumlr produkt

foumlrs man vidare till en annan sida Det haumlr kan orsaka att kunden inte njuter totalt

av shoppingen och dessutom kan han inte jaumlmfoumlra produkterna naumlr han aumlr paring ka-

tegoriernas sida (Laya 2014)

Laringt oss hoppa vidare till den nya designen (Figur 68) Paring den nya designen har

jag satt in en kort detaljbeskrivning foumlr varje produkt Dessutom naumlr man klickar

paring infoikonen paring houmlgra sidan kommer man inte direkt till produktsidan utan det

kommer att dyka upp en inforuta som har en kort beskrivning paring produkten Om

anvaumlndaren aumlr intresserad av produkten kan han garing in till sjaumllva produktsida ge-

nom att klicka paring rdquoView productrdquo eller ocksaring paring produktbilden daumlr hanhon kan

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

38

6 ANALYS AV DEN NYA DESIGNEN

Med hjaumllp av den tidigare designen paring 909jp och de kritiska punkterna jag har hittat under

forskningen har jag skapat en ny och foumlrbaumlttrad design av webbplatsen foumlr mobiler I det

haumlr kapitlet kommer jag att visa naringgra exempel paring den tidigare designen och jaumlmfoumlra den

med nya designen samt analysera arbetet

Figur 61 Den gamla designen (till vaumlnster) Den nya designen (till houmlger)

1 Call-to-action knapparna

Under hela arbetsprocessen har jag haft i minnet att navigeringar laumlnkar och knap-

parna ska vara tillraumlckligt stora att klicka paring I den tidigare designen har de stora

bilder paring kategorier vilket jag tycker aumlr en bra design att aringtervaumlnda

39

2 Soumlkfunktionen

Paring den tidigare versionen haumlr nedan ser man att soumlkfunktionen inte finns med

medan paring den nya designen ser man soumlkfunktionen genast naumlr man kommer till

sidan Som tidigare framfoumlrdes att soumlkfunktionen alltid ska synas saring att man laumltt

skall kunna soumlka fram produkterna Om soumlkfunktionen inte finns med eller aumlr svaringr

att hitta naumlr den behoumlvs kan det orsaka missnoumlje hos anvaumlndarna (Mehra Gagan

2015)

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp

Figur 63 Soumlkfunktionen paring den nya designen 909jp

40

3 Laumltt att navigera

Naumlr skaumlrmen aumlr liten aumlr det viktig att ha en enkel layout (Wroblewski 2011)

Jag har daumlrfor i den nya designen flyttat rdquoHemrdquo och rdquoBlogrdquo knapparna bort fraringn

den oumlvre menyn Hem-knappen finns nu i hamburgarmenyn paring vaumlnstra sidan me-

dan Blog-knappen finns i footer Detta goumlr att det ser mera organiserat ut

Figur 64 Gamla designen

Laringt oss foumlrflytta vidare till menyer foumlr kategorier Paring hemsidan har man tvaring alter-

nativ att naring kategorierna Foumlrsta aumlr den hamburgarmenyn knappen paring vaumlnstra si-

dan I menyn aumlr kategorierna indelade i fyra delar stolar lampor ergonomisk och

soffa amp middag Detta goumlr det laumltt och klart foumlr anvaumlndarna var produkterna finns

Eftersom vi bara har partiell uppmaumlrksamhet fraringn anvaumlndarna naumlr de aumlr paring sina

smarttelefoner har jag valt att saumltta in ikoner i menyn (Figur 65) Naumlr anvaumlndaren

bara anvaumlnder ena oumlgat foumlr att kolla paring mobilen och andra oumlgat foumlr naringgonting annat

ska den lilla skaumlrmen med webbplatsen kunna faringnga uppmaumlrksamheten samt un-

derlaumltta anvaumlndningen av webbplatsen (Wroblewski 2011)

41

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny

Andra menyn for kategorierna aumlr de fyra bilderna under Aeron chair slideshowen

Paring den tidigare designen ser man endast ett foumlnster av kategorierna som aumlr place-

rade i en kolumn som upprepas loggraumltt (Figur 66) Det haumlr goumlr att anvaumlndaren

maringste skrolla ner foumlr att se varenda kategori vilket kan orsaka obekvaumlmlighet Att

se flera kategorier paring samma skaumlrm sparar tid och anvaumlndaren kommer aumlven baumlttre

iharingg var sakerna finns Att ha bara rdquoenrdquo stor bild som syns paring skaumlrmen och vara

tvungen att skrolla ner foumlr att se naumlsta bild aumlr frustrerande Paring den nya designen

har jag tvaring rutor av kategorier bredvid varandra (Figur 66)

42

Figur 66 Kategorier paring den gamla designen (till vaumlnster) Kategorier paring den nya designen (till houmlger)

4 Ta det roliga ur shopping

Paring den nya designen straumlvar jag efter att erbjuda en bekvaumlm shopping-upplevelse

Naumlr anvaumlndarna besoumlker e-handeln med en smarttelefon foumlrvaumlntar hanhon sig

ocksaring att kunna ta del av allt inneharingll och goumlra jaumlmfoumlrelser med andra produkter

Jag har daumlrfoumlr i den nya designen pressat ihop laumlngden paring kolumnhoumljden som om-

ringar produkten Som resultat ser vi nu fyra produkter paring samma skaumlrm (Figur

67) I den tidigare designen ser vi en enda produkt paring en skaumlrm och foumlr att se

andra produkter maringste vi skrolla ner Paring det haumlr saumlttet har anvaumlndarna svaringrare att

jaumlmfoumlra produkterna (Laya 2014)

43

Figur 67 Tidigare produktsida (till vaumlnster) Ny produktsida (till houmlger)

I den tidigare designen ser vi ocksaring att det finns endast produktens bild produk-

tens namn koumlpvagnen och infoikonen Om man vill faring reda paring produktens inform-

ation maringste man klicka paring produktens bild eller paring infoikonen som foumlr oss direkt

till sjaumllva produktens sida Bara foumlr att man vill faring reda paring vad det aumlr foumlr produkt

foumlrs man vidare till en annan sida Det haumlr kan orsaka att kunden inte njuter totalt

av shoppingen och dessutom kan han inte jaumlmfoumlra produkterna naumlr han aumlr paring ka-

tegoriernas sida (Laya 2014)

Laringt oss hoppa vidare till den nya designen (Figur 68) Paring den nya designen har

jag satt in en kort detaljbeskrivning foumlr varje produkt Dessutom naumlr man klickar

paring infoikonen paring houmlgra sidan kommer man inte direkt till produktsidan utan det

kommer att dyka upp en inforuta som har en kort beskrivning paring produkten Om

anvaumlndaren aumlr intresserad av produkten kan han garing in till sjaumllva produktsida ge-

nom att klicka paring rdquoView productrdquo eller ocksaring paring produktbilden daumlr hanhon kan

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

39

2 Soumlkfunktionen

Paring den tidigare versionen haumlr nedan ser man att soumlkfunktionen inte finns med

medan paring den nya designen ser man soumlkfunktionen genast naumlr man kommer till

sidan Som tidigare framfoumlrdes att soumlkfunktionen alltid ska synas saring att man laumltt

skall kunna soumlka fram produkterna Om soumlkfunktionen inte finns med eller aumlr svaringr

att hitta naumlr den behoumlvs kan det orsaka missnoumlje hos anvaumlndarna (Mehra Gagan

2015)

Figur 62 Soumlkfunktionen finns inte med paring den tidigare 909jp

Figur 63 Soumlkfunktionen paring den nya designen 909jp

40

3 Laumltt att navigera

Naumlr skaumlrmen aumlr liten aumlr det viktig att ha en enkel layout (Wroblewski 2011)

Jag har daumlrfor i den nya designen flyttat rdquoHemrdquo och rdquoBlogrdquo knapparna bort fraringn

den oumlvre menyn Hem-knappen finns nu i hamburgarmenyn paring vaumlnstra sidan me-

dan Blog-knappen finns i footer Detta goumlr att det ser mera organiserat ut

Figur 64 Gamla designen

Laringt oss foumlrflytta vidare till menyer foumlr kategorier Paring hemsidan har man tvaring alter-

nativ att naring kategorierna Foumlrsta aumlr den hamburgarmenyn knappen paring vaumlnstra si-

dan I menyn aumlr kategorierna indelade i fyra delar stolar lampor ergonomisk och

soffa amp middag Detta goumlr det laumltt och klart foumlr anvaumlndarna var produkterna finns

Eftersom vi bara har partiell uppmaumlrksamhet fraringn anvaumlndarna naumlr de aumlr paring sina

smarttelefoner har jag valt att saumltta in ikoner i menyn (Figur 65) Naumlr anvaumlndaren

bara anvaumlnder ena oumlgat foumlr att kolla paring mobilen och andra oumlgat foumlr naringgonting annat

ska den lilla skaumlrmen med webbplatsen kunna faringnga uppmaumlrksamheten samt un-

derlaumltta anvaumlndningen av webbplatsen (Wroblewski 2011)

41

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny

Andra menyn for kategorierna aumlr de fyra bilderna under Aeron chair slideshowen

Paring den tidigare designen ser man endast ett foumlnster av kategorierna som aumlr place-

rade i en kolumn som upprepas loggraumltt (Figur 66) Det haumlr goumlr att anvaumlndaren

maringste skrolla ner foumlr att se varenda kategori vilket kan orsaka obekvaumlmlighet Att

se flera kategorier paring samma skaumlrm sparar tid och anvaumlndaren kommer aumlven baumlttre

iharingg var sakerna finns Att ha bara rdquoenrdquo stor bild som syns paring skaumlrmen och vara

tvungen att skrolla ner foumlr att se naumlsta bild aumlr frustrerande Paring den nya designen

har jag tvaring rutor av kategorier bredvid varandra (Figur 66)

42

Figur 66 Kategorier paring den gamla designen (till vaumlnster) Kategorier paring den nya designen (till houmlger)

4 Ta det roliga ur shopping

Paring den nya designen straumlvar jag efter att erbjuda en bekvaumlm shopping-upplevelse

Naumlr anvaumlndarna besoumlker e-handeln med en smarttelefon foumlrvaumlntar hanhon sig

ocksaring att kunna ta del av allt inneharingll och goumlra jaumlmfoumlrelser med andra produkter

Jag har daumlrfoumlr i den nya designen pressat ihop laumlngden paring kolumnhoumljden som om-

ringar produkten Som resultat ser vi nu fyra produkter paring samma skaumlrm (Figur

67) I den tidigare designen ser vi en enda produkt paring en skaumlrm och foumlr att se

andra produkter maringste vi skrolla ner Paring det haumlr saumlttet har anvaumlndarna svaringrare att

jaumlmfoumlra produkterna (Laya 2014)

43

Figur 67 Tidigare produktsida (till vaumlnster) Ny produktsida (till houmlger)

I den tidigare designen ser vi ocksaring att det finns endast produktens bild produk-

tens namn koumlpvagnen och infoikonen Om man vill faring reda paring produktens inform-

ation maringste man klicka paring produktens bild eller paring infoikonen som foumlr oss direkt

till sjaumllva produktens sida Bara foumlr att man vill faring reda paring vad det aumlr foumlr produkt

foumlrs man vidare till en annan sida Det haumlr kan orsaka att kunden inte njuter totalt

av shoppingen och dessutom kan han inte jaumlmfoumlra produkterna naumlr han aumlr paring ka-

tegoriernas sida (Laya 2014)

Laringt oss hoppa vidare till den nya designen (Figur 68) Paring den nya designen har

jag satt in en kort detaljbeskrivning foumlr varje produkt Dessutom naumlr man klickar

paring infoikonen paring houmlgra sidan kommer man inte direkt till produktsidan utan det

kommer att dyka upp en inforuta som har en kort beskrivning paring produkten Om

anvaumlndaren aumlr intresserad av produkten kan han garing in till sjaumllva produktsida ge-

nom att klicka paring rdquoView productrdquo eller ocksaring paring produktbilden daumlr hanhon kan

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

40

3 Laumltt att navigera

Naumlr skaumlrmen aumlr liten aumlr det viktig att ha en enkel layout (Wroblewski 2011)

Jag har daumlrfor i den nya designen flyttat rdquoHemrdquo och rdquoBlogrdquo knapparna bort fraringn

den oumlvre menyn Hem-knappen finns nu i hamburgarmenyn paring vaumlnstra sidan me-

dan Blog-knappen finns i footer Detta goumlr att det ser mera organiserat ut

Figur 64 Gamla designen

Laringt oss foumlrflytta vidare till menyer foumlr kategorier Paring hemsidan har man tvaring alter-

nativ att naring kategorierna Foumlrsta aumlr den hamburgarmenyn knappen paring vaumlnstra si-

dan I menyn aumlr kategorierna indelade i fyra delar stolar lampor ergonomisk och

soffa amp middag Detta goumlr det laumltt och klart foumlr anvaumlndarna var produkterna finns

Eftersom vi bara har partiell uppmaumlrksamhet fraringn anvaumlndarna naumlr de aumlr paring sina

smarttelefoner har jag valt att saumltta in ikoner i menyn (Figur 65) Naumlr anvaumlndaren

bara anvaumlnder ena oumlgat foumlr att kolla paring mobilen och andra oumlgat foumlr naringgonting annat

ska den lilla skaumlrmen med webbplatsen kunna faringnga uppmaumlrksamheten samt un-

derlaumltta anvaumlndningen av webbplatsen (Wroblewski 2011)

41

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny

Andra menyn for kategorierna aumlr de fyra bilderna under Aeron chair slideshowen

Paring den tidigare designen ser man endast ett foumlnster av kategorierna som aumlr place-

rade i en kolumn som upprepas loggraumltt (Figur 66) Det haumlr goumlr att anvaumlndaren

maringste skrolla ner foumlr att se varenda kategori vilket kan orsaka obekvaumlmlighet Att

se flera kategorier paring samma skaumlrm sparar tid och anvaumlndaren kommer aumlven baumlttre

iharingg var sakerna finns Att ha bara rdquoenrdquo stor bild som syns paring skaumlrmen och vara

tvungen att skrolla ner foumlr att se naumlsta bild aumlr frustrerande Paring den nya designen

har jag tvaring rutor av kategorier bredvid varandra (Figur 66)

42

Figur 66 Kategorier paring den gamla designen (till vaumlnster) Kategorier paring den nya designen (till houmlger)

4 Ta det roliga ur shopping

Paring den nya designen straumlvar jag efter att erbjuda en bekvaumlm shopping-upplevelse

Naumlr anvaumlndarna besoumlker e-handeln med en smarttelefon foumlrvaumlntar hanhon sig

ocksaring att kunna ta del av allt inneharingll och goumlra jaumlmfoumlrelser med andra produkter

Jag har daumlrfoumlr i den nya designen pressat ihop laumlngden paring kolumnhoumljden som om-

ringar produkten Som resultat ser vi nu fyra produkter paring samma skaumlrm (Figur

67) I den tidigare designen ser vi en enda produkt paring en skaumlrm och foumlr att se

andra produkter maringste vi skrolla ner Paring det haumlr saumlttet har anvaumlndarna svaringrare att

jaumlmfoumlra produkterna (Laya 2014)

43

Figur 67 Tidigare produktsida (till vaumlnster) Ny produktsida (till houmlger)

I den tidigare designen ser vi ocksaring att det finns endast produktens bild produk-

tens namn koumlpvagnen och infoikonen Om man vill faring reda paring produktens inform-

ation maringste man klicka paring produktens bild eller paring infoikonen som foumlr oss direkt

till sjaumllva produktens sida Bara foumlr att man vill faring reda paring vad det aumlr foumlr produkt

foumlrs man vidare till en annan sida Det haumlr kan orsaka att kunden inte njuter totalt

av shoppingen och dessutom kan han inte jaumlmfoumlra produkterna naumlr han aumlr paring ka-

tegoriernas sida (Laya 2014)

Laringt oss hoppa vidare till den nya designen (Figur 68) Paring den nya designen har

jag satt in en kort detaljbeskrivning foumlr varje produkt Dessutom naumlr man klickar

paring infoikonen paring houmlgra sidan kommer man inte direkt till produktsidan utan det

kommer att dyka upp en inforuta som har en kort beskrivning paring produkten Om

anvaumlndaren aumlr intresserad av produkten kan han garing in till sjaumllva produktsida ge-

nom att klicka paring rdquoView productrdquo eller ocksaring paring produktbilden daumlr hanhon kan

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

41

Figur 65 Den nya designen paring hemsidan paring 909jp Hamburger meny

Andra menyn for kategorierna aumlr de fyra bilderna under Aeron chair slideshowen

Paring den tidigare designen ser man endast ett foumlnster av kategorierna som aumlr place-

rade i en kolumn som upprepas loggraumltt (Figur 66) Det haumlr goumlr att anvaumlndaren

maringste skrolla ner foumlr att se varenda kategori vilket kan orsaka obekvaumlmlighet Att

se flera kategorier paring samma skaumlrm sparar tid och anvaumlndaren kommer aumlven baumlttre

iharingg var sakerna finns Att ha bara rdquoenrdquo stor bild som syns paring skaumlrmen och vara

tvungen att skrolla ner foumlr att se naumlsta bild aumlr frustrerande Paring den nya designen

har jag tvaring rutor av kategorier bredvid varandra (Figur 66)

42

Figur 66 Kategorier paring den gamla designen (till vaumlnster) Kategorier paring den nya designen (till houmlger)

4 Ta det roliga ur shopping

Paring den nya designen straumlvar jag efter att erbjuda en bekvaumlm shopping-upplevelse

Naumlr anvaumlndarna besoumlker e-handeln med en smarttelefon foumlrvaumlntar hanhon sig

ocksaring att kunna ta del av allt inneharingll och goumlra jaumlmfoumlrelser med andra produkter

Jag har daumlrfoumlr i den nya designen pressat ihop laumlngden paring kolumnhoumljden som om-

ringar produkten Som resultat ser vi nu fyra produkter paring samma skaumlrm (Figur

67) I den tidigare designen ser vi en enda produkt paring en skaumlrm och foumlr att se

andra produkter maringste vi skrolla ner Paring det haumlr saumlttet har anvaumlndarna svaringrare att

jaumlmfoumlra produkterna (Laya 2014)

43

Figur 67 Tidigare produktsida (till vaumlnster) Ny produktsida (till houmlger)

I den tidigare designen ser vi ocksaring att det finns endast produktens bild produk-

tens namn koumlpvagnen och infoikonen Om man vill faring reda paring produktens inform-

ation maringste man klicka paring produktens bild eller paring infoikonen som foumlr oss direkt

till sjaumllva produktens sida Bara foumlr att man vill faring reda paring vad det aumlr foumlr produkt

foumlrs man vidare till en annan sida Det haumlr kan orsaka att kunden inte njuter totalt

av shoppingen och dessutom kan han inte jaumlmfoumlra produkterna naumlr han aumlr paring ka-

tegoriernas sida (Laya 2014)

Laringt oss hoppa vidare till den nya designen (Figur 68) Paring den nya designen har

jag satt in en kort detaljbeskrivning foumlr varje produkt Dessutom naumlr man klickar

paring infoikonen paring houmlgra sidan kommer man inte direkt till produktsidan utan det

kommer att dyka upp en inforuta som har en kort beskrivning paring produkten Om

anvaumlndaren aumlr intresserad av produkten kan han garing in till sjaumllva produktsida ge-

nom att klicka paring rdquoView productrdquo eller ocksaring paring produktbilden daumlr hanhon kan

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

42

Figur 66 Kategorier paring den gamla designen (till vaumlnster) Kategorier paring den nya designen (till houmlger)

4 Ta det roliga ur shopping

Paring den nya designen straumlvar jag efter att erbjuda en bekvaumlm shopping-upplevelse

Naumlr anvaumlndarna besoumlker e-handeln med en smarttelefon foumlrvaumlntar hanhon sig

ocksaring att kunna ta del av allt inneharingll och goumlra jaumlmfoumlrelser med andra produkter

Jag har daumlrfoumlr i den nya designen pressat ihop laumlngden paring kolumnhoumljden som om-

ringar produkten Som resultat ser vi nu fyra produkter paring samma skaumlrm (Figur

67) I den tidigare designen ser vi en enda produkt paring en skaumlrm och foumlr att se

andra produkter maringste vi skrolla ner Paring det haumlr saumlttet har anvaumlndarna svaringrare att

jaumlmfoumlra produkterna (Laya 2014)

43

Figur 67 Tidigare produktsida (till vaumlnster) Ny produktsida (till houmlger)

I den tidigare designen ser vi ocksaring att det finns endast produktens bild produk-

tens namn koumlpvagnen och infoikonen Om man vill faring reda paring produktens inform-

ation maringste man klicka paring produktens bild eller paring infoikonen som foumlr oss direkt

till sjaumllva produktens sida Bara foumlr att man vill faring reda paring vad det aumlr foumlr produkt

foumlrs man vidare till en annan sida Det haumlr kan orsaka att kunden inte njuter totalt

av shoppingen och dessutom kan han inte jaumlmfoumlra produkterna naumlr han aumlr paring ka-

tegoriernas sida (Laya 2014)

Laringt oss hoppa vidare till den nya designen (Figur 68) Paring den nya designen har

jag satt in en kort detaljbeskrivning foumlr varje produkt Dessutom naumlr man klickar

paring infoikonen paring houmlgra sidan kommer man inte direkt till produktsidan utan det

kommer att dyka upp en inforuta som har en kort beskrivning paring produkten Om

anvaumlndaren aumlr intresserad av produkten kan han garing in till sjaumllva produktsida ge-

nom att klicka paring rdquoView productrdquo eller ocksaring paring produktbilden daumlr hanhon kan

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

43

Figur 67 Tidigare produktsida (till vaumlnster) Ny produktsida (till houmlger)

I den tidigare designen ser vi ocksaring att det finns endast produktens bild produk-

tens namn koumlpvagnen och infoikonen Om man vill faring reda paring produktens inform-

ation maringste man klicka paring produktens bild eller paring infoikonen som foumlr oss direkt

till sjaumllva produktens sida Bara foumlr att man vill faring reda paring vad det aumlr foumlr produkt

foumlrs man vidare till en annan sida Det haumlr kan orsaka att kunden inte njuter totalt

av shoppingen och dessutom kan han inte jaumlmfoumlra produkterna naumlr han aumlr paring ka-

tegoriernas sida (Laya 2014)

Laringt oss hoppa vidare till den nya designen (Figur 68) Paring den nya designen har

jag satt in en kort detaljbeskrivning foumlr varje produkt Dessutom naumlr man klickar

paring infoikonen paring houmlgra sidan kommer man inte direkt till produktsidan utan det

kommer att dyka upp en inforuta som har en kort beskrivning paring produkten Om

anvaumlndaren aumlr intresserad av produkten kan han garing in till sjaumllva produktsida ge-

nom att klicka paring rdquoView productrdquo eller ocksaring paring produktbilden daumlr hanhon kan

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

44

laumlsa om produktbeskrivningarna som aumlr tillgaumlngliga Om hanhon inte aumlr desto mer

intresserad kan hanhon trycka bort rutan och fortsaumltta shoppa

Figur 68 Inforutan som dyker upp

Paring produkt sidan (Figur 69) aumlr rubrikerna indelade i olika tabbar foumlr att specificera

varje inneharingll Vi ser rdquoDescriptionrdquo tab och rdquoFeatured amp detailsrdquo tab Paring hogra

sidan ser vi en pil som pekar neraringt Genom att trycka paring pilen kommer vi att faring

tillgaringng till de resterande texterna Det haumlr goumlr att designen ser enkel ut (Wro-

blewski 2011)

Dessutom har jag satt till rdquoAdd to Wish listrdquo Som betyder att man kan spara pro-

dukterna i sin oumlnskelista Naumlr man naumlsta garingng loggar in saring har man kvar sina fa-

voritprodukter man sparat tidigare I den tidigare webbplatsen finns inte rdquoWish

listrdquo oumlverhuvudtaget Genom att erbjuda anvaumlndarna ett staumllle daumlr de kan spara

sina favoritprodukter kommer de att uppleva en trevligare shoppingupplevelse

Wishlist tillaringter ocksaring anvaumlndarna att skicka ett mail till vaumlnner eller slaumlktingar

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

45

med produktinformation och koumlp alternativ Paring det haumlr saumlttet kommer butiken

ocksaring att oumlka paring foumlrsaumlljning (Goswami 2010)

Figur 69 Produktsida av tabbar

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

46

5 Laringngsam uppladdningstid

Naumlr man har valt en kategori tex stolar kommer man till en rdquoProduktrdquo sida Paring

den gamla versionen av webbplatsen aumlr houmljden paring laringdan foumlr produkterna houmlga

vilket orsakar att det tar mera utrymmet Naumlr houmljden paring laringdan tar mera utrymmet

paring sidan betyder det att sidan ocksaring aumlr laumlngre och det blir laringngsammare att ladda

upp

Det aumlr viktigt att haringlla sidstorleken saring liten som moumljligt saring att det blir snabbt att

ladda upp sidan Taumlnk oss att man skrollar foumlrbi 5 bilder och saring maringste man vaumlnta

tills sidan laddar till naumlsta bild Det aumlr inte positivt foumlr anvaumlndarna (Mehra 2015)

Foumlr att det ska vara snabbare att ladda upp hela sidan har jag ocksaring valt att visa

endast 12 produkter Naumlr man vill se mera produkter trycker man paring ldquoView morerdquo

(Figur 610) (Mobil e-handel 2012)

Figur 610 View more

Om vi garingr tillbaka till ldquolaumltt att navigerardquo har jag i den nya designen skapat en rdquoshow

allrdquo dropdown-meny Naumlr man trycker paring dropdown meny kan man vaumllja hurdana

stolar man aumlr ute efter Detta goumlr att anvaumlndarna snabbare hittar produkten de aumlr ute

efter

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

47

Figur 611 Stol kategori Show all

Dessa aumlr de kritiska punkterna jag tycker att aumlr viktigt att ta upp Med hjaumllp av punkterna

har jag granskat den nya designen foumlr sidan 909jp

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

48

7 SAMMANFATTNING

Idag oumlkar e-handeln allt mer i vaumlrlden Genom att handla saker och ting behoumlver man inte

alltid mera bege sig fysiskt till butiker Allt som man behoumlver aumlr en dator surfplatta

smarttelefon eller hurdan apparat som helst bara man har tillgaringng till internet Foumlrr hand-

lade man endast paring stationaumlra datorer men idag oumlkar antalet mobil e-handel ocksaring rejaumllt

I mitt examensarbete har jag anvaumlnt fallstudie som forskningsmetod Under processen

forskade jag inom mobil e-handel Responsiv design och Mobile first Fallstudien garingr ut

paring att som resultat utveckla den mobila 909jp webbplatsen foumlr min forskning Problemet

med den nuvarande mobila webbplatsen aumlr att den inte har naringtt det baumlsta resultatet och

kunde saringledes aumlnnu utvecklas

Min forskningsfraringga var rdquoHur kan man baumlst utveckla en e-handel webbplats foumlr mobi-

lerrdquo Jag har nu kommit fram till att det baumlsta saumlttet att utveckla en e-handel webbplats

saringsom 909jp aumlr Responsiv design med Mobile First metoden Med Responsiv design be-

houmlver man endast ha en sida som optimerar till alla skaumlrmstorlekar Med Mobile first

metoden underlaumlttar man arbetet Man blir tvungen att taumlnka noggrant paring vad som absolut

maringste prioriteras Med dessa metoder har jag gjort undersoumlkningar och forskningar och

hitta det som aumlr kritiskt inom e-handel foumlr mobiler och aringstadkommit loumlsningar foumlr en foumlr-

baumlttring av e-handel webbplatser foumlr mobiler

De kritiska punkter jag har hittat aumlr foumlljande

Call-to-action knapparna

Soumlkfunktionen

Laumltt att navigera

Ta det roliga ur shopping

Laringngsam uppladdningstid

Misslyckad analysering

Mindre inneharingll foumlr mobilanvaumlndarnarna

Jag tycker att det har varit mycket intressant att forska inom e-handel foumlr mobiler Under

arbetets garingng har jag laumlrt mig vad en elektronisk butik innebaumlr och hur man bygger upp

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

49

en saringdan webbplats paring baumlsta saumltt Tack vare min forskning i examensarbetet har jag nu

faumlrdigheter att i framtiden utveckla en riktig e-handel webbplats foumlr alla skaumlrmstorlekar

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

BOumlCKER

Marcotte Ethan 2011 Responsiv web design A book apart 143s

Wroblewski Luke 2011 Mobile First A book apart 123s

McGrane Karen 2012 Content strategy for Mobile A book apart 157s

ELEKTRONISKA KAumlLLOR

Media queries TIllgaumlnligt

httpenwikipediaorgwikiMedia_queries

Haumlmtad 142015

E-handel Tillgaumlnligt

httpsvwikipediaorgwikiE-handel

Haumlmtad 142015

Mobil e-handel 2012 TIllgaumlngligt

httpwwwe-butiksepaket-prisermobil-e-handel

Haumlmtad 142015

Thoren Arina 2012 Mobile First- En viktig del i filosofin kring Responsiv web design

Tillgaumlngligt

httpwwwarinasep=2633

Haumlmtad 242015

2014 Responsiv Design

Tillgaumlngligt

httpwwwbizquecome-butikresponsiv-design

Haumlmtad 242015

Larsson Daneil 2014 DIB rapport om e-handel 2014 Tillgaumlngligt

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

httpwwwdibspaymentcomsi-

tescorpfilesfilesSEDIBS_NEH_SE_2014_lowpdf__utma=118148551801427733

116142773311614277331161amp__utmb=1491427733259080amp__utmc=1amp__utmx=

amp__utmz=1142773311611utmcsr=google|utmccn=(organic)|utmcmd=organic|ut-

mctr=(not20provided)amp__utmv=-amp__utmk=2102576

Haumlmtad 542015

Swan Phil 2014 Maintaiable Responsiv layout Tillgaumlnligt

httperskinedesigncomblogmaintainable-Responsiv-layouts

Haumlmtad 2552015

Mobile phone internet user penetration worldwide 2012-2017 Tillgaumlngligt

httpwwwstatistacomstatistics284202mobile-phone-internet-user-penetration-

worldwide

Haumlmtad 2032014

Belinger 2014 Vad aumlr soumlkmotoroptimering (SEO) Tillgaumlngligt

httpbelingersevad-ar-sokmotoroptimering-seo

Haumlmtad 2032014

Ruska Lubo 2013 Responsiv design vs Adaptive design Tillgaumlngligt

wwwweb-integrationinfoenblogResponsiv-vs-adaptive-design

Haumlmtad 1242015

Mehra Gagan 2015 Common Responsiv Design Mistakes Tillgaumlngligt

httpwwwpracticalecommercecomarticles80056-8-Common-Responsiv-Design-

Mistakes

Haumlmtad 1142015

Lindahl Leander 2014 Vad aumlr foumlrdelen med Responsiv design Tillgaumlnligt

httpwwwpopoloseartiklarvad-ar-fordelen-med-Responsiv-design

Haumlmtad 1732015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015

Responsiv design device resolution reference Tillgaumlngligt

httpspirelightmediacomresourcesResponsiv-design-device-resolution-reference

Adjeet Khurana e-commerce i Japan Tillgaumlngligt

httpecommerceaboutcomodeCommerce-Trends-and-IssuesaThe-Japanese-Ecom-

merce-Markethtm

Haumlmtad 1732015

Goswami Subhajit 2010 Ecommerce Wishlists Tillgaumlnligt

httpinsynccoinhow-important-are-wishlists-on-e-commerce-websites

Haumlmtad 1642015