Anatomy of a website: website labeling

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.

The navigation bar of the Motoris website with labels.
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.