User-Centered Design Process
•
15 j'aime•50,352 vues
User-centered design (UCD) is a design philosophy that focuses on the needs of users throughout the design process. The document discusses the key steps in UCD, which include defining the project and users, creating concepts, designing visual solutions, development, and deployment. It emphasizes early and continuous user research methods like interviews and usability testing to help ensure designs meet user needs.
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à User-Centered Design Process
Similaire à User-Centered Design Process (20)
Plus de Patrick McNeil
Dernier
Dernier (20)
User-Centered Design Process
- 1. User-Centered Design A r e l a t i v e l y b r i e f i n t r o d u c t i o n t o u s e r - c e n t e r e d d e s i g n .
- 4. We are particular about type My favorite font!
- 5. Stretched type is not fun A kitten dies every time this happens – but it’s still not ok
- 6. What’s wrong here? Sounds…awkward? Kerning matters!
- 8. No matter what: The previous guys code is crap.
- 9. JavaScript sucks…ex: Every script is executed in a single global namespace that is accessible in browsers with the window object.
- 10. Interactive designers are no different
- 11. Save the floppy disk
- 12. Buttons vs links Good: Bad: Sample debate: http://www.ixda.org/node/15621
- 13. Should designers learn to code? 011110010110010101110011
- 14. It’s not crazy… it’s passion
- 15. Are you this enthusiastic about Interactive Design? I f s o , U s e r - C e n t e r e d D e s i g n wi l l h e l p y o u a c h i e v e h e b e s t r e s u l t s p o s s i b l e .
- 16. Hello, I’m Patrick A n d I h a v e a n o b s e s s i o n wi t h t h e we b
- 17. About me I teach at the Univ. of Missouri St. Louis About 15 years in the web industry Started in tech – shifted to design – and back again
- 18. Get in touch: mcneilp@gmail.com or @designmeltdown or pmcneil.com
- 19. Today's agenda 1. An overview of the User-Centered Design Process (90 min) 2. Deep dives into key topics (70 min)
- 20. PDF download at the end Got links?
- 21. I loathe bulleted presentations… Warning, impending hypocrisy
- 22. This is the tip of the iceberg Caution,
- 24. Backgrounds The background of UX professionals
- 25. Your backgrounds From the pre-conference survey: A previous group:
- 26. User-centered design (UCD) is a design philosophy that puts the user of a product, application, or experience, at the center of the design process.
- 27. The foundation The three basic principles behind UCD: 1.Early focus on users and their tasks 2.Evaluation and measurement of product usage 3.Iterated design
- 30. users define concept designdevelop deploy UCD Process overview UCD is a state of mind & it is not a one man show Start here…
- 31. UCD Step 1: Defining the project users define concept designdevelop deploy
- 32. Define the scale • Replacement or brand new product • Update to an existing product
- 33. Documentation Many options to select from
- 34. Define basic requirements • What should it do (features, functionality, what it does etc)? Or what are we working on? • How will we measure our success? • Incremental changes in revenue (direct or indirect) • Customer leads or other activity • What are the environmental factors (physical & technical)? • Who is the user (demographics, skill level, frequency of use & physical)?
- 35. Generate documentation Site maps – defines the sites content and information architecture Information Architecture (IA) is an entire field of work Awesome resource: http://iainstitute.org/en/learn/ Source: http://ils.indiana.edu/faculty/smilojev/teaching/s515spring2012/2012springprojects/session11/
- 36. Sitemap tools – text editor Sitemaps can be simple outlines and remind us that the purpose is more important than the tool.
- 37. Flowcharts Sometimes the flow is more important than a chart of all the pages. Source: http://www.codeproject.com/Articles/111949/Excerpt-from-Designing-the-iPhone-User-Experience
- 38. Generate documentation • Activity diagrams – Flowcharts showing how a process will work Source: http://www.edmullen.com/work/project/free-people-retail & http://ils.indiana.edu/faculty/smilojev/teaching/s515spring2012/2012springprojects/session11/
- 39. Generate documentation Content Inventories: A catalog of an entire websites content. 1.Title/logo 2.Input field labels 3.Remember me 4.Login button 5.Lost password link
- 40. Content inventories Learn more: Responsive Design Workflow by Stephen Hay
- 41. Site planning answers the question: What am I designing?
- 42. User research happens in concert with the fundamental project definition
- 43. Documenting users • Write personas – A rich description of typical users • http://uxmag.com/articles/personas-the-foundation-of-a-great-user-experience • Write use case scenarios – Written descriptions of how a product will be used describing common scenarios • http://www.gatherspace.com/static/use_case_example.html
- 44. Methods for researching users • Interviews (great for exploring ideas) (requirements) • Questionnaires / surveys (a great preliminary tool) (requirements) • Focus groups (basically group interviews) (requirements) • Direct observation (observe users completing a task) (flowchart) • Card sorts (to discover how users view the content) (sitemaps)
- 45. As a result we have: • A clear description of the project • A plan for what we are building • A detailed understanding of the user • Vision for how the product will be used • Best of all, tangible assets the team can share
- 46. Learn more If you would like to learn more about this phase: Learn to make: • Personas • Concept models • Site maps • Flowcharts • Wireframes • Design Briefs • Usability plans • Usability reports
- 47. UCD boils down to seeking meaningful design insights over random acts of design
- 48. In the Define phase we include the user by inquiring of them
- 49. Activity time
- 50. Our product: A new tool to help holiday shoppers stay organized, find gift ideas & score the best deals
- 51. Steps: 1) Reflect 2) Ask questions 3) Answer questions 4) Reflect Time box 5 minutes per step organized, gift ideas & deals
- 52. Steps: 1) Reflect 2) Ask questions 3) Answer questions 4) Reflect Time box 5 minutes per step organized, gift ideas & deals
- 53. Steps: 1) Reflect 2) Ask questions 3) Answer questions 4) Reflect Time box 5 minutes per step organized, gift ideas & deals
- 54. Steps: 1) Reflect 2) Ask questions 3) Answer questions 4) Reflect Time box 5 minutes per step organized, gift ideas & deals
- 56. My results: 1) The list repeats itself every year 2) Zero carry over year to year 3) Thoughtfulness over price tag
- 57. User research isn’t as hard as it might sound
- 58. UCD Step 2: Create concepts users define concept designdevelop deploy
- 59. Developing concepts includes • Interpret the documentation to develop possible solutions • Shift from listening to problem solving • Build wireframes and prototypes • User testing
- 60. Wireframes A schematic or blueprint that represents the structure of a website. Wireframes are nonfunctional, static image. Start with low-fidelity. Less detail and quick to produce. Move towards higher fidelity as you shape and improve it. Work from the documentation project requirements and research from step 1!
- 61. Prototypes Creating the illusion of functionality They don’t need to be complete and typically only simulate a small set of features in an interface Allows you to test out how an interface flows from screen to screen Can start as paper prototypes and move up to full functional high-fidelity prototypes
- 63. Iterations are the key Wireframe something Visual design Test with a prototype Discover something
- 64. Lean on your user insights and work magic Beautiful, unicorn magic
- 65. Video time Source: http://www.youtube.com/watch?v=9wQkLthhHKA Usability test with a paper prototype
- 66. Observations • You DO NOT need a finished app to test! • It takes practice • Focus on the user experience of the app and not technical or secondary issues – it is about the essence of the app • Paper prototype allows to accommodate the unexpected • You could quickly change it and test with a new subject • He isn’t trying to get her to do what he wants and prove his design is right – genuine interest in improving
- 67. More on usability testing in the second half.
- 68. In the Concept phase we include the user via Exploratory based usability tests
- 69. UCD Step 3: Design visual solutions users define design concept develop deploy
- 70. Design the interface using the blueprints Finally,
- 71. So much more than a suggestion Wireframes,
- 74. Be an interior designer
- 75. Style Tiles A stepping stone towards the full design: Minimize the radical leap from idea to visual design:
- 76. A design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web. Style tiles:
- 78. Establish the visual voice before committing to a full blown design Style tiles:
- 79. An iterative tool for visual design Style tiles:
- 82. UI Design tools
- 83. UI Design tools Question: What is your primary tool for designing websites (the actual look and feel of the interface)? Out of 274 respondents 22% 53% 18%
- 84. In the Design phase we include the user via assessment based usability test
- 85. UCD Step 4: Development users define develop design concept deploy
- 86. Documentation can really pay off This is when all that
- 87. Toss it over the fence and forget about it You do not get to
- 88. In the Develop phase we include the user via Validation based usability test
- 89. UCD Step 5: Deploy into the wild users define deploy designdevelop concept
- 90. In the Deploy phase we include the user by measuring the use of the product
- 91. The foundation 1.Early focus on users and their tasks 2.Evaluation and measurement of product usage 3.Iterated design
- 92. Google Analytics Who What When From Events Goals Conversions And much more http://www.google.com/analytics/
- 95. The definition of the next project Ideas and insights from here become
- 96. User Centered Design users define designdevelop deploy concept UX Designers & Information Architects UI Designers Front end dev’s & programmers SEO and web optimization folks Interaction Designers (IxD)
- 97. x x Did you notice something missing?
- 98. Do you like to read?
- 99. Sources Books referenced in this presentation & others I recommend:
- 100. Take 10 minutes… Break time Come back for some free books
- 101. Thank you for completing the survey!
- 102. Deep dives Part 2:
- 103. The foundation The three basic principles behind UCD: 1.Early focus on users and their tasks 2.Evaluation and measurement of product usage 3.Iterated design
- 104. users UCD Recap Because it is a lot to absorb:
- 105. Part 2 Outline What we will cover: 1.Interviews & Surveys 2.Wireframes & prototypes 3.Usability testing
- 106. Interviewing users A b r i e f g u i d e
- 107. Interviews will humanize your apps problems
- 108. Interviews almost always lead to ideas, solutions and features that you had not thought of.
- 110. 1) Interviewing is not selling – don’t defend your app – ask more questions
- 111. “Why is that feature important to you?” “Describe what you wanted to happen”
- 112. 2) Get actual users – not just your office neighbor
- 113. 3) Don’t ask hypothetical questions
- 115. 5) Shut up – it’s not a conversation
- 116. After a round of interviews, use a survey to validate the results
- 117. Survey tips Simple tips for a good survey: • Know what you want to learn • Write questions that everyone: • will interpret the same way (ex: avoid “do you frequently do x”) • can answer accurately • Avoid leading questions: • Do you agree with most people that Windows 8 is terrible? • Do not make people predict their own behavior • Have follow up questions!!!
- 118. Wireframes & Prototypes A b r i e f g u i d e
- 119. Finding problems early 1x cost to change during requirements / design 5x cost to change during development 25x cost to change during formal testing 100x cost to change in production You can’t afford not to do it. Researchers at Hewlett-Packard, IBM, Hughes Aircraft, TRW, and other organizations have found that purging an error by the beginning of construction allows rework to be done 10 to 100 times less expensively than when it’s done in the last part of the process, during system test or after release. (Fagan 1976; Humphrey, Snyder, and Willis 1991; Leffingwell 1997; Willis et al. 1998; Grady 1999; Shull et al. 2002; Boehm and Turner 2004).
- 120. Elements of Wireframes Wireframes address three core elements 1) Information design – the placement and prioritization of the layout. Very inline with graphic design. 2) Navigation design – the location and structure of the navigation systems. 3) Interface design – expose the features that the app offers. What does it do? How does the structure expose this to users?
- 121. Wireframing tools
- 125. My kit
- 126. Wireframing tools Many people also frequently use the following to wireframe: InDesign, PowerPoint, Keynote, Visio & HTML
- 127. Wireframing methods
- 128. Wireframing: move fast • Sketch 6 to 8 thumbnail sketches in 5 minutes • Asses the results • Take a break • Rinse and repeat • Identify a solid solution – flush out variants on that idea • Move up to larger sketches • Rapidly iterate on variations of your favorite thumbnail • Slowly move towards a more refined result (lookup Prototyping by Todd Zaki Warfel)
- 131. Tools for prototyping Many people also frequently use the following to prototype: InDesign, PowerPoint, Keynote, Visio & HTML
- 132. Demo PDF prototype Demo Axure prototype
- 133. Specialized tools https://fluidui.com/ (Is it a wireframe or a prototype? )
- 134. Specialized tools https://fluidui.com/ (Is it a wireframe or a prototype? )
- 136. Not every prototype is made for the same purpose
- 137. The 5 types of prototypes
- 138. Type 1: To unify groups of people (often diverse people)
- 139. Type 2: To work through ideas
- 140. Type 3: Get buy in to the idea of UX design practices
- 141. Type 4: For usability testing
- 142. Type 5: Is it technically possible?
- 143. Build only what you need
- 144. Prototype formats • Digital prototypes • Paper Prototypes • Storyboards • Video based
- 145. Activity time
- 146. Our product: A mobile weather application… with a twist
- 147. Why do you check the weather? • What to wear? • Type of hat to wear • Type of shoes to wear • Type of jacket/coat • Bring an umbrella? • Drive the convertible? • Bike or bus? • Surfing related • Ski related • Biking related • Phases of the moon • Tide related • Hunting related •Tornado watching • Snow days • Global warming related • Spelunking • Water the garden? • Good day for the beach? • Leave early for work? • Monitor weather on a target date: like a vacation etc •Historical weather patterns for a day in relation to planning an event like a wedding • BBQ weather? • Planning to view changing leaves or any other seasonal event
- 148. What does this do? Test on at least 3 users in each round. 5 second test:
- 149. Steps: 1) Think & sketch 2) Test your design 3) Sketch some more 4) Test your design Mobile weather app
- 150. Steps: 1) Think & sketch 2) Test your design 3) Sketch some more 4) Test your design Mobile weather app
- 151. Steps: 1) Think & sketch 2) Test your design 3) Sketch some more 4) Test your design Mobile weather app
- 152. Steps: 1) Think & sketch 2) Test your design 3) Sketch some more 4) Test your design Mobile weather app
- 153. Testing designs can be easy. & Wireframes can be packed with meaning.
- 154. Usability testing A n e x t r e m e l y b r i e f i n t r o d u c t i o n .
- 155. What is usability? • In essence, how easy it is to use an interface • Good usability = easy to use = positive user experience • Poor usability = hard to use = negative user experience • Attributes that describe the usability of a design: • Usefulness • Efficiency • Effectiveness • Learnability • Satisfaction • Accessibility
- 156. What we are looking for: • Usefulness – Does it do what users need and want? • Efficiency – Does it perform its tasks efficiently? • Effectiveness – Does it perform its tasks the way it is intended to? • Learnability – Is it easy to learn use the interface? • Satisfaction – Does the user enjoy using it? • Accessibility – Is the product usable by those with disabilities?
- 157. Is this usable?
- 158. We can craft the usability as a way to influence the user experience
- 159. Accessibility: What’s good for a few, is often good for everyone.
- 160. Usability testing is our attempt to answer these questions – is it usable?
- 161. Nano Tests T h e 5 m i n u t e g e t s t a r t e d g u i d e t o u s a b i l i t y t e s t i n g .
- 162. Nano-usability tests as described in Observing the User Experience What we are going to do:
- 163. Bite sized guerilla usability testing designed to get you started in 5 minutes. Nano-usability testing
- 164. Nano-usability testing Our simple process: 1. Find one person who cares about your product. It doesn’t matter who. Seriously, anyone. 2. Arrange to watch them use the product. (in person) 3. Ask them to use the product to do something. Any function of the application. (I suggest you focus on the core feature) 4. Watch them do it. Keep your mouth shut. Just watch. 5. Ask yourself: what did I learn?
- 165. Keep your mouth shut. Did I mention,
- 166. You want to learn what is wrong. You are not trying to defend your creation. Remember,
- 167. Five users will find 80% of the problems (typically)
- 168. Many small tests, not one big test. Goal:
- 169. There is much more to usability testing. But this is a totally legit way to start. Naturally,
- 170. Beyond digital interfaces T h i s m o d e l wo r k s i n m a n y s c e n a r i o s
- 173. Wrapping up We a r e a l m o s t d o n e !
- 174. The foundation The three basic principles behind UCD: 1.Early focus on users and their tasks 2.Evaluation and measurement of product usage 3.Iterated design
- 175. users UCD Recap
- 176. Get a PDF of this presentation: pmcneil.com Get in touch: mcneilp@gmail.com or @designmeltdown or pmcneil.com
- 177. 1) Mini Brochure Site The good old content driven brochure style website. Assuming responsive web design is required. Involving users on this type of project feels hard at first. Investigate the user •Interview users •Use analytics Content Inventory Sitemap Wireframes Style Tile UI Design 5 Second tests Development Measure the results
- 178. 2) New iPhone app Interview users Survey users Flowchart Wireframes Prototype Usability testing Style Tile UI Design Usability testing Development Usability testing
Notes de l'éditeur
- This is not a view of the entire web site dev process
- This is not a view of the entire web site dev process
- This is not a view of the entire web site dev process