Chapter 7: Prototyping

Iterative Design and Prototyping

Definition

  • Iterative design is a process that uses repeated cycles of prototyping, testing, analyzing, and refining to overcome problems caused by incomplete requirements.
  • A prototype is a primitive version of a system used to explore design ideas.

Causes

  • Inherent problems of incomplete or unclear requirements in early design stages.

Goals / Objectives

  • Overcome limitations of upfront specification by learning through building and testing.
  • Gather design knowledge through practical experimentation.

Importance

  • Enables early identification of design flaws.
  • Supports user involvement and feedback throughout development.

Benefits

  • Facilitates evaluation and feedback from stakeholders.
  • Helps team members communicate design ideas effectively.
  • Allows designers to test out ideas personally.
  • Supports comparison of alternative design solutions.

Procedures

  • Build a prototype (of varying fidelity).
  • Test it with users or stakeholders.
  • Use insights gained to refine or rebuild the design.
  • Repeat the cycle until the final system is developed.

Advantages & Disadvantages

  • Not specified in notes as a direct comparison for iterative design alone (covered under prototype types and fidelity levels).

Impact / Effect

  • Leads to more user-centered and functional final products.
  • Reduces risk of costly redesigns late in development.

Examples

  • Not specified in notes beyond general prototyping examples covered in other subtopics.

Throw-Away Prototyping

Definition

  • A prototype is built and tested for learning purposes, then discarded; the final product is built from scratch using insights gained.

Causes

  • Need to explore uncertain requirements or user needs without committing to early implementation.

Goals / Objectives

  • Gain design knowledge and user feedback quickly.
  • Inform the development of the final system without being constrained by prototype code or structure.

Importance

  • Useful when requirements are highly ambiguous or volatile.

Benefits

  • Encourages experimentation without concern for maintainability.
  • Reduces risk of building the wrong system by validating assumptions early.

Procedures

  • Build a quick, often low-fidelity prototype.
  • Test with users or stakeholders.
  • Extract design lessons.
  • Discard the prototype and build the final system based on insights.

Advantages & Disadvantages

  • Not explicitly listed in notes for this specific type, but implied under general prototyping trade-offs.

Impact / Effect

  • Final system benefits from early user feedback without inheriting prototype limitations.

Examples

  • Not specified in notes.

Incremental Prototyping

Definition

  • The final product is built as separate, independent components, each developed and released incrementally; prototypes represent parts of the future system and are later combined.

Causes

  • Large or complex systems that can be logically partitioned into modules.

Goals / Objectives

  • Deliver functional parts of the system early.
  • Allow users to interact with partial implementations while the full system is under development.

Importance

  • Enables phased delivery and continuous user engagement.

Benefits

  • Users receive usable functionality sooner.
  • Development risk is distributed across components.
  • Easier to manage and test individual parts.

Procedures

  • Create an overall system design.
  • Partition the system into smaller, independent components.
  • Build and release one component at a time as a prototype or partial product.
  • Combine all components into the final system over successive releases.

Advantages & Disadvantages

  • Not explicitly contrasted in notes, but implied as a structured alternative to throw-away or evolutionary approaches.

Impact / Effect

  • Results in a series of progressively more complete product versions.

Examples

  • Not specified in notes.

Evolutionary Prototyping

Definition

  • The prototype is not discarded; instead, it evolves through iterations into the final system.

Causes

  • When early user feedback and functional needs can be incorporated directly into a growing system.

Goals / Objectives

  • Start with a minimal working version and gradually enhance it based on user input and changing requirements.

Importance

  • Ideal for systems where core functionality is understood but details evolve with use.

Benefits

  • Continuous delivery of value.
  • Strong alignment with user needs through ongoing refinement.
  • Reduces rework since the prototype becomes the product.

Procedures

  • Begin with a limited but functional version of the system.
  • Release it to users.
  • Gather feedback and add/modify features.
  • Repeat until the system meets all requirements.

Advantages & Disadvantages

  • Not explicitly listed in notes for this type alone, but concept aligns with high-fidelity iterative development.

