1. Copyright © 2004 by Prentice Hall
Chapter 4: Content Organization
User-Centered Website Development: A Human-Computer Interaction Approach
Chapter 4: Content Organization
Copyright © 2004 by Prentice Hall
Copyright © 2004 by Prentice Hall

2. Copyright © 2004 by Prentice Hall
Chapter 4: Content Organization
Daniel D. McCracken
City College of New York
Rosalee J. Wolfe
DePaul University
With a foreword by:
Jared M. Spool, Founding Principal,
User Interface Engineering
PowerPoint slides by Dan McCracken, with thanks to Rosalee Wolfe and S. Jane Fritz, St. Joseph’s College
Chapter 4: Content Organization
Copyright © 2004 by Prentice Hall
Copyright © 2004 by Prentice Hall

3. Copyright © 2004 by Prentice Hall
Chapter 4: Content Organization
Credits
Slide 17: Courtesy of autobytel.com.
Slide 19: Courtesy of the Bank of Montreal.
Slide 23: Courtesy of Nordstrom, Inc.
Slide 31: ©2002 General Motors Corporation. Used with permission GM Media Archives.
Chapter 4: Content Organization
Copyright © 2004 by Prentice Hall
Copyright © 2004 by Prentice Hall

4. Copyright © 2004 by Prentice Hall
Chapter 4: Content Organization
4. Content Organization
In this chapter you will learn about:
Organizational schemes: classification systems for organizing content into groups
Organizational structures: defining the relationships among the groups
Research and interview techniques: How to discover a way to organize things so people can find what they want
Controlled vocabularies and thesauri
A central chapter in development of HCI as applied to website design. Chapters 2 and 3 laid necessary groundwork for it; Chapters 5 and 6 build on it.
A key idea: how do we discover the users “categories”? That’s a very abstract way of asking, “How would my user group things, and under what names?” The issue, of course, is what we put on the homepage to give the user a sense that when he clicks on a button that action has a high probability of taking him closer to his goal.
Real life example. Two students in my course did a final project intended for eventual commercial use; it was on training in automotive electronics for mechanics. In user testing two of their subjects could not find a course that was one of the tasks. Problem? My students had listed it under “Advanced Courses.” That’s how it seemed to them, knowing the subject matter. That was their category, but it wasn’t the user’s category. They were amazed that user testing had turned up a very concrete instance of this abstruse-sounding concept. Nice validation of the course from students!
Look for stories like this, to get students to see why the chapter is important. Or demo real websites that are hard to use because the designers didn’t take this issue into account.
Chapter 4: Content Organization
Copyright © 2004 by Prentice Hall
Copyright © 2004 by Prentice Hall

5. Graphic overview: scheme and structure
Chapter 4: Content Organization
Graphic overview: scheme and structure
You have a mass of content that you want your users to be able to find
Fact 8
Fact 2
Fact 19
Fact 1
Fact 17
Fact 12
Fact 9
Fact 15
Fact 4
Fact 13
Fact 11
Fact 6
Fact 16
Fact 10
Fact 7
Fact 14
Fact 5
Fact 3
Fact 18
Fact 20
Chapter 4: Content Organization
Copyright © 2004 by Prentice Hall
Copyright © 2004 by Prentice Hall

6. How to Organize so Users Can Find Things?
Chapter 4: Content Organization
How to Organize so Users Can Find Things?
First, group related things, forming the groups in terms of the way users think. (How? Keep reading.)
Fact 19
Fact 9
Fact 15
Fact 4
Fact 6
Fact 13
Fact 12
Fact 20
Fact 14
Fact 3
Fact 16
Fact 8
Fact 5
Fact 7
Fact 18
Fact 17
Fact 10
Fact 1
Fact 2
Fact 11
Chapter 4: Content Organization
Copyright © 2004 by Prentice Hall
Copyright © 2004 by Prentice Hall

7. This is an organizational scheme
Chapter 4: Content Organization
This is an organizational scheme
Now give names to the groups, or have the users do that
Group D
Group A
Group E
Fact 19
Fact 9
Fact 15
Fact 4
Fact 6
Fact 13
Fact 12
Fact 20
Fact 14
Fact 3
Fact 16
Fact 8
Fact 5
Fact 7
Group B
Group C
Fact 18
Fact 17
Fact 10
Fact 1
Fact 2
Fact 11
Chapter 4: Content Organization
Copyright © 2004 by Prentice Hall
Copyright © 2004 by Prentice Hall

