Usability Testing - Code Craft

Slide 1

Slide 1 text

Usability Testing UX for Developers Code Craft  16 December 2017

Slide 2

Slide 2 text

Chayaporn Tantisukarom (Near) - Software Designer at HUBBA Thailand - Former Senior Software Engineer at Gosoft

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

So, What bring Developer become a UX ?

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Don’t exist

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

What about UX?

Slide 10

Slide 10 text

User + Experience

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Look Wealth Comfortable Style This is Marketing

Slide 13

Slide 13 text

Look Wealth Comfortable Style This is Marketing Habit Satisfaction Time Emotion This is User Experience

Slide 14

Slide 14 text

UX is a study of User encompasses all aspects of the end-user's interaction with the company, its services, and its products.

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

You build you app in 10 months User can delete your app in just 10 seconds

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Features from UX

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

UI Is What UX Is Why and How

Slide 27

Slide 27 text

Usability ≠ UX How user interact with product Study of user

Slide 28

Slide 28 text

Usability Testing

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

Softwares aren’t cheap Why we don’t have prototype?

Slide 33

Slide 33 text

What we test • Usability of speciﬁc tasks or features • How long users can complete the task • User’s satisfaction

Slide 34

Slide 34 text

Why we test • Reduce cost, you don’t need complete product to test • Find out major problems in early stage of development

Slide 35

Slide 35 text

You don’t need to hire UX Designer to do this for you You can do this!

Slide 36

Slide 36 text

Step 1 : Test yourself Heuristics Evaluation

Slide 37

Slide 37 text

Jakob Nielsen

Slide 38

Slide 38 text

Usability Goals • Learnability • Eﬃciency • Memorability • Low Error Rate • Satisfaction

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

Visibility of system status • The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

Match between system and real world • The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

User control and freedom • Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

Consistency and standards • Users should not have to wonder whether diﬀerent words, situations, or actions mean the same thing. Follow platform conventions.

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

Error prevention • Even better than good error messages is a careful design which prevents a problem from occurring in the ﬁrst place. Either eliminate error-prone conditions or check for them and present users with a conﬁrmation option before they commit to the action.

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

Recognition rather than recall • Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

Flexibility and efﬁciency of use • Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

Aesthetic and minimalist design • Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

Help users recognize, diagnose, and recover from errors • Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

Help and documentation • Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

TEST

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

Pros & Cons Pros • Quick feedback  • Early stage of design  • Using with other Usability Testing  Cons • Require knowledge and experience  • Expensive for experts  • Few identify major issues 

Slide 80

Slide 80 text

Step 2 : Test your friends Guerrilla Testing

Slide 81

Slide 81 text

Where to do • Coﬀee shop, some strangers near your oﬃce • Your target group area • Your friends or family who didn’t know anything about your product

Slide 82

Slide 82 text

What to do • Overview your product • Complete some major tasks • Find errors and ﬁx them as quickly as possible.

Slide 83

Slide 83 text

How to do Guerrilla Testing • Deﬁne tasks and prioritized • Approach a person • Ask their availability for testing the product • Ask them to do some tasks • Observe their interaction • Ask about their experience, feedback • Give them some reward (if any)

Slide 84

Slide 84 text

15 minutes each

Slide 85

Slide 85 text

Product? Tasks? You?

Slide 86

Slide 86 text

No content

Slide 87

Slide 87 text

No content

Slide 88

Slide 88 text

Product - ready Tasks? You?

Slide 89

Slide 89 text

Create a photo album and upload images in it

Slide 90

Slide 90 text

Create photo album with your vacation photos

Slide 91

Slide 91 text

You just ﬁnished a wonderful trip in Tokyo with ton of photos. You want to share your experiences in Facebook

Slide 92

Slide 92 text

You just ﬁnished a wonderful trip in Tokyo with ton of photos. You want to share your experiences in Facebook Related to users Tell why user do  not what user do

Slide 93

Slide 93 text

TEST

Slide 94

Slide 94 text

(Movie ticket booking) Buy movie tickets

Slide 95

Slide 95 text

Find movie tickets for group of your friends on this weekend

Slide 96

Slide 96 text

(Facebook) Answer ‘Did you know?’ questions

Slide 97

Slide 97 text

You recently accepted a lot of friends requests and want them to know who you are

Slide 98

Slide 98 text

No content

Slide 99

Slide 99 text

Scenarios can be like • You just pass a very hard test and you want to express the feeling to your friends • You currently at home and want to work at HUBBA tomorrow • You want to make an arguments with @realDonaldTrump

Slide 100

Slide 100 text

Product - ready Tasks - ready You?

Slide 101

