cs160. cs160. valkyriesavage.com valkyriesavage.com design cycle - - PowerPoint PPT Presentation

▶
cs160 cs160 valkyriesavage com valkyriesavage com design
SMART_READER_LITE
LIVE PREVIEW

cs160. cs160. valkyriesavage.com valkyriesavage.com design cycle - - PowerPoint PPT Presentation

Sep 07, 2023 316 likes •835 views

cs160. cs160. valkyriesavage.com valkyriesavage.com design cycle and critique June 24, 2015 Valkyrie Savage someone please close the doors Nishok Chetty James Gupta Y ancheng Lu Raghav Sehtia Dennis Xing password-protected readings u:

slide-1
SLIDE 1
slide-2
SLIDE 2

design cycle and critique

June 24, 2015 Valkyrie Savage

cs160. valkyriesavage.com cs160. valkyriesavage.com

slide-3
SLIDE 3

someone please close the doors

slide-4
SLIDE 4

Nishok Chetty James Gupta Y ancheng Lu Raghav Sehtia Dennis Xing

slide-5
SLIDE 5

password-protected readings u: cs160 p: CS160Readings

slide-6
SLIDE 6

Font Selection in Keynote

slide-7
SLIDE 7

Font Selection in PowerPoint

slide-8
SLIDE 8

Agenda

The Design Cycle Critique

slide-9
SLIDE 9

The Design Cycle

Sali Sasaki on flickr

slide-10
SLIDE 10

Design Prototype Evaluate

slide-11
SLIDE 11

The Universal Traveler Model 
 [Koberg & Bagnall]

Design Process

  • 1. Acceptance
  • 2. Analysis
  • 3. Definition
  • 4. Ideation
  • 5. Idea selection
  • 6. Implementation
  • 7. Evaluation
slide-12
SLIDE 12

The Universal Traveler Model 
 [Koberg & Bagnall]

Design Process

  • 1. Acceptance
  • 2. Analysis
  • 3. Definition
  • 4. Ideation
  • 5. Idea selection
  • 6. Implementation
  • 7. Evaluation
slide-13
SLIDE 13

Acceptance

Getting started Because of a deadline Because of possible reward Because you are forced to

  • Commitment

Time Resources Responsibility

  • Key is to set motivation

Design Process

  • 1. Acceptance
  • 2. Analysis
  • 3. Definition
  • 4. Ideation
  • 5. Idea selection
  • 6. Implementation
  • 7. Evaluation
slide-14
SLIDE 14

Analysis

Understand Users and Tasks

Who are the users? What are their tasks?

Observe and test, don’t guess

  • Tools

Notebook Smartphone: audio + video recorder still camera Design Process

  • 1. Acceptance
  • 2. Analysis
  • 3. Definition
  • 4. Ideation
  • 5. Idea selection
  • 6. Implementation
  • 7. Evaluation
slide-15
SLIDE 15

Definition

Focus on the problem

Choose appropriate level of detail

  • Not “bicycle cup-holders”
  • …but
  • “helping cyclists to drink coffee without accidents”
slide-16
SLIDE 16

Ideation

Brainstorming

Stretch mental muscles

Loosen up with simple games Do homework Seed with related ideas/objects

Get physical

Sketch Make models Act out

IDEO rules

One conversation at a time Stay focused Encourage wild ideas Defer judgment Build upon idea from others

Design Process

  • 1. Acceptance
  • 2. Analysis
  • 3. Definition
  • 4. Ideation
  • 5. Idea selection
  • 6. Implementation
  • 7. Evaluation

Aim for Quantity!

slide-17
SLIDE 17

Idea Selection

Define importance of each idea

Does it address problem Will target users like it Is hardware available Is software available What is the cost Market window …

  • Rank ideas according the your criteria
  • Pick top N

Choices depend on resources and stage of the project

Design Process

  • 1. Acceptance
  • 2. Analysis
  • 3. Definition
  • 4. Ideation
  • 5. Idea selection
  • 6. Implementation
  • 7. Evaluation
slide-18
SLIDE 18

Implementation

Scale up low -> high fidelity

Low-fidelity (quick, cheap, dirty)

sketches, paper models, foam core, …

  • Medium fidelity 


(slower, more expensive)

Flash, JavaScript, AJAX, …

  • High fidelity 


(slowest, most expensive)

The full interface

Design Process

  • 1. Acceptance
  • 2. Analysis
  • 3. Definition
  • 4. Ideation
  • 5. Idea selection
  • 6. Implementation
  • 7. Evaluation
slide-19
SLIDE 19

Implementation Progression Example:


W eb Design

Storyboards Wireframe Mock-ups

slide-20
SLIDE 20

Evaluation

Many types of evaluation:

