User Experience: It's for Everyone (2019 edition)

Not sure what user experience (UX) is? (Neither am I). Or whether it matters to you? (It TOTALLY does!) Or why it’s important? (Let’s find out!). I’m not a UX expert, but I don’t think you have to be: we should all be thinking about how people interact with the things that we make.

We'll take a really (really!) simple web app, tear it apart, and realise that UX is hard, very important, and definitely worth thinking about. Expect tips, links, resources, door handles, cars, and of course a little WordPress.

Transcript

1. User Experience:
   It’s for everyone…
   …and it’s some other things too!
   

   View Slide

2. Ross Wintle
   Software Developer
   Technology Consultant
   @magicroundabout
   

   View Slide

3. UX Designer
   

   View Slide

4. My UX Journey
   

   View Slide

5. UX is
   90%
   how you think
   10%
   what you design

   - Joel Marsh: UX for Beginners
   

   View Slide

6. UX is
   90%
   asking questions and
   10%
   having the answers

   - Me!
   

   View Slide

7. Q & A
   

   View Slide

8. Q & Eh?
   

   View Slide

9. User Experience:
   

   It’s for everyone
   it’s important
   and it’s really hard!
   

   View Slide

10. What is

    UX?
    

    View Slide

11. UX
    UXD
    UI
    User eXperience
    User eXperience
    Design
    User Interface
    

    View Slide

12. UI is what you see

    UX is how you feel
    

    View Slide

13. Joel Marsh
    “UI is what you see

    UX is why you see it”
    

    View Slide

14. “The best UX will
    often be no UI at all”
    Havoc Pennington

    http://blog.ometer.com/2016/01/26/the-dangerous-ui-team/
    
    

    View Slide

15. View Slide

16. My UX Journey
    with thanks to Innocent Drinks
    

    View Slide

17. UX IS:
    Making users effective
    User

    Goals
    Org

    Goals
    
    

    View Slide

18. UX IS:

    User journeys
    

    View Slide

19. View Slide

20. !
    "

    #

    $

    %

    &

    

    (

    )

    ⋆

    +

    

    View Slide

21. !
    "

    #

    $

    %

    &

    

    (

    )

    ⋆

    +

    ?
    

    View Slide

22. User journey: Dead ends
    Logo Home - About - Donate
    Awesome

    Video

    Here
    

    View Slide

23. User journey: Dead ends
    ?
    Logo Home - About - Donate
    Awesome

    Video

    Here
    ?
    

    View Slide

24. UX IS:

    A process!
    

    View Slide

25. UX IS:

    Psychology
    Usability
    Design
    Copywriting
    Analysis
    

    View Slide

26. UX is
    for everyone
    

    View Slide

27. We all have
    experiences as users
    

    View Slide

28. View Slide

29. We can send a 1-ton
    rover vehicle to Mars
    and land it using a
    hovering, rocket-
    powered crane…
    But we still can’t make
    a printer work nicely!
    - Me
    

    View Slide

30. We all create
    experiences
    

    View Slide

31. UX is for…
    managers
    and
    consultants
    

    View Slide

32. UX is for…
    designers
    

    View Slide

33. UX is for…
    implementors
    

    View Slide

34. UX is for…
    developers
    

    View Slide

35. UX is for…
    copywriters

    media editors

    content creators
    

    View Slide

36. UX is for…
    everyone!
    

    View Slide

37. UX is
    important
    

    View Slide

38. UX can…
    make a difference

    

    (positive and negative)
    

    View Slide

39. https://twitter.com/Una/status/698003448323641344
    

    View Slide

40. UX can…
    increase sales
    

    View Slide

41. –Greg Linden - Make Data Useful - 2006

    

    https://sites.google.com/site/glinden/Home/StanfordDataMining.2006-11-28.ppt
    Every 100ms delay
    costs 1% of sales
    

    View Slide

42. –Adam Silver 

    

    https://medium.com/simple-human/embracing-simplicity-
    cf9ca9fe6a9e#.xpwld4p72
    Just Eat removed a fancy, JS
    accordion form and replaced it with
    a multi-page form.
    “…this resulted in almost 2 million
    extra orders per year.”
    

    View Slide

