tur - prototyping how to have a satisfied user? what are the sources of user satisfaction? what are...

TUR - Prototyping

How to have a satisfied user?How to have a satisfied user?

What are the sources of user satisfaction?What are the sources of user satisfaction? Where the user satisfaction can be influenced?Where the user satisfaction can be influenced? What is the usual course of events?What is the usual course of events?

NUR - Prototyping (low fidelity)

(3)

DilemmaDilemma

You can’t evaluate design until it’s builtYou can’t evaluate design until it’s built– But…But…

After building, changes to the design are difficultAfter building, changes to the design are difficult

Simulate the design, in low-cost mannerSimulate the design, in low-cost manner

How and when to test user interface

9

Rapid Prototyping Methods

Non-computer vs. computer-based

Typically earlier in processTypically later in process

10

Non-Computer Methods

Goal: Want to express design ideas and get quick & cheap opinions on system

Methods?

11

Sketches, Mock-ups

Paper-based “drawings” of interfaces Good for brainstorming Focuses people on high-level design notions Not so good for illustrating flow and the details Quick and cheap -> helpful feedback

12

Physical Mock-Ups

Wooden blocks and labels - device control

(Three versions of

a hand-held controller)

13

Computer Methods

Simulate more of system functionality– Usually just some features or aspects– Can focus on more of details– Typically engaging– Danger: Users are more reluctant to suggest changes

once they see more realistic prototype

14

Prototyping Tools - Drawing Pgms.

Draw/Paint programs– Draw each screen, good for look

Thin, horizontal prototype PhotoShop, Corel Draw,...

IP Address

CancelOK

15

Prototyping Tools - Scripting

Scripted simulations/slide shows– Put storyboard-like views down with (animated)

transitions between them– Can give user very specific script to follow

• Often called chauffeured prototyping

– Examples: PowerPoint,Hypercard, HTML,Macromedia Director

Powerpoint Transition Controls

Mouse click actions:Next slidePrevious slideFirst slideLast slideLast slide viewedEnd showCustom showURLFile

Sketching and PrototypingSketching 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

Sketches & Low Fidelity PrototypesSketches & Low Fidelity Prototypes

Paper mock-up of the interface look, feel, Paper mock-up of the interface look, feel, functionalityfunctionality– quick and cheap to prepare and modifyquick and cheap to prepare and modify

PurposePurpose– brainstorm competing representationsbrainstorm competing representations– elicit user reactionselicit user reactions– elicit user modifications / suggestionselicit user modifications / suggestions

SketchesSketches

– drawing of the outward appearance of the intended systemdrawing of the outward appearance of the intended system– crudity means people concentrate on high level conceptscrudity means people concentrate on high level concepts– but hard to envision a dialog’s progressionbut hard to envision a dialog’s progression

Computer Telephone

Last Name:

First Name:

Phone:

Place Call Help

E-SHOP…….BUYING BABY E-SHOP…….BUYING BABY STROLLERSTROLLER

EXAMPLEEXAMPLE


(20)

Sketches & Low Fidelity PrototypesSketches & Low Fidelity Prototypes

Paper mock-up of the interface look, feel, Paper mock-up of the interface look, feel, functionalityfunctionality– quick and cheap to prepare and modifyquick and cheap to prepare and modify

PurposePurpose– brainstorm competing representationsbrainstorm competing representations– elicit user reactionselicit user reactions– elicit user modifications / suggestionselicit user modifications / suggestions

SketchesSketches

– drawing of the outward appearance of the intended systemdrawing of the outward appearance of the intended system– crudity means people concentrate on high level conceptscrudity means people concentrate on high level concepts– but hard to envision a dialog’s progressionbut hard to envision a dialog’s progression

Computer Telephone

Last Name:

First Name:

Phone:

Place Call Help

Scan the stroller ->

Change the color ->

Place the order ->

Initial screen

Scan the shirt ->

Touch previous item ->

Delete that item->

Alternatepath…

Paper mock-up

Tools for creation of paper prototypes

Složitější příklad PP

StoryboardingStoryboarding

Spotlight:Spotlight: an interactive foam core and paper an interactive foam core and paper sketch/storyboard sketch/storyboard Credit: Sue-Tze Tan, Dept Industrial Design, University of WashingtonCredit: Sue-Tze Tan, Dept Industrial Design, University of Washington

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

WHERE IS THE USER?WHERE IS THE USER?Up to now only technicalities were describedUp to now only technicalities were described


(41)

Methods for involving the userMethods for involving the user

At the very least, talk to usersAt the very least, talk to users– surprising how many designers don’t!surprising how many designers don’t!

