Documenting and Leveraging Website Content › ~jwithrow › materials › mcit-content.pdf · 1. When you have established a content list • Explore how items on the list group

Jason Withrow ([email protected])

Documenting and Leveraging Website Content


Overview• What is Content?• Deciding on Content: Content List• Organizing Content: Card Sorting, Content

Inventories, Site Outlines• Visualizing Content: Site Diagrams• Tagging Content: Thesauri, Controlled

Vocabularies, Facetted Classification


Defining Content• ‘Content’ is a very generic term. • What is content? Isn’t everything content on

your website?• Getting a handle on your content is crucial:

– Not having content ready is a top reason for sites not launching on schedule

– Not knowing what you have makes it hard to plan a scalable information architecture

– Different content demands different approaches


Types of Web Content• Client Side

– (X)HTML pages – CSS files– Javascript files

• Server Side Scripting– Perl (for Common Gateway Interface scripts)– PHP: Hypertext Pre-Preprocessor (PHP)– Active Server Pages (ASP)– Java Server Pages (JSP)– ColdFusion Media (CFM)


Types of Web Content• Data Sources

– Database fields– Text files

• Images• Formats requiring plug-ins/other software

– Word, Excel, Access, PowerPoint, PDF– Flash, RealMedia, Windows Media, MP3’s


Locating Content• Sources for content:

– Previous website (if redesigning the site)– Client meetings – User interviews– Focus groups– User surveys– Competitive analysis– Artifact analysis (examining marketing and

other business materials from the client)


Two Approaches to Content• Bottom-Up (Data-Driven)• Top-Down (Concept-Driven)• Both reflect different web design

philosophies and styles, and ultimately one either progresses up (or down) enough and enters the other.


Bottom-Up (Data-Driven)1. First create the content list 2. How do they cluster or group together? 3. Build higher-level categories (via card

sorting or through discussions with team members)

Benefit:• The benefit of a bottom-up approach is

that the odds of forgetting important content are reduced.


Top-Down (Concept-Driven)1. Begin with top-level areas and build

downward2. Start with the main website areas (the

global navigation)3. Then determine the sub-sections

Benefit:• Ensures the proper scope, but sometimes

you miss important pieces or include pages for which nothing has been written.


Choosing Top-Level Categories• The website should have these sections:

– About the Candidate– Campaign News & Events– Campaign Staff– Get Involved– Campaign Store– Press Room– Frequently Asked Questions– and so on…


In Practice: Use Both Approaches• Starting at the bottom:

– Develop a content list – Either sort the list yourself or start doing card

sorts with users.– When you determine some possible content

groupings, you are thinking about the various sections of the website and have moved into top-down territory.


In Practice: Use Both Approaches• Starting at the top:

– Work out the sections of the website– Go to your content and see if you can fill in all

the areas you created.– If you have access to users who are very

knowledgeable about the area, give them the names of the top-level sections and have them suggest content to go in each area.

• This also suggests which content is most important


Content Lists• Created early in a project• A list of all the pages being considered for

inclusion in the website– In some cases (e.g., ‘Job Postings’) clustering

is expected, instead of listing every single job• Not meant to be organized or categorized at

this point; think of it as a content soup• Do not reject any content at this time


Content Lists vs. Inventories• Content inventories are generally developed

later in a project, once organization and labeling are established.

• For as loose and free as the content list was, the content inventory is precise and carefully organized.

• The content list lifespan is short; it is primarily for brainstorming. In contrast, the inventory grows and changes throughout the rest of the project life cycle.


Content Inventories• Content inventories help you keep track of

things when there is a lot of content.– Generally in a tabular/spreadsheet format– Document current and future content– Redundant/outdated/trivial content is flagged– Include all files used (e.g., HTML, PDF, WAV)

• There should be one inventory that all team members can reference.– Have one person in charge of updates


What to Include in the Inventory• Inventories typically document the following:

