Activity 17: Haptic Helper - Discovery Challenge

🎯 Learning Objectives

By completing this activity, you will:

• Understand the three types of haptic feedback in mobile apps (Impact, Notification, Selection)
• Learn when and how to use tactile feedback to enhance user experience
• Apply haptic feedback best practices to make your apps feel more professional
• Integrate haptic feedback into your own projects for better user engagement

🚀 Getting Started (See Results in 30 Seconds!)

Installation

# Install dependencies
npm install --legacy-peer-deps

# Start the development server
npx expo start

What You'll Experience:

1. First 30 seconds: Launch the app and tap any button - FEEL the vibration!
2. Next 2 minutes: Try all 7 haptic types - notice how each one feels different
3. Your mission: Learn the patterns, then add 3 custom haptic features to make this app your own!

This activity teaches you to add professional tactile feedback that makes apps feel premium and responsive.

🎯 What's Already Working

✅ Fully Functional:

• Three Impact levels (Light, Medium, Heavy) for different tap strengths
• Three Notification types (Success, Warning, Error) for contextual feedback
• Selection feedback for subtle scrolling/picking interactions
• Beautiful dark-themed UI with color-coded buttons
• Best practices guide built into the app

⚠️ Your Mission (Discovery TODOs):

• Create custom haptic patterns <- You'll build this!
• Add context-aware haptic feedback <- Make it smarter!
• Implement haptic preset library <- Create reusable patterns!

Goal: Transform this demo into an interactive haptic toolkit with custom patterns and real-world applications!

📋 Discovery Tasks

Part One: Explore Haptic Types (15 minutes)

Task 1.1: Feel the Three Impact Levels (Easy)

File: App.js (lines 15-25)

Try each impact button and notice the differences:

// Light Impact - Gentle tap (for subtle interactions)
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);

// Medium Impact - Standard press (for buttons)
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);

// Heavy Impact - Strong press (for confirmations/deletes)
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);

Discovery Challenge:

• Tap each button 3 times and feel the intensity difference
• Which would you use for a "Delete" button? Why?
• Which would you use for scrolling through photos?

Why: Different intensities communicate different levels of importance and action consequences.

Task 1.2: Experience Notification Feedback (Easy)

File: App.js (lines 28-38)

Try the three notification types:

// Success - Task completed (positive feedback)
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);

// Warning - Proceed with caution (neutral alert)
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning);

// Error - Something went wrong (negative feedback)
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);

Discovery Challenge:

• Close your eyes and tap each button - can you tell them apart?
• Which notification type feels most distinct?
• Think of 3 scenarios in your project where you'd use each type

Why: Notification haptics have distinct patterns that communicate meaning without looking at the screen.

Task 1.3: Test Selection Feedback (Easy)

File: App.js (lines 41-43)

Tap the Selection button repeatedly (10 times fast):

// Selection - Subtle tick for scrolling/picking
Haptics.selectionAsync();

Discovery Challenge:

• Tap rapidly 10 times - feel the subtle tick pattern
• Compare to Medium Impact - which is more subtle?
• Imagine using this for a date picker wheel - does it feel right?

Why: Selection feedback provides subtle confirmation without being overwhelming during rapid interactions.

Part 2: Create Custom Haptic Patterns (30 minutes)

Task 2.1: Build a Haptic Intensity Slider (Medium)

New Feature: Add a slider that triggers haptics based on position

Create a new section in App.js after line 131:

// TODO: Add slider imports at top
import { Slider } from '@react-native-community/slider';

// TODO: Add state for slider value
const [intensity, setIntensity] = useState(50);

// TODO: Create custom intensity handler
const triggerCustomIntensity = (value) => {
  setIntensity(value);

  // Trigger haptic based on slider position
  if (value < 33) {
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
  } else if (value < 66) {
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
  } else {
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);
  }
};