Impact / Effect

  • The system “grows” organically from a basic version to a mature product.

Examples

  • Not specified in notes.

Prototyping in HCI (Human-Computer Interaction)

Definition

  • A design technique where users interact with experimental, incomplete designs (prototypes) to test and refine interface ideas.

Causes

  • Need to evaluate usability, workflow, and interaction before full development.

Goals / Objectives

  • Involve users early in design.
  • Test interface concepts quickly and inexpensively.
  • Answer specific design questions (e.g., “How big should the icon be?”).

Importance

  • Bridges the gap between abstract design and real user experience.
  • Critical for user-centered design practices.

Benefits

  • Stakeholders can see, hold, and interact with designs.
  • Supports team communication and idea validation.
  • Helps examine design structure and compare alternatives.

Procedures

  • Choose a prototyping method (hand-drawn, screen-based, functional, etc.).
  • Simulate interaction (e.g., designer acts as system in paper prototyping).
  • Observe user behavior and gather feedback.
  • Iterate based on findings.

Advantages & Disadvantages

  • Not specified in notes as a direct comparison for HCI prototyping specifically.

Impact / Effect

  • Leads to more intuitive and effective user interfaces.

Examples

  • Mockup videos simulating system behavior.
  • Hand-drawn prototypes with pencil “clicks.”
  • Functional prototypes connected to real databases.

Types of Prototypes (by Fidelity and Form)

Definition

  • Prototypes vary in form and realism, from rough sketches to near-final interactive models.

Causes

  • Different stages of design require different levels of detail and realism.

Goals / Objectives

  • Match prototype fidelity to the current design question (e.g., layout vs. performance).
  • Balance speed of creation with depth of feedback.

Importance

  • Choosing the right prototype type ensures efficient use of time and resources.

Benefits

  • Low-fidelity: fast, cheap, flexible for early ideation.
  • High-fidelity: realistic, useful for usability testing and stakeholder buy-in.

Procedures

  • Hand-Drawn Prototype: Designer sketches screens on paper; user “interacts” with pencil; designer simulates system responses.
  • Tool-Drawn Prototype: Screens created digitally (e.g., MS Access, Visual Basic), printed, and used like hand-drawn versions.
  • Screen Prototype: Static screens shown on a computer; limited interactivity (e.g., simulated via secret keys or stickers).
  • Functional Prototype: Interactive elements work (e.g., open windows, update data, access real databases).

Advantages & Disadvantages

  • Covered under Low vs. High Fidelity comparison (see next subtopic).

Impact / Effect

  • Influences the type and quality of feedback received.
  • Affects team alignment and development direction.

Examples

  • Hand-drawn screens with pencil annotations.
  • Printed mockups from Visual Basic.
  • Clickable screens with yellow sticky-note responses.
  • Database-connected interactive demo.

Low-Fidelity Prototyping

Definition

  • Prototypes made with simple, non-digital materials (e.g., paper, cardboard) that do not closely resemble the final product.

Causes

  • Early design phase where speed and flexibility are prioritized over realism.

Goals / Objectives

  • Quickly explore and compare multiple design concepts.
  • Focus on structure, layout, and workflow—not visual details.

Importance

  • Enables rapid iteration and early user involvement without heavy investment.

Benefits

  • Less time and lower cost to create.
  • Effective for evaluating screen layouts and navigation concepts.
  • Serves as a useful communication tool among team members.
  • Encourages open feedback (users don’t mistake it for a finished product).

Procedures

  • Use sketching, storyboards, wireframes, index cards, or “Wizard of Oz” techniques.
  • Simulate interaction manually (e.g., designer plays the computer).
  • Iterate based on user comments or team critique.

Advantages & Disadvantages

  • Advantages:
    • Less time & lower cost
    • Evaluate multiple design concepts
    • Useful communication device
    • Addresses screen layout issues
  • Disadvantages:
    • Limited usefulness for usability tests
    • Navigational and flow limitations
    • Facilitator-driven (not user-driven)
    • Poor detailed specification

