Designing Information Architectures Marti Hearst UC Berkeley SIMS April 28, 1999

Outline l Informative Web Site Components l Creating Information Structure –Types of category structures –Why categorization is difficult l Incorporating categories into interface design

Web Site Design l Seems to have three main components: –Information Design –Navigation Structure –Graphic Design l This is new; not standard HCI l Two accounts: –Investigation by Mark Newman, Berkeley CS –Darrell Sano, Designing Large-Scale Web Sites Information Architecture

Adapted from slide by Mark Newman Components of Web Design l Information design –structure, categories of information l Navigation design –interaction with information structure l Graphic design –visual presentation of information and navigation (color, typography, etc.)

Adapted from slide by Mark Newman Design Specialties l Information Architecture –includes management and more responsibility for content l User Interface Design –includes testing and evaluation

Adapted from slide by Melody Ivory Spool et al’s Web Site Usability Issues l Classify each issue –information, navigation, graphic or other design –very rudimentary l Total each category

Adapted from slide by Melody Ivory Ivory’s Web Site Usability Issues (Preliminary) l Web site usability  information “findability”

Adapted from slide by Mark Newman Overview of Newman’s Investigation l Field visits to four companies –three design firms –one design department of web “portal” –in addition: two independent consultants l In situ interviews with designers –placed focus on specific projects l Collection of artifacts –used artifacts to frame discussion

Adapted from slide by Mark Newman Interviewees l 11 interviews total l Training & Education –7 graphic design, 2 computer science, 1 cognitive science, 1 other l Current responsibilities –4 graphic design, 3 UI design, 4 hybrid l Professional experience –7 had < 5 years experience –others 8, 10, 20+

Adapted from slide by Mark Newman Web Site Design Process Implementation Design Preliminary Design Conceptualization Discovery

Adapted from slide by Mark Newman Design Process: Discovery Implementation Design Preliminary Design Conceptualization Discovery Assess needs –understand client’s expectations –determine scope of project –characteristics of users

Adapted from slide by Mark Newman Design Process: Conceptualization Implementation Design Preliminary Design Conceptualization Discovery Begin defining site –Take results from discovery and visualize solutions –Early information design

Adapted from slide by Mark Newman Design Process: Conceptualization l Activities –Brainstorming (collaborative & solo) –Sketching ideas (collaborative & solo) –Defining site structure l Deliverables –Site maps, written reports, presentations l Note: Sano suggests –focus on organizing the content –very abstract structure diagrams at this point, not sketches

Adapted from slide by Mark Newman Design Process: Preliminary Design Implementation Design Preliminary Design Conceptualization Discovery Generate multiple (3- 5) designs –one will be selected for development –navigation design –early graphic design

Adapted from slide by Mark Newman Design Process: Design Implementation Design Preliminary Design Conceptualization Discovery Develop the design –Design is selected in previous stage –Increasing level of detail –Iterate on design

Adapted from slide by Mark Newman Design Process: Preliminary Design l Activities –Sketching designs –Creating mock-ups –Quick and rough l Deliverables –Schematics (a.k.a. templates) –Site maps –Mock-ups –Presentations

Adapted from slide by Mark Newman Design Process: Conceptualization (information design: site map + navigation)

Adapted from slide by Mark Newman Design Process: Conceptualization (information design: site map)

Adapted from slide by Mark Newman Design Process: Preliminary Design (information/navigation design: schematic)

Adapted from slide by Mark Newman Design Process: Preliminary Design Information/navigation design: schematic Note that shading is used to show the information structure; this is NOT meant to show how the page will actually be laid out.

Adapted from slide by Mark Newman Design Process: Preliminary Design (navigation design: storyboard)

Adapted from slide by Mark Newman Design Process: Design l Activities –Creating and refining mock-ups –Graphic design very active –Prototyping l Deliverables –Mock-ups –Prototypes (HTML, Director) –Presentations

Adapted from slide by Mark Newman Design Process: Implementation Implementation Design Preliminary Design Conceptualization Discovery l Prepare design for handoff –Create final deliverable –Specifications and prototypes –As much detail as possible

Duration of design phases Implementation Design Discovery 1-2 weeks 6-8 weeks 2-3 weeks This is not really representative of all the data -- it actually varies widely Conceptualization Preliminary Design

How is the Information Structure Designed?

What Categories Do l Summarize a document according to pre-defined main topics l Compress the many ways of representing a concept into one l Identify which subset of attributes are salient for a collection