// TODO: Add slider UI
<View style={styles.section}>
  <Text style={styles.sectionTitle}>Custom Intensity</Text>
  <Text style={styles.description}>
    Drag the slider to feel haptic intensity change dynamically
  </Text>
  <Slider
    style={{ width: '100%', height: 40 }}
    minimumValue={0}
    maximumValue={100}
    value={intensity}
    onValueChange={triggerCustomIntensity}
    minimumTrackTintColor="#3b82f6"
    maximumTrackTintColor="#334155"
  />
  <Text style={styles.sliderValue}>{Math.round(intensity)}% Intensity</Text>
</View>

Success Criteria:

• Slider triggers haptics as you drag
• Haptic intensity changes based on slider position
• Real-time feedback makes the slider feel alive

Why: Dynamic haptics make interactions feel more responsive and give users a sense of control.

Task 2.2: Add Haptic Combo Patterns (Medium)

New Feature: Create multi-step haptic patterns for complex actions

Add after the Custom Intensity section:

// TODO: Create combo pattern function
const triggerComboPattern = async (pattern) => {
  if (pattern === 'success-celebration') {
    // Celebrate success with a pattern: tick-tick-boom!
    await Haptics.selectionAsync();
    setTimeout(() => Haptics.selectionAsync(), 100);
    setTimeout(() => Haptics.notificationAsync(
      Haptics.NotificationFeedbackType.Success
    ), 200);
  } else if (pattern === 'error-emphasis') {
    // Emphasize error with double impact
    await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);
    setTimeout(() => Haptics.notificationAsync(
      Haptics.NotificationFeedbackType.Error
    ), 150);
  } else if (pattern === 'countdown') {
    // 3-2-1 countdown pattern
    await Haptics.selectionAsync();
    setTimeout(() => Haptics.selectionAsync(), 500);
    setTimeout(() => Haptics.selectionAsync(), 1000);
    setTimeout(() => Haptics.impactAsync(
      Haptics.ImpactFeedbackStyle.Heavy
    ), 1500);
  }
};

// TODO: Add combo pattern UI
<View style={styles.section}>
  <Text style={styles.sectionTitle}>Combo Patterns</Text>
  <Text style={styles.description}>
    Multi-step haptic sequences for complex interactions
  </Text>

  <TouchableOpacity
    style={[styles.button, styles.successButton]}
    onPress={() => triggerComboPattern('success-celebration')}
  >
    <Text style={styles.buttonText}>Success Celebration</Text>
    <Text style={styles.buttonSubtext}>Tick-tick-boom pattern</Text>
  </TouchableOpacity>

  <TouchableOpacity
    style={[styles.button, styles.errorButton]}
    onPress={() => triggerComboPattern('error-emphasis')}
  >
    <Text style={styles.buttonText}>Error Emphasis</Text>
    <Text style={styles.buttonSubtext}>Double impact alert</Text>
  </TouchableOpacity>

  <TouchableOpacity
    style={[styles.button, styles.selectionButton]}
    onPress={() => triggerComboPattern('countdown')}
  >
    <Text style={styles.buttonText}>Countdown Timer</Text>
    <Text style={styles.buttonSubtext}>3-2-1-Go!</Text>
  </TouchableOpacity>
</View>

Success Criteria:

• All three combo patterns play correctly
• Timing between haptics feels natural
• Patterns communicate clear meanings

Why: Combo patterns can convey complex information and make apps feel more sophisticated.

Task 2.3: Implement Context-Aware Haptics (Hard)

New Feature: Add smart haptics that adapt to user behavior

Add a context-aware haptic system:

// TODO: Add state to track interaction count
const [tapCount, setTapCount] = useState(0);
const [lastTapTime, setLastTapTime] = useState(0);

// TODO: Create context-aware haptic function
const triggerSmartHaptic = () => {
  const now = Date.now();
  const timeSinceLastTap = now - lastTapTime;

  setLastTapTime(now);
  setTapCount(prev => prev + 1);

  // Reduce haptic intensity if user is tapping rapidly (avoid annoyance)
  if (timeSinceLastTap < 500) {
    // Rapid tapping - use subtle selection
    Haptics.selectionAsync();
  } else if (tapCount % 5 === 0) {
    // Every 5th tap - give stronger confirmation
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);
  } else {
    // Normal tapping - medium impact
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
  }
};

