13-03-13
Bronnen design In het kort: ontwerpen van webshop vanuit de gebruiker - adpearance.com • http://adpearance.com/blog/designing-for-ecommerce-know-your-audience
BIG IA Hoorcollege 13 maart 2013
Online Marketing: sales funnel design • http://www.contentmarketinginstitute.com/2011/09/web-content-conversions/ • http://www.youtube.com/watch?v=joxKC_3JGw4 Voorbeelden van sales funnel design • http://petovera.com/professional-web-design-blog/2011/06/17-examples-of-the-best-online-sales-funnels/ Landing page design • http://www.tripwiremagazine.com/2011/06/showcase-and-tips-how-to-create-effective-landing-pagedesigns.html Product page design http://sixrevisions.com/user-interface/product-page-design/ Shopping cart design • http://www.webdesignerdepot.com/2009/04/10-tips-to-design-usable-shopping-carts/
Bronnen: conversie Petersen, P. Handboek Online Marketing, Kluwer, 2e druk, 2010, 9789013077346 • http://www.handboekonlinemarketing.nl Google: video analytics in real life • http://www.youtube.com/watch?v=3Sk7cOqB9Dk Introductie analytics • http://www.karelgeenen.nl/20/de-basis-van-web-analytics-een-introductie/ Bestelproces optimaliseren • http://www.frankwatching.com/archive/2012/06/13/webwinkeliers-10-tips-om-je-bestelproces-teoptimaliseren/ Checklist en voorbeelden van de totale funnel • http://sixrevisions.com/web-development/planning-your-e-commerce-website/ • http://sixrevisions.com/user-interface/e-commerce-website-features-tips-examples/ Handleiding conversieoptimalisatie • http://www.frankwatching.com/archive/2012/10/02/handleiding-conversieoptimalisatie-tips-best-practices/ Asos • http://www.asos.com/ • http://en.wikipedia.org/wiki/ASOS.com
1
13-03-13
BIG
IA
funnel
2
13-03-13
User Journey
catalogus
product
betalen
bezorgen
3
13-03-13
home
productlijst
landingpage thema page
productdetails productdetails productdetails
basket
profiel
funnel
checkout
betalen
bevestiging
fulfilment
Funnel
conversie
funnel
Het percentage van bezoekers dat uiteindelijk tot de gewenste actie overgaat.
4
13-03-13
Funnel
Een goede conversie kan alleen behaald worden wanneer de site goed in elkaar zit. bron: frankwatching.com
conversie Hoe korter de paden naar een uiteindelijke conversie, hoe hoger de conversie ratio in het algemeen zal liggen.
bron: frankwatching.com
5
13-03-13
bron: frankwatching.com
home
annuleren
5
annulere n
D
productlijst
landingpage thema page
3 productdetails productdetails productdetails
dossier wijzigen basket wijzigen
4
checkout
alternatieven alternatiev en
4
ontwerpdoelen
profiel
selecteer en combineer opties en combinaties
betalen
D bevestiging
• • • • • •
Usability Keuze vergemakkelijken Bevestigen van verwachtingen Helderheid en duidelijkheid Weghalen van frictie / irritatie Benadrukken van betrouwbaarheid
fulfilment
6
13-03-13
home
productlijst
landingpage thema page
productdetails productdetails productdetails
basket
profiel
home
checkout
betalen
bevestiging
fulfilment
productlijst
landingpage thema page
Homepage: doel • overtuigen of verleiden • ontsluiting producten • aanknopingspunten user journey / hoofdproces • gemak benadrukken • herkenbaarheid • veiligheid en betrouwbaarheid
productdetails productdetails productdetails
basket
profiel 7
13-03-13
Homepage: middelen • een mentaal model van de structuur • geeft volgorde van belangrijkheid aan • toont afhankelijkheid • toont samenhang
Homepage: let op • vaak erg vol • te veel leuke functies • te complex
Navigatiesysteem • verzamelingen gegroepeerde links • maakt informatie toegankelijk
• een mentaal model van de structuur • geeft volgorde van belangrijheid aan • toont afhankelijkheid • toont samenhang
8
13-03-13
• verdeel de informatie in (sub)rubrieken • belangrijkheid en afhankelijkheid aangeven • subjectieve classificatie mogelijk, wenselijk • exacte classificatieschema’s aanbieden
classificatie schema Filters • Exact schema gesloten klasse. • Als bezoekers weten wat ze zoeken • Subjectief schema voor vaag omlijnde informatiebehoeften • door elkaar gebruiken: bied meerdere routes aan
Classificatie schema’s “related content” Leggen ongestructureerde relaties op basis van gedeelde eigenschappen.
faceted navigation navigatie door eliminatie • Objecten voorzien van meerdere tags • Deze tags zijn filters die gebruikers aan en uit zetten • Door keuzes elimineert gebruiker de objecten • Stapsgewijs dichter bij het vinden van het juiste object
9
13-03-13
home
Productlijst: doel • productselectie • verfijning • aanknopingspunten user journey
productlijst
landingpage thema page
productdetails productdetails productdetails
Productlijst: niet doen 1. foto 2. beschrijvende titel basket 3. prijs 4. actie
profiel
• te veel producten • call-to-action vergeten • navigatie zonder mental model (geen relatie en context) • te weinig filters • geen sorteermogelijkheid
checkout
betalen
10
home
13-03-13
Productlijst: filters • filters voor de producten op de lijst • bij veel producten: facetnavigatie
productlijst
• baseren op exacte eigenschappen • sorteerfunctie voor de lijst toevoegen • aantallen tonen
landingpage thema page
productdetails productdetails productdetails
basket
profiel
checkout
betalen
11
13-03-13
productlijst
landingpage thema page
productdetails productdetails productdetails
basket
Productpagina: doel
profiel
Productpagina: let op
• overtuigen of verleiden • user journey / hoofdproces moet duidelijk zijn • betrouwbaarheid en gemak benadrukken
checkout
betalen
• te vol en onoverzichtelijk • te veel leuke functies • te complex • niet relevant
12
bevestiging
13-03-13
Bij het ontwerpen de hoofdzaken van de bijzaken onderscheiden
Eerst de elementen gebuiken die essentieel zijn voor je doel / conversie. Daarna een hïerarchie van content elementen vaststellen.
Productpagina
Heel veel A/B testen
• titel • beschijving • goede foto’s • bestelknop • essentiële producteigenschappen (maat, kleur) • beschikbaarheid • hoeveelheid • overige producteigenschappen • merk • korting • reviews • gerelateerde producten • bezorging en service
13
13-03-13
verfijnen
nog meer verfijnen
extra verfijnen
weer verfijnen usp’s
Suggesties op gebruikersgedrag
Goede productfotografie
delen
14
13-03-13
productdetails productdetails productdetails
en blijven verfijnen little big details basket
profiel
checkout
winkelwagen • overtuigen of verleiden • start koopproces
winkelwagen: doel betalen
• verzamelen van selectie producten • vergelijken van eigenschappen • rekenmachine
bevestiging
15
fulfilment
13-03-13
winkelwagen: let op • altijd een call to action • geef een escape • vaak onoverzichtelijk
Mini cart
winkelwagen: let op • altijd een call to action • geef een escape • vaak onoverzichtelijk
full page cart
• toegang niet verstoppen • user journey / hoofdproces moet opvallen • leesbare lay-out hulplijnen en tabellen • continue shopping button • full page en mini cart door elkaar • help bereikbaar houden • betrouwbaarheid en gemak benadrukken
16
13-03-13
basket
profiel Checkout en registratie
checkout
conversie killer!
betalen
Checkout en registratie
bevestiging
• afsluiten bestelproces • definitieve koopbeslissing • overdracht van persoonlijke gegevens
fulfilment
bron: frankwatching.com
17
13-03-13
Checkout en registratie: let op • hindernis tussen beslissing en koopmoment • niet leuk / corvee • onoverzichtelijk • privacy-issues • kans op fouten = check / dubbelcheck • onmenselijk • registratie of inloggen stoot af
Checkout en registratie • bestelflow / checkout proces volledig lineair ontwerpen • maak het zo simpel mogelijk • maak het leuk • formulieren ontwerpen volgens usability guidelines • optioneel registratie aanbieden • voordelen van registratie tonen • overbodige vragen weglaten • altijd A/B testen
18
13-03-13
productdetails productdetails productdetails
basket
profiel
checkout
betalen
bevestiging
19
fulfilment
13-03-13
checkout Betalen • transactie, het feitelijke koopmoment
betalen
bevestiging
Betalen: let op • betrouwbaarheid benadrukken • escape / back opties geven • meedere confirm / bevestiging • het is eng: gebruiker geruststellen • het is spannend: gebruiker toejuichen
fulfilment
• zo weinig mogelijk navigatieopties geven • “empty footer”
20
lijst 13-03-13
product
login
bestellen en betalen
Bevestiging
bevestiging
• betrouwbaarheid benadrukken • juridisch bewijs van aankoop • geruststellen van de gebruiker • meedere bevestigingsopties • link naar klantenservice
fulfilment 21
13-03-13
? 22
13-03-13
THNX
23
