Volume 3: Human-System Collaboration

Pattern 2: Contextual Scaffolding

Opening Scenario: One Form, Two Experiences

Jennifer started her tax preparation business in 2018. Her clients ranged from college students filing their first 1040-EZ to small business owners with complex Schedule C deductions, rental properties, and investment portfolios.

She initially created two separate intake forms:

Simple Form (for straightforward returns): - W-2 wages only - Standard deduction - Basic information - Took 5 minutes to complete

Complex Form (for business owners/investors): - Multiple income sources - Itemized deductions - Business expenses - Depreciation schedules - Took 45 minutes to complete

The problem? Clients didn't know which form to use.

College student Marcus received the simple form link, breezed through it in four minutes. When Jennifer reviewed it, she noticed: "You mentioned you drove for Uber in the notes. That's self-employment income. I need Schedule C information." Marcus had to fill out a second form with business expense details—information he could have provided initially if the form had asked.

Restaurant owner Patricia received the complex form link. She opened it on her phone and immediately felt overwhelmed:

BUSINESS INCOME DETAILS
Business structure: (dropdown with 12 options)
Principal business code (NAICS): _______________
Accounting method: Cash / Accrual / Other
Inventory method: Cost / Lower of cost or market / Other
Do you materially participate? Yes / No
At-risk limitations apply? Yes / No
...

Patricia had no idea what "material participation" meant or what "at-risk limitations" were. She called Jennifer: "I just have a restaurant. I don't understand these questions."

Jennifer's associate, David, who'd been preparing taxes for twenty years, suggested a different approach: "We need one form that adapts. It should start simple for everyone, but detect expertise and adjust accordingly."

They rebuilt the intake form with contextual scaffolding:

Everyone starts here:

Let's start with the basics.

What types of income did you have in 2024?
[ ] W-2 wages from an employer
[ ] Self-employment or business income
[ ] Investment income (stocks, dividends, interest)
[ ] Rental property income
[ ] Retirement income
[ ] Other: _______________

For Marcus (checked W-2 and Self-employment):

You mentioned self-employment income. Let's talk about that.

