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.
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.[caption id="attachment_2087" align="alignnone" width="2500"]
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 website navigation.
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).[caption id="attachment_2090" align="alignnone" width="2500"]
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.[caption id="attachment_2093" align="alignnone" width="2500"]
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.