// TODO: Add smart haptic UI
<View style={styles.section}>
  <Text style={styles.sectionTitle}>Smart Haptics</Text>
  <Text style={styles.description}>
    Adapts intensity based on your tapping speed
  </Text>

  <TouchableOpacity
    style={[styles.button, styles.lightButton]}
    onPress={triggerSmartHaptic}
  >
    <Text style={styles.buttonText}>Smart Feedback</Text>
    <Text style={styles.buttonSubtext}>
      Tap rapidly vs slowly - feel the difference!
    </Text>
  </TouchableOpacity>
  <Text style={styles.tipText}>Taps: {tapCount}</Text>
</View>

Success Criteria:

• Haptic intensity adapts to tapping speed
• Every 5th tap has stronger feedback
• Rapid tapping uses subtle selection feedback
• Counter shows tap count accurately

Why: Context-aware haptics prevent overuse and make apps feel intelligent and responsive to user behavior.

Part 3: Real-World Applications (20 minutes)

Task 3.1: Add Haptic Presets Library (Medium)

New Feature: Create reusable haptic patterns for common scenarios

Create a haptic presets object:

// TODO: Define preset patterns
const HAPTIC_PRESETS = {
  'button-press': () => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium),
  'delete-action': () => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy),
  'form-submit': () => Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success),
  'form-error': () => Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error),
  'picker-scroll': () => Haptics.selectionAsync(),
  'toggle-switch': () => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light),
};

// TODO: Add preset selector UI
<View style={styles.section}>
  <Text style={styles.sectionTitle}>Haptic Presets</Text>
  <Text style={styles.description}>
    Ready-to-use patterns for common app interactions
  </Text>

  {Object.keys(HAPTIC_PRESETS).map((preset) => (
    <TouchableOpacity
      key={preset}
      style={[styles.button, styles.mediumButton]}
      onPress={HAPTIC_PRESETS[preset]}
    >
      <Text style={styles.buttonText}>{preset}</Text>
    </TouchableOpacity>
  ))}
</View>

Success Criteria:

• All 6 presets work correctly
• Presets are clearly labeled with use cases
• Easy to add new presets to the library

Why: Presets help maintain consistency across your app and speed up development.

🚀 Extension Challenges

For students who want to go beyond:

Challenge One: Haptic Rhythm Game (Advanced)

Create a Simon Says style game:

• Show a sequence of colored buttons
• Player must tap buttons in correct order
• Each button has unique haptic feedback
• Success = celebration pattern, Failure = error pattern
• Track high scores and combo streaks

Show in Portfolio: Video demo showing haptic feedback synced with visual cues, explaining how haptics enhance gameplay.

Challenge 2: Accessibility Haptic Navigator (Advanced)

Build an accessibility tool:

• Convert text directions into haptic patterns
• "Turn left" = series of light taps on left
• "Turn right" = series of light taps on right
• "Stop" = heavy impact
• "Go" = success notification
• Test with eyes closed to verify effectiveness

Show in Portfolio: Document accessibility testing results and user feedback on haptic navigation.

Challenge 3: Haptic Storytelling (Expert)

Create a short interactive story:

• User taps through story scenes
• Each scene has custom haptic signature:
  • Thunder = heavy impacts
  • Footsteps = selection ticks
  • Heartbeat = rhythmic medium impacts
  • Magic = success notifications
• Haptics enhance narrative without audio

Show in Portfolio: "Haptic Design Document" explaining how each pattern was chosen to match story emotions.

🎓 What You Learned

Haptic Feedback Types

• Impact Feedback: Physical sensations for direct user actions (Light/Medium/Heavy)
• Notification Feedback: Contextual alerts with distinct patterns (Success/Warning/Error)
• Selection Feedback: Subtle ticks for continuous interactions like scrolling
• Combo Patterns: Multi-step haptic sequences for complex actions
• Context-Aware Haptics: Adaptive feedback based on user behavior

Best Practices

• When to Use Haptics:

  • ✓ Button presses and confirmations
  • ✓ Success/error state changes
  • ✓ Picker/slider scrolling
  • ✓ Important notifications
  • ✗ Background events (no user action)
  • ✗ Every single interaction (becomes annoying)

