Intro to User Centered Design Workshop

16,724
-1

Published on

In this three hour workshop I present an introduction to the UCD process, an overview of the basic technologies of the web and a survey of current Mobile Web Design trends.

Published in: Design, Technology

Intro to User Centered Design Workshop

  1. 1. Interactive Design What you need to know to be an effective web designer
  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?
  6. 6. Interactive designers are no different
  7. 7. Save the floppy disk
  8. 8. Buttons vs links Good: Bad: Sample debate: http://www.ixda.org/node/15621
  9. 9. Should designers learn to code? 011110010110010101110011
  10. 10. It’s not crazy… it’s passion
  11. 11. Are you this enthusiastic about interactive design?
  12. 12. Hello, I’m Patrick And I have an obsession with the web
  13. 13. Get in touch: mcneilp@gmail.com or @designmeltdown or pmcneil.com
  14. 14. Today's agenda 1. The User-Centered Design Process (2 hrs) 2. Core technologies of the web (15 min) 3. Hot topics & trends (30 min)
  15. 15. Got links? PDF download at the end
  16. 16. Part 1: The User-Centered Design Process
  17. 17. Backgrounds The background of UX professionals
  18. 18. Your backgrounds From the pre-conference survey
  19. 19. You’re already an interactive designer You just need some new tools & a fresh perspective
  20. 20. UCD gives us the lens we need
  21. 21. 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.
  22. 22. Peeling potatoes vs
  23. 23. UCD Process overview UCD is a state of mind & it is not a one man show Start here… define deploy concept users develop design
  24. 24. UCD Step 1: Defining the project define deploy develop users concept design
  25. 25. Define the scale • Replacement or brand new product • Update to an existing product
  26. 26. Define basic requirements • What should it do (features, functionality, what it does etc)? • 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)?
  27. 27. Generate documentation • 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
  28. 28. 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/
  29. 29. 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/
  30. 30. Methods for gathering data • 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)
  31. 31. As a result we have: • A clear description of the project • Specific, and measurable goals • A detailed understanding of the user • Vision for how the product will be used • Best of all, tangible assets the team can share
  32. 32. Building requirements Start here… Define Requirements Gather users Interpret Analyze
  33. 33. Tools of the trade • For charting (flowcharts etc): • Visio (PC) ($300) • OmniGraffle (MAC) ($99) • Axure (PC & MAC) ($289) (free to educators) • Card sorting • Online tool: OptimalSort ($109/month) • Free software (both free): • PC: UXSort • MAC: xSort • Survey tools • Survey Monkey (free, $17+) • Wufoo (free and up) • Google Docs (FREE!)
  34. 34. 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
  35. 35. UCD boils down to seeking meaningful design insights over random acts of design
  36. 36. Activity time
  37. 37. Our product: A new tool to help holiday shoppers stay organized, find gift ideas & score the best deals
  38. 38. Steps: 1) 2) 3) 4) Reflect Ask questions Answer questions Reflect Time box 5 minutes per step organized, gift ideas & deals
  39. 39. Steps: 1) 2) 3) 4) Reflect Ask questions Answer questions Reflect Time box 5 minutes per step organized, gift ideas & deals
  40. 40. Steps: 1) 2) 3) 4) Reflect Ask questions Answer questions Reflect Time box 5 minutes per step organized, gift ideas & deals
  41. 41. Steps: 1) 2) 3) 4) Reflect Ask questions Answer questions Reflect Time box 5 minutes per step organized, gift ideas & deals
  42. 42. Share some results
  43. 43. My results: 1) The list repeats itself every year 2) Zero carry over year to year 3) Thoughtfulness over price tag
  44. 44. UCD isn’t so complex and you didn’t even need to know HTML
  45. 45. UCD Step 2: Create concepts define deploy develop users concept design
  46. 46. Developing concepts includes • Interpret the documentation to develop possible solutions • Shift from listening to problem solving • Build wireframes • Create prototypes • User testing • This stage is much more iterative (or at least it should be)
  47. 47. 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!
  48. 48. 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?
  49. 49. Wireframing tools Many people also frequently use the following to wireframe: InDesign, PowerPoint, Keynote, Visio & HTML
  50. 50. Wireframing tools http://blokkfont.com/ http://www.wirify.com/
  51. 51. Paper wireframing http://www.uistencils.com/
  52. 52. 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
  53. 53. Tools for prototyping Many people also frequently use the following to prototype: InDesign, PowerPoint, Keynote, Visio & HTML
  54. 54. Demo PDF prototype Demo Axure prototype
  55. 55. Specialized tools https://fluidui.com/ (Is it a wireframe or a prototype? )
  56. 56. Specialized tools https://fluidui.com/ (Is it a wireframe or a prototype? )
  57. 57. Lean on your user insights and work magic Beautiful, unicorn magic
  58. 58. User testing Great, so how do we actually test this stuff?
  59. 59. User testing tools Guerrilla testing is the place to start (and end): http://silverbackapp.com/
  60. 60. Iterations are the key Wireframe something Discover something Test with a prototype
  61. 61. Cost to change/fix 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).
  62. 62. Test early & often
  63. 63. Results: A set of wireframes and prototypes packed with meaningful design decisions.
  64. 64. Video time Usability test with a paper prototype Source: http://www.youtube.com/watch?v=9wQkLthhHKA
  65. 65. Observations • It takes practice • Focus on the user experience of the app and not anything technical or secondary – it is about the essence of the app • Paper prototype allows for you to accommodate unexpected things • Record the session! • 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. UCD Step 3: Design visual solutions define deploy develop concept users design
  67. 67. Finally, Design the interface using the blueprints
  68. 68. Wireframes, So much more than a suggestion
  69. 69. Sample wireframe http://newsignature.com/blog/2011/08/06/a-quick-introduction-to-wireframing/#.UnD57PnXRvB
  70. 70. Sample wireframe http://newsignature.com/blog/2011/08/06/a-quick-introduction-to-wireframing/#.UnD57PnXRvB
  71. 71. Be an interior designer
  72. 72. UI Design tools http://www.adobe.com/products/photoshop.html http://html.adobe.com/edge/reflow/
  73. 73. UI Design tools http://macaw.co/ http://www.bohemiancoding.com/sketch/
  74. 74. More testing! Test the interface using the same tools
  75. 75. User testing tools User observation
  76. 76. UCD Step 4: Development define deploy concept users develop design
  77. 77. This is when all that Documentation can really pay off
  78. 78. You do not get to Toss it over the fence and forget about it
  79. 79. Guess what? More testing!
  80. 80. UCD Step 5: Deploy into the wild define deploy develop concept users design
  81. 81. Still testing, but it looks a little different: Monitor and look for helpful insights
  82. 82. Google Analytics http://www.google.com/analytics/ Who What When From Events Goals Conversions And much more
  83. 83. Optimizely https://www.optimizely.com/
  84. 84. Crazy Egg http://www.crazyegg.com/
  85. 85. Inspectlet http://www.inspectlet.com/
  86. 86. Ideas and insights from here become The definition of the next project
  87. 87. User Centered Design define UX Designers & Information Architects SEO and web optimization folks deploy concept users Interaction Designers (IxD) develop design Front end dev’s & programmers UI Designers
  88. 88. x x Did you notice something missing?
  89. 89. Large site redesigns are dead
  90. 90. Do you like to read?
  91. 91. Sources Books referenced in this presentation & others I recommend:
  92. 92. Learning code The books to get for a foundation in HTML, CSS and JavaScript
  93. 93. Break time Take 10 minutes… Come back for some free books
  94. 94. Thank you for completing the survey!
  95. 95. Part 2: Core technologies of the web A high level overview in 15 minutes or less
  96. 96. HTML & CSS Done!
  97. 97. User
  98. 98. User
  99. 99. Web Server
  100. 100. Web Server
  101. 101. Database
  102. 102. API
  103. 103. Questions?
  104. 104. Part 3: Hot topics and trends
  105. 105. Trend 1: Skeumorphic vs flat design The battle rages on…
  106. 106. The original debate Contributors: - MS Metro UI + iOS7 + Android - Responsive design - Greater focus on Type Source: http://sachagreif.com/flat-pixels/
  107. 107. Flat designs
  108. 108. Less generic flat design Note the reduced focus on flat – and increased focus on overall style
  109. 109. Web skeuomorphs They tend towards painful…and often feel very 2004 What not to do: http://skeu.it
  110. 110. So what is, the opposite of flat design?
  111. 111. Non-flat design
  112. 112. Trend 2: Mobile first Mobile design influencing desktop design
  113. 113. The Navicon on the desktop
  114. 114. Navicon tools
  115. 115. Slide out panels
  116. 116. Slide out panel tools
  117. 117. Trend 3: Story telling Creating stories instead of brochures
  118. 118. Tell a story
  119. 119. Trend 4: Atmosphere Setting a tone through style
  120. 120. Super sized imagery
  121. 121. Image tools
  122. 122. Via thematic design A nice side effect of flat design – thematic design feels even more distinct.
  123. 123. Trends from the future Trendy fortune telling…satisfaction guaranteed…for 24 hours
  124. 124. Gestures Another step in the mobile evolution
  125. 125. Gestures Cool resource: http://static.lukew.com/TouchGestureCards.pdf
  126. 126. Gesture tools
  127. 127. Video More video integration – video will be the new parallax
  128. 128. Video
  129. 129. Video tools
  130. 130. Finally, A few random predictions That may, or may not hold true
  131. 131. Flat Design will fade in popularity as yet another trend. It’s downfall being its generic nature. Don’t get me wrong – these sites are delicious.
  132. 132. The desktop is truly going to become a secondary platform – it will be the afterthought mobile was 5 years ago.
  133. 133. Today's trends are the retro trends of the future! We are just ahead of our time.
  134. 134. Get a PDF of this presentation: pmcneil.com Get in touch: mcneilp@gmail.com or @designmeltdown or pmcneil.com

×