User Centered Design and Prototyping

Slides:



Advertisements
Similar presentations
Design, prototyping and construction
Advertisements

Saul Greenberg Storyboarding –a series of key frames originally from film; used to get the idea of a scene snapshots of the interface at particular points.
Rapid Prototyping Dimensions and terminology Non-computer methods
ISE554 Human Computer Interaction Design 2.3 Principled Methods for Design.
Reference Prof. Saul Greenberg, University of Calgary, notes and articles.
Human Computer Interaction
Saul Greenberg User Centered Design Why User Centered Design is important Approaches to User Centered Design.
CPSC 481 Foundations and Principles of Human Computer Interaction
Department of Computer Science
Prototyping Techniques
Saul Greenberg Prototyping techniques Learning different techniques for rapid prototype development.
Prototyping. Introduction Low-fidelity prototyping High-fidelity prototyping Compromises in prototyping From design to implementation.
Saul Greenberg CPSC 481 Foundations and Principles of Human Computer Interaction James Tam.
Concepts and Prototypes
ISE554 Human Computer Interaction Design 2.2 User Interface Design.
James Tam User Centered Design Why User Centered Design is important Approaches to User Centered Design.
1 CS 544 Prototyping Low and Medium Fi Prototyping Acknowledgement: Some of the material in these lectures is based on material prepared for similar courses.
Saul Greenberg CPSC 481 Foundations and Principles of Human Computer Interaction James Tam.
Graphical User Interfaces Design and usability Saul Greenberg Professor University of Calgary Slide deck by Saul Greenberg. Permission is granted to use.
Foundations and Principles of Human Computer Interaction Slide deck by Saul Greenberg. Permission is granted to use this for non-commercial purposes as.
ISP 666 Week 6 Prototyping. Design a Solution From task to system From abstract to concrete Task Models UI Presentation evaluation Conceptual Model System.
COMP5047 – Design Prototyping and storyboards Judy Kay CHAI: Computer human adapted interaction research group School of Information Technologies Acknowledgement:
James Tam User Centered Design And Prototyping Why User Centered Design is important Approaches to User Centered Design Rapid prototype techniques.
User Centered Design and Prototyping
© Lethbridge/Laganière 2001 Chapter 7: Focusing on Users and Their Tasks1 7.1 User Centred Design (UCD) Software development should focus on the needs.
James Tam CPSC 481 Foundations and Principles of Human Computer Interaction James Tam.
SE 555 Software Requirements & Specification 1 SE 555 Software Requirements & Specification Prototyping.
Objectives By the end of class, you will be able to… Explain why prototyping is an important phase of design. Create and test paper prototypes. Explain.
Graphical Screen Design Part 1: Contrast, Repetition, Alignment, Proximity Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada.
Gary MarsdenSlide 1University of Cape Town Human-Computer Interaction - 8 Prototyping Gary Marsden ( ) July 2002.
What is a sketch? Chapter 1.2 addendum Sketching User Experiences: The Workbook.
Design, prototyping and construction CSSE371 Steve Chenoweth and Chandan Rupakheti (Chapter 11- Interaction Design Text)
CPSC User Centered Design and Prototyping Why user-centered design is important Prototyping User centered design Prototyping methods.
Fall 2002CS/PSY Rapid Prototyping Sketches, Storyboards, Mock-Ups and Scenarios Agenda Dimensions and terminology Non-computer methods Computer methods.
Object-Oriented Software Engineering Practical Software Development using UML and Java Chapter 7: Focusing on Users and Their Tasks.
Prototyping Universidad de Costa Rica Posgrado en Computación e Informática Diseño de interfaz humano-computador.
류 현 정류 현 정 User Interface Design Design, prototyping and construction.
Wizard of Oz Prototyping + Making Video Scenarios HCC 729 4/17/14.
Chapter 9 Prototyping. Objectives  Describe the basic terminology of prototyping  Describe the role and techniques of prototyping  Enable you to produce.
Usability Engineering John Kelleher IT Sligo Material Source: J. Nielsen Usability Engineering, 1993, AP.
Prototyping 1. Design Document How express your design ideas. How express your design ideas. Key notions Key notions Cheap, FastCheap, Fast Flexibility.
1 Human Computer Interaction Week 7 Prototyping. 2 Introduction Prototyping is a design technique where users can be involved in testing design ideas.
User Interfaces 4 BTECH: IT WIKI PAGE:
Mario Čagalj University of Split 2014/15. Human-Computer Interaction (HCI)
Prototyping. REVIEW : Why a prototype? Helps with: –Screen layouts and information display –Work flow, task design –Technical issues –Difficult, controversial,
Acknowledgements: Most of this course is based on the excellent course offered by Prof. Kellogg Booth at the British Columbia University, Vancouver, Canada.
Z556 Systems Analysis & Design Session 10 ILS Z556 1.
Prototyping. Objectives By the end of class, you will be able to… Explain why prototyping is an important phase of design. Create and test paper prototypes.
Overview Prototyping Construction Conceptual design Physical design Generating prototypes Tool support.
What is a sketch? 1 Concepts (and selected visuals) from this slide deck are based on: -Buxton, B. (2007) Sketching User Experiences: Getting the Design.
Sketching and Prototyping Sketches / low / medium / high fidelity prototypes – as investment in design increases (red arrow), so does the formality of.
Design, prototyping and construction(Chapter 11).
Prototyping Creation of concrete but partial implementations of a system design to explore usability issues.
James Tam User Centered Design And Prototyping Rapid prototyping techniques Why User Centered Design is important Approaches to User Centered Design.
CEN3722 Human Computer Interaction Prototyping Dr. Ron Eaglin.
Digital Media & Interaction Design LECTURE 4+5. Lecture 4+5 Draw requirement + Prototyping.
Lecture 2 Supplement - Prototyping
Prototyping 2 CPSC 481: HCI I Fall 2014
© MIT Students © Microsoft © MIT Students.
Sketching and Prototyping
Task-Centered Walkthrough
Design.
Wrapping up prototyping
Cognitive Walkthrough
Prototyping.
Design, prototyping and construction
Chapter 11 Design, prototyping and construction 1.
Rapid Prototyping Sketches, Storyboards, Mock-Ups and Scenarios
Interface Design and Usability
Design, prototyping and construction
Presentation transcript:

