The evolution of the navigation bar

It may not be the most glamorous web design topic but navigation is crucial to a website’s conversion success. Poor navigation is to blame if a visitor can’t find the content they need or the page you want them to reach – and if the user experience is negative, visitors may never return. It also affects traffic and search engine rankings. Navigation should therefore be well thought out and clear so that visitors can instantly find exactly what they want. Remember, visitors don’t always come to your homepage first. The basic rule is that your website navigation should ensure that users can land on any page on your recruitment website and find what they want within three clicks. 

There are many options you can take to guide users through your website and much to consider. Where should your navigation be located? How big should it be? What shapes should it consist of? What labels should you give your navigation links? We look at the evolution of the navigation bar to determine what still works, what needs to be altered and what is hot right now in the world of website navigation.

What is website navigation?

Website navigation allows users to find their way around your website, landing on the pages they’re looking for and, if you’ve done it right, landing on the pages you want them to find. It consists of a combination of software tools and visual design that act as signposts. Designers must build a structure that provides optimal access from a user’s perspective and that divides the website clearly and logically. 

The birth of website navigation tools

Early websites featured just three basic navigation bars – headers, footer and sidebars – and many are still in use today. Most flowed horizontally as desktop monitors are wider and this classic design persists on many websites. In truth, because navigation is best kept simple, the location of the navigation bar hasn’t changed much since those first pioneering websites. The one newer type of navigation bar that is used on many websites thanks to the need for mobile responsiveness is the hamburger menu.    

The advent of mobile

As mobile devices became more advanced and smartphones started to take over, designers knew something had to change when it came to navigation. Mobiles and tablets have smaller screens, necessitating navigation formats that fit without dominating, and use tap technology, meaning that links need to be large enough to tap with a single digit. Navigation design needed to adapt for best performance.

Synonymous with mobile website navigation design is the hamburger menu, so called because of its three horizontal lines resembling the three layers of a hamburger. It was lauded as the solution to mobile website navigation because it is hidden and therefore does not take up valuable space on a small screen. Tap the icon and the menu unfolds. It is Facebook that is credited with starting the hamburger revolution in 2008 and today it is often used on all browsers, though its detractors insist its hidden format makes it less discoverable.

The need to ensure websites work just as well on mobile has also led to responsive navigation – one design which will automatically adjust according to screen size. This is less expensive to maintain and easier to make changes and updates (you only have to do it once) but designing a site that provides a great user experience across multiple devices and screen devices presents challenges.

The navigation bar in 2020

As with all areas of website design, there are a multitude of navigation bar trends, some of which might work on your recruitment website and others that might not. What’s important is to remember not to over-complicate your website’s navigation – ultimately the point of navigation is to help users to quickly and easily journey through your site to find what they need.

  • Sticky header – Also known as a ‘fixed scrolling navigation bar’, this header stays in place at the top of the page when you scroll so that users can navigate whenever they wish without scrolling back up again. Useful on mobiles when upwards scrolling can be a chore but some find their ever-presence annoying as it can block content.
  • Fat footer – A standard footer contains just the contact details, link to terms and conditions, and social media icons, whereas a fat footer is a fully expandable feature-filled navigation with more info than the main menu. This is useful to give visitors more options, such as an ‘About Us’, a sitemap, contact info, and recent news or top blog articles. If they didn’t find what they were looking for above, they’ll find it here. Just exercise caution and resist making it too big or visitors will face problems scanning it quickly.
  • Mega menus – As the name suggests, these are expansive menus that tend to cover much of the screen when clicked on. These tend to be better suited to retail websites with a high number of categories and pages or magazine-style sites with a lot of content. Given their large size they are not ideal for mobile.
  • Vertical sidebar sliding navigation – This is new enough to add uniqueness and creativity to your website and is a way of standing out from your competitors. The navigation runs vertically down a sidebar and slides out as links are clicked on. As our eyes naturally move down it could make it easier for users to scan but titles need to be short enough to read in a narrow bar and it needs to contain enough contrast to the rest of the screen to remain highly visible.
  • Carousels – These are great for blog pages where that contain lots of content or regular updates. If content is a big part of your site they are great at the bottom of the homepage too. Fresh, exciting jobs can also be added to a carousel. The major advantage of carousels is that they demonstrate that the site is active and gives users a reason to return. 

Top tips

  • Separate sidebars from the rest of the page content to avoid confusion. Clever use of white space works, as does using different colours.
  • Creativity is great but keep navigation bars where people expect to find them – at the head, the side and/or the foot of the page. Always think about user-friendliness.
  • Make use of the bottom of the page – a footer acts as a reminder of what’s in the header and means users don’t have to scroll all the way to the top of the page to click onto another area of your website. 
  • Think about where to funnel users – every page should contain a call to action, depending on what your priorities are. That may be a link to your jobs page, contact page, blog or About Us, depending on where you want users to go next in their journey.
  • Plan navigation with search engines in mind – use labels that people will be searching for and will therefore be picked up by Google. 
  • Mobile optimisation is non-negotiable – given the huge number of people who access websites on the go, it is essential that your navigation is mobile-friendly. 
  • Research has shown that short term memory only holds seven items so limit the number of links on your navigation or important pages risk being scanned over. The minimalist approach works just as much for navigation as it does the rest of your website design.  

There are over 40,000 recruitment agencies in the UK alone, all with websites and all competing for that next client or top talent. An easy to navigate, intuitive recruitment website hugely increases the chances of visitors remaining on your website rather then clicking away onto another agency’s. Make it easy for users, give them a positive experience and they will progress through your site, performing the desired actions with the ultimate goal of a new job or hire.