lecture13

SIMS 213: User Interface Design & Development: 

SIMS 213: User Interface Design & Development Marti Hearst Thurs, March 3, 2005

Today: 

Today Content Layout Technique: Wireframing Content Expression Normalization: Card Sorting

Wireframing: 

Wireframing What is the main idea? Separate content from layout and display Graphic Design: Use the page layout to signal the flow of interaction Group conceptually related items together Nielsen: What does the layout communicate? Test if a page of content becomes more usable because of the layout A template (for a home page) should contain what items?

How WireFraming Fits In: 

How WireFraming Fits In Kelly Goto & Eric Ott of Macromedia http://www.gotomedia.com/macromedia/monterey/architecture/

Slide5: 

From http://www.gotomedia.com/macromedia/monterey/architecture/

Slide6: 

From http://www.gotomedia.com/macromedia/monterey/architecture/

How to Test A Layout: 

How to Test A Layout Study conducted by Thomas S. Tullis from Fidelity Investments in 1998 Assessed the usability of five alternative template designs for their intranets. Method: Show templates with “greeked” text Draw labeled boxes around each page corresponding to 9 elements No overlapping allowed Indicate if something appears not to be there

The Elements: 

The Elements Main content selections for this page Page title Person responsible for this page Intranet-wide navigation (e.g., intranet home, search) Last updated date Intranet identifier/logo Site navigation (e.g, major sections of this section of the intranet) Confidentiality/security (e.g, Public, Confidential, etc.) Site news items

Slide9: 

From http://www.useit.com/alertbox/980517.html

Slide10: 

From http://www.useit.com/alertbox/980517.html

Slide11: 

From http://www.useit.com/alertbox/980517.html

Slide12: 

From http://www.useit.com/alertbox/980517.html

Nielsen Wireframing Example: 

Nielsen Wireframing Example Different parts of the designs scored better Best parts were taken from each design and combined Resulted in an overall better score

Results of Study: 

Results of Study

The Vocabulary Problem: 

The Vocabulary Problem If you ask a set of people to describe a set of things there is little overlap in the results. Some nice studies have been done on this: Furnas, Landauer, Gomez, Dumais: The Vocabulary Problem in Human-System Communication. Commun. ACM 30(11): 964-971 (1987)

The Vocabulary Problem: 

The Vocabulary Problem Idea: see how often people agree on word choice Data sets examined (# of participants): Main verbs used by typists to describe edit types (48) Commands for a hypothetical “message decoder” computer program (100) First word used to describe 50 common objects (337) Categories for 64 classified ads (30) First keywords for a each of a set of recipes (24) Furnas, Landauer, Gomez, Dumais: The Vocabulary Problem in Human-System Communication. Commun. ACM 30(11): 964-971 (1987)

The Vocabulary Problem: 

The Vocabulary Problem We get really bad results If one person assigns the name, the probability of it NOT matching with another person’s is about 80% Furnas, Landauer, Gomez, Dumais: The Vocabulary Problem in Human-System Communication. Commun. ACM 30(11): 964-971 (1987)

The Vocabulary Problem: 

The Vocabulary Problem What if we pick the most commonly chosen words as the standard? Still not good: Furnas, Landauer, Gomez, Dumais: The Vocabulary Problem in Human-System Communication. Commun. ACM 30(11): 964-971 (1987)

The Solution? Card Sorting: 

The Solution? Card Sorting Content-focused Two main purposes Determine how to organize a set of information Determine a collective mental model of the collection’s contents Determine good labels for the items in that organization How is it done? User-centered Write topics on cards Ask different participants to organize them for a given task Need strategies for “difficult” cards Consolidate the results Do another round for labels

Consolidating Card Sorting Results: 

Consolidating Card Sorting Results At root of all categorization techniques is question: “How far is A from B?” Proximity / similarity matrix can organize the results Each cell shows how often 2 items were in the same category Self correlation

Analyzing Results viaHierarchical Clustering: 

Analyzing Results via Hierarchical Clustering Continental Buick Cadillac Mercedes Corvette Jaguar Firebird Camaro Monte Carlo Capri Chevy Vega Dart Volkswagen Cluster Analysis for dataset about cars Advantages Suggests a structural solution Disadvantages Prescriptive Averages over different dimensions

Analyzing Results via Multidimensional Scaling (MDS): 

Analyzing Results via Multidimensional Scaling (MDS)

Advantages of Multidimensional Scaling (MDS): 

Advantages of Multidimensional Scaling (MDS) Hints at possible solutions rather than prescribes. Tells you the possibilities, leaves specifics of solution to you. Dimensions (axes) can suggest facets. Similarity maps are easy to understand Helps identify which dimensions are important Do cluster analysis using the axes identified by MDS Cluster Analysis and MDS are complementary

How Many Participants forCard Sorting?: 

How Many Participants for Card Sorting? How many participants? Tullis and Wood ’04, discussed by Nielsen: http://home.comcast.net/%7Etomtullis/publications/UPA2004CardSorting.pdf http://www.useit.com/alertbox/20040719.html Study included 168 participants, 46 cards Nielson concludes: 5 for usability studies Evaluating and reacting to an existing design Fewer potential responses 15 participants for card sorting (to get 90% agreement) Generating something, so more diversity in responses (Numbers based on only one site!) (Interface design should interweave generating and testing)

Let’s Do Some Sorting!: 

Let’s Do Some Sorting! There are many tools out there Let’s try WebSort http://websort.net