CEN3722 Human Computer Interaction Prototyping Dr. Ron Eaglin.

Slides:



Advertisements
Similar presentations
Chapter 11 Design, prototyping and construction 1.
Advertisements

Design, prototyping and construction
Rapid Prototyping Dimensions and terminology Non-computer methods
Prototypes Low-fidelity prototypes design.org/encyclopedia/contextual_design.html Heim, Chapter 5.3 Lecture 9 Physical Design.
AN OVERVIEW BY JAMIE STARKE The Role of Prototyping.
Human Computer Interaction
Prototyping Techniques
SIMS 202 Information Organization and Retrieval Prof. Marti Hearst and Prof. Ray Larson UC Berkeley SIMS Tues/Thurs 9:30-11:00am Fall 2000.
SE 555 Software Requirements & Specification 1 SE 555 Software Requirements & Specification Prototyping.
SDLC. Information Systems Development Terms SDLC - the development method used by most organizations today for large, complex systems Systems Analysts.
Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise.
1. Learning Outcomes At the end of this lecture, you should be able to: –Define the term “Usability Engineering” –Describe the various steps involved.
Sofia Carlander Kinoshita Laboratory 2004/2005
1 Version /05/2004 © 2004 Robert Oshana Requirements Engineering Prototyping.
Tietojärjestelmien peruskurssi Systeemisuunnittelu ja prototyyppimenetelmä Malin Brännback.
Gary MarsdenSlide 1University of Cape Town Human-Computer Interaction - 8 Prototyping Gary Marsden ( ) July 2002.
Computer –the machine the program runs on –often split between clients & servers Human-Computer Interaction (HCI) Human –the end-user of a program –the.
CS 360 Lecture 3.  The software process is a structured set of activities required to develop a software system.  Fundamental Assumption:  Good software.
Design, prototyping and construction CSSE371 Steve Chenoweth and Chandan Rupakheti (Chapter 11- Interaction Design Text)
Heuristic Evaluation and Discount Usability Engineering Taken from the writings of Jakob Nielsen – inventor of both.
1 Lecture 16 Prototyping Software Engineering. 2 Outline Definitions Uses of prototyping in the design process Prototyping approaches Prototyping “technologies”
Prof. James A. Landay University of Washington Autumn 2008 Video Prototyping October 14, 2008.
Prototyping. What is a prototype? In other design fields a prototype is a small- scale model: a miniature car a miniature building or town.
Chapter 9 Prototyping. Objectives  Describe the basic terminology of prototyping  Describe the role and techniques of prototyping  Enable you to produce.
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:
Prototyping. REVIEW : Why a prototype? Helps with: –Screen layouts and information display –Work flow, task design –Technical issues –Difficult, controversial,
Requirements specification Why is this the first major stage of software development? –Need to understand what customer wants first Goal of requirements.
© 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 Prototyping.
Overview Prototyping Construction Conceptual design Physical design Generating prototypes Tool support.
Software Development Process CS 360 Lecture 3. Software Process The software process is a structured set of activities required to develop a software.
Design, prototyping and construction(Chapter 11).
Prof. James A. Landay University of Washington Winter 2007 Video Prototyping January 22, 2007.
SE 431 Human Computer Interactions Jamal Nasir. How to design & build good UIs UI Development process Usability goals User-centered design Design discovery.
CEN3722 Human Computer Interaction Overview of HCI Dr. Ron Eaglin.
1 User testing approaches: Practical techniques toward a more usable website Arc Worldwide 1.
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
Sampath Jayarathna Cal Poly Pomona
CMPE 280 Web UI Design and Development August 29 Class Meeting
User-centred system design process
INF385G: Topic Discussion Huang, S. C.
Human-Computer Interaction
Prototyping.
Use Case Model.
Unified Modeling Language
Usability engineering
Iterative design and prototyping
Wrapping up prototyping
Prototyping.
Software Process Models
SOFTWARE ENGINEERING PRESENTATION
HCI in the software process
Prototyping.
Paper Prototyping.
Design, prototyping and construction
User Interface Prototyping & Interaction Design
Chapter 11 Design, prototyping and construction 1.
UNIT 3 CHAPTER 1 LESSON 4 Using Simple Commands.
The Role of Prototyping
Rapid Prototyping Sketches, Storyboards, Mock-Ups and Scenarios
Software Engineering D7025E
Mockups and Prototypes
HCI in the software process
HCI in the software process
COMP444 Human Computer Interaction Usability Engineering
User-centered approaches to interaction design
Human Computer Interaction Lecture 14 HCI in Software Process
Design, prototyping and construction
Presentation transcript:

CEN3722 Human Computer Interaction Prototyping Dr. Ron Eaglin

Objectives Define the term prototype Describe why prototypes are important in ensuring usability Define the terms: Participatory design Parallel design Define the “PICTIVE” prototyping method, and be able to demonstrate its use in prototyping

