Concepts and Prototypes CS584. Concepts (Conceptual Model) Pre-prototype. Explore how to address some aspect, eg: The interface metaphor (eg, desktop,...)

Slides:

Advertisements

Similar presentations

Chapter 11 Design, prototyping and construction 1.

Advertisements

Design, prototyping and construction

Introduction to Usability Engineering CS 352 Winter

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

From requirements to design

Prototyping. Introduction Low-fidelity prototyping High-fidelity prototyping Compromises in prototyping From design to implementation.

Concepts and Prototypes

Prototyping By Greg Rogers. Agenda For Today  What is a prototype  Why prototype  What to prototype.

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.

Review of last lecture 1.Norman’s 2 Gulfs are… – Gulf of Execution and Gulf of Evaluation 2.Goals of usability engineering include… – Effectiveness, safety,

SIMS 202 Information Organization and Retrieval Prof. Marti Hearst and Prof. Ray Larson UC Berkeley SIMS Tues/Thurs 9:30-11:00am Fall 2000.

Rapid Prototyping Marti Hearst (UCB SIMS) SIMS 213, UI Design & Development February 25, 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.

A Visual Language for Sketching Large and Complex Interactive Designs Michael Thomsen University of Aarhus G r o u p f o r User Interface Research University.

Human Computer Interaction & Usability Prototyping Design & Prototyping HCI Prototyping.

Visioning ITM 734 Fall 2006 Corritore. 2 Visioning Goal – to create a vision of how your system will support your users’ work. * says what the new work.

1 Low-fidelity Prototyping. 2 Interface Hall of Shame or Fame? PowerBuilder List of objects with associated properties.

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.

Web Site Design Principles

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.

HCI – Prototyping. Why Prototype?  Prototyping is a well understood and used technique in design engineering where products are tested via a model prototype.

COMP 5620/6620/6626 Chapter 8: Design, Prototyping and Construction

Prototyping. What is a prototype? In other design fields a prototype is a small- scale model: a miniature car a miniature building or town.

Wizard of Oz Prototyping + Making Video Scenarios HCC 729 4/17/14.

Mission: Building and Testing. INSERTTO VIIDEO Design Brief: Design a cabin for Autonomous car on year 2035.

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,

CS2003 Usability Engineering Human-Centred Design Dr Steve Love.

Prof. James A. Landay Computer Science Department Stanford University Spring 2015 CS 377 E : ENGELBART ’ S UNFINISHED LEGACY : DESIGNING SOLUTIONS TO GLOBAL.

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.

Prototyping 1. Design Document How express your design ideas. How express your design ideas. Key notions Key notions Cheap, FastCheap, Fast Flexibility.

CMPD 434 MULTIMEDIA AUTHORING

Interaction Design Dr. Jim Rowan Foley Introduction What’s in the Book that we’ll cover.

Concepts and Prototypes CS352. Announcements Notice upcoming due dates (web page). Where we are in PRICPE: –Predispositions: Did this in Project Proposal.

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)

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.

Design, Prototyping and Construction In “ pure ” waterfall, design begins after requirements development has finished However, in the real world there.

Hasselt University – tUL – IBBT Expertise Centre for Digital Media Jan Van den Bergh Deepak Sahni Mieke Haesen Kris Luyten Karin Coninx EICS 2011 (ACM.

The Structure of the User Interface Lecture # 2 Gabriel Spitz.

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.

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.

Design, prototyping and construction

Lecture 2 Supplement - Prototyping

Sampath Jayarathna Cal Poly Pomona

Practical information

Software Engineering D7025E

Prototyping & Design CS 352.

Concepts and Prototypes

Introduction to Usability Engineering

Wrapping up prototyping

Introduction to Prototyping

Design, prototyping and construction

Chapter 11 Design, prototyping and construction 1.

DESIGN, PROTOTYPING and CONSTRUCTION

Computer Science Department

Design, prototyping and construction

Presentation transcript:

Concepts and Prototypes CS584

Concepts (Conceptual Model) Pre-prototype. Explore how to address some aspect, eg: The interface metaphor (eg, desktop,...) The paradigm or device (eg, WIMP, wearable,...) The interaction type (eg, instructing, conversing, manipulating/demonstrating, or exploring) This is a brainstorming-like tool –Consider several concepts. –There should be some bad ideas! –1. don’t get too attached to a concept and 2. don’t spend too much time on any of them.

Concepts Examples –Example #1: from Mike Madison’s homelessness project. (He ultimately scrapped all of them.) See next slide.

Concept Mike Madison, Jason De Runa, Jordan Fugate, Sakshi Gupta Inklings of a Design…

Example #2: In-Class Activity –Sketch >=3 concepts for a programmable refrigerator to order groceries.

Is concept good? Questions to try to decide (#2-6 are for metaphor concepts): 1.Does it solve the problem/aspect? 2.How much structure does it provide? 3.How much of it relevant to the problem? 4.Is it easy to represent? 5.Will your audience understand the metaphor? 6.How extensible is the metaphor?

Prototypes To flesh out a concept with enough detail –to communicate/understand user experience in detail. –in this class: for our use to understand user problems with our ideas. –can also be used to communicate with boss, news media, etc... Lo-fi prototypes ideal for some purposes: –cheap –yet force enough attention to detail.

Higher fi prototypes Useful: –When: AFTER get through lower-fi ones first. –Why: Get at details of design (layout, icons, colors etc) –Example: Wizard of oz: on the computer, but human fakes in the computer logic. Front end finished with widgets polished up, but behavior/data is hard-coded (no back end). –For boss, at trade shows, etc.

Lo-fi prototypes (we will start here) Just how lo-fi can one go –The lowest-fi: paper At first: sketches. Later can be more polished. –Static paper vs. “interactive” paper. –There are tool-supported variants of above concepts. –Details of each next...

Paper prototypes Static paper –For communicating among team. –Usually done as a written use case or a sketched storyboard or sketched “state machine”. –Example: (next slide).

Low-fidelity prototype

Paper prototypes (cont.) Dynamic (interactive) paper –For evaluating with user at a very low-cost.

Dynamic/interactive paper prototypes (cont.) Example: –from ML-interaction experiment. (Next slide).

Lo-fi prototype set-up with pens, printouts, table

Tool-supported prototypes Low-fi with tool support. –CogTool (fig next slide): tools for sketched storyboards/states. –Can transition these to nicer, more polished versions.

CogTool Example

Activity Choose one concept you did for the programmable refrigerator. Consider one specific user task: –your user wants to always keep stocked with the ingredients for tacos. Sketch a static prototype storyboard/states of your programming tool: –that shows how your user will accomplish that task in your tool.