8. Next: how do the groups relate to each other?
Chapter 4: Content Organization
Next: how do the groups relate to each other?
Perhaps in a hierarchy:
Chapter 4: Content Organization
Copyright © 2004 by Prentice Hall
Copyright © 2004 by Prentice Hall

9. How do the groups relate to each other, continued
Chapter 4: Content Organization
How do the groups relate to each other, continued
Perhaps with hyperlinks:
Chapter 4: Content Organization
Copyright © 2004 by Prentice Hall
Copyright © 2004 by Prentice Hall

10. Those are two organizational structures
Chapter 4: Content Organization
Those are two organizational structures
Remember:
A scheme groups similar things together
A structure shows how those groups are related
End of introductory overview; now let’s get back to the details of organizational schemes and organizational structures
And how we discover how users think: how they see the groupings
This scheme/structure distinction just has to be memorized. “Structure” conveys the idea of the relationship among things, so that makes some sense. “Scheme” doesn’t say anything to me. But once you can remember that the key words and “scheme” and “structure,” and that the latter means group relationships, then by elimination “scheme” must mean how groups are formed.
Sorry if this sounds too elementary to need comment. I’ve had to put some effort into getting it into long-term memory, and I can certify that students have trouble getting it into short-term memory. And we do have to have the two words clear, for sensible discussion of the rest of the chapter.
Chapter 4: Content Organization
Copyright © 2004 by Prentice Hall
Copyright © 2004 by Prentice Hall

11. 4.2 Organizational Schemes
Chapter 4: Content Organization
4.2 Organizational Schemes
Familiar in everyday life:
Phone book
Appointment book
Shopping mall diagram with store locations
You don’t ask a user, “What are your categories?” of course. Nobody would know what you were talking about. Later in the chapter we study how to get at that information.
Chapter 4: Content Organization
Copyright © 2004 by Prentice Hall
Copyright © 2004 by Prentice Hall

12. These are exact organizational schemes
Chapter 4: Content Organization
These are exact organizational schemes
Alphabetical: phone book, for example
Chronological: appointment book, for example
Geographical: shopping mall diagram, for example
Chapter 4: Content Organization
Copyright © 2004 by Prentice Hall
Copyright © 2004 by Prentice Hall

13. Copyright © 2004 by Prentice Hall
Chapter 4: Content Organization
Not always possible
Where can I find sardines packed in water, with no salt added?
In the canned fish section?
In the dietetic foods section?
Chapter 4: Content Organization
Copyright © 2004 by Prentice Hall
Copyright © 2004 by Prentice Hall

14. Supermarket is an example of an ambiguous organizational scheme
Chapter 4: Content Organization
Supermarket is an example of an ambiguous organizational scheme
“Ambiguous” often has a negative connotation, which is not intended here. We use it to describe organizational situations where there is more than one reasonable way to group things, as with the low-sodium tomato soup.
We identify four types of ambiguous organizational schemes:
Topical
Task-oriented
Audience-specific
Metaphor-driven
Chapter 4: Content Organization
Copyright © 2004 by Prentice Hall
Copyright © 2004 by Prentice Hall

15. Topical organizational scheme
Chapter 4: Content Organization
Topical organizational scheme
Organizes content by subject
Examples:
Library subject index
Encyclopedia
Chapter titles in textbooks
Website home pages (usually combined with other schemes as well)
Chapter 4: Content Organization
Copyright © 2004 by Prentice Hall
Copyright © 2004 by Prentice Hall

16. Task-Oriented Organizational Scheme
Chapter 4: Content Organization
Task-Oriented Organizational Scheme
Organizes content by what user wants to do.
Chapter 4: Content Organization
Copyright © 2004 by Prentice Hall
Copyright © 2004 by Prentice Hall

17. Task-oriented organizational scheme
Chapter 4: Content Organization
Task-oriented organizational scheme
Example: Autobytel.com
Chapter 4: Content Organization
Copyright © 2004 by Prentice Hall
Copyright © 2004 by Prentice Hall

