UX Design Principles and Guidelines.pdf

UX Design Principles and Guidelines Achieve Usability Goals Norman’s Interaction Model Execution/Evaluation Action Cycle Donald Norman, The Design of Everyday Things, 1990 Execution/Evaluation Action Cycle: Stages of Action Gulf of Execution...

UX Design Principles and Guidelines Achieve Usability Goals Norman’s Interaction Model Execution/Evaluation Action Cycle Donald Norman, The Design of Everyday Things, 1990 Execution/Evaluation Action Cycle: Stages of Action Gulf of Execution Gulf of Evaluation Event (data) driven Person initiated Example – frozen pizza New state Framework to structure UX design principles and guidelines  Planning – Help Users Know What to Do Match user’s conception (mental model) of high-level task organization What system features exist and how to use them Possibilities for what users can do at every point Help users plan most efficient ways to complete tasks Keep users aware of task progress Provide cognitive affordances to remind users to complete tasks Translation: Help Users Know How To Do Something Effective cognitive affordances Users know/learn what actions are needed to carry out intentions Users successfully predict action outcomes Users determine how to get started Cognitive affordances are visible – legible text, font size, color, background contrast Timely, before associated exploit Similar cognitive affordances have consistent appearance Translation: Cognitive affordances are visible  Translation: Content and Meaning of Cognitive Affordance Use precise wording and naming for clarity in labels, menu titles, menu choices, icons, data fields E.g., complete labels by adding a noun  Make choices distinguishable but consistent Similar (different) names for similar (different) kinds of things Avoid multiple synonyms for the same thing Find the consistency problem(s) Similar objects for similar kinds of functions Consistent wording to express similar choices Translation: Content and Meaning of Cognitive Affordance Control complexity with object proximity and grouping By related tasks and functions (more on this later) Recognition over recall Recognition: remembering with the help of a visual clue Recall: remembering with no help Recognition is much easier Translation: Design for Learnability, Memorability and Human Memory Don’t assume because the interface tells the user something, they learn and remember it Working memory Small 7 ± 2 chunks 1.5 sec – display progress bar 2-Second-Rule: users should not have to wait longer than 2 seconds for common UI actions 3-Click-Rule – users should not have to wait longer than three clicks to do something useful Outcomes: Response Time (1 sec.) Outcomes: Response Time (0.1 sec) Outcomes: Automation Assessment: Design helping user know if interaction was successful Provide some type of feedback for all user actions Helps keep the user grounded in the interactive cycle Understandable error messages when things don’t work Progress feedback on long operations To prevent costly errors, solicit user confirmation before potentially destructive actions Information on alternatives But do not overuse and annoy Presentation of feedback visible, noticeable location; augment with audio Content, meaning of feedback Assessment Feedback wording Helpful, informative Positive psychological tone; it’s the system’s fault Language of the user and domain context Assessment Broad Guidelines: Simplicity Given two otherwise equivalent designs, the simplest is best (Ochham’s Razor)* Effective and simple is a challenging design objective 80/20 rule – 20% of functionality gets used 80% of the time Consistency Do similar things in different places the same way Label similar things the same A custom design style book can help * “Entities should not be multiplied without necessity.” William of Ockham, 14th century Franciscan friar Broad Guidelines Use of language More later on …  Avoid poor attempts at humor Grouping  Avoid use of anthropomorphism Color  Avoid using first-person speech Text  Avoid condescending help Accessibility  Examples, Clippy and Bob Web and small screen  Use positive psychological tone Internationalization  Avoid violent, negative, demeaning terms  Avoid use of psychologically threatening terms, such as “illegal,” “invalid,” and “abort”  Avoid use of term “hit”; instead use “press” or “click” Activity Work on the detailed design of your project, make sure to follow the UX guidelines during the whole Execution/Evaluation Action Cycle : 1. Planning: 2. Translation: 3. Physical Actions 4. Outcomes 5. Assessment