CPSC User Centered Design and Prototyping Why user-centered design is important Prototyping User centered design Prototyping methods

The 3D Tractus—design example

System Centered Design What can I easily build on this platform? What can I create from the available tools? What do I as a programmer find interesting?

User Centered System Design Design is based upon a user’s –abilities and real needs –context –work –tasks –need for usable and useful product Golden rule of interface design: Know The User

User Centered System Design... is based on understanding the domain of work or play in which people are engaged and in which they interact with computers… From Denning and Dargan, p111 in Winograd, Ed., Bringing Design to Software, Addison Wesley Denning and Dargan, 1996 Assumptions –The result of a good design is a satisfied customer –The process of design is a collaboration between designers and customers. The design evolves and adapts to their changing concerns –The customer and designer are in constant communication during the entire process

CPSC Notes: Assignment 1 due: Friday October 14th 2005, 5PM. No class on Monday, Oct. 10 th (Thanks Giving) Midterm: Monday, Nov. 7 th, in class (SB142), 2:00-2:50pm Today: Continuing User Centered Design and Prototyping, Required readings: Prototyping. (Extract) from Nielsen, J. (1993) In Usability Engineering Low vs. high fidelity prototyping debate. Rudd, J., Stern, K. and Isensee, S. (1996) Interactions. Prototyping for tiny fingers. Rettig, M. (1994) Communications of the ACM, 37(4), ACM Press

CPSC Know your user 1.Know your user 2. You are not your user Participatory Design:

Participatory Design Problem –Designers’ intuitions can be wrong –interviews etc not precise –designer cannot know the user sufficiently well to answer all issues that come up during the design The user is just like me Solution –designers should have access to representative users END users, not their managers or union reps!

Participatory Design Users are 1 st class members in the design process –active collaborators vs passive participants Users are considered subject matter experts –know all about the design work context Iterative process –all design stages subject to revision

Participatory Design Up side –users are excellent at reacting to suggested system designs designs must be concrete and visible –users bring in important “folk” knowledge of work context knowledge may be otherwise inaccessible to design team Down side –hard to get a good pool of end users expensive, reluctant... –users are not expert designers don’t expect them to come up with design ideas from scratch –the user is not always right don’t expect them to always know what they want

Methods for involving the user At the very least, talk to users –surprising how many designers don’t! Contextual interviews + site visits –interview users in their workplace, as they are doing their job –discover user’s culture, requirements, expectations,…

Methods for involving the user Explain designs –describe what you’re going to do –get input at all design stages all designs subject to revision (don’t fall in love with your design) Important to have visuals and/or demos –people react far differently with verbal explanations –this is why prototypes are critical

Design: getting ideas: “To get good ideas… Get lots of ideas”

Sketching and Prototyping Sketches / low / medium / high fidelity prototypes – as investment in design increases, changes are becoming more painful to implement. –as investment in design increases, so does the formality of the criteria whereby concepts are reviewed or accepted.

Sketches

Sketching vs Prototyping Sketches –Invite –Suggest –Explore –Question –Propose –Provoke Prototype –Attend –Describe –Refine –Answer –Test –Resolve From Design for the Wild, Bill Buxton (in press) with permission

Sketching and Prototyping Early design Late design Brainstorm different representations Choose a representation Rough out interface style Sketches & low fidelity paper prototypes (LO-FI) 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 Prototypes Paper mock-up of the interface look, feel, functionality –quick and cheap to prepare and modify Purpose –brainstorm competing representations –bring out user reactions –bring out user modifications / suggestions

Sketches –drawing of the outward appearance of the intended system –crudity means people concentrate on high level concepts –but hard to envision a dialog’s progression Computer Telephone Last Name: First Name: Phone: Place CallHelp

Back to Cheap Shop…

The attributes of sketches Quick –to make Timely –provided when needed Disposable –investment in the concept, not the execution Plentiful –they make sense in a collection or series of ideas Clear vocabulary –rendering & style indicates it’s a sketch, not an implementation Constrained resolution –doesn’t restrain concept exploration Consistency with state –refinement of rendering matches the actual state of development of the concept Suggest & explore rather than confirm –value lies in suggesting and provoking what could be –sketches are the medium to conversation and interaction