Slide 101 text

How to test • Simply ask them to do some tasks • Observing their interaction and feedback, try not to hint • Try to remember usability issues and ask them for suggestion • Thank you for participation • Fix it if you can, next person

Slide 102

Slide 102 text

No content

Slide 103

Slide 103 text

What we found • Major usability issues • What they do and don’t understand • Users can’t complete the task that developer did

Slide 104

Slide 104 text

What’s next? • 3-5 common mistake is a major problem • Fix it • Test it again

Slide 105

Slide 105 text

Step 3 : Test your users Usability Testing

Slide 106

Slide 106 text

identify any usability problems, collect qualitative and quantitative data and determine the participant's satisfaction with the product.

Slide 107

Slide 107 text

Before we start • Product prototype • Recruit users • Hypothesis and Tasks • Deﬁne metrics • Prepare room and video recording • Think-aloud method • Rewards • Conductor and observers

Slide 108

Slide 108 text

Product prototype

Slide 109

Slide 109 text

No content

Slide 110

Slide 110 text

No content

Slide 111

Slide 111 text

Recruit Users

Slide 112

Slide 112 text

Hypothesis and Tasks User can share their experiences via photo album

Slide 113

Slide 113 text

Hypothesis and Tasks You just ﬁnished a wonderful trip in Tokyo with ton of photos. You want to share your experiences in Facebook

Slide 114

Slide 114 text

Deﬁne Metrics • Success rate • Time on task • Error rate • Satisfaction

Slide 115

Slide 115 text

Usability Goals • Learnability • Eﬃciency • Memorability • Low Error Rate • Satisfaction

Slide 116

Slide 116 text

No content

Slide 117

Slide 117 text

No content

Slide 118

Slide 118 text

No content

Slide 119

Slide 119 text

No content

Slide 120

Slide 120 text

Room and video recording • One-way mirror room • Just typical room, using Facebook LIVE instead • Video and sound recording • Screen recording • Remotely

Slide 121

Slide 121 text

No content

Slide 122

Slide 122 text

Think-aloud method In a thinking aloud test, you ask test participants to use the system while continuously thinking out loud — that is, simply verbalizing their thoughts as they move through the user interface.

Slide 123

Slide 123 text

No content

Slide 124

Slide 124 text

No content

Slide 125

Slide 125 text

TEST

Slide 126

Slide 126 text

Explain how you get here

Slide 127

Slide 127 text

Imagine you are searching in this site, looking for best event to join with your friends this weekend

Slide 128

Slide 128 text

No content

Slide 129

Slide 129 text

No content

Slide 130

Slide 130 text

Think-aloud isn’t always required depends on metrics

Slide 131

Slide 131 text

Rewards depends

Slide 132

Slide 132 text

Conductor • Friendly-looking, speak slowly • Brief details of your product • ‘Don’t worry, you can’t do anything wrong. If something goes wrong, it my fault’ • Shut up! and let users talk • Don’t take note, just facilitate • Don’t hint, don’t guide, let user fail • ‘What do you think?’

Slide 133

Slide 133 text

Observer • Shut up! and take note • See users feels, interacts, questions, eyes, motions

Slide 134

Slide 134 text

We are ready ! • Usability Testing takes full day • 3-5 users, 30 minutes each • Turn oﬀ your phone, start record video and let’s do the test

Slide 135

Slide 135 text

No content

Slide 136

Slide 136 text

– ลูกค้า “ขอเข้าไปฟังด้วยได้มั้ย”

Slide 137

Slide 137 text

Tips • Introduce yourself and your team • Ask general question ﬁrst • Don’t distract users • Every one should take note • Don’t rush users • Comfortable atmosphere is really hard

Slide 138

Slide 138 text

Don’t wait until your product is completed It’s too late Test today

Slide 139

Slide 139 text

Usability Testing Result Quantitative Data • Usability metrics Qualitative Data • Observations note • Common problems experience • Comment / Recommendation / Suggestion • Keyword

Slide 140

Slide 140 text

System Usability Scale

Slide 141

Slide 141 text

What’s next? • First test always full of sh*t • Improve your design and test again with same metrics and tasks • Iterate

Slide 142

Slide 142 text

Usability is an iteration process   You can’t complete it in just one go

Slide 143

Slide 143 text

Recap • Heuristics evaluation • Guerrilla testing • Turn task into scenario • Usability testing • Usability metrics • Think-aloud

Slide 144

Slide 144 text

Resources • https://www.usertesting.com/ • https://ﬁvesecondtest.com/ • http://www.gv.com/sprint/ • https://www.nngroup.com/

Slide 145

Slide 145 text

Thank you