– Page ID (typically a unique number)– Name (of page or file)– URL– Format– Content Type (e.g., News Release, Image)– Keywords (from that meta tag)– Description (from that meta tag)– ROT (redundant, outdated, trivial)


What to Include in the Inventory• Typical inventory contains (continued):

– Notes (any additional information to record)– Update Frequency– Owner/Maintainer


What to Include in the Inventory• Optional fields

– Source (where text for a web page is stored)– Expires (in case you know when a file will be

outdated and should be taken off the site)– Cross-links (between web pages)– Additional meta data


Different Content Inventory Uses• Redesigns

– One inventory is used to comprehensively document the existing content

– Either that inventory is expanded with new content or a separate content inventory is started just for the redesigned website

• New Websites– One inventory for tracking content during and

after website creation


What is Card Sorting?• A method for determining how users

mentally group your website’s content– Results are derived from the semantic

networks of the users– Semantic networks are vast webs of

connections between concepts, determined by our learning and experiences


Partial Semantic Network

Blue

Red

Sky

Shirt

Clouds

Pants

Green

Fire Tie

GrassAirplane

Plants


What Does Card Sorting Offer?• Insight into how content should be

grouped– Helps determine the hierarchy of pages

(exploratory card sorting)

OR• Validation of chosen groupings

– Do the users put the same content in the same location? (confirmatory card sorting)


When is Card Sorting Useful?1. When you have established a content list

• Explore how items on the list group together2. After the initial organization and labeling

are decided• Does your hierarchy hold up? • Or do users put things in different places?

3. When redesigning a website• Should the content stay in the same

locations? Does it need a new label?


Who Should Be Tested?• Card sorting can usually be done with

anyone, but ideally it is done with potential or actual users, as they have:

– Better knowledge of the content, so they have a clearer idea of how things are related and what is top-level, second-level, etc.

– Familiarity with the common terminology used (most helpful if the website targets an audience that uses special terminology, such as a medical audience)


How Many Should Be Tested?• Number of Users

– Generally 5-6 users is sufficient to determine patterns

• Number of Cards – If you have lots of cards (more than 100),

you may want to have the user sort half of them first, then sort the remaining half


Exploratory Card Sort• Also called an open card sort• Takes a bottom-up approach: How

does the content group together?• Best if you only have a content list and

need to determine an organizational structure (hierarchy) for the website


Confirmatory Card Sort• Also called a closed card sort• Takes a top-down approach: Does our

content all fit neatly (and as we planned or expected) into our hierarchy?

• Good when validating your newly developed hierarchy and its labels

• Useful when adding content to an existing site


Preparing the Card Sort• Purchase lots of blank 3 x 5 cards

– Or make your own ‘cards’ from paper, post-it notes, etc.

• On each card, write either:– The name of the content or the page name

(e.g., Pet Adoption Stories) OR

– A brief description of the page content (e.g., Stories about adopting pets)


Pilot Testing is Essential• Try them out on a colleague/friend/spouse• The name you assigned to some content

may be ambiguous (i.e., there are two ways to interpret the name of the page) so you switch to a short content description

– Your card labeled ‘Alumni’ could either be for alumni or about alumni - it isn’t clear.

– You will want to change the label on the website and change the label on the card.


Exploratory Card Sort Process1. Orient the user (What is the site? Task?)2. The user groups related cards into piles3. The user assigns one label to each pile4. Can the piles be subdivided further?5. Label each of the smaller sub-piles6. Sometimes further subdivision is needed7. Record the groupings and labels8. Repeat with another user


Exploratory Example: Election WebsiteCandidate’s bio Election issues Press releasesCampaign events Speeches Campaign donations Media coverage Campaign timeline Voter registration Website feedback Newsletter EndorsementsAsk the candidate a question On-the-road journalCandidate’s record and accomplishmentsLet a friend know about this website Candidate comparisonPrivacy policyRelated links

Sitemap

VolunteeringCampaign staff and openings

Frequently asked questions


Create Primary GroupsCandidate’s bioCandidate’s record and accomplishments

On-the-road journalCampaign timelineMedia coverage

