Prototyping Creation of concrete but partial implementations of a system design to explore usability issues.

Slides:



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

Design, prototyping and construction
Chapter 11 Designing the User Interface
Virtual University - Human Computer Interaction 1 © Imran Hussain | UMT Imran Hussain University of Management and Technology (UMT) Lecture 16 HCI PROCESS.
SECOND MIDTERM REVIEW CS 580 Human Computer Interaction.
Alternate Software Development Methodologies
Human Computer Interaction
From requirements to design
James Tam User Centered Design Why User Centered Design is important Approaches to User Centered Design.
SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 24, 2004.
ISP 666 Week 6 Prototyping. Design a Solution From task to system From abstract to concrete Task Models UI Presentation evaluation Conceptual Model System.
SIMS 213: User Interface Design & Development Marti Hearst Thurs, Feb 20, 2003.
SIMS 202 Information Organization and Retrieval Prof. Marti Hearst and Prof. Ray Larson UC Berkeley SIMS Tues/Thurs 9:30-11:00am Fall 2000.
SIMS 213: User Interface Design & Development Marti Hearst Thurs, Feb 21, 2002.
Course Wrap-Up IS 485, Professor Matt Thatcher. 2 C.J. Minard ( )
2/23/991 Low-fidelity Prototyping & Storyboarding SIMS 213, Spring ‘99 Professor James Landay, EECS Dept. February 23, 1999.
James Tam CPSC 481 Foundations and Principles of Human Computer Interaction James Tam.
Rapid Prototyping Marti Hearst (UCB SIMS) SIMS 213, UI Design & Development February 25, 1999.
Introduction to HCI Marti Hearst (UCB SIMS) SIMS 213, UI Design & Development January 21, 1999.
What is a prototype? A prototype is a small scale model of your larger product. Can be a physical object, or a simple software program. Many physical.
Design, prototyping and construction. Overview Prototyping and construction Conceptual design Physical design Tool support.
Chapter 13: Designing the User Interface
CS 3724: Introduction to Human Computer Interaction Chris North Jason Lee Szu-Chia Lu.
Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise.
Sofia Carlander Kinoshita Laboratory 2004/2005
Human Computer Interaction & Usability Prototyping Design & Prototyping HCI Prototyping.
Envisionment Ebba Thora Hvannberg. Objective To use different methods to envision design problems and different solutions Understand how you can use scenarios.
14 Chapter 11: Designing the User Interface. 14 Systems Analysis and Design in a Changing World, 3rd Edition 2 Identifying and Classifying Inputs and.
Low-fi Prototyping. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation2 Hall of Fame or Shame? Password dialog in Eudora Pro for.
1 Low-fidelity Prototyping. 2 Interface Hall of Shame or Fame? PowerBuilder List of objects with associated properties.
1 DENIM: An Informal Web Site Design Tool Inspired by Observations of Practice CS 376 – Research Topics in HCI 11/01/2005 Tony Tulathimutte.
HCI 특론 (2010 Spring) Low-fi Prototyping. 2 Interface Hall of Shame or Fame? Amtrak Web Site.
Prof. James A. Landay Computer Science Department Stanford University Spring 2015 CS 377 E : ENGELBART ’ S UNFINISHED LEGACY : DESIGNING SOLUTIONS TO GLOBAL.
Overview Prototyping and construction Conceptual design
HCI Prototyping Chapter 6 Prototyping. Learning Outcomes At the end of this lecture, you should be able to: –Define the term “prototyping” –Explain the.
Design, prototyping and construction CSSE371 Steve Chenoweth and Chandan Rupakheti (Chapter 11- Interaction Design Text)
UML & Prototyping. What is a prototype? A prototype is a small-scale model. It can be (among other things): a series of screen sketches a storyboard,
June 2004 User Interface Design, Prototyping, and Evaluation 1 Outline Low-fi prototyping Wizard of Oz technique Informal UI prototyping tools Hi-fi prototyping.
Prof. James A. Landay University of Washington Autumn 2008 Low-fi Prototyping November 4, 2008.
SBD: Interaction Design Chris North cs3724: HCI. Problem scenarios summative evaluation Information scenarios claims about current practice analysis of.
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.
Prototyping What prototyping is The benefits of prototyping Low-fidelity and high-fidelity prototypes, and the advantages of each How to build paper prototypes.
1 Human Computer Interaction Week 7 Prototyping. 2 Introduction Prototyping is a design technique where users can be involved in testing design ideas.
SBD: Analyzing Requirements Chris North CS 3724: HCI.
Prototyping. REVIEW : Why a prototype? Helps with: –Screen layouts and information display –Work flow, task design –Technical issues –Difficult, controversial,
Begin Class with More Studio. Introduction to Prototyping.
SBD: Information Design
SILKWeb: A Sketching Tool for Informal Web Page Design Mark Newman, James Landay, Francis Li, Kalpana Joshi July 9, 1998 C&C Research Labs, NEC
Low-fidelity Prototyping. Outline Low-fidelity prototyping Wizard of OZ technique Informal user interfaces Sketching user interfaces electronically Informal.
Overview Prototyping Construction Conceptual design Physical design Generating prototypes Tool support.
HCI 특론 (2007 Fall) Low-fi Prototyping. 2 Hall of Fame or Shame? Password dialog in Eudora Pro for Mac.
Low-fi Prototyping. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation2 Hall of Fame or Shame? Password dialog in Eudora Pro for.
Design, prototyping and construction(Chapter 11).
Prototyping Creation of concrete but partial implementations of a system design to explore usability issues.
CS 3724: Introduction to Human Computer Interaction Chris North Regis Kopper.
CS 3724 Usability Engineering Section 2 CRN MW 2:30-3: McB.
CS 3724 Introduction to Human Computer Interaction Section 1 CRN TuTh 5:00-6: McB.
Prototyping & Design CS 352.
Prototyping.
Introduction to Prototyping
Low-fidelity Prototyping
Prototyping.
Design, prototyping and construction
Chapter 11 Design, prototyping and construction 1.
Low-fidelity Prototyping
DESIGN, PROTOTYPING and CONSTRUCTION
Design, prototyping and construction
COMP444 Human Computer Interaction Prototyping
Presentation transcript:

