VIGC Academy

175
Usability - Veel bezoekers, weinig klanten? VIGC Academy – 12.5.2016

Transcript of VIGC Academy

Page 1: VIGC Academy

Usability - Veel bezoekers, weinig klanten? VIGC Academy – 12.5.2016

Page 2: VIGC Academy
Page 3: VIGC Academy
Page 4: VIGC Academy
Page 5: VIGC Academy
Page 6: VIGC Academy
Page 7: VIGC Academy

Goals of this session

•  Introduce a User Experience framework

•  Learn how to do usability tests

Page 8: VIGC Academy
Page 9: VIGC Academy

User Experience Framework

Page 10: VIGC Academy

UX framework

CUSTOMER JOURNEY DESIGN VISION

VALUE PROPOSITION CANVAS CUSTOMER INSIGHT MAP

Page 11: VIGC Academy

Product/Service

Needs

Wants

Concerns

Customer

Value proposition

Technology Features

User Experience

Value Proposition Canvas

Customer Experience Business goals

Page 12: VIGC Academy

Product/Service

Needs

Wants

Concerns

Customer

Value proposition

Technology Features

User Experience

Value Proposition Canvas

Customer Experience Business goals

Page 13: VIGC Academy

“Nobody cares about your product or service like you do” Paul Boag – UX Consultant/Author/Speaker

Page 14: VIGC Academy

h"p://bit.ly/1SsEYFf

Page 15: VIGC Academy
Page 16: VIGC Academy

“We zullen internet zijn. Of we zullen niet zijn”

Philippe Neyt Commercial Director

“To be or not to be”

Focus on your business goals (aka don’t copy the giants)

Page 17: VIGC Academy
Page 18: VIGC Academy

Business goals •  Easy to understand form

•  100% correct pricing

•  Minimum abandon rate

User needs •  Attractive price

•  Guarantees

•  Customer service

•  Subscribe directly online

Page 19: VIGC Academy

10 times more online contracts than expected

Page 20: VIGC Academy

Product/Service

Needs

Wants

Concerns

Customer

Value proposition

Technology Features

User Experience

Value Proposition Canvas

Customer Experience Business goals

Page 21: VIGC Academy
Page 22: VIGC Academy
Page 23: VIGC Academy
Page 24: VIGC Academy
Page 25: VIGC Academy
Page 26: VIGC Academy
Page 27: VIGC Academy
Page 28: VIGC Academy
Page 29: VIGC Academy
Page 30: VIGC Academy
Page 31: VIGC Academy
Page 32: VIGC Academy
Page 33: VIGC Academy
Page 34: VIGC Academy

Product/Service

Needs

Wants

Concerns

Customer

Value proposition

Technology Features

User Experience

Value Proposition Canvas

Customer Experience Business goals

Page 35: VIGC Academy

Service: Date:Created by:

Who is / will be involved in delivering the service?Who are / will be the key partners, suppliers and stakeholders?

Through which channels (e.g. online, mobile, telephone, shop) is / should the service be available?Which channels are most cost effective?Which channels are users like to favour?

Which key activities are required to deliver the service?What resources are required for those activities?Which are the most important activities?

How will the service deliver an ROI?What are the costs vs the benefits?How can the service be delivered more cost effectively?

How should / do users use the service?How frequently is / will the service be used?

Why would someone use the service?What value does the service bring?

Who are / will be the service users?Who are the most important users?

What current challenges exist?What challenges do you foresee in the future?

What other similar services are available?Who are the key competitors?What other options do users have?

Which KPIs are / can be used to track the performance of the service?What are the key KPIs?

USERS SERVICE DELIVERY PERFORMANCE

RISKS

1. Users 2. Service proposition 5. Actors 6. Key activities 9. ROI

3. Channels 4. Usage

7. Challenges 8. Competitors

10. KPIs

www.uxforthemasses.com

h"p://www.uxforthemasses.com/updated-service-model-canvas/

Page 36: VIGC Academy

Organize stakeholder workshops

Page 37: VIGC Academy
Page 38: VIGC Academy
Page 39: VIGC Academy
Page 40: VIGC Academy

TRUST THE PROCESS

Page 41: VIGC Academy

VALUE PROPOSITION CANVAS CRITICAL SUCCESS FACTORS

1.  Value Proposition: Match business goals with

user needs

2.  Product/Service: UX comes 1st, technology &

features 2nd

3.  Customers: use a product/service model

canvas

Page 42: VIGC Academy

