Anatomy of a website: website labeling - Optimal Workshop (2024)

Summary: In this article, we’re going to take a look at what labeling is and why it’s important, go over some examples and show you how you can improve the labels on your own website.

Generally speaking, the modern web is a far more user-friendly place than it was 10 years ago. Growing consensus around things like accessibility and user experience has led to a web that’s easier to use, faster and more useful for more people. One of the areas that’s really helping to push things along in this regard is efforts around website architecture, and more specifically information architecture (IA). There’s a lot to talk about when it comes to IA, so we recommend checking out our getting started guide if you’re completely new to the field.

IA is largely made up of 4 components or systems. There are:

• Organization systems
• Navigation systems
• Search systems
• Labeling systems.

We’ve talked a lot about the organization, navigation and search side of IA before, now we’re going to take a look at what labeling is and why it’s important, go over some examples of good labeling and bad labeling and show you how you can improve the labels on your own website.

Let’s get started!

Introduction to labeling

Labeling, in the most basic sense, is a type of representation. On the web, we use labels to represent larger chunks of information simply because we can’t crowd every page with all of the information on the entire website – it’s just not practical and it doesn’t look very nice. Take an ‘About us’ label that you might find on an organization’s homepage as an example. For most users, this label should mean that by clicking on or interacting with it, they’ll find information about the organization – office locations, staff, company history, etc. Because we can’t list all of this detail on the homepage, we use the label ‘About us’ to trigger the right association in the user’s mind.

We can use all sorts of labels for this purpose throughout a website, which in turn means we can keep our pages as clear and understandable as possible, making it easier for users to find what they’re actually looking for.

Why labeling is so important

People spend huge amounts of energy decoding the meaning behind certain words in books, lyrics music and dialogue in films – but that’s not the case with the web. The web has evolved in an entirely different way. Given that people generally want to access the information they’re after as quickly and with as little hassle as possible, you can’t use unclear or difficult labels and expect users to sit there decoding the intended meaning. Chances are if they can’t find what they’re looking for, they’re going to leave and look for it somewhere else.

Labeling systems are also a way of identifying websites where it’s clear that the organization does not place a heavy emphasis on the needs of its users. Commonly, you’ll see this on websites where labels aren’t clear, but instead, use internal terminology that only people who work at the organization will understand.

Let’s now take a look at 2 examples of labeling systems, one planned and the other unplanned. For the purposes of this exercise, imagine that the following labels are represented as a navigation bar on a website.

Unplanned system

• Tri-State alliance
• Public policy
• Small business
• Technology grants
• Public-private partnership agreements
• 1752 overpass project
• Report a fault
• Community issues board

Imagine you’ve just arrived on the website of the unplanned system for the first time. Chances are, you have little idea of what the labels are referring to. It’s clear that they’ve been designed based on the assumption that users will already know what they mean.

We can probably determine that these labels have something to do with a government body, whether that’s at a state or federal level, with some labels being quite clear like “Community issues board” and “Report a fault”, but others are just entirely confusing like “1752 overpass project” and “Small business”. As a result, we’re left sitting here wondering what each label is actually pointing to.

Planned system

• Mobile phone
• Account information
• Mobile data plans
• Home broadband plans
• About BananaCom
• Support center

The planned system paints a much clearer picture. It’s not perfect, but we have more of an idea about what we’re likely to find behind each label. What’s more, we can see by looking at all of the labels that they’re related. Sure, there are outliers like “Support center” and “Account information”, but it’s not hard to see how these relate to the others. They’re also clear labels in their own right.

Importantly, this isn’t an entirely new labeling system – there’s a near-global precedent for this arrangement of labels and so we’re not asking our users to take on the substantial cognitive task of learning a new system.

Good labeling versus bad labeling

Effective labels are simple and focused. Ideally, the labels on your website should be written using language that’s easily understandable to your users and reflects the content that’s behind them. After all, labels are designed to trigger associations in your users’ minds, allowing them to make their way through your website as quickly and with as little trouble as possible.

Let’s look at a real example of a website with poor labeling.

This is the website of Motorix International. Imagine you’ve just landed on the homepage and this top navigation bar is the first thing you see. Certain labels make sense immediately because we’ve seen them so many times before. We can probably assume that ‘Home’ takes us back to the homepage, ‘Products’ will show us a list of this company’s products and ‘News’ will be some sort of press release or blog page. But there are fundamental problems with the rest of the labels. ‘President’, ‘Access’, ‘Sales Agents’, ‘Inquiring’ and ‘Banks’ are all essentially open to interpretation.

Now, let’s move on and look at an example of a website with good labeling.

This is the sidebar of the AccorHotels group website. As you can see, nearly all of the labels here are clear and easily understandable – even without the context of the rest of the page. In addition to the usual items you’d expect to see on a hotel website (pointing you to information about hotel sub-brands and related facilities), AccorHotels has added icons to the four labels at the bottom of the list to provide additional guidance. ‘Professional Solutions’, ‘Loyalty Program’, ‘My bookings’ and ‘Support’ are all likely things that AccorHotels users regularly look for or return to on a regular basis, and the added icons help to anchor these labels in the sidebar.

How to improve your labeling

• Write a list of your labels to get a visual representation of them
• Use your website’s search log to see what people are looking for
• Look at your competitors – does their labeling make sense? Why or why not?
• Plan for the future. Try and account for future labels your site may need as best you can now
• Use Questions to survey a representative sample of your users

With an understanding of why labeling is so important, how should you go and effect these changes on your own website? In general, you should be able to base the majority of your labeling decisions on best practice, whether that’s web best-practice or industry best practice. Labeling depends on user association, so it’s a good idea to follow good examples of what’s come before.

Here’s some more guidance for improving your labeling:

• Make a list: Before doing any work on your labels, write a list of all of them to get a visual representation of what you’re dealing with. This will help you to identify any potential double-ups, overlaps or strange outliers that don’t really fit or make sense.
• Use your search log: Your website’s search log is a goldmine of labeling guidance. Access will depend on the platform your website is built on, but you’re often able to see exactly what people are searching for – useful when assessing whether your own labeling lines up!
• Look at your competitors: It doesn’t take much time and it’s also free. Head over to the websites of your competitors and look at their labeling systems. Do they make sense? Why? Why not? Are they doing anything useful or interesting that you could adapt for your own labeling system?
• Plan for the future – as best you can: While it’s not essential that the labeling system you build now account for any future adjustments, understanding how it could change will make your life much easier in the future.
• Run a survey: Using a survey tool like Questions, run a survey with a representative sample of your users to work out which labels make sense – and which don’t.