Surely you've attended them: all those design meetings full of high-temperature discussions about product pages, search queries and checkout flows. Everybody has their own opinion and preference, everyone refers to another big name with: “Let's do it like they do, surely they've got it right”. More often than not it ends up in a chaotic mishmash. It doesn't have to be that way. By creating a design vision specifically tailored to your website or mobile app, you will enter your future design meetings with much more confidence and efficiency. And armored with an up-to-date selection of e-commerce usability best practices, you will be ready to design like a pro. In this talk you will learn: - How to create a design vision, tailored to your specific goals. - Which usability best practices are relevant to improve your conversion rates.

1. Usability Best Practices
Conversion Day, 02.06.2015

15. [ Put any e-commerce statistic here ]

16. [ Put any user experience statistic here ]

17. Your boss: “So, what are you waiting for?”

18. Great UX for Great Business
Improve your results with great user experience, the
cornerstone of successful digital products and services.
• we give strategic advice
• we design engaging user interfaces
• we help your users

19. UX Strategy UX Design User Assistance

20. User Experience Design Framework
CUSTOMER JOURNEY DESIGN VISION
VALUE PROPOSITION CUSTOMER INSIGHT MAP

21. User Experience Design Framework
DESIGN VISIONVALUE PROPOSITION

22. Product / Service
Needs
Wants
Concerns
Customer
Value proposition
Technology Features
User Experience
Value Proposition Canvas

23. h"p://www.mobify.com/blog/

24. h"p://www.mobify.com/blog/

34. TECHNOLOGY FEATURES (itis) USER EXPERIENCE

35. USER EXPERIENCE FEATURES TECHNOLOGY

36. User Experience Design Framework
DESIGN VISIONVALUE PROPOSITION

37. Design vision
USABILITY
PRINCIPLES
DESIGNDESIGN
PRINCIPLES

38. BASED ON HOW PEOPLE
Feel
Think
HearSee
InteractBehave
Usability principles

39. 1. People are lazy by nature
• If no effort is required, no effort will be done.
• People scan screens based on past experiences and
expectations.
• In the mind of most users, a website is a simple thing:
• a logo
• primary navigation
• a search box
• utilities
• content
• (that’s it)
Usability principles

42. 2. People like to be in control
• People love it when you give them autonomy. It gives them the
feeling that they’re smart and powerful.
• It’s like raising your kids: If you give them control, you give the
message that you trust them. And they’ll trust you in return.
• People love choice. Let them choose and they’ll taste the
power of control.
Usability principles

44. 3. People process information better in chunks
• People remember only 4 items at once.
• People become frustrated when they’re overwhelmed by
[anything, really].
Usability principles

51. Usability principles Design principles
1. People are lazy by nature
2. People like to be in control
3. People process information
in chunks
1. “The simpler, the better”
2. “Power to the people”
3. “Don’t make me think”

52. Design vision
USABILITY
PRINCIPLES
DESIGNDESIGN
PRINCIPLES

53. 1
2
3
Design principles
“The simpler,
the better”
“Power to the people”
“Don’t make
me think”
DESIGN

54. Design vision
USABILITY
PRINCIPLES
DESIGNDESIGN
PRINCIPLES

55. Usability tips

56. Usability tips for
• Carousels
• Product pages

57. • Not recognizable as such
• Help, they’re moving around: auto-forwarding
• Difficult to interact with
Source: Usability Geek - http://bit.ly/YNzTR1
CAROUSEL FAILURES

67. 1. Stick to a maximum of 4 frames
2. Show how many frames there are, and where the user is
within the “progression”
3. Use crisp-looking text and images
4. Don’t auto-forward
5. Put navigation controls inside the carousel
Source: Nielsen Norman Group - http://bit.ly/1ljtqav
CAROUSEL SUCCESS

68. • Complex layout
• Absence of product videos
• Insufficient product information
• Tiny product images
• Poor customer service pages
Source: Usability Geek - http://bit.ly/YNzTR1
PRODUCT PAGE FAILURES

69. 1. The F-pattern 2. The Z-pattern
CREATIVE BLOQ - http://bit.ly/1GTHGhN

91. 1. Use a predictable layout
2. Provide elaborate product information
3. Use (very) large product images
4. Include product videos
5. Go for a holistic customer service
PRODUCT PAGE SUCCESS

92. Before you take off:
3 things to take with you

93. 1. Show your value proposition

94. 2. Use your own design vision

95. 3. Apply usability best practices

96. Contact us
De Regenboog 11
2800 Mechelen
Belgium
www.higroup.com
+32 (0)15 40 01 38
Follow us
Human Interface Group
@higroup
Human Interface Groupjohan.verhaegen@higroup.com
Thank you!