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 foley@cc.gatech.edu 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