Prototyping

Paper Prototyping

Mock-up the UI on paper. Use markers, colors, post it, index cards, etc..

Work quickly and reuse components where possible.

Materials

  • Widgets
    • Paper
    • Cardboard
    • Transparencies
    • stick-its
  • Connectors
    • Tape
    • Glue
    • Rubber Cement
  • Drawing
    • Markers
    • Pens
    • Color is good

Participation

Get users and stakeholders involved. This empowers and encourages people to play an active role in design process.

Feedback

People will give feedback liberally due to the ad-hoc nature of paper prototypes.

Digital Mock-ups

You can make digital mock-ups with several tools,  including:

  • Inkscape
  • Pencil
  • GNU Image Manipulation Progrem

Digital mock-ups are generally:

  • High fidelity
  • Time consuming
  • Visually appealing

Users may give less feedback as it seems that more effort has been spent creating a digital mock-up.

Storyboarding

Notes from the Human Computer Interaction class at Stanford University.

Focus on task that project is designed to support. What will the UI help a person accomplish?

Storyboarding is about communicating ideas.

Star People

Star people are quick and easy to draw. Their name comes from their resemblance to stars:

Star People

Star People

Star people can point, gesture, talk, and be drawn performing other activities.

Setting

People, environment, task

Sequence

  • Steps to complete task
  • What leads people to use the application?
  • What task is illustrated?

Satisfaction

What are the accomplishments? How is satisfaction measured?

Holistic

Storyboarding is holistic. It portrays a whole sequence of events to meet a goal.

Time Bound

Emnforce a time limit when storyboarding. E.g. 20 minutes is often sufficient.