Controlled Vocabulary (see Bates 88) l Start with the text of the document l Attempt to “control” or regularize: –The concepts expressed within are »mutually exclusive »exhaustive –The language used to express those concepts »limit the nomal linguistic variations »regulate word order and structure of phrases »reduce the number of synonyms or near-synonyms l Also, provide cross-references between concepts and their expression.

Subject Headings vs. Descriptors l Subject headings -- assign one (or a few) complex heading(s) to the document l Descriptors -- mix and match –How would we describe recipes using each technique?

Subject Heading vs. Descriptors l WILSONLINE –Athletes –Athletes--Heath&Hygiene –Athletes--Nutrition –Athletes--Physical Exams –… –Athletics –Athletics -- Administration –Athletics -- Equipment -- Catalogs –… –Sports -- Accidents and injuries –Sports -- Accidents and injuries -- prevention l ERIC –Athletes –Athletic Coaches –Athletic Equipment –Athletic Fields –Athletics –… –Sports psychology –Sportsmanship

Subject Headings vs. Descriptors l Describe the contents of an entire document l Designed to be looked up in an alphabetical index –Look up document under its heading l Few (1-5) headings per document l Describe one concept within a document l Designed to be used in Boolean searching –Combine to describe the desired document l Many (5-25) descriptors per document

Classification Schemes l Classify all possible concepts. l Goals: –Completely distinct conceptual categories (mutually exclusive) –Complete coverage of conceptual categories (exhaustive)

Hierarchical Classification l Traditional “family-tree” –Each category is successively broken down into smaller and smaller subdivisions –Each level divided out by a “character of division”. Also known as a feature. »Example: distinguish Literature based on: l Language l Genre l Time Period

Hierarchical Classification Literature SpanishFrenchEnglish DramaPoetryProse 18th17th16th DramaPoetryProse 19th18th17th16th19th...

Labeled Categories for Hierarchical Classification l LITERATURE –100 English Literature »110 English Prose l English Prose 16th Century l English Prose 17th Century l English Prose 18th Century l... »111 English Poetry l 121 English Poetry 16th Century l 122 English Poetry 17th Century l... »112 English Drama l 130 English Drama 16th Century l … –200 French Literature

Faceted Classification l Create a separate, free-standing list for each characteristic of division (feature). l Combine features to create a classification.

Faceted Classification and Labeled Catgories l A Language –a English –b French –c Spanish l B Genre –a Prose –b Poetry –c Drama l C Period –a 16th Century –b 17th Century –c 18th Century –d 19th Century l Aa English Literature l AaBa English Prose l AaBaCa English Prose 16th Century l AbBbCd French Poetry 19th Century l BbCd Drama 19th Century

Why is Category Design Difficult?

Defining Category Membership (Lakoff 87) l Necessary and Sufficient Conditions –Every condition must be met. –No other conditions can be required. »Example: A prime number: l An integer divisible only by itself and 1. »Example: bachelor l An unmarried male.

Can category membership be defined? l What are the necessary and sufficient conditions for something to be a game?

Definition of Game l Famous example by Wittgenstein –Classic categories assume clear boundaries defined by common properties (necessary and sufficient conditions) l Counterexample: “Game” –No common properties shared by all games »card games, ball games, Olympic games, children’s games »competition: ring-around-the-rosie »skill: dice games »luck: chess –No fixed boundary; can be extended to new games »video games l Alternative: Concepts related by Family Resemblances

Properties of Categorization l Family Resemblance –Members of a category may be related to one another without all members having any property in common. »Instead, they may share a large subset of traits. »Some attributes are more likely given that others have been seen. –Example: feathers, wings, twittering,... »Likely to be a bird, but not all features apply to “emu” »Unlikely to see an association with “barks”

Properties of Categorization l Centrality –Example: Prime Numbers »Definition: An integer divisible only by itself and 1 »Examples: 1, 2, 3, 5, 7, 11, 13, 17, … –A very clear-cut category. Or is it? »Can one number be “more prime” than another? –Centrality: some members of a category may be “better examples” than others. »Example: robins vs. chickens vs. emus

Properties of Categorization l Characteristic Features (Lakoff 87) –Perceived degree of category membership has to do with which features define the category. –Members usually do not have ALL the necessary features, but have some subset. –Those members that have more of the central features are seen as more central members. –People have conceptions of typical members.

Testing for Centrality/Typicality l Ask a series of questions, compare how long it takes people to answer. –True or false: »An apple is a fruit. »A plum is a fruit. »A coconut is a fruit. »An olive is a fruit. »A tomato is a fruit. –Rosch and Mervis: »The more features a fruit shares with the other fruits, the more typical a member of the class it is.

