Reference Prof. Saul Greenberg, University of Calgary, notes and articles.

Slides:



Advertisements
Similar presentations
Design, prototyping and construction
Advertisements

References Prof. Saul Greenberg, University of Calgary, notes and articles INUSE 6.2 and RESPECT 5.3 Handbook Prof. , University of , Notes and articles.
Rapid Prototyping Dimensions and terminology Non-computer methods
ISE554 Human Computer Interaction Design 2.3 Principled Methods for Design.
TUR - Prototyping How to have a satisfied user? What are the sources of user satisfaction? What are the sources of user satisfaction? Where the user.
Human Computer Interaction
Saul Greenberg User Centered Design Why User Centered Design is important Approaches to User Centered Design.
User Centered Design and Prototyping
Department of Computer Science
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.
Saul Greenberg CPSC 481 Foundations and Principles of Human Computer Interaction James Tam.
© 1999 Franz Kurfess Prototyping and Evaluation 1 Course Overview  Introduction  Understanding Users and Their Tasks  Iterative Design  Principles.
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.
Saul Greenberg CPSC 481 Foundations and Principles of Human Computer Interaction James Tam.
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.
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.
Prototyping Sketches, storyboards, and other prototypes.
Prototyping Professor: Tapan Parikh TA: Eun Kyoung Choe
Stanford hci group / cs376 Design Processes and Tools Sharon Lin Bowen Li.
What is User Centered Design? Create “usable” user interface Reduce need for teaching, help, and manuals Uncover and address unmet needs Follow a process.
SIMS 202 Information Organization and Retrieval Prof. Marti Hearst and Prof. Ray Larson UC Berkeley SIMS Tues/Thurs 9:30-11:00am Fall 2000.
User Centered Design and Prototyping
CS147 - Terry Winograd - 1 Lecture 9 – Prototyping Terry Winograd CS147 - Introduction to Human-Computer Interaction Design Computer Science Department.
Stanford hci group / cs376 u Jeffrey Heer · 5 May 2009 Design Methods: Prototyping.
Web Design cs414 spring Announcements Project status due Friday (submit pdf)
Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise.
Graphical Screen Design Part 1: Contrast, Repetition, Alignment, Proximity Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada.
Human Computer Interaction & Usability Prototyping Design & Prototyping HCI Prototyping.
Gary MarsdenSlide 1University of Cape Town Human-Computer Interaction - 8 Prototyping Gary Marsden ( ) July 2002.
1 DENIM: An Informal Web Site Design Tool Inspired by Observations of Practice CS 376 – Research Topics in HCI 11/01/2005 Tony Tulathimutte.
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 Prototyping Chapter 6 Prototyping. Learning Outcomes At the end of this lecture, you should be able to: –Define the term “prototyping” –Explain the.
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,
Fall 2002CS/PSY Rapid Prototyping Sketches, Storyboards, Mock-Ups and Scenarios Agenda Dimensions and terminology Non-computer methods Computer methods.
HCI – Prototyping. Why Prototype?  Prototyping is a well understood and used technique in design engineering where products are tested via a model prototype.
Prototyping CSCI 4800 Spring 2007 Kraemer. Learning Goals Understand the uses of different types of prototypes for different kinds of designs and be able.
Web Site Usability. Benefits of planning usability Increased user satisfaction, which translates directly to trust and brand loyalty Increased user productivity,
Applied Pervasive Computing Presentation 3: Prototyping.
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 1. Design Document How express your design ideas. How express your design ideas. Key notions Key notions Cheap, FastCheap, Fast Flexibility.
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,
Acknowledgements: Most of this course is based on the excellent course offered by Prof. Kellogg Booth at the British Columbia University, Vancouver, Canada.
Begin Class with More Studio. Introduction to Prototyping.
Prototyping. Objectives By the end of class, you will be able to… Explain why prototyping is an important phase of design. Create and test paper prototypes.
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.
Requirements gathering Storyboarding Prototyping
James Tam User Centered Design And Prototyping Rapid prototyping techniques Why User Centered Design is important Approaches to User Centered Design.
Stanford hci group / cs October 2007 An Overview of Design Process Scott Klemmer tas: Marcello Bastea-Forte, Joel Brandt,
Digital Media & Interaction Design LECTURE 4+5. Lecture 4+5 Draw requirement + Prototyping.
Practical information
Sketching and Prototyping
Human Computer Interaction Slide 1
WXGE6103 Software Engineering Process and Practice
Wrapping up prototyping
SysML V2: User-Centered Design Approach
Prototyping.
Design, prototyping and construction
Rapid Prototyping Sketches, Storyboards, Mock-Ups and Scenarios
Computer Science Department
Interface Design and Usability
Design, prototyping and construction
Presentation transcript:

Reference Prof. Saul Greenberg, University of Calgary, notes and articles

Prototyping Allows users to react to the design and suggest changes Main technique supporting iterative refinement Low-fidelity prototypes best for brainstorming and choosing representations Medium-fidelity prototypes best for fine- tuning the design

Prototyping

Low-Fidelity Prototypes (Paper-based prototypes) A paper mock-up of the interface look, feel, functionality “quick and cheap” to prepare and modify Can evolve very quickly People do take paper prototype seriously, they do find many usability problems Purpose: brainstorm competing representations elicit user reactions elicit user modifications / suggestions

Low Fidelity prototypes Example: Sketches

Low Fidelity Prototypes Example: Storyboarding

Storyboard of a computer-based telephone

Medium Fidelity Prototypes

Wizard of Oz

Medium Fidelity Prototypes

Wizard of Oz Examples

Prototyping can give you information on: Functionality Operation sequences User support needs Required representations Look and Feel Choose the correct Prototyping Tool: Paper Presentation package e..g director, powerpoint Interface Builder e.g. visual basic Specialised Tool e.g. Hypercard

HCI resources on the Web RESPECT 5.3 Handbook INUSE 6.2 Handbook List of methods for User Centered Design IBM HCI design guide at Sun’s Web style guide: Designing killer Web sites: