Prototyping Techniques Summary

Introduction to Prototyping

• A prototype is an approximate (quick) version of a design
• Beneficial in early design stages before coding
• Helps test design hypotheses and get stakeholder feedback
• Facilitates iterative improvement through build → evaluate → learn cycle

Prototype Strategy

• Explore multiple prototypes rather than focusing on one version
• Prototypes should be easy to change and evolve (low fidelity → high fidelity)
• Focus on goals and prioritize them when conflicts arise
• Design exploration narrows as you progress

Prototype Characteristics

Interactivity Spectrum

• Watch only: Fixed prototype (video clip)
• Partially interactive: Pre-determined scenario prototype (1-n scenarios)
• Fully interactive: Open prototype (close to real interaction)

Fidelity Levels

• Low fidelity: Rough design with missing details, broader feedback
• High fidelity: Closer to final design, more detailed feedback

Why Start with Low Fidelity?

• Better perception from stakeholders
• Saves time
• Encourages creativity

Prototyping Techniques (Low to High Fidelity)

1. Storyboards

• Series of screen sketches showing a task
• Focus on interaction narrative, not UI details
• Should include:
  • Setting (who, environment, task)
  • Sequence (steps involved)
  • Satisfaction (problem-solving)
• Should be quick (10-30 mins)

2. Paper-Based Prototypes

• Hand-drawn UI ideas on paper
• Tips for good paper prototypes:
  • Keep it quick and simple
  • Make copies and reusable widgets
  • Be ready to simulate user interactions
  • Use background elements for context
  • Be creative with materials

Testing Paper Prototypes

• Select appropriate test users (not friends/family)
• Prepare typical usage scenarios
• Ask high-level questions about problem-solving
• Prioritize observations about user struggles
• One person facilitates while others take notes

Advantages

• Quick to create (hours)
• Allows multiple alternatives and iterations
• Can simulate most interactions

Disadvantages

• Testers can make mistakes
• Slower than actual app
• Doesn't look authentic
• Can be difficult for users without context

3. Wireframes

• More concrete UI specifications
• Defines relative sizes and locations
• Can be hand-drawn or created with tools like WireFrame Pro, Sketch, Adobe XD

4. Digital Mock-ups

• Created with software like Photoshop, PowerPoint, Figma
• Provides more detail-oriented feedback on fonts, colors, alignment

Special Prototyping Techniques

Wizard-of-Oz Prototyping

• Simulates system functionality without actual coding
• Human "wizard" operates behind the scenes
• Effective for testing AI, voice interfaces, etc.
• Requires defined scenarios and rehearsal
• Two roles: facilitator and wizard

Advantages

• Fast and cheap
• Allows testing multiple response variants
• Identifies bugs and issues
• Helps designers learn application logic

Disadvantages

• May simulate tech that's difficult to implement
• Wizard can make mistakes or be inconsistent
• Some functions are difficult to simulate

Video Prototyping

• Shows what using the design will be like
• Can range from informal to formal fidelity
• Effective for showing usage context
• Should include task steps, motivation, results
• Focus on design goals rather than video quality
  ssss