Objectives Describe several ways of speeding up the prototyping process Describe the differences between horizontal and vertical prototypes Define the term scenario, and describe how scenarios can be used in prototyping

Design Examples

Prototyping Also called “Design Mockups” Solves problems of the waterfall “traditional” software engineering method. Users do not see program/product until end of project Difficult to accommodate interface/functional changes at that stage

Prototypes Do not have to have full functionality of the system Do not have to cover entire scope of software (just parts) Does not have performance constraints of system Can allow users to explore and test (user testing) Saves money (quick design turnaround) Allows for alternative designs to be presented Allows for fixes before back-end code is written USER CENTRIC

Sketch based designs

Behaviors modeled

Fidelity in Prototyping Fidelity refers to the level of detail High fidelity prototypes look like the final product Low fidelity Paper sketches with many details missing

Parallel Prototyping Two, three, or four designers working independently on initial prototype Goal is to explore different design alternatives before settling on initial prototype Initial parallel designs should take no longer than a few hours to two days Allows for better designs based on alternatives Can use ideas from each of the parallel design (not stuck on one alternative)

Diversified Parallel Design Multiple designers work on different parts of the system Inexpensive way of exploring overall design space Many ideas will not be implemented – cost of “throw-away” designs is low.

Participatory Design Users bring up questions designers miss It is impossible to know everything about your users It is best if users can be involved in the design process Users are not designers – should not expect them to come up with designs Users are good at reacting to design options Should be presented prototypes and get feedback

Vertical Prototypes Reduced number of features Narrow system with depth of functionality for only a few selected features Only limited parts of the system available These parts are tested in depth

Horizontal Prototypes Reduced level of functionality Full surface layer (appears to be a full featured system) No underlying functionality

Vertical vs. Horizontal Prototypes Functionality Different Features Full System Vertical Horizontal Scenario Nielsen, 1993

Iterative Design Design Prototype Evaluate

Speeding up Prototypes Reduce emphasis on efficiency of implementation Disk Space, Speed, Memory – premature optimization Accept less reliable code No error checking, no test suites, reduced code standards Simplified algorithms Less robust, don’t handle special cases (like leap year)

Speeding up Prototyping Wizard of Oz Human behind the scenes to handle tasks that were not coded into the system Different Target Platform Prototype in different language or platform that target (hypercard, VB) Use low-fidelity media Use scanned images rather than video Use fake data or dummy content Paper mock-ups

PICTIVE (Muller, BellCore) Plastic Interface for Collaborative Technology InitiatiVEs Tool for creating prototypes Involves paper mockups (low-fi prototypes) Gets people with diverse experience involved Design with realization that it will be extensively modified in real-time by users. Design: Run it by users : Get feedback : Modify

PICTIVE Method Post-It NotesIndex CardsColored Pens

PICTIVE Method

Set forth a task scenario Implement the functions in that scenario Set a deadline (30 minutes) Everything must be implemented on paper Forces you to think about design interface issues

PICTIVE Implement models, not illustrations Make something easy to control by the person playing the computer. Anything that moves, changes appearance, or comes and goes should be on it’s own stock (menus = sticky notes, dialog boxes = note cards, etc.) Don’t worry about being fancy or pretty. Don’t even use a straight edge for first try. Testing with participants, that is, users

PICTIVE 30 minutes for design 10 minutes for user testing Same task scenario 10 minutes for modification 5 minutes for user testing Same task scenario

Scenarios Ultimate minimalist prototype Describes a single interaction session No flexibility for the user. Combine elements of horizontal and vertical prototype Users can’t interact with real data: horizontal Users can’t move freely throughout system: vertical

Scenarios Ultimate minimalist prototype Describes a single interaction session No flexibility for the user. Combine elements of horizontal and vertical prototype Users can’t interact with real data: horizontal Users can’t move freely throughout system: vertical

Scenario A scenario is an encapsulated description of: An individual user… using a specific set of computer facilities… to achieve a specific outcome… under specific circumstances… over a certain time interval

Scenario - ATM Example User inserts bank card. Works correctly no matter what side is up. ATM asks user for 4 digit PIN. User does so using standard numeric keypad User presented with four options: Withdraw $100 Withdraw other amounts Make a deposit Other transactions

ATM Scenario User presses button for “Withdraw $100” Machine pays out $$$, deducting it from user’s account. Machine returns bank card to customer Problems? Other amounts? Closure…

Scenarios Two main uses Used during design as a way of expressing and understanding the way users will eventually interact with the future system Used during early evaluation to get user feedback without the expense of constructing a running prototype

Objectives Define the term prototype Describe why prototypes are important in ensuring usability Define the terms: Participatory design Parallel design Define the “PICTIVE” prototyping method, and be able to demonstrate its use in prototyping

Objectives Describe several ways of speeding up the prototyping process Describe the differences between horizontal and vertical prototypes Define the term scenario, and describe how scenarios can be used in prototyping