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 [email protected] are encouraged. Permission is granted to use with acknowledgement for non-profit purposes. Last revision: Feb. 2012.
2
Agenda
• Why prototype?• Prototyping dimensions• Prototyping terminology• Non-computer methods• Computer methods
UI Design - Georgia Tech
3
Why Prototype?
UI Design - Georgia Tech
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
feasibility4UI 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
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
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
9UI Design - Georgia Tech
10
Rapid Prototyping Methods
• Non-computer vs. computer-based
Typically earlier in processTypically lower fidelity
Typically later in processTypically higher fidelity
UI Design - Georgia Tech
Tools like Balsamiq bridge this gap
11
Non-Computer Methods
• Goal: Want to express design ideas and get quick & cheap opinions on system
• Methods?
UI Design - Georgia Tech
12
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
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
Physical Mock-Ups
• Wooden blocks and labels - device control
(Three versions ofa hand-held controller)
UI Design - Georgia Tech
15
Physical Mock-Up
• Styrofoam and ButtonsSpring 2004 CS 4750 project “Golf Caddy” by:Chris Hamilton
Linda Kang
Luigi Montanez
Ben Tomassetti
UI Design - Georgia Tech
16
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
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
teamUI Design - Georgia Tech
19
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
Thin, horizontal prototype PhotoShop, Corel Draw,...
IP Address
CancelOK
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 notUI Design - Georgia Tech
22
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
Powerpoint Transition Controls
Mouse click actions:Next slidePrevious slideFirst slideLast slideLast slide viewedEnd showCustom showURLFile
24UI Design - Georgia Tech
25
Beware!
UI Design - Georgia Tech
BalsamIQ
26UI Design - Georgia Tech
Balsamiq balsamiq.com
• Video Balsamiq Mockups | Balsamiq.flv
• Free seven-day download Try it, you’ll like it
• Live demo……
27UI Design - Georgia Tech
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
28UI Design - Georgia Tech
Pencil
• http://pencil.evolus.vn/en-US/Home.aspx• Similar to Balsamiq• Open-source• Works with Firefox
or as an app OSX Windows GNU/Linux
UI Design - Georgia Tech 29
Easy to Get Lost with PPt or Balsamiq – see Caretta Design
http://www.carettasoftware.com/guidesignstudio/gui-design-studio-demo.html
30UI Design - Georgia Tech
Also in Denim
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 31
http://cogtool.hcii.cs.cmu.edu/
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 32
CogTool Overview Screen Shot
UI Design - Georgia Tech 33
CogTool Transition Graph
UI Design - Georgia Tech 34
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
Visual Basic
UI Controls
Design area
Controlproperties
UI Design - Georgia Tech
37
Denim – Web Site Prototyper
• Download at http://dub.washington.edu:2007/denim/
• Very smooth interaction Gestures, zoom in and out
• Navigate created web site http://dub.washington.edu:2007/denim/denim_daily_files/page149.html
• Very ‘rough’ look but navigable• Video at
http://dub.washington.edu:2007/denim/media/denim_talk.rm
UI Design - Georgia Tech
Microsoft SketchFlow
• http://www.microsoft.com/Expression/products/SketchFlow_Overview.aspx
38UI 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
SUEDE VIDEO
40UI Design - Georgia Tech
Eyepatch: Prototyping Camera-Based Interaction
Video on next page
41UI Design - Georgia Tech
Tool Surveys (via Google )
42
• There are a LOT!!• www.badlanguage.net/seven-website-
mockup-tools• c2.com/cgi/wiki?GuiPrototypingTools• ** www.dexodesign.com/2008/11/07/review-
16-user-interface-prototyping-tools/• http://socialcompare.com/en/comparison/
mockup-wireframing-design-tools
UI Design - Georgia Tech
43
Review of Prototyping Concepts
Low-fidelity Medium-fidelity High-fidelity
Sketches, mock-ups Slide shows
Simulations
System prototypes
Scenarios
StoryboardsWizard of Oz
Horizontal
Vertica
l
Vertica
lUI Design - Georgia Tech
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?
44UI Design - Georgia Tech
45
The End
UI Design - Georgia Tech
Top Related