18 KiB
Design Frameworks
This resource provides three systematic frameworks for structuring cognitive design thinking and decision-making.
Frameworks covered:
- Cognitive Design Pyramid (hierarchical quality assessment)
- Design Feedback Loop (interaction cycles)
- Three-Layer Visualization Model (data communication fidelity)
Why Use Frameworks
WHY This Matters
Frameworks provide:
- Systematic structure for design thinking (not ad-hoc)
- Complete coverage across multiple dimensions
- Prioritization guidance (what to fix first)
- Shared vocabulary for team communication
- Repeatable process applicable across projects
Mental model: Like architectural blueprints - frameworks give structure to design decisions so nothing critical is forgotten.
Without frameworks: inconsistent application of principles, missed dimensions, unclear priorities, reinventing approach each time.
##What You'll Learn
Three complementary frameworks, each suited for different contexts:
Cognitive Design Pyramid: When you need comprehensive multi-dimensional quality assessment
Design Feedback Loop: When you're designing interactive interfaces and need to support user perception-action cycles
Three-Layer Visualization Model: When you're creating data visualizations and need to ensure fidelity from data through interpretation
Why Cognitive Design Pyramid
WHY This Matters
Core insight: Design effectiveness depends on satisfying multiple needs in hierarchical sequence - perceptual clarity is foundation, enabling cognitive coherence, which enables emotional engagement, which enables behavioral outcomes.
Key principle: Lower levels are prerequisites for higher levels:
- If users can't perceive elements clearly → coherence impossible
- If design isn't coherent → engagement suffers
- If not engaging → behavior change fails
Mental model: Like Maslow's hierarchy of needs - must satisfy foundational needs before higher-level needs matter.
Use when:
- Comprehensive design quality check needed
- Diagnosing what level is failing
- Prioritizing improvements (fix foundation first)
- Evaluating entire user experience holistically
WHAT to Apply
The Pyramid (4 Tiers)
┌─────────────────────────┐
│ BEHAVIORAL ALIGNMENT │ ← Peak: Guides actual user behavior
├─────────────────────────┤
│ EMOTIONAL ENGAGEMENT │ ← Higher: Motivates and doesn't frustrate
├─────────────────────────┤
│ COGNITIVE COHERENCE │ ← Middle: Makes logical sense
├─────────────────────────┤
│ PERCEPTUAL EFFICIENCY │ ← Base: Seen and registered correctly
└─────────────────────────┘
Tier 1: Perceptual Efficiency (Foundation)
Goal: Users can see and register all necessary elements clearly.
Checkpoints:
- Sufficient contrast for all text and key elements (WCAG AA minimum: 4.5:1 for body text, 3:1 for large text)
- Visual hierarchy obvious (squint test - primary elements still visible when blurred)
- No overwhelming clutter or visual noise (data-ink ratio high)
- Typography legible (appropriate size, line height, line length)
- Color distinguishable (not relying solely on hue for colorblind users)
- Grouping perceivable (Gestalt principles applied)
Common failures:
- Low contrast text (gray on light gray)
- Everything same visual weight (no hierarchy)
- Chartjunk obscuring data
- Text too small or lines too long
Fix priority: HIGHEST - without perception, nothing else works
Example: ❌ All metrics gray 12px → ✓ Primary KPIs 36px bold, secondary 18px gray
Tier 2: Cognitive Coherence (Comprehension)
Goal: Information is organized to align with how users think and expect.
Checkpoints:
- Layout matches mental models and familiar patterns (standard UI conventions)
- Terminology consistent throughout (same words for same concepts)
- Navigation/flow logical and predictable (no mystery meat navigation)
- Memory aids present (breadcrumbs, state indicators, progress bars)
- Chunking within working memory capacity (≤7 items per group, ideally 4±1)
- Recognition over recall (show options, don't require memorization)
Common failures:
- Inconsistent terminology confusing users
- Non-standard UI patterns requiring re-learning
- Hidden navigation or state
- Unchunked long lists overwhelming memory
Fix priority: HIGH - enables users to understand and navigate
Example: ❌ 30 ungrouped fields, inconsistent labels → ✓ 4-step wizard, grouped fields, consistent terms, progress visible
Tier 3: Emotional Engagement (Motivation)
Goal: Design feels pleasant and motivating, not frustrating or anxiety-inducing.
Checkpoints:
- Aesthetic quality appropriate for context (professional/friendly/serious)
- Design feels pleasant to use (not frustrating)
- Anxiety reduced (progress shown, undo available, clear next steps)
- Tone matches user emotional state (encouraging for learning, calm for high-stress tasks)
- Accomplishment visible (checkmarks, confirmations, completed states)
Common failures:
- Ugly or amateurish appearance reducing trust
- Frustrating interactions causing stress
- No reassurance in multi-step processes
- Inappropriate tone (playful for serious tasks)
Fix priority: MEDIUM - affects engagement and trust, but only after foundation solid
Why it matters: Emotional state influences cognitive performance - pleasant affect improves problem-solving, stress narrows attention
Example: ❌ Dense text, no progress, no encouragement → ✓ Friendly tone, progress bar, checkmarks, "You're almost done!"
Tier 4: Behavioral Alignment (Action)
Goal: Design guides users toward desired behaviors and outcomes.
Checkpoints:
- Calls-to-action clear and prominent (primary action obvious)
- Visual emphasis on actionable items (buttons stand out)
- Key takeaways highlighted (not buried in text)
- Ethical nudges toward good decisions (defaults favor user)
- Success paths more accessible than failure paths
Common failures:
- Primary CTA not visually prominent
- Actionable insights buried in data
- Destructive actions too easy (no confirmation)
- Defaults favor business over user
Fix priority: MEDIUM-LOW - optimize after foundation, coherence, engagement work
Example: ❌ Insights in footnotes, equal button sizes → ✓ Key insight top (large), "Take Action" prominent green, export secondary gray
Applying the Pyramid
Process:
- Assess bottom-up: Evaluate T1 (see clearly?) → T2 (makes sense?) → T3 (pleasant?) → T4 (guides action?)
- Identify weakest tier: Where are most failures? Which blocks success?
- Prioritize foundation-up: Fix T1 first (enables everything), then T2, then T3/T4
- Re-evaluate: Check fixes don't break higher tiers, iterate until all pass
Why Design Feedback Loop
WHY This Matters
Core insight: Users don't passively consume interfaces - they actively engage in continuous perception-action-learning cycles.
Loop stages: Perceive → Interpret → Decide → Act → Learn → (loop repeats)
Key principle: Design must support every stage; break anywhere causes confusion or failure.
Mental model: Like a conversation - user asks (via perception), interface answers (via display), user responds (via action), interface confirms (via feedback), understanding updates (learning).
Use when:
- Designing interactive interfaces (apps, dashboards, tools)
- Ensuring each screen answers user's questions
- Providing appropriate feedback for actions
- Diagnosing where interaction breaks down
WHAT to Apply
The Loop (5 Stages)
┌──────────┐
│ PERCEIVE │ → "What am I seeing?"
└────┬─────┘
↓
┌──────────┐
│INTERPRET │ → "What does this mean?"
└────┬─────┘
↓
┌──────────┐
│ DECIDE │ → "What can I do next?"
└────┬─────┘
↓
┌──────────┐
│ ACT │ → "How do I do it?"
└────┬─────┘
↓
┌──────────┐
│ LEARN │ → "What happened? Was it successful?"
└────┬─────┘
↓
(repeat)
Stage 1: Perceive
User question: "What am I seeing?"
Design must provide:
- Visibility of system status (current page, active state, what's happening)
- Clear visual hierarchy (where to look first)
- Salient critical elements (preattentive cues for important items)
Common failures:
- Hidden state (user doesn't know where they are)
- No visual hierarchy (don't know what's important)
- Loading without indicator (appears broken)
Example: ❌ No active filter indication → ✓ Active filters shown as visible chips at top
Stage 2: Interpret
User question: "What does this mean?"
Design must provide:
- Clear labels and context (explain what user is seeing)
- Familiar terminology (or definitions for specialized terms)
- Adequate context (why am I here, what are these options)
- Visual encoding that matches meaning (charts appropriate for data type)
Common failures:
- Jargon or abbreviations without explanation
- Missing context (chart without title/axes labels)
- Unclear purpose of page/screen
Example: ❌ No title, axes "X"/"Y", no units → ✓ "Q4 Sales by Region (thousands USD)", labeled axes, annotated events
Stage 3: Decide
User question: "What can I do next?"
Design must provide:
- Available actions obvious (clear CTAs)
- Choices not overwhelming (Hick's Law - limit options)
- Recommended/default option suggested when appropriate
- Consequences of choices clear (especially for destructive actions)
Common failures:
- Too many options causing paralysis
- No guidance on what to do next
- Unclear consequences ("Are you sure?" without explaining what happens)
Example: ❌ 10 unclear buttons → ✓ Primary "Continue" prominent, secondary "Save Draft" gray, "Cancel" text link
Stage 4: Act
User question: "How do I do it?"
Design must provide:
- Affordances clear (buttons look pressable, sliders look draggable)
- Controls accessible (appropriate size/position per Fitts's Law)
- Keyboard shortcuts available for power users
- Constraints prevent invalid actions (disabled states, input masking)
Common failures:
- Unclear what's clickable (flat design with no affordances)
- Tiny touch targets on mobile
- No keyboard access
- Allowing invalid inputs
Example: ❌ Flat text, no interactive cue → ✓ Raised appearance, hover state, cursor→pointer, focus ring
Stage 5: Learn
User question: "What happened? Was it successful?"
Design must provide:
- Immediate feedback for every action (< 100ms for responsiveness perception)
- Confirmations for successful actions (checkmarks, "Saved" message, state change)
- Clear error messages in context (next to problem, plain language)
- Updated system state visible (if filter applied, data updates)
Common failures:
- No feedback (user clicks button, nothing visible happens)
- Delayed feedback (loading without indication)
- Generic errors ("Error occurred" without explanation)
- Feedback hidden or dismissible before user sees it
Example: ❌ Click → nothing visible → page maybe changes → ✓ Click → spinner → success message → confirmed transition
Applying the Feedback Loop
For each screen/interaction, ask:
- Perceive: Can user see current state and what's important?
- Interpret: Will user understand what they're seeing?
- Decide: Are next actions clear and not overwhelming?
- Act: Are controls obvious and accessible?
- Learn: Will user get immediate, clear feedback?
Example: Login form
- Perceive: Fields visible, labels clear
- Interpret: "Log in to your account" heading
- Decide: "Log in" button obvious, "Forgot password?" link
- Act: Focus states, clickable button, Enter submits
- Learn: Spinner on submit, success→redirect, error→message next to field with red border
Why Three-Layer Visualization Model
WHY This Matters
Core insight: Effective data visualization requires success at three distinct layers - accurate data, appropriate visual encoding, and correct user interpretation. Failure at any layer breaks the entire communication chain.
Layers: Data → Visual Encoding → Cognitive Interpretation
Key principle: You can have perfect data with wrong chart type (encoding failure) or perfect chart with user misunderstanding (interpretation failure). All three must succeed.
Mental model: Like a telephone game - message (data) must be transmitted (encoding) and received (interpretation) accurately or communication fails.
Use when:
- Creating any data visualization
- Diagnosing why visualization isn't working
- Choosing chart types
- Validating user understanding
WHAT to Apply
Layer 1: Data
Question: Is the underlying data accurate, complete, and relevant?
Checkpoints:
- Data quality verified (no errors, outliers investigated)
- Complete dataset (not cherry-picked subset that misleads)
- Relevant to question being answered (not tangential data)
- Appropriate aggregation/granularity (not hiding or overwhelming with detail)
- Time period representative (not artificially truncated to show desired trend)
Common failures:
- Garbage data → garbage visualization
- Cherry-picked dates hiding broader context
- Outliers distorting scale
- Wrong metric for question
Fix: Validate data quality before designing visualization
Example: "Are sales improving?" ❌ Only last 3 months (hides 2-year decline) → ✓ 2-year trend with annotation: "Recent uptick after sustained decline"
Layer 2: Visual Encoding
Question: Are visualization choices appropriate for the data type, user task, and perceptual capabilities?
Checkpoints:
- Chart type matches task (compare → bar, trend → line, distribution → histogram)
- Encoding matches perceptual hierarchy (position > angle > area)
- Axes scaled appropriately (start at zero for bars, or clearly note truncation)
- Color usage correct (hue for categories, lightness for quantities)
- Labels clear and sufficient (title, axes, units, legend if needed)
Common failures:
- Pie chart when bar chart would be clearer
- Truncated axis exaggerating differences
- Rainbow color scale for quantitative data
- Missing units or context
Fix: Match encoding to task using Cleveland & McGill hierarchy
Example: Compare 6 regional sales. ❌ Pie chart (poor angle/area) → ✓ Bar chart (precise position/length)
Layer 3: Cognitive Interpretation
Question: Will users correctly understand the message and draw valid conclusions?
Checkpoints:
- Main insight obvious or annotated (don't require users to discover it)
- Context provided (baselines, comparisons, historical trends)
- Audience knowledge level accommodated (annotations for novices)
- Potential misinterpretations prevented (annotations clarifying what NOT to conclude)
- Self-contained (doesn't require remembering distant information)
Common failures:
- Heap of data without guidance to key insight
- Missing context (percentage without denominator, comparison without baseline)
- Assumes expert knowledge novices lack
- Spurious correlation without clarification
Fix: Add titles, annotations, context; test with target users
Example: Ice cream sales vs drowning deaths. ❌ No annotation (viewers assume causation) → ✓ "Both increase in summer (common cause), not causally related"
Applying the Three-Layer Model
Process:
- Validate data: Check quality, completeness, relevance, outliers, time period, aggregation
- Choose encoding: Identify task → select chart type matching task + perceptual hierarchy → design axes, colors, labels → maximize data-ink
- Support interpretation: Add title conveying message → annotate insights → provide context → test with users → clarify misinterpretations
- Iterate: Fix weak layers, re-validate
Example: Sales dashboard
- Data: Complete 2-year sales, verified quality, identified 2 outlier months (note in viz)
- Encoding: Task = trend + regional comparison. Line chart, distinct hue per region (limit 5), y-axis at zero "Sales (thousands USD)", time on x-axis
- Interpretation: Title "Regional Sales Trends 2023-2024: Overall Growth with West Leading", annotate outliers ("Holiday promo Nov 2023", "Launch June 2024"), show previous year dotted baseline, tested with sales team
- Result: Accurate data + appropriate encoding + correct interpretation = insight
Choosing the Right Framework
Use Cognitive Design Pyramid when:
- Comprehensive multi-dimensional quality assessment needed
- Diagnosing which aspect of design is failing
- Prioritizing fixes (foundation → higher tiers)
- Evaluating entire user experience
Use Design Feedback Loop when:
- Designing interactive interfaces
- Ensuring each screen supports user questions
- Providing appropriate feedback
- Diagnosing where interaction breaks down
Use Three-Layer Model when:
- Creating data visualizations
- Choosing chart types
- Validating data quality through interpretation
- Diagnosing visualization failures
Use multiple frameworks together for complete coverage