Storyboarding –a series of key frames as sketches originally from film; used to get the idea of a scene snapshots of the interface at particular points in the interaction –users can evaluate quickly the direction the interface is heading Excerpts from Disney’s Robin Hood storyboard

note how each scene in this storyboard is annotated

CPSC Notes: Assignment 1 due: Friday October 14th 2005, 5PM. Assignment 2 will be out this Friday. Midterm: Monday, Nov. 7 th, in class (SB142), 2:00-2:50pm Past lectures and required readings are all online. CPSC info… Last lecture: participatory design, climbing the prototypes evolutionary ladder. Today: Finishing User Centered Design and Prototyping.

Looking for something different to do? Icuiti V920

Autonomous Humanoid (Robosapien hack)

Framework CPSC 503 winter project course, 4 th year CPSC only. NSERC Summer research, Undergraduate Student Research Awards (USRA), ~6K$/four months, any year, any Department. Workstation at ilab Interested? Please drop me a line.

Sketches and storyboarding

Scan the stroller -> Change the color -> Place the order -> Initial screen

Scan the shirt -> Touch previous item -> Delete that item-> Alternate path…

Storyboarding Spotlight: an interactive foam core and paper sketch/storyboard Credit: Dept Industrial Design, University of Washington

Tutorials and manuals –What are they? written in advance of the system implementation serves as an interface specification for programmers Tutorial for step by step description of an interaction –an interface storyboard “walk-through” with directions Manual for reference of key concepts –in-depth technical description of the different parts of the system –a list of features –Often less visual –Does this work? Users can read and provide feedback on: –interface, –functionality, –match to task. Act as design tools

Tutorials Star Trek: The Birth of the Federation is the property of Atari:

Tutorials Star Trek: The Birth of the Federation is the property of Atari:

Tutorials Star Trek: The Birth of the Federation is the property of Atari:

Manuals “The Sims” is the property of Maxis:

Manuals “The Sims” is the property of Maxis:

Manuals “The Sims” is the property of Maxis:

Pictive plastic interface for collaborative technology initiatives through video exploration Muller, CHI 1991 Designing with office supplies –multiple layers of sticky notes and plastic overlays –different sized stickies represent icons, menus, windows etc. interaction demonstrated by manipulating notes –new interfaces built on the fly session videotaped for later analysis –usually end up with mess of paper and plastic!

Pictive Can pre-make paper interface components buttons menu alert box combo box tabs entries list box

Pictive, here’s how it can look like…

The Developer’s Dilemma (Hix & Hartson) “…You cannot evaluate an interaction design until after it is built; but after building changes to the design are difficult…”

The two dimensions of prototyping Nielsen Usability Engineering 1993

Limiting prototype functionality vertical prototypes –includes in-depth functionality for only a few selected features –specific design ideas can be tested in depth horizontal prototypes –the entire surface interface with no underlying functionality –a simulation; no real work can be performed scenario –scripts of particular fixed uses of the system; no deviation allowed Vertical prototype Scenario Horizontal prototype Full interface Nielsen, J. (1993) Usability Engineering, p93-101, Academic Press. Different Features Functionality

Integrating prototypes and products 1. throw-away –prototype only serves to reveal user reaction –creating prototype must be rapid, otherwise too expensive 2. incremental –product built as separate components (modules) –each component prototyped & tested, then added to the final system 3. evolutionary –prototype altered to incorporate design changes –eventually becomes the final product

CPSC Notes: Assignment 1 due Assignment 2 out, due on Monday October 31th Midterm: Monday, Nov. 7 th, in class (SB142), 2:00-2:50pm Today: Finishing User Centered Design and Prototyping. Monday: starting Evaluating Interfaces with Users.

Assignment 2 Qualitative evaluation with users

Assignment 2 Overview This assignment is a hands-on exercise on qualitative evaluation. Its purpose is to give you practical experience conducting a usability study. Methods used in this study include the conceptual model discovery, silent observation, think-aloud, constructive interaction, questionnaires and interviews. Because of the economy of these methods (they are easy to understand and quick to apply) you can easily use them to your future work. In terms of this assignment, your group is to take the perspective of consultants that are working for a company that has been commissioned to evaluate a system, in this case the Air Canada website. You can use your classmates or even your friends as test participants when applying the various methodologies although you should try to get as wide a variety of test participants as possible.

