Download as PDF, PPTX
Uploaded byJessi Baker
UX Work Shop
The document provides an overview of a UX workshop. It discusses key UX concepts like user experience design, personas, goals, tasks, information architecture, wireframing, paper prototyping, user testing and next steps. The workshop involves presentations, exercises and demonstrations on various UX topics. Participants will learn UX strategy and tools to design user-centered digital experiences.
UX Work Shop
- 1. UX Workshop Rik Lomas Jessi Baker @riklomas @jessibaker
- 2. What are wegoing to do today?
- 3. What’s UX!? UX success Strategy User Centred Design Goals, tasks Information Architecture Wireframing Sketching Paper Prototyping Assessment States User Flows & Scenarios Make a case for wireframes Mock-up soware Code prototypes User Testing
- 4. What will youget out of it?
- 5.
- 6.
- 7. “Anyone can makethe simple complicated. Creativity is making the complicated simple.” - Charles Mingus
- 8. e design ofexperiences
- 9. e design ofexperiences Human centred
- 10. e design ofexperiences Human centred Interactions
- 11. e design ofexperiences Human centred Interactions Different to UI
- 12. e design ofexperiences Human centred Interactions Different to UI Access to value
- 13.
- 14. POST (& otherapps) by Meri Media
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21. Where to startwith UX?
- 22.
- 23.
- 24. Now write yourswith no mention of the technology medium or other ideas...
- 25. Do you LOVEthis idea?
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33. Design based ona real need and for real people...
- 34. Do you haveaccess to your users?
- 35. What is apersona?
- 36. Exercise – Write down3 personas for your site/app
- 37. What are thekey goals?
- 38. What the userwants to do, not how the user achieves them. No assumptions about the system interface. Can be used to compare different interface design alternatives in a fair way. Can be personal, practical or false goals.
- 39. Tell my friends who are in town that I have just arrived at a location Key goal of Foursquare
- 40. Demo – Goals forPopDown
- 41. Exercise – Write downthe key goals for your project
- 42.
- 43. Describe the stepsnecessary to achieve the goals. Can vary with the available technology. Broken down into steps for task analysis, and are recombined into sequence of steps for scenario development.
- 44. Select foursquare app on my phone Select “check-in” button Select the location I’m at from a list of nearest locations Select “Share with facebook” Select “check-in” button Key task of Foursquare
- 45. Demo – Tasks forPopDown
- 46. Exercise – Write down3 task that achieve 3 goals for your site/app
- 47.
- 48.
- 49. Site maps &Flow charts
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56. Example - Craing anIA for PopDown
- 57. Link tasks intosimple steps, think about a real user performing the tasks
- 58. Highlight the corefunctions in your flow
- 59. Exercise – IA: Drawa hierarchy of the key tasks, highlighting the key functions
- 60. Remove the crapfrom your app
- 61. Core repeatable functions. e.g.Tweet, retweet + follow
- 62. What is awireframe?
- 66. No fonts No colour Nographics
- 67. Wireframe fidelity Low High Sketching Paper Mock up Code Prototype Soware Prototype
- 68.
- 69.
- 70.
- 71. Concept Exploration Layout Contenton Pages Brainstorm Interactions
- 72. Concept Exploration Layout Contenton Pages Brainstorm Interactions Storytelling
- 73. Concept Exploration Layout Contenton Pages Brainstorm Interactions Storytelling Build Consensus
- 74. Concept Exploration Layout Contenton Pages Brainstorm Interactions Storytelling Build Consensus Documentation
- 75. Concept Exploration Layout Contenton Pages Brainstorm Interactions Storytelling Build Consensus Documentation Minimize Risk
- 76.
- 83.
- 84. Exercise – Draw asketch of the Twitter profile page on the web version or the app version
- 85.
- 86.
- 87. 8 tips forwireframing
- 88.
- 89.
- 90.
- 91. User Interface isnot User Experience
- 92.
- 93.
- 94.
- 95. Know when tostop
- 96. Demo – Sketch ofPopDown
- 97. Exercise – Draw asketch for your idea.
- 98.
- 99. Do your keyfunctions standout?
- 100.
- 101. Why designs fail? Usersaren’t motivated to achieve goals
- 102. Why designs fail? Usersaren’t motivated to achieve goals Users don’t understand how it works
- 103. Why designs fail? Usersaren’t motivated to achieve goals Users don’t understand how it works Users don’t see things
- 104.
- 105. Errors, alerts &successes
- 108.
- 110. Events (e.g. click,hover, tap and swipe)
- 111. Hover mode -Google maps
- 113. Responsive design andorientation
- 115. Responsive web designexamples
- 116. User flows &Scenarios
- 117. User Flow for1 scenario
- 118. User flow formultiple scenarios
- 119. User flow formultiple scenarios
- 120. User flow forall scenarios
- 121. Scenarios help youdesign and test
- 122. Demo- Scenario for PopDownand wireframing of the user flow
- 123. Excercise - Chose ascenario for your project and wireframe of the user flow with less than 5 key screens
- 124.
- 125.
- 134. Demo- Paper Prototype forPopDown
- 135. Popdown Paper Prototype- Home screen
- 136. Popdown Paper Prototype- Shop mode
- 137. Popdown Paper Prototype- select a category
- 138. Popdown Paper Prototype- aer a category is selected
- 139. Popdown Paper Prototype- shop view hover mode
- 140. Popdown Paper Prototype- product view
- 141. Exercise – Paper prototypeyour site/app
- 142. Making a casefor wireframes
- 143.
- 144. Creativity is inthe making
- 145. Making changes inPhotoshop or code will take much longer than in wireframes
- 146. Some clients arehappy to see IA and wireframes, if not, storyboard or sketch a user journey Your client knows customer experience is king! Testing on paper with the whole team will enage everyone with the importance of the UX Do it anyway...
- 147.
- 148. You’re broke! Soit’s even more important to get it right in a lo-fi way...
- 149. Customer experience willhelp you write certain aspects of your business plan
- 150.
- 151.
- 152.
- 153.
- 154.
- 155.
- 156.
- 157.
- 158.
- 159.
- 160.
- 161.
- 162.
- 163.
- 164.
- 165.
- 166.
- 167.
- 171. How to doa user test
- 172. Develop a testplan
- 173.
- 174.
- 175.
- 176. Don’t cheat! Nohints. Let them figure it out...
- 177. Monitor time toperform tasks
- 178. A/B Testing: Test differentlayouts of same page on critical mass of different people
- 179.
- 180.
- 181. Demo – Making atest plan for PopDown
- 182. Exercise – Make atest plan based on user scenario
- 183.
- 184. Exercise – Test youridea using your paper prototypes with three people
- 185.
- 186.
- 187.
- 188.
- 189.
- 190.
- 191.
- 192.
- 198.
- 199.
- 200.
- 201.
- 202.
- 203. Observe! Experiment! Fail!
- 204.
- 205. anks! Rik Lomas Jessi Baker @riklomas @jessibaker rik@lomalogue.com jessi@cantab.net