SIMS 213: User Interface Design & Development

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

2. 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 '96, http://jthom.best.vwh.net/usability/affinity.htm

3. 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. From James Horn, http://jthom.best.vwh.net/usability/affinity.htm

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/ • Main idea: • Walk up kiosk for McDonalds • Main goals • Easy • Fast

6. Interaction Flow Example

7. Interaction Flow Example

8. Interaction Flow Example

9. Interaction Flow Example

18. Interaction Flow Example

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