UXcellence: The Importance Of Human-Centered Design

1,157 views

Published on

For many creatives getting out of college and into the field, it's hard to know what career best fits them.

UXcellence: The Importance Of Human-Centered Design is meant to be a quick education to
- What UX is
- Why it is important
- When it's thought about
- Why it is important in today's society
- And a quick overview of how to do it

Published in: Design, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,157
On SlideShare
0
From Embeds
0
Number of Embeds
27
Actions
Shares
0
Downloads
37
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

UXcellence: The Importance Of Human-Centered Design

  1. 1. UXcellence The Importance of Human-Centered Design by Mike Townson
  2. 2. Mike Townson UX Designer I work at projekt202 and focus on user research and software design. miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014
  3. 3. AUSTIN DALLAS SEATTLE miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014
  4. 4. miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014 UXWhat is UX? Who is it? When is UX done? Why is UX important? How do I do UX? miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014
  5. 5. User Experience Definition The overall experience of a person using a product such as a website or computer application, especially in terms of how easy or pleasing it is to use.
  6. 6. User Experience Definition "If a website degrades the user experience too much, people will simply stay away."
  7. 7. WTF?
  8. 8. Before iPhone After iPhone
  9. 9. miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014 Who? miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014
  10. 10. CD DR IXD VD FET BET The UX Family Tree
  11. 11. CD UX Creative Director Could also be known as “Art Director, UX Lead, UX Manager” • Kicks off the project • Removes “road blocks” • Attends milestone meetings • Mentors design team • Takes the heat • Buys the tacos
  12. 12. DR Design Researcher Could also be known as “UX Researcher”, “Anthropologist” • Creates questionnaires • Performs observations • Collects & synthesizes data • Identifies problems and opportunity • Helps create project roadmap • Presents findings • Sometimes travels a lot
  13. 13. IXD Interaction Designer Could also be known as “Information Architect”, “UX Lead”, “Strategist” • Attends user observations • Helps Design Researcher • Creates presentation materials • Creates app flow, site map, wireframes, interaction diagrams, other planning materials. • Follows project from beginning to end.
  14. 14. VD Visual Designer Could also be known as “User Interface Designer”, “Pixel Pusher” • Works with the team to create visual designs. • Follows interaction diagrams • Produces UI Toolkits • Makes ready to use slices for FET • Guides client in the right direction for colors, textures, fonts, sizing, overall look & feel.
  15. 15. CD DR IXD VD FET BET The UX Family Tree
  16. 16. FET Front-End Technologist Could also be known as “Front-End Dev”, “Web Developer”, “App Dev” • Builds the codebase for all the user facing parts of the application. • Works with the team to make sure the end product matches the interaction diagram and color compositions. • Magic
  17. 17. BET Back-End Technologist Could also be known as “Back-End Dev”, “System Architect” • Makes sure the needed data can be delivered from the technology stack. • Black Magic
  18. 18. Who are we leaving out? Users
  19. 19. These people are users. (or models)
  20. 20. miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014 When? miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014
  21. 21. When is the best time to involve UX • At the beginning of a project planning • During the testing of a product • Any UX is better than no UX
  22. 22. The UX Process Discover Analyze Existing User Observations UX Strategy Ideation & User Validation Detailed Design & Development System Testing User Testing Design Specs & UX Pattern Library Ideate Design & Build
  23. 23. miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014 Why? miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014
  24. 24. This is the core of who we design for and the people we work/live with... ...and someone needs to fight for them. USER
  25. 25. “Let’s totally make an elephant slide.”
  26. 26. Just because it’s pretty... ..doesn’t mean it’s good.
  27. 27. Sony Remote for Google TV Nokia N-Gage Windows 8 Reliant Robin
  28. 28. miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014 How? miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014
  29. 29. CD DR IXDVD FET BET More like “Boy Meets World” Less like “Family Guy” How does this family work together?
  30. 30. Research Start Launch CD DR Ideation Design Development IXD VD FET BET Basic UX Schedule
  31. 31. Stakeholder Interviews Heuristic Evaluation Contextual Inquiries Synthesis Analysis Opportunity Definition Roadmap Start Launch CD DR Site-Map User Flow Framework Design Wireframes Interaction Document Functional Specs Color Theory Key Screen Design Unique Screen Comps UI Toolkit Framework Content Creation Styles Content Management System Middle-Ware DB Creation Magic Stuffs IXD VD FET BET Basic UX Schedule
  32. 32. Project Example: Video Watching Thing
  33. 33. Kick Off + Stakeholder Interview
  34. 34. Contextual Inquiries (User Observations)
  35. 35. Synthesis Theme Quote Quote Quote Theme Quote Quote Quote Theme Quote Quote Quote Theme Quote Quote Quote
  36. 36. Workflow Diagrams
  37. 37. Opportunity Matrix & Roadmap Low Risk Low Effort High Effort High Risk Key ImpactonResourcestoDesign&Develop Current Understanding of Features MED IMPACT HIGH IMPACT VERY HIGH IMPACT Robust Help FAQ User-generated custom reports Drag & drop sorting lists Breadcrumbs Color coding Best practice examples Wizards for common actions (drug testing, background checks) DW branding like DISA Role based navigation Consistent labeling Custom UI views for different types of users. Chat functionality Support ticketing Tutorials for advanced tasks. Real-time edit tracking File loading bars Preview of uploaded files Notes option on data Clear text hierarchy Promote useful data Progressive disclosure of data on page load Mark as viewed Notifications on completion Error messaging and system feedback Have a "favorite" feature for areas the user goes to often. Tool Tips New notification systems (SMS in app notifications) Employee Photographs Cross Browser Compatibility User-set logout timer Robust filtering and sorting User notifications on data edits Faster, cleaner, smarter searches. Landing pages with progressive content Match digital forms to paper order of forms View uploaded records for employee Daily digest email Role-specific actions other users cannot undertake Responsiveness Session memory to remember last states Descriptive call outs when compliance not met User-defined views (drag & drop dashboards) Creating buckets of tasks based on employee management Employee and paperwork search Batch editing Avoid DISA- specific acronyms Cleaner iconography Increase readability on all form factors
  38. 38. LOGO SEARCH USER ACCOUNT RECENT ACTIVITY WATCH AGAIN SUGGESTED POPULAR WHAT TO WATCH SUBSCRIPTIONS NAVIGATION
  39. 39. LOGO USER ACCOUNT WATCH AGAIN WHAT TO WATCH SUBSCRIPTIONSWhat to Watch My Channel My Subscriptions History Watch Later Play Lists Favorite Videos Liked Videos Recently Watched Video Recently Watched Video Recently Watched Video Video Watched Video Watched Video Watched Video Watched Description Description Description Description Suggested Video Description Suggested Video Description Suggested Video Description Suggested Video Description Popular Video to Watch Description Popular Video to Watch Description Popular Video to Watch Description Popular Video to Watch Description Popular Video to Watch Description Search
  40. 40. UI Toolkit (Library of Visual Elements)
  41. 41. Get to Dev’n (Code up the front end - Hook up the back end)
  42. 42. Get to Dev’n (Code up the front end)
  43. 43. All done?
  44. 44. Rinse & Repeat Detailed Design & Development System Testing User Testing Design Specs & UX Pattern Library
  45. 45. miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014 UXWhat is UX? Who is it? When is UX done? Why is UX important? How do I do UX? miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014
  46. 46. miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014 Questions? miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014

×