1. SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 26, 2002

2. 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

3. From James Horn, http://jthom.best.vwh.net/usability/affinity. htm How to do it Form a team Describe the issue Generate idea cards Sort cards into groups –Different ways to resolve conflicts –This is the hard part Create header cards Draw 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.

4. Example Restaurant web site Procedure: –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

5. Interaction Flow Example Example from Last Year: McInterface –Linda Harjono, Saifon Obromsook, John Wai –http://www.sims.berkeley.edu/courses/is213/s01/projects/P2/http://www.sims.berkeley.edu/courses/is213/s01/projects/P2/ Main idea: –Walk up kiosk for McDonalds Main goals –Easy –Fast

6. Interaction Flow Example

19. Some details missing from the diagram First branch not labeled correctly Let’s complete the example