18. Audience-specific organizational scheme
Chapter 4: Content Organization
Audience-specific organizational scheme
Useful when there are two or more distinct user groups
User may navigate to appropriate page and bookmark it
Chapter 4: Content Organization
Copyright © 2004 by Prentice Hall
Copyright © 2004 by Prentice Hall

19. Audience-specific organizational scheme
Chapter 4: Content Organization
Audience-specific organizational scheme
Example: Bank of Montreal
Specific audiences
Chapter 4: Content Organization
Copyright © 2004 by Prentice Hall
Copyright © 2004 by Prentice Hall

20. Metaphor-driven organizational scheme
Chapter 4: Content Organization
Metaphor-driven organizational scheme
Shows group by a visual metaphor.
Not many examples, because it is difficult to find metaphors that will work with all users.
Possible example: pet supply store:
This slide may raise the question of how ones distinguishes an icon from a metaphor. It’s a fine line. In literary usage, a metaphor suggests a comparison: “My love is a red, red rose.” If you tried to turn that into a visual metaphor, I guess you’d put up a picture of rose and hope your users understood that to mean “my significant other.” Attempts to do this on websites have a very bad track record.
See Figures 6.13 and 6.21 for an example of how well-intentioned metaphors/icons can utterly fail to convey meaning—even when devised by graphic design experts for a homogeneous audience.
All that being said, are these metaphors? (They are not in the book, by the way.) In this context, I don’t mean the graphic of a dog to stand for “my best friend”—I mean it to say, “Click here and you’ll get to the page for dog stuff.”
In the book we don’t spend major time on this kind of issue. You can find a literature on it in a place like the SIGCHI bibliography; people do worry about it.
Chapter 4: Content Organization
Copyright © 2004 by Prentice Hall
Copyright © 2004 by Prentice Hall

21. Copyright © 2004 by Prentice Hall
Chapter 4: Content Organization
See the problem?
This is a hamster, but what if your user thinks it’s a rat, and hates rats?
Anyway the click-art identification says it’s a hamster. I say it’s a rat, and I hate it.
Chapter 4: Content Organization
Copyright © 2004 by Prentice Hall
Copyright © 2004 by Prentice Hall

22. Hybrid organizational scheme
Chapter 4: Content Organization
Hybrid organizational scheme
Combines multiple organizational schemes
Quite common, but must be done with care to avoid confusion
Example: Nordstrom
Chapter 4: Content Organization
Copyright © 2004 by Prentice Hall
Copyright © 2004 by Prentice Hall

23. Hybrid organizational scheme example
Chapter 4: Content Organization
Hybrid organizational scheme example
Chapter 4: Content Organization
Copyright © 2004 by Prentice Hall
Copyright © 2004 by Prentice Hall

24. 4.3 Organizational Structures
Chapter 4: Content Organization
4.3 Organizational Structures
Review:
Organizational schemes create groups
Organizational structures define the relations between groups
One more time! Ask for examples, for review. We need this concept, but the language is unfamiliar.
Chapter 4: Content Organization
Copyright © 2004 by Prentice Hall
Copyright © 2004 by Prentice Hall

25. Types of organizational structures
Chapter 4: Content Organization
Types of organizational structures
Hierarchy
Hypertext
Database
Chapter 4: Content Organization
Copyright © 2004 by Prentice Hall
Copyright © 2004 by Prentice Hall

26. Hierarchical organizational structure
Chapter 4: Content Organization
Hierarchical organizational structure
Structuring by rank or level
A tree, in computer science terms
Chapter 4: Content Organization
Copyright © 2004 by Prentice Hall
Copyright © 2004 by Prentice Hall

27. An organization chart is a hierarchy
Chapter 4: Content Organization
An organization chart is a hierarchy
President
Marketing
Research
Manufacturing
Distribution A B C D E
Etc.
Chapter 4: Content Organization
Copyright © 2004 by Prentice Hall
Copyright © 2004 by Prentice Hall

28. Copyright © 2004 by Prentice Hall
Chapter 4: Content Organization
Definitions
Breadth of a hierarchy: the number of links available at each level
Depth of a hierarchy: the number of levels
Broad shallow hierarchies offer many choices at each level
Narrow deep hierarchies require many clicks to get to the bottom level
Users prefer broad shallow hierarchies
Chapter 4: Content Organization
Copyright © 2004 by Prentice Hall
Copyright © 2004 by Prentice Hall

