Content Details - HCI patterns - Module 2 - Human Computer Interaction (HCI) - Nebula SkillHub

1. Fundamentals of HCI Patterns

A design pattern is a generalized solution to a recurring problem within a specific context. In HCI, patterns represent best practices for common user interactions, improving consistency and learnability.

Structure of a Pattern:

**Name:** A descriptive title (e.g., "Breadcrumbs").
**Problem:** The design goal or challenge (e.g., helping users orient themselves within a deep hierarchy).
**Context:** The situations where the pattern can be used (e.g., deep website navigation, file structures).
**Solution:** The design implementation (e.g., a trail of links showing the path from the home page).

2. Navigation and Information Architecture Patterns

These patterns help users move through content and understand their location within the system.

Breadcrumbs

A secondary navigation aid showing the user's location in a hierarchy (e.g., Home > Products > Electronics > Phones).

**Benefit:** Orientation and easy navigation back up the hierarchy.

Mega Menu

A large, two-dimensional drop-down panel triggered by hovering over a single navigation link.

**Benefit:** Allows users to see and select from many categories at once without complex cascading menus.

Hub and Spoke

Users always return to a central starting point (the hub) to access different areas (spokes). Common in mobile apps (via a persistent home button).

Global Navigation

A persistent set of links (usually a top bar or side bar) that appears on every page for consistent access to primary functions.

3. Input, Action, and Feedback Patterns

These patterns streamline the way users provide input or execute commands.

Inline Validation

Providing feedback on input correctness immediately after the user fills a field (e.g., a green checkmark or red X), instead of waiting for form submission.

**Benefit:** Error prevention and immediate feedback (Nielsen's Heuristic 1).

Confirm Destruction

A dialog box asking for explicit confirmation before executing an irreversible or highly destructive action (e.g., deleting a file).

**Benefit:** Error prevention (Shneiderman's Golden Rule 8).

Wizard (Step-by-Step)

Breaking down a complex task into a series of simple, sequential steps, often with navigation buttons like "Next" and "Back."

**Benefit:** Reduces cognitive load for novice users on complex tasks.

Autosave

Automatically and silently saving the user's work at frequent intervals.

**Benefit:** Prevents data loss and increases user comfort/trust.

4. Content Display Patterns

Patterns for managing and presenting large amounts of data.

A. Faceted Navigation

Allowing users to filter a large set of results by multiple attributes simultaneously (e.g., filtering a product list by color, size, and brand).

**Benefit:** Provides precise control over large datasets and enhances efficiency.

B. Progressive Disclosure

Showing only essential information or controls initially, and revealing more complex or advanced options on demand (e.g., via a "Show Advanced Settings" link).

**Benefit:** Reduces cognitive load for novices while keeping functionality available for experts.

C. Infinite Scroll

Automatically loading more content as the user reaches the bottom of the page, eliminating the need for pagination buttons.

**Benefit:** Good for continuous consumption (e.g., social media feeds); poor for finding previously seen items.

HCI patterns

Study Notes

HCI Design Patterns