UX framework

CUSTOMER JOURNEY DESIGN VISION

VALUE PROPOSITION CUSTOMER INSIGHT MAP

Page 43: VIGC Academy

Activities &

Tasks

VALUE PROPOSITION

Technology &

Location

Behavior &

Emotion

ROLES

Customer insight map

Customer

Experience

Data &

Information

Page 44: VIGC Academy

Activities &

Tasks

VALUE PROPOSITION

Technology &

Location

Behavior &

Emotion

ROLES

Customer insight map

Customer

Experience

Data &

Information

Page 45: VIGC Academy

Silicon Valley’s Youth Problem

Page 46: VIGC Academy

http://bit.ly/1LZHgfA

Page 47: VIGC Academy
Page 48: VIGC Academy

Service safari

Page 49: VIGC Academy
Page 50: VIGC Academy
Page 51: VIGC Academy
Page 52: VIGC Academy

Activities &

Tasks

VALUE PROPOSITION

Technology &

Location

Behavior &

Emotion

ROLES

Customer insight map

Customer

Experience

Data &

Information

Page 53: VIGC Academy

No?

Then it’s time to

GOOB

Do you have sufficient answers?

Page 54: VIGC Academy

Let's get out of this building…

Page 55: VIGC Academy

…and enter into the real world

Page 56: VIGC Academy

Meet customers

Page 57: VIGC Academy
Page 58: VIGC Academy

Do card sortings

Page 59: VIGC Academy
Page 60: VIGC Academy

CUSTOMER INSIGHT MAP CRITICAL SUCCESS FACTORS

1.  Stay (or become) extremely well-informed

about what is happening in the world

2.  Go on safari

3.  GOOB

Page 61: VIGC Academy

UX framework

CUSTOMER JOURNEY DESIGN VISION

VALUE PROPOSITION CUSTOMER INSIGHT MAP

Page 62: VIGC Academy

Customer journey

EXPERIENCE MAP

SERVICE BLUEPRINT

Page 63: VIGC Academy
Page 64: VIGC Academy
Page 65: VIGC Academy
Page 66: VIGC Academy

http://bit.ly/1NLh2bZ

Page 67: VIGC Academy
Page 68: VIGC Academy
Page 69: VIGC Academy
Page 70: VIGC Academy

http://bit.ly/1RmSB68

Page 71: VIGC Academy
Page 72: VIGC Academy

Service blueprint

Page 73: VIGC Academy
Page 74: VIGC Academy
Page 75: VIGC Academy
Page 76: VIGC Academy
Page 77: VIGC Academy
Page 78: VIGC Academy
Page 79: VIGC Academy
Page 80: VIGC Academy
Page 81: VIGC Academy

CUSTOMER JOURNEY CRITICAL SUCCESS FACTORS

1.  Try to anticipate on what will happen, every

step of the way

2.  Create an experience map and a service

blueprint

Page 82: VIGC Academy
Page 83: VIGC Academy

UX framework

CUSTOMER JOURNEY DESIGN VISION

VALUE PROPOSITION CUSTOMER INSIGHT MAP

Page 84: VIGC Academy

h"p://www.higroup.com/wall/do-not-copy-giants

Page 85: VIGC Academy

Design vision

USABILITY PRINCIPLES

DESIGN DESIGN PRINCIPLES

Page 86: VIGC Academy

BASED ON HOW PEOPLE

Feel

Think

Hear See

Interact Behave

Usability principles

Page 87: VIGC Academy

Usability principles

Usability principles

Design theory UX research Project evidence

Page 88: VIGC Academy

Scientific foundation for design decisions and interaction design principles

The psychology of design how people see, read, remember, think, focus, interact, feel and decide

Design theory

Heuristic evaluation

Usability goals learnability, efficiency, memorability, errors and satisfaction

Design principles discoverability, feedback, affordances & signifiers, mapping and conceptual models

Page 89: VIGC Academy

Dr. Susan Weinschenk •  Behavioral psychologist who has been working

in the field of design and user experience •  ‘The Brain Lady’, who applies research on brain

science to predict, understand and explains what motivates people and how they behave

Page 90: VIGC Academy

Dr. Jakob ‘we know because we’ve seen it happen’ Nielsen •  Established the "discount usability engineering"

movement for fast and cheap improvements of user interfaces

•  Invented several usability methods, including heuristic evaluation

•  Creator of Nielsen’s Alertbox, over 12 million page views per year

