8.2 KiB
UX & Product Design
This resource provides cognitive design principles for interactive software interfaces (web apps, mobile apps, desktop software).
Covered topics:
- Learnability through familiar patterns
- Task flow efficiency
- Cognitive load management
- Onboarding design
- Error handling and prevention
Why UX Needs Cognitive Design
WHY This Matters
Core insight: Users approach interfaces with mental models from prior experiences - designs that violate expectations require re-learning and cause cognitive friction.
Common problems:
- New users abandon apps (steep learning curve)
- Task flows with too many steps/choices (Hick's Law impact)
- Complex features overwhelm users (cognitive overload)
- Confusing error messages
- Onboarding shows all features at once (memory overload)
How cognitive principles help: Leverage existing mental models (Jakob's Law), minimize steps/choices (Hick's/Fitts's Law), progressive disclosure, inline validation, onboarding focused on 3-4 key tasks (working memory limit).
What You'll Learn
- Learnability: Leverage familiar patterns for instant comprehension
- Task Flow Efficiency: Minimize steps and optimize control placement
- Cognitive Load Management: Progressive disclosure and memory aids
- Onboarding: Teaching without overwhelming
- Error Handling: Prevention first, then contextual recovery
Why Learnability Matters
WHY This Matters
Users spend most time on OTHER sites/apps (Jakob's Law) - they expect interfaces to work like what they already know.
Benefits of familiar patterns: Instant recognition (System 1), lower cognitive load, faster completion, reduced errors.
WHAT to Apply
Standard UI Patterns
Navigation:
- Hamburger menu (☰) for mobile
- Magnifying glass (🔍) for search
- Logo top-left returns home
- User avatar top-right for account
- Breadcrumbs for hierarchy
Actions:
- Primary: Right-aligned button
- Destructive: Red, requires confirmation
- Secondary: Gray/outlined
- Disabled: Grayed out
Forms:
- Labels above/left of fields
- Required fields: Asterisk (*)
- Validation: Inline as user types
- Submit: Bottom-right
Feedback:
- Loading: Spinner for waits >1s
- Success: Green checkmark + message
- Error: Red + icon + message
- Confirmation: Modal for destructive actions
Application rule: Use standard patterns by default. Deviate only when standard fails AND provide onboarding. Test if users understand without help.
Affordances & Signifiers
Controls should signal function through appearance:
Buttons: Raised appearance, hover state, active state, focus state Links: Underlined or distinct color, pointer cursor on hover Inputs: Rectangular border, cursor on click, placeholder text, focus state Draggable: Handle icon (≡≡), grab cursor, shadow on drag
Anti-patterns: Flat design with no cues, no hover states, buttons looking like labels, clickable areas smaller than visual target.
Platform Conventions
iOS: Back top-left, navigation bottom tabs, swipe gestures, share icon with up arrow Android: System back button, hamburger menu top-left, three-dot overflow, FAB bottom-right Web: Logo top-left to home, primary nav top horizontal, search top-right, footer links
Rule: Match platform norms. If cross-platform, adapt to each. Don't invent when standards exist.
Why Task Flow Efficiency Matters
WHY This Matters
Every decision point and step adds time and cognitive effort.
Hick's Law: Decision time increases logarithmically with choices (2 choices = fast, 10 = slow/paralysis) Fitts's Law: Time to target = distance ÷ size (large/nearby = fast, small/distant = slow)
WHAT to Apply
Reduce Steps
Audit method:
- Map current flow
- Question each step: "Necessary? Can automate? Can merge?"
- Eliminate unnecessary
- Combine related
- Pre-fill known info
Example: Checkout flow reduced from 8 steps to 4 (pre-fill email/shipping, combine review inline) = 50% fewer steps, higher completion.
Reduce Choices (Hick's Law)
Progressive disclosure: Show 5 most common filters, "More filters" reveals rest Smart defaults: Highlight recommended option, show "Other options" link Contextual menus: 5-7 actions relevant to current mode, not all 50
Rule: Common tasks ≤5 options. Advanced features behind "More". Personalize based on usage.
Optimize Control Placement (Fitts's Law)
Frequent actions = large and nearby. Infrequent = smaller and distant.
Primary: Large button (44×44px mobile, 32×32px desktop), bottom-right or natural flow Secondary: Medium, near primary but distinct (outlined, gray) Tertiary/destructive: Smaller, separated, requires confirmation
Why Cognitive Load Management Matters
WHY This Matters
Working memory holds 4±1 chunks - exceeding this causes confusion/abandonment.
Load types: Intrinsic (task complexity), Extraneous (poor design - MINIMIZE), Germane (meaningful learning - support)
WHAT to Apply
Progressive Disclosure
Reveal complexity gradually, show only immediate needs.
Wizards: 4 steps × 6-8 fields (not 30 fields on one page) = fits working memory, visible progress Expandable sections: Collapsed by default, expand on demand "Advanced" options: Basic visible, "Show advanced" link reveals rest
Chunking & Grouping
Group related items, separate with whitespace.
Forms: Group by relationship (Personal Info, Shipping Address) = 2 chunks Navigation: 5-7 categories × 3-5 items each (not 25 flat items)
Memory Aids (Recognition over Recall)
Show options, don't require memorization.
Visible state: Active filters as chips, current page highlighted, breadcrumbs, progress indicators Autocomplete: Search suggestions, address autocomplete, date picker Recent history: Recently opened files, search history, previous purchases
Why Onboarding Matters
WHY This Matters
First experience determines continuation/abandonment. Must teach key tasks without overwhelming.
Failures: All features upfront, passive tutorials, no contextual help Success: 3-4 core tasks, interactive tutorials, contextual help when encountered
WHAT to Apply
Focus on Core Tasks
Limit to 3-4 most important tasks, not comprehensive tour.
Ask: "What must users learn to get value?" NOT "What are all features?"
Example: Project management app - onboard on: create project, add task, assign to member, mark complete. Skip advanced filtering/custom fields/reporting (teach contextually later).
Interactive Learning
Users learn by doing, not reading.
Guided interaction: Highlight button, require click to proceed (active learning, muscle memory) Progressive completion: Step 1 must complete before Step 2 unlocks = sense of accomplishment, ensures learning
Contextual Help
Advanced features taught when encountered, not upfront.
First encounter tooltips: One-time help when user navigates to new feature Empty states: "No tasks yet! Click + to create first task" with illustrative graphic Gradual discovery: After 1 week show tip, after 1 month show power tip (usage-based timing)
Why Error Handling Matters
WHY This Matters
Users make errors (slips/mistakes) - good design prevents and provides clear recovery.
Goal: Prevention > detection > recovery
WHAT to Apply
Prevention (Best)
Constrain inputs: Date picker (not free text), numeric keyboard for phone, input masking Provide defaults: Pre-select common option, suggest formats Confirm destructive: Require confirmation modal, "Type DELETE to confirm", undo when possible
Detection (Inline Validation)
Immediate feedback as user types/on blur, not after submit.
Real-time validation: Password strength meter as typing, email format on blur Positioning: Error NEXT TO field (not top of page) - Gestalt proximity
Recovery (Clear Guidance)
Tell what's wrong and how to fix, in plain language.
Bad: "Error 402" Good: "Password must be at least 8 characters"
Visual: Red + icon, auto-focus to error field, keep user input (don't clear), green checkmark when fixed