Pattern 1: Progressive Disclosure

Opening Scenario: The 87-Question Monster

Marcus had been teaching real estate law for fifteen years when he decided to modernize his firm's client intake process. The old system—a twelve-page paper form that attorneys completed during initial consultations—worked, but it was inefficient. Clients couldn't complete it in advance. Attorneys spent billable time on data entry. Information was often incomplete.

Marcus created what he thought was the solution: a comprehensive digital intake form. Every question the firm might need to ask, all in one place. 87 questions covering:

Basic client information (12 questions)
Property details (23 questions)
Financial information (18 questions)
Legal history (15 questions)
Title and deed information (11 questions)
Desired outcomes (8 questions)

He sent the link to his next prospective client, Sarah, who was buying her first home.

Sarah opened the form on her phone during her lunch break. She saw:

COMPREHENSIVE REAL ESTATE CLIENT INTAKE FORM
Please complete all sections thoroughly

SECTION 1: CLIENT INFORMATION
Full legal name: _______________
Other names used in past 7 years: _______________
Current address: _______________
Previous addresses (last 5 years): _______________
Date of birth: _______________
Social Security Number: _______________
Employer: _______________
Employer address: _______________
Annual income: _______________
...

[75 more questions visible on scroll]

Estimated completion time: 25-35 minutes

Sarah's heart sank. Twenty-five minutes? She had fifteen minutes for lunch. She started filling it out, got to question 8, saw there were 79 more questions, and closed the tab. I'll do this at home tonight.

That night, she opened her laptop, started again. Question 23: "Title insurance company preference (if known)." She had no idea. Question 31: "Desired earnest money percentage." She'd need to look that up. Question 47: "Previous real estate transactions in the past ten years." Wait, did that rental she signed count?

Forty minutes in, she was at question 52 of 87, increasingly frustrated. Why are they asking about title insurance? I just want to know if they'll represent me!

She saved her progress and emailed Marcus: "This form is overwhelming. Can we just talk?"

Marcus was puzzled. The old paper form had even more questions. Why is this harder?

His colleague, Patricia, who'd been practicing for thirty years, laughed when she saw the digital form. "Marcus, honey, you put the entire intake process on one screen. The paper form worked because I controlled what questions to ask when. I started with 'Tell me about the property.' Then, based on their answer, I'd ask relevant follow-ups. A first-time homebuyer doesn't need questions about 1031 exchanges. Someone buying a vacation home doesn't need questions about homestead exemptions."

"But the system needs all this information eventually," Marcus protested.

"Eventually, yes. Immediately, no. You're asking Sarah to know things she hasn't learned yet. Progressive disclosure means you show complexity gradually, as it becomes relevant."

Patricia showed him her approach: Start with five questions. Based on those answers, show the next relevant questions. Most clients never see most of the 87 questions—because they're not relevant to that specific case.

Marcus rebuilt the form. Sarah completed it in twelve minutes. She felt informed rather than interrogated. And the firm got better information, because questions appeared in context when clients were ready to answer them.

Context

Progressive disclosure applies when:

Form complexity exceeds working memory: More than 7-10 questions total, or questions that require research/calculation

Questions have dependencies: Later questions only matter based on earlier answers

User expertise varies: Some users need guidance, others want efficiency

Completion happens in stages: Users can't or won't complete everything at once

Cognitive load must be managed: Users are stressed, distracted, or new to the domain

Multiple paths exist: Different users follow different workflows through the same domain

Problem Statement

Complex forms present a fundamental tension: Organizations need comprehensive information, but users experience information overload when confronted with 50+ questions simultaneously.

Traditional approaches fail:

Show everything approach: Present all questions at once - Overwhelms users (abandonment) - Users skim, miss important questions - Answers are less thoughtful (rushing through) - Can't adapt to individual contexts

Strict wizard approach: One question per page, rigid sequence - Feels tedious for expert users - Can't jump to sections users want to complete first - Back/forward navigation is cumbersome - Progress feels slow

Section-only approach: Divide into sections, show all questions in each section - Each section can still be overwhelming - Doesn't handle conditional logic within sections - Can't adapt to expertise level

We need an approach that reveals complexity gradually while respecting user agency and adapting to individual contexts.

Forces

Several competing forces must be balanced:

Completeness vs Cognitive Load

Organizations need comprehensive information
Users can only process 7±2 chunks of information at once
More questions = more abandonment
But insufficient data = poor outcomes

Flexibility vs Guidance

Expert users want to skip ahead, complete out of order
Novice users need step-by-step guidance
Rigid wizards frustrate experts
Complete freedom overwhelms novices

