INFO 3307 Lecture 08 - User Centered Design and Prototyping - updated.pdf

CHAPTER 8: User Centered Design and Prototyping INFO 3307 HUMAN COMPUTER INTERACTION  Human-Centered Artificial Intelligence (HAI) Stanford University launches the Institute for Human-Centered Artificial Intelligence https://youtu.be/se4CQ5UZXaM  User Centered Sy...

CHAPTER 8: User Centered Design and Prototyping INFO 3307 HUMAN COMPUTER INTERACTION  Human-Centered Artificial Intelligence (HAI) Stanford University launches the Institute for Human-Centered Artificial Intelligence https://youtu.be/se4CQ5UZXaM  User Centered System Design Design is based upon a user’s abilities and real needs context work tasks Golden rule of interface design: “Know The User”  User Centered System Design... is based on understanding of - the domain of work or play in which people are engaged, and the way they interact with computers, and programming computers to facilitate human action....  User Centered System Design Based on three (3) assumptions: 1.The process of design is a collaboration between designers and customers. The design evolves and adapts to their changing concerns, and the process produces a specification as an important by product 2.The customer and designer are in constant communication during the entire process 3.The result of a good design is a satisfied customer Denning and Dargan, 1996  User Centered System Design Problem with system centered design o Intuitions was wrong o Interviews etc. not precise o Designer cannot know the user sufficiently well to answer all issues The user that come up during the design is just like me Solution o Designers should have access to pool of representative users - END users, not their managers or union reps!  Methods for involving the user At the very least, talk to users Interviews used to discover user’s culture, requirements, expectations, etc. contextual inquiry: - Interview users in their workplace, as they are doing their job Explain designs Describe what you’re going to do Get input at all design stages - all designs subject to revision Important to have visuals and/or demos - people react far differently with verbal explanations  Participatory Design Users become first class members in the design process - Active collaborators vs. passive participants Users considered subject matter experts - Know all about the work context Iterative process - All design stages subject to revision  Example: Participatory Design in Virtual involves two public school teachers School Objective: to develop and investigate a high-quality communications infrastructure to support collaborative science learning Selected approach: participatory design Stages of Cooperative engagement: teachers as practitioner-informants → teachers as analysts → teachers as designers → teachers as coaches Duration of project: 5 years; long-term participatory design method a process of mutual learning and personal development for participants (teachers, technologists and HCI designers)  Participatory Design The Pro’s users are excellent at reacting to suggested system designs - designs must be concrete and visible users bring in important knowledge of work context -knowledge may be otherwise inaccessible to design team -The Con’s hard to get a good pool of end users - expensive, reluctance... 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 know what they want Prototyping Early design Brainstorm different representations Low fidelity paper Choose a representation prototypes Rough out interface style Task centered walkthrough and redesign Fine tune interface, screen design Medium fidelity prototypes Heuristic evaluation and redesign Usability testing and redesign High fidelity prototypes Limited field testing Alpha/Beta tests Working systems Late design  What is a prototype? In other design fields a prototype is a small-scale model: a miniature car a miniature building or town the examples here come from a 3D printer What is a prototype?  What is a prototype? In interaction design it can be (among other things): a series of screen sketches a storyboard, i.e. a cartoon-like series of scenes a Powerpoint slide show a video simulating the use of a system a lump of wood (e.g. PalmPilot) a cardboard mock-up a piece of software with limited functionality written in the target language or in another language  Why prototype? Evaluation and feedback are central to interaction design Stakeholders can see, hold, interact with a prototype more easily than a document or a drawing Team members can communicate effectively You can test out ideas for yourselg It encourages reflection: very important aspect of design Prototypes answer questions, and support designers in choosing between alternatives Filtering dimensions of prototyping Manifestation dimensions of prototyping  What to prototype? Technical issues Work flow, task design Screen layouts and information display Difficult, controversial, critical areas Prototyping Early design Brainstorm different representations Low fidelity paper Choose a representation prototypes Rough out interface style Task centered walkthrough and redesign Fine tune interface, screen design Medium fidelity prototypes Heuristic evaluation and redesign Usability testing and redesign High fidelity prototypes Limited field testing Alpha/Beta tests Working systems Late design  Low fidelity prototypes Paper-based prototypes Sketches Storyboarding Pictive  Low fidelity prototypes Paper-based prototypes a paper mock-up of the interface look, feel, functionality “quick and cheap” to prepare and modify Purpose brainstorm competing representations elicit user reactions elicit user modifications / suggestions  Low fidelity prototypes 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  Low fidelity prototypes Storyboarding a series of key frames 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  Low fidelity prototypes Storyboarding Storyboard of a computer based telephone Computer Telephone Help Screen Computer Telephone You can enter either the Last Name: person's name or their Call by Last Name: Greenberg Establishing Help-> name-> First Name: number. Then hit the First Name: connection-> Phone: place button to call them Phone: Place Call Help Return Place Call Help Computer Telephone Computer Telephone Call Call Dialling.... Last Name: Greenberg Connected connected... Last Name: Greenberg completed... First Name: First Name: Cancel Phone: Hang up Phone: Place Call Help Place Call Help Card-based prototypes Index cards (3 X 5 inches) Each card represents one screen or part of screen Often used in website development  Low fidelity prototypes Pictive Stands for ‘Plastic Interface for Collaborative Technology Initiatives’ through video exploration. Design is multiple layers of sticky notes and plastic overlay o Different sized stickies represent icons, menus, windows etc. Interaction demonstrated by manipulating notes o Contents changed quickly by user/designer with pen and note repositioning Session is videotaped for later analysis o Usually end up with mess of paper and plastic! https://www.youtube.com/watch?v=wBabIXmBZYg  Low fidelity prototypes Pictive Stands for ‘Plastic Interface for Collaborative Technology Initiatives’ through video exploration. Design is multiple layers of sticky notes and plastic overlay o Different sized stickies represent icons, menus, windows etc. Interaction demonstrated by manipulating notes o Contents changed quickly by user/designer with pen and note repositioning Session is videotaped for later analysis o Usually end up with mess of paper and plastic!  Low fidelity prototypes Pictive can create pre-made interface components on paper alert box eg, these empty widgets were created in visual basic and printed out: menu list box tabs entries buttons combo box  Low fidelity prototypes Tutorials and manuals Write them in advance of the system What are they? o Tutorial for step-by-step description of an interaction - An interface “walk-through” with directions o Manual for reference of key concepts - In-depth technical description If highly visual, then storyboard is set within textual explanations Does this work? People often read manuals of competing products to check: o Interface o Functionality o Match to task From Apple’s Tutorial Guide to the Macintosh Finder From Apple’s Tutorial Guide to the Macintosh Finder Prototyping Early design Brainstorm different representations Low fidelity paper Choose a representation prototypes Rough out interface style Task centered walkthrough and redesign Fine tune interface, screen design Medium fidelity prototypes Heuristic evaluation and redesign Usability testing and redesign High fidelity prototypes Limited field testing Alpha/Beta tests Working systems Late design  Medium fidelity prototypes Prototyping with a computer simulate or animate some but not all features of the intended system engaging for end users Purpose provides a sophisticated but limited scenario to the user to try out provides a development path (from crude screens to functional system) can test more subtle design issues Danger user’s reactions are usually “in the small” - blinds people to major representational flaws users reluctant to challenge / change the design itself - designs are too “pretty”, egos… management may think its real!  Medium fidelity prototypes Approaches to limiting prototype functionality 1. Vertical prototypes Scenario includes in-depth functionality for only Horizontal prototype a few selected features common design ideas can be tested in depth Vertical prototype 2. Horizontal prototypes Full System surface layers includes the entire user 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  Medium fidelity prototypes Approaches to integrating prototypes and product: throw-away creating prototype must be rapid, otherwise too expensive -prototype only serves to elicit user reaction incremental product built as separate components (modules) each component prototyped and tested, then added to the final system evolutionary prototype altered to incorporate design changes eventually becomes the final product  Medium fidelity prototypes Painting/drawing packages draw each storyboard scene on computer neater/easier (?) to change on the fly than paper a very thin horizontal prototype does not capture the interaction “feel” Control panel for pump 2 Control panel for pump 2 DANGER! coolant flow 45 % next coolant flow 0 % drawing retardant 20% retardant 20% (for shut speed 100% down speed 100% condition) Shut Down Shut Down  Medium fidelity prototypes Scripted simulations and slide shows encode the storyboard on the computer created with media tools scene transition activated by simple user inputs a simple horizontal and vertical prototype user given a very tight script/task to follow appears to behave as a real system but script deviations blows the simulation Control panel for pump 2 Control panel for pump 2 DANGER! coolant flow 45 % next coolant flow 0 % drawing retardant 20% retardant 20% (on mouse press over speed 100% speed 100% button) Shut Down Shut Down  Computer Help Telephone Screen Computer Telephone You can enter either the Last Name: person's nameGreenberg Dialling.... Connected Last Name: or their Greenberg First Name: number. Then First Name: hit the Phone: place Cancel Hang up Phone:button to call them Place Place Call Call Help Help Return Help- Type name and place call  Medium fidelity prototypes Interface builders tools for letting a designer lay out 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  Wizard of Oz A method of testing a system that does not exist the voice editor, by IBM (1984) What the user sees The Wizard https://www.youtube.com/watch?v=WtrO6b_oUYI  Medium fidelity prototypes Wizard of oz Human simulates the system’s intelligence and interacts with user Uses real / mock interface - “Pay no attention to the man behind the curtain!” User uses computer as expected “Wizard” (sometimes hidden): - Interprets subjects input according to an algorithm - Has computer/screen behave in appropriate manner Good for: -Adding simulated and complex vertical functionality -Testing futuristic ideas  Wizard of Oz: Examples 1. IBM: an imperfect listening typewriter using continuous speech recognition Secretary trained to: understand key words as “commands” to type responses on screen as the system would manipulating graphic images through gesture and speech 2. 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 above, system very hard to implement, even harder to change!  Summary User centered design design is based upon a user’s real needs, tasks, and work context Participatory design brings end-user in as a first class citizen into the design process Prototyping allows users to react to the design and suggest changes low-fidelity prototypes best for brainstorming and choosing representations medium-fidelity prototypes best for fine-tuning the design Prototyping methods vertical, horizontal and scenario prototyping storyboarding Pictive scripted simulations Wizard of Oz