From Scenarios to Paper Prototypes

Chapter 6 of About Face Defining requirements Defining the interaction framework

Defining requirements Steps:

Problem and Vision statements Brainstorming Identifying persona expectations Scenarios Identifying needs

Persona based Scenarios “a concise description of a persona

using a software-based product to achieve a goal“ [Cooper, Inmates are Running the Asylum, pg. 179]

Derived from information gathered during User Modeling (interviews etc)

Context Scenarios Focus on Context Scenarios

Textual description Broad outlines of how someone

interacts with your application Not a description of interaction details

like dialogs. Focus on goals, don’t worry yet about

how things will be accomplished

Questions addressed by Context Scenarios (Cooper, pg 80) What is the setting in which the product will be used? Will it be used for extended amounts of time? Is the persona frequently interrupted? Are there multiple users on a single

workstation/device? What other products is it used with? How much complexity is permissible, based on

persona skill and frequency of use? What primary activities does the persona need to

accomplish to meet her goals? What is the expected end result of using the product?

Identifying needs List what needs to be in the application

to satisfy the context scenario Data needs: objects and information Functional needs: operations need to be

performed on objects“Call (action) a person (object) directly from

an appointment (context)” Similar to tasks, but also includes the

objects

Defining the interaction framework

Note –This diverges from Cooper’s steps.

Determine Form Factor and Input methods: Tablet using pen

Construct Key Path Scenarios Paper prototype

Determine functional and data elements

Construct Key Path Scenarios Spell out the gritty details at the

task level for the primary actions and pathways through the system E.g. For email: viewing and

composing mail Start with a list of tasks Interaction best shown through

paper prototypes (Cooper calls it storyboarding)

Paper Prototypes Prototypes using paper that

represent of the user’s interaction with the application

Advantages: Easy and fast to create Hand drawn nature focuses on structure

of interaction rather than on visual features (icon design etc)

Encourages users to suggest change

Paper Prototypes You do a paper prototype for a

particular set of key path scenarios Complete high-level menu structure

and interactions All the dialogs, menus, etc to

complete the key path scenario(s) Include “real” data in the

prototype so users have context

Functional & Data Elements Look back at the needs you

identified and think about how those needs will be supported in the interface Panes, frames, other containers Individual on-screen buttons, menus,

controls needs Groups of on-screen controls

Questions to consider

Which elements need a large amount of real estate and which do not?

Which elements are used together?

In what sequence will a set of related elements be used?

Building the paper prototypes One piece of paper or card stock is the

screen Put everything that might need to move

on a post-it (pull down menus, buttons, ..) Windows: pieces of paper, decorate

windows with title bar Pull-down menus, name goes on window,

contents on a post-it. Draw buttons, check boxes on windows

Paper prototype examples

Interviewing with a paper prototype Don’t do a demo. Give user a task to accomplish with

prototype (e.g. grade this assignment) Critical that this user actually does the work

your application is for Ask the user to talk out loud as they do

things, explaining what they are doing. Be flexible – the user is never wrong,

adjust the prototype to meet their expectations

Team responsibilities One person facilitates the interview,

talking with the user and acting as “super help”.

One person acts as the “computer” making the prototype work as it should Have another person assist the “computer”

if there is lots of data to configure on the spot (write on post-its)

Everyone else takes notes

Online references User Interface Engineering

Five Paper prototyping tips http://world.std.com/~uieweb/paperproto.htm

Using Paper prototypes http://world.std.com/~uieweb/paper.htm

Online Computer Library Center Nice step by step article of how they do paper

prototyping http://www.oclc.org/usability/prototyping/oclc.htm