Chapter 5: UI Design Guidelines & Principles
Interaction Models
Definition
- Conceptual frameworks that describe how users and systems communicate during interaction.
Causes
- Need to understand and articulate the problem space before proposing design solutions.
Goals / Objectives
- Identify issues with current interfaces
- Clarify what users find difficult
- Determine desired functionality
- Assess whether all users share the same requirements
Importance
- Helps designers focus on user needs and interaction challenges early in the design process.
Procedures
- Use models to analyze the communication cycle between user and system.
- Donald Norman’s model divides interaction into two phases: execution and evaluation, with seven stages total.
Benefits
- Provides a structured way to diagnose usability problems.
Advantages & Disadvantages
- Advantages:
- Enables systematic analysis of user-system interaction
- Disadvantages:
Impact / Effect
- Guides design toward bridging gaps between user intentions and system responses.
Examples
- Not specified in notes beyond general use
Norman’s Seven-Stage Model of Action
Definition
- A detailed model of user interaction that describes the cognitive and physical steps from goal formation to outcome evaluation.
Causes
- Users must translate abstract goals into concrete actions and interpret system feedback.
Goals / Objectives
- Explain why some systems are harder to use than others by identifying breakdown points in interaction.
Importance
- Foundation for understanding usability issues like the Gulf of Execution and Gulf of Evaluation.
Procedures
- Seven stages:
- User establishes the goal
- Formulates intention
- Specifies actions at interface
- Executes action
- Perceives system state
- Interprets system state
- Evaluates system state with respect to goal
Benefits
- Helps pinpoint where users struggle in the interaction process.
Advantages & Disadvantages
- Advantages:
- Each stage can be used to check if gulfs are bridged
- Disadvantages:
Impact / Effect
- Highlights mismatches between user expectations and system behavior.
Examples
- Goal: “Invite a friend to lunch”
- Intentions: texting, voice call, email
- Actions: pick up phone → unlock → open app → send message
- “Delete text” goal can be achieved via Edit menu or Delete key (different intentions, same goal)
Gulf of Execution and Gulf of Evaluation
Definition
- Gulf of Execution: Gap between user’s intended action and actions the system allows.
- Gulf of Evaluation: Gap between system’s displayed state and user’s understanding of it.
Causes
- Poor mapping, lack of visibility, or inadequate feedback in interface design.
Goals / Objectives
- Reduce both gulfs to improve usability and user control.
Importance
- Central to diagnosing and fixing interaction problems in HCI.
Procedures
- Evaluate interfaces by asking:
- Can users determine what actions are possible?
- Can they map intentions to physical controls?
- Can they tell what state the system is in?
- Can they interpret system feedback correctly?
Benefits
- Leads to more intuitive and predictable systems.
Advantages & Disadvantages
- Advantages:
- Provides concrete criteria for usability inspection
- Disadvantages:
Impact / Effect
- Large gulfs cause confusion, errors, and frustration; small gulfs support smooth interaction.
Examples
- Not specified in notes (conceptual framework only)
Shneiderman’s Eight Golden Rules
Definition
- A set of eight foundational principles for effective user interface design.
Causes
- Need for consistent, efficient, and user-friendly interactive systems.
Goals / Objectives
- Guide the design and evaluation of user interfaces.
Importance
- Widely adopted best practices that improve learnability, efficiency, and satisfaction.
Procedures
- Apply the following rules:
- Strive for consistency: Use consistent actions, terminology, and layout.
- Enable frequent users to use shortcuts: Provide abbreviations, function keys, macros.
- Offer informative feedback: Respond to every action (modest for minor, substantial for major).
- Design dialog to yield closure: Group actions with clear beginnings and ends.
- Offer simple error handling: Detect errors and provide clear recovery.
- Permit easy reversal of actions: Support undo to reduce anxiety.
- Support internal locus of control: Let users initiate actions, not react to system prompts.
- Reduce short-term memory load: Use recognition over recall, chunking, and visible options.
Benefits
- Improves usability, reduces errors, and supports both novice and expert users.
Advantages & Disadvantages
- Advantages:
- Comprehensive coverage of key interaction concerns
- Disadvantages:
Impact / Effect
- Interfaces following these rules are more efficient, learnable, and satisfying.
Examples
- “Thank you” message after purchase completion (closure)
- Undo function in text editors (reversal)
- Consistent menu labels across screens (consistency)
Norman’s Design Principles
Definition
- Core interaction design concepts proposed by Donald Norman to improve usability.
Causes
- Observed mismatches between user expectations and system behavior.
Goals / Objectives
- Bridge the gulfs of execution and evaluation through better design.
Importance
- Foundational to modern interaction design thinking.
Procedures
- Apply six key principles:
- Visibility: Make functions and controls clearly visible.
- Feedback: Provide immediate, clear responses to user actions (via sound, animation, highlighting).
- Constraints: Limit possible actions to prevent errors (e.g., disable invalid inputs).
- Mapping: Ensure clear relationship between controls and their effects (e.g., stove knob layout).
- Consistency: Use similar operations and elements for similar tasks.
- Affordance: Design objects to suggest their use (e.g., buttons look pressable).
Benefits
- Creates intuitive, predictable, and error-resistant interfaces.
Advantages & Disadvantages
- Advantages:
- Each principle addresses a specific usability challenge
- Disadvantages:
- Poor implementation (e.g., bad mapping) leads to confusion
Impact / Effect
- Directly influences how users perceive and interact with systems.
Examples
- Better stove knob mapping (controls aligned with burners)
- Visual affordances in virtual buttons (e.g., raised appearance suggests clickability)
Techniques to Draw User Attention
Definition
- Methods used to highlight important interface elements or alerts.
Causes
- Need to guide user focus in cluttered or dynamic interfaces.
Goals / Objectives
- Make critical information noticeable without causing distraction.
Importance
- Ensures users notice essential feedback, warnings, or actions.
Procedures
- Use the following techniques appropriately:
- Blinking/Flashing: For urgent messages only; avoid long or frequent use.
- Bold: Effective for titles and captions; enhances visual hierarchy.
- Underlining: Makes text stand out but reduces legibility if overused.
- Sound: Best for errors or alerts; should be optional (user can turn off).
- Color: Use to highlight differences, group items, code status, or draw attention.
Benefits
- Improves information scanning and response time.
Advantages & Disadvantages
- Advantages:
- Multiple modalities support diverse user needs
- Disadvantages:
- Blinking/flashing can be annoying
- Sound may disturb or be inaccessible
- Underlining reduces readability
Impact / Effect
- Proper use enhances usability; misuse causes irritation or cognitive overload.
Examples
- Error “beep” in forms
- Red for “stop/danger,” green for “go/safe,” yellow for “caution”
Color Usage Guidelines
Definition
- Principles for using color effectively and meaningfully in interfaces.
Causes
- Color carries cultural and perceptual associations that affect interpretation.
Goals / Objectives
- Use color to support understanding, not confuse or mislead.
Importance
- Color is a powerful but easily misused design element.
Procedures
- Use color to:
- Highlight differences
- Group related information
- Code simple messages (e.g., error = red)
- Draw attention
- Indicate status
- Conform to user expectations:
- Red: stop, fire, danger, hot
- Yellow: caution, slow
- Green: go, OK, safe
- Blue: cold, water, calm, neutral
Benefits
- Enhances recognition, scanning, and emotional response.
Advantages & Disadvantages
- Advantages:
- Quick visual coding of meaning
- Disadvantages:
- Cultural differences may cause misinterpretation
Impact / Effect
- Appropriate color use improves usability; inappropriate use causes errors or confusion.
Examples
- Red error messages
- Green success indicators
- Blue for water-related icons
Types of Errors: Slips vs. Mistakes
Definition
- Slip: Correct goal and intention, but wrong action executed.
- Mistake: Incorrect goal or intention due to misunderstanding.
Causes
- Slips: Caused by interface design flaws (e.g., poor layout, lack of feedback).
- Mistakes: Caused by lack of system understanding or incorrect mental models.
Goals / Objectives
- Differentiate error types to apply appropriate design solutions.
Importance
- Informs targeted design interventions (e.g., better layout vs. better onboarding).
Procedures
- Slips occur during action execution (stages 3–4 in Norman’s model).
- Mistakes occur during goal/intention formation (stages 1–2).
Benefits
- Enables precise error prevention strategies.
Advantages & Disadvantages
- Advantages:
- Clear distinction leads to better fixes
- Disadvantages:
Impact / Effect
- Misdiagnosing error type leads to ineffective solutions.
Examples
- Slip: Choosing “Quit” instead of adjacent command; closing window instead of resizing
- Mistake: Using MS Word to design a name card (wrong tool for task)
Error Prevention and Handling Solutions
Definition
- Design strategies to reduce errors and support recovery.
Causes
- User limitations and interface design flaws lead to interaction failures.
Goals / Objectives
- Minimize errors and make recovery easy and non-punitive.
Importance
- Errors are inevitable; good design anticipates and mitigates them.
Procedures
- For slips:
- Provide adequate separation between selectable elements
- Minimize typing (use menus instead)
- Give clear feedback on system state
- For mistakes:
- Improve user understanding of the system (e.g., onboarding, help)
- For error messages (Nielsen, 2001), ensure they are:
- Explicit: Clearly indicate something went wrong
- Human-readable: Use plain language, not technical terms
- Polite: Avoid blaming the user
- Precise: Describe the exact problem
- Constructive: Offer actionable solutions
Benefits
- Reduces frustration, builds trust, and supports learning.
Advantages & Disadvantages
- Advantages:
- Constructive error messages improve task completion
- Disadvantages:
- Poor error messages increase user stress
Impact / Effect
- Good error handling turns failures into learning opportunities.
Examples
- “File not found. Did you mean ‘report_v2.docx’?” (constructive, polite, precise)
Definition
- Official UI/UX standards provided by major technology platforms.
Causes
- Need for consistent, native-feeling experiences on each platform.
Goals / Objectives
- Ensure apps meet user expectations for a given ecosystem.
Importance
- Users expect interfaces to follow platform conventions.
Procedures
- Follow established guidelines such as:
- Google Material Design
- Apple iOS Human Interface Guidelines
- Microsoft Design Guidelines
Benefits
- Improves learnability and user satisfaction on each platform.
Advantages & Disadvantages
- Advantages:
- Leverages user familiarity with platform norms
- Disadvantages:
- Requires adaptation for cross-platform apps
Impact / Effect
- Apps that violate platform norms feel “foreign” or confusing.
Examples