Introduction to UI/UX Design

AN updated version of my previous talk, UI/UX Workshop.

Transcript

1. Introduction to
   UI/UX Design
   Ire Aderinokun
   

   View Slide

2. Hello!
   • Ire Aderinokun
   • UI/UX Designer and Front-
   End Developer
   • Blogger at bitsofco.de
   • Head of Technology at Big
   Cabal
   • Google Developer Expert in
   Web Technologies
   

   View Slide

3. Agenda
   1. What is UI/UX Design?
   2. How People Really Use Your Website
   3. Guidelines for User Experience
   4. The Design Process
   

   View Slide

4. What is UI/UX Design?
   Part One
   

   View Slide

5. View Slide

6. I’m a “Chief Human Factors Director”
   

   View Slide

7. View Slide

8. 4 Aspects to UX
   • Experience Strategy
   • User Research
   • Information Architecture
   • Interaction Design
   

   View Slide

9. Experience Strategy
   Why does this product exist?
   

   View Slide

10. User Research
    Who is this product for?
    

    View Slide

11. Information Architecture
    What is this product?
    

    View Slide

12. Interaction Design
    How will this product be executed?
    

    View Slide

13. User Experience
    Why?
    Experience Strategy
    How?
    Interaction Design
    Who?
    User Research
    What?
    Information Architecture
    

    View Slide

14. Okay, but what is
    User Experience Design?
    

    View Slide

15. – Edward Tufte
    “The most common user action on
    a website is to flee”
    

    View Slide

16. User Experience Design is about
    making the user feel in control
    

    View Slide

17. Meet the User
    Part Two
    

    View Slide

18. The User is Drunk
    

    View Slide

19. theuserisdrunk.com
    

    View Slide

20. How do users really
    use your app?
    

    View Slide

21. They Don’t Read
    

    View Slide

22. View Slide

23. View Slide

24. View Slide

25. They Don’t Give Their
    100% Attention
    

    View Slide

26. How many tabs do you have open
    right now?
    

    View Slide

27. View Slide

28. They Don’t Want to Learn
    How to Use your App
    

    View Slide

29. View Slide

30. When was the last time you read an
    instruction manual?
    

    View Slide

31. They Don’t Care if They’re
    Doing it Wrong
    

    View Slide

32. View Slide

33. View Slide

34. Recap
    1. They don’t read
    2. They don’t give their 100% attention
    3. They don’t want to learn
    4. They don’t care if they are doing it wrong
    

    View Slide

35. The User is Drunk
    NOT
    ^
    

    View Slide

36. – Susan Dray
    “If the user can’t use it,
    it doesn’t work”
    

    View Slide

37. View Slide

38. Guidelines for User
    Experience
    Part Three
    

    View Slide

39. As User Experience Designers, Our
    Aim is to Make the User Feel in
    Control
    

    View Slide

40. Use Normal, Everyday
    Language
    

    View Slide

41. The User Doesn’t Speak
    Computer
    

    View Slide

42. Bad Language
    

    View Slide

43. Good Language
    • Human
    • Colloquial
    • Light-Hearted
    

    View Slide

44. Good Language
    

    View Slide

45. Give Feedback and Updates
    

    View Slide

46. Progress Bars
    

    View Slide

47. Realtime Validation
    

    View Slide

48. Realtime Validation
    

    View Slide

49. Allow Confirmation
    

    View Slide

50. Element States
    

    View Slide

51. Make Interactions Intuitive
    

    View Slide

52. Employ Design Standards
    

    View Slide

53. 3 Key Elements
    • Site ID / Branding
    • Navigation
    • Utilities (Settings, Account, Search)
    

    View Slide

54. View Slide

55. View Slide

56. Page Hierarchy
    • The most important thing is the most prominent
    thing
    • Semantically related content is also visually
    related
    

    View Slide

57. View Slide

58. Make a Link a Link
    

    View Slide

59. Use Standard Icons
    Platform-Specific
    iOS Android iOS Android
    

    View Slide

60. Mirror the Physical World
    

    View Slide

61. IRL to the Web
    

    View Slide

62. Material Design
    The material is grounded in tactile reality, inspired
    by the study of paper and ink, yet technologically
    advanced and open to imagination and magic.
    Surfaces and edges of the material provide visual
    cues that are grounded in reality. The use of
    familiar tactile attributes helps users quickly
    understand affordances.
    

    View Slide

63. View Slide

64. Limit Instructions
    

    View Slide

65. “A User Interface is like a joke. If
    you have to explain it, it’s not that
    good.”
    

    View Slide

66. Show, Don’t Tell
    

    View Slide

67. View Slide

68. Allow Flexibility
    

    View Slide

69. View Slide

70. View Slide

71. Allow Users to
    Make Mistakes
    

    View Slide

72. View Slide

73. View Slide

74. Recap
    1. Use Normal, Everyday Language
    2. Give Feedback and Updates
    3. Make Interactions Intuitive
    4. Limit Instructions
    5. Allow Flexibility
    

    View Slide

75. – Jared Spool
    “Design, when done well, becomes
    invisible. It is only when done
    poorly, that we notice it”
    

    View Slide

76. The Design Process
    Part Four
    

    View Slide

77. View Slide

78. Stages
    1. Research & Concept
    2. Content Mapping & User Flow
    3. Prototype
    4. Testing & Iteration
    5. Design Details
    

    View Slide

79. Case Study:
    “The Big Picture”
    

    View Slide

80. First,
    Put the Code Editor Away!
    

    View Slide

81. View Slide

82. View Slide

83. Research and Concept
    

    View Slide

84. User Experience
    Why?
    Experience Strategy
    How?
    Interaction Design
    Who?
    User Research
    What?
    Information Architecture
    

    View Slide

85. View Slide

86. TBP: Concept
    • To-do list for long-term goals
    • Each “big picture” goal broken down into small
    achievable tasks
    • Keep track of my ongoing progress as well as past
    achievements
    

    View Slide

87. TBP: Research
    • What other similar apps are out there?
    • How is TBP different?
    • Who is TBP for?
    • Do they want this app?
    

    View Slide

88. Content Mapping and
    User Flow
    

    View Slide

89. User Experience
    Why?
    Experience Strategy
    How?
    Interaction Design
    Who?
    User Research
    What?
    Information Architecture
    

    View Slide

90. View Slide

91. View Slide

92. View Slide

93. View Slide

94. Prototype
    

    View Slide

95. User Experience
    Why?
    Experience Strategy
    How?
    Interaction Design
    Who?
    User Research
    What?
    Information Architecture
    

    View Slide

96. Wireframe, Not Design
    

    View Slide

97. View Slide

98. View Slide

99. Testing and Iteration
    

    View Slide

100. User Experience
     Why?
     Experience Strategy
     How?
     Interaction Design
     Who?
     User Research
     What?
     Information Architecture
     

     View Slide

101. View Slide

102. The Bare Minimum
     • Watch a couple of people use the app
     • Ask them to complete specific tasks without help
     • Record / Take notes
     

     View Slide

103. Design Details
     

     View Slide

104. User Experience
     Why?
     Experience Strategy
     How?
     Interaction Design
     Who?
     User Research
     What?
     Information Architecture
     

     View Slide

105. Design Elements
     • Layout
     • Typography
     • Colours
     • Specific Design Details
     

     View Slide

106. View Slide

107. Test, Test Again,
     then Test Again
     

     View Slide

108. View Slide

109. Are We Done Yet?
     

     View Slide

110. Recommended Reading
     

     View Slide

111. Thank You!
     Any Questions?
     

     View Slide