iterative design - columbia universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... ·...

54
Iterative Design LYDIA CHILTON COMS 4170

Upload: others

Post on 27-May-2020

9 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

Iterative Design

LYDIA CHILTON COMS 4170

Page 2: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:
Page 3: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

Milestone 2What are domains and specific needs that involve:

Interact with multiple videos on a page in a way that brings more value than simply watching them?

3

Page 4: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

So far, you have brainstormed ideas

! Ideas are a good starting point.! But ideas are cheap! Let people steal your ideas.! Execution is all that matters.

4

Page 5: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

Design process: How do we get from Idea to Product?

5

Idea Product

Page 6: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

What we expect design to be:

6

Idea Product

Page 7: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

What design is:

7

Idea Product

Page 8: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

The Waterfall Model

8

Design

ImplementFix bugs

Finished Product!

RequirementsIdea

Page 9: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

The Waterfall Model

9

Design

ImplementFix bugs

Finished Product!

RequirementsIdeaPhone + IPod + Internet

* One button* Touch Screen* Soft keyboard

Page 10: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

Problem: The Waterfall Model is linear. It cannot accommodate unknowns

10

Design

ImplementFix bugs

Finished Product!

RequirementsIdeaPhone + IPod + Internet

* One button* Touch Screen* Soft keyboard

Page 11: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

Barry Boehm (USC) 1986: The design process should mitigate risk

11

Page 12: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

Waterfall Model vs. Risk Mitigation?

12

Design

ImplementFix bugs

Finished Product!

RequirementsIdea

Page 13: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

Waterfall Model vs. The Spiral Model

13

Design

ImplementFix bugs

Finished Product!

RequirementsIdea

Page 14: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

Iterative Design

14

Design

PrototypeEvaluate

Page 15: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

Instead of the Waterfall Model…

15

Design

ImplementFix bugs

Finished Product!

RequirementsIdeaPhone + IPod + Internet

* One button* Touch Screen* Soft keyboard

Page 16: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

Iterative Design:

16

Idea Product

new concept new concept new concept

Design

PrototypeEvaluate

Design

PrototypeEvaluate Design

PrototypeEvaluate

Every new concept is a risk. Every risk needs to be prototyped.

Page 17: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

Iterative Design:

17

Idea Product

Every new concept is a risk. Every risk needs to be prototyped.

Touch screen

Design

PrototypeEvaluate

Soft keyboard

Design

PrototypeEvaluate

One button

Design

PrototypeEvaluate

Page 18: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

When you design:

What are the new concepts you need to prototype?

Page 19: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

Idea: Autonomous Wandering Interface

19

Page 20: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

In the video:

What were the new concepts that we would need to

prototype?

20

Page 21: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:
Page 22: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

In the video:

What were the new concepts that we would need to

prototype?

22

Page 23: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

Every new concept is a risk. Every risk needs to be prototyped.

23

Page 24: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

What concepts did they prototype (and how)?

Page 25: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:
Page 26: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

What concepts did they prototype (and how)?

Page 27: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

Determine the risky new ideas

Prototype the risks

Can the drone carry the stuff?

Drone projection

User interaction with projection

Can the camera detect hands?

Can users select from menu?

Can users select symbols?

Can users select outdoors?

Page 28: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

What new risks were learned from instantiation?

28

Page 29: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

Drift: How do you think the prototypers felt?

Page 30: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

Prototyping can feel like this:

30

Idea

Latency

Drift

Battery

Page 31: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

Iterative Design:

31

Idea Product

new concept new concept new concept

Design

PrototypeEvaluate

Design

PrototypeEvaluate Design

PrototypeEvaluate

Every new concept is a risk. Every risk needs to be prototyped.

Page 32: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

Multiple Video project

Page 33: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

Your examples! For each idea, is it specific?what person uses what videos and how they interact with it to achieve a goal.

For all the ideas, what are the major risks, and how should we prototype them?

33

Page 34: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

Language learning

Tonal languages like Chinese and Vietnamese can be challenging to learners whose native languages don’t have tones. For example, the Vietnamese ma means “ghost,” but with different tones, má can mean “mother” while mà means “but.” An interface can have videos for each of the different tones grouped by vowel to help language learners distinguish between tones. This can help students familiarize themselves with tones.

34

what person uses what videos and how they interact with it to achieve a goal.

Page 35: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

Fitness

