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