Website Organization and Labeling

Overview Phase 2: Conceptual Design Working with Content Content Lists and Inventories Organizational Structures and Guidelines Labeling Guidelines

Phase 2: Conceptual Design In this phase the focus shifts to the content and labeling pages / grouping pages: How pages are organized and the relationships between pages (organization) What to call each page (labeling) Your goal is users being able to intuitively find what they are seeking Clear and familiar organization and labeling Users feel smart; that pays off in many ways

Conceptual Design Deliverables Content Lists and Content Inventories Help you figure out and track content Card Sorting Useful for organizing content and determining which labels to use Site Outlines / Site Diagrams Map out the site structure for planning purposes and evaluating navigation options

Working with Content At this point it is easiest to keep things at the page level, either individual pages or a cluster of related pages: ‘Products’ page (individual) ‘Services’ page (individual) Job postings (cluster) Staff bios (cluster)

Determining 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)

Content Lists Created early in conceptual design A list of all the individual and clustered pages being considered for inclusion Not meant to be organized or categorized at this point; think of it as ‘content soup’ Do not: Reject any content at this time Get overly concerned about the best label (just choose one that is descriptive)

Content Inventories vs. Lists Level of detail / information: The content inventory is precise, carefully organized, and very detailed. Usage and changes over time: The content list is limited only to conceptual design; the content 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 ROT (Redundant / Outdated / Trivial) content is flagged Include all files used (e.g., HTML, PDF, XLS)

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

Optional Fields in the Inventory Source (where text for a web page is stored) Expires (when a file is outdated and should be taken off the site) Cross-links (between web pages) Additional meta data

Content Inventory Scenarios Website Redesigns One inventory is used to comprehensively document the existing content Typically a separate content inventory is started just for the redesigned website New Websites One inventory for tracking content during and after website creation

Website Organization Focuses on how web pages are related to one another, including the core navigational pathways Also referred to as the topology of the website

Typical Structures Hierarchy (the most commonly used) Linear Full Mesh Arbitrary Hybrid

Visualizing the Structures

Broad vs. Deep Hierarchies

Broad and Shallow is Ideal Visually scanning a list of links is faster than drilling down multiple levels, in most cases. Labels for higher level pages are more generic on deep websites, making navigation more challenging. Deep sites often remove some navigation bars as the user drills down, forcing them to use short-term memory.

The Memory Question Research has established that people can hold 3-5 items in short-term memory Often cited as 5-9 items, but later research narrowed this to 3-5 items This matters if navigation bars are being hidden or removed entirely as one navigates deeper, as that forces short-term memory to be used

Guideline: Depth Considering global navigation as Level 2 (the ‘Home’ page is Level 1), not going deeper than Level 4

Guidelines: Ungrouped Links If the links are not grouped under headings: At most 16 links listed sequentially (for tablets and larger devices) For smartphones a shorter navigation bar is necessary; number of items depends on implementation and the specific devices

Guidelines: Grouped Links If links are grouped under headings: Length limits are lifted, but more than 24 sequential items is likely to create strains on the interface and end up with many ‘outside the fold’ for the majority of devices Groups have up to 10 items in them, although fewer items work just as well (avoid single-item groups)

Grouping Links Under Headings

Sequencing Links What link goes first? What link goes last? What impact does this have? Serial position effects (primacy and recency)

Sequencing Approaches Importance (key question: for what user?) Alphabetical Natural order (e.g., small to large) Chronological (e.g., conference schedule) Task order (e.g., registration, checkout)

Other Ways to Present Structure Map Metaphor

Labeling Guidelines Use descriptive and specific labels Use longer phrases if they add clarity, such as adding ‘For’ at the start of the label if it is an audience Maintain a consistent tone; avoid mixing slang terms in with more formal language

Labeling Guidelines Make sure that labels properly reflect and support your corporate image Do not sacrifice clarity in your labels to satisfy the graphic design / interface requirements (ideally labels are determined prior to the interface) Speak the language of the user (this site is for them, not for you)

Labeling Guidelines Use the same label for the same page (the page heading should be the same as the link / button clicked in the navbar) In choosing labeling schemes try to keep hybrids from spiraling out of control; keep it to 2 or 3 schemes

Labeling Schemes A consistent approach to naming and grouping pages Users notice the scheme(s) being implemented Labeling directly impacts website credibility

Scheme Determines Labels Scheme Label Activity-Based  “Finding a Job” Task-Based  “Find a Job” Question-Based  “How to Find a Job” Topical  “Jobs” Role / Audience  “Job Seeker” Life Event  “Getting Your First Job” Org. Chart  “Human Resources”

Two Types of Labeling Schemes General-Purpose Schemes: Labels work well for global and local navigation bars on most websites Hybrids (mixtures) of these are common Specialized Schemes: Generally not good for global navigation labels Usually work within one area of the website or for sections of content within a page

General-Purpose Schemes Topical Products, Services, About, Support Task-Based Buy, Sell, Create Account, Research Activity-Based Buying, Selling, Researching

General-Purpose Schemes Role / Audience / User Type Current Students, Prospective Students, Faculty, Staff, Alumni Question-Based (Who, What, Why, Where) Who We Are, What We Do, Where We Are Located, Why Invest With Us

General-Purpose Schemes Org. Chart Human Resources, Sales, Marketing In general, avoid org chart; users don’t know your company’s departments and language Hybrid Usually topical and another scheme Try to keep the hybrid to only 2-3 schemes

Audience + Content = Scheme Informational websites: Topical Task-intensive websites or web applications: Task-Based, Activity-Based Very distinct audiences: Role / Audience But be sure to conduct usability tests

Audience + Content = Scheme Labels that are ‘different’ and more exciting: Question-Based, Task-Based, Activity-Based

Specialized Schemes Chronological Geographical Life Event Useful for content with a historical / time progression (e.g., conference schedule) Geographical Used primarily for maps / directions Life Event Limited use; very specific type of content

Chronological Scheme

Geographical Scheme