User centered design workshop


Published on

Published in: Technology, Education
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • 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
  • User centered design workshop

    1. 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 .
    2. 2. Designer’s are crazy
    3. 3. We are particular about type My favorite font!
    4. 4. Stretched type is not fun A kitten dies every time this happens – but it’s still not ok
    5. 5. What’s wrong here? Sounds…awkward? Kerning matters!
    6. 6. Programmers are crazy too
    7. 7. No matter what: The previous guys code is crap.
    8. 8. JavaScript sucks…ex: Every script is executed in a single global namespace that is accessible in browsers with the window object.
    9. 9. Interactive designers are no different
    10. 10. Save the floppy disk
    11. 11. Buttons vs links Good: Bad: Sample debate:
    12. 12. Should designers learn to code? 011110010110010101110011
    13. 13. It’s not crazy… it’s passion
    14. 14. 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 .
    15. 15. 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
    16. 16. 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
    17. 17. Get in touch: or @designmeltdown or
    18. 18. Today's agenda 1. An overview of the User-Centered Design Process (90 min) 2. Deep dives into key topics (70 min)
    19. 19. PDF download at the end Got links?
    20. 20. I loathe bulleted presentations… Warning, impending hypocrisy
    21. 21. This is the tip of the iceberg Caution,
    22. 22. The User-Centered Design Process Part 1:
    23. 23. Backgrounds The background of UX professionals
    24. 24. Your backgrounds From the pre-conference survey: A previous group:
    25. 25. 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.
    26. 26. 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
    27. 27. Sure seems reasonable
    28. 28. Peeling potatoes vs
    29. 29. users define concept designdevelop deploy UCD Process overview UCD is a state of mind & it is not a one man show Start here…
    30. 30. UCD Step 1: Defining the project users define concept designdevelop deploy
    31. 31. Define the scale • Replacement or brand new product • Update to an existing product
    32. 32. Documentation Many options to select from
    33. 33. 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)?
    34. 34. Generate documentation Site maps – defines the sites content and information architecture Information Architecture (IA) is an entire field of work Awesome resource: Source:
    35. 35. Sitemap tools – text editor Sitemaps can be simple outlines and remind us that the purpose is more important than the tool.
    36. 36. Flowcharts Sometimes the flow is more important than a chart of all the pages. Source:
    37. 37. Generate documentation • Activity diagrams – Flowcharts showing how a process will work Source: &
    38. 38. 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
    39. 39. Content inventories Learn more: Responsive Design Workflow by Stephen Hay
    40. 40. Site planning answers the question: What am I designing?
    41. 41. User research happens in concert with the fundamental project definition
    42. 42. Documenting users • Write personas – A rich description of typical users • • Write use case scenarios – Written descriptions of how a product will be used describing common scenarios •
    43. 43. 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)
    44. 44. 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
    45. 45. 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
    46. 46. UCD boils down to seeking meaningful design insights over random acts of design
    47. 47. In the Define phase we include the user by inquiring of them
    48. 48. Activity time
    49. 49. Our product: A new tool to help holiday shoppers stay organized, find gift ideas & score the best deals
    50. 50. Steps: 1) Reflect 2) Ask questions 3) Answer questions 4) Reflect Time box 5 minutes per step organized, gift ideas & deals
    51. 51. Steps: 1) Reflect 2) Ask questions 3) Answer questions 4) Reflect Time box 5 minutes per step organized, gift ideas & deals
    52. 52. Steps: 1) Reflect 2) Ask questions 3) Answer questions 4) Reflect Time box 5 minutes per step organized, gift ideas & deals
    53. 53. Steps: 1) Reflect 2) Ask questions 3) Answer questions 4) Reflect Time box 5 minutes per step organized, gift ideas & deals
    54. 54. Share some results
    55. 55. My results: 1) The list repeats itself every year 2) Zero carry over year to year 3) Thoughtfulness over price tag
    56. 56. User research isn’t as hard as it might sound
    57. 57. UCD Step 2: Create concepts users define concept designdevelop deploy
    58. 58. Developing concepts includes • Interpret the documentation to develop possible solutions • Shift from listening to problem solving • Build wireframes and prototypes • User testing
    59. 59. 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!
    60. 60. 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
    61. 61. Workflow A note on:
    62. 62. Iterations are the key Wireframe something Visual design Test with a prototype Discover something
    63. 63. Lean on your user insights and work magic Beautiful, unicorn magic
    64. 64. Video time Source: Usability test with a paper prototype
    65. 65. 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
    66. 66. More on usability testing in the second half.
    67. 67. In the Concept phase we include the user via Exploratory based usability tests
    68. 68. UCD Step 3: Design visual solutions users define design concept develop deploy
    69. 69. Design the interface using the blueprints Finally,
    70. 70. So much more than a suggestion Wireframes,
    71. 71. Sample wireframe
    72. 72. Sample wireframe
    73. 73. Be an interior designer
    74. 74. Style Tiles A stepping stone towards the full design: Minimize the radical leap from idea to visual design:
    75. 75. A design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web. Style tiles:
    76. 76. Establish the visual voice before committing to a full blown design Style tiles:
    77. 77. An iterative tool for visual design Style tiles:
    78. 78. UI Design tools
    79. 79. UI Design tools
    80. 80. UI Design tools
    81. 81. 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%
    82. 82. In the Design phase we include the user via assessment based usability test
    83. 83. UCD Step 4: Development users define develop design concept deploy
    84. 84. Documentation can really pay off This is when all that
    85. 85. Toss it over the fence and forget about it You do not get to
    86. 86. In the Develop phase we include the user via Validation based usability test
    87. 87. UCD Step 5: Deploy into the wild users define deploy designdevelop concept
    88. 88. In the Deploy phase we include the user by measuring the use of the product
    89. 89. The foundation 1.Early focus on users and their tasks 2.Evaluation and measurement of product usage 3.Iterated design
    90. 90. Google Analytics Who What When From Events Goals Conversions And much more
    91. 91. Crazy Egg
    92. 92. Inspectlet
    93. 93. The definition of the next project Ideas and insights from here become
    94. 94. 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)
    95. 95. x x Did you notice something missing?
    96. 96. Do you like to read?
    97. 97. Sources Books referenced in this presentation & others I recommend:
    98. 98. Take 10 minutes… Break time Come back for some free books
    99. 99. Thank you for completing the survey!
    100. 100. Deep dives Part 2:
    101. 101. 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
    102. 102. users UCD Recap Because it is a lot to absorb:
    103. 103. Part 2 Outline What we will cover: 1.Interviews & Surveys 2.Wireframes & prototypes 3.Usability testing
    104. 104. Interviewing users A b r i e f g u i d e
    105. 105. Interviews will humanize your apps problems
    106. 106. Interviews almost always lead to ideas, solutions and features that you had not thought of.
    107. 107. Tips for interviewing users
    108. 108. 1) Interviewing is not selling – don’t defend your app – ask more questions
    109. 109. “Why is that feature important to you?” “Describe what you wanted to happen”
    110. 110. 2) Get actual users – not just your office neighbor
    111. 111. 3) Don’t ask hypothetical questions
    112. 112. 4) Embrace awkward silence
    113. 113. 5) Shut up – it’s not a conversation
    114. 114. After a round of interviews, use a survey to validate the results
    115. 115. 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!!!
    116. 116. Wireframes & Prototypes A b r i e f g u i d e
    117. 117. 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).
    118. 118. 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?
    119. 119. Wireframing tools
    120. 120. Wireframing tools
    121. 121. Wireframing tools
    122. 122. Wireframing tools
    123. 123. My kit
    124. 124. Wireframing tools Many people also frequently use the following to wireframe: InDesign, PowerPoint, Keynote, Visio & HTML
    125. 125. Wireframing methods
    126. 126. 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)
    127. 127. Wireframes should be iterative
    128. 128. From wireframe to prototype
    129. 129. Tools for prototyping Many people also frequently use the following to prototype: InDesign, PowerPoint, Keynote, Visio & HTML
    130. 130. Demo PDF prototype Demo Axure prototype
    131. 131. Specialized tools (Is it a wireframe or a prototype? )
    132. 132. Specialized tools (Is it a wireframe or a prototype? )
    133. 133. Consider your workflow Again,
    134. 134. Not every prototype is made for the same purpose
    135. 135. The 5 types of prototypes
    136. 136. Type 1: To unify groups of people (often diverse people)
    137. 137. Type 2: To work through ideas
    138. 138. Type 3: Get buy in to the idea of UX design practices
    139. 139. Type 4: For usability testing
    140. 140. Type 5: Is it technically possible?
    141. 141. Build only what you need
    142. 142. Prototype formats • Digital prototypes • Paper Prototypes • Storyboards • Video based
    143. 143. Activity time
    144. 144. Our product: A mobile weather application… with a twist
    145. 145. 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
    146. 146. What does this do? Test on at least 3 users in each round. 5 second test:
    147. 147. Steps: 1) Think & sketch 2) Test your design 3) Sketch some more 4) Test your design Mobile weather app
    148. 148. Steps: 1) Think & sketch 2) Test your design 3) Sketch some more 4) Test your design Mobile weather app
    149. 149. Steps: 1) Think & sketch 2) Test your design 3) Sketch some more 4) Test your design Mobile weather app
    150. 150. Steps: 1) Think & sketch 2) Test your design 3) Sketch some more 4) Test your design Mobile weather app
    151. 151. Testing designs can be easy. & Wireframes can be packed with meaning.
    152. 152. 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 .
    153. 153. 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
    154. 154. 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?
    155. 155. Is this usable?
    156. 156. We can craft the usability as a way to influence the user experience
    157. 157. Accessibility: What’s good for a few, is often good for everyone.
    158. 158. Usability testing is our attempt to answer these questions – is it usable?
    159. 159. 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 .
    160. 160. Nano-usability tests as described in Observing the User Experience What we are going to do:
    161. 161. Bite sized guerilla usability testing designed to get you started in 5 minutes. Nano-usability testing
    162. 162. 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?
    163. 163. Keep your mouth shut. Did I mention,
    164. 164. You want to learn what is wrong. You are not trying to defend your creation. Remember,
    165. 165. Five users will find 80% of the problems (typically)
    166. 166. Many small tests, not one big test. Goal:
    167. 167. There is much more to usability testing. But this is a totally legit way to start. Naturally,
    168. 168. 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
    169. 169. Presentation Planning a
    170. 170. New business Starting a
    171. 171. Wrapping up We a r e a l m o s t d o n e !
    172. 172. 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
    173. 173. users UCD Recap
    174. 174. Get a PDF of this presentation: Get in touch: or @designmeltdown or
    175. 175. 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
    176. 176. 2) New iPhone app Interview users Survey users Flowchart Wireframes Prototype Usability testing Style Tile UI Design Usability testing Development Usability testing