Omni Marketing Interactive - Designing for People who Search Home    
  Site map  
  Contact us  
   
Services Clients About Omni FAQs Design tips Links and resources Request a quote
   
     Home > Design & UX tips > Information architecture tips > How to Create a Website’s Labeling System   
   
Tips overview
Search engine optimization
Website usability
Information architecture
UX website design
Omni photo - top
Photo - tips
Omni photo - bottom

How to Create a Website’s Labeling System (or Nomenclature) for Online Findability

Learn how to develop and maintain a clear, consistent, & sustainable website labeling system for long-term search engine optimization (SEO).

Labeleing system image

One of the key components of a website’s information architecture (IA) is an effective nomenclature or labeling system. According to Wikipedia, a nomenclature is a system of names or terms, or the rules for forming these terms.

In This Article

Types of labels

In website design and development, there are essentially three different types of labels:

  • Document labels
  • Content labels
  • Navigation labels

All three of these labels are important to both users and technology. A label can communicate to users what content is about. A label can be used to describe a section of a website. And a label can also convey information scent. The scent of information addresses the following questions:

  • Where can I go? (clear navigation)
  • Where am I now? (orientation)
  • Can I tell that I have arrived at my destination? (arrival)
  • How can I get to the destination that has my desired content? (route selection)
  • Should I click on this link? (content value)

As a search engine optimizer, I know that a website’s labeling system should contain keywords. And as a usability/UX professional, I understand that a website’s labeling system should also use the users’ language. As an information architect, I understand that the labels should support a website’s taxonomy. And, most importantly, as a website visitor, I need to understand the meaning of all labels.

What follows are some general guidelines and best practices for creating and maintaining a clear, sustainable website labeling system.

Document labels

A web page is a document. So is a graphic image and a video. A JavaScript file is a document, as is a style sheet. Each document serves a purpose on a website. A document label should communicate what each document is about.

Some document labels include:

  • URL
  • File name
  • Titles

URLs & file names

One document labeling system that is important to both users and technology is a website’s URL structure. The abbreviation URL stands for Uniform Resource Locator, and is used to specify addresses on the World Wide Web.

In an ideal situation, a file name within a web address should provide useful information about the document being viewed. This should be true whether the document is text-based, graphic-based, or a multimedia file.

For example, what do you believe the content you will view on this website address?

http://www.cancer.gov/images/cdr/live/CDR579033-750.jpg

Here is what I commonly observe during usability tests:

  1. Users typically believe that they might view a graphic image on the U.S. National Cancer Institute’s website, if they ar familiar with it. If not, they believe that cancer.gov is some sort of government website about cancer. The domain, cancer.gov, is the label for the website.

    Newbies to the web might not know that jpg is a type of file extension for a graphic image.
  2. The file extension, .jpg, tells more advanced users that this web document might be a graphic image — either a photo or diagram. (The fact that it’s in the images directory confirms this supposition.)
  3. As for the content in this diagram? Users do not know what it is based on the file name. Neither do search engines. Neither do site visitors.

What if the URL structure were changed to the following:

http://www.cancer.gov/images/skin-anatomy-closeup.jpg

Now this image URL has more meaning to both human users and technology:.

  1. Users believe that cancer.gov is some sort of government website about cancer. The domain, cancer.gov, is the label for the website.
  2. The file extension (jpg) and the subdirectory (images) tells advanced users that this web document is likely to be a graphic image.
  3. The diagram or image content is likely to be a close-up image of human skin anatomy.

Therefore, if this image is used on any page within the National Cancer Institute’s website, both technology and human users can easily determine: a) what this image is, and b) its context on a web page.

Unfortunately, some website owners have little control over a site’s URL structure. This labeling system is often left in the hands of a technical team, who might not know or understand users’ language.

Another possibility is that the URL structure is software-generated, which often leads to odd labels such as CDR579033.jpg.

URL guidelines

Here are some quick URL guidelines that can make your document labels clearer to both users and technology. URLs should:

  • Be short but descriptive. URLs should be easy to type and to remember. Or, with mobile, URLs should be easy to text and to remember.
  • Contain important, relevant keywords. Keywords aren’t dead. Keywords will be dead when humans stop communicating with and using words. If your webpage’s topic is focused on marketing tips, then use the words marketing and tips in the URL or file name.
  • Make sense to human users. Minimize the use of jargon and unfamiliar abbreviations/acronyms in a URL structure. If the number of characters in a URL is an issue, it’s OK to use an abbreviation. Just make sure that you spell out the meaning of the abbreviation in content and the meta-tag description.
  • Use few or no “funky” characters. In geek speak, this means to minimize the number of dynamic parameters in the URL. Even though search engines can crawl URLs with &, ?, =, %, + in them, it’s still best to minimize their usage whenever possible.
  • Use hyphens, not underscores, as word separators. Search engine optimization (SEO) professionals have known this for years. But just in case you need citations, here is a post from Matt Cutts’ blog (Dashes vs. Underscores) and a YouTube video (Underscores vs. Dashes in URLs).
  • Closely match titles. I generally don’t recommend that a URL contain an exact title. Minimizing or removing stop words (and, the, a, an, of, but, nor, for, etc.) from the title can make the URL concise and descriptive.
  • Not be keyword stuffed. Keyword repetition is usually unnecessary in a URL.