This is your first time reporting self-employment income with us.
Would you like:
( ) Guided interview (we'll ask questions in plain language)
( ) Standard forms (if you're familiar with Schedule C)

[Marcus selects: Guided interview]

Great! Let's walk through this together.

What type of work did you do?
(x) Rideshare driver (Uber, Lyft, etc.)
( ) Freelance/consulting
( ) Online sales
( ) Other: _______________

How much did you earn from rideshare driving in 2024?
$ _______________
"This is your gross income before expenses"

Did you track your miles?
( ) Yes, I have mileage logs
( ) No, but I drove a lot
( ) I'm not sure what counts

[System provides guidance based on answer]

For Patricia (business owner, second year as client):

Welcome back, Patricia! 

Last year you reported:
- Restaurant income: $485,000
- Business structure: S-Corp
- Accounting method: Accrual

Has anything changed this year?
( ) No, same structure and methods
( ) Yes (please explain): _______________

[If no changes]
Let's update your numbers for 2024.

Gross receipts: $ _______________
Cost of goods sold: $ _______________
...

[Questions use professional terminology, skip basic explanations]

For David's experienced business client (detected expert level):

Business Income - Schedule C

You've been filing Schedule C for 15+ years. 
Skip the interview? ( ) Yes  ( ) No

[If skip]
Principal business: [Restaurant - NAICS 722511]
Gross receipts: $ _______________
Returns/allowances: $ _______________
COGS: $ _______________
...

[No explanations, professional forms-style layout, keyboard shortcuts enabled]

The new system learned from each interaction:

  • First-time filers got extensive guidance
  • Returning clients saw "What changed?" rather than re-entering everything
  • Clients who demonstrated expertise got streamlined forms
  • Those who showed confusion got more help automatically

Jennifer's completion rates improved dramatically: - Simple returns: Still 5 minutes (unchanged) - Complex returns: Down from 45 minutes to 25 minutes - Client satisfaction: Up 40% - Follow-up clarification calls: Down 60%

One form. Multiple experience levels. Contextual scaffolding made the difference.

Context

Contextual scaffolding applies when:

Users span expertise spectrum: From complete novices to domain experts using the same form

Learning happens over time: Users become more expert through repeated interactions

Domain complexity exists: Subject matter has jargon, technical concepts, regulatory nuances

Efficiency matters for experts: Experienced users want speed; novices want guidance

Mistakes have consequences: Incorrect answers create problems (financial, legal, safety)

Assistance availability varies: Sometimes support is available (in-person with guide), sometimes users are alone (late-night self-service)

Problem Statement

Forms typically optimize for either novices or experts, but rarely serve both well.

Novice-optimized forms: - Extensive explanations and examples - Plain language, no jargon - Step-by-step guidance - Validation that teaches

These frustrate experts who know what they're doing and want to move quickly.

Expert-optimized forms: - Terse labels using domain terminology - Minimal instructions - Keyboard shortcuts and rapid input - Assumes background knowledge

These overwhelm novices who don't understand the questions being asked.

Traditional compromises fail: - "Beginner" vs "Advanced" mode: Users don't know which they are - Help text everywhere: Clutters interface for those who don't need it - No help text: Leaves novices stranded - Separate forms: Maintenance burden, users pick wrong form

We need forms that automatically adjust scaffolding to match user capability—providing more support when needed, less when it would impede efficiency.

Forces

Guidance vs Efficiency

  • Novices need explanations, examples, validation
  • Experts want minimal text, fast input, professional terminology
  • Too much guidance slows experts down
  • Too little guidance confuses novices

Adaptability vs Predictability

  • Adaptive interfaces respond to user skill level
  • But users expect consistent experiences
  • Changing too much feels unstable
  • Changing too little fails to help

Inference vs Declaration

  • System can infer expertise from behavior (speed, accuracy, terminology used)
  • Users can declare expertise ("I'm a CPA, skip the basics")
  • Inference might be wrong
  • Declaration might be incorrect (overconfident novice)

Progressive Learning vs Immediate Access

  • Forms should help users become more expert over time
  • But experts shouldn't wait for the system to recognize their capability
  • Balance gradual recognition with explicit override

Personalization vs Privacy

  • Remembering user expertise requires tracking behavior
  • Some users prefer privacy over personalization
  • Balance better experience with data minimization

Solution

Provide adjustable scaffolding that adapts to detected or declared user expertise, offering detailed guidance for novices while allowing experts to work efficiently.

The pattern has five key elements:

1. Detect Expertise Signals

Multiple indicators reveal user capability:

Explicit indicators: - User selects expertise level: "First time doing this" vs "I've done this before" - User credentials: Licensed professional, certified expert - Role in organization: Controller, HR Director, Property Manager (vs entry-level staff)

Behavioral indicators: - Completion speed (expert finishes in 5 minutes, novice takes 20) - Error rate (expert rarely triggers validation, novice does frequently) - Help usage (expert never clicks help, novice uses it extensively) - Terminology in free-text fields (expert uses jargon correctly)

Historical indicators: - Number of times completed this form previously - Other forms completed in this domain - Time since last completion (expertise decays)

Interaction indicators: - Keyboard shortcuts vs mouse navigation (experts use keyboard) - Skipping optional explanations (experts dismiss, novices read) - Autocomplete acceptance rate (experts know what they want)

2. Provide Scaffolding Levels

Define clear support levels:

Level 1: Maximum Guidance (Novices)

Property Type
What kind of property is this?

( ) Single-family home
    "A detached house on its own lot, typically with a yard"

( ) Condominium
    "A unit within a larger building, with shared common areas
     and HOA fees"

( ) Townhouse
    "Attached home sharing walls with neighbors, may have HOA"

( ) Multi-family (2-4 units)
    "Building with 2-4 separate rental units"

Not sure? [Click for help choosing]

Level 2: Standard Guidance (Intermediate)

Property Type

( ) Single-family home
( ) Condominium  
( ) Townhouse
( ) Multi-family (2-4 units)
( ) Other: _______________

[Help available but not shown by default]

Level 3: Minimal Guidance (Experts)

Property Type: [Dropdown: SFR, Condo, Townhouse, 2-4 Unit, Other]

3. Allow Explicit Mode Selection

Give users control:

<div class="expertise-selector">
  How familiar are you with real estate transactions?

  <button class="mode-button" data-mode="novice">
    First-time buyer
    <span class="mode-description">
      I need explanations and guidance
    </span>
  </button>

  <button class="mode-button" data-mode="intermediate">
    I've done this before
    <span class="mode-description">
      I understand the basics
    </span>
  </button>

  <button class="mode-button" data-mode="expert">
    Real estate professional
    <span class="mode-description">
      I work in this field
    </span>
  </button>
</div>

Users can change mode at any time:

<div class="mode-switcher">
  Current mode: Standard
  <a href="#" onclick="changeMode()">Switch to Detailed / Compact</a>
</div>

4. Adapt Dynamically During Interaction

Watch for signals that user needs different level:

// Monitor form interaction
if (userSpeedingThrough && lowErrorRate) {
  // Offer to reduce scaffolding
  showNotification("You seem comfortable with this. Switch to compact mode?");
}

if (highHelpUsage && multipleValidationErrors) {
  // Offer to increase scaffolding
  showNotification("Need more guidance? Switch to detailed mode with examples?");
}

if (userSkippedAllOptionalHelp) {
  // Remember preference for next section
  scaffoldingLevel = 'minimal';
}

5. Remember and Learn

Store expertise indicators:

// User profile tracks expertise by domain
userProfile.expertise = {
  realEstate: {
    level: 'intermediate',
    lastUpdated: '2024-12-01',
    formsCompleted: 3,
    avgCompletionTime: 12, // minutes
    errorRate: 0.05,
    helpUsageRate: 0.15
  },
  taxes: {
    level: 'novice',
    lastUpdated: '2024-12-20',
    formsCompleted: 1,
    avgCompletionTime: 35,
    errorRate: 0.22,
    helpUsageRate: 0.68
  }
};

Implementation Details

HTML Structure with Scaffolding Modes

<form class="contextual-form" data-scaffolding-level="standard">
  <!-- Mode selector -->
  <div class="scaffolding-control">
    <label>Experience level:</label>
    <select id="scaffolding-level" onchange="adjustScaffolding(this.value)">
      <option value="novice">I'm new to this</option>
      <option value="standard" selected>I've done this before</option>
      <option value="expert">I'm a professional</option>
    </select>
  </div>

  <!-- Field with tiered scaffolding -->
  <div class="field-group" data-field="property-type">
    <label for="property-type">
      <span class="label-text">Property Type</span>

      <!-- Novice: Expanded explanation -->
      <span class="help-text level-novice">
        What kind of property is this? Choose the option that best describes it.
      </span>

      <!-- Standard: Brief help -->
      <span class="help-text level-standard">
        Select property category
      </span>

      <!-- Expert: No help text -->
    </label>

    <!-- Novice: Radio buttons with full descriptions -->
    <div class="input-container level-novice">
      <label class="radio-option">
        <input type="radio" name="property-type" value="SFR">
        <div class="option-content">
          <strong>Single-family home</strong>
          <p>A detached house on its own lot, typically with a yard.
             You own both the structure and the land.</p>
        </div>
      </label>

      <label class="radio-option">
        <input type="radio" name="property-type" value="condo">
        <div class="option-content">
          <strong>Condominium</strong>
          <p>A unit within a larger building. You own the interior space
             but share common areas. Monthly HOA fees typically apply.</p>
        </div>
      </label>

      <!-- More options... -->
    </div>

    <!-- Standard: Simpler radio buttons -->
    <div class="input-container level-standard">
      <label>
        <input type="radio" name="property-type" value="SFR">
        Single-family home
      </label>
      <label>
        <input type="radio" name="property-type" value="condo">
        Condominium
      </label>
      <!-- More options... -->
    </div>

    <!-- Expert: Compact dropdown -->
    <div class="input-container level-expert">
      <select name="property-type">
        <option value="">Select...</option>
        <option value="SFR">SFR</option>
        <option value="condo">Condo</option>
        <option value="townhouse">Townhouse</option>
        <option value="2-4unit">2-4 Unit</option>
        <option value="5+unit">5+ Unit</option>
        <option value="land">Vacant Land</option>
      </select>
    </div>

    <!-- Contextual help (expandable for all levels) -->
    <details class="expandable-help">
      <summary>Need help choosing?</summary>
      <div class="help-content">
        <p><strong>Single-family:</strong> Detached house, you own land and structure</p>
        <p><strong>Condo:</strong> Unit in building, shared common areas, HOA fees</p>
        <p><strong>Townhouse:</strong> Attached homes, shared walls, may have HOA</p>
        <p><strong>Multi-family:</strong> 2-4 unit building for rental income</p>
      </div>
    </details>
  </div>
</form>

JavaScript for Dynamic Scaffolding

class ContextualScaffolding {
  constructor(formElement) {
    this.form = formElement;
    this.level = 'standard'; // default
    this.userBehavior = {
      startTime: Date.now(),
      fieldsCompleted: 0,
      errorsEncountered: 0,
      helpClicked: 0,
      keyboardShortcutsUsed: 0
    };

    this.init();
  }

  init() {
    // Check for stored preference
    const stored = this.getStoredExpertise();
    if (stored) {
      this.level = stored.level;
      this.applyScaffolding(this.level);
    }

    // Monitor user behavior
    this.monitorBehavior();

    // Set up mode switcher
    this.setupModeSwitcher();
  }

  getStoredExpertise() {
    const formType = this.form.dataset.formType;
    const stored = localStorage.getItem(`expertise_${formType}`);
    return stored ? JSON.parse(stored) : null;
  }

  applyScaffolding(level) {
    this.level = level;
    this.form.dataset.scaffoldingLevel = level;

    // Hide/show elements based on level
    this.form.querySelectorAll('[class*="level-"]').forEach(el => {
      const classes = Array.from(el.classList);
      const levelClass = classes.find(c => c.startsWith('level-'));
      const elLevel = levelClass.replace('level-', '');

      if (elLevel === level) {
        el.style.display = '';
      } else {
        el.style.display = 'none';
      }
    });

    // Adjust validation messaging
    this.adjustValidation(level);

    // Update UI indicators
    document.getElementById('scaffolding-level').value = level;
  }

  adjustValidation(level) {
    this.validationVerbosity = {
      'novice': 'verbose', // Full explanations
      'standard': 'standard', // Clear but concise
      'expert': 'terse' // Minimal messages
    }[level];
  }

  monitorBehavior() {
    // Track completion speed
    this.form.addEventListener('submit', () => {
      const duration = (Date.now() - this.userBehavior.startTime) / 1000 / 60; // minutes
      this.userBehavior.completionTime = duration;
      this.evaluateExpertise();
    });

    // Track field completion
    this.form.addEventListener('change', (e) => {
      this.userBehavior.fieldsCompleted++;
    });

    // Track validation errors
    this.form.addEventListener('invalid', (e) => {
      this.userBehavior.errorsEncountered++;
    }, true);

    // Track help usage
    this.form.querySelectorAll('.expandable-help, .help-link').forEach(help => {
      help.addEventListener('click', () => {
        this.userBehavior.helpClicked++;
      });
    });

    // Track keyboard shortcuts (expert behavior)
    this.form.addEventListener('keydown', (e) => {
      if (e.key === 'Tab' && e.shiftKey) {
        // Tab navigation is common, but shift-tab suggests power user
        this.userBehavior.keyboardShortcutsUsed++;
      }
      if (e.ctrlKey || e.metaKey) {
        // Ctrl/Cmd shortcuts definitely expert behavior
        this.userBehavior.keyboardShortcutsUsed++;
      }
    });
  }

  evaluateExpertise() {
    const {
      completionTime,
      fieldsCompleted,
      errorsEncountered,
      helpClicked,
      keyboardShortcutsUsed
    } = this.userBehavior;

    // Calculate signals
    const errorRate = errorsEncountered / fieldsCompleted;
    const helpRate = helpClicked / fieldsCompleted;
    const speed = fieldsCompleted / completionTime; // fields per minute

    // Score expertise (0-100)
    let expertiseScore = 50; // Start at middle

    // Speed indicators
    if (speed > 2) expertiseScore += 15; // Fast
    if (speed < 0.5) expertiseScore -= 15; // Slow

    // Error indicators
    if (errorRate < 0.05) expertiseScore += 20; // Very accurate
    if (errorRate > 0.2) expertiseScore -= 20; // Many errors

    // Help indicators
    if (helpRate === 0) expertiseScore += 10; // No help needed
    if (helpRate > 0.3) expertiseScore -= 10; // Frequent help

    // Keyboard use (expert signal)
    if (keyboardShortcutsUsed > 5) expertiseScore += 15;

    // Map score to level
    let suggestedLevel;
    if (expertiseScore >= 70) {
      suggestedLevel = 'expert';
    } else if (expertiseScore <= 40) {
      suggestedLevel = 'novice';
    } else {
      suggestedLevel = 'standard';
    }

    // If different from current, suggest adjustment
    if (suggestedLevel !== this.level) {
      this.suggestLevelChange(suggestedLevel);
    }

    // Store for next time
    this.storeExpertise(suggestedLevel, expertiseScore);
  }

  suggestLevelChange(newLevel) {
    const messages = {
      'expert': "Based on your familiarity, would you like to switch to compact mode for faster completion next time?",
      'novice': "Would you like more detailed guidance next time you use this form?",
      'standard': "Would you like to adjust the level of detail you see?"
    };

    // Non-intrusive notification
    this.showNotification(messages[newLevel], () => {
      this.applyScaffolding(newLevel);
    });
  }

  storeExpertise(level, score) {
    const formType = this.form.dataset.formType;
    const stored = this.getStoredExpertise() || {};

    localStorage.setItem(`expertise_${formType}`, JSON.stringify({
      level: level,
      score: score,
      lastUpdated: new Date().toISOString(),
      completions: (stored.completions || 0) + 1,
      avgCompletionTime: this.userBehavior.completionTime
    }));
  }

  setupModeSwitcher() {
    const selector = document.getElementById('scaffolding-level');
    if (selector) {
      selector.addEventListener('change', (e) => {
        this.applyScaffolding(e.target.value);
      });
    }
  }

  showNotification(message, action) {
    // Create non-intrusive notification
    const notification = document.createElement('div');
    notification.className = 'scaffolding-notification';
    notification.innerHTML = `
      <p>${message}</p>
      <button class="accept">Yes, adjust</button>
      <button class="dismiss">No thanks</button>
    `;

    notification.querySelector('.accept').addEventListener('click', () => {
      action();
      notification.remove();
    });

    notification.querySelector('.dismiss').addEventListener('click', () => {
      notification.remove();
    });

    document.body.appendChild(notification);
  }
}

// Initialize
document.addEventListener('DOMContentLoaded', () => {
  const forms = document.querySelectorAll('.contextual-form');
  forms.forEach(form => {
    new ContextualScaffolding(form);
  });
});

Database Schema

-- Track user expertise across domains
CREATE TABLE user_expertise (
  user_id VARCHAR(36),
  domain VARCHAR(50), -- 'real_estate', 'taxes', 'legal', etc.
  expertise_level ENUM('novice', 'standard', 'expert'),
  expertise_score INT, -- 0-100 calculated score
  forms_completed INT DEFAULT 0,
  avg_completion_time INT, -- seconds
  avg_error_rate DECIMAL(4,3),
  help_usage_rate DECIMAL(4,3),
  last_updated TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (user_id, domain)
);

-- Track individual form sessions for learning
CREATE TABLE form_completion_analytics (
  id INT AUTO_INCREMENT PRIMARY KEY,
  user_id VARCHAR(36),
  form_type VARCHAR(50),
  scaffolding_level ENUM('novice', 'standard', 'expert'),
  completion_time INT, -- seconds
  fields_completed INT,
  validation_errors INT,
  help_accessed INT,
  keyboard_shortcuts_used INT,
  completed_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

---

## Further Reading

### Academic Foundations

**Scaffolding Theory:**
- Wood, D., Bruner, J. S., & Ross, G. (1976). "The role of tutoring in problem solving." *Journal of Child Psychology and Psychiatry*, 17(2), 89-100.
  - Original articulation of scaffolding in learning theory
  - https://doi.org/10.1111/j.1469-7610.1976.tb00381.x
- Vygotsky, L. S. (1978). *Mind in Society: Development of Higher Psychological Processes*. Harvard University Press.
  - Zone of proximal development—foundation for adaptive scaffolding

**Adaptive User Interfaces:**
- Brusilovsky, P. (2001). "Adaptive hypermedia." *User Modeling and User-Adapted Interaction*, 11(1-2), 87-110.
  - Computational approaches to adapting interfaces to user knowledge
  - https://doi.org/10.1023/A:1011143116306
- Jameson, A. (2008). "Adaptive interfaces and agents." In *Human-Computer Interaction Handbook*. CRC Press.
  - Comprehensive overview of adaptation strategies

**Just-in-Time Information:**
- Fischer, G., et al. (1993). "Embedding critics in design environments." *The Knowledge Engineering Review*, 8(4), 285-307.
  - Context-sensitive help systems and critiquing
  - https://doi.org/10.1017/S0269888900000308
- Card, S. K., Moran, T. P., & Newell, A. (1983). *The Psychology of Human-Computer Interaction*. Lawrence Erlbaum.
  - GOMS model—understanding when users need help

### Implementation Guides

**Contextual Help Systems:**
- Cooper, A., Reimann, R., Cronin, D., & Noessel, C. (2014). *About Face: The Essentials of Interaction Design* (4th ed.). Wiley.
  - Chapter 27: "Designing for Different Needs" includes scaffolding patterns
- Tidwell, J., Brewer, C., & Valencia, A. (2020). *Designing Interfaces* (3rd ed.). O'Reilly Media.
  - "Prompt, Don't Block" and "Good Defaults" patterns

**Frontend Frameworks:**
- Intro.js: https://introjs.com/
  - Step-by-step user onboarding and contextual tours
- Shepherd.js: https://shepherdjs.dev/
  - Guide users through your app with contextual hints
- Tooltipster: https://www.heteroclito.fr/modules/tooltipster/
  - Advanced tooltips for contextual help
- Popper.js: https://popper.js.org/
  - Positioning engine for tooltips and popovers

**User Proficiency Detection:**
- FullStory: https://www.fullstory.com/
  - Session replay to identify where users struggle
- Hotjar: https://www.hotjar.com/
  - Heatmaps and session recordings for scaffolding placement
- Pendo: https://www.pendo.io/
  - Product analytics and in-app guidance

### Related Trilogy Patterns

**Volume 1 Foundations:**
- Chapter 2: "Theoretical Foundations" - Learning theory and cognitive scaffolding
- Chapter 9: "User Experience Design" - Adaptive interfaces for varying expertise
- Chapter 10: "Domain Knowledge Acquisition" - Capturing and presenting domain expertise

**Volume 2 Patterns:**
- Volume 2, Pattern 3: "Multi-Channel Tracking" - Observing user proficiency across interactions
- Volume 2, Pattern 10: "Engagement Velocity Tracking" - Measuring learning curve progression
- Volume 2, Pattern 26: "Feedback Loop Implementation" - Adapting scaffolding based on user success

**Volume 3 Integration:**
- Volume 3, Pattern 1: "Progressive Disclosure" - Scaffolding reveals next steps gradually
- Volume 3, Pattern 5: "Error as Collaboration" - Errors provide scaffolding for correction
- Volume 3, Pattern 19: "Real-Time Collaboration" - Scaffolding from expert reviewers

### Industry Examples

**Onboarding Systems:**
- Slack: https://slack.com/
  - Contextual tips appear first time users encounter features
- Dropbox: https://www.dropbox.com/
  - Progressive file sync explanation with dismissible help
- Figma: https://www.figma.com/
  - Tool-specific hints appear on hover for new users

**Application Wizards:**
- TurboTax: Interview mode provides extensive scaffolding
- LinkedIn Profile Setup: Strength meter with contextual improvement tips
- GitHub: First-time repository creation includes detailed guidance

**Expert Mode:**
- Gmail: Keyboard shortcuts hidden until user enables "expert mode"
- Vim: `:help` system provides scaffolding without cluttering interface
- Excel: Formula hints appear only when user begins typing `=`

### Standards and Accessibility

**ARIA Live Regions:**
- WAI-ARIA 1.2: `aria-live` for dynamic help messages
  - https://www.w3.org/TR/wai-aria-1.2/#aria-live
  - Announce scaffolding to screen reader users
- `aria-describedby`: Link form fields to contextual help
  - https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA1

**Usability Standards:**
- ISO 9241-171:2008 - Accessibility guidelines for software
  - Requirements for contextual help systems
- WCAG 2.1 Success Criterion 3.3.5: Help
  - https://www.w3.org/WAI/WCAG21/Understanding/help.html
  - Context-sensitive help is provided

### Research and Tools

**User Proficiency Measurement:**
- Grossman, T., et al. (2009). "An exploration of user proficiency in sketching interfaces." *CHI 2009*.
  - Metrics for detecting increasing user expertise
- Kurniawan, S., & Zaphiris, P. (2005). "Research-derived web design guidelines for older people." *ACM SIGACCESS Accessibility and Computing*, 73, 129-156.
  - Age-based scaffolding considerations

**Adaptive Systems:**
- UserGuiding: https://userguiding.com/
  - No-code onboarding and contextual guide builder
- WalkMe: https://www.walkme.com/
  - Enterprise digital adoption platform with adaptive guidance
- Appcues: https://www.appcues.com/
  - User onboarding and product adoption

---

-- Aggregate expertise patterns
CREATE TABLE domain_expertise_benchmarks (
  domain VARCHAR(50) PRIMARY KEY,
  novice_avg_time INT, -- Average completion time for novices
  standard_avg_time INT,
  expert_avg_time INT,
  novice_error_rate DECIMAL(4,3),
  standard_error_rate DECIMAL(4,3),
  expert_error_rate DECIMAL(4,3),
  updated_date DATE
);

CSS for Scaffolding Levels

/* Base scaffolding styles */
.contextual-form {
  --spacing-novice: 1.5rem;
  --spacing-standard: 1rem;
  --spacing-expert: 0.5rem;
}

/* Novice level: Maximum spacing and explanation */
.contextual-form[data-scaffolding-level="novice"] {
  .field-group {
    margin-bottom: var(--spacing-novice);
  }

  .help-text {
    display: block;
    font-size: 0.95rem;
    color: #666;
    margin-top: 0.25rem;
  }

  .radio-option {
    display: block;
    padding: 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    cursor: pointer;
  }

  .radio-option:hover {
    border-color: #2196F3;
    background: #f5f5f5;
  }

  .option-content strong {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
  }

  .option-content p {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
  }
}

/* Standard level: Balanced approach */
.contextual-form[data-scaffolding-level="standard"] {
  .field-group {
    margin-bottom: var(--spacing-standard);
  }

  .help-text {
    display: inline-block;
    font-size: 0.85rem;
    color: #666;
    margin-left: 0.5rem;
  }

  label {
    display: block;
    margin-bottom: 0.5rem;
  }
}

/* Expert level: Compact and efficient */
.contextual-form[data-scaffolding-level="expert"] {
  .field-group {
    margin-bottom: var(--spacing-expert);
  }

  .help-text {
    display: none; /* Hidden by default, available on demand */
  }

  label {
    display: inline-block;
    margin-right: 0.5rem;
    font-weight: normal;
  }

  select, input[type="text"] {
    display: inline-block;
    width: auto;
    min-width: 200px;
  }

  /* Tighter layout */
  .field-row {
    display: flex;
    gap: 1rem;
    align-items: center;
  }
}

/* Mode switcher UI */
.scaffolding-control {
  background: #f5f5f5;
  padding: 1rem;
  border-radius: 4px;
  margin-bottom: 1.5rem;
}

.scaffolding-notification {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  background: white;
  border: 2px solid #2196F3;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  max-width: 350px;
  z-index: 1000;
}

.scaffolding-notification button {
  margin-right: 0.5rem;
  margin-top: 0.5rem;
}

Mobile Considerations

On mobile, scaffolding levels matter even more:

@media (max-width: 768px) {
  /* Novice: One question per screen on mobile */
  .contextual-form[data-scaffolding-level="novice"] .field-group {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Expert: Compact form, multiple fields visible */
  .contextual-form[data-scaffolding-level="expert"] .field-group {
    margin-bottom: 0.75rem;
  }

  /* Thumb-friendly targets for all levels */
  .radio-option, button, select {
    min-height: 44px;
    min-width: 44px;
  }
}

Consequences

Benefits

Improved User Experience: - Novices get guidance without feeling patronized - Experts work efficiently without excessive explanation - Both feel the form "understands" them

Higher Completion Rates: - Novices don't abandon due to confusion - Experts don't abandon due to tedium - Form adapts to capability, reducing friction

Better Data Quality: - Novices make fewer errors (more guidance) - Experts complete more accurately (familiar interface) - Validation adjusts to expected expertise

Learning Support: - Users become more expert over time - System recognizes growth, adjusts accordingly - Confidence builds with each completion

Reduced Support Burden: - Fewer "how do I answer this?" questions - Fewer errors requiring correction - Better self-service success rate

Liabilities

Development Complexity: - Multiple UI states to design and test - Behavior tracking requires infrastructure - Expertise detection logic can be complex - More code to maintain

Potential Misclassification: - System might misjudge expertise level - Overconfident novices might select expert mode - Experts in one domain aren't necessarily experts in another - Must allow easy correction

Consistency Concerns: - Adaptive interfaces can feel unpredictable - Users may be confused when form changes between visits - Must balance adaptation with stability

Privacy Considerations: - Tracking behavior requires data storage - Some users may object to "learning" systems - Must provide opt-out mechanisms

Testing Burden: - Three versions to test (novice, standard, expert) - Transition logic adds complexity - Must test all scaffolding levels thoroughly

Domain Examples

Tax Preparation Software

Novice mode (first-time filer):

Let's talk about your income.

Did you receive a W-2 form from an employer?
( ) Yes
( ) No
( ) I'm not sure what a W-2 is

[If "not sure"]
A W-2 is a form your employer sends you in January showing 
how much you earned and how much tax was withheld. 
It's usually 1-2 pages with lots of boxes.

Did you receive a form like this? [Show sample image]

Standard mode (has filed before):

Income Sources

Did you have W-2 income in 2024?
( ) Yes  ( ) No

Did you have self-employment income?
( ) Yes  ( ) No

Did you have investment income?
( ) Yes  ( ) No

Expert mode (tax professional):

Income (check all that apply):
[ ] W-2  [ ] Sch C  [ ] Sch D  [ ] Sch E  [ ] K-1
[ ] 1099-MISC  [ ] 1099-NEC  [ ] 1099-INT  [ ] 1099-DIV

[Compact grid layout, professional terminology, no explanations]

Medical Patient Intake

Novice mode (new patient, general checkup):

Medical History

Have you had any major health issues?
( ) No, I'm generally healthy
( ) Yes, I have some conditions to discuss

[If yes]
Which of these categories apply? (Check all that apply)
[ ] Heart or blood pressure issues
[ ] Diabetes or blood sugar problems
[ ] Breathing problems (asthma, COPD)
[ ] Digestive issues
[ ] Mental health (depression, anxiety)
[ ] Other

For each selected, simple follow-up questions

Standard mode (returning patient, known history):

Welcome back! Since your last visit (June 2024), have you:

[ ] Started any new medications
[ ] Been hospitalized
[ ] Had any new diagnoses
[ ] Changed insurance

[If any checked, ask specifics]

Your current medications on file:
- Lisinopril 10mg daily
- Metformin 500mg twice daily

Any changes? ( ) No, still taking as prescribed  ( ) Yes, changes below

Expert mode (patient is healthcare professional):

Interval History:
New Dx: _______________
Med changes: _______________
Procedures: _______________
Allergies: NKA / NKDA / [Specify]

ROS: Constitutional ⬜ HEENT ⬜ CV ⬜ Resp ⬜ GI ⬜ GU ⬜
     MSK ⬜ Neuro ⬜ Psych ⬜ Endo ⬜ Heme/Lymph ⬜ Derm ⬜

[Professional medical terminology, structured documentation format]

Real Estate Investment Analysis

Novice mode (first-time investor):

Let's look at the numbers for this property.

How much does the property cost?
$ _______________

How much rent could you charge per month?
$ _______________
"Look at similar properties in the area to estimate"

What would your monthly expenses be?

Mortgage payment: $ _______________
"Use a mortgage calculator to estimate"

Property tax: $ _______________
"Check the county assessor website"

Insurance: $ _______________
"Get a quote from insurance company"

Maintenance: $ _______________
"Typically 1-2% of property value per year"

[System calculates: Cash flow, ROI, Cap rate with explanations]

Standard mode (experienced investor):

Property Analysis

Purchase price: $ _______________
Down payment: $ _______________ (%___)

Income:
Monthly rent: $ _______________
Other income: $ _______________

Expenses:
P&I: $ _______________
Taxes: $ _______________
Insurance: $ _______________
HOA: $ _______________
Maintenance: $ _______________
Vacancy reserve: $ _______________

[System shows: NOI, Cash-on-cash return, Cap rate]

Expert mode (professional investor):

Deal Analysis

Purchase: $_______ | DP: $_______ (__%) | ARV: $_______
Rent: $_______ | Exp: $_______ | NOI: $_______

Fin: ___% | ___yr | P&I: $_______

Returns:
CoC: ___% | Cap: ___% | GRM: ___ | DCR: ___

[Minimal labels, expects professional to know metrics]

Homeschool Co-op Registration

Novice mode (first-time homeschooler):

Let's get started! This will take about 5-7 minutes.

Student's Information

What is your child's name?
First: _______________ Last: _______________

When is their birthday?
Month: [dropdown] Day: [dropdown] Year: [dropdown]

Based on their birthday, typical grade placement would be:
[Auto-calculated: "Grade 3"]

Is your child ready for this grade level?
( ) Yes, that sounds right
( ) No, we'd like a different grade

[If different]
Which grade would be better?
[Dropdown with explanation for each grade level]

Why are you choosing a different grade?
( ) Academic readiness (ahead or behind peers)
( ) Social/emotional development
( ) This is our first year homeschooling
( ) Other: _______________

Standard mode (returning family):

Welcome back!

Students enrolling this year:

Emma Johnson (currently Grade 2)
Advance to Grade 3? ( ) Yes  ( ) No, she'll repeat Grade 2

Add another student? [Button]

Any changes to contact information?
( ) No, everything is the same
( ) Yes, update below

Any new medical/allergy information?
( ) No changes
( ) Yes, new information below

Expert mode (coordinator or long-time family):

Enrollment - Fall 2024

Students:
[Grid view]
Name | DOB | Grade | Allergies | Special Needs | Parent
[+Add row]

Contact:
Primary: [Unchanged / Edit]
Emergency: [Unchanged / Edit]

Medical: [Review/Update]

[Compact interface, assumes familiarity with process]

Prerequisites: - Volume 3, Pattern 1: Progressive Disclosure (scaffolding should apply within progressive sections) - Volume 3, Pattern 3: Conversational Rhythm (guides appropriate scaffolding at each stage)

Synergies: - Volume 3, Pattern 5: Error as Collaboration (error messages adapt to scaffolding level) - Volume 3, Pattern 6: Domain-Aware Validation (validation verbosity matches expertise) - Volume 3, Pattern 10: Semantic Suggestions (suggestion complexity scales with expertise)

Conflicts: - Fixed audit trail requirements (some systems need identical experience for all users) - Accessibility mandates (must ensure all levels are equally accessible)

Alternatives: - Separate forms (if populations are truly distinct and don't overlap) - Wizard with skip options (if strict sequence is required) - Always-available help (if tracking expertise is not feasible)

Known Uses

TurboTax: "Interview" vs "Forms" mode adapts complexity based on declared expertise

Mint/Personal Capital: Financial tracking adjusts detail shown based on user sophistication and portfolio complexity

Epic MyChart (Healthcare): Patient portal adjusts medical terminology based on patient's demonstrated health literacy

LinkedIn Profile Editor: Progressively reveals optimization suggestions as users demonstrate engagement with platform

Zillow Seller Hub: Real estate listing creation adapts based on whether user is homeowner, agent, or professional investor

Google Forms: "Description" vs "Help text" allows form creators to provide tiered guidance

Wealthfront/Betterment: Investment forms adjust explanation depth based on answers to sophistication assessment