How progressive disclosure helps you design better website navigation

The line to enter the building is a little longer than you want it to be but it seems to be moving fast. You see another group of people walking towards the entrance of the exhibition and you decide it's better to join the line now before it gets even longer.
But as you enter the main door you realize that the line continues inside the hall. What do you do at this point?

You can give up of course, but you are really kind of interested in this exhibition.
From your point of view you see the line making a couple of turns and a door which certainly will lead to the exhibition floor. Twenty minutes later, when it's your turn to enter that door, you realize with horror that you are not really entering the floor. You are entering a second hall with an even longer line then before.

The exhibition organizers knew that if there was a long line outside the building it would have discouraged many visitors. So they simply broke up the line into smaller segments and hid them progressively from view.
What you have just experienced is a technique called progressive disclosure and as we will see it can be used to improve website usability.

In this article we are going to cover: 1. what progressive disclosure is
2. what its advantages are
3. how it's used to improve website navigation.

What is progressive disclosure?

Progressive disclosure is a way to let users manage complex information easily.
If you are presented with a lot of information you may feel overwhelmed. Progressive disclosure lowers this sense of overwhelm by presenting only part of the information, the most relevant part, at any given moment.

Users are first presented with a small set of choices.
Additional options are hidden from the screen and revealed only if the user wants them.
This means that the user can continue in his interaction without worrying about choices that are not relevant at the moment.

What are the advantages of progressive disclosure

Let's say you have a website with lots of information in it and two kind of visitors: new visitors that have never been to your website before and returning visitors.

New visitors would prefer to have a general overview of the site. They would like to see what the main categories are and quickly understand if the site is useful for them.

Returning visitors, on the other hand, have been on the site many times before and know what they want to do. They have specific tasks in mind and would like to do them as fast as possible. They would like to quickly access the internal pages of the site to achieve their goals.

As you can see, you have a possible problem here: both kind of visitors access the same home page but need to follow different paths into the site.

Progressive disclosure solves this problem by layering information.

A first layer of information is presented to all users. This first information is a general view of the site's content.
More in depth options are available to experienced users but they are hidden from the screen and revealed only on demand.
By layering information with progressive disclosure you help both new users and more experienced users find quickly what they want.

How websites use progressive disclosure in navigation bar design

The top navigation bar is one of the main entry points to websites.
It's basically a list of links that new and returning visitors click on to access the pages they need.
On a large website, without some kind of structure, a long list of links could become very confusing very quickly so most websites limit the choices in the navigation bar to the main categories.
You will often find links like: About us, Articles, News, Contact.
Limiting the display to the main categories is helpful to new visitors because it gives them a quick overview of what the site is about without bothering them with too much detail.

But the detail is needed by more experienced visitors that already know the structure of the site and want to access internal pages quickly.
Given this scenario, the best way to go about it is to reveal more in depth information only when the user requires it by moving the mouse over the main category links.
This is usually achieved by using what is called a rollover.

A rollover is an action triggered when the mouse is moved over one of the main category links. When the rollover is activated, a drop down menu appears with a list of related links.
This way, the experienced visitor can quickly access subcategories or sub-pages deep down the website structure.

But doesn't progressive disclosure limit the options of visitors?

After all, they can't immediately see the wealth of information that's hidden behind the home page.

This objection make sense but research shows that limiting the options to website visitors actually helps them create a better mental model of the site. Our brains love hierarchies and we always go about classifying the world around us into categories and subcategories.
By following the way the brain works in laying out our navigation bar we are actually helping people better understand our website.

To summarize

Progressive disclosure is a way to display information in layers. A first layer presents general information and a second layer, disclosed only on demand, presents more detailed information.
The advantage of progressive disclosure in a website is that it gives new users a simple to grasp overview of the main categories of the website while allowing more experienced users to quickly access internal pages.
On navigation bars, progressive disclosure is achieved by using drop down menus that appear when an user rolls over one of the main categories links.

Like at the entrance of an exhibition, where progressive disclosure is used to hide the length of a line with the purpose of not scaring away visitors, we can use progressive disclosure to our advantage on our website to limit confusing choices for our visitors and make navigation more easy to handle.