Cooper Interaction Design Process: Iteration

Dr. Cindy CorritoreCreighton University

ITM 734Fall 2005

Corritore, 2005

goal-directed design• Step 1 – research• Step 2 – modeling• Step 3 – requirements definition• Step 4 – framework

• Step 5 - Iteration– purpose is to turn interaction framework into a

complete, cohesive product design

Corritore, 2005

Iteration steps• basically …

1. add more detail to your scenarios (widget level)

2. repeat for each area of screen, all at widget level

Corritore, 2005

steps to iteration1. Look back at functional and data

elements for the pane/view – rewrite at widget level

2. Grouping based on scenarios – determine flow of interaction across screen and between elements

3. Sketch - more detailed sketches4. Refine key path scenarios to match5. Validate design6. Repeat

Corritore, 2005

example – shopping cart scenario1. a) What detailed data and functional needs does she have

here?– know what products she has chosen– know how much the products cost– be able to remove items– be able to make the purchase– know the total priceb) What elements fit these needs?– display thumbnail and name of each product– display price– remove button for each product in list– checkout button– total display that includes shipping, handling, tax, etc.

Corritore, 2005

example – shopping cart scenario

2. Grouping based on scenarios – She will look at the products she has, maybe eliminate a couple, check the cost, then check out (so flow should be in this order)

– products at top (first added at top, etc)– price info and ‘remove’ button with each thumbnail– subtotal, shipping, tax, total near bottom– ‘checkout’ button at bottom– know the Real cost (everything)

3. More detailed sketches4. Refine key path scenarios5. Validate 6. Repeat

Corritore, 2005

example • http://www.cindycorritore.com/734/cooper_

examples/software_co_03/project_report.html#final – follow the links (follows presentation)

• C:\Documents and Settings\clc90595\My Documents\My Courses\projects\fdr fall03\team1\public_html\index.html – knowledge management system