prototyping and design
DESCRIPTION
Prototyping and Design. HCC 729 2 / 27/14. What’s new?. Inspirations / UI design Questions about assignments Feedback on user tests Interesting UARs Other surprises. How to prototype your ideas. Partially adapted from ac4d online materials. http://library.ac4d.com/. - PowerPoint PPT PresentationTRANSCRIPT
Prototyping and Design
HCC 729 2/27/14
What’s new?• Inspirations / UI design• Questions about assignments• Feedback on user tests
– Interesting UARs– Other surprises
How to prototype your ideas
Partially adapted from ac4d online materials
http://library.ac4d.com/
DAVID KELLY, IDEO
“Humans are really interesting. If you show them your idea in a prototype form, very few people will tell you what’s right about it…
But everybody will tell you what’s wrong with it.”
What is a Prototype?
What is a prototype?• Prototype = “working” model
• Common in almost every field of engineering design– Airplanes, chemical structures, architecture…
• In HCI Prototypes are • Full-size or to scale• Fully or partially functioning• Limited representation of an idea• Virtual or physical
Prototype examples
Prototype Examples• A series of screen sketches (paper)
• A storyboard, cartoon-like series of scenes illustrating key points of a scenario
• A PowerPoint Slide show
• A video simulating the use of a system
• A piece of software with limited functionality written in the target language or in another language
• An electronic mock-up (hardware)
• A cardboard mock-up
Why Prototype?
Why bother making one?
We are all experts, right?
Why Prototype?• To identify user interface and functional
requirements– Almost impossible to specify in advance
• Can’t always get things right the first time…
Why Prototype?
• Reveals problems/prevents mistakes
• Building artifacts immediately leads to costly errors– We can often avoid
expensive development by building reasonable prototypes
Why Prototype?• Enables quick evaluation and feedback
throughout design process• Fosters discussion, reflection and innovative
ideas (from designers and users): concrete artifact
• Keeps design focused on users• Cheap, easy way to test designs with users
– Help choose between design alternatives (risky/critical features, go/no-go decisions)
– Help answer specific questions– Users enjoy prototyping and feel involved– Provides continuous feedback on the current design
situation
Prototyping: When/How?
Brainstorm different representationsChoose a representationRough out interface Style
Task centered walkthrough and redesign
Fine tune interface, screen designHeuristic evaluation and redesignUsability testing and redesign
Limited field testing
Alpha/Beta tests
Low fidelity paper prototypes
Medium fidelity prototypes
High fidelity prototypes
Working Systems
Early Design
Late Design
Prototyping Stages
Redesign
EvaluatePrototype
Design
ALL PROTOTYPES INVOLVE COMPROMISE
Choose your compromises wisely…
Prototype Compromises• Examples of compromises in software-
based prototyping: – Slow reaction time– Limited functionality– Use “placeholder” images: clipart, stock icons– Simulate data or input
• Two common types of compromise: horizontal and vertical
Horizontal vs. Vertical
Horizontal“thin” prototype
Vertical“thick” prototype
Horizontal vs. Vertical• Horizontal Designs
– First level of user interface is fully present– No, or limited, functionality (but looks complete)– Fast implementation– Full extent of interface can be tested, but not in a real-use
context– Often does not capture the interaction “feel”
• Vertical Designs– Restricted to a subset of the system– This subset offers the interface and functionality– Can undertake realistic testing
Fidelity• Designers create prototypes at multiple
levels of detail, or Fidelity• Example: Web sites are iteratively refined
at all levels of detail
Site Maps Storyboards Schematics Mock-ups
Low High
Fidelity
Fidelity Example
Fidelity in Prototyping• Low Fidelity
– Quickly made representations of interface, interaction is imagined
• Medium Fidelity– Prototypes that are more finalized than low
fidelity, simulate interaction• High Fidelity
– Prototypes that look like the final product, build interaction elements
– Will cover in a future lecture….
What tools do I need?
Suggestions?
What is this device?
What is this device?
A prototyping tale…Anyone know what
this device is?
The Apple Newton• First significant PDA (1993)• Handwriting recognition built
into it!• Huge failure on the market.
– Too big and heavy to carry– Too slow to run most
applications– Handwriting detection was not
very accurate
Redesigning the Newton• After failure of the Newton, two of its inventors left
Apple to design a new device and used techniques from all areas of HCI.– Identified that the Newton failed because it was too big
and too slow. – Focused on exploring the form of the device through
“block of wood prototypes” which Jeff Hawkins carried around to decide what the correct form should be.
– Redesigned the hardware specifications so it would fit with the smaller form.
– The basic Pilot 1000 retailed for $299, half the price of a Newton.
Additional information
• When working out the Palm's handwriting recognition system, Graffiti, Hawkins said he scribbled notes all day on a pad of paper. But he didn't write the letters side by side. Instead he scrawled them one on top of each other -- just the way it's done on the Palm -- ending up with indecipherable blobs on the page.
• Hawkins told how his make-pretend method led him to conclude that voice recognition will never be a good way to control computers -- a notion that goes against current wisdom, including Microsoft's, which is sinking millions of dollars into researching the endeavor.
• Hawkins said when he's sat around pretending to control his computer by voice the experience is unsatisfactory and uncompelling.
• Quotes from wired.com article about Jeff Hawkins: http://www.wired.com/science/discoveries/news/1999/10/32010
Result of Newton Redesign
Low Fidelity Prototyping
Low Fidelity Prototypes• Paper Prototypes
– Paper mock-up of the interface look, feel, functionality
– Quick and cheap to prepare and modify
• Purpose– Brainstorm competing representations– Elicit user reactions– Elicit user modifications / suggestions
Why Use Low Fidelity Prototypes
• Traditional methods take too long– Sketches -> prototype -> evaluate -> iterate
• Can simulate the prototype– Sketches -> evaluate -> iterate– Sketches act as prototypes
• Designer “plays computer”• Other design team members observe and record
• “Kindergarten” implementation skills.– Allows non-programmers to participate
Low Fidelity Prototyping• Uses a medium which is unlike the final
medium, e.g. paper, cardboard represent software– Quick, cheap and easily changed– Support the exploration of alternative designs and
ideas– Best in early stage of development and not intended
to be final product
• For exploration ONLY: concepts, look and feel, iron out usability issues early on
• Examples– Sketches of screens, task sequences, etc– “Post - it” notes– Storyboards
Low Fidelity Prototypes• Sketching is important• Don’t be inhibited about drawing ability,
practice simple symbols• Develop your own symbols and icons
People Computer Interactions
Paper Prototyping Rules• Set deadline (don’t spend too long)• Draw window on large paper• Draw different screen regions on index
cards and them put on the window paper• Ready responses for any user action
(“magic mouse” can make anything a link)• Photocopy to make test version• Test, markup, and iterate
Tools of the trade
Index Cards• Index cards (3”x5”)… a great size!• Each card represents one screen or one
element of a task• Great for software prototypes with multiple
screens– Website design– Mobile devices– Windows of software
Index Cards (Example)• Include enough detail for users to interact
with the prototype
Make a Low Fidelity Prototype• This example gives an overview
of the layout without any detail - a good starting point
• Numerous alternatives can be quickly created without worrying about details
• Should be produced in pencil (so you can easily change it)
• Should be hand-drawn (rulers take too much effort)
Is this a good low fidelity prototype?
An example of a “tidy” prototype– More difficult to change this
prototype than hand drawn sketches (even if you use a fancy drawing package)
– It is highly unlikely that the first (or 2nd, or 3rd, or 4th) designs will be completely correct
– Designs that are hard to amend, won’t be amended.
– No benefit over the hand-drawn sketches, just took longer to make, and less likely to get good feedback
– Do you really want to make one of these for all 10 of the designs you want to evaluate?
Prototype at the right fidelity!!!
WRONG!!
Make a Low Fidelity PrototypeOnce you like your layout,
you can focus on details of the design– example data values,
menu content, buttons, labels, etc
– More specific layout of interface objects
– You can even annotate your paper prototype!
Fancier Low Fidelity PrototypesOnce the details are
ironed out, you can create your interface “toolkit”– Cut out each of the
components (windows, dialogs, menus, etc) into it’s own window
• These can be used to dynamically simulate the entire interface following a storyboard, or flow.
Useful Low Fidelity Tools
• Large, heavy, white paper• Index cards• Tape, stick glue, correction tape• Pens & markers (many colors
and sizes)• Large sheet of foam core,
poster board, butcher paper• Scissors, X-acto knives• Band-aids
Explore your local art store for supplies!
Low Fidelity Advantages• Can “build” entire site quickly• No expensive equipment required• Can simulate almost anything• Anyone can implement prototypes
– Anyone can participate in your design process!• Fast iterations: # iterations has positive
impact on quality of final design.– Always want to explore multiple ideas, so you
don’t fall into “Local Maximum”
Low Fidelity Disadvantages• Not detailed enough to implement from• Need to be facilitated when presented to users• Does not address issues that arise from implementation• Some interactions are hard to simulate with paper
• dragging, pull down menus, selections • system speed/latency
• Form is not always clear• device size• ergonomics• appearance
• Can be a barrier to spend the effort to create prototypes
Summary: Low Fidelity Prototypes
• Traditional methods take too long, can do in a few hours
• No expensive equipment required• Can simulate almost anything• Anyone can implement• Fast iterations: # iterations has impact on
quality of final design.
Testing with low fidelity prototypes
• Like conducting a user test / think aloud– Concrete tasks– Quiet environment– Let the user guide the process
• One experimenter acts as the “computer”
Medium Fidelity
Wizard of Oz… (to come later)
High Fidelity Prototyping
Not covered in this class…
Additional Prototyping Examples
http://www.nngroup.com/reportsprototyping/video_stills.html
Prototyping Examples• Pieces of paper
http://www.youtube.com/watch?v=ykJ60H4Qkvg&feature=related
• Simulated screen with paperhttp://www.youtube.com/watch?v=oITeUEjrY3Q&feature=related
• Cell phone testinghttp://www.youtube.com/watch?v=Bq1rkVTZLtU&feature=related
• Prototype usability testing http://www.youtube.com/watch?v=L7oPR2aTGlM&feature=related
• Complete prototyping processhttp://www.youtube.com/watch?v=5Ch3VsautWQ
• Kid’s game design (what not to do)http://www.youtube.com/watch?v=L3yl9vaJuFE&feature=related
Remember the Hick-Hyman Law• With every additional choice, the time it will
take for one to make a selection increases.
• When prototyping products, systems, and services, Less = More.
• Try to prototype the variables that need the most attention or are vital to the user achieving their goal.
For next week
AssignmentReadings
Readings• Required
• Usability Engineering, Chapter 7
Assignment• Create a low-fidelity prototype of a
redesign for the website you are studying• This prototype should support 5 tasks that
you have identified as problematic in either the HE or TA.
• Your prototype must be on paper• Your prototype can be hand drawn, or
created on the computer• You do not have to worry about color / type
Assignment (deliverables)• Bring it in
• Feel free to design with your users.
• Write 100-200 words about what you focused on in your design, and the design decisions you made
In-Class Exercise
• Identify (in groups) the most important interactions for your redesign
• May need to revisit CI UARs• May need to revisit proposed solutions
• Decide what medium you will use to prototype those interactions
• Sketch out a paper prototype of *one* solution