Candidate comparison

Speeches

Privacy policy

Newsletter

EndorsementsVoter registrationCampaign donations

Website feedback

Let a friend know about this website

Election issues

Related links


Sitemap

Volunteering

Campaign staff and openings

Campaign events

Ask the candidate a question

Press releases


Label Primary Groups

Candidate’s bioCandidate’s record and accomplishments

On-the-road journalCampaign timelineMedia coverage

Candidate comparison

SpeechesNewsletter

EndorsementsVoter registrationCampaign donationsLet a friend know about this website

Election issues

Frequently asked questionsVolunteering

Campaign staff and openings

Campaign events

Ask the candidate a question

Press releases

Getting Involved

About the Candidate Privacy policy

Website feedback

Related linksSitemap

News & Events

On The Issues


Create Secondary Groups

On-the-road journal

Campaign timeline Media coverage

Speeches

NewsletterCampaign events Press releases

News & Events


Label Secondary Groups

On-the-road journal


Speeches


News & Events

News from the Candidate

Events In the Media


Key Exploratory Issues• Note which content is hard to categorize

– Does it seem to ‘go’ in more than one pile?– ‘Pet Adoption Stories’ seems to fit into both

the ‘Adoption’ pile and the ‘Testimonials’ pile– On the final website, you decide to put it in

‘Testimonials’, since it is mainly stories from satisfied customers, but in ‘Adoption’ you provide a ‘See Also’ link to the stories -some users will look for it there first.

• Is there any missing content?


Record/Analyze Findings• The result is a labeled hierarchy of the

content; a possible website structure• The labels assigned to the piles are

suggestions only – Their real value is the insight they convey

into how/why the cards were grouped• Record your data, test more people, look

for common groupings across users


Confirmatory Card Sort Process1. Orient the user (What is the site? Task?)2. Lay out global navigation cards3. User puts content cards under the

appropriate global navigation label4. Lay out cards with second-level labels5. User subdivides content cards under new

second-level labels6. Lay out third-level cards and sort further


Provide Global Navigation Cards

Getting Involved

On The IssuesNews & Events

About the Candidate

Privacy PolicyWebsite Feedback

Related Links Sitemap


First Pass at Dividing CardsGetting Involved

On The IssuesNews & Events

About the Candidate

Privacy PolicyWebsite Feedback

Related Links SitemapCandidate’s bioCandidate’s record and accomplishmentsCampaign staff and openingsAsk the candidate a question

Candidate comparisonElection issues


On-the-road journalCampaign timelineMedia coverageSpeechesNewsletterCampaign events

Press releases

EndorsementsVoter registrationCampaign donationsLet a friend know about this website


Provide Second-Level Labels

News & Events

News from the CandidateEvents In the Media

Campaign timelineMedia coverageSpeechesNewsletterCampaign events

Press releasesOn-the-road journal


Further Subdivision Occurs

On-the-road journal


Speeches


News & Events

News from the Candidate

Events In the Media


Key Confirmatory Issues• Note which content is hard to categorize

– Does the user put a content card in one global navigation pile, only to later say it should go in another global navigation pile when the second-level labels are shown?

• Does some content simply not fit?– If multiple users cannot ‘place’ certain

content under any of the labels you give them, you have a problem!


Record/Analyze Findings• Does their final hierarchy match the one

you created?• Was certain content hard to categorize

based on the labels you are using?• Record your data, test more people, look

for patterns across users


What is Site Diagramming?• Primary goal:

– Providing a visual representation of the relationships between the pages in the site

• Some diagrams also show functionality, but do so in a limited fashion

• With most websites structured hierarchically, site diagrams are usually horizontal or vertical tree diagrams

• Note that these are not diagrams of the website directory structure


Why Create Site Diagrams?• Reveal breadth/depth of site at a glance• Show relationships between pages• Graphic designers use them for the names

of links/buttons in their mockups• Content developers rely on them to make

sure that all the content is ready• Coders/programmers reference them to

make sure that pages are correctly linked