29. Hypertext organizational structures
Chapter 4: Content Organization
Hypertext organizational structures
Almost always combined with other structures
Consists of adding links to a page
Hard to find a commercial website that does not use hypertext
Hypertext may be relatively new as a part of GUI navigation, but from another standpoint it is one of the intellectual foundations on which the Web was built. See the brief history section at the beginning of the Appendix, and in particular look at the 1945 paper by Vannevar Bush, “As We May Think.”
Chapter 4: Content Organization
Copyright © 2004 by Prentice Hall
Copyright © 2004 by Prentice Hall

30. Database organizational structures
Chapter 4: Content Organization
Database organizational structures
Database organizational structure provides a bottom-up view, whereas a hierarchy provides a top-down
Both have their place
In a database structure the user fills in data, and is then taken directly to the right page. One click, when it works ideally.
Chapter 4: Content Organization
Copyright © 2004 by Prentice Hall
Copyright © 2004 by Prentice Hall

31. Database example: selecting a car model
Chapter 4: Content Organization
Database example: selecting a car model
Chapter 4: Content Organization
Copyright © 2004 by Prentice Hall
Copyright © 2004 by Prentice Hall

32. Controlled vocabulary
Chapter 4: Content Organization
Controlled vocabulary
Predetermined set of terms that describe a specific domain
There are no synonyms
Only one term describes a concept
Can help combat the ambiguity of English
Chapter 4: Content Organization
Copyright © 2004 by Prentice Hall
Copyright © 2004 by Prentice Hall

33. Copyright © 2004 by Prentice Hall
Chapter 4: Content Organization
Thesaurus
Contains
Synonyms
Broader terms
Narrower terms
Variants
Used in conjunction with a controlled vocabulary, makes searching more effective
Chapter 4: Content Organization
Copyright © 2004 by Prentice Hall
Copyright © 2004 by Prentice Hall

34. 4.5 Research and Interview Techniques
Chapter 4: Content Organization
4.5 Research and Interview Techniques
Problem: how do you know what your users’ categories are?
Will they look for a sweater under Winter Wear or under Men’s Clothing?
What do they expect to find under “About Us”?
What can you put on the home page for a college that will lead most directly to the tuition?
You don’t know!
Not until you ask your users . . .
. . . who, of course, have no idea what you mean by “What are your categories?”
Chapter 4: Content Organization
Copyright © 2004 by Prentice Hall
Copyright © 2004 by Prentice Hall

35. Card sorting provides an answer
Chapter 4: Content Organization
Card sorting provides an answer
Devise a list of about 40 questions that a user might have
Write each question on a card; number cards on back
Ask each user to sort the cards into piles, where the cards in each pile seem related to each other
Ask the user to give a name to each pile
Do this with ten or more users
Do statistical analysis of the clustering in the groups
It would take a whole PowerPoint presentation to show the details of card sorting. We can’t do that here. That is not to minimize the importance of the subject. Doing a card sorting homework is a great way to get students involved in learning about users. Forces them to go out and talk to people, a skill that generally needs development.
Chapter 4: Content Organization
Copyright © 2004 by Prentice Hall
Copyright © 2004 by Prentice Hall

36. Copyright © 2004 by Prentice Hall
Chapter 4: Content Organization
Cluster analysis
Can be done “be eyeball,” just looking at the piles for patterns
Much better: use cluster analysis software
See the text’s companion website to download CardZort, by Jorge Toro of DePaul University
Chapter 4: Content Organization
Copyright © 2004 by Prentice Hall
Copyright © 2004 by Prentice Hall

37. Copyright © 2004 by Prentice Hall
Chapter 4: Content Organization
Summary
In this chapter you learned about:
Organizational schemes: classification systems for organizing content into groups:
Exact: Alphabetical, Chronological, Geographical
Ambiguous: Topical, Task-oriented, Audience-specific, metaphor-driven
Organizational structures: defining the relationships among the groups:
Hierarchy, Hypertext, Database
Controlled vocabularies and thesauri
Card sorting
Chapter 4: Content Organization
Copyright © 2004 by Prentice Hall
Copyright © 2004 by Prentice Hall