Transparency vs Surprise

Users want to know how long forms will take
Showing all questions upfront is overwhelming
Hiding total scope feels deceptive
Progress indicators must be honest

Relevance vs Standardization

Each user's path should show only relevant questions
But consistent structure aids learning and efficiency
Over-customization becomes unpredictable
Under-customization wastes user time

Speed vs Thoughtfulness

Quick completion serves user convenience
Thoughtful answers serve data quality
Rushing through leads to errors
Over-deliberation leads to abandonment

Solution

Reveal complexity progressively based on context, starting with essential questions and branching to detail only when relevant.

The pattern has four key elements:

1. Start with Core Questions

Identify the 3-5 questions that: - Everyone must answer - Determine the appropriate path forward - Require no specialized knowledge - Take less than 2 minutes to complete

Example (Real Estate):

Welcome! Let's start with the basics (2 minutes)

What type of transaction brings you here?
( ) Buying a home
( ) Selling a home
( ) Both buying and selling

Tell us about the property:
Address (if known): _______________
Approximate price range: _______________

Your contact information:
Name: _______________
Email: _______________
Phone: _______________

[Continue]

This gives users immediate success (completing something), builds momentum, and provides enough context for intelligent branching.

2. Branch Based on Context

Use answers to core questions to determine what to show next:

// Simplified branching logic
if (transaction === 'buying') {
  if (priceRange > 500000) {
    showSection('jumbo_financing');
  }
  if (firstTimeBuyer) {
    showSection('first_time_buyer_education');
  }
  showSection('buyer_qualification');
  showSection('desired_timeline');

} else if (transaction === 'selling') {
  showSection('property_details');
  showSection('current_mortgage');
  showSection('seller_timeline');

} else if (transaction === 'both') {
  showSection('contingency_preferences');
  // Show both buyer and seller sections
}

Users only see sections relevant to their situation.

3. Graduated Detail Levels

Within sections, start simple and offer detail progressively:

Level 1 - Basic (everyone sees):

Do you have any special circumstances we should know about?
( ) No
( ) Yes (please specify)

Level 2 - Categorized (if Yes):

Which of these apply?
[ ] Estate or trust involved
[ ] Short sale or foreclosure
[ ] 1031 exchange
[ ] Non-resident alien status
[ ] Other: _______________

Level 3 - Detailed (for each checked category):

[If Estate/Trust selected]
Estate/Trust Details:
  Trust name: _______________
  Trustee: _______________
  Date established: _______________
  Attorney contact: _______________

Most users stop at Level 1. Some reach Level 2. Few need Level 3. But those who need detail get it without cluttering the experience for others.

Transparent progress indicators and non-linear navigation:

Progress: ████████░░░░░░ 55%
Estimated time remaining: 3-5 minutes

Completed:
✓ Basic Information
✓ Property Details
✓ Financial Overview

Current Section:
▶ Legal History (2 of 4 questions)

Not Yet Started:
  Timeline and Expectations
  Final Review

[Save Progress] [Continue] [Back to Menu]

Users see: - What they've completed - Where they are - What's left - Ability to jump to different sections if needed

Implementation Details

HTML Structure with Progressive Sections

<form id="intake-form" data-pattern="progressive-disclosure">
  <!-- Core questions always visible -->
  <section id="core" class="form-section active">
    <h2>Let's Start with the Basics</h2>
    <p class="time-estimate">This will take about 2 minutes</p>

    <div class="field-group">
      <label for="transaction-type">What brings you here?</label>
      <select id="transaction-type" required>
        <option value="">Select...</option>
        <option value="buying">Buying a home</option>
        <option value="selling">Selling a home</option>
        <option value="both">Both</option>
      </select>
    </div>

    <div class="field-group">
      <label for="property-address">Property address (if known)</label>
      <input type="text" id="property-address">
    </div>

    <div class="field-group">
      <label for="price-range">Approximate price range</label>
      <input type="number" id="price-range" min="0">
    </div>

    <button type="button" onclick="progressiveForm.next()">
      Continue
    </button>
  </section>

  <!-- Conditional sections (hidden initially) -->
  <section id="buyer-qualification" class="form-section hidden">
    <h2>Buyer Qualification</h2>
    <p class="time-estimate">3-4 minutes</p>

    <div class="field-group">
      <label>Is this your first home purchase?</label>
      <input type="radio" name="first-time" value="yes"> Yes
      <input type="radio" name="first-time" value="no"> No
    </div>

    <!-- More fields... -->
  </section>

  <section id="property-details" class="form-section hidden">
    <!-- Seller-specific questions -->
  </section>

  <!-- Progress indicator -->
  <div class="progress-indicator">
    <div class="progress-bar" style="width: 33%"></div>
    <div class="progress-text">33% complete</div>
  </div>