Characteristic Features –Is a cat on a mat a cat? –Is a dead cat a cat? –Is a photo of a cat a cat? –Is a cat with three legs a cat? –Is a cat that barks a cat? –Is a cat with a dog’s brain a cat? –Is a cat with every cell replaced by a dog’s cells a cat?

Properties of Categorization l Basic-level Categories: –Categories are organized into a hierarchy from the most general to the most specific, but the level that is most cognitively basic is “in the middle” of the hierarchy l Basic-level Primacy: –Basic-level categories are functionally primary with respect to factors including ease of cognitive processing (learning, reasoning, recognition, etc).

Basic Level Categories l Brown 1958, 65, Berlin et al., 1972, 73 l Folk biology: –unique beginner: plant, animal –life form: tree, bush, flower –generic name: pine, oak, maple, elm –specific name: Ponderosa pine, white pine –varietal name: western Ponderosa pine l No overlap between levels l Level 3 is basic –corresponds to genus

Characteristics of Basic-level Categories l Language –People name things more readily at basic level. –Name learned earliest in childhood. –Languages have simpler names at basic level. –Sounds like the “real name”. –Name used more frequently. »Strange to call a dime a coin, a metal object –Names used in neutral context. »There’s a dog on the porch. »There’s a terrier on the porch.

Characteristics of Basic-level Categories l Concepts –Things perceived more holistically at the basic level (rather than by parts). –People interact with basic and more specific levels similarly. –Things are remembered more readily at basic level. –Folk biology categories correspond accurately to scientific biological categories only at the basic level.

Superordinate and Subordinate Levels SUPERORDINATE animal furniture BASIC LEVEL dog chair SUBORDINATE terrier rocker l Children take longer to learn superordinate l Superordinate not associated with mental images or motor actions

Why Categories are Tough –Processes of categorization underlie many of the issues having to do with information organization –Categorization is messier than our computer systems would like –Human categories have graded membership, consisting of family resemblances. »Family resemblance is expressed in part by which subset of features are shared »It is also determined by underlying understandings of the world that do not get represented in most systems –Basic level categories, as well as subordinate and superordinate categories, seem to be cognitively real.

Categories vs. Words l Necessary and Sufficient conditions for Mother? »mother(A,B) -> female(A), gave-birth- to(A,B), same-species(A,B), …, l What about: »Birth mother vs. adoptive mother »Rearing role vs. biological role »Surrogate mother »Cloning l Need to distinguish between the word used and the underlying concept(s) it stands for.

How to Navigate the Information Structure?

How to use such classification structures? l How to browse/navigate them? l How to use them in search?

Keyword Search l PROBLEM: Results not organized

Category Browsing l PROBLEMS: Organization hard to use l Search not well-integrated

Large Category Sets l Problems for User Interfaces » Either too many categories to browse » Or too many docs per category » Docs belong to multiple categories » Need to integrate search » Need to show the documents

Some Design Guidelines l Show the Content l Use Graphics Judiciously l Combine Browsing with Search

Category Search and Browsing Massicotte 88 (cited in Drabenstott & Weller 96) “The problem we are faced with is the undue display length of a browse list under a given search term. … indexes will continue to expand at an ever- increasing rate. This factor alone will eventually make the alphabetical index less and less viable as a method of searching.” How to make use of all that category information?

Browsing vs. Search l Search -> –tell computer what you want –problem: how to navigate results l Browsing -> –computer shows you what it has –problem: how to search organization l Goal: smooth two-way interaction

Integrating Browsing and Search l Classify documents according to familiar terminology l Goal -- Smoothly interlink: –search over categories –search over document contents –browsing of categories –browsing of retrieved documents

HiBrowse (Pollitt 97) Show combinations of categories given that some categories already seen

Another Approach: Lattices l Build a lattice of all category combinations l Place documents within the lattice –e.g., G. Pedersen 93, Carpineto 96 Drug SymptomAnatomy D1S1A1 D2S2A2 D3S3A3

Document 1: [D1 S1 A1] Document 2: [D3 S2 S3] Document 3: [D2 S2 A2] … Dx Sx Ax Dx Sx A1Dx S1 AxD1 Sx Ax Dx S1 A1D1 S1 AxD1 Sx A1 D1 S1 A1 Grouping Combinations in a Lattice

Category Combinations l HiBrowse and Lattices Problem: –Search is not integrated with browsing of categories –HiBrowse: Only see the subset of categories selected (and the corresponding number of documents) –Lattice: See all combinations at once and no other info