Multiple Site Diagramming Labels• Site diagramming has many names:

– Blueprint– Site flow– User flow– Process flow– Site mapping


Structural Site Diagramming• Reflects the structure of the entire website

and relationships between pages– Organized by level, starting with the home

page as Level 1– Include external links, but these are always

secondary to the links within the website• Can be either horizontal or vertical:

– Often comes down to personal preference, although breadth/depth of site can be a factor


Functional Site Diagramming• A functional site diagram begins as just a

structural site diagram• Functionality is ‘layered on top of’ the

structural site diagram:– Forms, e-mail links, and file downloads are

commonly indicated– One drawback to this is additional clutter in

the diagram – There is not much room for showing details


Diagramming Practices• Pages• Links• Levels• Numbering• Groupings• Chunking


Diagramming Practices: Pages• Use rectangles to represent static pages• Rounded-edge rectangles represent

dynamically generated pages• Dotted rectangles represent future pages• A ‘stack’ represents a cluster of similar pages

• If you have a one-page diagram, each page (unique rectangle) should appear only once.


Diagramming Practices: Links• Solid connecting lines between pages for

standard linking• Dashed connecting lines between pages

for cross-links– Can use an arrow to indicate direction

• Arrows between pages for linear sequences (e.g., registration, purchasing)


Diagramming Practices: Links• Links to other websites

(outgoing)

• Links from other websites(incoming)

• Place these shapes outside (but in close proximity) to the page where they occur


Diagramming Practices: Levels• Indicate levels with an explicit label (e.g.,

Level 1, Level 2, Level 3)• In horizontal diagrams:

– top-level pages are on the left– bottom-level are on the right

• In vertical diagrams: – top-level pages are at the top– bottom-level are at the bottom


Diagramming Practices: Numbering• Numbering is very helpful in talking with

others about pages on the site• Label the home page as 1.0• The second-level pages are 1.1, 1.2, etc.• Third-level pages under the 1.1 section

are 1.1.1, 1.1.2, 1.1.3, etc.• When numbering clusters of pages, use x

as the largest value (e.g., 1.1.1-1.1.x)


Diagramming Practices: Groupings• Use dashed boxes to indicate:

– Global navigation– Local navigation– Any other groupings that occur

• Be sure to label the dashed box


Diagramming Practices: Chunking• Chunking refers to taking something

(generally information) and breaking it down into smaller pieces– When diagramming large sites, chunking is

required because one page cannot show everything

– For small sites everything can fit on a single page in most cases


Approaches to Chunking• One approach is to have the first page contain

the home page and the global navigation

Home1.0

About1.1

Careers1.4

Support1.3

Services1.2

Contact1.5

Global Navigation

Level 1

Level 2


Approaches to Chunking• Then have a separate page devoted to each

section of the website

About1.1

History1.1.1

Investors1.1.4

Locations1.1.3

Guarantee1.1.2

Partners1.1.5

Level 2

Level 3

Local Navigation


Diagramming Recommendations• Provide ‘meta data’ for the diagram

– Include a legend at the bottom of the diagram– Assign a name and version number to the

diagram (e.g., Jason Withrow’s Workshops Website, version 1.3)

– Indicate the date that the diagram was created and/or updated

• Number and order the pages in the same sequence as they appear on the website


Diagramming Recommendations• Be open to innovation

– Sometimes the available stencils (shapes) do not work for a particular page or section

– There may be a unique type of page (e.g., a page that spawns in a small window); how do you represent that?

– Choose a shape, include that in your legend, and you should be fine


Diagramming Tools• Visio is the industry standard software

– However, it is only for the PC• For Mac users, there are a variety of other

diagramming programs, including:– Inspiration– ConceptDraw– Omnigraffle– Glyphix


Site Outlines• The site outline represents the structure of

the site in a traditional outline format– The site outline should exactly mirror the

structural site diagram– Benefit:

• Faster to create and maintain than the site diagram– Drawback:

