sims 213: user interface design & development marti hearst tues, feb 26, 2002
Post on 20-Dec-2015
216 views
TRANSCRIPT
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