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
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
NUR - Prototyping (low fidelity)
(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
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
NUR - Prototyping (low fidelity)
(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
NUR - Prototyping (low fidelity)
(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
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
Wizard of OzWizard of Oz
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.
Wizard of OzWizard of Oz
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.
Wizard of OzWizard of Oz
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
NUR - Prototyping (low fidelity)
(54)
Mummy: construction site inspection
Inspector
Construction site
Mummy Server
construction plans
Remote expert
Collaboration
Adaptation
NUR - Prototyping (low fidelity)
(58)
What must be done before
User research (D1)
Problem description, UI modelling– HTA, STN
Add new place
NUR - Prototyping (low fidelity)
(59)
MS PowerPoint
Vector graphics
Hyperlinks
Embedded videos, images
Animations
NUR - Prototyping (low fidelity)
(60)
Electronic program guide
Visual design - Gimp
Photographs
Snapshost series + JavaScript
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……
NUR - Prototyping (low fidelity)
(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
PhotoFinder
University of Maryland Human Computer Interaction Laboratory http://www.cs.umd.edu/hcil/
Infinite Zoom
Pad++:Graphical Sketchpad for Expt al Journal of Visual Languages and Computing 7, 1996
Saul’s focus (local user)
Carl’s focus
Andy’s focus
FisheyeTextgroupware
Greenberg, Graphics Interface
Data Mountain
Robertson / Czerwinski / Larson / Robbins / Thiel / van Dantzich Data Mountain: Using Spatial Memory for Document Management Proc ACM UIST’98
Cone Trees
Robertson / Mackinlay / Card Cone Trees: Animated 3D Visualizations of Hierarchical Information. Proc ACM CHI'91