Widely regarded for his expertise in internet & intranet design.

Page 91: VIGC Academy

Dr. Donald Norman •  Director of The Design Lab, University of California, San

Diego •  Co-founder & consultant at Nielsen Norman Group

Widely regarded for his expertise in the fields of design, usability engineering and cognitive science.

Page 92: VIGC Academy
Page 93: VIGC Academy
Page 94: VIGC Academy
Page 95: VIGC Academy
Page 96: VIGC Academy
Page 97: VIGC Academy
Page 98: VIGC Academy

B = MAT Dr. B.J. Fogg, Director of the Persuasive Technology Lab at Stanford University

•  In human speak: when you want a certain behavior from your customer (buying things), you need:

1.  to have something that motivates him (attractive things he wants) 2.  give him the ability to perform that action (a website) 3.  provide a trigger that will entice him to take action (a voucher)

•  Usability is an essential ingredient of the formula, in particular of the element ability. Ability without usability is a recipe for failure.

http://behaviormodel.org

•  ‘A behavior (B) will occur when motivation (M), ability (A) and a trigger (T) are present at the same time and in sufficient degrees.’

Page 99: VIGC Academy
Page 100: VIGC Academy

UX research Examples, practices, inspiration, connecting dots,…

Page 101: VIGC Academy

h"ps://goo.gl/JADBMw

Page 102: VIGC Academy

h"ps://goo.gl/13sXo3

Page 103: VIGC Academy

•  Not recognizable as such •  “Help, they’re moving around” → auto-forwarding •  Difficult to interact with

Source: Usability Geek - http://bit.ly/YNzTR1

CAROUSEL FAILURES

Page 104: VIGC Academy
Page 105: VIGC Academy
Page 106: VIGC Academy
Page 107: VIGC Academy
Page 108: VIGC Academy
Page 109: VIGC Academy
Page 110: VIGC Academy
Page 111: VIGC Academy
Page 112: VIGC Academy
Page 113: VIGC Academy
Page 114: VIGC Academy

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.  Be careful with auto-forward 5.  Present in a creative & useful way

Source: Nielsen Norman Group - http://bit.ly/1ljtqav

CAROUSEL SUCCESS

Page 115: VIGC Academy

•  Complex layout •  Insufficient product information •  Tiny product images •  Absence of product videos •  Poor customer service pages

Source: Usability Geek - http://bit.ly/YNzTR1

PRODUCT PAGE FAILURES

Page 116: VIGC Academy
Page 117: VIGC Academy
Page 118: VIGC Academy
Page 119: VIGC Academy
Page 120: VIGC Academy
Page 121: VIGC Academy
Page 122: VIGC Academy
Page 123: VIGC Academy
Page 124: VIGC Academy
Page 125: VIGC Academy
Page 126: VIGC Academy
Page 127: VIGC Academy
Page 128: VIGC Academy
Page 129: VIGC Academy
Page 130: VIGC Academy
Page 131: VIGC Academy
Page 132: VIGC Academy
Page 133: VIGC Academy

“On the homepage business can do what they like. But in the funnel, we’re calling the shots.” WillemWijnen–ChiefMarke1ng&E-commerceOfficeratTheS1ng

Page 134: VIGC Academy
Page 135: VIGC Academy

1.  a recognizable layout: people have learned to use product pages on other websites, not on yours

2.  elaborate product information: this is the only place on a website where you can unleash your inner writer – with moderation

3.  very large product images: in a physical store you don’t decide on the quality of a product from 2 meters away either, do you?

A GOOD PRODUCT PAGE

Page 136: VIGC Academy

4.  product videos: optional today, elementary in the near future

5.  easy accessible customer support: easy to find, just like you expect from real-life shop assistants

6.  a clear and simple call-to-action (‘add to bag’): how long are you willing to search for the cash register in a bricks-and-mortar store?

A GOOD PRODUCT PAGE

Page 137: VIGC Academy

Project evidence Experience from projects

Page 138: VIGC Academy

1.  People are motivated by mastery, progress & control

•  People love getting things done. It makes them feel they’re doing something useful.

•  People love it when they can act autonomously. It gives them the feeling that they’re smart and powerful.

•  People love choice. If you give them choice, they feel they're are in control - which they aren’t.

Usability principles

Page 139: VIGC Academy

2.  People believe that things that are close together belong together

•  If two items are close to each other, people assume they belong together.

Usability principles

Page 140: VIGC Academy

3.  People search for cues that tell them what to do

