What do you hate most about the web? Number one answer: I can’t find what I’m looking for!! Solution: Good organization.

4. Content Organization In this chapter you will learn about: 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. Copyright © 2004 by Prentice Hall

Graphic overview: scheme vs. 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

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

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

Next: how do the groups relate to each other? Perhaps in a hierarchy:

How do the groups relate to each other, continued Perhaps with hyperlinks:

Two Organizational Systems Chapter 4: Content Organization Two Organizational Systems Organizational scheme : a classification system for content; method of placing items into categories Organizational structure: a system for relating the categories 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. Copyright © 2004 by Prentice Hall

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 List of popular restaurants Scheme Categories Exact Ambiguous 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. Copyright © 2004 by Prentice Hall

Exact Organizational Schemes Alphabetical: e.g. phone book Chronological: e.g. appointment book Geographical: e.g. shopping mall diagram

Exact not always possible/practical How is the best way to organize the list of popular restaurants? By food type By location By average meal cost Where can I find sardines packed in water, with no salt added? In the canned fish section? In the dietetic foods section?

Ambiguous organizational schemes Often has a negative connotation, not intended here. Used to describe organizational situations where there is more than one reasonable way to group things

Ambiguous organizational schemes Four possible ambiguous organizational schemes: Topical Task-oriented (functions, services) Audience-specific (age, profession) Metaphor-driven Hybrid – combination of above

Topical organizational scheme Organizes content by subject Examples: Library subject index Chapter titles in textbooks Website home pages (usually combined with other schemes as well)

Task-Oriented Organizational Scheme Organizes content by what user wants to do. Log-in Register Order Send email

Task-oriented organizational scheme Example: Autobytel.com

Audience-specific organizational scheme Useful when there are two or more distinct user groups User may navigate to appropriate page and bookmark it Example: textbook web site Instructor section Student section

Audience-specific organizational scheme Example: Bank of Montreal Specific audiences

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. 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. Copyright © 2004 by Prentice Hall

Hybrid organizational scheme Combines multiple organizational schemes Quite common, but must be done with care to avoid confusion

Hybrid organizational scheme example

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. Copyright © 2004 by Prentice Hall

Types of organizational structures Hierarchy Hypertext Database

Hierarchical organizational structure Structuring by rank or level A tree, in computer science terms Top-down

An organization chart is a hierarchy President Marketing Research Manufacturing Distribution A B C D E Etc.

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

Disadvantage of Hierarchy Lack of links across levels May require users to back up excessively

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 Can be confusing 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.” Copyright © 2004 by Prentice Hall

Database organizational structures Database organizational structure provides a bottom-up view, whereas a hierarchy provides a top-down Both have their place User fills in data, then taken directly to the right page. Preferably, one click! Search Engines

Database example: selecting a car model

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

Controlled Vocabulary Example of bad use Pet web site – dog, doggie, pooch

Thesaurus Contains Synonyms Broader terms Narrower terms Variants Used in conjunction with a controlled vocabulary, makes searching more effective

Evaluating a Web Site Examine site for Objects (nouns) Actions (verbs) Consider the relationships among them

4.5 Research & 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?

Research and Interview Techniques 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 Card sorting can help Make a list of about 40 questions a user might have Write each question on card; number cards on back Ask user to sort the cards into related piles, Ask user to 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. Copyright © 2004 by Prentice Hall

Cluster analysis Can be done “be eyeball,” just looking at the piles for patterns Much better: use cluster analysis software

Chapter Summary 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

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.