Deliverables Your group will deliver a substantial technical report written to the (imaginary) vice- president of the company (your TA) that commissioned the study. It must include your observations, the findings, the major problems detected, and some design recommendations. The appendix to your report will briefly contrast the methods used, recommending which ones should be adapted in future study.

Included Handouts 1.Assignment overview 2.Assignment description and details 3.System and example tasks for the usability study (Air Canada web site) 4.Grading Sheet 5.Tips on questionnaire design 6.Apple’s Discussion of guidelines for user observation.

Back to user centered design: Designing with the user Integrating prototypes and products 1. throw-away 2. incremental 3. evolutionary

Throw-Away Approach To Prototyping The prototype is only used to get feedback The prototype is built, tested and then discarded System Lessons learned

Incremental Approach To Prototyping Build the system as separate modules/components Each module is designed, prototyped and completed separately before being added to the final system System

Evolutionary Approach To Prototyping Change the entire prototype itself in order to incorporate changes Eventually the reworked prototype becomes the final system System

Medium Fidelity Prototypes “With a computer” Many different types –from simple computer drawn images to partially working systems May take longer to generate and change than low-fi Benefits –Seems more like the completed detailed system, provides a clearer idea of how it works –May allow user testing (not true for all medium fidelity prototypes). Pitfalls –User’s reactions are usually “in the small” Blinds people to major representational flaws because of a tendency to focus on more minor details –Users more reluctant to challenge/change the design itself Designs are too “pretty”, developers’ egos… –Management may think its real!

Medium Fidelity Painting/drawing packages draw each storyboard scene on computer –very thin horizontal prototype (across features, no functionality) –does not capture the interaction “feel”

Control panel for pump 2 coolant flow 45 % retardant 20% speed 100% Shut Down Medium Fidelity Scripted simulations create storyboard with media tools on a computer –scene transition activated by simple user inputs –a simple vertical prototype –Can use PowerPoint… user given a very tight script/task to follow –appears to behave as a real system –script deviations blow the simulation Control panel for pump 2 coolant flow 0 % retardant 20% speed 100% DANGER! Shut Down

Medium Fidelity Interface builders –Tools for letting a designer layout the common widgets –Construct mode Change attributes of objects –Test mode: Objects behave as they would under real situations –Excellent for showing look and feel A broader horizontal prototype But constrained to widget library –Vertical functionality added selectively Through programming

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

Wizard of Oz A method of testing a system that does not exist –the listening typewriter, IBM 1984 Dear Henry What the user sees Speech Computer From Gould, Conti & Hovanvecz, Comm ACM 26(4) 1983.

Wizard of Oz A method of testing a system that does not exist –the listening typewriter, IBM 1984 What the user seesThe wizard Speech Computer Dear Henry From Gould, Conti & Hovanvecz, Comm ACM 26(4) 1983.

Wizard Of Oz: Examples IBM: a listening typewriter using continuous speech recognition –Secretary trained to: Understand key words as “commands” Types responses on screen as the system would Manipulating graphic images through gesture and speech Intelligent Agents / Programming by demonstration –Person trained to mimic “learning agent” User provides examples of task they are trying to do Computer learns from them –Shows how people specify their tasks In both cases, system very hard to implement! But Wizard of Oz allows Interface evaluation

Wizard of Oz Human ‘wizard’ simulates system response –interprets user input according to an algorithm –controls computer to simulate appropriate output –uses real or mock interface –wizard sometimes visible, sometimes hidden “pay no attention to the man behind the curtain!” good for: –adding simulated and complex vertical functionality –testing futuristic ideas

User Centered Design and Prototyping What you now know User centered + participatory design –based upon a user’s real needs, tasks, and work context –bring end-user in as a first class citizen into the design process Prototyping –allows users to react to the design and suggest changes –sketching / low-fidelity vs medium-fidelity Prototyping methods –vertical, horizontal and scenario prototyping –sketches, storyboarding, pictive –throw-away, incremental and evolutionary prototyping approaches –scripted simulations, Wizard of Oz