UI/UX Workshop

An Introduction to User Experience Design

Transcript

1. UI/UX workshop Ire Aderinokun UI/UX Designer and Front-End Developer Head of Design and Product, Big Cabal Media
2. Agenda 1. What is UI/UX? 2. How People Really Use Your Website 3. Guidelines for User Experience 4. The Design Process
3. What is UI/UX? Part One
5. i’m a “chief human factors director”
7. 4 Aspects to UX • Experience Strategy • User Research • Information Architecture • Interaction Design
8. Experience Strategy Why does this product exist?
9. User Research Who is this product for?
10. Information Architecture What is this product?
11. Interaction Design How will this product be executed?
12. user experience Why? Experience Strategy How? Interaction Design Who? User Research What? Information Architecture
13. Okay, but what is user experience?
14. – Edward Tufte “the most common user action on a website is to flee”
15. user experience design is about making the user feel in control
16. meet the user Part Two
17. the user is drunk
18. theuserisdrunk.com
19. HOW USERS REALLY USE YOUR WEBSITE/app
20. 1. they don’t read
24. 2. they don’t give their 100% attention
25. how many tabs do you have open right now?
27. 3. they don’t want to learn how to use your app
29. when was the last time you read an instruction manual?
30. 4. they don’t care if they’re doing it wrong
32. Overview 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
33. the user is drunk NOT ^
34. – Susan Dray “if the user can’t use it, it doesn’t work”
35. guidelines for user experience Part Three
36. AIM: MAKE THE USER FEEL IN CONTROL
37. 1. USE normal, everyday language
38. the user doesn’t speak computer
39. bad language
40. good language • Human • Colloquial • Light-Hearted
41. good language
42. 2. Give feedback and updates
43. progress bars
44. real-time validation
45. real-time validation
46. allow confirmation
47. element states
48. 3. make interactions intuitive
49. employ design standards
50. 3 key elements • Site ID / Branding • Navigation • Utilities (Settings, Account, Search)
53. page hierarchy • The most important thing is the most prominent thing • Semantically related content is also visually related
55. make a link a link
56. use standard icons Platform-Specific iOS Android iOS Android
57. mirror the physical world
58. irl to the web
59. 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.
61. 4. limit instructions
62. “a user interface is like a joke. if you have to explain it, it’s not that good.”
63. guide, don’t instruct
64. show, don’t tell
66. 5. allow flexibility
69. allow users to make mistakes
72. Overview 1. Use Normal, Everyday Language 2. Give Feedback and Updates 3. Make Interactions Intuitive 4. Limit Instructions 5. Allow Flexibility
73. – Jared Spool “design, when done well, becomes invisible. it is only when done poorly, that we notice it”
74. the design process Part Four
76. Stages 1. Research & Concept 2. Content Mapping & User Flow 3. Prototype 4. Testing & Iteration 5. Design Details
77. case study: the big picture
78. 0. put the code editor away!
81. 1. research and concept
82. user experience Why? Experience Strategy How? Interaction Design Who? User Research What? Information Architecture
84. 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
85. TBP: research • What other similar apps are out there? • How is TBP different? • Who is TBP for? • Do they want this app?
86. 2. Content Mapping and user flow
87. user experience Why? Experience Strategy How? Interaction Design Who? User Research What? Information Architecture
92. 3. prototype
93. user experience Why? Experience Strategy How? Interaction Design Who? User Research What? Information Architecture
94. wireframe, not design
97. 4. testing and iteration
98. user experience Why? Experience Strategy How? Interaction Design Who? User Research What? Information Architecture
100. the bare minimum • Watch a couple of people use the app • Ask them to complete specific tasks without help • Record / Take notes
101. 5. design details
102. user experience Why? Experience Strategy How? Interaction Design Who? User Research What? Information Architecture
103. design elements • Layout • Typography • Colours • Specific Design Details
105. test again, and again
107. done?
108. Recommended reading
109. thank you
110. any questions?