Anyone who’s been involved with the UX design of a website will have at some point made some decisions about how to organise content, order pages and allow interaction with page elements. This is information design and it underpins the internet.
We tend to think of these elements as the navigation, user journey flow and (most commonly) filter and sort. Many of us use them almost blindly, relying on their ubiquity to give us solid building blocks for the core parts of our site. Thankfully though, each of these elements is underpinned by tried and tested information design theory. This allows us to use them with confidence.
Information design extends beyond websites and into the wider arena of any system which holds information. For example, libraries, road signs and maps, and even organisational design in workplaces all benefit. Broadly, there are three main methods of organisation and categorising content and we make use of all three on most websites.
For designing sitemaps and navigation, a hierarchical system is usually preferable, with the exception of processes like checkout flows, where a sequence is better. For navigation between content, like on blogs or news sites, a separate flat system called faceted classification works best.
Operates using a system of categories and subcategories, to as many levels as required. Each entry broadly maps to a page on a website. On modern websites going beyond three levels is less common (but not impossible), due to the constraints of navigation interaction patterns.
Content will have a parent category and may also have child subcategories. The user moves between categories at the same level (1.1 to 1.2) up and down levels (1 to 1.1), but cannot go side to side (1.1 to 2.1). If moving across categories is required on the site, this is usually done with an in-page link.
Effectively, this method of organisation maps to the navigation system. Although sometimes early drafts can go as deep or wide as needed as the model is developed. As a guiding principle, the top level categories should be generic, getting more specific at each lower level. Keep labels short and descriptive. Aim for 5-7 labels at each level, apart from the bottom one which can often be deeper if needed. Each label should be unique, and each concept should only occur once.
If the hierarchical system extends beyond three levels, it’s likely that some of the burdens will shift from the global navigation system to on-page navigation e.g. a right-hand column, but these should still be documented and mapped out in the same manner.
Where pages follow one another in a defined sequence. The user can only follow the specified paths and orders (although these may include the ability to skip pages or take a tangential route.) All routes should be mapped out on a page-by-page basis. A flow diagram is a good method.
This structure is useful for processes where the order of pages must be fixed for the user’s goal to be accomplished. The basket and checkout processes on ecommerce websites will use this model. It's also used for many tasks in SAAS (software as a service) sites and on apps.
We combine traditional business planning with actionable insights through workshops, research, testing and idea validation.Find out more
Rather than being placed in a rigid hierarchical structure, content can be assigned multiple tags, or facets, which allow it to be described across a number of different dimensions. In traditional information classification systems, this method has its detractors, as it allows something to be many things at once - but for websites, it is very useful.
Online, facets are used for classifying content which may relate to a theme or have many dimensions which need describing. Or, in more familiar terms, text articles and product data. Whenever you interact with a filter on a news or ecommerce site, you are using a facet schema.
Each item of content (e.g. an article or product) is categorised according to a number of criteria. For instance, if this schema was describing a group of products, we can see that item 1 is blue and large. Item 2 is blue, red, and small and so on... Here we would expect to map them to filters on a product category page.
When creating a facet schema is it important to consider all aspects of the material. This includes the nature of what is being described and also what filters and tags would be useful to the user e.g. on a search results page. For instance, a system for describing the products in a furniture store might include colour, dimensions, style, and function. In a blog, facets may cover a topic, named individuals and locations. Creating a facet schema is a job in itself. And, perhaps confusingly, is best created using the rules of a hierarchical information system.
For instance, a facet called 'location' might have ‘Europe’ as an attribute, which itself contains ‘France’, ‘Italy’, ‘UK’ etc. An article tagged with ‘Italy’ would be also automatically tagged with ‘Europe’ too. This is because it inherits attributes further up the tree.
In summary, information design methods are at use in the fundamentals of UX. Understanding their principles and benefits allows us to create websites with confidence, even when technology is rapidly changing. Each has their strengths and weaknesses but when implemented properly, can be the difference between a site that is hard to use and one which chimes with our very idea of how we understand the world.