Upload
conan-trevino
View
27
Download
4
Tags:
Embed Size (px)
DESCRIPTION
SIMS 213: User Interface Design & Development. Marti Hearst Thurs, March 3, 2005. Today. Content Layout Technique: Wireframing Content Expression Normalization: Card Sorting. Wireframing. What is the main idea? Separate content from layout and display Graphic Design: - PowerPoint PPT Presentation
Citation preview
SIMS 213: User Interface Design & Development
Marti HearstThurs, March 3, 2005
Today
Content Layout Technique: WireframingContent Expression Normalization: Card Sorting
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
Kelly Goto & Eric Ott of Macromedia
http://www.gotomedia.com/macromedia/monterey/architecture/
From http://www.gotomedia.com/macromedia/monterey/architecture/
From http://www.gotomedia.com/macromedia/monterey/architecture/
How to Test A Layout
Study conducted by Thomas S. Tullis from Fidelity Investments in 1998Assessed 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
1. Main content selections for this page 2. Page title 3. Person responsible for this page 4. Intranet-wide navigation (e.g., intranet home, search) 5. Last updated date 6. Intranet identifier/logo 7. Site navigation (e.g, major sections of this section of the
intranet) 8. Confidentiality/security (e.g, Public, Confidential, etc.) 9. Site news items
From http://www.useit.com/alertbox/980517.html
From http://www.useit.com/alertbox/980517.html
From http://www.useit.com/alertbox/980517.html
From http://www.useit.com/alertbox/980517.html
Nielsen Wireframing Example
Different parts of the designs scored betterBest parts were taken from each design and combinedResulted in an overall better score
Results of Study
CorrectPage
Elements
Subjective Appeal
(-3 to +3)
Template 1 52% +1.3
Template 3 67% +0.9
Final Design 72% +2.1
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
Idea: see how often people agree on word choiceData 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
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
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
Content-focusedTwo 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
Slide adapted from Rashmi Sinha's, www.rashmisinha.com
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
Cheese Burger
Chicken McNuggets
Fish sandwich
French Fries
Shake
Cheese Burger 7 6 2 4 5
Chicken McNuggets 6 7 4 3 2
Fish sandwich 2 4 7 3 1
French Fries 4 3 3 7 4
Shake 5 2 1 4 7
Self correlation
Slide adapted from Rashmi Sinha's, www.rashmisinha.com
Analyzing Results viaHierarchical Clustering
ContinentalBuick
CadillacMercedesCorvette
JaguarFirebirdCamaro
Monte CarloCapri
ChevyVegaDart
Volkswagen
Cluster Analysis for dataset about carsAdvantages– Suggests a structural solution
Disadvantages– Prescriptive– Averages over different
dimensions
Slide adapted from Rashmi Sinha's, www.rashmisinha.com
Analyzing Results via Multidimensional Scaling (MDS)
Slide adapted from Rashmi Sinha's, www.rashmisinha.com
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 understandHelps 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?– 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!
There are many tools out thereLet’s try WebSort – http://websort.net