9/21/2019 1 PV182 Human-Computer Interaction Lecture 4 Prototyping Fotis Liarokapis liarokap@fi.muni.cz 23rd September 2019 User Centered Design and Prototyping Why user-centered design is important Prototyping and user centered design Prototyping methods Slide deck by Saul Greenberg. Permission is granted to use this for non-commercial purposes as long as general credit to Saul Greenberg is clearly maintained. Warning: some material in this deck is used from other sources without permission. Credit to the original source is given if it is known. System Centered Design 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… 9/21/2019 2 User Centered System Design .. • 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, and the process produces a specification as an important by product – The customer and designer are in constant communication during the entire process Participatory Design • Problem – Intuitions wrong – Interviews etc. not precise – Designer cannot know the user sufficiently well to answer all issues that come up during the design • Solution – Designers should have access to representative users – END users, not their managers or union reps! The user is just like me Participatory Design . • Users are 1st class members in the design process – Active collaborators vs passive participants • Users considered subject matter experts – Know all about the work context • Design is 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 – Greater buy-in for the system often results Participatory Design … • Down side – 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 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,… 9/21/2019 3 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 • Important to have visuals and/or demos – People react far differently with verbal explanations – This is why prototypes are critical Sketching and Prototyping • Sketches / low / medium / high fidelity prototypes – As investment in design increases (red arrow), so does the formality of the criteria whereby concepts are reviewed or accepted • See next slide! • From design to evaluation – Similarly, interface design (idea generation) progresses to usability testing (idea debugging and refinement) From Design for the Wild, Bill Buxton (in press) with permission Sketching and Prototyping . From Design for the Wild, Bill Buxton (in press) with permission 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 Designs 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 Prototypes • 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 9/21/2019 4 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 Call Help Another Sketche Example 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 From Design for the Wild, Bill Buxton (in press) with permission The Attributes of Sketches . • Constrained resolution – Doesn’t inhibit 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 • i.e., they are the catalyst to conversation and interaction From Design for the Wild, Bill Buxton (in press) with permission 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, www.animaart.com/Cellar/disneyart/90robin%20storyboard.jpg.html From www.michaelborkowski.com/storyboards/images/big_bigguy1.gif note how each scene in this storyboard is annotated 9/21/2019 5 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 From Design for the Wild, Bill Buxton (in press) with permission Tutorials as Storyboards • A step by step storyboard walkthrough with detailed explanations • Written in advance of the system implementation • Also serves as an interface specification for programmers Apple’s Tutorial Guide to the Macintosh Finder Tutorials as Storyboards . Apple’s Tutorial Guide to the Macintosh Finder Pictive • Pictive means “plastic interface for collaborative technology initiatives through video exploration” • 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! 9/21/2019 6 Pictive . • Can pre-make paper interface components buttons menu alert box combo box tabs entries list box Medium Fidelity Prototypes • Prototyping with a computer – Simulate some but not all features of the interface – Engaging for end users • Purpose – Provides sophisticated but limited scenario for the user to try – Can test more subtle design issues • Dangers – User’s reactions often “in the small” – Users reluctant to challenge designer – Users reluctant to touch the design – Managementmay think its real! Limiting Prototype Functionality • vertical prototypes – includes in-depth functionality for only a few selected features – common 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. Integrating prototypes and products • Throw-away – prototype only serves to elicit user reaction – creating prototype must be rapid, otherwise too expensive • Incremental – product built as separate components (modules) – each component prototyped & tested, then added to the final system • Evolutionary – prototype altered to incorporate design changes – eventually becomes the final product Painting/drawing packages • Draw each storyboard scene on computer – Very thin horizontal prototype – Does not capture the interaction “feel” Control panel for pump 2 coolant flow 45 % retardant 20% speed 100% Control panel for pump 2 coolant flow 0 % retardant 20% speed 100% DANGER! next drawing Shut Down Shut Down (for shut down condition) Control panel for pump 2 coolant flow 45 % retardant 20% speed 100% Shut Down Scripted Simulations • Create storyboard with media tools – scene transition activated by simple user inputs – a simple vertical prototype • 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 9/21/2019 7 Interface Builders • Design tools for laying out common widgets • Excellent for showing look and feel – a broader horizontal prototype – but constrained to widget library • Vertical functionality added selectively – Through programming 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 9/21/2019 8 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 sees The wizard Speech Computer Dear Henry Dear Henry From Gould, Conti & Hovanvecz, Comm ACM 26(4) 1983. 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 – Scripted simulations, Wizard of Oz Articulate: •who users are •their key tasks User and task descriptions Goals: Methods: Products: Brainstorm designs Task centered system design Participatory design User- centered design Evaluate tasks Psychology of everyday things User involvement Representation & metaphors low fidelity prototyping methods Throw-away paper prototypes Participatory interaction Task scenario walk- through Refined designs Graphical screen design Interface guidelines Style guides high fidelity prototyping methods Testable prototypes Usability testing Heuristic evaluation Completed designs Alpha/beta systems or complete specification Field testing Interface Design and Usability Engineering Questions Acknowledgements • Special Thanks to Prof. Jiri Sochor