Prototyping. REVIEW : Why a prototype? Helps with: –Screen layouts and information display –Work flow, task design –Technical issues –Difficult, controversial,

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.
Prototyping JTB October 2004
ISE554 Human Computer Interaction Design 2.3 Principled Methods for Design.
Human Computer Interaction
DESIGN, PROTOTYPING and CONSTRUCTION
CPSC 481 Foundations and Principles of Human Computer Interaction
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.
Concepts and Prototypes
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.
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.
Prototyping By Greg Rogers. Agenda For Today  What is a prototype  Why prototype  What to prototype.
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.
Design, prototyping and construction. What is a prototype? In other design fields a prototype is a small- scale model: a miniature car a miniature building.
James Tam CPSC 481 Foundations and Principles of Human Computer Interaction James Tam.
From Scenarios to Paper Prototypes Chapter 6 of About Face Defining requirements Defining the interaction framework.
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.
Design, prototyping and construction Readings: ID-book, Chap. 11 (through 11.3) Also, Prototyping for Tiny Fingers
Human Computer Interaction & Usability Prototyping Design & Prototyping HCI Prototyping.
Gary MarsdenSlide 1University of Cape Town Human-Computer Interaction - 8 Prototyping Gary Marsden ( ) July 2002.
Guidelines and Prototypes CS774 Human Computer Interaction Spring 2004.
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,
1 Lecture 6 (Ref. Chapter 8) Design, prototyping and construction.
CENG 394 Introduction to Human-Computer Interaction
Merja & Pauli Rapid prototyping & other stuff.
COMP5047 – Design Prototyping and storyboards Judy Kay CHAI: Computer human adapted interaction research group School of Information Technologies Acknowledgements:
HCI – Prototyping. Why Prototype?  Prototyping is a well understood and used technique in design engineering where products are tested via a model prototype.
Prototyping Universidad de Costa Rica Posgrado en Computación e Informática Diseño de interfaz humano-computador.
Prototyping & User Manuals “It is often said that users can't tell you what they want, but when they see something and get to use it, they soon know what.
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.
Prototyping. A software requirements prototype is a mock-up or partial implementation of a software system – Helps developers, users, and customers better.
Begin Class with More Studio. Introduction to Prototyping.
©2001 Southern Illinois University, Edwardsville All rights reserved. Today Wednesday Running A Paper Prototyping Session Paper Prototyping Video: Paper.
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).
James Tam User Centered Design And Prototyping Rapid prototyping techniques Why User Centered Design is important Approaches to User Centered Design.
©2001 Southern Illinois University, Edwardsville All rights reserved. Today Tuesday CS 321 Human-Computer Interaction Paper Prototyping Video: Paper Prototyping.
Digital Media & Interaction Design LECTURE 4+5. Lecture 4+5 Draw requirement + Prototyping.
Design, prototyping and construction
Lecture 2 Supplement - Prototyping
Sampath Jayarathna Cal Poly Pomona
Sketching and Prototyping
Prototyping & Design CS 352.
Design and Prototyping, Part 2
Wrapping up prototyping
Prototyping.
Introduction to Prototyping
Prototyping.
Design, prototyping and construction
Chapter 11 Design, prototyping and construction 1.
DESIGN, PROTOTYPING and CONSTRUCTION
Design, prototyping and construction
Interface Design and Usability
Design, prototyping and construction
Presentation transcript:

Prototyping

REVIEW : Why a prototype? Helps with: –Screen layouts and information display –Work flow, task design –Technical issues –Difficult, controversial, critical areas

Low-fidelity (LoFi) Prototypes Quick and cheap to make, easy to change Use a medium which is unlike the final medium, e.g. paper, cardboard Examples sketches of screens, task sequences, etc ‘Post-it’ notes storyboards ‘Wizard-of-Oz’

Surprisingly… In many circumstances, LoFi prototypes work better than HiFi prototypes Why? The goal is to try out lots of ideas fast, early in development (when changes are cheap) –“To get a good idea, get lots of ideas” HiFi prototypes take too long to develop

Surprisingly… Testers focus on superficial issues rather than content Developers resist changes HiFi prototypes can set unrealistic expectations A single bug in a HiFi prototype can halt testing Downside of LoFi prototypes: hard to envision course of an interaction –Storyboards help

Need a “toolkit” for making LoFi prototypes Construction paper Note cards Post-it notes Scissors Glue, tape Lots of paper copies of standard GUI elements: text fields, buttons, check boxes, radio buttons, labels, etc.

For More Information…

Let’s go to the Film First 5 chapters of Nielsen DVD

Storyboards Series of sketches showing how a user might progress through a task using an interface Often used with scenarios, bringing more detail Make it easier to envision the progress of the interaction

Medium fidelity prototypes Now move to the computer (e.g., use Visual Basic) –Simulate some but not all features of the intended system  more engaging for users Purpose –Provide interactive (but limited) scenario for user to try out; gets around limits of LoFi prototypes on testing flow of interaction –May offer a development path to running system

How do you limit functionality? Horizontal prototypes –Entire UI is implemented, but no underlying functionality Vertical prototypes –Include in-depth functionality for a few features –Common design ideas can be tested in depth Scenario-based –Scripts of particular uses of the system; no deviations Wizard of Oz – human simulates the intelligence

High fidelity prototypes Basically complete running system But may not be: –In a suitable language for delivery –Efficient –Robust –Well-coded “Build one to throw away”… a common research methodology

Recall benefits of LoFi Prototypes LoFi prototypes are very quick to develop –Early in the process when changes are cheap Users focus on content instead of superficial issues Developers aren’t yet invested, thus are willing to change Don’t set unrealistic expectations No bugs to halt testing

The Prototyping Spectrum 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 LoFi (paper) prototypes Medium Fidelity prototypes HiFi Prototypes / restricted systems Working system Early design Late design

Next Steps Project –Paper Prototypes due next week