Understanding HCI


What is Prototyping?

Prototyping involves creating a basic system which is a (semi / fully) working version of the current incarnaion of the system - a concrete but partial implementation of a system design. It

  1. Is realistic and professional-looking,
  2. Can use for formal acceptance with client
  3. Identifies problems early

Different flavours of Prototyping

Full prototype

  1. whole system description
  2. Full functionality
  3. but lower performance

Horizontal prototype

  1. All or most aspects of user interface, little functionality
  2. only top level functions work
  3. Everything on screen should work, but not 'go' anywhere

Vertical prototype

  1. One or two threads of interaction in depth
  2. from top to bottom
  3. Only some things on screen should work - links to interaction you want user/tester to follow

Incremental prototype

  1. Designed, developed and evaluated stage-by-stage, eventually becomes the final product
  2. Evolutionary prototyping and rapid prototyping are similar concepts
  3. This is useful when the user is unsure what the system should be like. It is a simple way of ensuring that the design is right. It allows the user to evaluate the system as it develops and user feedback can then be used in the further development of the system.

Hi fidelity prototype

  1. Mockups and models
  2. Make computers disappear: eg build boxes to house computer screens
  3. Generally use high quality, realistic representation medium - video, computer animation
  4. May use software tools such as html, PowerPoint, visual basic, director

Low fidelity prototype

  1. Don’t look very much like finished product
  2. Simple, cheap and easy to modify
  3. Often used in conceptual design to encourage discovery
  4. Generally use a medium that is far away from final implementation
  5. Never integrated directly into finished product
  6. Examples: paper prototype

Why Use it?

  1. Saves money - “Finding and fixing a software problem after delivery is 100 times more expensive than finding and fixing it during the requirements and early design phases.” Boehm (1981)
  2. Brings the design to life
  3. Clarifies requirements
  4. Supports user involvement and feedback
    1. As observers of demonstrations, and/or
    2. Through hands-on testing, and/or
    3. In extended field trials (beta testing)and/or
    4. As co-designers
  5. Identifies problems early - can be used to explore usability issues
  6. Improves communication
  7. Supports exploration of imagined use – the prototype does not have to be able to do everything that the finished product does

Examples of Prototype Goals

  1. Testing the effectiveness of labels and icons.
  2. Finding out the right balance of depth and breadth of a topical hierarchy.
  3. Determining the right options to offer for narrowing a search.
  4. Settling the question of whether your target audience accomplishes tasks better with a task-oriented organization scheme or with a topical organization scheme.


  1. A scale model
  2. Paper-based screen representations/storyboard
  3. Macromedia Director representing user interactions
  4. 3D mockup eg cardboard or other material representation
  5. Powerpoint linked screens
  6. http://www.boxesandarrows.com/archives/large/002870.php
  7. http://www.sapdesignguild.org/resources/prototypes.asp

Limitations Of method

  • But can be difficult to throw bad ideas away
  • Can look too finished