Iterative design and prototyping

Notes

Study Notes

HCI Notes: Iterative Design & Prototyping

Iterative Design and Prototyping

The cyclic process of refinement and the role of mockups in Human-Computer Interaction.

1. The Principle of Iterative Design

Iterative design is a cyclic approach to creating interfaces where initial design ideas are continuously refined based on user feedback and evaluation. This is fundamental to **User-Centered Design (UCD)**.

The Core Cycle:

  • **Design:** Creating a prototype (low or high fidelity).
  • **Test/Evaluate:** Measuring the prototype's usability with users or experts.
  • **Analyze/Refine:** Diagnosing usability issues and integrating findings back into the next design iteration.

Why is Iteration Essential?

  • **Requirements Evolve:** Initial requirements are often incomplete or change over time.
  • **Discovery:** Usability flaws (even obvious ones) cannot be reliably predicted and must be discovered through testing.
  • **Cost-Effectiveness:** Finding and fixing flaws early in the design cycle (on a cheap prototype) is far cheaper than fixing them late in production code.

2. Prototyping: The Tool of Iteration

A prototype is a limited representation of a design that allows users to interact with it and gather feedback. Prototypes vary primarily in their **fidelity** (how close they are to the final product) and **coverage** (how many features they represent).

Low-Fidelity (Lo-Fi)

  • **Examples:** Sketches, paper mockups, simple wireframes.
  • **Focus:** Evaluating conceptual design, information architecture, and task flow.
  • **Advantage:** **Fast and cheap** to produce and discard. Encourages honest, high-level feedback ("Does this make sense?").

High-Fidelity (Hi-Fi)

  • **Examples:** Interactive mockups (Figma), clickable code mockups.
  • **Focus:** Evaluating detailed interaction elements, visual design, and specific widget functionality.
  • **Advantage:** Provides a realistic user experience; excellent for final validation and developer handoff.

3. Prototyping Methods

Two primary strategies guide how prototypes are built and used across the life cycle:

A. Throwaway (Rapid) Prototyping

Prototypes are built solely to gain knowledge and are expected to be discarded after testing. Common with Lo-Fi methods.

  • **Focus:** Exploration and speed. Prevents developers from becoming emotionally attached to early, flawed designs.

B. Evolutionary Prototyping

The prototype gradually evolves into the final delivered system. Common with Hi-Fi methods.

  • **Focus:** Incremental building. Requires careful management to avoid accumulating poor design decisions made early on.

C. Scope: Horizontal vs. Vertical Prototypes

  • **Horizontal:** Wide scope, shallow depth. Shows many features but very little functionality behind them (good for architectural reviews).
  • **Vertical:** Narrow scope, deep functionality. Fully develops one critical path or feature (good for testing core interactions).

Navigation

Usability engin... Back to Module Design rules: P...