Data Visualization: Choosing Navigation by Using Rules

By Mico Yuk, Stephanie Diamond

Imagine having a business that can’t be found using one of the popular GPS systems, such as Google Maps. Revenue will suffer, and the business could fail. The same applies to a data visualization that has poor navigation. If users can’t find their data with little to no effort, they’re not coming back. You have to make it crystal clear where you want them to go to see the complete story.

One way to do this is to add navigation to your mock-up. Usually, you add navigation to a data viz through a combination of menus, images, and words.

The good news for data-viz geeks is that the web development industry has tested and set standards and rules for effective ways to include navigation in any user interface.

Take a look at the navigation on two popular websites. The site shown in the first figure below has the navigation across the top and on the left side, and the site shown in the second figure below has the navigation at the top. Both locations are common. Just go to any of your favorite sites, and it’s likely that you’ll see the same setup. uses top/left navigation to guide users. uses top/left navigation to guide users.
The CNET website uses top navigation to guide users.

The CNET website uses top navigation to guide users.

It’s also important to note that some data viz may not need navigation because they just display data for the purposes of monitoring. A good example of this specific type of data visualization is a dashboard that is used to monitor the number of calls in queue at a call center. The user can take a glance at the data viz on the wall and become aware that he probably needs to wrap up the existing call to be able to address the calls in queue.

The logic behind where to place the navigation on your data viz — be it at the top, left, or bottom rather than in the middle — has to do with the way that most humans read information. Most people tend to read from left to right in a Z pattern, as shown in the following figure.