• Intensity Guidelines:

  • Light: Subtle actions (toggles, selections)
  • Medium: Standard actions (buttons, taps)
  • Heavy: Important actions (delete, submit)

• UX Considerations:

  • Match intensity to action importance
  • Don't overuse (respect user's attention)
  • Consider battery impact (haptics drain power)
  • Respect accessibility settings (some users disable haptics)

Professional Development

• Preset Library Pattern: Reusable haptic patterns maintain consistency
• Context Awareness: Smart haptics adapt to user behavior
• Testing on Real Devices: Simulators don't support haptics - always test on phones
• Portfolio Presentation: Explain haptic design decisions in demos

💡 Portfolio Tips

When showcasing this project:

1. Record Video Demo

   • Show haptics in action (hard to convey in screenshots)
   • Hold phone close to microphone to capture vibration sounds
   • Demonstrate rapid tapping vs slow tapping context awareness

2. Explain Design Decisions

   • "Why I used Heavy Impact for delete buttons (communicates severity)"
   • "How context-aware haptics prevent annoyance during rapid interactions"
   • "When I chose combo patterns over single haptics (celebration effects)"

3. Connect to Real Projects

   • "I added haptics to my Photo Journal app's camera shutter (Medium Impact)"
   • "Form submissions in my custom project use Success notifications"
   • "Photo gallery uses Selection feedback for swiping through images"

4. Discuss Trade-offs

   • Battery impact vs user experience enhancement
   • Haptic complexity vs development time
   • Accessibility considerations (some users disable haptics)

🚨 Common Issues

"Haptics not working on iOS Simulator"

• Solution: Haptics require a real device - test on your phone via Expo Go
• Simulators don't have haptic hardware

"No vibration on Android"

• Check device vibration settings in Settings -> Sound
• Ensure "Do Not Disturb" mode is off
• Some Android devices have weaker haptic motors than iPhones

"Combo patterns don't feel right"

• Adjust timing between haptics (100-200ms is usually good)
• Test on multiple devices (haptic motors vary)
• Try different intensity combinations

"App crashes when triggering haptics"

# Clear Expo cache
npx expo start --clear

📚 Next Steps

After completing this activity:

1. Add haptics to your portfolio projects (Photo Journal, Gallery, Custom Project)
2. Experiment with custom combo patterns for your app's unique interactions
3. Create a "Haptic Design Guide" documenting your preset library
4. Test haptics with friends/family - get feedback on what feels natural

🎯 Submission Checklist

Before submitting, ensure:

• All discovery tasks completed (explore + 3 custom features)
• Custom intensity slider implemented
• At least 2 combo patterns created
• Context-aware haptics working correctly
• Haptic presets library created with 6+ patterns
• Tested on real device (not simulator)
• Portfolio notes written explaining design decisions
• Video demo recorded showing haptics in action

🎯 Integration into Projects

Photo Journal (Project 1)

Add haptics when:

• Taking a photo (Medium Impact - feels like shutter click)
• Saving entry (Success notification)
• Deleting entry (Heavy Impact + Error for confirmation)
• Scrolling through entries (Selection feedback)

Photo Gallery (Project 2)

Add haptics when:

• Selecting photos (Selection feedback for multi-select)
• Applying filters (Light Impact per filter applied)
• Sharing success (Success notification)
• Long-press actions (Heavy Impact for menu open)

Custom Project

Consider haptics for:

• Form submission (Success/Error notifications)
• Swipe gestures (Selection for continuous, Impact for snap points)
• Game mechanics (custom combo patterns)
• Navigation transitions (Light Impact)
• Error validation (Error notification + Heavy Impact)

📤 Submission

When complete:

1. Record 30-second video demo showing:
   • Original haptic types working
   • Your 3 custom features in action
   • One real-world application in your project
2. Write one paragraph explaining your favorite custom pattern and why
3. Submit via Activity Form

Tech Stack: React 18.3.1 | React Native 0.76.1 | Expo SDK ~54.0.0 | expo-haptics ~14.0.0

Need Help? Review Concept 17: Haptic Feedback & Vibration, or ask in the course discussion forum!