Avoid Format-Based Primary Navigation

by Aurora Bedford on June 8, 2014

Summary: Format-based navigation, such as links to Videos, at the top levels of a website’s information architecture lacks sufficient context and information scent for topic-focused users.

Upon landing on a website, users evaluate the main navigational options and, based on their information scent, they decide which of these categories is most promising for their current task. At this level, users interested in a specific topic usually don’t care in what format the information will be delivered to them; they are focused solely on finding answers that will address the question they had in mind. For this reason, for sites where the majority of the tasks are topic driven, format-based navigation does not work well at top levels of the information architecture.

The situation is different at deeper levels of a site: once people have arrived at a page that interests them, providing navigation to additional material about that topic according to format may be appropriate. For example, a content page for a zoo’s polar bears could have links to Photos of the Polar Bears or Polar Bear Live Cam. Similarly, a gardening site’s product page for a particular flower variety could include links to Photos in Customers’ Gardens. Not only are these example links more descriptive than the format alone, their placement within the page gives them context. For the upper navigation layers in the IA of a website, the context of being related to the current site is not specific enough to be helpful.

Generic Format Labels Lack Information Scent

The most common instance of generic format labels sneaking into a site’s main navigation is the Videos link. It is a common misconception that having a standalone video gallery will increase video interaction because users can see from the main navigation that video content exists. In reality, this is only half true: yes, users may realize that there are videos available on the site; however, the Videos label alone is not enough to persuade a user to navigate to that section, as, at this point, no details are given as to what type of information the videos will deliver.

B2B and corporate websites promoting a service or product—physical or digital—often fall prey to this trap in an effort to highlight demonstration videos, customer testimonials, and the like. Especially for companies that have multiple categories of videos to present, it’s tempting to link to a single section containing all the videos within the main navigation. Keep in mind, though, that the main navigation of a website should allow a first-time visitor to infer what the company does, what its offerings are, and what type of content is delivered by the site. A Videos label alone does not tell users what the videos are about: product walkthroughs and demos, advertisements, customer testimonials, or something else?

For users interested in learning more about a product or service, clicking on a vague label like Videos is a suboptimal behavior: the interaction cost for navigating to a section containing mystery content is too high. Navigation should not be like a box of chocolates: people must know what they are going to get before they bite (click). Users looking for customer testimonials have no idea if these would be presented in a video format, and may not consider navigating to Videos just to check. Links such as Features, Benefits, Testimonials, and FAQs are more attractive because these labels do a better job of explicitly describing the information that users would receive. In contrast, the generic Videos link gives no hint as to whether or not the videos would be related to the user’s current task. In short: users evaluate each menu option and choose the one that appears to offer the highest benefit for the cost of the click (in terms of delivering valuable, relevant information).

Screenshot of main navigation of Robstep website
The Video link in the main navigation of the Robstep website gives no information about the type of content that the video would deliver. (The singular term also inaccurately implies that only 1 video exists when there are actually 3 videos, hidden within a carousel.) The links for Robstep Robin M1 (the product’s name) and FAQ are much more attractive navigational options to users wanting to learn more about the product.
Screenshot of main navigation of Epicurious website
Similarly, the Video link in the Epicurious main navigation fails to communicate the type of videos that the site provides. Unlike the Recipes & Menus and Articles & Guides menu options, the Video option does not possess a drop-down or mega menu to expose deeper levels of content and provide some insight into the wide variety of content available.

It is interesting to notice that sites linking to Videos are quite common, whereas a main navigational link to another format such as PDFs is obviously not helpful, and not implemented on any (hopefully!) sites.

Focusing on Format Hurts Findability

A format-based navigational structure forces users to focus on the delivery method instead of content. When content is grouped by format, users must guess the format in which a particular topic will be presented. Imagine going to a grocery store where every aisle was organized only according to the packaging: “boxes,” “cans,” “bottles,” “cartons,” “jars,” “bags,” and so on. If you were only looking in the bags section for chips, you would never find Pringles because they come in a canister!

In the below example from The Home Depot, it is unclear whether the format-based sections would contain the same subcategories of information. Hence, users are forced to guess how likely it is for the information that they are looking for to be presented in a video versus a guide, and so on. This is terrible: a website should never force its users to step in the designer’s shoes to speculate where content exists.

Screenshot of Home Depot's How To section navigation
In The Home Depot’s Project: How-To section, the format-based navigational structure forces users to decide whether they want a guide, advice, videos, or to attend a workshop. Instead, users should be allowed to select a topic first and then, on that topic’s page, narrow down on format.

