Uploaded byPatrick McNeil
Intro to User Centered Design Workshop
The document provides an overview of user-centered design (UCD) principles and processes for effective web design. It covers the importance of understanding user needs, the stages of the UCD process, and tools for creating wireframes and prototypes. Additionally, it discusses current trends in web design and emphasizes the iterative nature of design and testing.
More Related Content
![Designing with Lean UX : Rapid Product Design [UX Lisbon 2014]](https://cdn.slidesharecdn.com/ss_thumbnails/uxlisbon2014designingleanux-workshopslideshare-140604100358-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Intro to User Centered Design Workshop
![Copy of Presentation - [Your Organization Name]_20250924_181258_0000.pdf](https://cdn.slidesharecdn.com/ss_thumbnails/copyofpresentation-yourorganizationname202509241812580000-251117131601-9744dd2d-thumbnail.jpg?width=640&height=640&fit=bounds)
![Laminated_Springs[1]. Machine design practice](https://cdn.slidesharecdn.com/ss_thumbnails/laminatedsprings1-251116120255-2a3c06fb-thumbnail.jpg?width=640&height=640&fit=bounds)
Intro to User Centered Design Workshop
- 1. Interactive Design What youneed to know to be an effective web designer
- 2.
- 4. We are particularabout type My favorite font!
- 5. Stretched type isnot fun A kitten dies every time this happens – but it’s still not ok
- 6.
- 7. Interactive designers are nodifferent
- 8. Save the floppydisk
- 9. Buttons vs links Good: Bad: Sampledebate: http://www.ixda.org/node/15621
- 10. Should designers learn tocode? 011110010110010101110011
- 11. It’s not crazy… it’spassion
- 12. Are you this enthusiasticabout interactive design?
- 13. Hello, I’m Patrick AndI have an obsession with the web
- 14. Get in touch: mcneilp@gmail.com or@designmeltdown or pmcneil.com
- 15. Today's agenda 1. TheUser-Centered Design Process (2 hrs) 2. Core technologies of the web (15 min) 3. Hot topics & trends (30 min)
- 16. Got links? PDF download atthe end
- 17.
- 18. Backgrounds The background ofUX professionals
- 19. Your backgrounds From thepre-conference survey
- 20. You’re already an interactivedesigner You just need some new tools & a fresh perspective
- 21. UCD gives us thelens we need
- 22. 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.
- 23.
- 24. UCD Process overview UCDis a state of mind & it is not a one man show Start here… define deploy concept users develop design
- 25. UCD Step 1: Definingthe project define deploy develop users concept design
- 26. Define the scale •Replacement or brand new product • Update to an existing product
- 27. 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)?
- 28. Generate documentation • Writepersonas – 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
- 29. Generate documentation • Activitydiagrams – 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/
- 30. 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/
- 31. Methods for gatheringdata • 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)
- 32. As a resultwe 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
- 33.
- 34. Tools of thetrade • 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!)
- 35. Learn more If youwould like to learn more about this phase: Learn to make: • Personas • Concept models • Site maps • Flowcharts • Wireframes • Design Briefs • Usability plans • Usability reports
- 36. UCD boils downto seeking meaningful design insights over random acts of design
- 37.
- 38. Our product: A newtool to help holiday shoppers stay organized, find gift ideas & score the best deals
- 39. Steps: 1) 2) 3) 4) Reflect Ask questions Answer questions Reflect Timebox 5 minutes per step organized, gift ideas & deals
- 40. Steps: 1) 2) 3) 4) Reflect Ask questions Answer questions Reflect Timebox 5 minutes per step organized, gift ideas & deals
- 41. Steps: 1) 2) 3) 4) Reflect Ask questions Answer questions Reflect Timebox 5 minutes per step organized, gift ideas & deals
- 42. Steps: 1) 2) 3) 4) Reflect Ask questions Answer questions Reflect Timebox 5 minutes per step organized, gift ideas & deals
- 43.
- 44. My results: 1) Thelist repeats itself every year 2) Zero carry over year to year 3) Thoughtfulness over price tag
- 45. UCD isn’t socomplex and you didn’t even need to know HTML
- 46. UCD Step 2: Createconcepts define deploy develop users concept design
- 47. 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)
- 48. Wireframes A schematic orblueprint 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!
- 49. Elements of Wireframes Wireframesaddress 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?
- 50. Wireframing tools Many peoplealso frequently use the following to wireframe: InDesign, PowerPoint, Keynote, Visio & HTML
- 51.
- 52.
- 53. Prototypes Creating the illusionof 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
- 54. Tools for prototyping Manypeople also frequently use the following to prototype: InDesign, PowerPoint, Keynote, Visio & HTML
- 55. Demo PDF prototype DemoAxure prototype
- 56. Specialized tools https://fluidui.com/ (Isit a wireframe or a prototype? )
- 57. Specialized tools https://fluidui.com/ (Isit a wireframe or a prototype? )
- 58. Lean on youruser insights and work magic Beautiful, unicorn magic
- 59. User testing Great, sohow do we actually test this stuff?
- 60. User testing tools Guerrillatesting is the place to start (and end): http://silverbackapp.com/
- 61. Iterations are thekey Wireframe something Discover something Test with a prototype
- 62. Cost to change/fix 1xcost 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).
- 63. Test early &often
- 64. Results: A set ofwireframes and prototypes packed with meaningful design decisions.
- 65. Video time Usability testwith a paper prototype Source: http://www.youtube.com/watch?v=9wQkLthhHKA
- 66. Observations • It takespractice • 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
- 67. UCD Step 3: Designvisual solutions define deploy develop concept users design
- 68. Finally, Design the interface usingthe blueprints
- 69. Wireframes, So much morethan a suggestion
- 70.
- 71.
- 72. Be an interiordesigner
- 73.
- 74.
- 75. More testing! Test theinterface using the same tools
- 76. User testing tools Userobservation
- 77.
- 78. This is whenall that Documentation can really pay off
- 79. You do notget to Toss it over the fence and forget about it
- 80.
- 81. UCD Step 5: Deployinto the wild define deploy develop concept users design
- 82. Still testing, butit looks a little different: Monitor and look for helpful insights
- 83.
- 84.
- 85.
- 86.
- 87. Ideas and insightsfrom here become The definition of the next project
- 88. User Centered Design define UXDesigners & Information Architects SEO and web optimization folks deploy concept users Interaction Designers (IxD) develop design Front end dev’s & programmers UI Designers
- 89. x x Did you notice somethingmissing?
- 90.
- 91. Do you liketo read?
- 92. Sources Books referenced inthis presentation & others I recommend:
- 93. Learning code The booksto get for a foundation in HTML, CSS and JavaScript
- 94. Break time Take 10minutes… Come back for some free books
- 95. Thank you for completingthe survey!
- 96. Part 2: Core technologies ofthe web A high level overview in 15 minutes or less
- 97.
- 98.
- 99.
- 100.
- 101.
- 102.
- 103.
- 105.
- 106. Part 3: Hot topicsand trends
- 107. Trend 1: Skeumorphic vs flatdesign The battle rages on…
- 108. The original debate Contributors: -MS Metro UI + iOS7 + Android - Responsive design - Greater focus on Type Source: http://sachagreif.com/flat-pixels/
- 109.
- 110. Less generic flatdesign Note the reduced focus on flat – and increased focus on overall style
- 111. Web skeuomorphs They tendtowards painful…and often feel very 2004 What not to do: http://skeu.it
- 112. So what is, theopposite of flat design?
- 113.
- 114. Trend 2: Mobile first Mobiledesign influencing desktop design
- 115. The Navicon onthe desktop
- 116.
- 117.
- 118. Slide out paneltools
- 119. Trend 3: Story telling Creatingstories instead of brochures
- 120.
- 121. Trend 4: Atmosphere Setting atone through style
- 122.
- 123.
- 124. Via thematic design Anice side effect of flat design – thematic design feels even more distinct.
- 125. Trends from thefuture Trendy fortune telling…satisfaction guaranteed…for 24 hours
- 126. Gestures Another step inthe mobile evolution
- 127.
- 128.
- 129. Video More video integration– video will be the new parallax
- 130.
- 131.
- 132. Finally, A few randompredictions That may, or may not hold true
- 133. Flat Design willfade in popularity as yet another trend. It’s downfall being its generic nature. Don’t get me wrong – these sites are delicious.
- 134. The desktop istruly going to become a secondary platform – it will be the afterthought mobile was 5 years ago.
- 135. Today's trends arethe retro trends of the future! We are just ahead of our time.
- 136. Get a PDFof this presentation: pmcneil.com Get in touch: mcneilp@gmail.com or @designmeltdown or pmcneil.com