Low-Fidelity Prototyping · Fidelity in Prototyping Fidelity refers to the level of detail High...

25
1 Low-Fidelity Prototyping CS160: User Interfaces Maneesh Agrawala Slides based on those of John Canny, Francois Guimbretiere and James Landay

Transcript of Low-Fidelity Prototyping · Fidelity in Prototyping Fidelity refers to the level of detail High...

Page 1: Low-Fidelity Prototyping · Fidelity in Prototyping Fidelity refers to the level of detail High fidelity? – Prototypes look like the final product Low fidelity? – Artists renditions

1

Low-Fidelity Prototyping

CS160: User InterfacesManeesh Agrawala

Slides based on those of John Canny, Francois Guimbretiere and James Landay

Page 2: Low-Fidelity Prototyping · Fidelity in Prototyping Fidelity refers to the level of detail High fidelity? – Prototypes look like the final product Low fidelity? – Artists renditions

2

• Unlabeled button-like thing• Uses familiar calculator metaphor (Takes it too far??)

– Cryptic labels (CE vs. C) (M+, MS, MR, MS why not show what is in memory)– Single line of display text

• Can use keypad but affordance is not visible

Review: Error Messages

Alternatives– Make errors as impossible as possible

• Pull down of state codes rather than typing in codes …• Handle all possible types of input

Page 3: Low-Fidelity Prototyping · Fidelity in Prototyping Fidelity refers to the level of detail High fidelity? – Prototypes look like the final product Low fidelity? – Artists renditions

3

Review: ModesDefinition

– The same user actions have different effects in different situations– Examples?

• Keycaps lock• Adobe reader example

Problems– Big memory burden– Source of many serious errors

Fixes– Redesign system to be modeless– Redundantly visible– Quasimodes

Review: Depicting Processes

Process: A series of actions or operations conducing to an end

1. Choose the goal2. Plan ordered set of actions to achieve goal3. Depict each action

Page 4: Low-Fidelity Prototyping · Fidelity in Prototyping Fidelity refers to the level of detail High fidelity? – Prototypes look like the final product Low fidelity? – Artists renditions

4

Review: StoryboardingSeries of key frames depicting key steps in reaching a goal

– Can use a pin board for easy rearrangement/editing– Describe the interaction in context– Often useful to show user in at least 1st frame (establishing shot)

Due Today (before class)Contextual Inquiry and Task Analysis

Page 5: Low-Fidelity Prototyping · Fidelity in Prototyping Fidelity refers to the level of detail High fidelity? – Prototypes look like the final product Low fidelity? – Artists renditions

5

Assignment (due Oct 11)Low-Fidelity Prototype

– Identify project mission statement– Create low-fidelity prototype that supports 3 tasks

• 1 easy, 1 moderate, 1 difficult task as found in the last assignment– Test the prototype with target users

• No one from this class• Not your friends

Get started early – testing with users will take time

Topics• Creating the prototype• Wizard of Oz prototype testing

Page 6: Low-Fidelity Prototyping · Fidelity in Prototyping Fidelity refers to the level of detail High fidelity? – Prototypes look like the final product Low fidelity? – Artists renditions

6

Creating the Prototype

Why Do We Prototype?Get feedback on our design faster

– saves moneyExperiment with alternative designsFix problems before code is writtenKeep the design centered on the user

DesignPrototype

Evaluate

Page 7: Low-Fidelity Prototyping · Fidelity in Prototyping Fidelity refers to the level of detail High fidelity? – Prototypes look like the final product Low fidelity? – Artists renditions

7

Fidelity in PrototypingFidelity refers to the level of detailHigh fidelity?

– Prototypes look like the final product

Low fidelity?

– Artists renditions with many details missing

Low-Fi StoryboardsWhere do storyboards come from?

– Film & animation

Give you a “script” of important events– Leave out the details – Concentrate on the important interactions

In UI design, the storyboard is non-linear to support user action choices

Page 8: Low-Fidelity Prototyping · Fidelity in Prototyping Fidelity refers to the level of detail High fidelity? – Prototypes look like the final product Low fidelity? – Artists renditions

8

Ink Chat System

Color CodingBlack: page contentRed: page titlesGreen: annotationsBlue: links

Page 9: Low-Fidelity Prototyping · Fidelity in Prototyping Fidelity refers to the level of detail High fidelity? – Prototypes look like the final product Low fidelity? – Artists renditions

9

Why Use Low-fi Prototypes?Traditional methods take too long

– Sketches -> prototype -> evaluate -> iterate

Can simulate the prototype– Sketches -> evaluate -> iterate– Sketches act as prototypes