</form>

JavaScript Logic for Progressive Disclosure

class ProgressiveForm {
  constructor(formId) {
    this.form = document.getElementById(formId);
    this.sections = this.form.querySelectorAll('.form-section');
    this.currentSection = 0;
    this.completedSections = new Set();
    this.userData = {};
  }

  next() {
    // Validate current section
    if (!this.validateSection(this.currentSection)) {
      return;
    }

    // Save current section data
    this.saveSection(this.currentSection);

    // Mark section as complete
    this.completedSections.add(this.currentSection);

    // Determine next section based on answers
    const nextSection = this.determineNextSection();

    if (nextSection === null) {
      // No more sections, show review
      this.showReview();
      return;
    }

    // Hide current, show next
    this.showSection(nextSection);
    this.updateProgress();
  }

  determineNextSection() {
    const transactionType = this.userData.transactionType;
    const completed = Array.from(this.completedSections);

    // Define section flow based on transaction type
    const flows = {
      'buying': ['core', 'buyer-qualification', 'financing', 'timeline'],
      'selling': ['core', 'property-details', 'current-mortgage', 'timeline'],
      'both': ['core', 'buyer-qualification', 'property-details', 'timeline']
    };

    const flow = flows[transactionType];

    // Find first incomplete section in this flow
    for (let sectionId of flow) {
      const sectionIndex = this.getSectionIndex(sectionId);
      if (!completed.includes(sectionIndex)) {
        return sectionIndex;
      }
    }

    return null; // All sections complete
  }

  showSection(sectionIndex) {
    // Hide all sections
    this.sections.forEach(s => s.classList.add('hidden'));

    // Show target section
    this.sections[sectionIndex].classList.remove('hidden');
    this.currentSection = sectionIndex;

    // Scroll to top
    window.scrollTo(0, 0);

    // Update URL hash for bookmarking
    const sectionId = this.sections[sectionIndex].id;
    window.location.hash = sectionId;
  }

  updateProgress() {
    const totalSections = this.getTotalRelevantSections();
    const completedCount = this.completedSections.size;
    const percentage = Math.round((completedCount / totalSections) * 100);

    const progressBar = this.form.querySelector('.progress-bar');
    const progressText = this.form.querySelector('.progress-text');

    progressBar.style.width = percentage + '%';
    progressText.textContent = percentage + '% complete';

    // Estimate time remaining
    const avgTimePerSection = 3; // minutes
    const remainingSections = totalSections - completedCount;
    const remainingTime = remainingSections * avgTimePerSection;

    const timeText = this.form.querySelector('.time-remaining');
    if (timeText) {
      timeText.textContent = `Estimated ${remainingTime}-${remainingTime + 2} minutes remaining`;
    }
  }

  getTotalRelevantSections() {
    // Calculate how many sections this user needs to complete
    const transactionType = this.userData.transactionType;
    const flows = {
      'buying': 4,
      'selling': 4,
      'both': 5
    };
    return flows[transactionType] || 4;
  }

  validateSection(sectionIndex) {
    const section = this.sections[sectionIndex];
    const requiredFields = section.querySelectorAll('[required]');

    let isValid = true;
    requiredFields.forEach(field => {
      if (!field.value) {
        this.showError(field, 'This field is required');
        isValid = false;
      }
    });

    return isValid;
  }

  saveSection(sectionIndex) {
    const section = this.sections[sectionIndex];
    const fields = section.querySelectorAll('input, select, textarea');

    fields.forEach(field => {
      this.userData[field.name || field.id] = field.value;
    });

    // Save to localStorage for recovery
    localStorage.setItem('formProgress', JSON.stringify({
      userData: this.userData,
      completed: Array.from(this.completedSections),
      currentSection: this.currentSection
    }));
  }

  showReview() {
    // Generate review page showing all captured data
    const reviewSection = document.createElement('section');
    reviewSection.className = 'form-section review';
    reviewSection.innerHTML = `
      <h2>Please Review Your Information</h2>
      <div class="review-content">
        ${this.generateReviewHTML()}
      </div>
      <button type="button" onclick="progressiveForm.edit()">
        Edit Responses
      </button>
      <button type="submit">
        Submit Application
      </button>
    `;

    this.form.appendChild(reviewSection);
    this.showSection(this.sections.length);
  }
}

// Initialize
const progressiveForm = new ProgressiveForm('intake-form');

Database Schema for Progressive Forms