User Centered Design and Prototyping Why User Centered Design is important How Prototyping helps User Centered Design

System Centered Design

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

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 the domain of work or play in which people are engaged and in which they interact with computers, and programming computers to facilitate human action. ... Three 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 byproduct The customer and designer are in constant communication during the entire process Denning and Dargan, 1996 From Denning and Dargan, p111 in Winograd, Ed., Bringing Design to Software, Addison Wesley

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 The user is just like me Solution designers should have access to pool of representative users END users, not their managers or union reps!

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

Participatory Design 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 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! 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

Prototyping Early design Late design Low fidelity paper prototypes Medium fidelity prototypes High fidelity prototypes / restricted systems Working systems Brainstorm different representations Choose a representation Rough out interface style Task centered walkthrough and redesign Fine tune interface, screen design Heuristic evaluation and redesign Usability testing and redesign Limited field testing Alpha/Beta tests Late design

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 Computer Telephone Last Name: First Name: Phone: Place Call Help

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

Storyboard of a computer based telephone Computer Telephone Last Name: First Name: Phone: Place Call Help Help-> Return Help Screen You can enter either the person's name or their number. Then hit the place button to call them Call by name-> Computer Telephone Last Name: Greenberg First Name: Phone: Place Call Help Establishing connection-> Computer Telephone Last Name: Greenberg First Name: Phone: Place Call Help Dialling.... Cancel Call connected... Computer Telephone Last Name: Greenberg First Name: Phone: Place Call Help Connected Hang up Call completed...

Low fidelity prototypes Pictive “plastic interface for collaborative technology initiatives through video exploration” design is multiple layers of sticky notes and plastic overlays different sized stickies represent icons, menus, windows etc. interaction demonstrated by manipulating notes contents changed quickly by user/designer with pen and note repositioning session is videotaped for later analysis usually end up with mess of paper and plastic!

Low fidelity prototypes Pictive can create pre-made interface components on paper eg, these empty widgets were created in visual basic and printed out: buttons menu alert box combo box list box tabs entries

Low fidelity prototypes Tutorials and manuals write them in advance of the system what are they? tutorial for step by step description of an interaction an interface “walk-through” with directions 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: interface functionality match to task

From Apple’s Tutorial Guide to the Macintosh Finder

From Apple’s Tutorial Guide to the Macintosh Finder

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 vertical prototypes includes in-depth functionality for only a few selected features common design ideas can be tested in depth horizontal prototypes 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 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 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”

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 coolant flow 45 % retardant 20% speed 100% next drawing Shut Down (on mouse press over button) Control panel for pump 2 coolant flow 0 % retardant 20% speed 100% DANGER! Shut Down

Return Help Screen You can enter either the person's name or their number. Then hit the place button to call them Computer Telephone Last Name: Greenberg First Name: Phone: Place Call Help Dialling.... Cancel Computer Telephone Last Name: Greenberg First Name: Phone: Place Call Help Connected Hang up Computer Telephone Last Name: First Name: Phone: Place Call Help Computer Telephone Last Name: Greenberg First Name: Phone: Place Call Help Computer Telephone Last Name: First Name: Phone: Place Call Help Computer Telephone Last Name: First Name: Phone: Place Call Help 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) The Wizard What the user sees

Medium fidelity prototypes Wizard of Oz human simulates the system’s intelligence and interacts with user uses real or 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 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 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, even harder to change!

What you now know 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

Interface Design and Usability Engineering Articulate: who users are their key tasks Brainstorm designs Refined designs Completed designs Goals: Task centered system design Participatory design User-centered design Psychology of everyday things User involvement Representation & metaphors Graphical screen design Interface guidelines Style guides Participatory interaction Task scenario walk- through Evaluate tasks Usability testing Heuristic evaluation Field testing Methods: low fidelity prototyping methods high fidelity prototyping methods Products: User and task descriptions Throw-away paper prototypes Testable prototypes Alpha/beta systems or complete specification