1. Prototyping and Design
HCC 729
2/27/14

2. What’s new? Inspirations / UI design Questions about assignments
Feedback on user tests
Interesting UARs
Other surprises

3. How to prototype your ideas
Partially adapted from ac4d online materials

5. “Humans are really interesting
“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.”
David Kelly, IDEO

6. What is a Prototype?

7. 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

8. Prototype examples

9. 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

10. Why bother making one? We are all experts, right?
Why Prototype?
Why bother making one?
We are all experts, right?

11. Why Prototype? To identify user interface and functional requirements
Almost impossible to specify in advance
Can’t always get things right the first time…

12. Why Prototype? Reveals problems/prevents mistakes
Building artifacts immediately leads to costly errors
We can often avoid expensive development by building reasonable prototypes

13. 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

14. Prototyping: When/How?
Early Design
Brainstorm different representations Choose a representation Rough out interface Style Task centered walkthrough and redesign Fine tune interface, screen design Heuristic evaluation and redesign Usability testing and redesign Limited field testing Alpha/Beta tests
Low fidelity paper prototypes Medium fidelity prototypes High fidelity prototypes Working Systems
Late Design

15. Prototyping Stages Evaluate Prototype Design Redesign
Minimize time spent building prototype, so you can get the most out of the other phases.

16. All prototypes involve compromise
Choose your compromises wisely…
All prototypes involve compromise

17. 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

18. Horizontal vs. Vertical
“thin” prototype
Vertical
“thick” prototype

19. 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

20. 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
Difference between storyboard - site map: site map on stickynotes which can be rearranged to explore the link structure of this webpage.
Low
High
Fidelity

21. Fidelity Example

22. 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….

24. What tools do I need?
Suggestions?
3X5 cards

25. What is this device?

26. What is this device?

27. Anyone know what this device is?
A prototyping tale…
Anyone know what this device is?

28. 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
Today I will start with one more blooper, and how the designers fixed it as a introduction to HCI methodology.

29. 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.
Found paper to read to fill the details of this story, still looking for images.

30. 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:

31. Result of Newton Redesign
“pilot” that was made by Palm
Palm was a huge success, and since this first prototype, it has gradually gotten more powerful over the years, yet has kept the same size.

32. Low Fidelity Prototyping

33. 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

34. 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

35. 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

36. 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

37. 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

38. Tools of the trade

39. 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

40. Index Cards (Example)
Include enough detail for users to interact with the prototype
I don’t love this example b/c they used some tools to make the prototype look more fancy.

41. 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)

42. 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?
WRONG!!
Prototype at the right fidelity!!!

43. Make a Low Fidelity Prototype
Once 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!

44. Fancier Low Fidelity Prototypes
Once 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.

45. 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!

46. 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”
Talk about local maximum.

47. 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

48. 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.

49. 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”

50. Wizard of Oz… (to come later)
Medium Fidelity
Wizard of Oz… (to come later)

51. High Fidelity Prototyping
Not covered in this class…

52. Additional Prototyping Examples

57. Prototyping Examples Pieces of paper Simulated screen with paper
Simulated screen with paper
Cell phone testing
Prototype usability testing
Complete prototyping process
Kid’s game design (what not to do)

58. 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.

59. For next week
Assignment
Readings

60. Readings
Required
Usability Engineering, Chapter 7

61. 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

62. Assignment (deliverables)
Bring it in
Feel free to design with your users.
Write words about what you focused on in your design, and the design decisions you made

63. 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