PAE - Navigation for Usability [LESSON]

Navigation for Usability

Website Navigation

Navigation in website design refers to how easily the user can navigate, or get around, the site. If a user has difficulty getting around the site, then they are not as likely to stay on the site or revisit the site at another time. It is important to make it as easy as possible for your user to navigate the site.  How can you do this? There are several things to keep in mind, including the following: navigation bars, consistency, intuitive text/icons, and breadcrumbs. We will look at each of these in more detail to help us understand. Navigation bars, or nav bars, are extremely important to the site; they are a list of links to the main pages of the website.  Users are accustomed to finding the nav bars either at the top of the page or to the left of the page. Don’t confuse your user by putting the nav bar somewhere else.  Limit the nav bar to 7 or fewer links, this is because the human mind, on average, can only store about 7 items in their memory (George A. Miller, 1965).  If you have a website with a lot of pages, then you can put the other pages in links at the bottom of the page and link to related pages from the main pages.

Navigation bar showing home button being hovered over and artifacts being selected.

Place the nav bar in the same place on each page so the user doesn’t have to search for it.  It is helpful to the user to have the nav bar change colors when you hover over the link to the page, so they know they are in the right place.  This is done using the design language for websites – CSS or Cascading Style Sheets and/or JavaScript. It is also helpful not to have drop-down navigation, because our eyes move faster than our mouse and we move on before the drop-down shows up.  Make sure your site is responsive so that it will work properly on different types of devices.

Usability

User experience (UX) focuses on having a deep understanding of users, what they need, what they value, their abilities, and their limitations.  It also considers the business goals and objectives of the group managing the project. UX best practices promote improving the quality of the user’s interaction with and perceptions of your product and any related services.

Factors that Influence UX

At the core of UX is ensuring that users find value in what you are providing to them.  Peter Morville represents this through his User Experience Honeycomb Links to an external site..

Image of the user experience honeycomb.

Morville notes that for there to be a meaningful and valuable user experience, information must be:

  • Useful: Your content should be original and fulfill a need
  • Usable: Site must be easy to use
  • Desirable: Image, identity, brand, and other design elements are used to evoke emotion and appreciation
  • Findable: Content needs to be navigable and locatable onsite and offsite
  • Accessible: Content needs to be accessible to people with disabilities
  • Credible: Users must trust and believe what you tell them

Credit: www.usability.gov Links to an external site.

When designing your sites, keep usability in mind.  You must make sure you are consistent in your design, that you use intuitive text/icons and use breadcrumbs to make it easier for your users to navigate the site.  To make your design consistent, you need to keep certain things the same from one page to the next.  Your logo should be in the same place, and it should be clickable to go back to the home page. Your navigation bar should be in the same place and have the same appearance from page to page. You should have the same, consistent design from page to page, using the same typography and color palette.  You can change the location of information and images, but it should be easy for your user to locate everything. Always keep your user in mind. Using intuitive text and icons means that a user will automatically know where to go or what to do without even thinking about it. This includes using predictive text that suggests words to help the user, especially with forms. Intuitive icons are icons that are recognizable. It is also very helpful to have text labels for the icons in case your user isn’t familiar with the icon. Your icons should be similar in appearance to one another. Breadcrumbs refer to a path for the user to follow so they can get back to where they came from in the site. See the image below to see how breadcrumbs work.

Image showing how breadcrumbs work.

Image attribution - ShareAlike Author: Seobility.net

Below is an image of a site with “styled breadcrumbs.” Notice the box above the image that has the path for the page.  It shows Europe>Central Europe> Slovenia > Coast and Karst> Piran.  Also, notice the use of color to indicate to the user where they are. You can tell from these breadcrumbs that to get to this page the user would go to the main Europe page, then go to the Central Europe page, then they would go from Central Europe to the country of Slovenia, from Slovenia the user would have gone to the page on Coast and Karst, and then this page is about Piran. It is always helpful for the user to be able to tell not only what page they are currently on, but how to get back to where they came from. 

Image showing a web page for Piran from the site Wikivoyage.

Accessibility Considerations

Accessibility refers to making sure your site is accessible to people with varying disabilities. When considering usability and user experience, it is important to also consider that your site will likely be accessed by people with disabilities. Therefore, you need to provide options to make it easier for those people to access your site and the information on the site. You include alternative text for all your images, this is text that can be read by screen readers for people with visual impairments. The screen reader will read off a description of the image for the visually impaired user.  You need to provide a script for audio and video elements that can be read by those with visual and hearing impairments. You shouldn’t use certain color combinations because they are difficult to read, such as red and green since red/green color blindness is the most common form. You need to make sure you have excellent color contrast so that it is easy to see your information. 

Image depicting the importance of making your communication accessible.

Take a moment to test your Navigation for Usability and Accessibility knowledge by clicking true or false in the activity below.

[CC BY 4.0] UNLESS OTHERWISE NOTED | IMAGES: LICENSED AND USED ACCORDING TO TERMS OF SUBSCRIPTION