Format Silos Cause Extra Clicks

Format-based navigation not only distracts users from their main task of finding information on a topic, but also creates extra work for those users who would want to consume content on that topic in a variety of ways. By creating these silos based on the content’s format, users interested in the topic must exhaustively navigate to every section of the site and drill down to that desired topic each time.

Screenshot of main navigation of EngenderHealth website
The main navigation of EngenderHealth divides content for each topic that they address into multiple areas: the primary Our Work section describing each topic, and the Our Stories, Our Videos, and Publications and Resources sections, each containing sub-navigational options for each topic. The Media Center adds further confusion because users may interpret it as a center containing media (like videos) rather than containing content targeted at those working in the media industry.

One solution to get users to move between pages or sections of a website once they’ve started down a certain path is to add cross-references to the desired location. While links on each content page pointing to related videos and other types of content available in other sections may help increase the discoverability of other formats, it still places a burden on the user to jump around to the various areas of the site to consume all the content for a single topic. It also introduces 2 design challenges: (1) getting users to notice the links to related content (a common placement for related content is the right rail of a content page, which users often overlook due to right-rail blindness), and (2) providing enough information about the related content to entice users to click.

Screenshots of topic overview content page and video page on EngenderHealth website
On the Our Work section of the Engender Health site, the landing page for the topic Maternal Health provides a cross-reference to a related video within the often-overlooked right rail. This link directs users to a Digital Stories subpage containing 11 videos, all of which are different than the videos provided for the Maternal Health topic under Our Videos. Users wishing to view all content regarding this topic would need to hunt in every section of the site, filtering down to the topic repeatedly in each one.

A better solution would be to allow users to navigate to a topic and present content in multiple formats on that page: text descriptions, images, an embedded video, links to download related documents, and so on. Eyetracking data shows that users are easily distracted when watching a video and will continue to look around the page at other elements. Task-focused, knowledge-hungry web users scan and move rapidly, and providing low-end media such as text and images for multi-tasking users to consume while playing a video creates a more information-rich experience than a standalone video gallery and player.

Embedding videos within page content also places the video in context and allows more room for text to describe what the video is about and why the user should watch it. Watching a video is more of a commitment than simply scanning text and images on a page, so these detailed descriptions help reassure users their time would be well spent.

Screenshot of in situ video link on Gmail's Features webpage
While scrolling through this long page describing Gmail’s features, users in our study looked at all the text and images about a particular feature before deciding to watch the video. (This video, however, launched a modal window to play the media; a better solution would be to play the videos within the allotted section on the page so users could continue on to the next feature more easily, even while the previous feature video was ending.)

A Caveat: Format-Based Browsing

The discussion and recommendations in this article apply to the case when users are focused on a specific topic.

On most websites, users typically engage in two kinds of behaviors: browsing and information search. In browsing behavior, users visit the site to absorb whatever content the site may have for them: they may check the latest news, watch an available TV episode, or peruse the latest sales. With information-search tasks, users are interested in finding a particular piece of information; they are topic driven. Finding information about a university’s admission process or how to cook the perfect hard-boiled egg are examples of information-search tasks.

Format-based navigation can work when the predominant behavior on the site is browsing. For example, users of a television network site may be visiting because they want to watch videos (perhaps of a variety of shows offered), and so a Videos section where they can easily switch between shows would be more helpful than forcing them to browse to each show’s content page to check for any new episodes. Similarly, users visiting a celebrity gossip site may be interested in viewing any recent photos regardless of whom they feature, and so a main navigational link to Photos would be appropriate.

A good site design is based on a thorough understanding of user behavior. A site may attract both browsers and information searchers; however, for most sites, one of these groups is the clear majority. If the majority of your users are searchers, it does not pay off to optimize the design for browsers and vice versa. Remember to consider the main tasks and goals for the site’s specific target audience, rather than choosing a navigational structure based solely on the types of content available to the organization.

In Situ, not in Silos

Videos and other formats of content can be a great supplement to text- and image-based content, but must be presented in context to stand a chance at being discovered and interacted with by topic-focused users. Generic format-based links at the main- or secondary-navigation level of a site are not compelling to users as they do not carry a high level of information about real content. Instead, focus on getting users to the content related to their task, and then present them with the option to watch a video, download a whitepaper, read a related article, view a step-by-step guide, and so on.

Share this article: Twitter | LinkedIn | Google+ | Email