W6: Prototyping

Spectrum that prototypes occupy?

From low fidelity to high fidelity Low-fi: does not look much like a final product, does not provide same functionality High-fi: may look like a final product or provide much of the functionality

Two types of design

Conceptual: conceptual model that captures what the product will do and how it will behave Concrete: details of design, eg menu structures, graphics

Horizontal prototyping versus vertical prototyping

Horizontal prototyping: provide a wide range of functions with little detail Vertical prototyping: provide a lot of detail for only a few functions

Lim et al Anatomy of prototyping: Filters and manifestations 3 manifestation dimensions

Material Resolution Scope

MVP

Minimum Viable Product

Can sketches, mockups and wireframes be prototypes?

No, each is static , representing a single state of proposed design

Guy Kawaski advice

Not to focus on documentation, focus on prototyping. People will either use it or not, do not suppose they will, get them to use it.

Prototype defintion

One manifestation of a design that allows stakeholders to interact with it and explore its suitability

Lim et al Anatomy of prototyping: Filters and manifestations 5 filtering dimensions

1) Appearance 2) Data 3) Functionality 4) Interactivity 5) Spatial structure

Lim et al Anatomy of prototyping: Filters and manifestations 3 key principles

1) Fundamental prototyping principle: prototyping is an activity with the purpose of creating manifestation that, in its simplest form, filters the qualities in which designers are interested without distorting the understanding of the whole 2) Economic principle of prototyping: the best prototype is the one that, in simplest and most efficient way, makes the possibilities and limitations of a design idea visible and measurable 3) Anatomy of prototypes: prototypes are filters that traverse a design space and are manifestations of design ideas that concretize and externalize conceptual ideas

Process of wireframing

1) Get piece of paper & pen 2) Define content to be displayed 3) Crazy 8s - fold piece of paper into 8 sections for 8 alternative designs 4) Put * next to best ideas 5) More on to computer (eg . programme Sketch ) 6) Recreate design using default boxes & text

Prototyping techniques

1) Paper prototype 2) Video prototype 3) Wizard of Oz 4) Wireframes 5) Mockups 6) Physical prototype 7) Prototyping software

Wireframes definition

Blueprints of the design of a computer interface NB: Consists of outlined boxes where photos & text boxes will be placed

Conceptual versus concrete design

Difference is a matter of changing emphasis: during design, conceptual issues will sometimes be highlighted and at other times, concrete detail will be stressed

Original Wizard of Oz technique VS Nowadays

In the original technique the ' wizard ' was unknown and hidden from the users Nowadays it is common for the user & experimenter to pretend the wizard isn't there eg sketch-a-move

4 interaction types

Instructing, conversing, manipulating and exploring

Wizard of 0z technique

Low fidelity technique: Human operator simulates the behaviour of the system Originated by John Kelley in 1983

The Wooden Block Palm Pilot

Personal assistant known as palm pilot was introduced in 1996 Jeff Hawkins carved out the prototype of a piece of wood from his garage, it consisted of block of wood and a wooden chopstick, paper was to be put on top in place of the screen He carried it around for months pretending it was a real computer Was later introduced as final product with display and buttons in plastic

Two types of prototype (Saffer, 2010)

Product prototype Service prototype (involves role playing and people as an integral part of prototype as well as the product itself)

Prototyping software types

Purpose built, eg Balsamiq Others: PP, Adobe Flash

Wireframes purpose

Purpose to start organizing information & figuring out flow of a page / app before going into details, eg fonts, colors

Paper Prototyping

Representative users perform realistic tasks by interacting with a paper version of the user-product interface that is manipulated by a person acting as a computer, who does not explain how the interface works.

Video prototypes

Short videos that show how the technology would be used Tell a whole story of interaction process Cheap & fast methods Often combined with other prototyping techniques, eg wizard of Oz or mockups

What is required of prototype?

Simulates some aspect of how the application is intended to work

Confusion on mockup term

Term mockup is used in different ways by different ppl: - IDF views mockup, low fidelity prototype and paper prototype as interchangeable - Balsamiq views wireframing & mockups as interchangeable - In publishing, mockup is a final magazine version before gone to printing

2 people involved in paper prototype testing

User and facilitator

Sketch-a-move example

combined some features of video prototyping technique & Wizard of 0Z Involves drawing a scale down version of the intended path on the roof of a toy car and after that the car would automatically follow the path Was a collaboration between Anne App and Louis Clinker responding to an open brief project set by Matel, the toy manufacturer to " design a smart toy car for children aged 4-11 " Revealed: was operated by magnet underneath via pre drawn path Hidden operator = Wizard of Oz technique & video prototyping

Interface metaphor

combines familiar knowledge with new knowledge in a way that will help the user understand the product

Opportunistic System development (aka tinkering)

modifying and integrating existing components, both software and hardware

Paper prototyping techniques

pre-cut elements of UI, trace paper for pop ups, highlighter, post it notes, index cards (take notes on takeaways and place on board to focus on for the next version of prototype)

Preece quote on what prototype usually does

prototype will usually emphasize one set of products characteristics and de emphasize others

What sketches are about versus prototypes?

sketches = about exploring ideas in earlier stages prototypes = about testing ideas later in the cycle

What are sketches, wireframes and mockups are used for?

sketches = explore ideas quickly wireframe = map out application structure mockups = refined representation of final visual design