Introduction to UI/UX Design

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

Transcript

1. Introduction to UI/UX Design Ire Aderinokun
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
3. Agenda 1. What is UI/UX Design? 2. How People Really Use Your Website 3. Guidelines for User Experience 4. The Design Process
4. What is UI/UX Design? Part One
6. I’m a “Chief Human Factors Director”
8. 4 Aspects to UX • Experience Strategy • User Research • Information Architecture • Interaction Design
9. Experience Strategy Why does this product exist?
10. User Research Who is this product for?
11. Information Architecture What is this product?
12. Interaction Design How will this product be executed?
13. User Experience Why? Experience Strategy How? Interaction Design Who? User Research What? Information Architecture
14. Okay, but what is User Experience Design?
15. – Edward Tufte “The most common user action on a website is to flee”
16. User Experience Design is about making the user feel in control
17. Meet the User Part Two
18. The User is Drunk
19. theuserisdrunk.com
20. How do users really use your app?
21. They Don’t Read
25. They Don’t Give Their 100% Attention
26. How many tabs do you have open right now?
28. They Don’t Want to Learn How to Use your App
30. When was the last time you read an instruction manual?
31. They Don’t Care if They’re Doing it Wrong
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
35. The User is Drunk NOT ^
36. – Susan Dray “If the user can’t use it, it doesn’t work”
38. Guidelines for User Experience Part Three
39. As User Experience Designers, Our Aim is to Make the User Feel in Control
40. Use Normal, Everyday Language
41. The User Doesn’t Speak Computer
42. Bad Language
43. Good Language • Human • Colloquial • Light-Hearted
44. Good Language
45. Give Feedback and Updates
46. Progress Bars
47. Realtime Validation
48. Realtime Validation
49. Allow Confirmation
50. Element States
51. Make Interactions Intuitive
52. Employ Design Standards
53. 3 Key Elements • Site ID / Branding • Navigation • Utilities (Settings, Account, Search)
56. Page Hierarchy • The most important thing is the most prominent thing • Semantically related content is also visually related
58. Make a Link a Link
59. Use Standard Icons Platform-Specific iOS Android iOS Android
60. Mirror the Physical World
61. IRL to the Web
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.
64. Limit Instructions
65. “A User Interface is like a joke. If you have to explain it, it’s not that good.”
66. Show, Don’t Tell
68. Allow Flexibility
71. Allow Users to Make Mistakes
74. Recap 1. Use Normal, Everyday Language 2. Give Feedback and Updates 3. Make Interactions Intuitive 4. Limit Instructions 5. Allow Flexibility
75. – Jared Spool “Design, when done well, becomes invisible. It is only when done poorly, that we notice it”
76. The Design Process Part Four
78. Stages 1. Research & Concept 2. Content Mapping & User Flow 3. Prototype 4. Testing & Iteration 5. Design Details
79. Case Study: “The Big Picture”
80. First, Put the Code Editor Away!
83. Research and Concept
84. User Experience Why? Experience Strategy How? Interaction Design Who? User Research What? Information Architecture
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
87. TBP: Research • What other similar apps are out there? • How is TBP different? • Who is TBP for? • Do they want this app?
88. Content Mapping and User Flow
89. User Experience Why? Experience Strategy How? Interaction Design Who? User Research What? Information Architecture
94. Prototype
95. User Experience Why? Experience Strategy How? Interaction Design Who? User Research What? Information Architecture
96. Wireframe, Not Design
99. Testing and Iteration
100. User Experience Why? Experience Strategy How? Interaction Design Who? User Research What? Information Architecture
102. The Bare Minimum • Watch a couple of people use the app • Ask them to complete specific tasks without help • Record / Take notes
103. Design Details
104. User Experience Why? Experience Strategy How? Interaction Design Who? User Research What? Information Architecture
105. Design Elements • Layout • Typography • Colours • Specific Design Details
107. Test, Test Again, then Test Again
109. Are We Done Yet?
110. Recommended Reading
111. Thank You! Any Questions?