SIMS 213: User Interface Design & Development

Marti HearstTues, Feb 26, 2002

From James Horn '96, http://jthom.best.vwh.net/usability/affinity.htm

Affinity Diagrams

A categorization method where users sort various concepts into several categories. Used by a team to organize a large amount of data according to the natural relationships between the items. Also called Card Sorting

From James Horn, http://jthom.best.vwh.net/usability/affinity.htm

How to do it

Form a teamDescribe the issueGenerate idea cardsSort cards into groups– Different ways to resolve conflicts– This is the hard part

Create header cardsDraw the Affinity Diagram– Draw lines connecting the headers, subheaders, and groups.– Connect related groups with lines. – The result looks a lot like a typical organization chart.

Example

Restaurant web siteProcedure:– Team A chooses a topic– Team A brainstorms category labels– Team A gives these labels to Team B

• Each member of Team B makes an independent grouping• Team A then reconciles these different groupings

http://www.sims.berkeley.edu/courses/is213/s02/resources/affinity-diagrams.html

Interaction Flow Example

Example from Last Year: McInterface– Linda Harjono, Saifon Obromsook, John Wai– http://www.sims.berkeley.edu/courses/is213/s01/projects/P2/

Main idea:– Walk up kiosk for McDonalds

Main goals– Easy – Fast

Interaction Flow

Example

Interaction Flow Example

Interaction Flow Example

Interaction Flow Example

Interaction Flow

Example

Interaction Flow Example

Some details missing from the diagramFirst branch not labeled correctlyLet’s complete the example