Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Usability Testing - Code Craft

Usability Testing - Code Craft

Usability Testing - UX for Developers

Code Craft
December 16, 2017

Chayaporn Tantisukarom

December 16, 2017

More Decks by Chayaporn Tantisukarom

Other Decks in Design


  1. Usability Testing UX for Developers Code Craft
 16 December 2017

  2. Chayaporn Tantisukarom (Near) - Software Designer at HUBBA Thailand -

    Former Senior Software Engineer at Gosoft
  3. None
  4. None
  5. So, What bring Developer become a UX ?

  6. None
  7. Don’t exist

  8. None
  9. What about UX?

  10. User + Experience

  11. None
  12. Look Wealth Comfortable Style This is Marketing

  13. Look Wealth Comfortable Style This is Marketing Habit Satisfaction Time

    Emotion This is User Experience
  14. UX is a study of User encompasses all aspects of

    the end-user's interaction with the company, its services, and its products.
  15. None
  16. None
  17. None
  18. You build you app in 10 months User can delete

    your app in just 10 seconds
  19. None
  20. None
  21. Features from UX

  22. None
  23. None
  24. None
  25. None
  26. UI Is What UX Is Why and How

  27. Usability ≠ UX How user interact with product Study of

  28. Usability Testing

  29. None
  30. None
  31. None
  32. Softwares aren’t cheap Why we don’t have prototype?

  33. What we test • Usability of specific tasks or features

    • How long users can complete the task • User’s satisfaction
  34. Why we test • Reduce cost, you don’t need complete

    product to test • Find out major problems in early stage of development
  35. You don’t need to hire UX Designer to do this

    for you You can do this!
  36. Step 1 : Test yourself Heuristics Evaluation

  37. Jakob Nielsen

  38. Usability Goals • Learnability • Efficiency • Memorability • Low

    Error Rate • Satisfaction
  39. None
  40. Visibility of system status • The system should always keep

    users informed about what is going on, through appropriate feedback within reasonable time.
  41. None
  42. None
  43. 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.
  44. None
  45. 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.
  46. None
  47. Consistency and standards • Users should not have to wonder

    whether different words, situations, or actions mean the same thing. Follow platform conventions.
  48. None
  49. Error prevention • Even better than good error messages is

    a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.
  50. None
  51. None
  52. 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.
  53. None
  54. None
  55. None
  56. None
  57. Flexibility and efficiency 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.
  58. None
  59. None
  60. None
  61. 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.
  62. None
  63. None
  64. 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.
  65. None
  66. None
  67. None
  68. None
  69. 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.
  70. None
  71. None
  72. TEST

  73. None
  74. None
  75. None
  76. None
  77. None
  78. None
  79. 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

  80. Step 2 : Test your friends Guerrilla Testing

  81. Where to do • Coffee shop, some strangers near your

    office • Your target group area • Your friends or family who didn’t know anything about your product
  82. What to do • Overview your product • Complete some

    major tasks • Find errors and fix them as quickly as possible.
  83. How to do Guerrilla Testing • Define 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)
  84. 15 minutes each

  85. Product? Tasks? You?

  86. None
  87. None
  88. Product - ready Tasks? You?

  89. Create a photo album and upload images in it

  90. Create photo album with your vacation photos

  91. You just finished a wonderful trip in Tokyo with ton

    of photos. You want to share your experiences in Facebook
  92. You just finished 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
  93. TEST

  94. (Movie ticket booking) Buy movie tickets

  95. Find movie tickets for group of your friends on this

  96. (Facebook) Answer ‘Did you know?’ questions

  97. You recently accepted a lot of friends requests and want

    them to know who you are
  98. None
  99. 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
  100. Product - ready Tasks - ready You?

  101. 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
  102. None
  103. What we found • Major usability issues • What they

    do and don’t understand • Users can’t complete the task that developer did
  104. What’s next? • 3-5 common mistake is a major problem

    • Fix it • Test it again
  105. Step 3 : Test your users Usability Testing

  106. identify any usability problems, collect qualitative and quantitative data and

    determine the participant's satisfaction with the product.
  107. Before we start • Product prototype • Recruit users •

    Hypothesis and Tasks • Define metrics • Prepare room and video recording • Think-aloud method • Rewards • Conductor and observers
  108. Product prototype

  109. None
  110. None
  111. Recruit Users

  112. Hypothesis and Tasks User can share their experiences via photo

  113. Hypothesis and Tasks You just finished a wonderful trip in

    Tokyo with ton of photos. You want to share your experiences in Facebook
  114. Define Metrics • Success rate • Time on task •

    Error rate • Satisfaction
  115. Usability Goals • Learnability • Efficiency • Memorability • Low

    Error Rate • Satisfaction
  116. None
  117. None
  118. None
  119. None
  120. Room and video recording • One-way mirror room • Just

    typical room, using Facebook LIVE instead • Video and sound recording • Screen recording • Remotely
  121. None
  122. 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.
  123. None
  124. None
  125. TEST

  126. Explain how you get here

  127. Imagine you are searching in this site, looking for best

    event to join with your friends this weekend
  128. None
  129. None
  130. Think-aloud isn’t always required depends on metrics

  131. Rewards depends

  132. 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?’
  133. Observer • Shut up! and take note • See users

    feels, interacts, questions, eyes, motions
  134. We are ready ! • Usability Testing takes full day

    • 3-5 users, 30 minutes each • Turn off your phone, start record video and let’s do the test
  135. None
  136. – ลูกค้า “ขอเข้าไปฟังด้วยได้มั้ย”

  137. Tips • Introduce yourself and your team • Ask general

    question first • Don’t distract users • Every one should take note • Don’t rush users • Comfortable atmosphere is really hard
  138. Don’t wait until your product is completed It’s too late

    Test today
  139. Usability Testing Result Quantitative Data • Usability metrics Qualitative Data

    • Observations note • Common problems experience • Comment / Recommendation / Suggestion • Keyword
  140. System Usability Scale

  141. What’s next? • First test always full of sh*t •

    Improve your design and test again with same metrics and tasks • Iterate
  142. Usability is an iteration process 
 You can’t complete it

    in just one go
  143. Recap • Heuristics evaluation • Guerrilla testing • Turn task

    into scenario • Usability testing • Usability metrics • Think-aloud
  144. Resources • https://www.usertesting.com/ • https://fivesecondtest.com/ • http://www.gv.com/sprint/ • https://www.nngroup.com/

  145. Thank you