Visual Encoding & Perception: Channels, Maps & Cognitive Limits

TAKEAWAYS:

• Visual channels (position, length, angle, color, area, volume) determine how data is mapped to visual attributes, with position being the most accurate.
• Gestalt principles (proximity, similarity, closure) explain how humans group visual elements, critical for designing intuitive dashboards.
• Color theory (hue, saturation, brightness) must align with color blindness accessibility and cultural meanings (e.g., red for "urgent" in eSewa).
• Perceptual limits (e.g., 7±2 items in working memory) dictate how to chunk data (e.g., Daraz’s 7-category product grid).
• Visual mapping converts abstract data (e.g., Ncell call volumes) into spatial or temporal patterns using encoding rules.
• Cognitive biases (e.g., cherry-picking, anchoring) can distort interpretations, requiring careful axis scaling and annotations.

Core Concept: Visual Encoding Channels

Visual encoding maps data to visual attributes. The 6 primary channels (with their strengths and weaknesses) are:

Why it matters:

• Position (e.g., bar height) is perceived as 100x more accurate than color or size.
• Color is best for nominal data (e.g., user roles in eSewa: admin, customer, agent).
• Size/area distorts perception (e.g., a circle twice the diameter appears 4x larger, but humans see it as ~2.5x).

Worked Example: Daraz Order Status Daraz uses position + color to encode order states:

• Position: Timeline of "Processing" → "Shipped" → "Delivered" (left to right).
• Color:
  • Green = "Delivered" (success),
  • Yellow = "Shipped" (in transit),
  • Red = "Processing" (requires action).
• Size: Order ID font scaled by order value (but capped to avoid distortion).

Gestalt Principles: How Humans Group Data

Gestalt laws explain why our brains organize visual elements into patterns. Critical for dashboards (e.g., NTC’s traffic congestion maps).

mindmap
  root((Gestalt Principles))
    Proximity["Items near each other are grouped"]
    Similarity["Similar shapes/colors grouped"]
    Closure["Gaps filled to form shapes"]
    Continuity["Lines follow smooth paths"]
    Common Fate["Moving together grouped"]
    FigureGround["Foreground vs. background"]

Example: Kathmandu Traffic Routes

• Proximity: Bus stops clustered near hospitals (e.g., Patan Hospital) appear as a "hotspot" in NTC’s heatmap.
• Similarity: All red lines (private vehicles) are grouped separately from blue (public buses).
• Closure: Drivers "fill in" gaps in traffic signs to recognize them faster.

Color Theory: Encoding Data Without Misleading

Key rules:

1. Hue: Distinct colors for categories (e.g., WhatsApp status: blue = online, gray = offline).
2. Saturation: High for emphasis (e.g., red for "urgent" in eSewa notifications).
3. Brightness: Darker = more serious (e.g., black for "blocked" transactions in Khalti).
4. Accessibility: Avoid red-green pairs (20% of men are colorblind).

Colorblind-Friendly Palette for NEPSE Stocks:

Worked Example: eSewa Transaction Status

• Green (#27ae60): Success (e.g., "Rs. 500 sent to [User]").
• Yellow (#f39c12): Pending (e.g., "OTP verification required").
• Red (#e74c3c): Failed (e.g., "Insufficient balance").
• Gray (#95a5a6): Cancelled.

Visual Mapping: From Data to Graphics

Steps to map data to visuals:

1. Choose a channel: Position for trends, color for categories.
2. Define scale: Linear vs. logarithmic (e.g., Ncell data usage: log scale for 1GB vs. 1TB).
3. Handle missing data: Use transparency or "N/A" labels.
4. Annotate: Add tooltips (e.g., Daraz hover to see exact delivery time).

Example: Pathao Driver Earnings

• Data: Daily earnings (Rs. 2,000–15,000), ride count (5–50/day).
• Visual Map:
  • X-axis: Ride count (position).
  • Y-axis: Earnings (position).
  • Color: Peak hour (red = 6–9 AM, blue = evening).
  • Size: Circle area = total distance driven.

Perceptual Pitfalls: What Distorts Data

1. Cherry-Picking: Showing only data that supports a claim (e.g., NEPSE highlighting only bullish days).
2. Anchoring: Starting axes at non-zero (e.g., "Profit ↑50%" when it was -100% to -50%).
3. Overplotting: Too many overlapping points (e.g., 10,000 Ncell users on a map).
   • Fix: Use transparency or hexbin plots.

Example: Misleading Bank Loan Ads

• Bad: "90% of applicants get loans!" (ignores 10% rejection rate).
• Good: "Of 1,000 applicants, 900 approved, 100 rejected" (with breakdown by income).

In the Real World

1. eSewa
   • Idea: Visual encoding + Gestalt principles.
   • How: Uses position (transaction timeline) + color (status) to let users quickly scan their activity. The proximity of recent transactions groups them, while similarity (same color for "success") reduces cognitive load.

2. Daraz

   • Idea: Hierarchical encoding + perceptual limits.
   • How: Product categories are limited to 7±2 items (Miller’s Law) in the main menu. Size encoding shows "Best Sellers" with larger thumbnails, but position (top of page) is the primary cue for prominence.

3. NTC Traffic App

   • Idea: Spatial encoding + color theory.
   • How: Heatmaps use color gradients (green = low traffic, red = jam) and Gestalt closure to show congestion patterns. Drivers rely on figure-ground to distinguish roads (foreground) from buildings (background).

4. Khalti

   • Idea: Temporal encoding + cognitive biases.
   • How: Transaction histories use timelines with color-coded events (green = credit, red = debit). The anchoring bias is avoided by showing net balance first, not just recent transactions.

Exam Tip

1. For 5-mark questions (e.g., "Explain visual encoding"):

   • Define visual channels (position, color, etc.) and give one real-world example (e.g., Daraz’s order status).
   • Mention Gestalt principles and how they apply (e.g., "Proximity groups related data in NTC maps").

2. For short notes (e.g., "Visual encoding"):

   • Structure:
     • Definition (mapping data to visual attributes).
     • 3 channels (position, color, size) with one advantage each.
     • One limitation (e.g., colorblindness).
     • Example: eSewa’s color-coded transactions.

3. For practical questions (e.g., "Design a visualization for X"):

   • Steps:
     1. Identify data type (quantitative/qualitative).
     2. Choose 2–3 channels (e.g., position + color).
     3. Sketch a mermaid diagram or describe it.
     4. Justify choices (e.g., "Position for accuracy, color for categories").

4. Avoid:

   • Vague terms like "use charts" without specifying type (bar, scatter, etc.).
   • Ignoring accessibility (always mention colorblind-friendly palettes).
   • Overcomplicating with too many channels (stick to 2–3 max).

Key Formula to Remember: For logarithmic scaling (e.g., Ncell data usage): $$\text{Log-scaled value}={\log }_{10}(\text{raw value})$$ (Use when data spans orders of magnitude, e.g., 1KB to 1TB.)