• Designer “plays computer”• Other design team members observe & record• Sounds silly at first, but is surprisingly effective

Kindergarten implementation skills– Allows non-programmers to participate

Widely used in industry

Hi-Fi DisadvantagesDistort perceptions of the tester

– Formal representation indicates “finished” nature– People comment on color, fonts, and alignment

Discourages major changes– Testers don’t want to change a “finished” design– Designers don’t want to lose effort put into creating hi-fi

design

Page 10: Low-Fidelity Prototyping · Fidelity in Prototyping Fidelity refers to the level of detail High fidelity? – Prototypes look like the final product Low fidelity? – Artists renditions

10

Materials Large, heavy, white paper (11 x 17)5x8 in. index cardsPost-it notesTape, stick glue, correction tapePens & markers (colors & sizes)Transparencies (including colored)Colorforms (toy stores)Scissors, X-acto knives, etc.

Page 11: Low-Fidelity Prototyping · Fidelity in Prototyping Fidelity refers to the level of detail High fidelity? – Prototypes look like the final product Low fidelity? – Artists renditions

11

Page 12: Low-Fidelity Prototyping · Fidelity in Prototyping Fidelity refers to the level of detail High fidelity? – Prototypes look like the final product Low fidelity? – Artists renditions

12

Interface Elements

Constructing the PrototypeSet a deadline

– Don’t think too long - build it!

Draw a window frame on large paper– Draw at a large size, but use correct aspect ratio

Put different screen regions on cards– Anything that moves, changes, appears/disappears– Use greek-ing to indicate text if necessary

Ready response for any user action– e.g., Have those pull-down menus already made

Use photocopier to make many versions

Page 13: Low-Fidelity Prototyping · Fidelity in Prototyping Fidelity refers to the level of detail High fidelity? – Prototypes look like the final product Low fidelity? – Artists renditions

13

Wizard of Oz Prototype Testing

SIMS 213 Project: Telebears redesign

Preparing for a TestSelect your participants

– Understand background of intended users– Use a questionnaire to get the people you need– Don’t use friends or family

Prepare scenarios that are– Typical of the product during actual use– Make prototype support these (small, yet broad)

Practice running the computer to avoid “bugs”– You need every menu and dialog for the tasks– All widgets the user might press

• Remember “help” and “cancel” buttons

Page 14: Low-Fidelity Prototyping · Fidelity in Prototyping Fidelity refers to the level of detail High fidelity? – Prototypes look like the final product Low fidelity? – Artists renditions

14

Conducting a TestThree or Four testers (preferable)

– Greeter - Puts users at ease & gets data– Facilitator - only team member who speaks

• Gives instructions & encourages thoughts, opinions

– Computer - knows application logic & controls it• Always simulates the response, w/o explanation

– Observer(s) - Take notes & recommendations

Typical session should be approximately 1 hour– Preparation, the test, debriefing

User “Computer”

Observer(or video camera)

InterfaceInterface elements

Page 15: Low-Fidelity Prototyping · Fidelity in Prototyping Fidelity refers to the level of detail High fidelity? – Prototypes look like the final product Low fidelity? – Artists renditions

15

Conducting a Test (cont.)Greet

– Get forms filled, assure confidentiality, etc.

Test– Facilitator explains how test will work

• Performs a simple task– Facilitator hands written tasks to the user

• Must be clear & detailed– Facilitator keeps getting “output” from participant

• “What are you thinking right now?”, “Think aloud”– Observers record what happens

• Avoid strong reactions:, frowning, laughing, impatience – biases the test

– Designers should not lead participants• Let users figure things out themselves as much as possible• Only answer questions if user remains stuck for a long time

Conducting a Test (cont.)Debrief

– Fill out post-evaluation questionnaire– Ask questions about parts you saw problems on– Gather impressions– Give thanks

Page 16: Low-Fidelity Prototyping · Fidelity in Prototyping Fidelity refers to the level of detail High fidelity? – Prototypes look like the final product Low fidelity? – Artists renditions

16

Wizard of Oz TipsRehearse your actions

– For a complicated UI, make a flowchart which is hidden from the user

– Make list of legal words for a speech interface

Stay “in role”– You are a computer, and have no common sense, or

ability to understand spoken English.

Facilitator can remind user of the rules if the user gets stuck

Evaluating ResultsSort & prioritize observations

– What was important?– Lots of problems in the same area?

Create a written report on findings– Gives agenda for meeting on design changes

Make changes & iterate

Page 17: Low-Fidelity Prototyping · Fidelity in Prototyping Fidelity refers to the level of detail High fidelity? – Prototypes look like the final product Low fidelity? – Artists renditions