Document titles

Document titles are also important for overall online findability. In a text-based document such as a webpage or PDF, the title is critical for rankings. It is also the call to action on a search engine results page (SERP).

Even though Google will sometimes change a page title in search listings, don’t be discouraged. Write unique page titles that accurately describe content for each web page. Then Google (or Bing) are less likely to modify the page title.

Please note that the document title and the meta-tag title are not the same item on a webpage. A webpage title is coded like the following:

<title>Page title here</title >

The meta-tag title is coded like the following:

<meta name=”title” content=”Page title here. /”>

Search engines use the page title, not the meta-tag title, to determine relevancy of webpages. For a PDF, I recommend writing a meta-tag title, as shown in Figure 1 below:

Where to place a PDF title
Screenshot of PDF title location

Figure 1: Write a unique title for each PDF and reinforce the document title within the PDF's content.


As for non-text documents such as videos and graphic images, search engines don’t always use the meta-tag title to determine relevancy. However, I do recommend adding them. I would rather be proactive about implementing consistent labels rather than having to relabel 10,000+ items.

Content labels

Content labels are very useful because of the support scannability, especially if a webpage’s content requires scrolling. Content labels include:

  • Headings (or headlines)
  • Subheadings
  • Content taglines (also known as subject taglines or topic taglines)
  • Headings and captions for images, videos, and slideshows

When people view a webpage, they often scan a page’s headline (which should be formatted as an H1 whenever possible) and supporting content tagline.

Sometimes, a catchy headline might not contain important keywords. One solution is to make sure the following tagline contains those words, as shown in Figure 2 below (from my website):

Example content labels for a web page
Example of a heading and a subject tagline on a web page

Figure 2: Both headlines and subject/topic/content taglines can be a part of a website’s labeling system.

Additionally, if a video or graphic image is relevant to page content, I often find that users’ eyes naturally go to this area of a page. I observed this occurrence for many years on printed newspapers as well as online content. In fact, I have a friend whose newspaper job is to write headlines and captions. Headings and captions are important labels for many reasons.

A slideshow is a prime example of an image heading and caption, as shown in this screenshot from a recipe site below:

Example content labels for a slideshow
Sample slideshow page for types of salads

Figure 3: Slideshow with image, image heading, and caption. Including a relevant link directly to the recipe is a smart decision.

One place I like to do keyword research for image captions and headings is on stock photography websites. People describe photos and diagrams in different ways. These sites can help me understand user mental models and verbiage.

Many site owners and content writers might not realize that they create and maintain content labels on a site. In fact, I highly recommend creating and maintaining a copywriting guide as well as a style guide for all websites.

Navigation labels

Navigation labels should communicate both content aboutness and information scent. As I wrote at the beginning of the article, information scent should communicate:

  • Where can I go? (clear navigation)
  • Where am I now? (orientation)
  • Can I tell that I have arrived at my destination? (arrival)
  • How can I get to the destination that has my desired content? (route selection)
  • Should I click on this link? (content value)

Navigation systems and labels should provide “you are here” cues. One way I do this is to eliminate the content to see if the designers/developers have included an “on” or “active” state on navigation elements on multiple levels, as shown in Figure 4 below:

Example navigation labels for a web page for a desktop/laptop
Active navigation example (screenshot)

Figure 4: Active navigation in the global and local navigation system on a website tailored for desktop/laptop viewing.

Figure 4 shows navigation labels from a manufacturing website. Though I am not a person in this site’s target audience, I am reasonably sure that I am viewing the Services section of the site and specifically on a Barrel Tumbling page.

I do not know what barrel tumbling is. However, the target audience does because the website owner used a number of different resources to determine the best navigation and content labels, including but not limited to:

  • Client interviews
  • Search logs
  • Web analytics data
  • Keyword research data
  • User research and vernacular
  • Existing taxonomies

One way I ensure that users understand navigation labels is to conduct a closed card-sort test or a tree test. A closed card-sort test is a validative usability test in which users/searchers are presented with pre-labeled categories and a list of items. Test participants are then asked to place each item underneath one of the categories, the one that they feel is the most appropriate.

Below is a simplified version of a closed card-sort test. Test participants are asked to move items in the far-left column into pre-determined categories.

Simplified closed card-sort test
Simplified example of closed card-sort test (screenshot)

Figure 5: A closed card-sort test or a tree test can help you determine if your navigation labels communicate aboutness and information scent clearly to both human users and technology.

Ultimately, the goal of effective website labels is communication and conversions. An effective labeling system will help your target audience locate and discover desirable content on your website.

Resources

Related articles

If you liked this information architecture and site navigation tip, here are more links to related optimization tips and articles from Omni Marketing Interactive:

You can also read our articles from other online publications.



IA

Information Architecture Services

Usability

Website Usability Services

UX design

Web
Design
Services


If you have any questions about Omni Marketing Interactive's search engine optimization (SEO), website usability, information architecture (IA), or web design services, please call us at 847-426-4256.

top