8b) UX Design Principles and Guidelines
Framework to structure UX design principles and guidelines - part 1
*Cycle* 1. Assessment - Perceiving the state of the world - Interpreting the perception - Evaluation of interpretations 2. Planning - Goals - Intention to act 3. Translation - Sequence of actions 4. Physical Actions - Execution of the action sequence 5. Outcomes "The World"
Framework to structure UX design principles and guidelines - part 2
*Cycle* 1. Assessment of outcomes via feedback (cognitive and sensory actions) 2. Planning (cognitive and sensory actions) 3. Translation plans into action specifications (cognitive and sensory actions) 4. Physical Actions (also sensory actions) 5. Outcomes
Broad Guidelines - Use of language
Avoid poor attempts at humor Avoid use of anthropomorphism Avoid using first-person speech Avoid condescending help - Examples, Clippy and Bob Use positive psychological tone 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"
Physical Actions: Design for Understandability - Error Prevention
Different things should look and act differently Risky (consequential, hard to recover from errors) actions are separated from frequently used ones Avoid lapses - keep task steps short, include forcing functions that require a sequence of steps (trade off of user freedom) Disable illegal commands
Broad Guidelines - Consistency
Do similar things in different places the same way Label similar things the same A custom design style book can help
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 - <10 sec decay - Rehearsal can impact decay Long term memory - Infinite in size and duration - Extensive rehearsal transfers chunks Chunk is a unit of memory or perception - Hard: M W B C R A L O A B I M B F I - Easier: MWB CRA LOA BIM BFI - Easiest: BMW RCA AOL IBM FBI Stacking - task interruptions, limited depth
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
Physical Actions: Design for Understandability - Human Errors
Failure to execute a learned task - Slip: action not carried out as intended or planned - Lapse: missed actions and omissions due to short term memory failure - Interruptions, loss of intent - Typically found in skilled behavior - Most common human error - due to inattention Use the wrong task - Mistakes - A type of error caused by a faulty plan/ intention - Typically found in rule-based or problem solving behavior
Assessment
Feedback wording - Helpful, informative - Positive psychological tone; it's the system's fault - Language of the user and domain context
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
Outcomes
Internal, invisible effect/result within system Outcomes must be revealed to user via system feedback Where usefulness lives Functional affordance of non-user-interface system functionality Issues are about computational errors, software bugs
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
Physical Actions: Help Users Do Tasks
Necessary physical affordances in user interface Sensing UI objects for and during manipulation Manipulating UI objects, making physical actions Avoid physical awkwardness and fatigue; e.g., shifting from mouse to keyboard constantly Accommodate disabilities - Range of motion, fine motor control, vision, or hearing Fitts' law issues
Outcomes: Design for Efficiency - Performance
Perceptual fusion - two stimuli within perceptual cycle appear fused; Tp ~100 msec Response times: • < 100 msec - instantaneous • 0.1 - 1.0 sec - user notices the delay • 1.5 sec - display busy indicator • >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
Translation: Task Efficiency
Provide alternative ways to perform tasks Provide shortcuts Provide keyboard alternatives to avoid physical "switching" actions Task thread continuity - Anticipate most likely next action, step, or task path - If you tell them what they should do, help them get there Do not make user redo any work, reenter data Retain user state information - Example, having to find folder you are working in, over and over Keep the user in control - Good interfaces are explorable, errors are forgiven
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
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 - Similar objects for similar kinds of functions - Consistent wording to express similar choices 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
Norman's Interaction Model Execution/Evaluation Action Cycle
World >> Evaluation (Comparing what happened with what we wanted to happen) >> Goals (What we want to happen) >> Execution (What we do to the world) >> World