HCI Track-A Design Principles Week38

Design Principles in Human-Computer Interaction (HCI)

Overview

• Topic: Design principles in HCI, focusing on guidelines, principles, and theories.
• Goal: Understand differences between guidelines and principles, apply Shneiderman’s golden rules and Norman’s design principles, comprehend different types of errors, and recognize the role of theory in HCI.

---

Guidelines, Principles, and Theory

Guidelines

• Definition: Low-level, specific, and concrete rules of thumb to help build interfaces and avoid pitfalls.
• Characteristics:
  • Specific and Concrete: Provide direct instructions for particular situations.
  • Based on Best Practices: Derived from proven effective methods.
  • Shared Language: Offer common terms for designers to discuss interfaces.
• Challenges:
  • Overly Specific: May be difficult to generalize to other situations.
  • Incomplete: Might not cover all possible scenarios.
  • Possibility of Being Wrong: Guidelines can become outdated or incorrect.
• Examples:
  • 1986 Guidelines:
    • Provide visual output of the commands or keys pressed.
    • Highlight selected elements.
  • Usability.gov Guidelines:
    • Primary Navigation: Place in the left panel.
    • Avoid Horizontal Scrolling: It’s awkward and slows down users.
    • Use Bold Text Sparingly: Excessive bolding distracts users.
  • Modern Guidelines:
    • Apple Watch Digital Crown: Consistent interaction styles across apps.
    • Google’s Material Design: A public set of design rules for consistency.

Principles

• Definition: Higher-level concepts that are more theoretical and broadly applicable.
• Purpose: Help approach user interface problems more concretely.
• Three High-Level Principles:
  1. Determine User Skill Levels
  2. Identify the Tasks
  3. Choose an Interaction Style

Theory

• Definition: Frameworks that connect user interfaces to human behavior, often research-based.
• Role: Provide a deeper understanding that informs guidelines and principles.

---

High-Level Design Principles

1. Determine User Skill Levels

• Novice Users:
  • Characteristics: First-time users, unfamiliar with the interface.
  • Design Strategies:
    • Restrict actions to prevent overwhelm.
    • Provide guidance and feedback.
• Intermittent Users:
  • Characteristics: Use the system occasionally.
  • Design Strategies:
    • Implement signposting and consistent terminology.
    • Support recognition over recall.
• Expert Users:
  • Characteristics: Use the system frequently.
  • Design Strategies:
    • Streamline the interface to avoid unnecessary dialogs.
    • Provide shortcuts and embedded instructions.

2. Identify the Tasks

• Task Analysis:
  • Break down high-level tasks into smaller, manageable subtasks.
• Frequency Consideration:
  • Frequent Tasks: Offer shortcuts, dedicated keys, and buttons.
  • Infrequent Tasks: Use menus or context menus.

3. Choose an Interaction Style

• Options:
  • Direct Manipulation: E.g., drawing programs with graphical objects.
  • Command Languages: Typing commands to perform actions.
  • Menus and Toolbars: Navigating through options.
  • Forms and Data Entry: Filling out fields.
  • Natural Language: Typing or speaking in everyday language.
  • Gestures: Using movements for interaction.
• Considerations:
  • Depends on user expertise and task requirements.
  • No single style is universally superior.
  • Often a mix of styles is used.

---

Shneiderman’s Eight Golden Rules of Interface Design

Overview

1. Strive for Consistency
2. Seek Universal Usability
3. Offer Informative Feedback
4. Design Dialogs to Yield Closure
5. Prevent Errors
6. Permit Easy Reversal of Actions
7. Support Internal Locus of Control
8. Reduce Short-Term Memory Load

Detailed Explanation

1. Strive for Consistency

• Definition: Maintain uniformity in design elements and behaviors.
• Importance: Helps users transfer knowledge from one part of the interface to another.
• Examples:
  • Good Consistency:
    • MacOS Applications: All use Command + , for “Preferences.”
  • Poor Consistency:
    • Keynote vs. PowerPoint: Different shortcuts for “Redo” (Shift + Command + Z vs. Command + Y).

2. Seek Universal Usability

• Definition: Design interfaces adaptable to a wide range of users.
• Considerations:
  • Physical Abilities: Visual, motor, cognitive impairments.
  • Age and Experience: From novices to experts.
• Examples:
  • Responsive Web Design: Interfaces adapt to screen size.
  • Accessibility Features in iOS:
    • Bold text.
    • Reduce transparency.
    • Turn off animations.
• Curb Cut Effect:
  • Definition: Features designed for accessibility benefit all users.
  • Example: Sidewalk ramps help wheelchair users and those with strollers or luggage.

