Concepts and Prototypes

CS352

Announcement

• Project – learning from your users due tomorrow Wed. 11:59pm

2

Where we are in PRICPE

• Predispositions: Did this in Project Proposal.

• RI: Research was studying users. Hopefully led to Insights.

CP: Concept and initial (very low-fi) Prototypes

• Evaluate throughout, repeat iteratively!!

Concepts (Conceptual Model)

• Pre-prototype• Explore how to address some aspect, e.g.,:

– The interface metaphor • e.g., desktop, ...

– The paradigm or device • e.g., WIMP, wearable, …

– The interaction type • e.g., instructing, conversing,

manipulating/demonstrating, or exploring)

Concepts (cont’d)

• This is a brainstorming-like tool– Consider several concepts.

The best way to have a good idea is to have lots of ideas.

-- Linus Pauling

http://en.wikipedia.org/wiki/File:Pauling.jpg

Concepts (cont’d)

• There should be some bad ideas!• Don’t get too attached to a concept

– i.e., avoid design fixation• Don’t spend too much time on any of

them.

Concepts

• Examples– Example #1: The thermostat ideas you

presented last week.– Example #2: Fig 11.7– Examples from Mike Madison’s homelessness

project. (He ultimately scrapped all of them.)

ConceptMike Madison, Jason De Runa, Jordan Fugate, Sakshi Gupta

Inklings of a Design…

In-Class Activity

• In your teams:– Sketch >=3 concepts for the on-line

grocery.– Pick a population/device(s).– Be ready to argue for why your solution

would work for that device/population– Aim for creative, interesting, useful

solutions• We’ll look at a few with the doc

scanner.

Is concept good?

• Questions to try to decide (#2-6 are for metaphor concepts):1. Does it solve the problem/aspect?

2. How much structure does it provide?

3. How much of it relevant to the problem?

4. Is it easy to represent?

5. Will your audience understand the metaphor?

6. How extensible is the metaphor?

Announcements

• Project – learning from your users due tomorrow at 11:59pm

• Reading: – Skim the BOXES only of section 6.3. (What

is a box: heading says "Box n" or "Research and design issues")

– Read 11.2, 11.3, 11.5, 11.6

11

Prototypes

• To flesh out a concept with enough detail– to communicate/understand user experience

in detail.– in this class: for our use to understand user

problems with our ideas.– can also be used to communicate with boss,

news media, etc...

PrototypeMarty Siegel

Low Fidelity High Fidelity

PrototypingEarly design

Late design

Brainstorm different representations

Choose a representation

Rough out interface style

Low fidelity (paper) prototypes

Task centered walkthrough and redesign

Fine tune interface, screen design

Heuristic evaluation and redesign

Usability testing and redesign

Medium fidelity prototypes

Limited field testing

Alpha/Beta tests

High fidelity prototypes

Working systems

Low fidelity prototypes• Lo-fi prototypes ideal for some purposes:

– cheap– flexible– yet force enough attention to detail.

Higher fi prototypes

• Useful:– When: AFTER get through lower-fi ones first.– Why: Get at details of design (layout,

icons, colors etc)– Example: Wizard of Oz: on the computer, but

human fakes in the computer logic.• Front end finished with widgets polished

up, but behavior/data is hard-coded (no back end).– For boss, at trade shows, etc.

Wizard of Oz

• A method of testing a system that does not exist– the voice editor, IBM 1984

What the user sees The Wizard

Lo-fi prototypes (we will start here)

• Just how lo-fi can one go– The lowest-fi: paper

• At first: sketches.• Later can be more polished.

– Static paper vs. “interactive” paper.– There are tool-supported variants of above

concepts.– Details of each next...

Paper prototypes

• Static paper– For communicating among team.– Usually done as a written use case or a

sketched storyboard or sketched “state machine”.

– Example: Fig 11.2 (very high-level).– Examples: Fig 11.4, 11.9 (more detailed).– Example: Fig. 11.17 (very detailed).– Another very detailed one (next slide).

Low-fidelity prototype

Paper prototypes (cont.)

• Dynamic (interactive) paper– For evaluating with user at a very low-cost.

Dynamic/interactive paper prototypes (cont.)

• Designing with office supplies– multiple layers of sticky notes and plastic

overlays– different sized stickies represent icons,

menus, windows etc.• interaction demonstrated by manipulating

notes– new interfaces built on the fly

• session videotaped for later analysis– usually end up with mess of paper and plastic!

Dynamic/interactive paper prototypes (cont.)

• Can pre-make paper interface components

buttons menu alert box

combo box

tabs

entries

list box

Dynamic/interactive paper prototypes (cont.)

• Examples:– Example #1: from ML-interaction experiment.

• (Next slide).

– Example #2: Fig 11.11– Example #4: Fig 11.15

Lo-fi prototype set-up with pens, printouts, table

Tool-supported prototypes

• Low-fi with tool support.– DENIM (Fig 11.18) and CogTool (fig next

slide): tools for sketched storyboards/states.– Can transition these to nicer, more polished

versions.

CogTool Example

Limiting prototype functionality• vertical prototypes

– includes in-depth functionality for only a few selected features

– common design ideas can be tested in depth

• horizontal prototypes– the entire surface interface with no underlying

functionality– a simulation; no real work can be performed

• scenario– scripts of particular fixed uses of

the system; no deviation allowedVertical prototype

Scenario

Horizontal prototype

Full interfaceNielsen, J. (1993) Usability Engineering, p93-101, Academic Press.

A few things to note about prototypes

• throw-away– prototype only serves to elicit user reaction– creating prototype must be rapid, otherwise too

expensive

• incremental– product built as separate components (modules)– each component prototyped & tested, then added to

the final system

• evolutionary– prototype altered to incorporate design changes– eventually becomes the final product

CS 352 Prototyping

• In here:– We will begin with static paper (by Week 4),

• then iterate from that start using CogTool, and

• eventually have a more polished version, still in CogTool.

Activity

• Choose one concept you did for the on-line grocery.

• Consider one specific user task: – your user wants to buy ingredients to make

lemonade.• Sketch a static prototype storyboard/states

of your UI: – that shows how your user will accomplish that

task in your UI.

CogTool• The prototyping tool for this class.• Supports:

– creating prototypes (various fidelities).• static and interactive

– measuring user efficiency with your prototype• skilled users• given a particular task• how 1: GOMS under the hood• how 2: ACT/R full cognitive model under the hood

• Web site: resources/examples/QA support

CogTool: How to prototype in it

• 1. Create a design storyboard– From scanned images, html files, or ...

• 2. Define a task the (skilled) user is supposed to do.

• 3. Demonstrate the steps to accomplish the task.

• Example (see CogTool Tutorial):– ChoiceWay Guide to NYC: Museum lookup

task.

Wizard of Oz

• A method of testing a system that does not exist– the voice editor, IBM 1984

What the user sees The Wizard