Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014
Post on 22-Nov-2014
123 Views
Preview:
DESCRIPTION
Transcript
Usability in e-commercea design framework to lubricate your design discussions
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. ”
Johan Verhaegen – UX Strategist Human Interface Group
Vision & missionWe give strategic advice and create the engaging user experience you need.
We help our customers getting their results.
UX Strategy UX Design User Assistance
business+design
a design
frameworktrust-and-tried best practices
business+designa difficult relationship
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• business involves design only way down the project line
• Design• designers don’t understand their role in the process• designers won’t get out of their comfort zone• designers ‘dribbble’ themselves to death
business
design
business
design
“Design doesn’t just make things beautiful,it makes them work.”
Scott Dadich – The Age of Invisible Design (Wired, September 2013)
http://www.mobify.com/blog/
http://www.mobify.com/blog/
design ∞ produce
“Impressive!”
Eh, how do we pull this off exactly?
Simply copying the giants is not a decente-commerce strategy.
@johanverhaegen
business+designa design framework to the rescue
Without a design framework, your designs will eventually become a chaotic jumble of preferences and opinions.
@johanverhaegen
Design theoryUser researchUser evidence
Design framework – foundations
Design theory – UX authorities
Jakob Nielsen’s Alertbox10 usability Heuristics for User Interface Design
Susan Weinschenk
Scientific foundation for design decisions, interaction design principles
‘People process information in chunks’
User research – UX referencesProfound research on similar products, best practices, interpretations, conclusions, …
‘Customers like to be in control of their shopping baskets’
User evidence – HIG projects Data gleaned directly from projects - user observations, usability testing, …
‘Users feel overwhelmed when offered too many choices’
Value proposition
Usability principles
Design principles
e-shop design
Design framework – mechanism
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
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
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.”
2. People are motivated by progress
• Small signs of progress have a big effect
• People don’t always choose the fastest way
• 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.”
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 items
e-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.”
Value proposition
Usability principles
Design principles
e-shop design
Design framework - mechanism
trust-and-tried best practicessearch + search results + product page
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.
Centered on homepage for
maximum effect
Surrounding hero image for major impact
Extra dark background for better contrast
Distinct color to focus
on call-to-action
Best Practices – Search
Deliver results fast with autocomplete scope suggestions
Distinct style in the autocomplete suggestions
Best Practices – Search
Deliver results fast with power search tools
Best Practices – Search
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
Best Practices – Search results
Filter for highly personalized results
Browse
Filter
Sort
Theme
Filter
Filter
Filter
Filter
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 offline and online shopping experiences
• navigation should help a customer to quickly get amental model of the search space
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
as simple and striking as possible so it passes the blink test
a clear and effective layout
minimalnon-distracting navigation
well-positioned call-to-action
Before you take off:3 things to take away with you
business+design are two sides of the same coin
your design framework is your compass
an engaging user experience makes a customer happy
De Regenboog 112800 Mechelen+32 (0)15 40 01 38info@higroup.com
johan.verhaegen@higroup.com
Human Interface Group
Human Interface Group
@higroup
Thank you!
top related