prototyping the user interface

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.

mailto:[email protected]

2

Agenda

• Why prototype?• Prototyping dimensions• Prototyping terminology• Non-computer methods• Computer methods

UI Design - Georgia Tech

3

Why Prototype?


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


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


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


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


Tools like Balsamiq bridge this gap

11

Non-Computer Methods

• Goal: Want to express design ideas and get quick & cheap opinions on system

• Methods?


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


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


14

Physical Mock-Ups

• Wooden blocks and labels - device control

(Three versions ofa hand-held controller)


15

Physical Mock-Up

• Styrofoam and ButtonsSpring 2004 CS 4750 project “Golf Caddy” by:Chris Hamilton

Linda Kang

Luigi Montanez

Ben Tomassetti


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


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


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


20

Prototyping Tools - Drawing Pgms.

• Draw/Paint programs Draw each screen, good for look

Thin, horizontal prototype PhotoShop, Corel Draw,...

IP Address

CancelOK


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


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


Powerpoint Transition Controls

Mouse click actions:Next slidePrevious slideFirst slideLast slideLast slide viewedEnd showCustom showURLFile


25

Beware!


BalsamIQ


Balsamiq balsamiq.com

• Video Balsamiq Mockups | Balsamiq.flv

• Free seven-day download Try it, you’ll like it

• Live demo……


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


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

http://pencil.evolus.vn/en-US/Home.aspx

Easy to Get Lost with PPt or Balsamiq – see Caretta Design

http://www.carettasoftware.com/guidesignstudio/gui-design-studio-demo.html


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


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


CogTool Overview Screen Shot


CogTool Transition Graph


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


36

Visual Basic

UI Controls

Design area

Controlproperties


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


Microsoft SketchFlow

• http://www.microsoft.com/Expression/products/SketchFlow_Overview.aspx


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


SUEDE VIDEO


Eyepatch: Prototyping Camera-Based Interaction

Video on next page


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


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?


45

The End


prototyping the user interface

Documents

overall design

design descriptioncan

iterative design

gapui design georgia

georgia tech hci faculty

agendawhy prototype

early user inputhelps

noncomputer methodsgoal