1. Prototyping the User Interface
Sketches, storyboards, mock-ups, scenarios and tools
This material has been developed by Georgia Tech HCI faculty, and continues to evolve. Contributors include Gregory Abowd, Jim Foley, Diane Gromala, Elizabeth Mynatt, Jeff Pierce, Colin Potts, Chris Shaw, John Stasko, and Bruce Walker. Comments directed to are encouraged. Permission is granted to use with acknowledgement for non-profit purposes. Last revision: Feb

2. UI Design - Georgia Tech
Agenda
Why prototype?
Prototyping dimensions
Prototyping terminology
Non-computer methods
Computer methods
UI Design - Georgia Tech

3. UI Design - Georgia Tech
Why Prototype?
UI Design - Georgia Tech

4. Why Prototype? AKA Why not Straight to Code?
Leads to better designs
Iterative creativity
Explore design space
Facilitates communications
To all stakeholders
To see and to use is to comprehend
Facilitates (early) user input
Helps with (early) usability assessment
Can help assess implementation feasibility
UI Design - Georgia Tech

5. Prototype as a Design Artifact
To express early design ideas?
No software coding at this stage
Key notions
Make it fast!!!
Allow lots of flexibility for radically different designs
Make it cheap to fail early, fail often
Promote valuable feedback
*** Facilitate iterative design and evaluation ***
UI Design - Georgia Tech

6. UI Design - Georgia Tech
Dilemma
You can’t evaluate design until it’s built
But…
After building, changes to the design are difficult
Simulate the design, in low-cost manner
UI Design - Georgia Tech

7. Four Considerations for Prototyping
1. Representation
How is the design depicted or represented?
Can be just textual description or can be visuals and diagrams
2. Scope
Depth and breadth of prototype
How much of overall design is prototyped
UI Design - Georgia Tech

8. Four Considerations (contd)
3. Executability
Can the prototype be “run”?
If coding, there may be periods when it can’t
4. Maturation
What are the stages of the product as it comes along?
Revolutionary - Throw out old prototype
Evolutionary - Keep changing previous prototype
UI Design - Georgia Tech

9. UI Design - Georgia Tech
Terminology
Early prototyping, Late prototyping
Low-fidelity prototype, High-fidelity prototype
Horizontal prototype
Very broad, does or shows much of the interface, but does this in a shallow manner
Example: all first and second-level menu commands
Vertical prototype
Fewer features or aspects of the interface simulated, but done in great detail
Possibly even execution of a few important actions
This is what you’re doing for project part 3
UI Design - Georgia Tech

10. Rapid Prototyping Methods
Non-computer vs. computer-based
Tools like Balsamiq bridge this gap
Typically earlier in process
Typically lower fidelity
Typically later in process
Typically higher fidelity
UI Design - Georgia Tech

11. UI Design - Georgia Tech
Non-Computer Methods
Goal: Want to express design ideas and get quick & cheap opinions on system
Methods?
UI Design - Georgia Tech

12. UI Design - Georgia Tech
Design Description
Can simply have a textual description of a system design
Obvious weakness – it’s so far from eventual system
Doesn’t do a good job representing visual aspects of interface
Not nearly enough
Sort of OK for ideation
Not OK as a way to get meaningful feedback
UI Design - Georgia Tech

13. UI Design - Georgia Tech
Sketches, Mock-ups
Paper-based “drawings” of interfaces
Good for brainstorming
Focuses on high-level design notions
Not so good for illustrating flow and the details
Quick and cheap -> helpful feedback
UI Design - Georgia Tech

14. UI Design - Georgia Tech
Physical Mock-Ups
Wooden blocks and labels - device control
(Three versions of
a hand-held controller)
UI Design - Georgia Tech

15. UI Design - Georgia Tech
Physical Mock-Up
Styrofoam and Buttons
Spring 2004 CS 4750 project “Golf Caddy” by:
Chris Hamilton
Linda Kang
Luigi Montanez
Ben Tomassetti
UI Design - Georgia Tech

16. UI Design - Georgia Tech
Storyboarding
Pencil and paper simulation or walkthrough of system look and functionality
Quick & easy
Show key snap shots
Use sequence of screen shots
Use cases can be driver for sequencing
UI Design - Georgia Tech

17. Storyboarding Example
Sketches solves two problems with use of more fully-developed prototypes
User reluctance to suggest changes to what might look like a finished product
User focus too much on details (graphic design, etc) of UI rather than big picture
UI Design - Georgia Tech

18. UI Design - Georgia Tech
Other Techniques
Tutorials & Manuals
Maybe write them out ahead of time to flesh out functionality
If it’s difficult to describe, it’s probably difficult to use!
Forces designer to be explicit about decisions
So putting it on paper is valuable
Early involvement by tutorial & help text team
UI Design - Georgia Tech

19. UI Design - Georgia Tech
Computer Methods
Simulate more of system functionality
Usually just some features or aspects
Can focus on more of details
Typically engaging
Caution: Users more reluctant to suggest changes once they see more realistic prototype
So make prototype intentionally not so realistic
UI Design - Georgia Tech