Impact / Effect

  • Supports early visualization of alternatives.
  • May miss usability issues that only emerge in interactive contexts.

Examples

  • Sketching: Quick hand-drawn UI ideas using simple symbols.
  • Storyboards: Series of sketches showing user task progression (from film industry).
  • Wireframes: Simple screen layouts with rectangles and annotations to show structure and flow.
  • Card-based prototyping: 3x5 inch index cards, each representing a screen (common in web dev).
  • ‘Wizard of Oz’: Human simulates system behavior behind the scenes to mimic interactivity.

High-Fidelity Prototyping

Definition

  • Prototypes that closely resemble the final system in appearance and often in interactivity, though not always in full functionality.

Causes

  • Later design stages where detailed interaction, visual design, or performance must be tested.

Goals / Objectives

  • Validate look, feel, and behavior of near-final designs.
  • Collect accurate human performance data (e.g., task completion time).
  • Support marketing, sales, or stakeholder approval.

Importance

  • Provides realistic user experience for final validation before full development.

Benefits

  • Partial or complete functionality enables real interaction.
  • User-driven (not facilitator-dependent).
  • Clearly defines navigational schemes.
  • Useful for both exploration and formal testing.
  • Can serve as a marketing or sales tool.

Procedures

  • Built using professional tools (e.g., Adobe XD, Photoshop, Xcode/Swift, Web dev tools).
  • Includes interactive elements like clickable buttons, dynamic screens, and real data.
  • Tested with users in realistic scenarios.

Advantages & Disadvantages

  • Advantages:
    • Partial/complete functionality
    • Interactive
    • User-driven
    • Clearly defines navigational scheme
    • Use for exploration and test
    • Marketing and sales tool
  • Disadvantages:
    • Time-consuming to create
    • Inefficient for proof-of-concept designs
    • May blind users to major representational flaws (because it looks “real”)

Impact / Effect

  • Can lead to more accurate usability metrics.
  • Risk of over-investment in design directions that may still be flawed.

Examples

  • Interactive mockups in Adobe XD.
  • Functional iOS app demo built in Xcode.
  • Clickable web prototype with real navigation.

Prototyping Compromises (Horizontal vs. Vertical)

Definition

  • All prototypes involve trade-offs in scope and depth, typically categorized as horizontal or vertical.

Causes

  • Limited time, resources, or clarity about system requirements.

Goals / Objectives

  • Maximize learning within constraints by choosing the right compromise.

Importance

  • Understanding these trade-offs helps select the most appropriate prototyping strategy.

Benefits

  • Horizontal: broad overview of system scope.
  • Vertical: deep validation of specific features.

Procedures

  • Horizontal prototype: Implement many features at a shallow level (e.g., all menu items visible but non-functional).
  • Vertical prototype: Implement few features with full depth (e.g., one workflow fully functional from start to finish).

Advantages & Disadvantages

  • Not explicitly contrasted in notes, but described as two common compromise types.

Impact / Effect

  • Shapes the kind of feedback received (breadth vs. depth).

Examples

  • Not specified in notes.

Prototyping Tools

Definition

  • Software or physical kits used to create prototypes of varying fidelity.

Causes

  • Need for efficient, consistent, and shareable prototype creation.

Goals / Objectives

  • Accelerate design iteration.
  • Enable collaboration and user testing.

Importance

  • Tools determine the speed, fidelity, and interactivity achievable in prototyping.

Benefits

  • Digital tools allow easy sharing, versioning, and interactivity.
  • Paper kits support low-cost, hands-on ideation.

Procedures

  • Select tool based on fidelity needs and team skills.
  • Create screens, link interactions, and test with users.

Advantages & Disadvantages

  • Not explicitly compared in notes, but tools are listed with access models.

Impact / Effect

  • Influences team workflow and prototype realism.

Examples

  • Digital tools:
    • Figma (paid; trial available)
    • Balsamiq (paid; trial available)
    • Pencil Project (open source)
    • Marvel App (free account available)
  • Physical kits:
    • UI Stencils (paper prototyping kits)