Design Template by Anonymous

Supplementary Navigation

Supplementary navigation refers to conventions and elements that are not essential to the core functionality of the site, but that improve the usability and overall user experience of the website. These features help the site to have a finished and polished appearance. This can come in many forms such as providing users with a sitemap in order to help them understand the layout of the site, creating a footer to hold any extra links and information that may be needed, or utilizing breadcrumbs so that users do not become lost or turned around.

Types of Supplementary Navigation

Breadcrumbs

In order to help users understand where they are located within a website, we can implement the use of breadcrumbs, or a breadcrumb trail. This navigation technique illustrates the current location of the user relative to the site hierarchy.

Breadcrumbs are organized (usually) from left to right, with the leftmost crumb being the top of the hierarchy, otherwise known as the home page. That means that the far right crumb indicates the user’s current location. The word “usually” was previously used due to the fact that while most websites set up their breadcrumbs this way, there is a minority of sites that use breadcrumbs in a vertical manner rather than the typical horizontal orientation; However, horizontal is generally more effective due to our reading habits of left to right.

Picture showing how breadcrumbs are organized from left to right, with right being th ecurrent location of the user. — Breadcrumbs are organized by the current depth of the user from left to right, with the leftmost crumb being the top of the hierarchy or the home page. The rightmost crumb refers to the current location of the user and usually appears slightly different compared to the previous crumbs. In terms of this site, the current location of the user is distinguishable by the lack of blue coloring and underline on the right breadcrumb.

It is important to note that breadcrumbs are not necessary on sites with a shallow hierarchy. A shallow hierarchy refers to a website that only has one or two layers of depth, as seen in the picture below. Because the user can only ever be down one level from the home page, it is almost always pointless to include the use of breadcrumbs; However, there are a few exceptions to this one. One such situation would be the planned expansion of a site. As companies grow, often so do their websites. Implementing breadcrumbs early on can help to save time in the future in case the site hierarchy gains more depth. Another possible use of breadcrumbs with a shallow hierarchy is to maintain a professional look. While not necessary, breadcrumbs, like many other web conventions, can help a site to appear more polished.

low depth website layout that does not need breadcrumbs, it is too straightforward. — Breadcrumbs have more visual practicality rather than actual usage on shallow depth sites; however, they can still be useful in cases where websites plan to expand in the future.

Our real world example of breadcrumbs, like the previous instances, also appears on the highway. In the United States we have small posts every .1 or .2 miles known as mile markers. These petite signs inform users of their current mile location on highways and interstates. This is extremely helpful in cases where drivers breakdown or need assistance, as they can tell responders their exact location.

Picture of a highway mile marker, which is comparable to the purpose that breadcrumbs serve. — Highway mile markers serve the same purpose on our highways as breadcrumbs do on websites. Without both of these vital supplements, it would be much harder to tell your exact location on both websites and highways.

Sitemaps

Another convenient way to help users understand where they are located or what resources the site has to offer is by supplying a site map. Site maps (as seen below) show the actual layout and page hierarchy of a website, along with the relationship between all differing sections and pages. By utilizing this resource, users can see the different contents within each category. Highway example. A sitemap is just like an old fashion paper roadmap, or a newer version such as google map and waze. Both show a simple overview of all possible routes, the names of all such routes, and exit names/numbers.

The layout of an entire site, the blueprints of the navigational structure. — Sitemaps can be valuable resources when users are navigating extremely large and complex sites.

Footers

Footers are the complete opposite of headers, hence the name. Footers lie at the bottom of each site, usually encompassing a multitude of different links. These are links which were deemed not important enough to be included in the primary/secondary navigation, but still hold enough value to be on the site in general. In addition, the footer can contain links that have already been displayed in the primary/secondary navigation bars. Because of this, it is best to think about the footer as an all encompassing area which contains all information a user could need. In terms of our highway example, a footer can be compared to the attraction signs that are located before each exit. These signs show the attractions and food locations that each town or city contains, allowing drivers to see what stopping in that location can offer them.The footer does the same thing, giving users insight into resources they may not have known about or found elsewhere.

A footer that contains a multitude of links at the bottom of a page. — A footer is a type of supplementary navigation that is located at the bottom of a page. It is a conglomeration of links that are not essential, but still relevant to the site and its operations.