Processing element

​

When to Use

• Complex calculations - “Analyzing profile… Matching preferences… Finding deals…”
• Account setup - “Creating account… Setting preferences… Loading dashboard…”
• Quiz results - “Scoring answers… Comparing results… Generating report…”
• Personalization - “Reading goals… Building plan… Customizing experience…”
• Pre-checkout - “Checking inventory… Applying discounts… Reserving items…”

​

How It Works

1. First loader starts and completes
2. Shows ✓ when done
3. Next loader begins
4. Process continues through all steps
5. Triggers action when all complete

​

Configuration

​

Adding Loaders

• “Analyzing your responses”
• “Calculating best matches”
• “Preparing recommendations”

• 1000-2000ms: Quick steps
• 2000-4000ms: Important steps
• 4000-6000ms: Complex operations

• ”✓ Analysis complete”
• ”✓ Matches found”
• ”✓ Ready!”

​

Optimal Sequences

1. Quick scan (2s)
2. Main processing (3s)
3. Final preparation (2s)
Total: 7 seconds

1. Initial check (1.5s)
2. Data analysis (2.5s)
3. Comparison (3s)
4. Optimization (2s)
5. Finalization (1.5s)
Total: 10.5 seconds

​

Triggers

​

On Complete

• Navigate to results page
• Show personalized offer
• Reveal hidden content
• Start animation sequence

​

Individual Loader Triggers

• After step 1: Update message
• After step 2: Show preview
• After step 3: Final reveal

​

Effective Messaging

​

Progressive Storytelling

1. "Analyzing your current habits..."
2. "Calculating calorie needs..."
3. "Finding perfect meal plans..."
4. "Customizing workout routine..."
5. "Preparing your program..."

1. "Reviewing spending patterns..."
2. "Identifying savings opportunities..."
3. "Calculating potential returns..."
4. "Building investment strategy..."

​

Value Building

"Checking 500+ products..." → Scale
"Comparing 50 providers..." → Thoroughness
"Applying exclusive discounts..." → Special treatment
"Personalizing for you..." → Individual attention

​

Technical Feel

"Initializing algorithm..."
"Processing data points..."
"Running optimization..."
"Generating results..."

​

Common Patterns

​

Quiz to Results

Quiz completion →
Processing:
1. "Scoring your answers..." (2s)
2. "Analyzing personality type..." (3s)
3. "Matching with database..." (2.5s)
4. "Preparing detailed report..." (2s)
→ Personalized results page

​

Price Calculator

Input preferences →
Processing:
1. "Analyzing requirements..." (2s)
2. "Checking current rates..." (3s)
3. "Applying discounts..." (2s)
4. "Calculating final price..." (1.5s)
→ Custom pricing page

​

Matchmaking

Profile complete →
Processing:
1. "Reading your preferences..." (2s)
2. "Scanning potential matches..." (4s)
3. "Scoring compatibility..." (3s)
4. "Selecting best matches..." (2s)
5. "Preparing introductions..." (1.5s)
→ Match results

​

Mobile Optimization

• Loaders stack vertically
• Clear progress visibility
• Smooth animations
• No horizontal scrolling

• Lightweight animations
• Battery efficient
• Works on slow connections
• No heavy graphics

• Large progress bars
• Clear labels
• Visible checkmarks
• Good contrast

​

Psychology of Multi-Step Processing

​

Investment Principle

• 1 loader: Basic processing
• 3 loaders: Significant work
• 5+ loaders: Complex operation

​

Competence Signal

• Thoroughness
• Sophistication
• Attention to detail
• Personalization

​

Anticipation Building

• Builds excitement
• Shows progress
• Maintains engagement
• Prevents abandonment

​

Best Practices

​

Duration Guidelines

• Total time: 6-12 seconds optimal
• Individual steps: 1.5-4 seconds
• Variation: Mix durations
• Never exceed: 15 seconds total

​

Message Guidelines

• Use active verbs (analyzing, calculating)
• Include specifics (500+ options)
• Show progression (step 1 → 2 → 3)
• End positively (Ready! Complete!)

​

Visual Guidelines

• Consistent loader style
• Clear completion indicators
• Sufficient spacing
• Mobile-friendly size

​

Common Mistakes

​

Too Many Steps

• 3-5 steps ideal
• More becomes tedious
• Test user patience

​

Uniform Timing

• Feels mechanical
• Vary durations slightly
• More realistic

​

Vague Messages

• Be specific about actions
• Build value with details
• Avoid generic “Processing…”

​

Too Long Total

• Over 15 seconds loses users
• Break into pages if needed
• Test optimal duration

​

Combining with Other Elements

​

Processing + Variables

"Analyzing {{user-name}}'s profile..."
"Finding plans near {{user-city}}..."
Increases personalization feeling

​

Processing + Timer

Processing: Setting up account
Result: "Account expires in {{timer}}"
Investment + Urgency

​

Processing + Reviews

Processing: Finding matches
Result: Show testimonials
"Others like you succeeded"

​

Testing Variables

1. Number of steps - 3 vs 5
2. Total duration - 6s vs 10s
3. Message style - Technical vs friendly
4. Completion indicators - Checkmarks vs percentage
5. Step order - Quick-slow vs slow-quick

​

Troubleshooting

​

Conversion Impact

​

Next Steps

• Show results after processing
• Add single loaders for simple waits
• Track completion with analytics
• Test sequences with A/B tests