Intro to User Centered Design Workshop
•
11 likes•18,708 views
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.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Intro to User Centered Design Workshop
Similar to Intro to User Centered Design Workshop (20)
Recently uploaded
Recently uploaded (20)
Intro to User Centered Design Workshop
- 1. Interactive Design What you need to know to be an effective web designer
- 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
- 7. Interactive designers are no different
- 8. Save the floppy disk
- 9. Buttons vs links Good: Bad: Sample debate: http://www.ixda.org/node/15621
- 10. Should designers learn to code? 011110010110010101110011
- 11. It’s not crazy… it’s passion
- 12. Are you this enthusiastic about interactive design?
- 13. Hello, I’m Patrick And I have an obsession with the web
- 14. Get in touch: mcneilp@gmail.com or @designmeltdown or pmcneil.com
- 15. 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)
- 16. Got links? PDF download at the end
- 17. Part 1: The User-Centered Design Process
- 18. Backgrounds The background of UX professionals
- 19. Your backgrounds From the pre-conference survey
- 20. You’re already an interactive designer You just need some new tools & a fresh perspective
- 21. UCD gives us the lens 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.
- 24. UCD Process overview UCD is a state of mind & it is not a one man show Start here… define deploy concept users develop design
- 25. UCD Step 1: Defining the 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 • 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
- 29. 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/
- 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 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)
- 32. 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
- 34. 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!)
- 35. 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
- 36. UCD boils down to seeking meaningful design insights over random acts of design
- 37. Activity time
- 38. Our product: A new tool 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 Time box 5 minutes per step organized, gift ideas & deals
- 40. Steps: 1) 2) 3) 4) Reflect Ask questions Answer questions Reflect Time box 5 minutes per step organized, gift ideas & deals
- 41. Steps: 1) 2) 3) 4) Reflect Ask questions Answer questions Reflect Time box 5 minutes per step organized, gift ideas & deals
- 42. Steps: 1) 2) 3) 4) Reflect Ask questions Answer questions Reflect Time box 5 minutes per step organized, gift ideas & deals
- 44. My results: 1) The list repeats itself every year 2) Zero carry over year to year 3) Thoughtfulness over price tag
- 45. UCD isn’t so complex and you didn’t even need to know HTML
- 46. UCD Step 2: Create concepts 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 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!
- 49. 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?
- 50. Wireframing tools Many people also frequently use the following to wireframe: InDesign, PowerPoint, Keynote, Visio & HTML
- 53. 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
- 54. Tools for prototyping Many people also frequently use the following to prototype: InDesign, PowerPoint, Keynote, Visio & HTML
- 55. Demo PDF prototype Demo Axure prototype
- 56. Specialized tools https://fluidui.com/ (Is it a wireframe or a prototype? )
- 57. Specialized tools https://fluidui.com/ (Is it a wireframe or a prototype? )
- 58. Lean on your user insights and work magic Beautiful, unicorn magic
- 59. User testing Great, so how do we actually test this stuff?
- 60. User testing tools Guerrilla testing is the place to start (and end): http://silverbackapp.com/
- 61. Iterations are the key Wireframe something Discover something Test with a prototype
- 62. 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).
- 63. Test early & often
- 64. Results: A set of wireframes and prototypes packed with meaningful design decisions.
- 65. Video time Usability test with a paper prototype Source: http://www.youtube.com/watch?v=9wQkLthhHKA
- 66. 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
- 67. UCD Step 3: Design visual solutions define deploy develop concept users design
- 68. Finally, Design the interface using the blueprints
- 69. Wireframes, So much more than a suggestion
- 72. Be an interior designer
- 75. More testing! Test the interface using the same tools
- 76. User testing tools User observation
- 78. This is when all that Documentation can really pay off
- 79. You do not get to Toss it over the fence and forget about it
- 81. UCD Step 5: Deploy into the wild define deploy develop concept users design
- 82. Still testing, but it looks a little different: Monitor and look for helpful insights
- 87. Ideas and insights from here become The definition of the next project
- 88. 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
- 89. x x Did you notice something missing?
- 90. Large site redesigns are dead
- 91. Do you like to read?
- 92. Sources Books referenced in this presentation & others I recommend:
- 93. Learning code The books to get for a foundation in HTML, CSS and JavaScript
- 94. Break time Take 10 minutes… Come back for some free books
- 95. Thank you for completing the survey!
- 96. Part 2: Core technologies of the web A high level overview in 15 minutes or less
- 97. HTML & CSS Done!
- 98. User
- 99. User
- 100. Web Server
- 101. Web Server
- 102. Database
- 103. API
- 105. Questions?
- 106. Part 3: Hot topics and trends
- 107. Trend 1: Skeumorphic vs flat design 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. Flat designs
- 110. Less generic flat design Note the reduced focus on flat – and increased focus on overall style
- 111. Web skeuomorphs They tend towards painful…and often feel very 2004 What not to do: http://skeu.it
- 112. So what is, the opposite of flat design?
- 113. Non-flat design
- 114. Trend 2: Mobile first Mobile design influencing desktop design
- 115. The Navicon on the desktop
- 116. Navicon tools
- 117. Slide out panels
- 118. Slide out panel tools
- 119. Trend 3: Story telling Creating stories instead of brochures
- 120. Tell a story
- 121. Trend 4: Atmosphere Setting a tone through style
- 122. Super sized imagery
- 123. Image tools
- 124. Via thematic design A nice side effect of flat design – thematic design feels even more distinct.
- 125. Trends from the future Trendy fortune telling…satisfaction guaranteed…for 24 hours
- 126. Gestures Another step in the mobile evolution
- 128. Gesture tools
- 129. Video More video integration – video will be the new parallax
- 130. Video
- 131. Video tools
- 132. Finally, A few random predictions That may, or may not hold true
- 133. 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.
- 134. The desktop is truly going to become a secondary platform – it will be the afterthought mobile was 5 years ago.
- 135. Today's trends are the retro trends of the future! We are just ahead of our time.
- 136. Get a PDF of this presentation: pmcneil.com Get in touch: mcneilp@gmail.com or @designmeltdown or pmcneil.com