UX design 101


Published on

  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • People understand and interact with systems and environments based on mental representations developed from experience.
  • This is the Story Setting
  • The personas and mental models help determine this.
  • This will help determine your aesthetics later
  • Map to flows for the user to accomplish each of their goals.Consider what information is needed to accomplish their goals.Ensure each flow meets the requirements set out earlier
  • A strategy for managing information complexity in which only necessary or requested information is displayed at any given time.Break complex steps into smaller sections limiting the amount of information the user needs to consume during any given step.
  • Mock up how each step of the flow will be laid out.
  • After an experience, all that matters is what is remembered. This is what people will tell others about their experience.As it turns out, people are good at remembering the beginning and end of events, but not the middle.As long as the arduous, difficult, and unpleasant aspects in the experience are sandwiched between two pleasant memories, the user will see the overall experience as pleasant.
  • The greater the effort to accomplish a task, the less likely the task will be accomplished successfully.
  • The time it takes to make a decision increases as the number of alternatives increases
  • As the flexibility of a system increases, its usability decreases.Make the choice for the user and keep it simple.
  • Beauty in design results from purity of function. Start by making it functional, then strip it down to it’s most simplistic form.
  • Given a choice between functionally equivalent designs, the simplest design should be selected.
  • Aesthetic designs are perceived as easier to use than less-aesthetic designs
  • Never go more then 3 levels deep in a hierarchyIf text is justified keep it to 10-12 words per line (assuming 9-12 pt font)Don’t use italics on textAny changes in font size should be at least 2pt size differenceUse grayscale shades to further separate headers from blending into eachotherNever use more than 2 Font faces together
  • Color is used in design to attract attention, group elements, indicate meaning, enhance aestheticsSaturation is the amount of Gray in a hueBrightness is the amount of white in a hueChoose 5 colors for your color schemeAvoid using colors for aesthetics if they conflict with colors being used to indicate meaningUse the Mood of the story to determine the colors to be used. Visit Colourlovers.com and find pre-made pallets for your color scheme.
  • Using patterns that people are already familiar with makes designs more usable.Repetition makes it easier for the user as it reduces the learning curve.
  • Create consistent styles for elements like headers, text, links, buttons
  • Choose a color that has a purpose, either to highlight, show chunking, show separation, balance, etc…
  • Gradients indicate a light source giving it attributes such as depth, which are seen in real life.Be consistent to the light source as changes in gradients are interpreted by the brain as they are in real life.
  • Shadows enhance the impression that a light source exists and that the object has attributes seen in the real worldTop-Down Lighting Bias: A tendency to interpret shaded or dark areas of an object as shadows resulting from a light source above the object.
  • Borders define boundaries and will accent and object.
  • Rounding a corner shows attention to detail just as crown molding accents the edges of a room in a house.Large Rounded corners give a softer impression to the user and are often preferred to some demographics.
  • The time required to move to a target is a function of the target size and distance to the target
  • A property in which the physical characteristics of an object or environment influence its function
  • A phenomenon in which perception and behavior changes as a result of personal expectations or the expectations of others.Halo effect – Employers rate the performance of certain employees more highly than others based on their overall positive impression of those employees.Hawthorne effect – Employees are more productive based on their belief that changes made to the environment will increase productivityPygmalion effect – Students perform better or worse based on the expectations of their teacherRosenthal effect – Teachers treat students differently based on their expectations of how students will performPlacebo effect – Patients experience treatment effects based on their belief that a treatment will work.Demand characteristics – Participants in an experiment or interview provide responses and act in ways that they believe are expected by the experimenter or interviewer
  • There are five ways to organize information: category, time, location, alphabet, and continuum
  • Hierarchical organization is the simplest structure for visualizing and understanding complexity
  • Memory for recognizing things is better than memory for recalling things.
  • Bring attention to an area of text or image by highlighting no more than 10% of the visible design.
  • A phenomenom of memory in which noticeably different things are more likely to be recalled than common things.
  • Bring attention to an area of text or image by highlighting no more than 10% of the visible design.
  • Bring attention to an area of text or image by highlighting no more than 10% of the visible design.
  • Bring attention to an area of text or image by highlighting no more than 10% of the visible design.
  • 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 />