Prototype walkthroughs Think-aloud studies Wizard-of-Oz Performance comparisons

  • Type of evaluation chosen depends on the level of implementation, etc.

Design Process

  • 1. Acceptance
  • 2. Analysis
  • 3. Definition
  • 4. Ideation
  • 5. Idea selection
  • 6. Implementation
  • 7. Evaluation
slide-21
SLIDE 21

Example Evaluation

Paper Prototype

  • User

“Computer” Observer (or video camera) Interface Interface elements

slide-22
SLIDE 22

Design Cycle Over 
 Project Lifespan

Design Process

  • 1. Acceptance
  • 2. Analysis
  • 3. Definition
  • 4. Ideation
  • 5. Idea selection
  • 6. Implementation
  • 7. Evaluation
slide-23
SLIDE 23

Evaluation reveals problems with design. Re-design requires cycling the process.

Design Cycle Over
 Project Lifespan

Design Process

  • 1. Acceptance
  • 2. Analysis
  • 3. Definition
  • 4. Ideation
  • 5. Idea selection
  • 6. Implementation
  • 7. Evaluation
slide-24
SLIDE 24

so close, yet…

slide-25
SLIDE 25

Prototype implementations eventually increase in fidelity to reach final product

Design Cycle Over 
 Project Lifespan

Design Process

  • 1. Acceptance
  • 2. Analysis
  • 3. Definition
  • 4. Ideation
  • 5. Idea selection
  • 6. Implementation
  • 7. Evaluation
slide-26
SLIDE 26

Comparison

[Lewis & Rieman] Who will use? What are their tasks? Plagiarize Rough out a design Think about design Create a prototype Test it with users Iterate Build a production version Track use Evolve the design

[Koberg & Bagnall]

slide-27
SLIDE 27

Comparison

[Lewis & Rieman] Who will use? [2] What are their tasks? [2] Plagiarize [4] Rough out a design [4,6] Think about design [5] Create a prototype [6] Test it with users [7] Iterate [7->1] Build a prod. version [6] Track use [7] Evolve the design [7->1]

[Koberg & Bagnall]

slide-28
SLIDE 28

Waterfall Model (Software Engineering)

Application Description Requirements Specification System Design Product Initiation Analysis Design Implementation

slide-29
SLIDE 29

Comparison

Focus Differs WF has no feedback
 High cost of fixing errors: increases by 10x at each satge Iterative design finds problems earlier True for mobile and web apps?

Application Description Requirements Specification System Design Product Initiation Analysis Design Implementation

Design Prototype Evaluate

slide-30
SLIDE 30

Design Process in Action

Photo: Flickr user wiedmaier

slide-31
SLIDE 31

video: the deep dive

How well do they follow the cycle? What do they do for each step of the cycle? How many cycles do you think they went through?

Design Prototype Evaluate

slide-32
SLIDE 32

Video: IDEO - The Deep Dive

https://vimeo.com/16456835

(2:47-13:00, 15:40-end)

slide-33
SLIDE 33

Administrivia

24736216@N07 on flickr

slide-34
SLIDE 34
slide-35
SLIDE 35

assignment: reading response

How to Run a Design Critique How to Give and Receive Criticism

slide-36
SLIDE 36

reading responses will generally

  • nly be before lecture, but this week

we have a couple studio readings

slide-37
SLIDE 37

final presentations: 13:00 - 17:00 Wednesday 12 August

let me know ASAP if this is a problem BLOCK THIS OFF ON YOUR SCHEDULES NOW

slide-38
SLIDE 38

Reading Response Grading

2: Great 1: Lacking 0: Missing

slide-39
SLIDE 39

assignment: individual design 1

due EOD Friday summary: interview two non- college-student individuals about smartphone interactions they wish were more convenient. create a prototype of a smart watch interaction that might solve one problem you identify, and test it.

slide-40
SLIDE 40

assignment: let’s travel!

build a phrase translation app. due EOD Thursday. Android tutorials this week in section. in studio Thursday, we will have

  • CRITIQUES. you must have

something to show by studio Thursday!

slide-41
SLIDE 41

sections

please go to the section you signed up for for this week

slide-42
SLIDE 42

critique

Juhan Sonin on flickr

slide-43
SLIDE 43

what is a critique?

Show a project in progress through sketches and prototypes Solicit feedback from peers (small groups work best) History: Studio art education

http://www.flickr.com/photos/pjchmiel/2972140234/

slide-44
SLIDE 44

What is the point

  • f a critique?

Show off how great your project is.

  • Get honest reactions, ask for input on open questions.
  • Q: How is a critique different from a brainstorm?

http://www.flickr.com/photos/
 crystiancruz/2353909834/

slide-45
SLIDE 45

designer: frame the discussion!