•  Modern, flat design trends have made this a lot worse.

•  You’ll see people start helicoptering and hovering when they don’t get enough cues.

•  On touch, they get completely lost.

Usability principles

Page 141: VIGC Academy

4.  People scan screens based on past experiences and expectations

•  People are lazy by nature. If no effort is required, no effort will be done.

•  Look around and translate good experiences in your design.

•  In the mind of a user, a website is a simple thing: •  a logo •  primary navigation •  a search box •  utilities •  content •  (that’s it)

Usability principles

Page 142: VIGC Academy
Page 143: VIGC Academy
Page 144: VIGC Academy

Design vision

USABILITY PRINCIPLES

DESIGN DESIGN PRINCIPLES

Page 145: VIGC Academy

1 2

3

Design principles

Principle

Principle

Principle

DESIGN

Page 146: VIGC Academy

Usability principles Design principles 1.  People are motivated by

mastery, progress and control 1.  Put the user in control

2.  People believe things that are close together belong together

2.  Make it simple and clear

3.  People search for cues that tell them what to do

3.  Don’t make me think

4.  People scan screens based on previous experiences

4.  Use common patterns

Page 147: VIGC Academy

1

2

4

Design principles

Put the user in control

Use common patterns

DESIGN

3 Make it simple

and clear Don’t make me

think

Page 148: VIGC Academy
Page 149: VIGC Academy

PEOPLE ARE MOTIVATED BY MASTERY, PROGRESS & CONTROL

Page 150: VIGC Academy

PEOPLE ARE MOTIVATED BY MASTERY, PROGRESS & CONTROL

Page 151: VIGC Academy
Page 152: VIGC Academy

PEOPLE SEARCH FOR CUES THAT TELL THEM WHAT TO DO

Page 153: VIGC Academy

PEOPLE SEARCH FOR CUES THAT TELL THEM WHAT TO DO

Page 154: VIGC Academy

PEOPLE SEARCH FOR CUES THAT TELL THEM WHAT TO DO

Page 155: VIGC Academy

DESIGN VISION CRITICAL SUCCESS FACTORS

1.  Don’t start with sketching, unless you’re building

something really, really simple & straightforward 2.  Familiarize yourself with design theory, UX

research and project evidence 3.  Use usability & design principles to drive the

design process

Page 156: VIGC Academy

How to test

Page 157: VIGC Academy

Designing = visualising assumptions

Assumptions need to be investigated whether they are true (or not)

Testing ≈ Lean UX principle

Page 158: VIGC Academy

How to validate?

Quantitative tests Qualitative tests

What?

Prove

Statistically significant

Many users

Minimal interaction – A/B testing

Why?

Improve

What needs fixing

Few users

Interactive observation – live testing

Page 159: VIGC Academy

https://vwo.com/ab-testing/

A/B testing – what is it?

Page 160: VIGC Academy

https://vwo.com/ab-testing/

A/B testing – what can you test?

Page 161: VIGC Academy
Page 162: VIGC Academy
Page 163: VIGC Academy
Page 164: VIGC Academy
Page 165: VIGC Academy
Page 166: VIGC Academy

A/B TESTING CRITICAL SUCCESS FACTORS

1.  Create well grounded UX-hypotheses

2.  Focus on what drives conversion (home page,

landing page, product page, checkout, CtA’s,

banners, headlines,…)

3.  Make it statistically significant (calculators)

4.  Your A/B test must not kill UX

5.  Don’t use it as an excuse to stop ‘GOOBing’

Page 167: VIGC Academy

USERS

Feel

Think

Hear See

Interact

Behave

Live testing

Page 168: VIGC Academy

Live testing

•  With real representative users, in the user’s habitat •  One-on-one •  Using task-oriented test scripts •  Via think aloud method

Page 169: VIGC Academy

When to test?

Page 170: VIGC Academy

How much testing?

5 = 80% 1 > 0

Page 171: VIGC Academy

Cold shower, anyone?

Page 172: VIGC Academy

Always keep in mind that…

You are NOT your average user

•  Neither is your developer •  Neither is any other member of your team

(or the company)

Test with REAL users

Page 173: VIGC Academy

“In my whole life, I have known no wise people (over a broad subject matter area) who didn't read all the time -- none, zero.” Charles Thomas Munger - American business magnate, lawyer, investor, and philanthropist.

Page 174: VIGC Academy
Page 175: VIGC Academy

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 Group [email protected]

Thank you and good luck!