Contextual interviews + site visitsContextual interviews + site visits– interview users in their workplace, as they are doing their jobinterview users in their workplace, as they are doing their job– discover user’s culture, requirements, expectations,…discover user’s culture, requirements, expectations,…

User involvementUser involvement

User should be involved in all stages of the designUser should be involved in all stages of the design Prototyping (plus testing) is an integral part of the Prototyping (plus testing) is an integral part of the

designdesign


(43)

Methods for involving the userMethods for involving the user

Explain designsExplain designs– describe what you’re going to dodescribe what you’re going to do– get input at all design stages get input at all design stages

• all designs subject to revisionall designs subject to revision

Important to have visuals and/or demosImportant to have visuals and/or demos– people react far differently with verbal explanationspeople react far differently with verbal explanations– this is why prototypes are criticalthis is why prototypes are critical

Na počítač trochu pomalé.Ale funguje to!

.000001 MHz

47

Prototyping TechniquePrototyping Technique

Wizard of OzWizard of Oz - Person simulates and controls - Person simulates and controls system from “behind the scenes”system from “behind the scenes”– Use mock interface andUse mock interface and

interact with usersinteract with users– Good for simulatingGood for simulating

system that would be system that would be difficult to builddifficult to build

Can be either computer-based or not

48

Wizard of OzWizard of Oz

Method:Method:– Behavior should be algorithmicBehavior should be algorithmic– Good for voice recognition systemsGood for voice recognition systems

Advantages:Advantages:– Allows designer to immerse oneself in situationAllows designer to immerse oneself in situation– See how people respond, how specify tasksSee how people respond, how specify tasks


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

Dear Henry

What the user sees

SpeechComputer

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


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

What the user seesThe wizard

SpeechComputer

Dear Henry

Dear Henry

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


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

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

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

52

Review of Prototyping Concepts Review of Prototyping Concepts (Summary)(Summary)

Low-fidelity Medium-fidelity High-fidelity

Sketches, mock-ups Slide shows

Simulations

System prototypes

Scenarios

StoryboardsWizard of Oz

Mummy - construction site inspection

Paper prototype

Electronic prototype (HTML, PPT)


(54)

Mummy: construction site inspection

Inspector

Construction site

Mummy Server

construction plans

Remote expert

Collaboration

Adaptation


(55)

Mummy: construction site inspection

Paper prototypePaper prototype


(57)

Electronic prototype

HTML prototype PPT prototype


(58)

What must be done before

User research (D1)

Problem description, UI modelling– HTA, STN

Add new place


(59)

MS PowerPoint

Vector graphics

Hyperlinks

Embedded videos, images

Animations


(60)

Electronic program guide

Visual design - Gimp

Photographs

Snapshost series + JavaScript


(61)

EPG - prototype showcase

... simple approach


(62)


(63)


(64)


(65)


(66)

Some sophisticated user interfaces

Representation, navigation ….Representation, navigation ….

The user should be able to know always what to The user should be able to know always what to do, where s/he is in a structure, should always do, where s/he is in a structure, should always understand to the data presentation etc……understand to the data presentation etc……


(68)

Which representation is best?Which representation is best?

depends heavily on taskdepends heavily on task

What is precise value?

How does the performancenow compared to its peak?

How does performancechange over time?

Windows 95 System Monitor

Detailed navigationplus precision

General navigation plus orientation

Where am I?Where am I?

Windows NT Hover Game

Inxight Magnifind

PhotoFinder

University of Maryland Human Computer Interaction Laboratory http://www.cs.umd.edu/hcil/

Table Lens

Inxight Table Lens

Infinite Zoom

Pad++:Graphical Sketchpad for Expt al Journal of Visual Languages and Computing 7, 1996

Fisheye Menus

Bederson, B.B. (May 2000) University of Maryland www.cs.umd.edu/hcil/fisheyemenu/

Saul’s focus (local user)

Carl’s focus

Andy’s focus

FisheyeTextgroupware

Greenberg, Graphics Interface

Perspective Wall

Leung and Apperly TOCHI’94

Mackinlay / Robertson / Card: Proc ACM CHI'91

Data Mountain

Robertson / Czerwinski / Larson / Robbins / Thiel / van Dantzich Data Mountain: Using Spatial Memory for Document Management Proc ACM UIST’98

www.research.microsoft.com/ui/TaskGallery/

Task Gallery

Cone Trees

Robertson / Mackinlay / Card Cone Trees: Animated 3D Visualizations of Hierarchical Information. Proc ACM CHI'91

Hyperbolic Lens

Xerox Parc - Inxight

Thank you for your attention

tur - prototyping how to have a satisfied user? what are the sources of user satisfaction? what are...

Documents

slide previous slide

process slide

user interface slide

tur prototyping slide

lowcost manner slide

macromedia director

handheld controller

url file slide