Lecture 13 Prototyping Mark Woehrer CS 3053 - Human-Computer - - PowerPoint PPT Presentation

▶
lecture 13 prototyping
SMART_READER_LITE
LIVE PREVIEW

Lecture 13 Prototyping Mark Woehrer CS 3053 - Human-Computer - - PowerPoint PPT Presentation

Apr 11, 2024 324 likes •677 views

Lecture 13 Prototyping Mark Woehrer CS 3053 - Human-Computer Interaction Computer Science Department Oklahoma University Spring 2007 [Taken from Stanford CS147 with permission] CS 3053 - Mark Woehrer Learning Goals Understand the

slide-1
SLIDE 1

CS 3053 - Mark Woehrer

Lecture 13 – Prototyping

Mark Woehrer CS 3053 - Human-Computer Interaction Computer Science Department Oklahoma University Spring 2007 [Taken from Stanford CS147 with permission]

slide-2
SLIDE 2

CS 3053 - Mark Woehrer

Learning Goals

  • Understand the uses of difgerent

types of prototypes for difgerent kinds of designs and be able to choose appropriately

  • Know the basic techniques for

low-fidelity prototyping

  • Be able to determine and apply

the relevant techniques for your project

slide-3
SLIDE 3

CS 3053 - Mark Woehrer

What is a Prototype?

  • A representation of a design

before the final artifacts exist

  • To evoke reactions from

stakeholders in the design process

– Designers – Users – Clients

slide-4
SLIDE 4

CS 3053 - Mark Woehrer

Uses of Prototypes

  • Design by doing

– Clarify goals and requirements – “Reflective conversation with the materials”

  • Give users the experience of use

– Look and feel

  • Test specific aspects

– Compare alternatives – Make changes

  • Show feasibility for buy-in

– Proof of concept – Manage expectations

slide-5
SLIDE 5

CS 3053 - Mark Woehrer

What to Prototype?

“…Prototypes provide the means for examining design problems and evaluating solutions. Selecting the focus of a prototype is the art of identifying the most important

  • pen design questions.”

Houde and Hill – What do Prototypes Prototype?

slide-6
SLIDE 6

Design Process

OBSERVE VISUALIZE PROTOTYPE EVALUATE UNDERSTAND IMPLEMENT

slide-7
SLIDE 7

CS 3053 - Mark Woehrer

Iterative Prototyping

  • Quality is a function of the

number of iterations and refinements a design undergoes before it hits the street.

  • To get a good idea, get lots of

ideas.

  • Enlightened trial and error is

better than than the planning of a flawless intellect.

slide-8
SLIDE 8

CS 3053 - Mark Woehrer

FAIL EARLY

(Cost of failure vs. project time curve)

From Hans Haenlein, IDEO

slide-9
SLIDE 9

CS 3053 - Mark Woehrer

FAIL OFTEN

(Risk vs. iteration curve)

From Hans Haenlein, IDEO

slide-10
SLIDE 10

CS 3053 - Mark Woehrer

3 stages of prototyping

LOW RESOLUTION

project time

EVOLVE

VALIDATE # of ideas

prototype driven specs → HIGH RESOLUTION spec driven prototypes INSPIRE

From Hans Haenlein, IDEO

slide-11
SLIDE 11

CS 3053 - Mark Woehrer

Designing the Prototype

  • Choose what aspects to

prototype for relevance to your project goals

  • Identify measurable design goals
  • Good enough to provide

feedback but flexible enough for significant changes to be made down the line

slide-12
SLIDE 12

CS 3053 - Mark Woehrer

  • Sketches
  • Diagrams & Frameworks
  • Hand Made Constructions
  • Machined Constructions
  • Virtual Models
  • Graphics
  • Packaging
  • Spaces
  • Role Play, Experiences
  • Video
  • …

What can be a Prototype?

slide-13
SLIDE 13

CS 3053 - Mark Woehrer

Prototypes

  • Look like…
  • Work like…
  • Experience like …..
slide-14
SLIDE 14

CS 3053 - Mark Woehrer

PROTOTYPE RAPID

(IDEO “surgical tool”)

slide-15
SLIDE 15

Experience Prototyping

Jane Fulton Suri - IDEO

slide-16
SLIDE 16

From Greenbaum and Kyng, Design at Work 1991

slide-17
SLIDE 17

CS 3053 - Mark Woehrer

Early Stage Prototypes

  • Low Fidelity (Paper)

–Work with artifacts

  • Skits / Informance

–Understand roles and context Focus on concepts, not detail Low investment in status quo Openness to change

slide-18
SLIDE 18

CS 3053 - Mark Woehrer

Storyboards

slide-19
SLIDE 19

CS 3053 - Mark Woehrer

Paper Prototype

http://www.mindspring.com/~bryce_g/projects/lo_fi.html

slide-20
SLIDE 20

CS 3053 - Mark Woehrer

Low-Fidelity Prototype

http://bmrc.berkeley.edu/courseware/cs160/fall99/projects/t4/body/low-fi/

slide-21
SLIDE 21

CS 3053 - Mark Woehrer

slide-22
SLIDE 22

CS 3053 - Mark Woehrer

slide-23
SLIDE 23

CS 3053 - Mark Woehrer

Flipbook

slide-24
SLIDE 24

CS 3053 - Mark Woehrer

Flipbook

slide-25
SLIDE 25

CS 3053 - Mark Woehrer

Flow Diagrams

From a previous cs147 project…

slide-26
SLIDE 26

CS 3053 - Mark Woehrer

Be Clever About Faking It

  • Device Mockups

– Palm, Utopia,..

  • Device substitution

– PC prototype for small device – Tethers for wireless – Pager for defibrillator – …

  • Wizard of Oz techniques
slide-27
SLIDE 27

CS 3053 - Mark Woehrer

Wizard of Oz

  • Some aspects of interface are

implemented

  • Operation requires processing that

is actually done by a human, not directly visible to the user

  • The “wizard” intervention needs to

be designed to be believable, both technologically and to the user

slide-28
SLIDE 28

CS 3053 - Mark Woehrer

Wizard of Oz for Multimedia Design (Oviatt)

slide-29
SLIDE 29

CS 3053 - Mark Woehrer

Fidelity is a Spectrum

  • Medium fidelity

–Cleaned up but not decorated –Wireframes, Blocks, Greeking, …

slide-30
SLIDE 30

Medium Fidelity Prototypes

slide-31
SLIDE 31

CS 3053 - Mark Woehrer

slide-32
SLIDE 32

CS 3053 - Mark Woehrer

High Fidelity Tools

  • Web

– FrontPage, GoLive, Dreamweaver,…

  • Screen mockups

– Illustrator, Photoshop, PowerPoint,….

  • Clickthroughs

– Flash, PowerPoint,…

  • Graphic interface builders

– Visual Basic, Visual C#, … – Smalltalk, Lisp,… – Flash, Director,…

  • Graphic toolkits

– Java JFC/Swing, TCL/TK, Prefuse,…

slide-33
SLIDE 33

CS 3053 - Mark Woehrer

Breadth vs. Depth

  • Horizontal Prototype

–Top level –Basic features

  • Vertical Prototype

–Path in depth –Click-through or interactive

  • Combinations
slide-34
SLIDE 34

CS 3053 - Mark Woehrer

Web prototypes (Van Duyne)

  • Industrial strength methods
  • Artifacts

–Site maps –Storyboards –Schematics