+ All Categories
Home > Business > Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

Date post: 22-Nov-2014
Category:
Upload: safeshopsbe
View: 123 times
Download: 0 times
Share this document with a friend
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.
Popular Tags:
65
Usability in e-commerce a design framework to lubricate your design discussions
Transcript
Page 1: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

Usability in e-commercea design framework to lubricate your design discussions

Page 2: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

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: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014
Page 4: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014
Page 5: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014
Page 6: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014
Page 7: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014
Page 8: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014
Page 9: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

Johan Verhaegen – UX Strategist Human Interface Group

Page 10: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

Vision & missionWe give strategic advice and create the engaging user experience you need.

We help our customers getting their results.

Page 11: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

UX Strategy UX Design User Assistance

Page 12: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

business+design

a design

frameworktrust-and-tried best practices

Page 13: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

business+designa difficult relationship

Page 14: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

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

Page 15: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014
Page 16: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

business

design

Page 17: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

business

design

Page 18: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

“Design doesn’t just make things beautiful,it makes them work.”

Scott Dadich – The Age of Invisible Design (Wired, September 2013)

Page 19: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

http://www.mobify.com/blog/

Page 20: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

http://www.mobify.com/blog/

Page 21: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

design ∞ produce

Page 22: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014
Page 23: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014
Page 24: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014
Page 25: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014
Page 26: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014
Page 27: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

“Impressive!”

Eh, how do we pull this off exactly?

Page 28: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

Simply copying the giants is not a decente-commerce strategy.

@johanverhaegen

Page 29: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

business+designa design framework to the rescue

Page 30: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

Without a design framework, your designs will eventually become a chaotic jumble of preferences and opinions.

@johanverhaegen

Page 31: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

Design theoryUser researchUser evidence

Design framework – foundations

Page 32: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

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’

Page 33: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

User research – UX referencesProfound research on similar products, best practices, interpretations, conclusions, …

‘Customers like to be in control of their shopping baskets’

Page 34: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

User evidence – HIG projects Data gleaned directly from projects - user observations, usability testing, …

‘Users feel overwhelmed when offered too many choices’

Page 35: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

Value proposition

Usability principles

Design principles

e-shop design

Design framework – mechanism

Page 36: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

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: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

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: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

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: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

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.”

Page 40: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

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.”

Page 41: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

Value proposition

Usability principles

Design principles

e-shop design

Design framework - mechanism

Page 42: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

trust-and-tried best practicessearch + search results + product page

Page 43: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

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: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

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

Page 45: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

Best Practices – Search

Deliver results fast with autocomplete scope suggestions

Page 46: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

Distinct style in the autocomplete suggestions

Page 47: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

Best Practices – Search

Deliver results fast with power search tools

Page 48: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

Best Practices – Search

Page 49: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

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: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

Best Practices – Search results

Filter for highly personalized results

Page 51: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

Browse

Filter

Sort

Theme

Page 52: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

Filter

Filter

Filter

Page 53: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

Filter

Page 54: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

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

Page 55: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014
Page 56: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014
Page 57: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014
Page 58: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

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: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

as simple and striking as possible so it passes the blink test

a clear and effective layout

minimalnon-distracting navigation

Page 60: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

well-positioned call-to-action

Page 61: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

Before you take off:3 things to take away with you

Page 62: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

business+design are two sides of the same coin

Page 63: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

your design framework is your compass

Page 64: Human Interface Group's presentations by Johan verhaegen - eTradeSummit 2014

an engaging user experience makes a customer happy


Recommended