Behind the buzzwords

UX and Usability

VOXXED DAYS ZURICH

Because « simple user testing » i.e. debugging a design is part of our jobs.

Because @g33konaut

2

Why am I speaking today?

UX is the totality of end-users’ perceptions as they interact with a product or service. - Kuniavsky , 2010

Defining User Experience

3

Increased customer satisfaction Loyalty More time = more money Less resources wasted

Think of your user’s needs as being your product goals

4

1. Functional: works as programmed2. Reliable: is available and accurate3. Usable: can be used without

difficulty4. Convenient: easy to use, works

like I think5. Pleasurable: memorable

experience

User Needs

5

Pleasurable

Convenient

Usable

Functional

Reliable

EffectivenessEfficiency

LearnabilityError prevention

Memorability

UX is broad and holistic. Usability is narrow and focused

6

Usability

SatisfactionEnjoyment

PleasureFun

Value

User Experience

How some of us see usability

7

Krug’s 3 Laws Of Usability

8

Steve Krug ”Don’t

Make Me Think”

Don’t make me

think

Let the

words go!Mindless &

unambiguous clicks

USABILITY PYRAMID

9

Efficient

Effective

Learnable

Useful

Memorable

Delightful

Desirable

The Myth of the Average User

10

37%

22%27%

14%

Experience is personal and subjective

11

Good web design isn’t a matter of figuring out what people like.

12

13

Loves Harry PotterHates Twilight

Plays with his socks during church

Prefers Google over Yahoo

Warning : average user may not reflect reality

A game that can be played in large meetings.

BULLSHIT BINGO

14

Jargon 101: UX, UXD, CX, UI, IxD

15

UX: USER EXPERIENCE

UXD: USER EXPERIENCE DESIGN

CX: CUSTOMER EXPERIENCE

UI: USER INTERFACE

IxD: INTERACTION DESIGN

Get awesome photos on Gratisography

User Experience Design is the process of designing for the all-encompassing, user-focused aspects of any system.

User Experience Design

16

CX is the product of an interaction between an organization and a customer over the duration of their relationship.

17

ATTRACTION

AWARENESS

Get awesome photos on Gratisography

ADVOCACY

CULTIVATION

PURCHASE

DISCOVERY

USE OF SERVICE

UX is a specific component within CX.

CX encompasses the experience of your entire brand.

CX and UX are not interchangeable! 

18

UI is what your users interact with,

UX is how they feel while they’re doing it.

UI and UX are not interchangeable!

19

Interaction Design is about making the connection between a device, its interface and the user.

Interaction Design

20

Interaction Design delivers that almost human element that makes technology enjoyable and

pleasant to interact with.

21

Great image by Jeff Sauros

USABILITY BEST PRACTICES

24

1. Persona2. Empathy Map3. User Scenario4. Customer Journey Map

4 DOCUMENTS YOU NEED

Personas are a placeholder for your ideal user during the design process.

Personas: fictional personalities based on research

25

Step 1: print mapStep 2: ask dumb questionsStep 3: digest notes in post-its as a teamStep 4: go for quantityStep 5: chill out. Get more feedback.Step 6: define your mission

Empathy Map: a tool to organize user’s thoughts & emotions

26

Behavior Motivation Environment External Factors

User scenarios

User factors to consider when creating a scenario

http://designmodo.com/ux-documents/

It combines the user’s personality (persona) with how they’re interacting with your site (user scenario).

Each stage will offer different emotional progressions.

Customer Journey Map: give product context

28http://designmodo.com/ux-documents/

PAY ATTENTION TO MY TALKING!

10 USABILITY GUIDELINES FOR WEB APPS

29

Have a consistent and standardized UI

30

Guide the user

31

Make the CTA interactive objects obvious

32

Give feedback on the user interacting and progressing

33

Never have users repeat anything and keep signup information to a minimum

34

Always have default values in fields and forms

35

Explain how the inputed information will be used

36

Don’t offer any reset or mass delete buttons

37

Have clear and explanatory error and success messages

38

Include a clear and visual hierarchy and navigation

39

10 USABILITY GUIDELINES FOR MOBILE APPS

40

Make sure it works on all phones

41

Give incentives for sharing and purchase

42

Keep usability and conversion in mind

43

Navigation should be easy

44

Offer relevant content

45

Offer relevant content

46

Go for great aesthetics

47

Offer relevant content

48

Give all the information that a customer needs to make a purchase

49

Auto-fill customer data

50

Design for quick movement

51

Do usability testing through video

52

6 WEB APPLICATION DEVELOPMENT MISTAKES

53

Inconsistent approach to common functions

54

Ambiguous error messages

55

Giving users too many competing options

56

Having a lengthy registration process

57

Small clickable areas on mobile

58

Blaming negative feedback on “fear of change”

59

Digital analytics = what people are doing on your site. Usability = why they are doing things on your site.

What about digital analytics?

61

8 Cheap Usability Tools1. Crazy Egg: heat maps2. Optimizely: A/B testing, basic plan is

free3. Five Second Test: capturing first

impressions, free4. Qualaroo: voice of customer5. Usabilia: all in one solution6. Feedback Army: uses Mechanical

Turk to get feedback7. Userfeel: not just for websites in

English8. TrymyUI: usability testing tool

« Usability testing is the killing field of cherished notions»

- David Orr

62

Usability tests are about watching one person at a time try to use something to do typical tasks so you can detect and fix the things that confuse or frustrate them.

Twitter: @myriamjessier

"Ahoy ye landlubbers - get on board of the Usability debate! Scrub your apps and set ye sails for your users. This talk lets you walk the plank for the biggest UX pitfalls and gives you a treasure map of how you can make apps that your users will sail across oceans for"

65