3. Offer Informative Feedback

• Definition: Provide immediate and clear feedback for user actions.
• Types of Feedback: can be modest
  • Minor Actions: Subtle responses.
  • Major Actions: More substantial indicators.
• Examples:
  • Downloading Files: Visual progress indicators.
  • Selecting Elements: Highlighting the selected item.
• Poor Feedback Example:
  • Windows Blue Screen of Death: Vague error messages that don’t inform the user.

4. Design Dialogs to Yield Closure

• Definition: Clearly indicate the completion of a task.
• Importance: Helps users understand progress and completion.
• Examples:
  • E-commerce Checkout Process:
    • Steps: Shopping Cart → Delivery → Payment → Confirmation.
    • Progress indicators guide users through the process.

5. Prevent Errors

• Definition: Design to minimize the chance of user errors.
• Strategies:
  • Gray Out Inactive Options: Prevent selection of invalid actions.
  • Input Validation: Restrict input to acceptable formats.
• Examples:
  • Email Clients: Warn when an attachment is mentioned but not included.
  • Form Fields: Only allow numeric input where appropriate.

6. Permit Easy Reversal of Actions

• Definition: Allow users to undo actions to reduce anxiety and encourage exploration.
• Importance: Enhances user confidence and control.
• Examples:
  • Undo Send in Emails: Delay sending to allow cancellation.
  • Version History in Documents: Revert to previous versions.

7. Support Internal Locus of Control

• Definition: Users should feel they are in charge of the interface.
• Avoid:
  • Unexpected Actions: Interfaces shouldn’t surprise users.
  • Over-Automation: Don’t let the system take excessive control.
• Examples:
  • Auto-Correct Features: Should be easily reversible or optional.
  • Clippy (Microsoft’s Paperclip Assistant): An example of intrusive assistance.

8. Reduce Short-Term Memory Load

• Definition: Minimize the cognitive burden on users.
• Human Limitations:
  • Magic Number: 7 ± 2 items can be held in short-term memory.
• Strategies:
  • Recognition over Recall: Design interfaces that allow users to recognize options rather than recall them.
• Examples:
  • Auto-Fill Verification Codes: Eliminates the need to remember codes.
  • Contact Lists in Phones: Users select names rather than recall numbers.

---

Don Norman’s Design Principles

Background

• Don Norman: Cognitive psychologist, contributed significantly to HCI.
• Key Work: “The Design of Everyday Things” (originally “The Psychology of Everyday Things”).

Six Principles

1. Visibility
2. Feedback (already covered)
3. Consistency (already covered)
4. Affordances
5. Natural Mapping
6. Constraints

Detailed Explanation

1. Visibility

• Definition: Important functions should be visible and easily discoverable.
• Graphical User Interfaces (GUIs):
  • More effective for novices due to visible options.
• Challenges:
  • Hidden Features: Hotkeys, gestures, and natural language interfaces may not be immediately apparent.
• Examples:
  • Command Line Interfaces: Require memorization; lack visibility.
  • Gestures on Touch Devices: Not always discoverable without guidance.

2. Affordances

• Definition: Design elements that suggest how they are to be used.
• Physical Affordances:
  • Door Handles: Suggest pulling.
  • Push Bars: Suggest pushing.
  • Joysticks and Sliders: Indicate their method of operation.
• Virtual Affordances:
  • Buttons: Should look clickable.
  • Early iPhone Calculator: Mimicked physical buttons to suggest interaction.
• Evolution:
  • Modern interfaces may have less obvious affordances as users become more familiar with digital interactions.

3. Natural Mapping

• Definition: Align controls with their effects in a way that is intuitive.
• Examples:
  • Car Seat Controls: Shaped like the seat sections they adjust.
  • Stove Burners:
    • Good Design: Controls arranged to match the layout of burners.
    • Poor Design: Controls not aligned, causing confusion.

4. Constraints

• Definition: Limit possible actions to prevent errors and simplify use.
• Types:
  • Physical Constraints: Shapes that prevent incorrect connections (e.g., USB ports).
  • Cultural Constraints: Conventions like red for stop, green for go.
  • Semantic Constraints: Meaning derived from the situation (e.g., placement of windshields).
  • Logical Constraints: Deduction based on logic (e.g., scrolling when more content is below).
• Examples:
  • USB Cables: Designed to fit one way (though USB-C has resolved this).
  • Interface Menus: Graying out unavailable options.

---

Understanding and Handling Errors

Types of Errors