Prototyping Creation of concrete but partial implementations of a system design to explore usability issues

Problem scenarios summative evaluation Information scenarios claims about current practice analysis of stakeholders, field studies Usability specifications Activity scenarios Interaction scenarios iterative analysis of usability claims and re-design metaphors, information technology, HCI theory, guidelines formative evaluation DESIGN ANALYZE PROTOTYPE & EVALUATE

Goals of Prototyping Prototyping enables evaluation, happens throughout Exploring requirements –Market analysis, participatory design, envisionment Choosing among alternatives –Risky or critical features, go/no-go decisions Empirical usability testing –As early as possible, try out ideas with target users Evolutionary development –May deliberately choose a malleable software platform, building software in incremental, iterative fashion Do scenarios as used in SBD serve as prototypes?

Boehm’s Spiral Model

Some Key Tradeoffs Quality vs premature commitment Special-purpose systems vs scheduling and resource management Realism (e.g. timing, content) vs early availability or throw-away efforts Constant iteration vs radical change and/or re-factoring of a design Dynamic (highly malleable) platforms vs organized, well-structured code base

Prototyping in UE

“Off-the-Shelf” Prototyping Jump-start the design and iteration process –Recruit existing tools and devices –Integrate into approximation of a “system” Example as used in virtual school project –Telephone for audio conferencing –Netmeeting for video conferencing, chat –Web pages for project questions and answers – for interaction with mentors Can be very useful in requirements exploration and in activity-oriented feasibility studies

Prototyping Tools Presentation tools –Paper sketches/printouts –Powerpoint Scripting languages –Tcl/Tk Visual languages –Visual Basic –SILK/Denim frame $d button $d.b –text OK button $d.c –text Cancel pack $d.b $d.c –side left

Prototyping with Powerpoint Create general look-and-feel of interface with essential functionality Generate interface widgets using Visual Basic macros –Available through toolbar that can be turned on –Must set security level to “Low” –Actual control functions can only be tested in “sideshow mode” Supports creation of an output file for testing

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

Why Use Low-fi Prototypes? Traditional methods take too long –Sketches -> prototype -> evaluate -> iterate Can simulate the prototype –Sketches -> evaluate -> iterate –Sketches act as prototypes Designer “plays computer” Other design team members observe & record Kindergarten implementation skills –Allows non-programmers to participate

Hi-fi Prototypes Warp Perceptions of the tester/reviewer? –Formal representation indicates “finished” nature Comments on color, fonts, and alignment Time? –Encourage precision Specifying details takes more time Creativity? –Lose track of the big picture

What is SILK? Sketching Interfaces Like Krazy

Designing Interfaces with SILK 1)Designer sketches ideas rapidly with electronic pad and pen –SILK recognizes widgets –easy editing with gestures 2)Designer or end-user tests interface –widgets behave –specify additional behavior visually 3)Automatically transforms to a “finished” UI

Specifying Behaviors Storyboards –series of rough sketches depicting changes in response to end-user interaction Expresses many common behaviors beforeafter Sequencing behavior between widgets?

SILK Storyboards Copy sketches to storyboard window Draw arrows from objects to screens Switch to run mode to test –SILK changes screens on mouse clicks

Integrating HCI with Software Construction Classic problem in designing from specifications –The “specification-design” gap: a written spec is never enough, always ambiguous, always interpreted –Who does the interpretation, using what knowledge? There are many ways to create tighter linkage –OO analysis and design enable simultaneous attention to user task and software design issues –Early and continued prototyping is essential But, do we want to do this? –Only for projects that allow (welcome) requirement shift, that view design as an inquiry process

Tuesday Midterm Rosson & Carroll Ch 1, 2, 9 –Scenario-based usability engineering –Analyzing requirements –Topics include scenarios, essential parts of a scenario, claims, requirements, defs of activity, info, interaction design Norman Ch 1, 7 –Topics include affordances, conceptual models (design model & user model), mapping, feedback