ux and usability it's no picnic

65
Behind the buzzwords UX and Usability VOXXED DAYS ZURICH

Upload: myriam-jessier

Post on 14-Apr-2017

512 views

Category:

Technology


2 download

TRANSCRIPT

Page 1: Ux and usability   it's no PICNIC

Behind the buzzwords

UX and Usability

VOXXED DAYS ZURICH

Page 2: Ux and usability   it's no PICNIC

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

Because @g33konaut

2

Why am I speaking today?

Page 3: Ux and usability   it's no PICNIC

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

Defining User Experience

3

Page 4: Ux and usability   it's no PICNIC

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

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

4

Page 5: Ux and usability   it's no PICNIC

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

Page 6: Ux and usability   it's no PICNIC

EffectivenessEfficiency

LearnabilityError prevention

Memorability

UX is broad and holistic. Usability is narrow and focused

6

Usability

SatisfactionEnjoyment

PleasureFun

Value

User Experience

Page 7: Ux and usability   it's no PICNIC

How some of us see usability

7

Page 8: Ux and usability   it's no PICNIC

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

Page 9: Ux and usability   it's no PICNIC

USABILITY PYRAMID

9

Efficient

Effective

Learnable

Useful

Memorable

Delightful

Desirable

Page 10: Ux and usability   it's no PICNIC

The Myth of the Average User

10

37%

22%27%

14%

Page 11: Ux and usability   it's no PICNIC

Experience is personal and subjective

11

Page 12: Ux and usability   it's no PICNIC

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

12

Page 13: Ux and usability   it's no PICNIC

13

Loves Harry PotterHates Twilight

Plays with his socks during church

Prefers Google over Yahoo

Warning : average user may not reflect reality

Page 14: Ux and usability   it's no PICNIC

A game that can be played in large meetings.

BULLSHIT BINGO

14

Page 15: Ux and usability   it's no PICNIC

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

Page 16: Ux and usability   it's no PICNIC

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

User Experience Design

16

Page 17: Ux and usability   it's no PICNIC

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

Page 18: Ux and usability   it's no PICNIC

UX is a specific component within CX.

CX encompasses the experience of your entire brand.

CX and UX are not interchangeable! 

18

Page 19: Ux and usability   it's no PICNIC

UI is what your users interact with,

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

UI and UX are not interchangeable!

19

Page 20: Ux and usability   it's no PICNIC

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

Interaction Design

20

Page 21: Ux and usability   it's no PICNIC

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

pleasant to interact with.

21

Page 23: Ux and usability   it's no PICNIC

USABILITY BEST PRACTICES

Page 24: Ux and usability   it's no PICNIC

24

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

4 DOCUMENTS YOU NEED

Page 25: Ux and usability   it's no PICNIC

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

Personas: fictional personalities based on research

25

Page 26: Ux and usability   it's no PICNIC

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

Page 27: Ux and usability   it's no PICNIC

Behavior Motivation Environment External Factors

User scenarios

User factors to consider when creating a scenario

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

Page 28: Ux and usability   it's no PICNIC

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/

Page 29: Ux and usability   it's no PICNIC

PAY ATTENTION TO MY TALKING!

10 USABILITY GUIDELINES FOR WEB APPS

29

Page 30: Ux and usability   it's no PICNIC

Have a consistent and standardized UI

30

Page 31: Ux and usability   it's no PICNIC

Guide the user

31

Page 32: Ux and usability   it's no PICNIC

Make the CTA interactive objects obvious

32

Page 33: Ux and usability   it's no PICNIC

Give feedback on the user interacting and progressing

33

Page 34: Ux and usability   it's no PICNIC

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

34

Page 35: Ux and usability   it's no PICNIC

Always have default values in fields and forms

35

Page 36: Ux and usability   it's no PICNIC

Explain how the inputed information will be used

36

Page 37: Ux and usability   it's no PICNIC

Don’t offer any reset or mass delete buttons

37

Page 38: Ux and usability   it's no PICNIC

Have clear and explanatory error and success messages

38

Page 39: Ux and usability   it's no PICNIC

Include a clear and visual hierarchy and navigation

39

Page 40: Ux and usability   it's no PICNIC

10 USABILITY GUIDELINES FOR MOBILE APPS

40

Page 41: Ux and usability   it's no PICNIC

Make sure it works on all phones

41

Page 42: Ux and usability   it's no PICNIC

Give incentives for sharing and purchase

42

Page 43: Ux and usability   it's no PICNIC

Keep usability and conversion in mind

43

Page 44: Ux and usability   it's no PICNIC

Navigation should be easy

44

Page 45: Ux and usability   it's no PICNIC

Offer relevant content

45

Page 46: Ux and usability   it's no PICNIC

Offer relevant content

46

Page 47: Ux and usability   it's no PICNIC

Go for great aesthetics

47

Page 48: Ux and usability   it's no PICNIC

Offer relevant content

48

Page 49: Ux and usability   it's no PICNIC

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

49

Page 50: Ux and usability   it's no PICNIC

Auto-fill customer data

50

Page 51: Ux and usability   it's no PICNIC

Design for quick movement

51

Page 52: Ux and usability   it's no PICNIC

Do usability testing through video

52

Page 53: Ux and usability   it's no PICNIC

6 WEB APPLICATION DEVELOPMENT MISTAKES

53

Page 54: Ux and usability   it's no PICNIC

Inconsistent approach to common functions

54

Page 55: Ux and usability   it's no PICNIC

Ambiguous error messages

55

Page 56: Ux and usability   it's no PICNIC

Giving users too many competing options

56

Page 57: Ux and usability   it's no PICNIC

Having a lengthy registration process

57

Page 58: Ux and usability   it's no PICNIC

Small clickable areas on mobile

58

Page 59: Ux and usability   it's no PICNIC

Blaming negative feedback on “fear of change”

59

Page 60: Ux and usability   it's no PICNIC

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

What about digital analytics?

Page 61: Ux and usability   it's no PICNIC

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

Page 62: Ux and usability   it's no PICNIC

« Usability testing is the killing field of cherished notions»

- David Orr

62

Page 63: Ux and usability   it's no PICNIC

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.

Page 64: Ux and usability   it's no PICNIC

Twitter: @myriamjessier

Page 65: Ux and usability   it's no PICNIC

"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