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