usability in e-commerce - a design framework
DESCRIPTION
Surely you’ve attended them - all those meetings full of high-temperature discussions about product pages, search queries and checkout flows. Everybody seems to have their own disparate opinion, everyone refers to another big name site asserting: “Let’s do it like they do, surely they've got it right”. More often than not it ends up in a chaotic jumble. It doesn’t have to be that way. By using a solid design framework as your compass, you will navigate your future design meetings with much more confidence and efficiency. And armored with a fine selection of e-commerce usability best practices, you will be ready to think like a pro.TRANSCRIPT
![Page 1: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/1.jpg)
Usability in e-commercea design framework to lubricate your design discussions
![Page 2: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/2.jpg)
A typical project brief“Our new service should breath our brand and wow our customers. Here’s
the RFQ with all the features we need, all we need you to do is to create a
gorgeous design. ”
![Page 3: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/3.jpg)
![Page 4: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/4.jpg)
![Page 5: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/5.jpg)
![Page 6: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/6.jpg)
![Page 7: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/7.jpg)
![Page 8: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/8.jpg)
![Page 9: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/9.jpg)
Johan Verhaegen – UX Strategist Human Interface Group
![Page 10: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/10.jpg)
Vision & missionWe give strategic advice and create the engaging user experience you need.
We help our customers getting their results.
![Page 11: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/11.jpg)
UX Strategy UX Design User Assistance
![Page 12: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/12.jpg)
business+design
a design
framework
trust-and-tried best practices
![Page 13: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/13.jpg)
business+designa difficult relationship
![Page 14: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/14.jpg)
Project brief uncovers a schism: business ⎟⎟ design
• “Breath … wow … gorgeous” -> uncovers a schism
• Business• business sees design as the final step in the
creation process• a wrapper, a container or the polish of the product or
service
• business involves design way down the project line• instead of integrating design as integral part of the
process
• Design• designers don’t understand their role in the process• designers won’t get out of their comfort zone• designers ‘dribbble’ themselves to death
![Page 15: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/15.jpg)
![Page 16: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/16.jpg)
business
design
![Page 17: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/17.jpg)
business
design
![Page 18: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/18.jpg)
“Design doesn’t just make things beautiful,it makes them work.”
Scott Dadich – The Age of Invisible Design (Wired, September 2013)
![Page 19: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/19.jpg)
http://www.mobify.com/blog/
![Page 20: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/20.jpg)
http://www.mobify.com/blog/
![Page 21: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/21.jpg)
design ∞ produce
![Page 22: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/22.jpg)
![Page 23: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/23.jpg)
![Page 24: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/24.jpg)
![Page 25: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/25.jpg)
![Page 26: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/26.jpg)
![Page 27: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/27.jpg)
“Impressive!”
Eh, how do we pull this off exactly?
![Page 28: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/28.jpg)
Simply copying the giants is not a decente-commerce strategy.
@johanverhaegen
![Page 29: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/29.jpg)
business+designa design framework to the rescue
![Page 30: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/30.jpg)
Without a design framework, your designs will eventually become a chaotic jumble of preferences and opinions.
@johanverhaegen
![Page 31: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/31.jpg)
Design theory
User research
User evidence
Design framework – foundations
![Page 32: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/32.jpg)
Design theory - UX Authorities
Jakob Nielsen’s Alertbox
10 usability Heuristicsfor User Interface
Design
Susan Weinschenk
Scientific foundation for design decisions, interaction design principles
‘People process information in chunks’
![Page 33: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/33.jpg)
User research – UX referencesProfound research on similar products, best practices, interpretations, conclusions, …
‘Customers like to be in control of their shopping baskets’
![Page 34: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/34.jpg)
User evidence – HIG projects
Data gleaned directly from projects - user observations, usability testing, …
‘Users feel overwhelmed when offered to many choices’
![Page 35: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/35.jpg)
Value proposition
Usability principles
Design principles
e-shop design
Design framework – mechanism
![Page 36: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/36.jpg)
Value proposition
shop without worries –
comfortably choose between 7
million articles – enjoy the best
service
rent unique places to stay from
local hosts in 190 countries
![Page 37: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/37.jpg)
Usability principles for e-shops
1 People are motivated by control
2 People are motivated by progress
3 People process information better in bite-sized chunks
![Page 38: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/38.jpg)
1 People are motivated by control
• People are motivated by autonomy
• Your customer is in control and is able to do
things himself
e-shop design principle: always in control
• “I choose whether I browse or search”
• “I am in full control of my shopping basket”
• “I decide where and when my goods are delivered.”
![Page 39: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/39.jpg)
2 People are motivated by progress
• Small signs of progress have a big effect
• show people their progression toward goals
• People don’t always choose the fastest way to
complete a task
• offer more than one way, so that users have a
choice
• Keep users informed during the entire journeye-shop design principle: online is easier• “I know what the next step is. I’m confident I will succeed in ordering
my stuff.”
• “I easily choose between products I want to add to my basket.”
• “When I’m done shopping on the site, my shopping journey isn’t
finished.”
![Page 40: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/40.jpg)
3 People process information in chunks
• Too many choices paralyzes the decision process
• if possible, limit the number of choices to 3 or 4
• if you have to offer more options, offer them
progressively
• People typically remember only 4 items once, that's
why they have the tendency to divide and group
itemse-shop design principle: progressive
disclosure• “I find all the information I need, at the right time and place.”
• “I don’t feel overwhelmed by information.”
![Page 41: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/41.jpg)
Value proposition
Usability principles
Design principles
e-shop design
Design framework - mechanism
![Page 42: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/42.jpg)
trust-and-tried best practicessearch + search results + product page
![Page 43: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/43.jpg)
Best Practices – Search
• On typical e-commerce sites customers tend to choose browsing over searching
• … unless you promote search for a specific reason
• Customers see the prominence of the search field as an indicator of how strongly the site recommends search as a way to find products or services.
![Page 44: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/44.jpg)
Centered on homepage for maximum effect
Surrounding hero image for major impact
Extra dark background for better contrast
Distinct color to focuson call-to-action
![Page 45: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/45.jpg)
Best Practices – Search
Deliver results fast with autocomplete scope suggestions
![Page 46: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/46.jpg)
Distinct style in the autocomplete suggestions
![Page 47: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/47.jpg)
Best Practices – Search
Deliver results fast with power search tools
![Page 48: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/48.jpg)
Best Practices – Search
![Page 49: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/49.jpg)
Best Practices – Search results
Enable customers to browse in categories and subcategories
If relevant, offer themes as alternative entry points
Provide options to sort the results
Assist the customer finding the exact product with facetted sorting
![Page 50: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/50.jpg)
Best Practices – Search results
Filter for highly personalized results
![Page 51: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/51.jpg)
Browse
Filter
Sort
Theme
![Page 52: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/52.jpg)
Filter
Filter
Filter
![Page 53: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/53.jpg)
Filter
![Page 54: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/54.jpg)
Best Practices – to the product page
• Search• customer already knows the specific item he wants and
has a good notion on how it can be identified• customer needs to understand the search space and
they should be able to put in the right keywords
• Browse• customer doesn’t know yet the specific item he wants• items should be categorized in a customer-logic way,
consistent with other (offline and online) shopping experiences
• navigation should help a customer to quickly get a mental model of the search space
![Page 55: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/55.jpg)
![Page 56: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/56.jpg)
![Page 57: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/57.jpg)
![Page 58: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/58.jpg)
as simple and
striking as
possible so it
passes the
blink test
a clear and
effective
layout
minimal and
non-
distracting
navigation
well-
positioned
call-to-action
fluent
shopping
continuation
![Page 59: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/59.jpg)
as simple and
striking as
possible so it
passes the
blink test
a clear and
effective
layout
minimal
non-
distracting
navigation
![Page 60: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/60.jpg)
well-
positioned
call-to-action
![Page 61: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/61.jpg)
Before you take off:3 things to take away with you
![Page 62: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/62.jpg)
business+design are two sides of the same coin
![Page 63: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/63.jpg)
your design framework is your compass
![Page 64: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/64.jpg)
an engaging user experience makes a customer happy
![Page 65: Usability in e-commerce - a design framework](https://reader035.vdocuments.us/reader035/viewer/2022062405/557d5e38d8b42aba3d8b4e36/html5/thumbnails/65.jpg)
De Regenboog 112800 Mechelen+32 (0)15 40 01 [email protected]
Human Interface Group
Human Interface Group
@higroup
Thank you!