17

Takes only a few hours– No expensive equipment needed

Can test multiple alternatives – Fast iterations

• Number of iterations is tied to final quality

Can change the design as you test – If users are trying to use the interface in a way you didn’t

design it – go with what they think! Adapt!

Especially useful for hard to implement features– Speech and handwriting recognition

Advantages of Low-Fi Prototyping

Drawbacks of Lo-Fi PrototypingEvolving the prototype requires redrawing

– Can be slow (but reprogramming usually slower)

Lack support for “design memory”

Force manual translation to electronic format

Do not allow real-time end-user interaction

Page 18: Low-Fidelity Prototyping · Fidelity in Prototyping Fidelity refers to the level of detail High fidelity? – Prototypes look like the final product Low fidelity? – Artists renditions

18

CaveatsThere is a down-side to the informal design approach:

Often hard to involve paying clients as subjects – they treat the fidelity of the interface as a sign of development effort

Mitigators: involve them early and often, correspond with the same people, explain the process up front (set expectations)

Exercise

Page 19: Low-Fidelity Prototyping · Fidelity in Prototyping Fidelity refers to the level of detail High fidelity? – Prototypes look like the final product Low fidelity? – Artists renditions

19

Airport “wayfinder” for travelersProblem statement:

When passing through airports, people often have difficulty finding the services they need. The availability of these services, as well as how to get to them, is not obvious, which can result in missed flights, weary travelers, and a stressful customer experience.

Target persona: Angela, ~31, business traveler– Wants to travel without hassle– 30 minute layover in unfamiliar airport– What might she want to do in this time?– What kind of interface would support her tasks?

Constraints• PDA/Smart phone class hardware• Wireless infrastructure available• Low resolution location information available

Page 20: Low-Fidelity Prototyping · Fidelity in Prototyping Fidelity refers to the level of detail High fidelity? – Prototypes look like the final product Low fidelity? – Artists renditions

20

ExerciseWork with your project group

Your tasks– Brainstorm about Angela’s goals

• What does she want to do at the airport• What information does she need• What kind of interface will support her tasks

– Create an initial low fidelity prototype– Debug the interface with users from another group

• Does the interface meet Angela’s needs?• Is the interface hassle-free?• Is the interface confusing or difficult?

SummaryInformal prototypes allow you to design (and test!)

before writing code.

Rapid evolution and elimination of many problems happens in this phase.

Paper+ink is the traditional tool

Page 21: Low-Fidelity Prototyping · Fidelity in Prototyping Fidelity refers to the level of detail High fidelity? – Prototypes look like the final product Low fidelity? – Artists renditions

21

Next TimeHuman Information Processing (Perception)

– The Model Human Processor. The Psychology of Human-Computer Interaction. Chap 2. Card, Moran & Newell

Start on the Low-Fidelity Prototype Assignment

Page 22: Low-Fidelity Prototyping · Fidelity in Prototyping Fidelity refers to the level of detail High fidelity? – Prototypes look like the final product Low fidelity? – Artists renditions

22

Solution from Cooper Design

Cooper Design’s storyboard

Page 23: Low-Fidelity Prototyping · Fidelity in Prototyping Fidelity refers to the level of detail High fidelity? – Prototypes look like the final product Low fidelity? – Artists renditions

23

Potential DifficultiesContent-centric interfaces

– Dynamic or static; both are ill-suited• Use printed output for large sets of text

Search/Database applications– Have pre-planned searches

• Even though not very realistic– Write up search results on the fly

• Maybe have a printer nearby that can produced typed results– Bottom line: can only prototype the main interaction this way;

search needs to be hooked up to really test the search mechanism

Page 24: Low-Fidelity Prototyping · Fidelity in Prototyping Fidelity refers to the level of detail High fidelity? – Prototypes look like the final product Low fidelity? – Artists renditions

24

Potential difficulties• Interfaces that use animation / dynamic graphics

– IUE’s answer: maybe it isn’t all that usable to have flash– Broader answer:

• Only testing the main functionality, not the finer points• The interface should also work without the flash

– Use transparencies, etc, for important rollovers.

Current Prototyping ToolsRequire specification of lots of detail

– They are hi-fi so require lots of choices• e.g., widgets, fonts, alignments, colors

– Designers focus on these unimportant details

Take much longer to use– Poor support for iterative design– “Sketching an interface” can take a very long time

Page 25: Low-Fidelity Prototyping · Fidelity in Prototyping Fidelity refers to the level of detail High fidelity? – Prototypes look like the final product Low fidelity? – Artists renditions

25