For a person trying to create a regimented workout routine: allow the user to save workout videos to a calendar so that he/she can see each day of the month and select the folder on that day that will contain the exercises to be completed.allow the user to add notes indicating the number of reps, amount of time, and weight to use for each exercise.

35

what person uses what videos and how they interact with it to achieve a goal.

Page 36: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

Health

Visualizing disease progression…When user wants to share a video with other users, user may want to hide some sensitive parts of the video since health information is sensitive and should be protected. Allow user to blur areas of video for protection.

36

what person uses what videos and how they interact with it to achieve a goal.

Page 37: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

Dance class

For workout instructors trying to plan a class: allow instructors to drag/drop music videos to create a playlist for the class. The playlist should show the total time of the videos so that the instructor knows how many songs to add to make it the length of the class.

37

what person uses what videos and how they interact with it to achieve a goal.

Page 38: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

Travel planning

Planning daily tourist itinerary by using video maps to chart out what is near one another (similar to google maps), having transportation automatically align it self to day schedule, and restaurant recommendations pop up in each area

38

what person uses what videos and how they interact with it to achieve a goal.

Page 39: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

Musicians

Musicians learning a song that has been covered by multiple artists need to be able listen and compare each version at multiple sections without needing to restart the video each time in order to understand the different ways the track can be interpreted.

39

what person uses what videos and how they interact with it to achieve a goal.

Page 40: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

Beauty

Show multiple videos side-by-side to demonstrate how eyeshadow/eyeliner techniques differ based on eyeshape and eyelid types

40

what person uses what videos and how they interact with it to achieve a goal.

Page 41: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

GIF Creation

Finding the perfect GIF moment from several videos of the same thing

41

what person uses what videos and how they interact with it to achieve a goal.

Page 42: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

Iterative Design:

42

Idea Product

new concept

Design

PrototypeEvaluate

Every new concept is a risk. Every risk needs to be prototyped.

Page 43: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

What are some of the risks? ! Learn tones in Chinese and Vietnamese! Video workout calendar! Visualize disease progression! Collaborative Workout mix! Tourism videos near an area! Compare song performances! How to apply eyeliner! GIF Creation

43

Page 44: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

Iteration 1: Basic Concepts/Risks! Do the videos exist?! Can you get them on your own webpage?! Can you press play programmatically?

44

Page 45: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

Milestone #3: (due noon Wed)! For 3 ideas:! State the problem in terms of :! Do the videos exist? (pick good videos)

! For any video: ! How to get them on the screen?! Do do you press play programmatically?

! Reflection:! What unexpected things did you learn?

! Post it to piazza, with screenshots of your videos and implementation 45

what person uses what videos and how they interact with it to achieve a goal.

Page 46: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

Summary

Page 47: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:
Page 48: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

So far, you have brainstormed ideas

48

! Ideas are a good starting point.! But ideas are cheap! Let people steal your ideas.! Execution is all that matters.

Page 49: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

How do we get from idea to execution?

49

Idea Product

Page 50: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

The Waterfall Model is the intuitive execution process. Problem: It cannot accommodate unknowns and risks

50

Design

ImplementFix bugs

Finished Product!

RequirementsIdeaPhone + IPod + Internet

* One button* Touch Screen* Soft keyboard

Page 51: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

Iterative Design mitigates risk:

51

Idea Product

Every new concept is a risk. Every risk needs to be prototyped.

Design

PrototypeEvaluate

Design

PrototypeEvaluate Design

PrototypeEvaluate

Page 52: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

Iterative Design mitigates risk:

52

Idea Product

Every new concept is a risk. Every risk needs to be prototyped.

Design

PrototypeEvaluate

Design

PrototypeEvaluate Design

PrototypeEvaluate

Touch screen Soft keyboard One button

Page 53: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

Determine the risky new ideas

Prototype the risks

Can the drone carry the stuff?

Drone projection

User interaction with projection

Can the camera detect hands?

Can users select from menu?

Can users select symbols?

Can users select outdoors?

Page 54: Iterative Design - Columbia Universitycoms4170.cs.columbia.edu/2018-spring/slides/coms4170-15... · 2018-03-27 · The Waterfall Model is the intuitive execution process. Problem:

Milestone #3: (due noon Wed)! For 3 ideas:! State the problem in terms of :! Do the videos exist? (pick good videos)

! For any video: ! How to get them on the screen?! Do do you press play programmatically?

! Reflection:! What unexpected things did you learn?

! Post it to piazza, with screenshots of your videos and implementation 54

what person uses what videos and how they interact with it to achieve a goal.