-- Store form state for resumption
CREATE TABLE form_sessions (
  session_id VARCHAR(36) PRIMARY KEY,
  user_id VARCHAR(36),
  form_type VARCHAR(50),
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  completed_sections JSON, -- Array of completed section IDs
  current_section VARCHAR(50),
  form_data JSON, -- All captured data
  metadata JSON -- Browser info, time spent per section, etc.
);

-- Track section completion patterns
CREATE TABLE section_analytics (
  id INT AUTO_INCREMENT PRIMARY KEY,
  form_type VARCHAR(50),
  section_id VARCHAR(50),
  user_segment VARCHAR(50), -- 'first_time_buyer', 'investor', etc.
  completion_rate DECIMAL(5,2),
  avg_time_seconds INT,
  abandonment_rate DECIMAL(5,2),
  error_rate DECIMAL(5,2),
  recorded_date DATE,
  sample_size INT
);

UX Guidelines

Opening Screen Design: - Show 3-5 questions maximum - Time estimate: "About 2 minutes" - Progress indicator visible but showing early stage (5-10%) - Large, clear "Continue" button

Section Transitions: - Brief transition animations (200-300ms fade) - Section header announces what's next: "Now let's talk about..." - Save progress automatically between sections - Allow "Back" without data loss

Conditional Logic Transparency: - When skipping sections, briefly explain why: "Since you're selling, we'll skip buyer financing questions" - When adding sections, explain: "Because this is a high-value property, we need additional information about..."

