[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.

Transcript

1. View Slide

2. View Slide

3. View Slide

4. View Slide

5. Hey!
   I’m Rachel
   @rachelkrau | #thatconference
   rachelkrau.com/speaking
   

   View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. Usability goes
    beyond UI design
    

    View Slide

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

    View Slide

13. LEARNABILITY
    How easy is it for users to accomplish basic tasks the first
    time they encounter the design?
    

    View Slide

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

    View Slide

15. MEMORABILITY
    When users return to the design after a period of not using it,
    how easily can they reestablish proficiency?
    

    View Slide

16. ERRORS
    How many errors do users make, how severe are these errors,
    and how easily can they recover from these errors?
    

    View Slide

17. SATISFACTION
    How pleasant is it to use the design?
    

    View Slide

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

    View Slide

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

    View Slide

20. View Slide

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
    

    View Slide

22. https://uxplanet.org/how-to-write-good-error-messages-858e4551cd4
    

    View Slide

23. View Slide

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
    

    View Slide

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/
    

    View Slide

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/
    

    View Slide

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/
    

    View Slide

28. View Slide

29. View Slide

30. Design for Humans
    PERSONAS
    Visual representation of a large group of users
    You are not your user
    Challenge conflicting business requirements
    

    View Slide

31. NAME & SKETCH BIO & TRAITS
    GOALS FRUSTRATIONS
    

    View Slide

32. Simplify Workflows
    

    View Slide

33. Simplify Workflows
    PROVIDE CONTEXT
    How far along are they in the process?
    Breadcrumbs, wizard navigation
    Applies to error messages too
    

    View Slide

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.
    

    View Slide

35. Simplify Workflows
    FORM FIELDS
    Tell users constraints ahead of time
    Uploads, phone numbers, passwords
    More work and frustration when they get it wrong
    

    View Slide

36. View Slide

37. Simplify Workflows
    JOURNEY MAPS
    Understand workflows
    Identify pain points and opportunities for improvement
    

    View Slide

38. PERSONA &
    SCENARIO
    USER STEPS
    NEEDS, ACTIVITIES,
    & EXPECTATIONS
    USER’S EMOTIONAL
    STATE
    OPPORTUNITIES FOR
    IMPROVEMENT
    

    View Slide

39. View Slide

40. Maintain Consistency
    COPY & ERROR
    MESSAGES
    Pick a voice and stick with it
    Grammar, no grammar: pick one
    Modal, popover, toast message
    

    View Slide

41. [Message Title]
    [What happened.]
    [How to fix it.]
    OK
    

    View Slide

42. Invalid Email Address
    The email address field is required.
    Please enter a valid email address.
    OK
    

    View Slide

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
    

    View Slide

44. Email Address
    Password
    Log In
    Register
    Forgot Password
    Email Address
    Password
    Log In
    Register
    Forgot Password
    

    View Slide

45. Newsletter Signup
    Email Address
    Sign Up
    Cancel
    

    View Slide

46. Maintain Consistency
    COLOR PALETTE
    Use contrasting colors for links within body text
    Keep the same color for similar actions
    

    View Slide

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.
    

    View Slide

48. Maintain Consistency
    STYLE GUIDE /
    DESIGN SYSTEM
    Library of design elements
    Living and updated consistently
    Owned by the entire team
    

    View Slide

49. View Slide

50. View Slide

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
    

    View Slide

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
    

    View Slide

53. View Slide

54. View Slide

55. View Slide

56. View Slide

57. View Slide

58. Be Accessible
    COLOR CONTRAST
    More attention to most important elements and workflows
    Use grays sparingly
    

    View Slide

59. View Slide

60. Be Accessible
    COLOR BLINDNESS
    Check site and apps to identify problem areas
    

    View Slide

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

    View Slide

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

    View Slide

63. Be Accessible
    USABILITY TESTING
    Use the features you create
    Test with users whenever possible
    

    View Slide

64. 4 RULES
    Design for humans
    Simplify workflows
    Maintain consistency
    Be accessible
    

    View Slide

65. View Slide

66. WORKING WITH UX
    Communicate early and often
    Contribute to the design process
    Know who your users are
    

    View Slide

67. WORKING WITHOUT UX
    Sketch out ideas
    Proofread and peer review
    Use your software like your users would
    

    View Slide

68. WRAPPING UP
    Usability is the responsibility of everyone
    Lean on UX professionals for help
    Create a better web for everyone
    

    View Slide

69. View Slide

70. THANK YOU!
    @rachelkrau | #thatconference
    rachelkrau.com/speaking
    

    View Slide