Scanning Patterns Slides Scanning Patterns
Visual Hierarchy and Cognitive Load in Graphic Design
Lesson 01 / Cognitive Load
The Hook
"Users don't read; they scan."
Eye-tracking data consistently shows that we abandon complex, unstructured layouts within 2.6 seconds if we can't find a clear entry point.
Visual noise = Cognitive friction
Structure = Meaningful navigation
Visualizing the F-Pattern
Cognitive Load Theory
Intrinsic
The inherent difficulty of the task itself. We cannot change this, but we can manage it.
Extraneous
Mental effort that doesn't help learning. Caused by poor design, clutter, and irrelevant choices.
Germane
Effort used to process info and build schemas. Design should maximize this capacity.
"Our job as designers is to eliminate the extraneous so the user can focus on the germane."
Designing the Schema
Proximity
Objects close together are perceived as a group.
Similarity
Elements sharing traits are seen as related.
Closure
The brain fills in gaps to create whole shapes.
Continuity
Eyes follow the smoothest path or line.
Design Friction Audit
Analyze the layout provided in your handouts. Use the following prompts:
01
Where is the entry point? Does it align with the business goal?
02
Identify three instances of extraneous cognitive load.
03
How do Gestalt principles (or lack thereof) affect scanning?
04
How would you restructure the hierarchy to reduce friction?
Design Friction Critique Worksheet Design Friction Critique
LESSON 01: COGNITIVE LOAD & SCANNING
Name:
Date:
Objective
Analyze the provided interface layout (see Appendix A). Identify specific friction points where Extraneous Cognitive Load interferes with the user's primary objective. Propose structural changes based on Gestalt Principles .
1
Friction Point Audit
Identify three specific elements that create cognitive friction. Explain why they fail based on scanning patterns.
Friction Point 01
Friction Point 02
Friction Point 03
2
Gestalt Intervention
Select two Gestalt Principles (Proximity, Similarity, Closure, Continuity, or Common Fate) and describe how you would apply them to reorganize the information hierarchy.
Principle 01:
Principle 02:
3
Redesign Synthesis
In the space below, provide a low-fidelity wireframe sketch (using boxes and lines) that demonstrates the new hierarchy. Annotate your scan path.
Cognitive Load Teacher Guide Instructor Resource
Cognitive Load & Scanning
Lesson 01 Facilitation Guide
Learning Objectives
Explain the three types of cognitive load in design context.
Identify F-pattern and Z-pattern scanning behaviors.
Apply 4+ Gestalt principles to resolve layout friction.
Key Terminology
Extraneous Load Germane Load Foveal Vision Saccades Visual Anchor
Instructional Pacing
15m
Hook: The Eye-Tracking Reveal
Show two contrasting websites. Website A (chaotic) vs Website B (structured). Ask students to find the 'Sign Up' button on each. Discuss the immediate stress vs ease.
30m
Lecture: Cognitive Load Theory
Use the Slide Deck. Focus on Extraneous Load . Challenge students: "What is one thing on the current slide that is extraneous?"
60m
Workshop: Friction Audit
Distribute Design Friction Critique Worksheet . Provide a poorly designed financial dashboard or healthcare portal. Students work in pairs to audit.
15m
Debrief: Gestalt Solutions
Have 2-3 groups share their 'Intervention' and how it reduced the extraneous load.
Critical Inquiry Prompts
"Is visual hierarchy objective or subjective? How do cultural reading directions (left-to-right vs right-to-left) alter Gestalt application?"
"Can we ever truly reach 'zero' extraneous load, or is some friction necessary for user engagement (e.g., 'stop and think' moments in safety apps)?"
Data Story Slides Data Narrative
Precision, Integrity, and Visual Storytelling
Lesson 02 / Data Visualization
The Mission
"Above all else show the data."
Edward Tufte's principle of the Data-Ink Ratio : The ratio of data-ink to total ink used in a graphic.
"Maximize data-ink; Erase non-data-ink."
Eliminate Chartjunk
Focus on Insight
Lying with Visuals
Truncated Y-Axis
Exaggerating small differences by not starting at zero. Common in political and economic charts.
Cherry Picking
SELECTED RANGE
Selecting only a subset of data to support a specific narrative while ignoring the larger trend.
Visual Hierarchy of Data
1
The Headline
State the conclusion immediately. Don't make the user find the story.
2
The Focal Point
Use color or size to highlight the most important data point (The "Aha!" moment).
3
The Annotations
Provide context. Data without context is just noise.
Workshop: Logic to Layout
"You have a spreadsheet of 500 rows. You have one slide to tell one story. What is the narrative?"
Open Spreadsheet 2A
Start Sketching
Spreadsheet Logic Worksheet Spreadsheet Logic
Translating Raw Data into Visual Narrative
Dataset 2A
1
Identify the Narrative
Scan the provided dataset. Do not look for individual numbers; look for relationships , anomalies , and trends . Write one sentence that summarizes the "Story" this data tells.
2
Visual Encoding Strategy
Relationship Type Encoding Choice Rationale Comparison (Rank) Bar / Column Handwrite your reasoning... Change over Time Line / Area Correlation Scatter Plot Part-to-Whole Treemap / Stacked
3
Information Hierarchy Sketch
Sketch your layout below. Explicitly label your Primary Focal Point (The "Aha" moment) and your Secondary Context .
Sketchpad / Grid Layout
Visual integrity check: pass Data-ink ratio: optimized
Visual Integrity Checklist Integrity Check
Data Visualization Quality Audit
REV. 2026.01
"Graphical excellence is that which gives to the viewer the greatest number of ideas in the shortest time with the least ink in the smallest space." — Edward Tufte
Statistical Integrity
Scale Baseline
Does the Y-axis start at zero for bar/column charts? If not, is there a valid, disclosed reason for truncation?
Linear Consistency
Are intervals consistent across the entire axis? No hidden jumps or distorted scales?
Data Source Disclosure
Is the source of the raw data clearly cited? Is the methodology accessible?
Cognitive Reduction
Data-Ink Optimization
Has "chartjunk" (unnecessary gridlines, redundant labels, 3D effects) been removed?
Direct Labeling
Are labels placed directly near data points rather than forcing the eye to a separate legend?
Narrative Clarity
Actionable Headline
Does the title state a conclusion (e.g., "Profits Rose 20%") rather than just a topic (e.g., "Profit Chart")?
Intentional Emphasis
Is color used strategically to guide the eye to the primary insight, or is it merely decorative?
Inclusive Design Slides Inclusive Design
Accessibility as a Creative Constraint
Lesson 03 / Accessibility
The Paradigm Shift
"Accessibility is not a feature; it is a fundamental property of design."
It is no longer a 'checklist' for legal compliance. It is a human right and a design opportunity .
Solve for one, extend to many.
Contrast isn't just for visibility; it's for clarity.
Designing for diverse sensory inputs
POUR: The WCAG Standard
PERCEIVABLE
Information and UI components must be presentable to users in ways they can perceive.
Alt text, captions, color contrast
OPERABLE
UI components and navigation must be operable (e.g., keyboard only).
Keyboard nav, focus states, no time limits
UNDERSTANDABLE
Information and the operation of UI must be understandable.
Predictable nav, input assistance
ROBUST
Content must be robust enough to be interpreted by a wide variety of user agents.
Clean code, screen reader support
The Color Barrier
8% of men and 0.5% of women have some form of color vision deficiency.
"Never use color as the only visual means of conveying information."
Standard View
Protanopia View
Success Green
Error Red
Activity: The Audit
Use the provided Chrome extensions (Spectrum, NoCoffee) to audit your favorite design. Prepare to defend your inclusive redesign.
Start Audit
Accessibility Audit Tool Worksheet Accessibility Audit Tool
WCAG 2.1 AA Compliance Check
Auditor Copy
01. Perceivable
Section Weight: 40%
Contrast Ratio (Text)
Pass
Fail
Contrast Ratio (UI/Non-Text)
Pass
Fail
Color-Independent Info
Pass
Fail
Text Resizing (to 200%)
Pass
Fail
02. Operable
Section Weight: 30%
Keyboard Traps Present?
Yes
No
Visible Focus Indicator
Pass
Fail
Simulation Findings
Observation: Vision Impairment Simulation
Describe the primary friction points when viewing the design through a blur or color-deficiency lens...
Observation: Motor Impairment / Keyboard Only
Describe the difficulty of navigating the site using only the Tab key...
Confidential Audit Document // Graduate School of Design
Wayfinding Systems Slides Wayfinding
Environmental Graphic Design & Spatial Logic
Lesson 04 / Environmental
Spatial Hierarchy
"Design for the person who is lost, late, and stressed."
Wayfinding is not just signs. It is the architecture of information in a physical environment.
Decision points: Where choice happens.
Sightlines: Can the target be seen?
BLUEPRINT ANALYSIS v1.0
Universal Iconography
Transport
Medical
Information
Emergency
"A good icon should be understood by a child, an elder, and a visitor from another continent."
Legibility Specs
10 FT
50 FT
100 FT
Font choice, X-height, and Cap-height are critical when scaling for distance and speed.
A
A
A
The Wayfinding Challenge
Design a 3-sign sequence for the 'Decision Point X' in the proposed Regional Transit Hub. Focus on Progressive Disclosure .
Step 01 Mapping Flow
Step 02 Icon System
Step 03 Scale Model
Spatial Logic Activity Worksheet Spatial Logic
Wayfinding & Environmental Audit
Exercise 04.A
1
Decision Point Mapping
Consider the floor plan of the Metropolis North Terminal (Appendix B). Identify three critical "Decision Points" where a user must make a choice to reach Gate G12. Mark them on your map and analyze them below.
Decision Point 01 Location: __________
User Conflict:
Required Information:
Decision Point 02 Location: __________
User Conflict:
Required Information:
2
Signage Typology
For Decision Point 01, identify the necessary sign type and the specific information hierarchy needed.
Type 01
Identification
Type 02
Directional
Type 03
Informational
Sign Design Sketch Area
Interactive IA Slides Interactive IA
Information Architecture & Progressive Disclosure
Lesson 05 / Interactive
Structural Logic
"IA is the structural design of shared information environments."
It is about how we categorize, label, and navigate through complex digital landscapes.
"Design the system, not just the screen."
ROOT
NODE A
NODE B
NODE C
Hierarchical Taxonomy
Progressive Disclosure
The best way to reduce cognitive load is to hide information until the user explicitly needs it.
Initial view: Only essential data.
Secondary view: Details on demand.
Global Overview
The Dashboard Challenge
"How do you organize 50 distinct data points onto a single screen without creating clutter?"
Faceting
Allow users to filter the noise.
Modularity
Use grids to compartmentalize logic.
Interactivity
Enable tooltips and drill-downs.
Phase 05: The Prototype
Move from logic mapping to hi-fidelity interactive prototypes. Your dashboard must facilitate both 'Bird's Eye' and 'Worm's Eye' views.
Launch Figma Challenge
Dashboard Flow Worksheet Dashboard Logic
Interactive User Flow & Wireframe
Ver 5.0 // Interactive
1
User Flow Mapping
Map the journey of a user who needs to find the average uptime of a specific server from a global dashboard. Show the entry point, the click event, and the drill-down view.
START
2
Wireframe: Primary View
Sketch the Root Dashboard below. How do you summarize the 50 data points into 5 high-level modules? Use boxes for charts and lines for text.
Graduate IA Workshop Node: 05 // interactive.ia.v1
