1 Paper (low-fidelity) Prototypes. 2 When we are designing When we are thinking about design We are visualizing the interface inside our head (imaginary)

Slides:



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

Design, prototyping and construction
Chapter 11 Designing the User Interface
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
Prototyping. Introduction Low-fidelity prototyping High-fidelity prototyping Compromises in prototyping From design to implementation.
Part 2d: Requirements Chapter 2: How to Gather Requirements: Some Techniques to Use Chapter 3: Finding Out about the Users and the Domain Chapter 4: Finding.
ISP 666 Week 6 Prototyping. Design a Solution From task to system From abstract to concrete Task Models UI Presentation evaluation Conceptual Model System.
Paper Prototyping A tool for iterative design Wai Yong Low.
Prototyping Professor: Tapan Parikh TA: Eun Kyoung Choe
SIMS 202 Information Organization and Retrieval Prof. Marti Hearst and Prof. Ray Larson UC Berkeley SIMS Tues/Thurs 9:30-11:00am Fall 2000.
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.
Prototyping Teppo Räisänen
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.
Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise.
Getting Started With Autodesk Inventor Professional 2013 We Will Call It “Inventor”
L1 Sketch Tools Advanced HCI Beryl Plimmer. Agenda What’s the difference between a keyboard and a pencil?
Sofia Carlander Kinoshita Laboratory 2004/2005
Gary MarsdenSlide 1University of Cape Town Human-Computer Interaction - 8 Prototyping Gary Marsden ( ) July 2002.
1 Low-fidelity Prototyping. 2 Interface Hall of Shame or Fame? PowerBuilder List of objects with associated properties.
DMS 546/446 INTERFACE DESIGN AL LARSEN – SPRING 2008 PAPER PROTOTYPING Lecture draws from multiple sources, including: Jakob Nielsen, Shawn Medero (
Computer –the machine the program runs on –often split between clients & servers Human-Computer Interaction (HCI) Human –the end-user of a program –the.
HCI 특론 (2010 Spring) Low-fi Prototyping. 2 Interface Hall of Shame or Fame? Amtrak Web Site.
Prototyping Creation of concrete but partial implementations of a system design to explore usability issues.
Concepts and Prototypes CS584. Concepts (Conceptual Model) Pre-prototype. Explore how to address some aspect, eg: The interface metaphor (eg, desktop,...)
Overview Prototyping and construction Conceptual design
Design, prototyping and construction CSSE371 Steve Chenoweth and Chandan Rupakheti (Chapter 11- Interaction Design Text)
Industrial Design Matthew Kressy Rhode Island School of Design Designturn Inc.
HCI – Prototyping. Why Prototype?  Prototyping is a well understood and used technique in design engineering where products are tested via a model prototype.
Software Engineering Chapter 16 User Interface Design Ku-Yaw Chang Assistant Professor Department of Computer Science and Information.
Chapter 11 An Introduction to Visual Basic 2008 Why Windows and Why Visual Basic How You Develop a Visual Basic Application The Different Versions of Visual.
Prototyping. What is a prototype? In other design fields a prototype is a small- scale model: a miniature car a miniature building or town.
Design 2 (Chapter 5) Conceptual Design Physical Design Evaluation
Prof. James A. Landay Computer Science Department Stanford University Spring 2015 CS 377 E : ENGELBART ’ S UNFINISHED LEGACY : DESIGNING SOLUTIONS TO GLOBAL.
Human-Computer Interaction Lecture 4: Inference-based approaches.
Chapter 11 An Introduction to Visual Basic 2005 Why Windows and Why Visual Basic How You Develop a Visual Basic Application The Different Versions of Visual.
Chapter 9 Prototyping. Objectives  Describe the basic terminology of prototyping  Describe the role and techniques of prototyping  Enable you to produce.
Exploring the Effects of Different Levels of Formality (Beautification) on the Design Process Louise Yeung (MSc student - Psychology) Supervisors: Dr Brenda.
Software Engineering User Interface Design Slide 1 User Interface Design.
1 Human Computer Interaction Week 7 Prototyping. 2 Introduction Prototyping is a design technique where users can be involved in testing design ideas.
1 CSC111H User Interface Design Dennis Burford
Rapid Prototyping Rapid Prototyping in User Interaction Development & Evaluation Copyright © 2001 H. Rex Hartson and Deborah Hix.
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.
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
Hasselt University – tUL – IBBT Expertise Centre for Digital Media Jan Van den Bergh Deepak Sahni Mieke Haesen Kris Luyten Karin Coninx EICS 2011 (ACM.
©2001 Southern Illinois University, Edwardsville All rights reserved. Today Wednesday Running A Paper Prototyping Session Paper Prototyping Video: Paper.
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.
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.
Stanford hci group / cs October 2007 An Overview of Design Process Scott Klemmer tas: Marcello Bastea-Forte, Joel Brandt,
Sketch Tools L2 Advanced HCI. Agenda What is the problem with computer-based design tools? Why a toolkit? Framework Implementation Does it work? What.
CEN3722 Human Computer Interaction Prototyping Dr. Ron Eaglin.
Digital Media & Interaction Design LECTURE 4+5. Lecture 4+5 Draw requirement + Prototyping.
Design and Prototyping, Part 2
Wrapping up prototyping
Prototyping.
Introduction to Prototyping
Design, prototyping and construction
Topic 3 Modeling.
Chapter 11 Design, prototyping and construction 1.
CS 522: Human-Computer Interaction Lab: Formative Evaluation
Fundamentals of Human Computer Interaction (HCI)
Design, prototyping and construction
Presentation transcript:

1 Paper (low-fidelity) Prototypes

2 When we are designing When we are thinking about design We are visualizing the interface inside our head (imaginary) Our short term memory is limited For most of us, manipulating images mentally is quite difficult Expressing a design idea in a concrete form As a sketch, model …… Acts as a feedback mechanism to the designer (backtalk) Allows people to communicate ideas to others. materials, platforms, cost

3 Why not use a computer tool? Our mental processes are much faster than our ability to express the ideas Drawing is much faster than using a design environment (cad, ide etc) With a drawing you can be ambiguous and sketchy Where computer tools often force premature decisions With a drawing you don’t worry about alignment, size, colour, font ….. All of these are distracters when form and function should be the focus early in the design process

At then ends of the spectrum These two designs are the same (bad) solutions to a problem Sketch 8.6 changes VB Form6.5 changes

So what happens if you partly tidy?

What happened? Number of changesEnjoyment

References Plimmer, B. E., Apperley, M., Evaluating a Sketch Environment for Novice Programmers, in proc SIGCHI, ACM, (2003), Plimmer, B. E., Apperley, M., Software for Students to Sketch Interface Designs, in proc Interact, (2003), Yeung, L. W. S., Exploring beautification and the effects of designs' level of formality on the design performance during the early stages of the design process Department of Psychology, MSc, University of Auckland, (2007)

8 How to make a low-fi prototype Pen, paper, coloured pencils, scissors, cellotape ….. Just like primary school Phone interface for airline booking

9

10 Make a device Use the cornflakes box, a hunk of polystyrene …… Paint/ draw on the controls Stick on junk Use buttons to represent dials Nancy Frishberg, Prototyping with junk, Interactions,2006, V13:1 Pp 21 – 23, ACM

11 Wizard of Oz Use the prototype and your imagination to interact with the interface One person is the computer One person is the user One person is the observer The user might say ‘click’ a button The computer response by displaying the next screen (or what ever) There is a nice video of this on you tube “Hanmail Paper Prototype” //deeplinking.net/paper-web/ //deeplinking.net/paper-web/

12 Iterate rapidly When you find a problem with the interface Change it – tape over … twink Observer Write down what is changed AND why Write down the functions the system needs to support If you don’t write them down you WILL forget!!!!

Case Study – old interface 13 manufacturing scheduler

Attributes by task 14 This is about ¼ of the table

Competitors 15

Lo-fi Prototype 16

Hi-fi Prototype 17