State Explicitly: What would you like comments on?

  • Overall idea?
  • Specific interactions?
  • Usability?
  • Technical Feasibility?
  • Pixel-level graphic design?

Take a dispassionate stance (this is hard!)

  • Show alternatives where possible (makes comparison easier)
slide-46
SLIDE 46

critic: how to avoid deaf ears

Comments are about the design, not the designer. Point out positive aspects – be specific

Not: “I like this, but…” Instead: “The layout effectively communicates the
 hierarchical nature of the data. However, …”

Ask for alternatives instead of offering solutions

Not: “You should really change X” Instead: “Have you considered alternatives for X?”

slide-47
SLIDE 47

critique tips

Start with clarifying questions Listen before speaking Lead into explorations of alternatives Ask clarifying questions Refer back to the goals

slide-48
SLIDE 48

studio tomorrow : peer evaluation and critique of PRG01!

you must have something to show!

slide-49
SLIDE 49

You ¡will ¡evaluate ¡your ¡classmates' ¡designs ¡for ¡PRG01, ¡and ¡they ¡will ¡evaluate ¡yours. ¡Have ¡them ¡show ¡you ¡what ¡they ¡ have ¡so ¡far, ¡and ¡give ¡feedback. ¡Then, ¡switch ¡and ¡have ¡them ¡give ¡feedback ¡on ¡your ¡designs. ¡ ¡ ¡ Feel ¡free ¡to ¡use ¡the ¡following ¡questions ¡to ¡structure ¡your ¡feedback ¡(you ¡may ¡add ¡any ¡additional ¡information ¡you ¡think ¡ is ¡necessary ¡to ¡help ¡improve ¡their ¡designs!): ¡

  • 1. Is ¡it ¡easy ¡to ¡understand ¡which ¡languages ¡are ¡selected ¡for ¡to ¡and ¡from ¡translation? ¡
  • 2. How ¡many ¡interactions ¡(button ¡presses, ¡dropdown ¡selections, ¡etc.) ¡does ¡it ¡take ¡to ¡translate ¡one ¡phrase? ¡
  • 3. How ¡many ¡interactions ¡to ¡change ¡the ¡to/from ¡language ¡or ¡phrase ¡being ¡translated? ¡
  • 4. Is ¡the ¡text ¡big ¡enough ¡to ¡read? ¡/ ¡Are ¡the ¡buttons ¡large ¡enough ¡to ¡click? ¡

My ¡name ¡is ¡________________________________, ¡SID ¡________________________________ ¡ I ¡evaluated ¡_____________________, ¡_____________________ ¡and ¡__________________________ ¡ One ¡thing ¡I ¡would ¡like ¡to ¡do ¡differently ¡in ¡my ¡design ¡is: ¡ ¡ ¡ ¡ ¡ You ¡will ¡evaluate ¡your ¡classmates' ¡designs ¡for ¡PRG01, ¡and ¡they ¡will ¡evaluate ¡yours. ¡Have ¡them ¡show ¡you ¡what ¡they ¡ have ¡so ¡far, ¡and ¡give ¡feedback. ¡Then, ¡switch ¡and ¡have ¡them ¡give ¡feedback ¡on ¡your ¡designs. ¡ ¡ ¡ Feel ¡free ¡to ¡use ¡the ¡following ¡questions ¡to ¡structure ¡your ¡feedback ¡(you ¡may ¡add ¡any ¡additional ¡information ¡you ¡think ¡ is ¡necessary ¡to ¡help ¡improve ¡their ¡designs!): ¡ 1. Is ¡it ¡easy ¡to ¡understand ¡which ¡languages ¡are ¡selected ¡for ¡to ¡and ¡from ¡translation? ¡ 2. How ¡many ¡interactions ¡(button ¡presses, ¡dropdown ¡selections, ¡etc.) ¡does ¡it ¡take ¡to ¡translate ¡one ¡phrase? ¡ 3. How ¡many ¡interactions ¡to ¡change ¡the ¡to/from ¡language ¡or ¡phrase ¡being ¡translated? ¡ 4. Is ¡the ¡text ¡big ¡enough ¡to ¡read? ¡/ ¡Are ¡the ¡buttons ¡large ¡enough ¡to ¡click? ¡ My ¡name ¡is ¡________________________________, ¡SID ¡________________________________ ¡ I ¡evaluated ¡_____________________, ¡_____________________ ¡and ¡__________________________ ¡ One ¡thing ¡I ¡would ¡like ¡to ¡do ¡differently ¡in ¡my ¡design ¡is: ¡

peer evaluation format

you’ll fill this out and hand it in to myself or a TA

slide-50
SLIDE 50

design cycle and critique

June 24, 2015 Valkyrie Savage

cs160. valkyriesavage.com cs160. valkyriesavage.com