Lecture5 lofi proto(low fidelity)

1

Low Fidelity UI Prototyping

Part of the Human Computer Interaction Course Notes

Dr. Pearl PU Human Computer Interaction Group Institute for Core Computing Science

Faculty of Communication and Information Sciences EPFL

Attribution: some of the slides have been adapted from Marti Hearst with permission

low fidelity prototyping pearl pu EPFL

Slide adapted from James Landay

Why Do We Prototype?

Get feedback from users faster saves money

Experiment with alternative designs Fix problems before code is written Keep the design centered on the user



Fidelity in Prototyping

Fidelity refers to the level of detail High fidelity?

prototypes look like the final product

Low fidelity? (Paper prototyping) artists renditions with many details missing


Advantage of lowfi

Cheap = less time and easier to change Quick feedback More cycles of testing, more prototype Widely practiced in industry, even though it

sounds silly in the beginning

- Read documents on our website regarding lowfi prototyping


How to do a paper prototyping

Main idea: Sketch out prototypes of the interface on

paper Build interaction flow chart Potential users “walk through” task

scenarios using the paper interface A designer “plays computer” Change the design on-the-fly if helpful


Paper prototyping in architecture

Paper models of a house before it’s built, so that habitants can “walk through” it;

Similarly, potential users can “walk through” task scenarios and critique on the UI

2


Review task analysis results Identify lofi scope Produce lofi Produce interaction flow chart Walk through lofi; redesign Produce high fidelity prototype

Lofi 6 steps


Poster papers Paper, pencils, and markers Glue sticks and scissors Post-it notes Transparencies

Materials


Which part of a software to prototype

Vertical prototype

Horizontal prototype


In reality

You prototype most frequently performed tasks from most important users

Prototype until the rest of the tasks become similar to what has been prototyped

The decision to stop prototyping is to ask yourself whether your major personas will be able to walk through it.

3



Constructing the Paper Model of GUI

Set a deadline don’t think too long - build it!

Draw a window frame on large paper Put different screen regions on cards

anything that moves, changes, appears/disappears

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

Use photocopier to make many versions


Interaction Flow Chart

It is a diagram with directed arrows denoting ordering and steps in user interaction

Each node of the chart is a GUI Building interaction flow charts for

main user tasks is part of paper prototyping

4


Example

Example from Last Year: McInterface Linda Harjono, Saifon Obromsook, John

Wai http://www.sims.berkeley.edu/courses/

is213/s01/projects/P2/

Main idea: Walk up kiosk for McDonalds

Main goals Easy Fast

Interaction Flow Example

Interaction Flow Example Interaction Flow Example


5

6



Interaction Flow Chart Example

Some details missing from the diagram

First branch not labeled correctly Let’s complete the example


How to do a walk through

The goal of a walk through is to discover usability problems

Two methods Heuristic evaluation (see another teaching

notes) Testing lowfi prototype by choosing

someone from a priority user group and ask him to perform tasks described in task scenarios.



Preparing for an informal test

Select your participants understand background of intended users

Prepare scenarios that are important according to task analysis write up a sequence of actions for each of

these tasks according to task scenarios



Conducting a Test

Four testers (preferable) facilitator - 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 is approximately 1 hour preparation, the test, debriefing

7



Conducting a Test (cont.)

Test facilitator hands out written task

scenarios to the user must be clear & detailed

facilitator keeps getting “output” from participant

“What are you thinking right now?”, “Think aloud”

observe -> no “a-ha”, laugh, gape, etc.



Conducting a Test (cont.)

Debrief fill out post-evaluation questionnaire ask questions about parts you saw

problems on gather impressions give thanks



Evaluating Results

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


Potential difficulties

Interfaces with large focus on content Dynamic or static; both are ill-suited

Use word processor for large sets of text

For search/database applications Have pre-planned searches (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



Summary of advantages of Low-fi

Takes only a few hours no expensive equipment needed

Can test multiple alternatives 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!

Allows designers to work together

End

Documents

Lecture5 lofi proto(low fidelity)