Introduction to Prototyping

Slides:



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

Design, prototyping and construction
Design, prototyping and construction
Prototyping: What? Why? and How? Emma J. Rose UW Technical Communication.
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.
Human Computer Interaction
DESIGN, PROTOTYPING and CONSTRUCTION
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.
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.
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.
Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces
Design, prototyping and construction Readings: ID-book, Chap. 11 (through 11.3) Also, Prototyping for Tiny Fingers
Introduction to Interactive Media 02. The Interactive Media Development Process.
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.
HCI 특론 (2010 Spring) Low-fi Prototyping. 2 Interface Hall of Shame or Fame? Amtrak Web Site.
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,
CSCD 487/587 Human Computer Interface Winter 2013 Lecture 17 Prototypes and Design.
1 Lecture 6 (Ref. Chapter 8) Design, prototyping and construction.
CENG 394 Introduction to Human-Computer Interaction
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.
Computer Science Department California Polytechnic State University San Luis Obispo, CA, U.S.A. Franz J. Kurfess CPE/CSC 484: User-Centered Design and.
1 Lecture 16 Prototyping Software Engineering. 2 Outline Definitions Uses of prototyping in the design process Prototyping approaches Prototyping “technologies”
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.
AVI/Psych 358/IE 340: Human Factors Prototyping October 10-13, 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.
University of Washington HCDE 518 & INDE 545 Lo-Fidelity Prototyping HCDE 518 & INDE 545 Winter 2012 With credit to Jake Wobbrock, Dave Hendry, Andy Ko,
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.
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.
©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.
Requirements gathering Storyboarding Prototyping
Design, prototyping and construction(Chapter 11).
Prototyping Creation of concrete but partial implementations of a system design to explore usability issues.
©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
CS:2520 Human-Computer Interaction. Fall 2016.
Software Engineering D7025E
Planning Interactive Multimedia
Human Computer Interaction Slide 1
User-centred system design process
Prototyping & Design CS 352.
Prototyping CPSC 481: HCI I Fall 2014
Design and Prototyping, Part 2
Wrapping up prototyping
Prototyping.
Recall The Team Skills Analyzing the Problem (with 5 steps)
Prototyping.
Design, prototyping and construction
User Interface Prototyping & Interaction Design
Chapter 11 Design, prototyping and construction 1.
Rapid Prototyping Sketches, Storyboards, Mock-Ups and Scenarios
Prototype using PowerPoint
DESIGN, PROTOTYPING and CONSTRUCTION
Design, prototyping and construction
Design, prototyping and construction
COMP444 Human Computer Interaction Prototyping
Presentation transcript:

Introduction to Prototyping

Objectives for today Learn about design methods, specifically LoFi (paper) prototyping

Interaction Design Prototypes May consist of … a series of screen sketches a storyboard, i.e. a cartoon-like series of scenes a Powerpoint slide show a video simulating the use of a system a lump of wood (e.g. a handheld device) a cardboard mock-up a piece of software with limited functionality written in the target language or in another language

Why prototype? Evaluation and feedback are central to interaction design Stakeholders can see, hold, interact with a prototype more easily than a document or a drawing Team members can communicate effectively You can test out ideas for yourself It encourages reflection: very important aspect of design Prototypes answer questions, and support designers in choosing between alternatives

What to prototype? 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… http://www.snyderconsulting.net/us-paper.pdf http://www.uie.com/articles/prototyping_tips/

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

Prototyping Exercise #1 By yourself Sketch an interface for the following device An automated teller machine That also sells postage stamps “Sells” rolls of coins And converts Euros, Canadian Dollars, British Pounds, and Mexican Pesos into US Dollars

Next Steps Project Next class Paper prototype due in one week More on prototyping and design