Progress Indicators: - Show percentage complete - Show estimated time remaining - Update after each section - Be honest (don't show 90% complete when significant work remains)

Navigation Affordances: - Section menu always accessible via hamburger/sidebar - Completed sections marked with checkmark - Current section highlighted - Future sections shown but indicated as "Not started" - Allow jumping to any unlocked section

Mobile Considerations

One Question Per Screen: On mobile, progressive disclosure is even more critical:

<!-- Mobile: one question at a time -->
<div class="mobile-question active">
  <div class="question-counter">Question 3 of 12</div>
  <h3>What type of property is this?</h3>
  <div class="options">
    <button class="option-button" value="single-family">
      Single Family Home
    </button>
    <button class="option-button" value="condo">
      Condominium
    </button>
    <button class="option-button" value="townhouse">
      Townhouse
    </button>
  </div>
  <button class="back-button">Back</button>
</div>

Swipe Navigation: - Swipe right = next question - Swipe left = previous question - Tap to select answer, auto-advance on selection

Thumb-Friendly Buttons: - Minimum 44×44 pixel touch targets - Bottom-positioned primary actions - Large text for readability

Consequences

Benefits

Reduced Cognitive Load: - Users process 5 questions instead of 50 - Each question appears in context - Working memory not overwhelmed

Higher Completion Rates: - Users experience early success - Progress feels steady and achievable - Abandonment drops 40-60% (typical)

Better Data Quality: - Users answer more thoughtfully (not rushing through) - Questions appear when context is fresh - Confusion points are caught earlier

Adaptive Experience: - First-time buyers see guidance - Repeat clients see streamlined flow - Complex cases get detailed sections - Simple cases finish quickly

Clearer Progress: - Users know where they are - Time estimates are accurate - Completion feels achievable

Liabilities

Development Complexity: - Requires conditional logic implementation - More complex than linear forms - State management across sections - Testing all paths is harder

Initial Ambiguity: - Users don't see full scope upfront - May feel uncertain about total time commitment - Progress percentage can jump unexpectedly

Navigation Constraints: - Some patterns require sequential completion - Can't always skip ahead to desired sections - Back button behavior must be carefully designed

Maintenance Burden: - Conditional logic must be kept current - Adding new questions affects flow - Section dependencies create coupling

Domain Examples

Homeschool Co-op Registration

Core questions (30 seconds):

Student name: _______________
Grade level: _______________
Parent email: _______________

Conditional branches: - Grade = PreK/K → Show developmental readiness questions - Grade = 9-12 → Show high school credit requirements - Any grade → Show medical/allergy section if parent checks "Has medical needs"

Graduated detail: - "Does student have allergies?" (Everyone) - [Yes] → "Food, environmental, or medication?" (Subset) - [Food] → "Specific allergens? Severity? Treatment?" (Smaller subset)

Result: Most families complete in 5-7 minutes. Complex cases get appropriate depth.

Real Estate Property Listing

Core questions (1 minute):

Property address: _______________
List price: _______________
Property type: (dropdown)

Conditional branches: - Type = Single-family → Show garage, yard details - Type = Condo → Show HOA fees, amenities - Type = Multi-family → Show unit breakdown, rental history - Price > $500K → Show luxury features section

Graduated detail: - "Property condition?" → Move-in ready / Needs work - [Needs work] → "What needs updating?" (checkboxes) - [Kitchen] → "Approximate cost to update?" (if known)

Result: Agents complete detailed listings in 8-12 minutes vs 20+ for traditional forms.

Legal Client Intake

Core questions (45 seconds):

Your name: _______________
Legal issue type: (dropdown: Family, Real Estate, Business, Estate, Other)
How did you hear about us: _______________

Conditional branches: - Family Law → Divorce/custody questions - Real Estate → Property transaction details - Business → Entity type and formation date - Each path shows only relevant questions

Graduated detail: - "Is this matter urgent?" → Yes/No - [Yes] → "Court papers received?" → [Yes] → "Upload documents" + flag for immediate review

Result: Clients provide better information because questions make sense in context.

Healthcare Patient Intake

Core questions (1 minute):

Name: _______________
Date of birth: _______________
Reason for visit: _______________

Conditional branches: - Reason contains "pain" → Show pain assessment scale - Reason contains "medication" → Show current medication list - New patient → Show full medical history - Returning patient → Show "Any changes since last visit?"

Graduated detail: - "Current medications?" → None / Yes - [Yes] → "List medications" (repeating section) - For each: "Dosage? Frequency? Prescribing doctor?"

Result: Patients complete accurately without overwhelming paperwork fatigue.

Prerequisites: - Volume 3, Pattern 3: Conversational Rhythm (determines section order) - Volume 3, Pattern 4: Coherent Closure (final review before submit)

Synergies: - Volume 3, Pattern 2: Contextual Scaffolding (expertise-based disclosure) - Volume 3, Pattern 13: Conditional Branches (enables smart branching) - Volume 3, Pattern 15: Progressive Complexity (within-section disclosure)

Conflicts: - Rigid compliance forms requiring visible attestation to all terms - Forms where users must see all questions for audit trail

Alternatives: - Strict wizard: If order is absolutely sequential - Single-page: If truly only 5-7 questions total - Tabbed sections: If users need random access to all sections

Known Uses

TurboTax: Interview mode progressively asks tax questions based on filing status, income sources, deductions

Airbnb Host Onboarding: Starts with property type, progressively reveals relevant questions about amenities, pricing, house rules

LinkedIn Profile Setup: Graduated prompts for education, experience, skills—can complete basic profile quickly or add comprehensive detail

Typeform: Built entire product around one-question-at-a-time progressive disclosure

Healthcare Intake Forms (Epic MyChart, Cerner): Progressive medical history based on chief complaint and patient age

Insurance Quotes (Progressive, Geico): Start with basic info, branch to detailed questions based on vehicle type, coverage desired, driver history

Pattern 1: Progressive Disclosure

Opening Scenario: The 87-Question Monster

Context

Problem Statement

Forces

Completeness vs Cognitive Load

Flexibility vs Guidance

Transparency vs Surprise

Relevance vs Standardization

Speed vs Thoughtfulness

Solution

1. Start with Core Questions

2. Branch Based on Context

3. Graduated Detail Levels

4. Show Progress and Allow Navigation

Implementation Details

HTML Structure with Progressive Sections

JavaScript Logic for Progressive Disclosure

Database Schema for Progressive Forms

UX Guidelines

Mobile Considerations

Consequences

Benefits

Liabilities

Domain Examples

Homeschool Co-op Registration

Real Estate Property Listing

Legal Client Intake

Healthcare Patient Intake

Known Uses

Further Reading

Academic Foundations

Implementation Guides

Industry Examples

Standards and Compliance

Pattern 1: Progressive Disclosure

Opening Scenario: The 87-Question Monster

Context

Problem Statement

Forces

Completeness vs Cognitive Load

Flexibility vs Guidance

Transparency vs Surprise

Relevance vs Standardization

Speed vs Thoughtfulness

Solution

1. Start with Core Questions

2. Branch Based on Context

3. Graduated Detail Levels

4. Show Progress and Allow Navigation

Implementation Details

HTML Structure with Progressive Sections

JavaScript Logic for Progressive Disclosure

Database Schema for Progressive Forms

UX Guidelines

Mobile Considerations

Consequences

Benefits

Liabilities

Domain Examples

Homeschool Co-op Registration

Real Estate Property Listing

Legal Client Intake

Healthcare Patient Intake

Related Patterns

Known Uses

Further Reading

Academic Foundations

Implementation Guides

Related Trilogy Patterns

Industry Examples

Standards and Compliance