43. UX can…
    raise more
    money
    

    View Slide

44. –Steve Guy - British Heart Foundation

    

    https://www.youtube.com/watch?v=EIR2BamKwl8
    The BHF simplified a
    form and raised an
    extra £2m per year
    

    View Slide

45. UX can…
    make people
    smile
    

    View Slide

46. –Lots of people

    

    https://twitter.com/slacklovetweets
    “We love @SlackHQ…”
    

    View Slide

47. UX can…
    change the
    world?
    

    View Slide

48. UX is
    important
    

    View Slide

49. UX is
    hard
    

    View Slide

50. View Slide

51. UX is
    hard
    

    View Slide

52. Should I have a home
    link in my navigation?
    

    View Slide

53. No, people know that
    they click the logo.
    Should I have a home link in
    my navigation?
    

    View Slide

54. Yes, people don’t
    know to click the logo.
    Should I have a home link in
    my navigation?
    

    View Slide

55. No, people use
    breadcrumbs
    Should I have a home link in
    my navigation?
    

    View Slide

56. No, people use the
    back button
    Should I have a home link in
    my navigation?
    

    View Slide

57. Yes, people expect it.
    Should I have a home link in
    my navigation?
    

    View Slide

58. It depends.
    Should I have a home link in
    my navigation?
    

    View Slide

59. What about on mobile
    with collapsed nav?
    Should I have a home link in
    my navigation?
    

    View Slide

60. Have you considered
    the user journey?
    Should I have a home link in
    my navigation?
    

    View Slide

61. Test it
    Should I have a home link in
    my navigation?
    

    View Slide

62. I tested it!

    (and people do crazy things)
    Should I have a home link in
    my navigation?
    

    View Slide

63. YOU’RE
    NOT
    NORMAL!
    

    View Slide

64. UX is
    hard
    

    View Slide

65. https://twitter.com/rUv/status/695055910683615232
    

    View Slide

66. https://twitter.com/lionelrudaz/status/695147236670455808
    

    View Slide

67. UX is
    hard
    

    View Slide

68. The Simplest

    Web App

    In The

    World
    Case Study
    

    View Slide

69. View Slide

70. View Slide

71. View Slide

72. User journey
    • Discovery
    • Arrival (at homepage?)
    • Sign up / create account
    • Log in
    • Change status
    

    View Slide

73. User journey
    • Discovery
    • Arrival (at homepage?)
    • Sign up / create account
    • Log in
    • Change status
    • Push notifications?
    

    View Slide

74. Acquisition is
    hard
    

    View Slide

75. Homepage
    How did the user get
    here?
    

    View Slide

76. Homepage
    How can I get more
    people here?
    

    View Slide

77. Navigation is
    hard
    

    View Slide

78. Homepage
    What should be in
    my navigation?
    

    View Slide

79. Homepage
    What should NOT
    be in my
    navigation?
    

    View Slide

80. Homepage
    What about when
    logged in?
    

    View Slide

81. Homepage
    Should I have a
    home link?
    

    View Slide

82. Calls to action are
    easy
    (mostly)
    

    View Slide

83. Homepage
    What might the user
    want to do next?
    

    View Slide

84. Homepage
    Can I easily take
    action on mobiles?
    

    View Slide

85. Homepage
    Can I simplify by
    limiting the number of
    choices?
    

    View Slide

86. Homepage
    Should the action
    change when logged
    in?
    

    View Slide

87. Copywriting is
    hard
    

    View Slide

88. Homepage
    How can I simplify/
    edit this?
    

    View Slide

89. Homepage
    What DO I need to
    say.
    

    View Slide

90. Homepage
    What DON’T I need to
    say.
    

    View Slide

91. Homepage
    Have I clearly and
    succinctly explained
    what this is in a way
    that a new visitor will
    understand?
    

    View Slide

92. Homepage
    Do I need to explain
    this to new users? Or
    is some prior
    knowledge assumed?
    

    View Slide

93. Homepage
    Is my page too long?
    Or too short?
    

    View Slide

