The Sketch in Interaction Design

Two requirements approaches when prototyping an interactive system:

  1. Using a formal specification.
  2. Developing the specification out of the prototype.

Human-Centered Design Process: ISO 13407

Specifies general activities to be performed in development, but it does not demand or recommend particular techniques or methods.

Early in design, requirements are at a high level: design solutions are likely to be mockups.

As work progresses, higher fidelity prototypes will be evaluated against more detailed requirements.

The Star Life Cycle

Why Prototype?

  • Design Process: involves searching for an acceptable design in an infinitely large design space.

Problems (we…):

  1. May not search effectively.
  2. May not recognise a good design.
  3. May mistakenly think a bad design is good.

The value of prototyping is “to fail, and fail fast”.

What is a prototype?

A good definition is: “building a physical working model of all, or part of the proposed system and using it to identify weaknesses in the understanding of the real requirements.”

Best practice:

  • Look at social and cognitive effects.
  • Use hands-on testing by users, in realistic scenarios.
  • Use with a design/evaluation methodology integrating prototype testing.
  • Ask: what information is the prototype intended to help elicit?

What do we use it for?

  • Work out details and test them, in ways not possible at level of verbal description.
  • Quickly and cheaply build features of interest, to try them out.
  • Concrete approach, to show user what inputs, intermediate stages and outputs look like.
  • Users can suggest changes, and see if it does what they want.

Prototyping in the Design Process

E. g. car design:

  • Doodles. (to question)
  • Storyboards/sketches. (to question)
  • Blueprints. (to show and communicate ideas)
  • Scale models. (to show and communicate ideas)
  • Wind tunnel model. (to test etc)
  • Computer model. (to test etc)

Used for: exploring, testing, recording and communicating design ideas.

When to prototype?

When…

  • The application area is poorly defined.
  • Cost of rejection is very high.
  • Final version is essential to be right 1st time.
  • Requirement to assess impact of change.

It forces the analyst to visualise all steps and how the interface will operate in practice.

Current development systems are flexible, so we need to know what to build as early as possible.

“Levels” of prototyping to support design

  1. Product Conceptualisation: allows exploration of alternative designs. What might the system/application/device actually look like or do?
  2. Task Level Prototyping: suitability of the design at the level of performing users’ tasks. How can an individual task be performed - what steps are required?
  3. Screen Design Prototyping: Focus on icons, menus and screen layouts. What would the screen layouts actually look like, to assess their suitability? Where are the buttons and widgets going to be placed?

Economic Principle of Prototyping

“The best prototyping is one that, in the simplest and most efficient way, makes the possibilities and limitations of a design idea visible and measurable.”

Varieties of prototype

  • Full prototype vs paper prototype.
  • Horizontal prototype vs vertical prototype.
  • Lo-fi prototype vs hi-fi prototype (and med-fi).
  • Chauffeured prototype.
  • ‘Wizard of Oz’ prototype.

Lo-fi prototype

  • Sketches and models focus on the outward appearance and ‘feel’ of the designed system.
  • Hard to envisage fine interaction details.

Hi-fi prototype

  • Slow to build.
  • Reluctance to change the design - all that hard work!
  • Testers and reviewers tend to focus on fit and finish issues.

‘Wizard of Oz’ prototype

  • A human intermediary/hidden operator intercepts commands and applies suitable interpretation.
  • It permits early, flaky design (and code) to be tested.
  • It is also used in paper prototyping.

Wireframing

A common way to plan an interface, similar to blueprints.

Each wireframe represents an individual screen, usually covered in colourless squares with little notes all over them.

It is a low fidelity layout design:

  • Contains the main information.
  • Draws the outline of structure and layout.
  • Visual and description of the user interface.
  • Usually abstracted from the content.

Paper prototyping (POP)

Likely Issues

  • In concepts and terminologies.
  • Navigation problems.
  • Content.
  • Documentation/help.
  • Requirements/functionality.
  • Brand.

Not Likely Issues

  • Small changes in response to user inputs.
  • Problems from dynamic change.
  • Effects of keystroke or mouse errors.
  • Download or response time issues.
  • Issues from long-term use.
  • Real life contexts.