SE 204 – Human Computer Interaction Lecture 6: Prototypes Lecturer: Gazihan Alankuş Please look at the last slides for assignments (marked with TODO) 1

1

SE 204 – Human Computer Interaction

Lecture 6: PrototypesLecturer: Gazihan Alankuş

Please look at the last slides for assignments (marked with TODO)

2

What we talked about before

• Collecting requirements• Identifying the current workflow• Using a storyboard to propose a new workflow• Drawing UI sketches

3

What we will talk about

• More about UI sketches• Prototypes

4

Motivation

• Why are we doing all this? • Why not just create the software?

– after collecting the requirements– finding a better workflow

• Why take the time to draw?– storyboards– design sketches– paper prototypes (user interfaces made with paper)

5

Spiral Model: smaller scale iterations

Develop

Deliver$$$$$$$

Requirements

Design

Test

Start

Design

Requirements

Develop

Test

Requirements

Design

Develop

Test

6

Spiral Model: smaller scale iterations• If we create the real software instead of its

representations on paper, we will lose a lot of time!• We want to get feedback from users as early as possible• Talking about possible

solutions is not enough to get valuable feedback, you have to show them possible solutions and get usersto experience them

Develop

Deliver$$$$$$$

Requirements

Design

Test

Start

Design

Requirements

Develop

Test

Requirements

Design

Develop

Test

7

Motivation

• We want early feedback• The process has to be

– Quick– Inexpensive

• So that we can – rapidly explore the set of possible solutions – quickly improve promising ones via iteration

8

Things that we can do quickly• Consider alternative workflows and create storyboards for

them– Get feedback about them– Improve them

• Create UI sketches for promising storyboards– Get feedback about them– Improve them

• Create paper prototypes for promising sketches– Get feedback about them – Improve them

9

Iterate quickly

Develop

Deliver$$$$$$$

Requirements

Design

Test

Start

Design

Requirements

Develop

Test

Requirements

Design

Develop

Test

10

Motvation

• How do you get feedback for something you drew on paper?

• Is it enough for the user to look at it and voice his opinions?– We know that users usually don’t know what they need– We need to watch them use the interface

• If we had the actual software, we could let the user use it and clearly see what needs to be improved.

• How can we do this when all we have is things that are drawn on paper?

• Users can’t use paper interfaces, can they? – Let’s watch a video http://www.youtube.com/watch?v=GrV2SZuRPv0

http://www.youtube.com/watch?v=GrV2SZuRPv0

http://www.youtube.com/watch?v=GrV2SZuRPv0

11

Motivation

• Oh, users can use interfaces drawn on paper!– Maybe it’s not the same as real software, but definitely

better than simply asking for their opinions

• Using paper prototypes, we can get feedback from users that is comparable with feedback that we would get by using the actual software!

12

Prototypes

13

Prototypes

• Remember playing with your toys when you were 6 years old?– Toys + imagination = loads of fun!

• Let’s play cars!– Shared imagination– Make your friend experience a car race

• He can step into your imagination and contribute

• Any other board game• Same idea

– Create a low-fidelity interactive experience that enables you to share imagination with others

14

Why Prototype?

• Communicate (with users and other team members)– Demonstrate– Make them experience rather than convince

• Decide (yourself and with team members)– You are stateful!– Decisions about the interface are better made when

playing/using. Not when staring at Microsoft Word.

15

Communicate: Talking is not enough!

• “A picture is worth a thousand words” -Napoleon

• You are not a painter. You are designing interactive experiences!

• “A one-minute user experience is worth a thousand pictures!” -ME!

16

Decide

• Use -> Better decisions• How can you use it before creating it?

– PAPER PROTOTYPE!• Paper prototypes allow you to simulate using the

interface you want to create, so that you can make better decisions without using the actual interface

CMSC 434 Introduction to Human Computer InteractionSpring 2010 13

Prototyping in other areas

•  Houses


Prototyping in other areas

•  Car


Children collaboration

•  Users:– Children

•  Task:– Making seating arrangement collaboratively

seating

•  Technology:– Tabletop




Hybrid museum experience

•  Users:– Museum visitors

•  Task:– Obtain more information about an artifact

•  Technology:– Some kind of digital display



Wireless P2P

•  Users:– Teenagers

•  Tasks:– Share data with others

•  Technology:– Mobile devices



Cell-phone robot

•  User:– Cell phone users

•  Task:– Interacting with a cell phone

•  Technology:– Robot



29

Paper prototypes

• If you are mainly creating software, creating user interfaces on paper is usually sufficient

• Paper prototypes are actively used in many design firms to mock up the user interface before actually creating it

30

How should we create paper prototypes?

• Start with the design sketches• Improve them a bit, enough to

make it possible for someone to use it.

• Don’t try to improve the visual look, we want our prototypes to be low fidelity as well

31

How should we create prototypes?

• Don’t get attached– Plan to throw one or two away

• Throwing away is not easy. Force yourself at least once. • The whole point of prototypes is to feel free!

– Forget about it and create a new one with a different idea, rather than trying to force things to work together

• Parallelize them– Keep more than one working paper prototype when

you have multiple really good options

32

Buliding paper prototypes

• To simulate a working interface, drawing is not enough

• Pieces of user interfaces change– Menus appear– Popups are shown– Text is entered– Warnings are shown

• Build paper prototypes from multiple pieces of paper, post-it notes, etc.– Be creative!

33

Elements of a possible prototype• Windows, background 