• Harder to show cross-links and sequences• Functionality can be mentioned but it often adds

too much text to an already-cluttered document


Why Create a Site Outline?• Some people are great visual learners and

take immediately to your diagrams• Others will look at your diagram and say,

‘What in the world is this?’• In other words, site diagrams do not work

for every client - sometimes people need things spelled out!


Content ‘Below’ the Page Level• How can we think of content at a lower level

than the page? Isn’t that at the level of paragraphs, then sentences, then words?

• While it is true that the words on a page are very low-level data, this is not what we’re after; we are seeking the core conceptsrepresented by that visible text


The Information ‘Iceberg’

Core concepts in document

Text on the page

Visible

Invisible / Latent


The Role of Metadata• Metadata is, quite literally, data about data

or information about information• Metadata is our way of capturing those core

concepts (among other things), which answers the question:– “What is this page about?”

• Computers are good at determining some metadata, while for others a human being is necessary (or best)


Metadata for a Web Page• Date created• Date revised (last update)• Document author• Description• Core concepts / subjects• Document type (HTML 4.01, XHTML 1.0)• Program used to create page• Expiration date• And the list goes on…


Human and Computer TasksComputer Determined:• Date created• Date revised• Document author• Document type• Program used

Human Determined:• Description• Core concepts• Expiration date

(unless all documents have a fixed life-span)


Computers and Core Concepts• As an example, lets say that there is a news

article about the Big 3 automakers. The article refers to these automakers as dinosaurs of the industry, given how long they have been around.

• Is this article about dinosaurs? No, of course not. But a computer program is likely to index that word, ‘recognize’ it, and consider it a core concept.


Metadata: A Programmer/UX Issue• Of all the roles in web design, the two most

focused on metadata are the programmers and user experience professionals

• Programmers often advocate technology solutions (e.g., software, scripting) to capturing and/or assigning meta data

• User experience professionals take a broader perspective, because accurate information retrieval is more than just a technology issue


Grouping Metadata into Categories• Metadata can be divided into three different

types or categories:– Descriptive– Intrinsic– Administrative


Descriptive Metadata• Descriptive metadata includes the core

concepts that we use when looking for most information on websites:– The subject(s) addressed by the page– A description of the page

• Example: A picture of a mountain– Descriptive metadata is the name of the

mountain, the fact that it is a mountain, how one would describe the mountain, etc.


Intrinsic Metadata• Intrinsic metadata explains the composition

of the data object:– That it is an HTML file, a JPG, etc.– The file size (e.g., 18k)– The dimensions (height/width if an image)

• Example: A picture of a mountain– Intrinsic metadata is the image format, file size,

dimensions, color depth, shape of image, etc. The list becomes quite long.


Administrative Metadata• Administrative metadata explains how the

data object is managed:– The author(s)– The date created and date(s) revised– When the item was first published and who

approved the publishing

• Example: A picture of a mountain– Photographer, when the picture was taken, etc.


Document Indexing• When someone says that they have

‘indexed’ a document or data object (such as an image), what does that mean?– The descriptive, intrinsic, and administrative

metadata has been recorded in some manner and associated with the document or data object

– Now it is possible to retrieve items based on all of that metadata


Possible Searches: Mountain Example• Descriptive Metadata:

– Looking for all images of that mountain– Looking for all images of all mountains– Looking for images of a snow-covered mountain

• Intrinsic Metadata:– Looking for images in a given file format– Looking for images in color vs. black/white– Looking for other rectangular images


Possible Searches: Mountain Example• Administrative Metadata:

– Other images by the same photographer– Photos of mountains taken in the past year– Other photos published in the same collection

• Image metadata in action:– http://creative.gettyimages.com/– http://bailando.sims.berkeley.edu/flamenco.html


Pre-Structuring / Post-Structuring• Pre-structuring information retrieval means

exactly what the name indicates:– Structuring documents or data objects in a

search ahead of time; the degree of structure imposed varies

– Continuum from minimal pre-structuring (scoped search) to completely pre-structuring (facetted classification)