20. Prototyping Tools - Drawing Pgms.
Draw/Paint programs
Draw each screen, good for look
IP Address OK
Cancel
Thin, horizontal prototype
PhotoShop, Corel Draw,...
UI Design - Georgia Tech

21. Prototyping Technique
Wizard of Oz - Person simulates and controls system from “behind the scenes”
Use mock interface and interact with users
Good for simulating system that would be difficult to build
Can be either computer-based or not
UI Design - Georgia Tech

22. UI Design - Georgia Tech
Wizard of Oz
Method:
Behavior should be algorithmic
Good for voice recognition systems
Advantages:
Allows designer to immerse oneself in situation
See how people respond, how specify tasks
UI Design - Georgia Tech

23. Prototyping Tools - Scripting
Scripted simulations/slide shows
Put storyboard-like views down with (animated) transitions between them
Can give user very specific script to follow
Often called chauffeured prototyping
Examples: PowerPoint, BalsamIQ
UI Design - Georgia Tech

24. Powerpoint Transition Controls
Mouse click actions:
Next slide
Previous slide
First slide
Last slide
Last slide viewed
End show
Custom show
URL
File
UI Design - Georgia Tech

25. UI Design - Georgia Tech
Beware!
UI Design - Georgia Tech

26. UI Design - Georgia Tech
BalsamIQ
UI Design - Georgia Tech

27. UI Design - Georgia Tech
Balsamiq balsamiq.com
Video
Balsamiq Mockups | Balsamiq.flv
Free seven-day download
Try it, you’ll like it 
Live demo……
UI Design - Georgia Tech

28. Balsamiq Pros and Cons (Fall 2010)
Like
Easy to use
Create links from one screen to another – capability and method
Big widget library
Special iPhone options
Widget search/selection
Don’t like
Limited set of gadgets
Can’t easily drop in pictures
Selection of stacked items is hard
Late determination that target of link was deleted
Dead-end
can’t add code or data base access
UI Design - Georgia Tech

29. UI Design - Georgia Tech
Pencil
Similar to Balsamiq
Open-source
Works with Firefox or as an app
OSX
Windows
GNU/Linux
UI Design - Georgia Tech

30. Easy to Get Lost with PPt or Balsamiq – see Caretta Design
Also in Denim
UI Design - Georgia Tech

31. CogTool - Prototyping + KSLM!
Great Prototyper
Usual drag and drop design capability
Shows transition graph
Transitions can be caused by
Mouse actions
Keyboard entry (commands, data fields)
Speech!!
More robust than most (any) others
Plus …..
UI Design - Georgia Tech

32. UI Design - Georgia Tech
CogTool - KSLM
Automated KSLM, based on user demonstration of action sequences
Compare alternative designs
KSLM generally within 20% of real timing
CogTool KSLM better because does not make mistakes with Mental preparation placements – claims 10%
But – could practice a bit and have CogTool measure your time
UI Design - Georgia Tech

33. CogTool Overview Screen Shot
UI Design - Georgia Tech

34. CogTool Transition Graph
UI Design - Georgia Tech

35. Prototyping Tools - Interface Builders
Tools for laying out windows, controls, etc. of interface
Have build and test modes that are good for exhibiting look and feel
Generate code to which back-end functionality can be added through programming
Examples: Visual Basic, Visual C##, Denim, SketchFlow
UI Design - Georgia Tech

36. UI Design - Georgia Tech
Visual Basic
UI Controls
Control properties
Design area
UI Design - Georgia Tech

37. Denim – Web Site Prototyper
Download at
Very smooth interaction
Gestures, zoom in and out
Navigate created web site
Very ‘rough’ look but navigable
Video at
UI Design - Georgia Tech

38. UI Design - Georgia Tech
Microsoft SketchFlow
UI Design - Georgia Tech

39. Audio Interface (Telephony) Builder Tools
SUEDE - flow-chart speech interface dialogue
Landay et al
For wizard-of-Oz studies
Could be used to drive real system
guir.berkeley.edu/projects/suede/index.shtml
UI Design - Georgia Tech

40. UI Design - Georgia Tech
SUEDE VIDEO
UI Design - Georgia Tech

41. Eyepatch: Prototyping Camera-Based Interaction
Video on next page
UI Design - Georgia Tech

42. Tool Surveys (via Google )
There are a LOT!!
c2.com/cgi/wiki?GuiPrototypingTools **
UI Design - Georgia Tech

43. Review of Prototyping Concepts
Late
Early
Horizontal
Low-fidelity
Vertical
Medium-fidelity
High-fidelity
Vertical
Sketches, mock-ups
Slide shows
System prototypes
Scenarios
Storyboards
Simulations
Wizard of Oz
UI Design - Georgia Tech

44. How do These Tools Stack Up?
Ramp-up time to learn?
Regarding fidelity of the prototype?
Regarding depth and breadth of prototypes that can easily be supported?
Regarding executability of the prototype?
Regarding how easily the prototype can be transitioned to a deliverable product?
UI Design - Georgia Tech

45. UI Design - Georgia Tech
The End
UI Design - Georgia Tech