Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… ·...

36
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: March 2011 by Valerie Summet.

Transcript of Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… ·...

Page 1: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools

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: March 2011 by Valerie Summet.

Page 2: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools

Prototyping Concepts

Low-fidelity Medium-fidelity High-fidelity

Sketches, mock-ups Slide shows

Simulations

System prototypes

Scenarios

StoryboardsWizard of Oz

Part 2 Part 3

Page 3: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools

Agenda

• Prototyping dimensions• Prototyping terminology• Non-computer methods• Computer methods

Page 4: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools

Your Project Group

Page 5: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools

Design Artifacts

• How do we express early design ideas?o No software coding at this stageo Part II of project

• Key notionso Make it fast!!!o Allow lots of flexibility for radically different

designso Make it cheapo Promote valuable feedback

*** Facilitate iterative design and evaluation ***

Page 6: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools

Dilemma

• You can’t evaluate design until it’s builto But…

• After building, changes to the design are difficult

• Solution: Simulate the design, in low-cost manner

Page 7: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools

Four Considerations for Prototyping

1. Representation•How is the design depicted or represented?

–Could be just textual description or can be visuals and diagrams

2. Scope•Is it just the interface (mock-up) or does it include some computational component?

Page 8: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools

Four Considerations (contd)

3. Executability•Can the prototype be “run”?•If coding, there will be periods when it can’t

4. Maturation•What are the stages of the product as it comes along?

–Revolutionary - Throw out old one prototype–Evolutionary - Keep changing previous proptotype

Page 9: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools

Prototyping Terminology

• Early prototyping, Late prototyping• Low-fidelity prototype, High-fidelity prototype• Horizontal prototype

o Very broad, does or shows much of the interface,but does this in a shallow manner

• Vertical prototypeo Fewer features or aspects of the interface simulated,

but done in great detail

Page 10: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools

Rapid Prototyping Methods

• Non-computer vs. computer-based

Typically earlier in process Typically later in process

Page 11: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools

Non-Computer Methods

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

• Methods?

Page 12: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools

Design Description

• Can simply have a textual description of a system designo Obvious weakness – it’s so far from eventual

systemo Doesn’t do a good job representing visual

aspects of interfaceo Not nearly enough

OK for developing ideas Not OK as a way to get meaningful feedback

Page 13: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools

Sketches, Mock-ups

• Paper-based “drawings” of interfaces• Good for brainstorming• Focuses people on high-level design

notions• Not so good for illustrating flow and the

details• Quick and cheap -> helpful feedback

Page 14: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools

Physical Mock-Ups

• Wooden blocks and labels - device control

(Three versions ofa hand-held controller)

Page 15: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools

Physical Mock-Up

• Styrofoam and Buttons

“Golf Caddy” by:Chris HamiltonLinda KangLuigi MontanezBen Tomassetti

Page 16: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools

Storyboarding

• Pencil and paper simulation or walkthrough of system look and functionalityo Use sequence of diagrams/drawingso Show key snap shotso Quick & easy

Page 17: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools

Example

• Sketches solves two problems with use of more fully-developed prototypeso User reluctance to suggest changes to what might

look like a finished producto User focus too much on details (graphic design, etc)

of UI rather than big picture

Page 18: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools

Other Techniques

• Tutorials & Manualso Maybe write them out ahead of time to flesh

out functionalityo If it’s difficult to describe, it’s probably difficult

to use!o Forces designer to be explicit

about decisionso So putting it on paper

is valuable

Page 19: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools

Computer Methods

• Simulate more of system functionalityo Usually just some features or aspectso Can focus on more of detailso Typically engagingo Danger: Users are more reluctant to suggest

changes once they see more realistic prototype

Page 20: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools

Prototyping Tools - Drawing Pgms.

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

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

IP Address

CancelOK

Page 21: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools

Prototyping Tools - Scripting

• Scripted simulations/slide showso Put storyboard-like views down with

(animated) transitions between themo Can give user very specific script to follow

Often called chauffeured prototyping

o Examples: PowerPoint/Keynote,Visio, HTML/CSS,Macromedia Director, Dreamweaver

Page 22: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools

Powerpoint Transition Controls

Mouse click actions: Next slide Previous slide First slide Last slide Last slide viewed End show Custom show URL File

Page 23: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools

Scripting Example

Page 24: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools

More Complex Example

From: http://www.codinghorror.com/blog/2008/04/ui-first-software-development.html

Page 26: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools

Macromedia Director

• Combines media with Lingo scripting language

• Concerned with place and timeo Objects positioned in space on “stage”o Objects positioned in time on “score”

• Easy to transition between screens• Can export as executable or as Web

Shockwave file

Page 27: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools
Page 28: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools

Prototyping Tools - Interface Builders

• Tools for laying out windows, controls, etc. of interfaceo Have build and test modes that are good for

exhibiting look and feelo Generate code to which back-end functionality

can be added through programming• Examples: Visual Basic, Flex, Pencil

(plug-in for FF), ...

Page 29: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools

Visual Basic

UI Controls

Design area

Controlproperties

Page 30: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools

Audio Interface (Telephony) Builder Tools

• SUEDE - Flow-chart for speech interfaceo Landay et al, UC Berkeley (now U Washington)

• Used for wizard-of-Oz studies• Could be used to drive real system http://dub.washington.edu:2007/suede/

Page 31: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools

Suede

Page 32: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools

Prototyping Tools

• Good featureso Easy to develop & modify screenso Supports type of interface you are developingo Supports variety of I/O deviceso Easy to link screens and modify linkso Allows calling external procedures & programo Allows importing text, graphics, other mediao Easy to learn and useo Good support from vendoro Google “rapid prototyping tools” and find one that

works for you.

Page 33: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools

Prototyping Technique

• Wizard of Oz - Person simulates and controls system from “behind the scenes”o Use mock interface and

interact with userso Good for simulating

system that would be difficult to build

Can be either computer-based or not

Page 34: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools

Wizard of Oz Technique

Page 35: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools

Wizard of Oz

• Method:o Behavior should be algorithmico Good for voice recognition systems

• Advantages:o Allows designer to immerse oneself in

situationo See how people respond, how specify tasks

Page 36: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools

Review of Prototyping Concepts

Low-fidelity Medium-fidelity High-fidelity

Sketches, mock-ups Slide shows

Simulations

System prototypes

Scenarios

StoryboardsWizard of Oz