University of New Hampshire, Department of Computer Science

Information Technology 502
, Intermediate Web Design

Spring 2024

Jump to navigation

Design Template by Anonymous

Best Practices

There are dozens, or even hundreds, of best practices and conventions that a web designer should follow in terms of navigation. These help to ensure that the site is both accessible and easy to use, while also maintaining

Limiting Options

One of the single most important best practices in terms of web navigation is limiting the amount of options that a user has at any one time. Going back to the same highway analogy, look at the example below. As drivers we only have a few seconds to scan road signs and make a decision based on what we see. The same activity occurs everytime we enter an unfamiliar website too. We unconsciously scan the page for the item most related to what we are looking for; however, with both of these scenarios, the more options there are the longer it will take to scan them all. This can lead to the possibility of either taking too long to make a decision, which would cause us to miss the correct exit, or to become confused and give up entirely. In order to avoid this, website designers should be careful to never put more than seven separate navigation options in front of the user at any one time. Any higher number than this can cause the decision making process to become much longer and harder.

Confusing highway exit with muttiple signs.
Having to make split second decisions can become difficult when we are presented with too much information at once. By narrowing down the number of options that users are presented with, we can ensure that we are not making them think harder than necessary.

Smart Labels

Another prominent consideration of designing navigation is the names or terms used for each page. Longer titles can lead to large jumbles of words, turning neat navigation bars into an unreadable mess. Simple titles allow users to automatically click their desired page without overthinking or having to read every option that is presented to them. Shorter names allow the user to scan and find their desired topic or area quicker. Additionally, having shorter and clearer titles can be beneficial to a wide range of users, especially those who are trying to learn or are not fluent in english. Increasing the readability of the site will allow more users, including those from outside of the United States, to successfully navigate and find the main resources in a quicker time frame.

Prioritize Important Pages

One of the toughest challenges when designing the navigation setup for a website is choosing which pages are important enough to be featured in the primary navigation. When surfing the web I constantly see websites that contain a page dedicated to the background and goals of the company. Oftentimes an “about us” page like that will be included in the primary navigation for a site, frequently at the request of the site’s owner. They may feel inclined to inform users about their personal, as well as professional lives, and what drives them. A page like this can indeed be important, but it should almost never be included in the primary navigation of a site. It only adds more clutter and options that the user will have to scan through before they can find their desired location. Instead, a “bio” or “about us” should be located either in the secondary navigation or the footer, while more important options such as products or contact information take center stage in the primary navigation.

Walmart website does not have an about us sectoin in their primary navigation.
Walmart does not include any information in their primary navigation regarding a personal or mission statement. This is because they would rather advertise the more important pages that will actually sell products and make them money. That is why the primary navigation bar is full of different products for users to shop for, rather than the history and founding of walmart.

There can be exceptions to this rule in certain situations such as non-profits. Nonprofits and other charities rely on donations from random people across the globe. Because of this it can be very beneficial for the site to explain the mission and driving force of the charity, as well as spotlighting certain achievements and workers within the organization. Information such as this can cause users to be more likely to donate money or volunteer their time, so in this case it is an excellent idea. Just do not go placing the “about us” page in the primary navigation of sites focused on tasks other than charities and nonprofits.

St.jude does have an about us because they are a nonprofit and rely on donations.
St.Jude Children’s Research Hospital is a nonprofit organization that treats childhood diseases such as cancer. Being a nonprofit, the organization relies on donations and goodwill from others. Because of this, their website designers included large volumes of information about the mission and backstory of St.Jude, along with making the very first primary navigation button an “about us” page. This approach is extremely successful because the organization is a nonprofit, but normal for-profit websites should not be structured like this.