How bottom website navigation can improve usability and increase sales

Mobile navigation is evolving. To improve usability and increase sales, we’re making our websites easier to navigate using a fixed bottom navigation.

When responsive design was first introduced all those moons ago, the web design community took the existing desktop navigation items and hid them away in a slide-out “hamburger” menu. This approach is still the standard for the majority of the modern sites that launch today. But the apps we use from day to day migrated from a slide-out hamburger menu to bottom-fixed navigation long ago and it’s time the mobile web caught up. Here’s why.

1. Bottom navigation is easier to reach

Phones are getting bigger but our thumbs aren’t. As screens increase in height, the hamburger navigation becomes increasingly out of reach. We can eliminate one-handed phone acrobatics when we place the navigation within the natural reach of our thumb.

One-handed phone acrobatics makes navigating a website difficult

2. Drive more traffic to high-converting pages

Some of the pages on your website will naturally have higher conversion rates than others. By giving high-converting pages space in your bottom navigation, you can drive more traffic to those pages to increase conversions. For our yoga studio client, the timetable was the highest converting page since it allows customers to book their session from that very page, so we placed the timetable in the first menu item. You should work out where your users tend to convert using conversion tracking, and then direct traffic to those pages using the bottom navigation.

3. It puts direct contact information within reach

For service based businesses, it can be beneficial to place a call button in your navigation along with a message prompting your visitors to get in touch. This gives prospects the opportunity to get in touch with any queries, but also gives them more confidence in your service when they know that you’re available to take a call.

To generate more calls, your call to action should be non-comital. Rather than “contact us for a quote”, ask your users to “speak with us about your query”. For even better results, change the text to dynamically reference the page the user is looking at (see the divorce page on the legal site below).

Generate more calls with a one-touch call button. Draw attention to it with with a cheeky little call-to-action that activates on scroll.

4. Increase legibility with icons

Icons give at-a-glance context to a button’s destination without requiring the visitor the laborious task of reading a word. Okay, reading a single work is hardly laborious but icons really do allow for quicker scanning of the buttons, getting users to their destination that little bit sooner. See the Spotify example below.

Icons help provide at-a-glance context over the button’s destination

In conclusion: improve usability and increase sales with bottom navigation

Navigation is often overlooked in mobile web design. It’s easy and clean to tuck items away, out of sight until a visitor asks for them. But by placing a well-considered navigation to the bottom of the screen, we can not only improve usability on your website, but increase sales too.

Want to see how we implemented a fixed “section navigation” for one our clients? Read the NetConsulting case study.

Not sure where to start with your own learning management system? See how we can help with Learning Management System development.