– The methods discussed today are examples of pre-structuring


Pre-Structuring / Post-Structuring• Post-structuring information retrieval means

not taking additional steps to control the results shown

• The ‘structure’ is imposed at the time the query is entered and matches determined

• A full-text indexing approach for a search engine is an example. Not much else is being done to control what is shown for a given query.


Pre-Structuring: Scoped Search

Screenshot:www.amazon.com

These are pre-defined ‘search zones’ within the overall space of potential documents.

Each document is placed into a given zone or zones and so a pre-existing document structure is starting to take shape.

Information space

Search zones


Controlled Vocabularies• Language is messy

– We have synonyms, alternate spellings, wrong spellings, related terms, abbreviations, acronyms, etc.

– There are all referred to as variants• Given this mess, how can a person hope to

enter a query and get back appropriate results?

• This is where a controlled vocabulary comes in quite handy


Controlled Vocabulary Relationships• Equivalence Relationships

– Dog = Canine = Pooch = Doggie = Dawg

• Hierarchical Relationships– Pug and Collie are narrower terms (children),

animal and pet are broader terms (parents)

• Associative Relationships– Dog food, dog toys, pooper scoopers, etc.


Equivalence: The Synonym Ring

Rock

Rock & Roll

R&R

Rock Music

Bolface term is the preferred term


Preferred Terms & Authority Files• From these variants a single preferred term

is chosen and the search engine is programmed to point any queries using a variation to that preferred term

– An authority file holds all the preferred terms• Preferred terms are then used in indexing,

thus greatly cutting down on the indexing time and making for a more scalable system

• These terms are descriptive metadata

Jason Withrow ([email protected])broadvision.com


Hierarchical Relationships• Useful for browsable hierarchies, known as

taxonomies– Don’t be dazzled by the fancy word

• Can also come in handy for search:– When a query returns no results you can re-run

the query against the broader term(s)– To assist a user in narrowing the search you

can also provide them with a list of narrower terms to search against


Broader / Narrower Categories

cdnow.com


Results from a Taxonomy Search

dmoz.org


Associative Relationships• This is where a controlled vocabulary

officially becomes a thesaurus• The big questions:

– What items are related?– Where would a user want to go next? (This falls

into the domain of ‘Just in time’ links)


Associative Relationships

cdnow.com


Associative Relationships

llbean.com


Facetted Classification• Content can also be indexed based on

facets, each facet pertaining to different aspects of that content object

• If your website sold washers and dryers:– One facet could be manufacturer– Another facet could be capacity– Then price range, color, cycles, energy used,

etc.• Users could search or browse products

based on this facetted metadata


Browsing Via Facets

www.epicurious.com


The Power of Facets

www.epicurious.com

Given the current recipes meeting the criteria (in this case, recipes with Mushrooms) the ways in which the query can be refined change (note that there are no ‘special considerations’ recipes available)


Browsing Via Facets

wine.com


The Power of Facets

Based on the facetted metadata the results can be displayed in various ways. Sorting is just one possibility. Groupings could also be created quite easily. The interface possibilities are extensive.

wine.com


Search Via Facets

bailando.sims.berkeley.edu/flamenco.html


The Power of Facets

No matter how far you are into your query, you can always remove one or more facets and immediately see the impact (note the ‘x’ to the right of the facet value).

bailando.sims.berkeley.edu/flamenco.html


Indexing with Facets• Most of the work is at the start of the project• Each data object (e.g., recipe, image,

washer/dryer) needs to have a value for each facet

• That metadata must be in place before the system will function properly, so get ready for a lengthy indexing process!


Mapping All Possible Combinations• Once the metadata has been created, a

script can generate the results listings for all possible combinations and store those in a database

• What looks like a ‘search’ to a user is just creating a pattern of values that is matched to an already-generated set of results

• Now that is pre-structuring!

Documents

Documenting and Leveraging Website Content › ~jwithrow › materials › mcit-content.pdf · 1. When you have established a content list • Explore how items on the list group