HCI - Prototyping
how to collect data for WOO prototypes
Get user feedback, often video tape interaction, debrief users
Who said "Software is the only engineering field that throws together prototypes and then attempts to sell them as delivered goods"?
Constantine and Lockwood
Storyboard pros
Holistic focus (helps emphasize how an interface accomplishes a task), avoids commitment to a particular interface, helps get all stakeholders on the same page in terms of the goal
Implementation
How does it work? How does the user interact with it? What are the steps, the flow, the feedback, etc.?
Goal of Modeling UI Flow
Identify major UI components & interactions
develop hooks for wizard input
If paper, hooks will be very manual. If done in software, some code will need to be developed.
Serial Refinement
Make a set of decisions that produce one prototype at a time, get feedback & re(evaluate), but the improvements you make are minimal
Content diagram components
Name, Purpose, Functions, Links, Objects, Contraints
How to create a content diagram
Need to Know: primary tasks and objects, use-cases and scenarios, containers and task objects, which tasks go into which container, define links that show navigation flow
What do you put in a video prototype
the whole tasks including motivation and success (shots/narrative), draw on tasks you observe, illustrate important tasks that your system enables, can help scope an MVP, changes what design teams argue about, show success & failure and several use-cases
goal of a wire frame
to meet the purpose of a particular screen, determine what UI elements are needed and how they are organized
Paper Prototyping
using paper to produce a potential interface design
who made the mock-up of the airline cabin
walter teaque with boeing
Minimum work necessary
what is the absolute minimal working prototype with which we can perform our user study - strip out any unnecessary features
wireframes and paper-prototypes v. UI flow
wireframes and paper-prototypes don't show UI flow well
Wireframes v. paper-prototypes
wireframes: more complete, more polished (still lo-fi), often created with computer tools paper-prototypes: done earlier, less polished, used more for evaluating interaction with users
Draw prototyping sets over time graph
x = time in progress; y = # of prototypes; As you develop, you get many prototypes out in the beginning (lo-fi) and then you refine as your process progresses (hi-fi)
Draw the prototyping over time graph
x = time; y = fidelity; Need-Finding -> storyboards -> lo-fi mocks -> hi-fi mocks; user scenarios -> grab some people -> structured critiques -> controlled experiments
draw time spent vs. learned graph
x = work; y = learned, concave downward & levels off; inflection point: where the work you put into the prototype will not gain you any more knowledge
Usability Goals
◦ Effective to use ◦ Efficient to use ◦ Safe to use ◦ Have good utility ◦ Easy to learn ◦ Easy to remember how to use
Usability Criteria
- Time to learn - Speed of performance - Rate of errors by users - Retention over time - Subjective satisfaction
Three prototyping "levels"
1. Conceptual Design 2. Interaction Design 3. Screen Design
Advantages of Wizards
1. Faster/cheaper, so more iterative prototypes 2. creating multiple variations is very easy 3. more "real" than pure paper prototyping or mockups 4. identifies bugs and problems with current design 5. places user at the center of development 6. can envision challenging to build application 7. designers learn by playing wizard
Why do we prototype?
1. Gain insights into user behavior 2. Communicate ideas to other teammates and stakeholders 3. Collect data for arguing the best design choice 4. Encourage reflection (very important in any design activity)
How to make a WOO prototype
1. Map out scenarios and application flow 2. put together interface skeletons 3. develop hooks for wizard input 4. put it all together 5. rehearse a wizard role with a colleage
Lessons from IDEO
1. Prototypes are nearly ALWAYS incomplete 2. Goal is to STIMULATE specific aspects of the design and acquire knowledge regarding these targeted aspects 3. IDEO wanted to know more about the digital aspects of the camera
Prototyping Rules
1. Prototypes should NOT be required to be complete 2. Prototypes should NOT need to be updated. 3. Prototypes should be easy to change. 4. Prototypes should be disposable. Or, at least, you should mentally be prepared to dispose them. 5. In prototyping, the goal is NOT the artifact itself! -- It's what you learn from the feedback you get from building, evaluating, and iterating on them.
level of UI flow modeling
conceptual design and physical design
Prototyping Process
1. What are your goals for the prototype? What do you wish to learn? 2. How can you measure whether or not that goal has been achieved? How can you measure which of multiple prototypes is superior? 3. What is the MINIMUM amount of work necessary to produce, measure, and learn from your prototype?
Disadvantages of wizards
1. can you really hide behind the curtain in a non-distraction way 2. simulations may represent imperfect/impossible tech 3. wizards require training and can be inconsistent 4. playing wizards can be exhausting 5. some features are hard or impossible to simulate 6. may be inappropriate in some venues
Steps to video prototyping
1. outline/storyboard video 2. obtain equipment 3. focus on message, not on the production value 4. film
paper prototype evaluation session
1. user walks through a task 2. one team member plays computer 3. new screens moved in and out 4. team draws on paper, adds things, moves things 5. someone asks questions & elicits comments 6. someone records feedback
Hi-Fi Prototypes
A prototype that mimics the design very closely, but remains functionally incomplete (includes colors, sizing, spacing, fonts, etc.)
Storyboards
A storyboard visually shows a specific sequence of actions with our imagined system (user tasks and flow of user interaction). Storyboards are a good way to communicate the essentials of how a user will get work done with a system. (very lo-fi because they don't focus on specific interface elements or how it looks)
What did we not learn about with Jeff Hawkins' block of wood
Battery life; interface and other digital interactions; sound effects, feedback, etc.
Map out scenarios and application flow
Enumerate ALL scenarios if possible, and If not, provide guidelines in as specific a format as possible.
Two roles of collecting data for WOO prototypes
Facilitator and Wizard
Types of Prototypes
Feel, Implementation, Role
Is wizard of oz prototyping hi-fi or lo-fi
It can be either - you can control interactions with a paper prototype while users use it, but the more realistic, the more realistic user reactions will be
First handheld device
Jeff Hawkins' block of wood (Palm Pilot)
What should storyboards convey
SETTING (people involved, environments, task being accomplished), SEQUENCE (steps involves, what leads to someone using the app or system, tasks being illustrated), SATISFACTION (what motivates people to use the system, what does it enable people to accomplish, what need does the system fill)
Why is parallel prototyping better than serial refinement
Separates ego from artifact (criticism of one design is NOT a criticism towards the designer); supports the TRANSFER of positive attributes across designs
Lo-fi prototyping strategies
Storyboarding, video prototypes, paper prototypes
When would you use a wizard of oz prototype
There is an advanced technology in your system that you don't have time to build / incorporate into prototype (Speech recognition, artificial intelligence, etc); you haven't determined how to best implement a feature and want to test it first
Prototyping Goals
These should be represented by your usability goals and your usability requirements, so select the requirements that we wish to test with a given prototype
Types of user feedback
Think aloud, retrospective, heuristic evaluation
Screen Design Prototyping
This is done before development, defines and refines screens which become blue-prints for the final physical design, user evaluation in both achieving tasks, navigation, and usability criteria, and representations are close to the final representation but often without interaction (just form/layout)
Conceptual Design Prototyping
This is done early in development, explores high-level issues (different conceptual models, interaction styles, user needs and characteristics, and usability goals), and is a high-level representation that is far from the final code or GUIs
Interaction Design Prototyping
This is done later in development, focuses on user work-flows (tasks and scenarios you've identified), might focus at the screen (or page) level [identify screens, pages, activities; organize into groups; define flows or transitions between them], and involves users in evaluation
Measuring Prototyping Goals
We can think about the falsifiability of usability requirements - if the requirements are truly falsifiable, then we should be able to design user studies that prove that our prototype is sufficient
Feel
What does it look and feel like? What's the form?
Role
What is the experience like for the users? When will they use it? In what context?
Functional Fixation
When you do serial refinement you tend to stick with the same essential design approach which could ruin the chances of making serious improvements
Put it all together
Where and how will the wizard provide input? How will the wizard receive input from the user?
Wire frame
a lo-fi representation of a single page or screen
When to use wireframes
after user analysis and understanding requirements and as a step towards designing the final interface
What a wire frame should include
all content or features needed and relative sizes and locations of these
container
an abstract representation of some part of user's work activity and includes functions required to do that activity
wizard of oz prototypes
an interactive prototype that only works by having someone behind-the-scenes who is pulling the levers and flipping the switches but allows for feedback from real users. The wizard of oz technique in user testing has a user interacting with an interface without knowing that the responses are being generated by a human, not a computer, where the front end interface is coded.
unknown unknowns
aspects of a design that you don't know are open issues
known unknowns
aspects of a design that you know you don't understand and wish to learn
fidelity of video prototyping
can be any level of fidelity
Video Prototyping pros
cheap and fast, great communication tools (common ground, portable and self-explanatory), 'spec' for developers, ties interface designs to tasks (aligns and orients interface choices, ensures complete interface)
what a wire frame should not include
colors, fonts, etc.
retrospective
discuss tasks afterwards
storyboard tips
don't spend too much time on the storyboard; storyboard what you want to lean and common tasks
heuristic evaluation
experts are watching interaction unfold
pros of paper prototyping
fast, cheap, easy to change and adapt, can support interaction in an evaluation session with users, not focused on fit-and-finish, allows focus on desired evaluation goals (flow, conceptual model, visibility), no demo fail because it is easy to change on the fly during an evaluation session, users can get involved and quickly alter/update the interface (show you what they prefer)
What did we learn about with Jeff Hawkins' block of wood
form factor; living with a device 24/7
goal of a UI flow diagram
get high level overview and trace through use-cases or scenarios
links
how the user will navigate in the UI between these functional areas
Cost of Change overtime
it is 100 times cheaper to make a change before any code has been written than it is to wait until after the implementation is complete; the biggest improvements in user experience come from gathering usability data as early as possible in a design project
Overarching types of prototypes
lo-fi and hi-fi
Content Diagram
lo-fi prototype that shows organization and structure of the UI
Parallel prototyping
making prototypes in parallel
When does a prototype become hi-fi
more time for more detail, closer to final design, includes fit & finish, when the goal is more about refinement about a design you've chosen and less about exploring alternatives
single link
next container becomes primary fous
prototype
one manifestation of a design that allows stakeholders to interact with it and to explore its suitability; it will usually emphasize one set of product characteristics and de-emphasize others; The rapid creation of an approximation to a design idea for the purpose of retrieving feedback and knowledge.
wizard
operates the interface
Facilitator
provides tasks and takes notes
components of UI flow diagram
represent major UI elements with a title and ID
UI flow diagrams
roadmap of all menus & screens and pages & how you navigate through them
why would you use wizard of oz prototyping
saves time and resources of actually creating the functionality before you refine it through testing; This allows testing of some difficult interface concepts before a system is fully working
double link
second container requires context of first container
think aloud
speak freely as performing tasks
