Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UX design 101

2,223 views

Published on

  • Be the first to comment

UX design 101

  1. 1. UX Design 101<br />- Dustin Kirk<br />Neustar<br />
  2. 2. Part 1: Tell A Story<br />Part 2: Keep It Simple<br />Part 3: Make It Look Great<br />
  3. 3. Part 1: Tell A Story<br />Part 2: Keep It Simple<br />Part 3: Make It Look Great<br />
  4. 4. Tell A Story<br />Know Your Audience<br />
  5. 5. Develop User Personas<br />John Doe<br />35 Years Old<br />Male<br />Reads Poetry<br />Enjoys long walks at the beach.<br />
  6. 6. Consider Mental Models<br />
  7. 7. Tell A Story<br />Construct The Story<br />
  8. 8. Choose The Theme<br />Business Professional<br />Artistic<br />Non-Profit<br />News / Journal<br />Etc…<br />
  9. 9. Gather Requirements<br />Business Requirements<br />Technical Constraints<br />Marketing<br />Customer Service<br />Sales<br />
  10. 10. Define The Plot<br />What is the beginning state?<br />What are the user goals?<br />What’s needed for success?<br />
  11. 11. Set The Tone<br />Boring<br />Casual<br />Excitement<br />Technical<br />Etc…<br />
  12. 12. Telling A Story<br />Storyboard<br />
  13. 13. Map The Flows<br />3a<br />1<br />2<br />3b<br />
  14. 14. Progressive Disclosure<br />2a<br />1<br />3<br />2b<br />2c<br />
  15. 15. Wireframe<br />1<br />
  16. 16. Sandwich Principal<br />good<br />good<br />bad<br />
  17. 17. Part 1: Tell A Story<br />Part 2: Keep It Simple<br />Part 3: Make It Look Great<br />
  18. 18. Part 1: Tell A Story<br />Part 2: Keep It Simple<br />Part 3: Make It Look Great<br />
  19. 19. Performance Load<br />
  20. 20. Hick’s Law<br />Menu<br />
  21. 21. Flexibility-Usability Tradeoff<br />
  22. 22. Form Follows Function<br />3:00<br />Form<br />Function<br />
  23. 23. Ockham’s Razor<br />
  24. 24. Part 1: Tell A Story<br />Part 2: Keep It Simple<br />Part 3: Make It Look Great<br />
  25. 25. Part 1: Tell A Story<br />Part 2: Keep It Simple<br />Part 3: Make It Look Great<br />
  26. 26. Make It Look Great<br />Aesthetics<br />
  27. 27. Aesthetic Usability Effect<br />
  28. 28. Legibility<br />Header<br /> Sub Header<br /> Sub Sub Header<br />Header<br />Sub Header<br />Sub Sub Header<br />Lorem ipsum dolor sit amet consectetuer<br /> adipiscingnonummy nibh euismod tincidunt <br />laoreet dolore magna aliquam erat volutpat. Utwisienim ad minim veniam, quisnostrudexercitationullamcorpersuscipitlobortisnislutaliquip ex ea commodoconsequat. Duisautemveleumiriure dolor in hendrerit in vulputatesolutanobiseleifend option conguenihilimperdiet doming id quod mazimplacerat facer possimassum. Typi non habentclaritateminsitam; estususlegentis in iis qui <br />lectoreslegere me lius quod ii leguntsaepius. Claritasestetiamprocessusdynamicus, qui sequitur mutationemconsuetudiumlectorum. Mirumestnotare quam litteragothica, quam nuncputamusparumclaram, anteposueritlitterarum<br />
  29. 29. Color Tips<br />Analogous Colors (side by side)<br />Complementary Colors (across)<br />Triadic Colors (equilateral triangle)<br />Quadratic Colors (corners of a box)<br />
  30. 30. Make It Look Great<br />Consistency<br />
  31. 31. White Space<br />
  32. 32. Design Patterns<br />Calendar<br />Home Link<br />Input Feedback<br />
  33. 33. Styles<br />
  34. 34. Make It Look Great<br />Details, Details, Details<br />
  35. 35. Color<br />
  36. 36. Gradients<br />
  37. 37. Shadows<br />
  38. 38. Borders<br />
  39. 39. Corners<br />
  40. 40. Spacing<br />
  41. 41. More Details…<br />Imagery<br />Wording<br />Timing<br />Accent Colors<br />Placement<br />Transparency<br />Sound<br />Icons<br />Animations<br />Padding<br />Size<br />Margins<br />Textures<br />Focus<br />Patterns<br />
  42. 42. Part 1: Tell A Story<br />Part 2: Keep It Simple<br />Part 3: Make It Look Great<br />
  43. 43. Part 1: Tell A Story<br />Part 2: Keep It Simple<br />Part 3: Make It Look Great<br />
  44. 44. UX Design 101<br />- Dustin Kirk<br />Neustar<br />
  45. 45. Bonus!<br />
  46. 46. Fit’s Law<br />
  47. 47. Affordance<br />Push<br />Push<br />Pull<br />
  48. 48. Expectation Effect<br />Halo effect<br />Hawthorne effect<br />Pygmalion effect<br />Placebo effect<br />Rosenthal effect<br />Demand characteristics<br />
  49. 49. Five Hat Racks<br />Alphabetical<br />Time<br />Location<br />Continuum<br />Category<br />A, B, C, D…<br />1990, 1991, 1992…<br />(on a map)<br />Height, Weight, Distance…<br />Plant / Animal<br />
  50. 50. Hierarchy<br />Stairs<br />Trees<br />Nests<br />
  51. 51. Recognition Over Recall<br />Name Five US Supreme Court Justices…<br />Clarence Thomas<br />John Roberts<br />Sonia Sotomayer<br />Stephen Colbert<br />John Stewart<br />Sandra Day O’Connor<br />David Souter<br />Oprah Winfrey<br />
  52. 52. Highlighting<br />“Nobody asked your opinion,” said Alice.<br />“Nobody asked YOUR opinion,” said Alice<br />“Nobody asked your opinion,” said Alice<br />“Nobody asked your opinion,” said Alice<br />“Nobody asked opinion,” said Alice<br />“Nobody asked your opinion,” said Alice<br />Bold, Italics, Underlining<br />Typeface<br />Color<br />Inversing<br />Blinking<br />Outline<br />
  53. 53. Von Restorf Effect<br />Grocery List<br />Milk<br />Butter<br />Cheese<br />Sugar<br />Penguin<br />Polar Bear<br />Oranges<br />Coffee<br />Lettuce<br />Flour<br />Lemon<br />
  54. 54. Ben Shneiderman<br />Eight Golden Rules<br />1. Strive for consistency.<br />2. Enable frequent users to use shortcuts.<br />3. Offer informative feedback.<br /> Design dialog to yield closure.<br />5. Offer simple error handling.<br />6. Permit easy reversal of actions.<br />7. Support internal locus of control.<br />8. Reduce short-term memory load.<br />
  55. 55. Jakob Nielsen<br />Ten Usability Heuristics<br />Visibility of system status<br />Match between system and real world<br />User control and freedom (undo/redo)<br />Consistency and standards<br />Error Prevention<br />Recognition rather than recall<br />Flexibility and efficiency of use (shortcuts for experts)<br />Aesthetic and minimalist design<br /> Help users recognize, diagnose, and recover from errors<br /> Help and documentation<br />
  56. 56. Books<br />Universal Principles of Design<br />Lidwell, Holden, Butler<br />Don’t Make Me Think<br />Krug<br />
  57. 57. UX Design 101<br />- Dustin Kirk<br />Neustar<br />

×