Upload
phungngoc
View
214
Download
0
Embed Size (px)
Citation preview
2
Contents
1. Introduction............................................................................................................................................3
2. Scoring model structure and methodology....................................................................5
3. Results......................................................................................................................................................10
3.1.Results.overview..............................................................................................................................10
3.2.Homepage...........................................................................................................................................11
3.3.Product.detail.page........................................................................................................................13
3.4.Shopping.basket..............................................................................................................................15
3.5.Checkout..............................................................................................................................................18
3.6.Overall.results...................................................................................................................................21
4. Recommended action...................................................................................................................22
5. Conclusions..........................................................................................................................................23
References...................................................................................................................................................24
3
From e-commerce to m-commerce
No.other. technology.has.had. as.much. influence.on. e-commerce. in. recent.times. as. tablet. devices.. When. Apple. launched. the. iPad,. it. introduced. the.idea.of.shopping-on-the-go.to.the.masses..Trends.increasingly.show.that.as.well.as.con.ventional.desktop.PCs.consumers.are.now.taking.advantage.of.the.increasingly.flexible.buying.options.that.tablets.offer.
Research.from.the.IMRG1.found.that.tablet.devices.now.account.for.85%.of.mobile.sales.year-to-date..Tablet.visitors.to.e-commerce.sites.also.spend.20%.more.than.desktop.shoppers,.and.twice.as.much.as.those.using.smartphones2..Tablets.have.also.been.found.to.generate.higher.conversion.rates.and.larger.shopping.baskets.
With.so.much.focus.now.on.tablet.commerce,.QUISMA.decided.to.investi-gate.the.customer.experience.on.tablet.devices..We.took.a.sample.of.the.lead-ing.fashion.retailers.in.the.UK.and.looked.at.how.tablet-friendly.their.sites.are,.and.rated.them.according.to.our.effectiveness.scoring.model.
The.online.retailers.selected.were:
1. IntroduCtIon
Company urL tablet-optimised site?
Nike http://www.nike.com/gb/en_gb/ Yes
H&M http://www.hm.com/gb/ Yes
Zara http://www.zara.com/uk/ No
Ralph.Lauren http://www.ralphlauren.co.uk No
adidas http://www.adidas.co.uk/shop No
Hugo.Boss http://store-uk.hugoboss.com/ No
ASOS http://www.asos.com/ No
Topshop http://www.topshop.com/ No
Lacoste http://shop-uk.lacoste.com/ No
New.Look http://www.newlook.com/ No1.URL:.see.references.page.24
2.URL:.see.references.page.24
4
Websites.that.can.be.displayed.on.a.tablet.can.be.divided.into.three.categories:.standard,.tablet.and.responsive..Standard.websites.are.not.tablet-optimised.in.appearance.and.appear.the.same.as.on.a.desktop.PC..A.tablet.site.is.created.especially. for. tablets,. and. only. appears. when. a. user. accesses. the. site. from.this.type.of.device..Responsive.websites.on.the.other.hand.adjust.themselves.automatically.to.suit.the.device.involved,.whether.it’s.a.desktop,.smartphone.or.tablet..The.study.found.that.while.Nike.and.H&M.use.tablet-optimised.websites,.all.other.brands.in.the.study.use.the.same.front.end.for.both.desktop.and.tablet,.which.could.mean.either.standard.or.responsive.
The. retailers. were. chosen. after. analysing. brand. research. studies,. including.the.Brandz.Top.100.Most.Valuable.Global.Brands.2012.by.WPP3,.and.the.IMRG’s.“Hitwise.Hot.Shops.List“4.
IMRG.produced. its. ranking.“Hitwise.Hot.Shops.List“4.of. the.best.online.traders.in.Great.Britain.in.February.2013..The.indicators.used.here.included.visitor.numbers.and.conversions..The.shops.named.were.in.second.to.fourth.place.in.apparel.and.accessories.
Digital. IQ. 2012. also. published. its. assessment. of. how. digitally. competent.fashion.retailers.are.
BrandZ top 100 Most Valuable Global Brands 2012
NikeRanking:.1
H&MRanking:2
ZaraRanking:.3
Ralph LaurenRanking:.4
adidasRanking:.5
Hugo BossRanking:.7
IMrG Hitwise Hot shops List February 2013
ASOS Ranking.10New Look....Ranking.18Topshop.......Ranking.21
Fashion Brands ranked by digital IQ 2012
Lacoste Ranking.8
3.WPP.Brandz.Top.100.Most.Valuable.Global.Brands.2012
4.URL:.see.References.Page.24
5
Despite.growing.competition.between.tablet.providers,.Apple.still.holds.the.majority.share2..In.the.first.quarter.of.2013.Apple.reported.having.a.39.6%.share.of.the.tablet.market...In.the.interest.of.standardisation,.this.study.there-fore.specifically.focused.on.the.iPad.for.testing.the.retailers’.tablet.websites.
To.determine.the.success.of.each.retailer’s.tablet.site.as.a.whole,.four.perform-ance.aspects.were.examined.and.each.weighted.differently:..
• Homepage.(40%)• Product.detail.page.(30%).• Shopping.basket.(15%)• Checkout.(15%)
These.four.areas.are.the.foundations.of.any.retail.website.and.form.the.basis.of.QUISMA’s.testing.model.which.we.use.to.test.and.audit.website.perform-ance.
The homepage.is.weighted.the.highest.in.the.scoring.model.as.it.is.where.the.majority.of.visi.tors.arrive.at.the.website,.so.first. impressions.are.important..Ideally,.the.homepage.should.inspire.visitors.and.motivate.them.to.buy..What.is.essential.here.is.that.it.should.make.getting.around.the.rest.of.the.site.easy,.while.at.the.same.time.creating.confidence.in.the.brand.and.what.it.can.de-liver..This.can.be.done.by.making.navigation.simple.and.by.including.quality.seals,.for.example,.which.can.also.help.reduce.the.drop-out.rate.at.this.point..Quality. seals. are. ele.ments.which.are. included.on. sites. to. show.a.purchase.has.been.verified.by.providers.such.as.Trusted.Shops.or.COMODO.secured.against.a.number.of.different.criteria,. like.solvency,.price.transparency,.cus-tomer.service.and.data.protection,.then.certified.accordingly.
Most.visitors. reach. the.product detail page.via. search.engines,.by.clicking.on.either.a.paid.or.natural.search.listing..Large.enticing.product.images.and.a.detailed.description.is.absolutely.vital.here...The.cost.and.any.other.relevant.details.(such.as.delivery.options).should.also.be.clearly.shown..The.call-to-action.button.should.be.in.an.eye-catching.and.visible.area.to.encourage.visi-tors.to.buy.
Once.a.visitor.makes.it.to.the.basket.and.checkout.areas.of.a.website.the.in-tention.to.purchase.is.strong...Despite.this,.the.drop-off.rate.is.surprisingly.high.for.these.pages..It.is.important.therefore.to.test.and.optimise.these.pages.to.make.sure.that.these.final.elements.of.the.site.are.adapted.to.the.customers’.needs.and.requirements.
2. sCorInG ModeL struCture and MetHod
*5International.Data.Corpora-tion.IDC.Worldwide.Tablet.Tracker
6
.
.
.
.
.It.has.been.found.that.visitors.want.to.see.precisely.what.they’ve.got.in.their.baskets:.so.it’s.of.paramount.importance.to.display.all.the.information.about.the.product,.the.total.costs.and.payment.options..The.checkout.process.should.be.fast.and.customer.friendly.
This. is.where.process.bars. in.particular.prove. to.be.extremely.helpful,.as. it.guides.customers.and.shows.them.what.stage.of.the.purchasing.process.they.are.in..In.both.the.basket.and.checkout.areas,.what.really.matters.is.conveying.security.and.confidence.to.the.customer..This.can.be.done.using.such.things.as.contact.details,.usability.help.and.quality.seals..
The.performance.of.each.website.was.rated.based.on.four.elements:
• Structure: how.a.site.is.fundamentally.structured.and.whether.custo-mers.can.find.their.way.around.easily..The.criteria.includes.whether.ge-neral.information.is.on.hand,.like.corporate.info,.terms.and.conditions,.data.protection.notification.and.search.functionality..
• Display: how.a.site.is.presented.visually,.particularly.images.and.text.quality.
• Usability: how.user-friendly.a.site.is..Can.customers.find.their.way.around.the.site.easily,.or.are.there.certain.restrictions.which.make.it.har-der.to.use,.such.as.long.load.times.and.poorly.sized.buttons.that.make.it.difficult.for.customers.to.use.them..
• Specific Content:.is.content.which.is.characteristic.of.a.given.page..We.will.delve.into.this.in.more.detail.below.
7
Performance area Input factors Key
Start.homepage(40%)
•.Structure.(30%)•.Display.(30%)•.Usability.(30%)•.Specific.Content.(10%)
•.Structure,.display.and.usability.are...equally.important•.What.is.the.aim?
•.Arouse.awareness.and.needs•.Create.competence.and.trust•.Inspire.users•.Encourage.them.to.buy
Product.detail.page(30%)
•.Structure.(30%)•.Display.(30%)•.Usability.(20%)•.Specific.content.(20%)
•.Structure.and.display.are.the.main....criteria.here•.What.is.the.aim?
•.Present.products.well•.Present.information.clearly•.Encourage.customers.to.buy
Shopping.basket(15%)
•.Structure.(25%)•.Display.(25%)•.Usability.(25%)•.Specific.content.(25%)
•.All.criteria.equally.important•.What.is.the.aim?
•.Give.the.customer.a.complete....overview•.Create.security.and.trust•.Provide.help.(e.g..hotline.or....e-mail.support)•.Stimulate,.encourage.people...to.buy
Checkout(15%)
•.Structure.(20%)•.Display.(25%)•.Usability.(30%)•.Specific.content.(25%)
•.Usability.is.the.main.criterion.at....this.stage.of.the.process•.What.is.the.aim?
•.User.should.complete.purchase•.Fast,.user-friendly.process•.Provide.help.(e.g..hotline.or...e-mail.support)•.Create.security.and.trust
Fig, 1: scoring model: category weightings and key
8
Homepage
On.the.homepage,.what.matters.above.all.else. is. structure,.display.and.us-ability..
Important.to.a.homepage’s.structure.are.“trust.elements”.such.as.the.search.function.at.the.top.of.the.website,.which.ordinarily.comes.as.standard.nowa-days.
In.terms.of.display,.good.text.and.image.resolution.are.what.really.matter.on.a.homepage..And.don’t.forget.usability.either:.sites.should.make.the.best.use.of.the.tactile.functionality.of.the.iPad,.taking.advantage.of.actions.like.scrolling.and.pinching.
Specific.content.refers.to.any.content.which.is.site-specific..This.can.in.clude.ad.campaigns.to.boost.sales.of.seasonal.products,.for.example.
Product detail page:
Structure.and.display.are.the.main.criteria.for.assessment.on.the.prod.uct.de-tail.page..With.both. these. factors,. the. same.elements. and. functions. are. as.important.as.for.the.homepage..A.good.zoom.function.is.also.vital.to.allow.customers.to.view.a.product.up.close.and.in.more.detail.
Usability.and.specific.content.also.have.a.major.influence.on.customer.experi-ence. for. the. iPad..The. usability. of. a. site. is. determined. by. how. customer-friendly.it.is:.there.must.not.be.any.hurdles,.such.as.restrictions.on.putting.products. in. the. shopping.basket..Page-specific. content. should.also. include.product.ratings.to.encourage.the.customer.to.buy..
shopping basket:
With.the.shopping.basket,.all.criteria.are.equally.important..In.terms.of.struc-ture,.the.same.applies.as.is.mentioned.above..For.display,.what.is.particularly.important.is.that.the.call.to.action.button.always.remains.in.sight.within.the.shopping.basket,.no.matter.how.many.items.there.are.in.the.basket.
To.ensure.good.usability,. customers. should.be. able. to. remove. any.product.from.the.shopping.basket.with.just.one.click.and.change.the.number.of.items.without.needing.to. leave. the.page.. It. is.essential. that.all. total.costs. should.be.clearly.shown.e.g..‘including.delivery.costs’,.together.with.secure.payment.instructions.
9
Checkout:
The.main.criteria.in.the.checkout process.is.usability...For.example,.the.key.settings. for. the. iPad. should. be. adjusted. automatically. when. entering. data.in.form.fields.so.that.visitors.get.where.they.want.to.be.and.buy.products.as.quickly.and.easily.as.possible..Customers.should.also.be.able.to.navigate.back.and.forth.during.the.proc-ess.without.the.risk.of.losing.data.that.they’ve.already.typed.in..Every.minor.hurdle.throughout.the.checkout.process.that.makes.it.harder.for.the.customer.to.buy.risks.pushing.them.to.abort.the.process.entirely.
Display. and. specific content. are. equally. important. to. the. checkout.proc-ess.. For. display,. the. same. points. generally. apply. as. before,. with. ad.ditional.emphasis.on.text.and.image.resolution..There.are.two.particularly.important.factors.to.specific.content:.the.reference.to.SSL,.encryption.and.the.ability.to.pay.with.tried.and.tested.payment.service.providers.like.PayPal.or.by.invoice.
Within.all.areas.of.the.site.–.and.for.each.sub-category.-.there.are.criteria.for.meas.uring.the.quality.of.each.website.to.which.QUISMA’s.survey.respond-ents.could.answer.either.yes.or.no..This.generated.a.weighted.average.for.each.retailer’s.website,.made.up.from.the.individual.performance.aspects.and.input.factors..In.total,.120 crite ria.were.reviewed.across.10.retail.websites.to.give.a.percentage.effectiveness.score.out.of.100%.
The.study.eliminates.external.influences.and.reports.on.a.consistent,.compa-rable.evaluation.
10
3.1 results in outline
The.QUISMA.study.found.that.overall,.the.retail.sites.we.studied.have.good.quality.tablet.solutions..Topshop.comes.out.on.top.overall.in.the.final.results,.scoring.86.89%,.followed.by.adidas.(86.84%).and.Nike.(86.36%)..Back.in.midfield.are.New.Look.(84.99%),.Lacoste.(84.55%),.Hugo.Boss(82.79%).and.ASOS.(82.33%),.with.Ralph.Lauren.(72.58%),.Zara.(69.00%).and.H&M.(66.60%).bringing.up.the.rear.
3. sCorInG ModeL resuLts
Fig, 2: study findings
Source:.QUISMA.study.findings.(as.at.September.2013)
online-shop start page
Prod. de-tail page
shopping basket Checkout end result
Topshop 90.63% 84.62% 80.95% 87.40% 86.89%
adidas 90.00% 86.84% 90.48% 74.80% 86.84%
Nike 84.38% 88.61% 86.36% 87.12% 86.36%
New.Look 89.06% 80.82% 86.36% 81.06% 84.99%
Lacoste 85.07% 83.56% 86.36% 83.33% 84.55%
Hugo.Boss 77.41% 84.81% 85.71% 90.91% 82.79%
ASOS 82.09% 79.75% 90.91%% 79.55% 82.33%
Ralph.Lauren 71.88% 61.64% 86.36% 82.58% 72.58%
Zara 68.57% 70.00% 66.67% 70.45% 69.00%
H&M 68.66% 65.79% 61.90% 67.42% 66.60%
0%
40%
60%
20%
100%
80%
topshopadidas
nike Lacoste asos ZaraHugo Boss ralph Lauren H&M
86.84%
86.89%
86.36%
84.99%
84.55%
82.79%
82.33%
72.58%
69.00%
66.60%
new Look
11
3.2 Homepage results
First.impressions.count.as.visitors.tend.to.only.spend.a.matter.of.seconds.on.a.retailer’s.homepage,.so.optimising.this.part.of.the.site.is.particularly.impor-tant..The.study.shows.that.the.retailers.tested.already.have.a.good.homepage;.but.all.still.have.room.for.improvement..Two online shops scored 90% or more for their homepage...These.were.Top-shop.(90.63%).and.adidas.(90.00%)..
Eight out of ten retailers scored less than 90%: Zara.(68.57%).and.H&M.(68.66%). scored. lowest;. but. Lacoste. (85.07%),. Nike. (84.38%),. ASOS.(82.09%),.Hugo.Boss.(77.14%).and.Ralph.Lauren.(71.88%).also.only.scored.average..New.Look,.on.the.other.hand,.was.just.below.the.90%.mark,.with.89.06%.
Topshop.came.out.top:.their.homepage.ticks.all.the.boxes.as.far.as.structure is.con.cerned:.
Looking good: topshop
5
42
7
1. Search bar
2. Login function
3. Shopping basket
4. Benefit to the customer
5. Promotional content
6. Specific content
3
16
12
• Search.function• Shopping.basket.top.right• Social.signals• Login.functionality• Contact.options• Corporate.info,.data.protection,.terms.and.conditions• Navigation.options.can.be.viewed.easily
Topshop.also.scores.equally.well.when.it.comes.to.display:.it.tailors.its.cam-paigns.and.teasers.to.its.visitors.and.encourages.potential.customers.to.buy..The.site.recommends.products.and.features,. such.as. themed.shopping..The.images.the.site.uses.are.sharp.and.clearly.recognisable,.even.without.zooming.in;.and.text.sections.are.generally.kept.short,.making.them.easy.to.read..All.the.benefits.to.the.customer.are.clearly.visible,.including.free.UK.&.Interna-tional.delivery,.fast.delivery.options.or.a.10%.student.discount..With.tablets,.it.is.also.essential.that.all.the.main.elements.appear.optimally.in.both.landscape.and.portrait.format,.which.Topshop.does.very.well..
Usability is.also.important.when.it.comes.to.customer.experience,.and,.here.again,.Topshop.comes.out.on.top..The.website.is.tablet-friendly.and.users.can.navigate.easily.using.the.links.and.buttons.available..The.text.is.also.comfort-ably.sized,.with.no.need.for.customers.to.zoom.in.on.it.The.website.can.also.be.used.on.mobile:.teasers/campaign.images.can.be.eas-ily.scrolled..The.only.point.of.criticism.with.Topshop’s.homepage.is.that.there.are.no.trust.elements,.however.when.it.comes.to.specific.content,.Topshop.ticks.all.the.boxes,.and.its.advertising.campaigns.offer.customers.a.good.portal.into.the.site.
Could do better: Zara
3
2 1. Search function
2. Teaser
3. Login function
4. Shopping basket
5. Contact
4 5
1
13
Zara.has.some.issues.in.terms.of.structure.and.display.in.that.various.bits.of.information.are.missing,.such.as.the.print.function,.terms.and.conditions,.data.protection.no.tice.and.trust.elements..These.are.important.to.potential.buyers,.as.they.cre.ate.confidence.and.trust..Nor.are.there.any.teasers.showing.spe-cific.campaigns.(such.as.the.current.Sale).which.might.encourage.customers.to.buy..The.main.problems,.however,.are.in.usability:.in.both.landscape.and.portrait.format,.the.homepage.buttons.shown.are.very.small.and.therefore.not.tablet-friendly.and.make.the.site.harder.to.use.
The.site.does.not.seem.to.have.any.mobile.options,.something.which.most.tab-let.users.have.come.to.expect..That’s.not.all.either:.when.it.comes.to.specificcontent,.Zara.does.not.present.any.advertising.campaigns.on.its.site.which.could.motivate.many.customers.to.buy.and.are.an.important.feature..
3.3 Product detail page results
Product.detail.pages.are.where.many.customers.decide.to.buy,.as.many.retail-ers.understand..Nike.(88.61%).and.adidas.(86.84%).achieved.the.best.results.and.except. for.minor. issues,. these.online. retailers.have.worked.out.how.to.display.their.products.to.the.best.effect.
Most shops are average:.the.overall.approach.is.good,.but.there.is.still.room.for. improvement..Hugo.Boss. (84.81%).did.well,. as.did.Topshop.(84.62%),.Lacoste.(83.56%),.New.Look.(80,82%).and.ASOS.(79.75%)..
Three online shops could only manage average:. Zara. (70.00%),. H&M.(65.79%).and.Ralph.Lauren.(61.64%)..Their.product.detail.pages.fell.short.in.all.four.categories.
Looking good: nike
1. Product images
2. Names and prices
3. Call to action button
4. Benefits for the customer
5. Product details
6. Customer ratings
7. Contact details, order
formalities and registration
2
1
3
4
5
6
7
14
Nike. and. adidas. have. covered. all. the. bases. on. their. websites. in. terms. of..struc.ture..Nike.also.scored.well.on.display:.the.call.to.action.button.is.clearly.visible,.and.is.in.colour.to.make.it.stand.out..The.product.images.and.text.are.also.easy.to.see,.even.without.zooming.in;.and.the.trust.elements.are.visible. in.both.landscape.and.portrait..Nike.also.does.very.well.when.it.comes.to.usability..The.text.is.easy.to.read.and.the.site.is.designed.to.be.tablet-friendly..Even.in.portrait.format,.the.but-tons.are.big.enough.to.be.easy.to.use..In.terms.of.specific content,.Nike.scores.very.well.across.the.board,.and.in-cludes.all.the.important.elements.on.the.detail.page:.
• Product.availability• Product.ratings• Direct.reference.to.delivery.costs
It.also.offers.visitors.the.options.to.‘continue.shopping’.or.‘go.to.checkout’.if.they.put.a.product.in.their.basket,.so.there.is.no.automatic.link.to.the.shop-ping.basket,.and.users.can.decide.what.they.want.to.do.next.themselves.
From.a.structural.standpoint,.Ralph.Lauren.could.improve.its.prod.uct.detail.page.by. integrating. trust.elements;.but. important. features.such.as.a. search.function,.the.shopping.basket.visible.in.the.top.right,.login.function.to.cus-tomers’.own.accounts.and.information.such.as.contact.details,.terms.and.con-ditions,.print.function.and.data.protection.notice.are.visible.
Could do better: ralph Lauren
1. Call to action button
2. Select size
3. No material, delivery or
return details visible
immediately3
2
1
15
In.terms.of.display on.the.other.hand.the.site.could.be.optimised.by.adding.a.zoom.function.to.better.highlight.products.-.which.it.does.not.have.currently.-.along.with.lots.of.sections.of.text,.which.are.difficult.to.read..Tablet.users.will.also.find.the.text.too.small.to.read.in.portrait.format.easily..
This.problem.also.applies.to.usability..The.buttons.are.too.small.to.use.easily.with.fingers.or.thumbs,.in.either.landscape.or.portrait.format..What.is.also.apparent. is. that.no.mobile-optimised.options.are.available.(e.g.. swipe.with.slider)..
The.study.also.revealed.issues.when.it.comes.to.specific content,.as.there.were.no.product.ratings.from.other.customers.or.options.to.‘continue.shopping’.or.‘go.to.checkout’.once.customers.had.placed.products.in.their.basket..Nor.was.there.anything.in.the.product.text.about.delivery.charges..3.4 shopping basket
The.shopping basket.is.vital.as.far.as.retail.websites.are.concerned;.but.many.customers.abandon.it.without.actually.buying.anything,.so.it. is.essential.to.opti.mise.this.area.also..Most.of.the.shops.use.this.space.very.well,.especially.ASOS.and.adidas:.both.these.online.retailers.scored.full.marks.in.just.about.all. categories,. and.came.out.very.well.with.overall. averages.of.90.91%.and.90.48%.respectively.
Nike,. New. Look,. Lacoste. and. Ralph. Lauren. scored. a. good. average,. with.86.36%.each,.but.could.tailor.their.shops.even.better.to.suit.users’.needs.by.making.some.adjustments..Hugo.Boss.and.Topshop.came.in.very.closely.to-gether,.at.85.71%.and.80.95%..All.six.sites.need.to.work.on.making.their.call-to-action.buttons.easier.to.see,.above.all.else..
Things turned out quite differently with the other two online retailers, though: Zara. (66.67%). and.H&M.(61.90%).have.got. things.wrong..Both.lack.trust.elements.and.secure.payment.instructions.at.the.basket.stage,.even.though.shopping.online.depends.very.much.on.security.and.trust,.So.these.elements.should.be.a.high.priority.when.optimising.the.shopping.basket.
16
ASOS,.like.adidas,.scored.full.marks.almost.across.the.board..Apart.from.clear.contact.details,.the.site.has.everything.it.really.needs.and.meets.structural re-quirements..Customers.can.find.everything.they.need.to.know.in.their.shop-ping.basket;.so.the.site.meets.the.standards.a.basket.needs.to..The.call.to.action.button.is.always.in.sight;.the.text.is.not.too.small.and.is.very.easy.to.read..Everything.which.really.matters.for.a.good.customer.experience.can.be.seen.easily.-.even.in.portrait.format.-.and.ASOS.has.got.many.things.right.in.terms.of.display..
The.online.experience.at.ASOS.also.does.very.well.in.terms.of.usability..It.is.designed.to.be.tablet-friendly,.and.customers.can.remove.any.products.they.don’t.want.with.a.single.click..One.very.good.feature.is.that.you.can.change.how.many.products.you.have.without.having.to.leave.the.page..Considered.as.a.whole,.it.is.completely.user-friendly.
When.it.comes.to.specific content,.it.ticks.all.the.boxes:.
• It.shows.total.cost.and.delivery.charges.clearly• It.says.when.the.product.is.expected.to.be.delivered• It.keeps.product.details.to.the.essential.minimum.• It.talks.about.secure.payment.options
All.in.all.therefore,.ASOS’s.shopping.basket.is.exemplary.
Looking good:
1. Login function & shopping
basket
2. Benefits to the customer
3. Call to action button
4. Meaningful product info
and delivery details
5. Trust elements and proven
payment methods
2
3
4
1
5
17
Looking.at.Zara’s.basket.though,.the.situation.is.quite.different..They.have.failed.to.cover.many.important.points.and.by.making.some.minor.amends,.Zara.could.dramatically.improve.its.user.experience.for.visitors..In.terms.of.structure,.Zara.meets.many.requirements:.the.only.thing.which.stopped.them.from.scoring.full.marks.was.the.significant.absence.of.trust.ele-ments..
There.is.far.more.potential.when.it.comes.to.display,.on.the.other.hand..They.need.to.optimise.to.make.the.in.terms.of.catching.the.eye.and.positioning.the.call.to.ac.tion.button..This.is.not.always.in.sight,.so.is.not.easily.seen..
As.well.as.that,.the.buttons.and.links.are.small.in.landscape.and.portrait.for-mat,.making.them.hard.to.use.with.fingers,.and.compromising.on.us ability.by.a.fair.extent..
Major.issues.were.also.found.in.terms.of.specific.content,.in.that.Zara.gave.the.total.cost.of.an.order,.but.said.nothing.as.to.when.the.goods.could.be.ex-pected.to.be.delivered.or.about.secure.payment.
Could do better: Zara
1. Login, shopping
basket & contact details
2. Remove & change button
3. Costs
4. Call to action button
1
2
3
4
18
1. Check out in just three steps
2. Option to order as guest
3. Trusted payment provider
4. Contact information
12
3.5 Checkout
The.checkout.process.is.the.final.step.before.buying.products..Here.customers.have.to.enter.sensitive.data.to.complete.their.transaction..This.is.where.many.visitors.drop.out,.because.they.start.having.doubts.when.they’re.on.the.verge.of. buy.ing,. by. asking. themselves. questions:. is. this. really. the. right. product?.Should.I.actually.buy.it?.
Online,.customers.are.anonymous,.you.can’t.converse.with.them,.and.they.can.abort.the.buying.process.with.a.single.click:.so.what.is.particularly.important.here.is.to.reach.out.to.customers.and.help.by.accompanying.them.through.this.process.
The study revealed that around one-third of the retailers involved failed quite badly in this regard..Zara.(70.45%).and.H&M.(67.42%).scored.par-ticularly.badly.in.the.model..
There are better ways, as Hugo.Boss.(90.91%),.Topshop.(87.40%).and.Nike.(87.12%).reveal..Their.checkout.procedures.are.simple,.easy.to.follow.and.as-sist.the.customer.through.this.stage.of.buying..
At.Lacoste.(83.33%),.Ralph.Lauren.(82.58%).and.New.Look.(81.06%),.even.minor.changes.could.improve.customer.experience.on.iPads.
This.is.where.trust.elements,.like.having.a.call-to-action.button.close.at.hand,.could.encourage.customers.to.buy.and.help.to.stop.them.getting.cold.feet.
Looking good: Hugo Boss
3 4
19
1. Progress Bar (You can
navigate backwards without
losing your form data)
2. Order data can be
processed before buying,
mandatory fields are
highlighted
3. Delivery costs and times
are stated clearly
In. the. categories. of. structure, display and specific content,. Hugo. Boss.meets.all.requirements..All.the.appropriate.elements,.such.as.trust.elements.and.contact.details,.are.present.and.the.call.to.action.button.is.always.visible.and.prominent..
It. is.only. in.the.usability.category.that.Hugo.Boss. is.weak.on.two.points;.but.usability.is.the.main.input.factor,.as.we.saw.in.the.checkout.process..Un-fortunately,.visitors.cannot.change.the.number.of.products.they.have.in.the.basket.before.buying.without.leaving.the.site,.and.the.buttons.in.the.vertical.area.are.hard.to.use,.due.to.their.small.size..These.are.seemingly.minor.hur-dles,.but.they.affect.usability.a.great.deal..One.very.good.thing,.on.the.other.hand,.is.that.you.can.still.edit.all.your.order.data.before.you.buy.without.hav-ing.to.navigate.your.way.back.laboriously..If.a.user.decides.to.do.this,.however,.it.isn’t.a.problem.because.no.data.is.lost.
Hugo.Boss.also.came.out.very.well.in.terms.of.specific content..They.only.ask.for.the.most.important.fields.when.you.register:.they.leave.it.up.to.you.to.decide.whether.you.want.to.give.a.telephone.number.or.not,.as.it’s.not.a.mandatory.field..Once.a.customer.is.at.the.checkout,.users.don’t.want.to.fill.out.any.more.forms.than.they.have.to,.and.want.to.complete.their.purchases.quickly.and.comfortably.in.five.steps,.at.most..Hugo.Boss.makes.the.process.quite.seamless.by.reducing.the.checkout.process.to.just.three.steps.
Proven. payment. service. providers. like. PayPal. and. a. reference. to. SSL. en-coding.imply.trust.and.security.on.the.site;.and.trust.elements.before.finally.ordering,.together.with.the.call.to.action.button,.also.enhance.this.“trustwor-thiness”..Another.plus.point.is.gained.by.stating.the.expected.delivery.time:.so.customers.can.plan.their.week.around.their.expected.delivery.
1
2
3
20
1. Entry Mask for registering
with Zara
Could do better: Zara
1
1. Select delivery mode
2. State and can change
invoicing and delivery
addresses
3. Call to action button
1
1. Select payment method
2. Indicate delivery and total
costs
3. Navigation button
4. Button to close purchase
5. Invoice and delivery address
3
1 2
4
2
As.with. the.start page. and.shopping basket,.Zara.gets. some.things.badly.wrong.at.the.checkout.stage..When.it.comes.to.structure,.there.are.no.trust.elements..In.terms.of.display,.on.the.other.hand,.Zara.meets.all.the.cri.teria:.the.call.to.action.button.is.visible.and.stands.out,.both.in.landscape.and.por-trait.formats,.and.the.text.is.very.sharp..
5
3
21
It.is.when.we.look.at.usability,.on.the.other.hand,.that.Zara’s.checkout.proc-ess.really.falls.short..You.can.navigate.back.and.forth.without.any.problems,.but. this.has.an.adverse.effect.on.usability..Unfortunately,.customers.cannot.order.as.guests.(ie..without.being.logged.in).or.change.the.number.of.products.they.have.without.aborting.the.buying.process;.and.the.buttons.are.too.small,.making.them.hard.to.use:.all.reasons.which.could.lead.users.to.abort.the.buy-ing.process.prematurely..
In.the.specific.category content,.the.results.are.middling:.they.show.the.de-livery.costs.and.expected.delivery.time.clearly,.but.there.are.no.trust.elements.to.be.seen,.neither.is.the.call.to.action.button.visible.
3.6 overall results
The.study.findings.show.that.many.online.retailers.have.the.right.idea.when.it. comes. to. selling. products. on. tablet. devices.. Some. online. shops. do. par-ticularly.well. in.terms.of. their.baskets:. this. is.where.four.out.of. ten.online.traders.achieved.their.best.results,.with.ASOS.and.adidas.were.out.in.front.with.90.91%.and.90.48%.respectively..Overall.though,.this.category.produced.variable.results.and.is.also.where.three.of.the.ten.shops.did.worst.Checkout.results.were.also. relatively.mixed:. this. is.where.Hugo.Boss. (90.91%),.Nike.(87.12%).and.Zara.(70.45%).did.their.personal.best.in.terms.of.ranking,.while.adidas.(74.80%),.Lacoste.(83.33%).and.ASOS.(79.55%).did.the.worst.On.the.various.homepages,.six.of.the.ten.shops.scored.their.best.or.second.best.rating.here,.with.Topshop.(90.63%).and.adidas.(90.00%).way.out.in.front.
Shopping.basket
Startpage
Checkout
Product.detail.page
Fig, 5: QuIsMa scoring model overall results
Source:.QUISMA.study.find-ings.(as.at.September.2013)
22
A.website. that. is. optimised. for. tablets. can.boost. the.user. experience. con-siderably,.as.Nike’s.online.shop.shows..There.are.two.potential.options.here:.designing.either.a.responsive.website.or.an.optimised.tablet.version..
responsive web design (rWd)
RWD.uses.a.single.template.to.show.the.same.web.content,.regardless.of.the.display.reso.lution..The.initial.development.cost.may.be.higher,.but.the.invest-ment.is.worth.it,.as.you.only.need.to.implement.aspects. like.quality.assur-ance,.content.adaptation.and.maintenance.costs.once,.although.adaptations.in.conversion.optimisa.tion.may.be.affected.individually,.depending.on.what.the.display.resolution.involved.is..
This.is.the.reason.RWD.turns.out.to.be.the.most.effective.solution.for.multi-channel.marketing.right.now.
Mobile web design
A.site.tailored.individually.to.each.device.(desktop,.tablet,.mobile),.costs.more.and.may.require.more.updates.to.be.produced.for.each.device...This.is.often.problematic,. because. the. range. of. smartphones,. tablets. and. monitors. (dis-plays).available.and.their.characteristics.is.becoming.increasingly.diverse.
An.individual.mobile.site.may.be.a.good.idea,.as.the.costs.are.manageable;.but.with.complex,.more.expensive.web.presences,.producing.two.independent.sites.can.become.time-consuming.and.expensive.to.be.justified.when.imple-mentation.and.maintenance.are.into.account.
4. reCoMMended aCtIon
Whichever option you choose, a website optimised specifically for mobile devices gives a better user experience than a desktop-only version, so can generate more sales and success.
23
The.QUISMA.scoring.model. results. show.most.online. retailers. could.aim.higher.when.it.comes.to.designing.their.websites.for.tablet.devices..Tar.geted.optimisation.could.add.value.significantly.here..
For.retailers.to.succeed.online,.they.need.to.create.and.maintain.websites.that.are.optimised.for.different.devices..Investing.in.technology.to.do.so,.is.vital.to.ensure.that.site.visitors.feel.“at.home”.on.a.website,.irrespective.of.the.device.they.are.using,.to.purchase.from.it..
Only.once. this.has.been.addressed,. can. retailers. start. to.explore.additional.optimisation.techniques.such.as.visitor.surveys.to.identify.how.better.to.serve.them.and.ultimately.convert.them.to.customers.
5. ConCLusIon
Once you‘ve found how to structure your website to give the best conversion solution, you should work constantly to improve it. That means testing the website continuously and maintaining it at a constantly high level. Manage that, and you will always get the best possible results out of the traffic available.
24
reFerenCes1).http://www.imrg.org/index.php?catalog=186.
2).http://www.adobe.com/solutions/digital-marketing/digital-index.html.
3).http://www.wpp.com/wpp/marketing/brandz/brandz-2013/
4).IMRG.Hitwise.Hot.Shops.List.(no.link.available).
5).International.Data.Corporation.2013:.Worldwide.Tablet.Tracker,.....URL:.http://www.idc.com/getdoc.jsp?containerId=prUS24093213
Creating Value & Performance in Digital
TWITTERFACEBOOKBLOG
QUISMA GmbHRosenheimer Straße 145 DDE-81671 München
+49 (0)89 442382-0+49 (0)89 442382-999