Image
Web Navigation Page


Website Navigation is a hot topic in web design and development. Without a user-centric and well thought out navigation strategy, your website will lag behind the rest. Users need to navigate a website before they can digest content, engage with the brand, or even contact the company. Outside of website visitor experience, web navigation is essential to  SEO as it gives your site a structure and helps search engines, like Google, understand your site and what information it provides searchers. 

What is Web Navigation?

Website navigation is the process and elements of navigating networks, websites, or apps on the internet. All the resources online are linked using hypertext or hypermedia. You may use this technology when you insert hyperlinks into an email or a blog. You may not have realized it, but hyperlinks are also the technology behind dropdown menus used to navigate over 80 percent of websites.

Why does it matter?

Web navigation allows users to find what they need or want on the internet quickly and, hopefully, easily, making it an essential piece of user experience. If the website's web navigation is inadequate, users may leave the site and try another source that will allow them to find the information they are seeking more easily. Poor web navigation can also mean that users never find your content to begin with, as Google and other major search engine take user experience into account for page rankings.

Web navigation can affect important metrics such as bounce rate, time on page, page traffic, click-through rate, search rankings, and even conversion rate.

What are the basic types of website structure?

There are 3 basic types of website structure: linear, hierarchical, and matrix. The linear structure is when a website goes from one page to the next in one straight line. This type of structure is only useful for very small and narrowly focused websites, such as a company that sells one specific product or service. A website that has more than five pages should avoid this type of structure.

Image
Straight row structure site map


A hierarchical structure is the most common type of website structure. A hierarchical layout will resemble a tree with a narrow base that branches wider as the tree grows. The base typically consists of a homepage that links to main subject pages via the main menu and then branches to subcategories using the submenu and so on. 

Image
UT Site Map



Matrix structure allows users to determine their own path through a website's content as all the pages are linked to each other in numerous ways. This structure takes full advantage of hypertext principles and relies heavily on search engines for user navigation. This website design is unpopular among businesses, associations, and banking websites because it forfeits all control over the user journey and can cause elevated levels of user frustration from both front-end users and backend administrators. The most well-known example of a matrix structures website is Wikipedia, which is a special type of website with a simple goal of sharing information online for free. Wikipedia also relies on search engines to pull results and allows users to update and generate content. 

Image
Wikipedia Search Bar

 

What are the main technical design elements of website navigation? 

Design elements of web navigation can cover anything from color and font choices to more technical website features. In this section, we are only going to review the website’s technical navigation features. The most common features are the main menu, secondary menu, breadcrumbs, and links.  

If we are looking at a hierarchal structured website, the main menu will be a set of links that go to the website's main categories. You can see that our website's main menu consists of 5 different links that will navigate our visitors to these principal areas of the website.

Image
Menu Drop down blue and orange

A secondary menu will show sub-topics under a topic in the main menu. Following the same example as above, you can see the Unleashed Technologies website has a secondary menu under services that list the 5 primary services we offer to our clients.  

Image
UT Services Sub Menu

Menus are an extremely common, valuable, and well-understood navigation tool for websites. Links are just as universal but, in many cases, less understood by end-users. Links are a navigation tool used in virtually all web design, even a linear structured website. As we covered before, hypertext or hypermedia connect websites and pages to each other. An alternative word for these connections is a link. There are internal links and external links. Internal links will direct a user to another place on the same website, while an external link will take the user to a different site. Links are important to user navigation, but they also play a huge role in  Search Engine Optimization (SEO).

The last feature of website navigation is breadcrumbs. A breadcrumb is a small design element that helps users know where they are on a website, how they got there, and how to go back. This design tool is beneficial for eCommerce sites as there are many routes to accessing a particular product. You can see that the user in the example below arrived at that page by going to jewelry-> necklace -> charm necklace and can click the breadcrumb bar to go back to a previous page. 

Image
Breadcrum example

What about the Search bar? 

Search bars are becoming an increasingly important way for users to navigate a website. Online users expect to find specific information quickly. Thanks to Google, Amazon Echo, and other popular search engines, people are becoming more comfortable searching for information rather than following a standard navigation path. This trend is likely to continue as more voice-based search options are available to users. 

Once you decide that a search bar is necessary for your website's navigation, there is a massive number of on-site search tools, such as Google search, Apache Solr, ElasticSearch, and many more. Based on your site's needs, you should consider the difficulty level of tracking search analytics and how the plugin will integrate with your content management system (CMS) when choosing what tool is best for your website.  

How can I track the success of my web navigation?

Web navigation is a nuanced subject, and what works for some websites will not work for others, but there are some concrete ways to determine if your site's web navigation is successful. Some of the main metrics to look at include bounce rate, average session duration, click-through-rate, and page traffic.  

  • Bounce rate: If a visitor lands on a webpage and then leaves right away, they contribute to that site's bounce rate. If a site’s bounce rate is high or increasing, the website visitors are not finding the information they are looking for or are confused and do not know how to navigate your site. 
  • Average Session Duration: This is the total amount of time a visitor spends on the website. If a visitor spends a long time on a specific page with low content, that can signal that the page is difficult to navigate.  
  • Click-through-rate (CTR): CTR is a percentage of the people that click on an element they are exposed to. If a website has a high CTR, the navigation probably makes sense to the user and their needs.  
  • Page Traffic: This is the number of users that arrive on a certain page. If one page with high-value content has lower page traffic than others, this can alert the designer to a problem in the web navigation to that page.  

Other metrics can point to poor page navigation, but these four are a good place to start when examining where your website navigation is today and where it can be improved.  

Website navigation can make a website successful or can cause a large bump in its user experience. This article only covers the basics of what goes into website navigation. Other items such as font, color scheme, layout, and copy are also influential elements to web navigation and general user experience. If your organization is considering a new website or a redesign of your current website, one of our experts can design an individualized digital strategy that includes both web navigation and user experience best practices specific to your business’s industry.