Cat-a-Cone: Multiple Simultaneous Categories l Key Ideas: –Separate documents from category labels –Show both simultaneously l Link the two for iterative feedback l Distinguish between: –Searching for Documents vs. –Searching for Categories

Cat-a-Cone Interface

Cat-a-Cone l Catacomb: (definition 2b, online Websters) “A complex set of interrelated things” l Makes use of earlier PARC work on 3D+animation: Rooms Henderson and Card 86 IV: Cone Tree Robertson, Card, Mackinlay 93 Web Book Card, Robertson, York 96

ConeTree for Category Labels l Browse/explore category hierarchy –by search on label names –by growing/shrinking subtrees –by spinning subtrees l Affordances –learn meaning via ancestors, siblings –disambiguate meanings –all cats simultaneously viewable

Collection Retrieved Documents browse Category Hierarchy query terms search

Collection Retrieved Documents search Category Hierarchy browse query terms

Virtual Book for Result Sets –Categories on Page (Retrieved Document) linked to Categories in Tree –Flipping through Book Pages causes some Subtrees to Expand and Contract –Most Subtrees remain unchanged –Book can be Stored for later Re-Use

UWMS Data Mining Workshop Interactive Category Interface l Key: Separate representation of documents from categories –Place categories in 3D animated Tree –Collect retrieved documents into a re- usable “Book” –Link categories from Book to Tree –Innovative query specification

Use of Design Guidelines l Show the Content –full text shown in compact form –multi-category content shown l Use Graphics Judiciously –3D+animation to show large hierarchy –workspace for partial results –separate object representations for linking l Combine Browsing with Search

Integrated Browsing & Search l Search for category labels –type in regular expression l Browse category labels –click on ConeTree –click on links from retrieved docs in Book l Search within document collection –select category labels in ConeTree –type in free text l Browse resulting documents in Book

UWMS Data Mining Workshop Integrating Categories into Queries l P. Srinivasan, IP&M 96, JAMIA 96 l Free text vs. controlled vocabulary –Previous work inconclusive l MeSH can improve retrieval if used in the right way: –Find good documents using free text query –Do relevance feedback on a combination of the categories from these docs with the free text from the query

Kohonen Feature Maps on Text (from Chen et al., JASIS 49(7))

UWMS Data Mining Workshop Comparison Study l H. Chen, A. Houston, R. Sewell, and B. Schatz, JASIS, to appear l Comparison: Kohonen Map and Yahoo l Task: –“Window shop” for interesting home page –Repeat with other interface l Results: –Starting with map could repeat in Yahoo (8/11) –Starting with Yahoo unable to repeat in map (2/14)

UWMS Data Mining Workshop Comparison Study (cont.) l Participants liked: –Correspondence of region size to # documents –Overview (but also wanted zoom) –Ease of jumping from one topic to another –Multiple routes to topics –Use of category and subcategory labels

UWMS Data Mining Workshop Comparison Study (cont.) l Participants wanted: –hierarchical organization –other ordering of concepts (alphabetical) –integration of browsing and search –corresponce of color to meaning –more meaningful labels –labels at same level of abstraction –fit more labels in the given space –combined keyword and category search –multiple category assignment (sports+entertain)

Summary: Cat-a-Cone l Interface that smoothly integrates –search over multiple categories –search over document contents –browsing of multiple categories –browsing of retrieved documents l Iterative, Interactive

Combining Clusters & Categories l SONIA system (Sahami 98) l Goal: help organize personal information spaces l Approach: –First cluster the documents to make initial groupings –Then user adjusts clusters if they are not exactly right. This creates a category structure. –New documents are then assigned to the appropriate category automatically.

Slide by Brent Chun SONIA (Sahami 98) l automatic construction of document clusters l categorization based on full-text comparisons l automatically classify new docs into existing clusters l multiple cluster hierarchies can be imposed on same data classes cs298-1is290-2is296a-3 projectdiscussion documents feature selector stemmerclusterer documents classifier create clusters classify documents

Slide by Brent Chun Why is this useful? l Help understand contents of a collection of documents (e.g. results from a database query) l Automatically construct multiple categorizations of same data –e.g. user may take the time to categorize personal files in a single hierarchy, unlikely to do this in multiple ways l Save time by automatically classifying documents –most applicable when consequences of error are tolerable

Summary l Information Architecture key to information-centric interface design –Information Structure + –Navigation Structure l Category design –has been explored in detail –user interfaces for using cats has not l New UI ideas –combine browsing and search –dynamic, interactive