1. Slips: Physical actions gone wrong (e.g., pressing the wrong key).
2. Lapses: Memory failures (e.g., forgetting to save a document).
3. Rule-Based Mistakes: Misapplication of good rules or application of bad rules.
4. Knowledge-Based Mistakes: Errors due to incorrect or incomplete knowledge.

Most Common Errors

• Slips and Lapses: Occur frequently due to human nature.

Strategies for Error Management

Preventing Errors

• Design Considerations:
  • Use constraints to limit incorrect actions.
  • Provide clear instructions and feedback.
• Examples:
  • Input Validation: Prevent entering letters in numeric fields.
  • Contextual Warnings: Alert when an email mentions an attachment but lacks one.

Handling Errors

• Recovery Options:
  • Undo Functionality: Allows users to reverse actions.
  • Clear Error Messages: Guide users to fix the issue.
• Examples:
  • Undo Send in Emails: Offers a brief window to cancel sending.
  • Version Histories: Enable reverting to previous document states.

---

The Role of Theory in HCI

Importance

• Understanding: Provides deeper insights into user behavior and interface effectiveness.
• Application: Helps in creating guidelines and principles.

Types of Theories

1. Predictive Theories: Forecast outcomes based on current data.
2. Explanatory Theories: Explain why phenomena occur.
3. Descriptive Theories: Model current situations and behaviors.
4. Prescriptive Theories: Offer guidelines on how things should be.

Key Theories and Models

Fitts’ Law (Predictive)

• Definition: Predicts the time required to move to a target area.
• Formula: Time increases with distance and decreases with target size.
• Applications:
  • Designing buttons and controls that are easy to reach and select.

Perceive, Recognize, Act Cycle (Predictive)

• Process:
  1. Perceive: Sensory input.
  2. Recognize: Cognitive processing.
  3. Act: Physical response.
• Timings:
  • Total cycle: Approximately 0.25 seconds.
• Example:
  • Reacting to a hazard while driving.

    Keystroke-Level Model (Descriptive)

• Purpose: Predicts how long it takes to perform routine tasks.
• Components:
  • Keystrokes, mouse movements, and clicks.
• Applications:
  • Optimizing interfaces for efficiency.

Don Norman’s Stages of Action (Explanatory)

• Components:
  1. Goal Formation
  2. Execution: Plan, specify, and perform actions.
  3. Evaluation: Perceive, interpret, and compare results.
• Gulfs:
  • Gulf of Execution: Difficulty in translating intentions into actions.
  • Gulf of Evaluation: Difficulty in interpreting system output.
• Design Goal: Minimize both gulfs to enhance usability.

Gestalt Principles (Prescriptive)

• Principles:
  1. Proximity: Elements close together are perceived as a group.
  2. Similarity: Similar elements are grouped together.
  3. Enclosure: Objects enclosed together are seen as a group.
  4. Closure: Minds fill in missing information to see a complete image.
  5. Continuity: Prefer continuous figures.
  6. Connection: Connected elements are grouped.
  7. Common Fate: Elements moving together are perceived as related.
• 
• Application:
  • Organizing visual elements in interfaces for better user perception.

---

Macro HCI Theories and Concepts

Suchman’s plans and situated action

The theory emphasises how actions are adapted to changing contexts in complex interactive systems. It questions traditional design concepts centred on ‘predefined plans’ and argues that people’s behaviour is more context-driven than fully planned.

Activity Theory

• Focus: How human activities shape and are shaped by tools and interfaces.
• Applications:
  • Understanding user behavior over time.
  • Designing interfaces that evolve with user expertise.

Three Waves of HCI Research (Yvonne Rogers)

1. First Wave (Classical HCI):
   • Timeframe: 1980s.
   • Focus: Individual users and cognitive models.
2. Second Wave (Modern HCI):
   • Timeframe: 1990s-2010s.
   • Focus: Group work and organizational context.
3. Third Wave (Contemporary HCI):
   • Timeframe: 2010s onward.
   • Focus: Cultural, societal, and emotional aspects.
   • Topics: Art, feminism, industrialism, colonialism.

---

Applying Theories and Principles in Design

• Integration: Combine guidelines, principles, and theories for effective design.
• Assignments:
  • Apply Shneiderman’s Golden Rules and Norman’s principles in practical tasks.
• Design Decisions:
  • Use principles to evaluate and justify design choices.
  • Recognize that multiple solutions may be valid.

---

Conclusion

• Holistic Approach: Effective HCI design requires understanding guidelines, principles, and theories.
• Continuous Learning: Stay updated as guidelines evolve and new theories emerge.
• User-Centered Design: Always consider the user’s needs, abilities, and context.