– Poster board, large table top• Menus, window content, dialog boxes

– Index cards• Text fields, checkboxes, short messages

– Write on tapes, masking tapes• Highlighting, user typing

– Transparencies• Animation

– Move with hands• Sound

– Make noises

34

Ideas for tools that you can use

• White poster board• Big index cards• Restickable glue and post-it notes• White correction tape• Overhead transparencies• Photocopiers• Pens, markers, scissors, tape


Make it largepointing = clicking


Keep it (mostly) black and white


Keep UI components organized


Make photocopies ofcomponents for multiple runs


User transparency for text input


Sticky notes


Use index cards for differentdata items


Dialog boxes and popupmessages


Highlighting

44

Fidelity

• Paper prototypes should be “low fidelity” • They should evolve into “high fidelity” prototypes

through iterations

– What does that mean?


Five fidelity dimensions

1.  Level of visual refinement2.  Breadth of functionality3.  Depth of functionality

4.  Richness of interactivity5.  Richness of data model


1.Level of visual refinement

Low

•  The prototype does notlook like the finalproduct.

•  Hand-drawn sketches•  Box-and-line wireframes•  Brick

High

•  The prototype looksvery similar to the finalproduct.

•  Pixel-accurate mockups


2.Breadth of functionality

Low

•  The prototype onlysupports a small subsetof tasks.

High

•  The prototype supportsall the tasks.

•  Horizontal prototype


3.Depth of functionality

Low

•  The prototype allowsusers to perform onlyparts of a task.

High

•  The prototype allowsusers to complete a task.

•  Vertical prototype


4.Richness of interactivity

Low

•  The prototype givesusers limited ways tointeract.

High

•  The prototype providesa fully interactiveexperience.


5.Richness of data model

Low

•  The prototype includes asmall amount of fakedata.

High

•  The prototype includes alarge amount of realdata.

51

Ideal fidelity dimensions for paper prototypes

• Visual (low)• Breadth (low to high)• Depth (low to high)• Interactivity (medium)• Data (low)

Saul Greenberg

Sketching and Prototyping

Sketches / low / medium / high fidelity prototypes– as investment in design increases (red arrow), so does the

formality of the criteria whereby concepts are reviewed or accepted

From design to evaluation– similarly, interface design

(idea generation) progressesto usability testing (ideadebugging and refinement)

From Design for the Wild, Bill Buxton (in press) with permission

Saul Greenberg

Sketching vs Prototyping

Low fidelity– Invite– Suggest– Explore– Question– Propose– Provoke

High fidelity– Attend– Describe– Refine– Answer– Test– Resolve

From Design for the Wild, Bill Buxton (in press) with permission

Saul Greenberg

Sketching and Prototyping

Early design

Late design

Brainstorm different representations

Choose a representation

Rough out interface style

Sketches & 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

Saul Greenberg

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 allowed

Vertical prototype

Scenario

Horizontal prototype

Full interface

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

Example high-fidelity prototype

Scan the stroller ->

Change the color ->

Place the order ->

Initial screen

Scan the shirt ->

Touch previous item ->

Delete that item->

Alternatepath…

59

How do we test with prototypes?

• Remember that we can get users to use paper prototypes:

Wizard of Oz

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

Dear Henry

What the user sees

SpeechComputer

From Gould, Conti & Hovanvecz, Comm ACM 26(4) 1983.

Wizard of Oz

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

What the user sees The wizard

SpeechComputer

Dear Henry

Dear Henry

From Gould, Conti & Hovanvecz, Comm ACM 26(4) 1983.

Wizard of Oz

• Human ‘wizard’ simulates system response– interprets user input according to an algorithm– controls computer to simulate appropriate output– uses real or mock interface– wizard sometimes visible, sometimes hidden

• “pay no attention to the man behind the curtain!”

• good for:– adding simulated and complex vertical functionality– testing futuristic ideas

63

Running tests with paper prototypes

• Roles:• User• Design Team

– Computer– Facilitator– Observer


Observer

Facilitator

User

Computer

65

Usability testing

• We will talk about it next week

66

TODO: Homework 2• If you submitted Homework 1, I will e-mail you about which idea you should continue

with. • This is what you need to do for Homework 2

1. Go to the user’s environment and observe the user while performing the task. You can also shadow if you have time. Interview the user afterwards.

2. Write down the current workflow. Look at the relevant slides on what you should capture (pain points, etc.). Draw a storyboard for it.

3. Come up with an alternative workflow and draw a storyboard for it.4. Show it to the user and get feedback about it.5. Create a new version of the storyboard according to the user’s suggestions.6. Draw sketches for the screens of the storyboard.

• In your e-mail, you need to have a heading for each of the six bullet points above and provide necessary information for each

• Provide photographs of – You and the user (for 1)– Storyboards (for 2, 3, 5)– Sketches (for 6)

TODO: Homework 2

• Submission– Due July 24th, before class– Write down (or paste) your responses in the body of an e-

mail. Do not attach a document. Refer to the attached photographs by their file names.

– Send them to [email protected] with the subject“[SE204] HW 2” (without quotes)

– If you do not follow these submission instructions, your homework may be invalid.

– Homeworks are done individually. Do not work together. Homeworks that are very similar may be considered cheating and would be punished according to the university regulations.

mailto:[email protected]

Documents

SE 204 – Human Computer Interaction Lecture 6: Prototypes Lecturer: Gazihan Alankuş Please look at the last slides for assignments (marked with TODO) 1