94. Homepage
    Are my lines too
    wide? Or too narrow?
    

    View Slide

95. Mobile-friendly is
    hard
    

    View Slide

96. Homepage
    Responsive!
    

    View Slide

97. Forms are
    REALLY
    hard
    

    View Slide

98. Sign up
    How can I make it
    easy?
    

    View Slide

99. Sign up
    What data do I need
    to collect?
    

    View Slide

100. Sign up
     What data don’t I
     need to collect?
     

     View Slide

101. Sign up
     Do users need
     usernames? Or will
     email addresses do?
     

     View Slide

102. Sign up
     What needs
     explaining, and what
     doesn’t?
     

     View Slide

103. Sign up
     What do I need to do
     about data protection
     and legal stuff?
     

     View Slide

104. Sign up
     Should people set a
     password? Or should
     I send one?
     

     View Slide

105. Sign up
     Should I enforce
     complex passwords?
     

     View Slide

106. Sign up
     What validation do I
     need to do?
     

     View Slide

107. Sign up
     How do I display
     validation errors?
     

     View Slide

108. Sign up
     Should I do fancy JS/
     AJAX validation in
     real time?
     

     View Slide

109. Sign up
     Should this be a one
     page or multi-page
     form?
     

     View Slide

110. Sign up
     Would social media
     logins be easier?
     

     View Slide

111. User journeys are
     hard
     

     View Slide

112. Thanks!
     What happens now?
     What screen do users
     go to?
     

     View Slide

113. Thanks!
     Should the user be
     logged in?
     

     View Slide

114. Thanks!
     Do they get an email?
     

     View Slide

115. Thanks!
     Does an admin get
     an email?
     

     View Slide

116. Log in
     How long are people
     logged in for?

     

     (This is critical!)
     

     View Slide

117. Log in
     What screen is shown
     after login?
     

     View Slide

118. Log in
     What does a user do
     if they’ve forgotten
     their login?
     

     View Slide

119. Log in
     Is social media
     linking/logging in
     helpful?
     

     View Slide

120. Change status
     What is the button
     feedback?
     

     View Slide

121. Change status
     What else happens
     after pressing the
     button?
     

     View Slide

122. Change status
     Should I congratulate
     the user?
     

     View Slide

123. Change status
     Should people be
     allowed to upload a
     photo or note?
     

     View Slide

124. Change status
     Should people be
     allowed to change
     colour (as they now
     know the gender)?
     

     View Slide

125. Change status
     Should I offer sharing
     on social media…

     

     …or by email?
     

     View Slide

126. Change status
     Should there be an
     “oops” or “undo”
     option?
     

     View Slide

127. Change status
     What’s the balance of
     more options vs
     getting out of the
     way?
     

     View Slide

128. The Simplest

     Web App

     In The

     World
     Case Study
     

     View Slide

129. 2 actions
     Case Study
     

     View Slide

130. 46 questions
     Case Study
     

     View Slide

131. UX is
     hard
     

     View Slide

132. Which way now?
     

     View Slide

133. Beg, steal, borrow
     Resource:
     http://www.goodui.org
     

     View Slide

134. Ask questions
     Resource:
     Your brain
     

     View Slide

135. Test and Observe
     Resource:
     Your mum, dad, grandma, cat
     

     View Slide

136. Track and Analyse
     Resource:
     Analytics (Event Tracking)
     

     View Slide

137. Change and test
     Resource:

     Google Experiments, Optimizely, InVision
     

     View Slide

138. Think outside

     the screen
     Resource:

     Your own experiences
     

     View Slide

139. Ask, Discuss, Learn
     Resource:

     Each other
     

     View Slide

140. Other Resources
     • Psychology - Laws of UX: https://lawsofux.com/
     • UX Myths: https://uxmyths.com/
     • InVision “Principles of UX Design” course:

     https://www.invisionapp.com/ecourses/principles-
     of-ux-design (free)
     • Inspiration: https://www.reallygoodux.io/
     

     View Slide

141. Questions?
     (But not necessarily answers)
     Ross Wintle

     @magicroundabout
     oikos.digital
     

     View Slide