[That Conference 2018] Lost in the Woods: Tackling Usability as a Non-UXer

30958b9299cfc3e606a1f2b559add92f?s=47 Rachel Krause
August 06, 2018

[That Conference 2018] Lost in the Woods: Tackling Usability as a Non-UXer

Users are expecting more from our applications than ever before. With the variety of technology at our fingertips, we're able to create robust interfaces that satisfy multiple business needs. But in our rush to cram all of our work into a release, are we sacrificing usability?

In this session, we'll discuss UX principles that will make your applications more user-friendly. In my years as a UX professional, I've run into the same problems over and over that have relatively easy fixes. We'll talk through real-life examples and you'll leave with a UX checklist covering multiple topics, including:

Designing for humans
Complex workflows
Maintaining consistency
Accessibility

And more!

Whether you're on a development team with little to no UX guidance, flying solo, or just want to develop a more user-centered mindset, you'll learn how easy it can be to create usable products.

30958b9299cfc3e606a1f2b559add92f?s=128

Rachel Krause

August 06, 2018
Tweet

Transcript

  1. None
  2. None
  3. None
  4. None
  5. Hey! I’m Rachel @rachelkrau | #thatconference rachelkrau.com/speaking

  6. None
  7. None
  8. None
  9. None
  10. None
  11. Usability goes beyond UI design

  12. JAKOB NIELSEN’S USABILITY COMPONENTS Learnability Efficiency Memorability Errors Satisfaction https://www.nngroup.com/articles/usability-101-introduction-to-usability/

  13. LEARNABILITY How easy is it for users to accomplish basic

    tasks the first time they encounter the design?
  14. EFFICIENCY Once users have learned the design, how quickly can

    they perform the tasks?
  15. MEMORABILITY When users return to the design after a period

    of not using it, how easily can they reestablish proficiency?
  16. ERRORS How many errors do users make, how severe are

    these errors, and how easily can they recover from these errors?
  17. SATISFACTION How pleasant is it to use the design?

  18. JAKOB NIELSEN’S USABILITY COMPONENTS Learnability Efficiency Memorability Errors Satisfaction

  19. 4 RULES Design for humans Simplify workflows Maintain consistency Be

    accessible
  20. None
  21. Design for Humans HUMAN-READABLE ERROR MESSAGES Should be actionable How

    does your user prevent it from happening again? Don’t blame the user
  22. https://uxplanet.org/how-to-write-good-error-messages-858e4551cd4

  23. None
  24. Cannot Rename A file with that name already exists. Please

    specify a unique name. OK Cannot Rename Specify another name. OK https://uxplanet.org/how-to-write-good-error-messages-858e4551cd4
  25. Design for Humans CHUNKING INFORMATION Only 16% of users read

    text word-by-word Highlighted words, bulleted lists, white space Use meaningful subheadings https://www.nngroup.com/articles/how-users-read-on-the-web/
  26. Applications in Design The influential writer Steve Krug is the

    one who popularized the application of cognitive load theory to web design. Among the many valuable lessons in the book, here are some of our favorites: • Every page should be self-explanatory. • Users tend to “satisfice” — that is, take the first or easiest solution to their problem, instead of the best. Working Memory What if every time you wanted to open the fridge, you had to answer a Sphinxian riddle. The influential writer Steve Krug is the one who popularized the application of cognitive load theory to web design. Among the many valuable lessons in the book, here are some of our favorites: Every page should be self-explanatory. Users tend to “satisfice” — that is, take the first or easiest solution to their problem, instead of the best. What if every time you wanted to open the fridge, you had to answer a Sphinxian riddle. It would get old after a while, right? But according to cognitive load theory, that’s the same kind of frustration users feel with poor UX design. https://www.smashingmagazine.com/2016/09/reducing-cognitive-overload-for-a-better-user-experience/
  27. Design for Humans OFFLOAD WORK FROM USERS Can the system

    do it for them? Math: complex and simple Dates, phone numbers, email addresses https://www.smashingmagazine.com/2018/03/ux-contact-forms- essentials-conversions/
  28. None
  29. None
  30. Design for Humans PERSONAS Visual representation of a large group

    of users You are not your user Challenge conflicting business requirements
  31. NAME & SKETCH BIO & TRAITS GOALS FRUSTRATIONS

  32. Simplify Workflows

  33. Simplify Workflows PROVIDE CONTEXT How far along are they in

    the process? Breadcrumbs, wizard navigation Applies to error messages too
  34. Name Company City State ZIP Code Rachel Krause Nielsen Norman

    Group Milwaukee WI 531277 Please enter a valid ZIP code. Name Company City State ZIP Code Rachel Krause Nielsen Norman Group Milwaukee WI 531277 Please correct the errors.
  35. Simplify Workflows FORM FIELDS Tell users constraints ahead of time

    Uploads, phone numbers, passwords More work and frustration when they get it wrong
  36. None
  37. Simplify Workflows JOURNEY MAPS Understand workflows Identify pain points and

    opportunities for improvement
  38. PERSONA & SCENARIO USER STEPS NEEDS, ACTIVITIES, & EXPECTATIONS USER’S

    EMOTIONAL STATE OPPORTUNITIES FOR IMPROVEMENT
  39. None
  40. Maintain Consistency COPY & ERROR MESSAGES Pick a voice and

    stick with it Grammar, no grammar: pick one Modal, popover, toast message
  41. [Message Title] [What happened.] [How to fix it.] OK

  42. Invalid Email Address The email address field is required. Please

    enter a valid email address. OK
  43. Maintain Consistency BUTTONS & LINKS What constitutes a button vs.

    a link? Don’t switch up placement of buttons Links should stand out from body text
  44. Email Address Password Log In Register Forgot Password Email Address

    Password Log In Register Forgot Password
  45. Newsletter Signup Email Address Sign Up Cancel

  46. Maintain Consistency COLOR PALETTE Use contrasting colors for links within

    body text Keep the same color for similar actions
  47. Applications in Design The influential writer Steve Krug is the

    one who popularized the application of cognitive load theory to web design. Among the many valuable lessons in the book, here are some of our favorites: • Every page should be self-explanatory. • Users tend to “satisfice” — that is, take the first or easiest solution to their problem, instead of the best. Working Memory What if every time you wanted to open the fridge, you had to answer a Sphinxian riddle.
  48. Maintain Consistency STYLE GUIDE / DESIGN SYSTEM Library of design

    elements Living and updated consistently Owned by the entire team
  49. None
  50. None
  51. Be Accessible BENEFIT TO ALL USERS 15% of the population

    lives with some kind of disability Benefits users and business in the long run http://www.who.int/en/news-room/fact-sheets/detail/disability-and-health
  52. Be Accessible PAGE STRUCTURE Test your website without CSS to

    examine structure Use your website with only a keyboard Use a screen reader https://blog.prototypr.io/developers-get-started-with-web-accessibility- 91bd67dea777
  53. None
  54. None
  55. None
  56. None
  57. None
  58. Be Accessible COLOR CONTRAST More attention to most important elements

    and workflows Use grays sparingly
  59. None
  60. Be Accessible COLOR BLINDNESS Check site and apps to identify

    problem areas
  61. https://www.color- blindness.com/coblis-color- blindness-simulator/

  62. CV Simulator https://itunes.apple.com/us/a pp/chromatic-vision- simulator/id389310222?mt=8

  63. Be Accessible USABILITY TESTING Use the features you create Test

    with users whenever possible
  64. 4 RULES Design for humans Simplify workflows Maintain consistency Be

    accessible
  65. None
  66. WORKING WITH UX Communicate early and often Contribute to the

    design process Know who your users are
  67. WORKING WITHOUT UX Sketch out ideas Proofread and peer review

    Use your software like your users would
  68. WRAPPING UP Usability is the responsibility of everyone Lean on

    UX professionals for help Create a better web for everyone
  69. None
  70. THANK YOU! @rachelkrau | #thatconference rachelkrau.com/speaking