1. Website Organization and Labeling

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

3. 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

4. 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

5. 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)

6. 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)

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

8. 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.

9. 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)

10. 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)

11. What to Include in the Inventory
Typical inventory contains (continued):
Notes (any additional information to record)
Update Frequency
Owner/Maintainer

12. 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

13. 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

14. 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

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

16. Visualizing the Structures

17. Broad vs. Deep Hierarchies

18. 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.

19. 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

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

21. 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

22. 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)

23. Grouping Links Under Headings

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

25. 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)

26. Other Ways to Present Structure
Map
Metaphor

27. 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

28. 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)

29. 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

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

31. 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”

32. 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

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

34. 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

35. 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

36. 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

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

42. 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

43. Chronological Scheme

44. Geographical Scheme