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. It helps them to land on the pages they’re looking for and, if you’ve done it right, 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. As 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 dominate the market, designers knew something had to change when it came to navigation. Mobiles and tablets have smaller screens, necessitating navigation formats that fit cleanly. The use of tap technology also means 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. 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 makes it easier to make changes and updates as you only have to do it once. However, 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 constant 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. 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. However, titles need to be short enough to read in a narrow bar. The sidebar also 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 give 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. That’s 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. It all depends 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 missed. 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. Most will have websites and all are 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 a competitor’s. Make it easy for users and give them a positive experience. Do this and they will progress through your site, responding to the CTAs with the ultimate goal of a new job or hire.
