Cognitive Psychology in UI/UX Design
Human Factors, Cognition, and Perception in Design
Course Overview
Human Perception: How our senses gather and interpret design elements.
Cognitive Processing: Mental models and information handling in user interfaces.
Gestalt Principles: Pattern recognition fundamentals for effective design.
Practical Applications: Implementing principles in real-world interfaces.
The Human-Design Relationship
Users:
Bring expectations, limitations, and capabilities to each interaction.
Process information through established mental patterns.
Designers:
Create systems that accommodate human cognitive abilities.
Bridge the gap between technical capabilities and human needs.
The Sensory Experience
Visual:
80-90% of information processed.
Most dominant in interface design.
Auditory:
Critical for alerts and feedback.
Creates emotional responses.
Tactile:
Haptic feedback in devices.
Essential for accessibility.
Multimodal:
Combined sensory inputs.
Creates richer experiences.
Visual Perception Fundamentals
Color Processing: Trichromatic vision processes millions of colors through cone cells.
Pattern Recognition: Brain seeks and identifies familiar patterns automatically.
Depth Perception: Binocular and monocular cues create a sense of space.
Motion Detection: Specialized visual processing for movement cues.
The Foveal View
Foveal Focus:
Central 2° of vision.
Highest visual acuity.
Parafoveal Vision:
5° surrounding fovea.
Reduced detail perception.
Peripheral Vision:
Outer visual field.
Detects motion and contrast.
Eye Tracking in Design Research
Heat Maps:
Visual representation of viewing patterns across interfaces.
Red areas indicate highest attention concentration.
Scan Paths:
Sequential tracking of eye movements.
Reveals decision-making and search patterns.
Fixation Duration:
Time spent on specific elements.
Indicates interest or processing difficulty.
Areas of Interest (AOI):
Targeted analysis of specific design elements.
Compares attention between competing designs.
F-Pattern Reading
Horizontal Scan Across Top: Users first read across the upper portion of the content area.
Vertical Scan Down Left: Eyes move down the left side scanning for interesting points.
Second Horizontal Scan: Another horizontal movement, typically shorter than the first.
Continued Downward Scanning: Pattern continues down the page with diminishing horizontal movement.
Z-Pattern Reading
Top Horizontal Scan: Eyes track from top left to top right across the header area.
Diagonal Movement: Attention moves diagonally down to the opposite side.
Bottom Horizontal Scan: Final movement across the bottom content area.
Color Psychology in UI Design
Warm Colors
Red: Urgency, errors, passion
Orange: Energy, creativity, affordability
Yellow: Optimism, warning, attention
Cool Colors
Blue: Trust, security, professionalism
Green: Success, growth, environmental
Purple: Luxury, creativity, wisdom
Neutral Colors
Black: Sophistication, power, elegance
White: Simplicity, cleanliness, virtue
Gray: Balance, neutrality, formality
Color Accessibility Considerations
Sufficient Contrast: WCAG 2.1 minimum ratio of 4.5:1 for text.
Color Blindness Testing: Ensure interfaces work for all vision types.
Multiple Visual Cues: Never rely on color alone for critical information.
Information Processing Model
Sensory Input: Visual, auditory, and tactile information enters sensory memory.
Attention Filter: Selective focus determines what proceeds to working memory.
Processing: Working memory interprets information using existing knowledge.
Storage: Important information transfers to long-term memory.
Response: Physical or mental action based on processed information.
Cognitive Load Theory
Intrinsic Load: Complexity inherent to the task itself; cannot be simplified beyond core requirements.
Extraneous Load: Unnecessary cognitive burden from poor design; should be minimized to improve usability.
Germane Load: Mental effort devoted to learning and schema creation; productive cognitive processing to be optimized.
The Magical Number Seven
7±2: Working Memory Capacity - Average items humans can hold in working memory.
3-4: Optimal Choices - Ideal number of options for quick decisions.
5s: Attention Span - Time before users make first judgment.
Chunking Information
Group Related Items: Combine individual elements into meaningful units.
Hierarchical Organization: Arrange information in logical categories and subcategories.
Visual Differentiation: Use color, space, and formatting to separate chunks.
Mental Models
User Mental Models: How users believe a system works, based on prior experiences and expectations.
Design Implications:
Align interfaces with existing mental models.
Use familiar patterns and metaphors.
Provide clear feedback to adjust incorrect models.
Affordances in Design
Explicit Affordances: Clear visual cues about how to interact with an element.
Hidden Affordances: Actions possible but not visually indicated.
False Affordances: Visual cues suggesting impossible interactions.
Cultural Affordances: Interaction cues based on cultural conventions.
Signifiers in Design
Definition: Explicit indicators that reveal where and how users should interact.
Distinct from affordances, which are action possibilities.
Examples:
Underlined text for links.
Shadow effects on buttons.
Cursor changes on hover.
Instructional text labels.
Feedback Mechanisms
Visual Feedback: Color changes, animations, and visual state updates.
Auditory Feedback: Sounds confirming actions or alerting to events.
Haptic Feedback: Vibrations or tactile sensations from devices.
Temporal Feedback: Response timing indicating system status and progress.
Introduction to Gestalt Psychology
Origins: Developed in Germany in the early 20th century.
Founded by Max Wertheimer, Kurt Koffka, and Wolfgang Köhler.
Response to atomistic approaches to perception.
Core Concept: "The whole is other than the sum of its parts."
Visual system automatically organizes elements into unified wholes.
Pattern recognition is innate and universal.
Gestalt Principle: Proximity
The Principle: Elements placed near each other are perceived as related.
UI Application: Group related controls and information spatially.
Benefits: Creates visual organization without explicit dividers.
Gestalt Principle: Similarity
The Principle: Elements with similar attributes are perceived as belonging together.
Visual Variables: Similarity can be created through color, shape, size, texture, or orientation.
UI Application: Use consistent styling for functionally related elements.
Gestalt Principle: Continuation
The Principle: Eyes follow lines, curves, or patterns beyond their ending point.
Visual Flow: Creates smooth visual paths through information.
UI Application: Guide users through intended sequences with visual flow.
Gestalt Principle: Closure
The Principle: Mind fills in gaps to perceive incomplete forms as complete.
Cognitive Engagement: Creates active mental participation in perceiving design.
UI Application: Suggest structure with minimal elements.
Example: Loading indicators with partially visible elements.
Gestalt Principle: Figure-Ground
The Principle: Visual perception organizes elements as either figure (foreground) or ground (background).
Cannot perceive both simultaneously with equal focus.
UI Applications:
Modal dialogs with dimmed backgrounds.
Layering of interface elements.
Focus states highlighting active elements.
Content cards on contrasting backgrounds.
Gestalt Principle: Symmetry
The Principle: Mind seeks balance and perceives symmetrical elements as unified.
UI Application: Create balanced layouts with visual equilibrium.
Benefits: Conveys stability, reliability, and professionalism.
Gestalt Principle: Common Fate
The Principle: Elements moving in the same direction are perceived as related; extends to elements that change together in any way.
UI Applications:
Coordinated animations of related elements.
Simultaneous fade effects for related information.
Synchronized movements in transitions.
Progress indicators for multi-step processes.
Gestalt Principle: Common Region
The Principle: Elements contained within the same closed region are perceived as a group; boundaries create immediate visual categorization.
UI Applications: Cards and containers for content grouping, subtle backgrounds to define functional areas.
Design Balance: Use containment deliberately but sparingly.
Avoid: Excessive boundaries that create visual clutter.
Applying Gestalt in UI: Navigation
Proximity: Group related navigation items together.
Similarity: Style navigation levels consistently.
Common Region: Contain navigation areas with subtle boundaries.
Applying Gestalt in UI: Forms
Field Grouping: Use proximity to group related form fields, create logical sections with common regions.
Input Styling: Apply similarity to indicate field types, use consistent error and validation states.
Action Buttons: Differentiate primary and secondary actions, group submission controls with clear visual hierarchy.
Applying Gestalt in UI: Content
Text Organization:
Group related paragraphs.
Use consistent heading styles.
Create rhythm with white space.
Visual Elements:
Align images with related text.
Apply consistent treatment to similar media.
Create focal points with figure-ground contrast.
Interactive Components:
Group related controls.
Use similarity for functionally related buttons.
Separate distinct interaction areas.
Limitations of Human Perception
Selective Attention: Cannot consciously process all available visual information.
Change Blindness: Miss significant visual changes when attention is disrupted.
Processing Biases: Prior expectations influence what we perceive.
Cognitive Fatigue: Processing ability decreases with mental exertion.
Inattentional Blindness
The Phenomenon: Failure to notice unexpected stimulus when attention is focused elsewhere, even when stimulus is obvious and in direct line of sight.
Famous Study: Simons & Chabris
Course Overview
Human Perception: How our senses gather and interpret design elements, affecting usability and aesthetics.
Includes understanding sensory thresholds, signal detection theory, sensory adaptation, and the influence of context on perception.
Cognitive Processing: Mental models and information handling in user interfaces.
Involves memory encoding, storage, retrieval, problem-solving, and decision-making processes.
Gestalt Principles: Pattern recognition fundamentals for effective design.
Provides a structured approach to visual organization, including proximity, similarity, closure, symmetry, and figure-ground relationships.
Practical Applications: Implementing principles in real-world interfaces.
Focuses on usability testing, iterative design, and empirical validation of design choices.
The Human-Design Relationship
Users:
Bring expectations, limitations, and capabilities to each interaction.
Expectations shaped by prior experiences influence satisfaction and efficiency.
Physical limitations like screen size and cognitive abilities like memory capacity affect task performance.
Task-specific capabilities determine the effectiveness of interaction.
Process information through established mental patterns.
Mental models help users predict system behavior.
Cognitive biases affect information processing and decision-making.
Designers:
Create systems that accommodate human cognitive abilities.
Understanding cognitive workload is critical for designing user-friendly interfaces.
Effective designs minimize cognitive strain and maximize usability.
Bridge the gap between technical capabilities and human needs.
Human-centered design principles ensure technology meets user needs and preferences.
Iterative design enables continuous improvement based on user feedback.
The Sensory Experience
Visual:
80-90% of information processed.
Dominates attention and affects overall perception.
Most dominant in interface design.
Visual hierarchy guides users through interfaces.
Typography, color, and layout influence readability and aesthetics.
Auditory:
Critical for alerts and feedback.
Conveys information about system status.
Reduces cognitive load by providing non-visual cues.
Creates emotional responses.
Affects user engagement and satisfaction.
Sound design can enhance the overall user experience.
Tactile:
Haptic feedback in devices.
Provides confirmation of actions and enhances interactivity.
Increases user engagement and satisfaction.
Essential for accessibility.
Offers alternative communication channels for users with visual impairments.
Vibration patterns and textures can convey information non-visually.
Multimodal:
Combined sensory inputs.
Creates richer experiences.
Improves usability and engagement.
Addresses various user needs and preferences.
Visual Perception Fundamentals
Color Processing: Trichromatic vision processes millions of colors through cone cells.
Color attributes: hue, saturation, and brightness.
Color perception affected by context and lighting conditions.
Pattern Recognition: Brain seeks and identifies familiar patterns automatically.
Involves feature detection and matching.
Influenced by prior experiences and expectations.
Depth Perception: Binocular and monocular cues create a sense of space.
Binocular cues: retinal disparity and convergence.
Monocular cues: relative size, texture gradient, and occlusion.
Motion Detection: Specialized visual processing for movement cues.
Detects speed and direction of moving objects.
Essential for tracking objects and navigating environments.
The Foveal View
Foveal Focus:
Central 2° of vision.
Area of highest visual acuity.
Highest visual acuity.
Enables detailed analysis of objects.
Critical for reading and object recognition.
Parafoveal Vision:
5° surrounding fovea.
Supports rapid information scanning.
Reduced detail perception.
Detects patterns and relationships between objects.
Facilitates scene understanding.
Peripheral Vision:
Outer visual field.
Provides awareness of surroundings.
Detects motion and contrast.
Alerts to potential threats or points of interest.
Supports spatial orientation and navigation.
Eye Tracking in Design Research
Heat Maps:
Visual representation of viewing patterns across interfaces.
Aggregates gaze data from multiple users.
Red areas indicate highest attention concentration.
Reveals areas of interest and usability bottlenecks.
Informs design decisions.
Scan Paths:
Sequential tracking of eye movements.
Shows order and duration of fixations.
Reveals decision-making and search patterns.
Identifies inefficiencies and areas for improvement.
Informs information architecture and navigation design.
Fixation Duration:
Time spent on specific elements.
Indicates interest or processing difficulty.
Indicates interest or processing difficulty.
Longer fixations may indicate confusion or difficulty.
Shorter fixations may indicate familiarity or ease of understanding.
**Areas of Interest (AOI):
Targeted analysis of specific design elements.
Defines regions of interest for quantitative analysis.
Compares attention between competing designs.
Provides empirical evidence for design choices.
Enables data-driven optimization of user interfaces.
F-Pattern Reading
Horizontal Scan Across Top: Users first read across the upper portion of the content area.
Vertical Scan Down Left: Eyes move down the left side scanning for interesting points.
Second Horizontal Scan: Another horizontal movement, typically shorter than the first.
Continued Downward Scanning: Pattern continues down the page with diminishing horizontal movement.
Z-Pattern Reading
Top Horizontal Scan: Eyes track from top left to top right across the header area.
Diagonal Movement: Attention moves diagonally down to the opposite side.
Bottom Horizontal Scan: Final movement across the bottom content area.
Color Psychology in UI Design
Warm Colors
Red: Urgency, errors, passion
High energy; use sparingly.
Orange: Energy, creativity, affordability
Friendly, inviting; good for calls to action.
Yellow: Optimism, warning, attention
Cheerful; use cautiously; high visibility.
Cool Colors
Blue: Trust, security, professionalism
Calming, reliable; good for corporate sites.
Green: Success, growth, environmental
Natural, healthy; use to indicate progress.
Purple: Luxury, creativity, wisdom
Sophisticated; use sparingly to add elegance.
Neutral Colors
Black: Sophistication, power, elegance
Strong contrast; use for text and highlights.
White: Simplicity, cleanliness, virtue
Clean, open; use for background and spacing.
Gray: Balance, neutrality, formality
Understated; use to soften contrasts.
Color Accessibility Considerations
Sufficient Contrast: WCAG 2.1 minimum ratio of 4.5:1 for text.
Ensures readability for users with low vision.
Complies with accessibility standards.
Color Blindness Testing: Ensure interfaces work for all vision types.
Simulations can identify potential issues.
Color choice impacts usability for color-blind users.
Multiple Visual Cues: Never rely on color alone for critical information.
Use icons, text labels, or patterns to reinforce meaning.
Provides redundancy for color-blind users.
Information Processing Model
Sensory Input: Visual, auditory, and tactile information enters sensory memory.
Sensory memory holds brief impressions of stimuli.
Information decays rapidly if not attended to.
Attention Filter: Selective focus determines what proceeds to working memory.
Attention is limited in capacity.
Selective attention filters irrelevant information.
Processing: Working memory interprets information using existing knowledge.
Working memory has limited capacity and duration.
Information is actively processed and manipulated.
Storage: Important information transfers to long-term memory.
Long-term memory has unlimited capacity.
Information is organized into schemas for efficient retrieval.
Response: Physical or mental action based on processed information.
Responses are influenced by goals, motivations, and prior experiences.
Feedback loops inform subsequent actions.
Cognitive Load Theory
Intrinsic Load: Complexity inherent to the task itself; cannot be simplified beyond core requirements.
Depends on the number of interacting elements.
High intrinsic load can hinder learning.
Extraneous Load: Unnecessary cognitive burden from poor design; should be minimized to improve usability.
Caused by confusing interfaces or unclear instructions.
Minimizing extraneous load enhances learning and performance.
Germane Load: Mental effort devoted to learning and schema creation; productive cognitive processing to be optimized.
Enhanced by clear explanations and relevant examples.
Germane load promotes deeper understanding and skill development.
The Magical Number Seven
7±2: Working Memory Capacity - Average items humans can hold in working memory.
Limits the amount of information that can be processed simultaneously.
Overloading working memory leads to errors and frustration.
3-4: Optimal Choices - Ideal number of options for quick decisions.
Reduces cognitive effort and decision time.
More options can lead to analysis paralysis.
5s: Attention Span - Time before users make first judgment.
Initial impressions strongly influence user perceptions.
Capture attention quickly with clear and concise content.
Chunking Information
Group Related Items: Combine individual elements into meaningful units.
Reduces cognitive load by simplifying information.
Makes information easier to remember and process.
Hierarchical Organization: Arrange information in logical categories and subcategories.
Provides a clear structure for navigation.
Supports efficient information retrieval.
Visual Differentiation: Use color, space, and formatting to separate chunks.
Enhances readability and comprehension.
Guide user attention and highlight key information.
Mental Models
User Mental Models: How users believe a system works, based on prior experiences and expectations.
Mental models are often incomplete or inaccurate.
Misaligned mental models lead to frustration and errors.
Design Implications:
Align interfaces with existing mental models.
Use familiar metaphors and analogies.
Build upon prior knowledge and experiences.
Use familiar patterns and metaphors.
Leverage established design conventions.
Reduce the need for learning and adaptation.
Provide clear feedback to adjust incorrect models.
Help users correct misconceptions.
Prevent errors and promote understanding.
Affordances in Design
Explicit Affordances: Clear visual cues about how to interact with an element.
Buttons and controls indicate pressability.
Input fields imply text entry.
Hidden Affordances: Actions possible but not visually indicated.
Require exploration or prior knowledge to discover.
Can lead to frustration if not intuitive.
False Affordances: Visual cues suggesting impossible interactions.
Confuse users and lead to errors.
Should be avoided in well-designed interfaces.
Cultural Affordances: Interaction cues based on cultural conventions.
Vary across cultures and regions.
Must be adapted to specific target audiences.
Signifiers in Design
Definition: Explicit indicators that reveal where and how users should interact.
Distinct from affordances, which are action possibilities.
Examples:
Underlined text for links.
Indicates clickable elements.
Shadow effects on buttons.
Conveys pressability.
Cursor changes on hover.
Signals interactivity.
Instructional text labels.
Provides guidance and support.
Feedback Mechanisms
Visual Feedback: Color changes, animations, and visual state updates.
Informs users of system status.
Provides confirmation of actions.
Auditory Feedback: Sounds confirming actions or alerting to events.
Engages users and enhances immersion.
Should be used judiciously to avoid annoyance.
Haptic Feedback: Vibrations or tactile sensations from devices.
Provides confirmation of actions.
Enhances interactivity and immersion.
Temporal Feedback: Response timing indicating system status and progress.
Indicates system responsiveness.
Prevent frustration from perceived delays.
Introduction to Gestalt Psychology
Origins: Developed in Germany in the early 20th century.
Founded by Max Wertheimer, Kurt Koffka, and Wolfgang Köhler.
Response to atomistic approaches to perception.
Core Concept: "The whole is other than the sum of its parts."
Visual system automatically organizes elements into unified wholes.
Pattern recognition is innate and universal.
Gestalt Principle: Proximity
The Principle: Elements placed near each other are perceived as related.
UI Application: Group related controls and information spatially.
Benefits: Creates visual organization without explicit dividers.
Gestalt Principle: Similarity
The Principle: Elements with similar attributes are perceived as belonging together.
Visual Variables: Similarity can be created through color, shape, size, texture, or orientation.
UI Application: Use consistent styling for functionally related elements.
Gestalt Principle: Continuation
The Principle: Eyes follow lines, curves, or patterns beyond their ending point.
Visual Flow: Creates smooth visual paths through information.
UI Application: Guide users through intended sequences with visual flow.
Gestalt Principle: Closure
The Principle: Mind fills in gaps to perceive incomplete forms as complete.
Cognitive Engagement: Creates active mental participation in perceiving design.
UI Application: Suggest structure with minimal elements.
Example: Loading indicators with partially visible elements.
Gestalt Principle: Figure-Ground
The Principle: Visual perception organizes elements as either figure (foreground) or ground (background).
Cannot perceive both simultaneously with equal focus.
UI Applications:
Modal dialogs with dimmed backgrounds.
Focuses attention on primary content.
Layering of interface elements.
Creates depth and hierarchy.
Focus states highlighting active elements.
Indicates current selection or active component.
Content cards on contrasting backgrounds.
Separates content from surrounding elements.
Gestalt Principle: Symmetry
The Principle: Mind seeks balance and perceives symmetrical elements as unified.
UI Application: Create balanced layouts with visual equilibrium.
Benefits: Conveys stability, reliability, and professionalism.
Gestalt Principle: Common Fate
The Principle: Elements moving in the same direction are perceived as related; extends to elements that change together in any way.
UI Applications:
Coordinated animations of related elements.
Enhances understanding of relationships.
Simultaneous fade effects for related information.
Creates visual cohesion.
Synchronized movements in transitions.
Provides intuitive feedback.
Progress indicators for multi-step processes.
Shows overall progress.
Gestalt Principle: Common Region
The Principle: Elements contained within the same closed region are perceived as a group; boundaries create immediate visual categorization.
UI Applications: Cards and containers for content grouping, subtle backgrounds to define functional areas.
Design Balance: Use containment deliberately but sparingly.
Avoid: Excessive boundaries that create visual clutter.
Applying Gestalt in UI: Navigation
Proximity: Group related navigation items together.
Similarity: Style navigation levels consistently.
Common Region: Contain navigation areas with subtle boundaries.
Applying Gestalt in UI: Forms
Field Grouping: Use proximity to group related form fields, create logical sections with common regions.
Input Styling: Apply similarity to indicate field types, use consistent error and validation states.
Action Buttons: Differentiate primary and secondary actions, group submission controls with clear visual hierarchy.
Applying Gestalt in UI: Content
Text Organization:
Group related paragraphs.
Enhances readability.
Use consistent heading styles.
Provides structure and hierarchy.
Create rhythm with white space.
Improves visual flow.
Visual Elements:
Align images with related text.
Establishes relationships.
Apply consistent treatment to similar media.
Creates visual harmony.
Create focal points with figure-ground contrast.
Draws attention to important elements.
Interactive Components:
Group related controls.
Enhances usability.
Use similarity for functionally related buttons.
Reinforces relationships.
Separate distinct interaction areas.
Prevents confusion.
Limitations of Human Perception
Selective Attention: Cannot consciously process all available visual information.
Filters out irrelevant stimuli.
Influenced by goals, expectations, and emotional state.
Change Blindness: Miss significant visual changes when attention is disrupted.
Occurs when attention is focused elsewhere.
Can lead to usability issues if critical changes are missed.
Processing Biases: Prior expectations influence what we perceive.
Confirmation bias: seeking information that confirms existing beliefs.
Anchoring bias: relying too heavily on initial information.
Cognitive Fatigue: Processing ability decreases with mental exertion.
Prolonged mental effort impairs performance.
Can be mitigated by breaks and good design.
Inattentional Blindness
The Phenomenon: Failure to notice unexpected stimulus when attention is focused elsewhere, even when stimulus