Responsive UI/UX

What is a better alternative to the bottom navigation pattern on mobile web pages?

We must change the way we create, and design websites as mobile devices grow. Is there anything to be learned from tap bars and app design? Can we improve our websites' mobile navigation to make them less expensive to interact with? We'll learn in the next piece.

What at once comes to mind when you hear the term "mobile navigation"? The slide-out menu for hamburgers is what comes to mind. Even though a lot has changed since the early days of responsive design, this design pattern has remained in use. How come?

How did we initially come to use the top navigation with the hamburger menu? Exists as a preferable substitute. I'll try to investigate these issues in this piece.

History of the Hamburger and the Top Navigation

In the 1980s, the first hamburger menu symbols initially appeared. It was made for the Xerox Star, the first graphical user interface ever created, by Norm Cox. For the same interface, he created the document icon as well. Geoff Allday discovered this historical fact (who emailed Norm Cox). By clicking here, you can read the entire email response. Later, it appeared on DOS and Windows 1.

Ethan Marcotte's "Responsive Web Design" book from 2011 popularised the current mobile navigation as we know it. Since then, the industry has adopted hamburgers and top navigation.

In ten years, the size of mobile phone screens has doubled.

Sales of mobile devices have been rising every year since the release of the first iPhone. The market reached its saturation point in 2019, and sales have begun to decline. However, that does not imply that no one is using a phone. According to Quartz and Ciodive, we will spend 80% of our online time on mobile devices by the year 2020. Compare that to 2010, when only a fourth of Internet users were phone-based.

Screen sizes have more than doubled along with phone sales. Smartphone screens have grown on average from 3.2 inches to 5.5 inches. Device manufacturers began using the larger 18:9 aspect ratio in 2017 with 5.7-inch and 6-inch 18:9 screens. As they have a larger screen area than 5.5-inch 16:9 displays, 6-inch 18:9 displays are now starting to become the new norm in flagships as well as in the mid-range price segments, according to XDA-Developers.

Design Driven by Thumb 

Vitaly Friedman is the one who introduced me to the phrase "thumb-driven design." It is based on studies on how people manage their devices conducted by Steven Hoober and Josh Clark.

The main takeaway is that three fundamental grips were used almost universally. According to Josh Clark, 36% of people held their phones in one hand while tapping away with the finger or thumb of the other, 36% used a one-handed hold, and the remaining 15% used a two-handed BlackBerry prayer position, pounding away with both thumbs. 75% of users solely use their thumbs to touch the screen, according to research by Steven Hoober. the phrase "thumb-driven design" was coined.

These concepts were expanded upon in an essay by Samantha Ingram titled "The Thumb Zone: Designing for Mobile Users" published in 2016. She described the terms "easy-to-reach," "hard-to-reach," and "in-between."

 

Application

Description automatically generated with low confidence

 

However, I would contend that the mapping has somewhat changed because of larger phone sizes:

Chart

Description automatically generated

Most places were simple to access when phones were smaller. As our screens became larger, it became nearly difficult to touch the top portion without moving your phone. We can tell where the most expensive screen real estate is from the sample above. However, it's frequently overlooked on websites. How can this be fixed?

Pattern for Bottom Navigation

Bottom navigation patterns occasionally appear on websites. The concept is straightforward: lower the navigation bar.

 

Users can click on the menu icon more easily if the navigation bar is positioned at the bottom; secondary items can be moved to the top. You just reverse the sequence. This reasoning has been applied in mobile apps utilizing the tap bar design. Although it's not a novel concept per se, web design has yet to adopt it to the same extent as app design.

Since it highlights certain critical issues, this is not a perfect solution, but it is a respectable choice. Let's look at some of the issues that can be raised.

Items That Are Primary and Secondary

Placing the main menu items closer to the bottom of the screen is a better possibility because the top of the screen is getting harder to access. What about the other matters, though, which are as significant?

I supply the following two solutions to this issue:

Placing the search bar or any other non-primary elements at the top; the CTA buttons, which are an essential part of the navigation, should stay at the bottom, next to the menu items.

Graphical user interface, application

Description automatically generated

 

What Impact Will This Have on Scrolling with Big Menus? 

Numerous menus, submenus, and everything in between can be found on some websites. There will undoubtedly be scrolling. How does this situation's flipping of the primary/secondary elements work?

While keeping the menu list scrollable, repair the major and secondary components (menu link, logo, search input). Your users will be able to access the vital resources they need in this manner.

Where Should the Logo Be Placed?

You could be worried about where the logo is placed. There are two approaches you may take:

Although positioning the logo at the bottom could seem uncomfortable, the thumb won't likely be in the way. However, because we often scan from top to bottom, we can miss it.

Keeping the logo at the top of the page without having it fixed is a more sensible choice. Include it in the text so that it disappears as you scroll. People will still be able to view it clearly if done that way.

Graphical user interface, application

Description automatically generated

How Do Handlebars Work with This? 

Some browsers and operating systems often use the bottom portion of the screen for their own purposes. The iOS handlebars may obstruct bottom navigation. Make sure there is adequate room in the navigation for the iOS safe area.

A picture containing diagram

Description automatically generated

The link can interfere with the operation of the handlebars if the logo is positioned directly in the middle. It only takes a little padding.

Will the users become accustomed to this pattern or reject it? 

While I was creating this piece, I kept wondering if it would result in a significant overhaul or just a usability enhancement for visitors visiting your website. After all, people spend most of their time on other websites, according to Jakob's Law. This shows that visitors desire your website to operate similarly to every other website they are already accustomed to.

I'd want to put out Fitts Law as a refutation of Jakob's Law., I want to suggest Fitts Law. It makes the case that a target's size and distance have an impact on how long it takes to buy them. In general, the interaction cost increases with target size and distance.

What Will Happen to The Tap Bar Pattern? 

The three to five most frequent first-level actions to click on a particular row are listed in a tap bar pattern. You may have seen it in popular apps and some websites:

Graphical user interface, text, application, chat or text message

Description automatically generated

Over the years, there has been a lot of debate about hamburger menus. Please take a minute to read this article, as well as the next four. The last piece is the most crucial. The tap bar's popularity as a navigational motif in mobile app design will then be clear to you.

According to Nielsen, desktop and mobile users' experiences are both severely worsened by concealed navigation (hamburger menu). People used the joint navigation on mobile devices in 86% of cases and concealed navigation in 57% of cases, or 1.5 times more! An illustration of the combination navigation Nielsen is referring to is one that combines a hamburger menu with a tab bar pattern:

Graphical user interface, application

Description automatically generated

The tap bar may appear to be the ideal answer, but it also has drawbacks. It's a good point made by Fabian Sebastian that it only functions on top-level views. With supplementary navigation elements, it is ineffective. This issue was resolved by the creation of a hybrid hamburger/tap bar. The "More" button, which opens the hamburger menu, is the final item on the Samsung app's menu if you pay close attention.

In essence, if you want to mix the two patterns, the bottom navigation design works well with the tap bar layout. The realm of mobile applications is the ideal place to look for good examples.

A Few Popular Websites Reimagined 

 To prove how simple, it is to change the navbar to move bottom-up, I launched Photoshop and quickly mocked up a few popular websites First, let's look at Bloomberg:

Although there are some legitimate concerns with this concept, it is nonetheless adaptable to the web. Due to the significantly reduced interaction cost, there is a usability difference.

That's Fantastic, But How Do I Persuade My Clients? 

Even if you, the designer, may recognize this pattern's potential, what if your customer or your supervisor doesn't? I have a few arguments to address this issue:

Since many years ago, mobile apps have pushed important menu items to the bottom. Send them only these first two articles:

Nick Babych wrote "The Golden Rules of Bottom Navigation Design."

Raluca Budiu wrote "Basic Patterns for Mobile Navigation: A Primer."

I have seen instances when well-known mobile apps began to move crucial information to the bottom. Uber is a good case study. One of the most crucial elements on the screen in their eyes is the search bar. Its place in the earlier design was at the top. They have now moved it to the bottom. Could this be a clue for us?

Moving crucial navigational elements to the bottom of a mobile app is nothing new. Just for some reason, the online business hasn't yet caught up with this.

Conclusion 

The facts are undeniable: Phones are becoming bigger, and some screen elements are simpler to use than others. We have a tonne of amazing mobile app designs that use the bottom third of the screen and placing the hamburger menu at the top imposes an excessive interaction cost. Maybe it's about time websites started incorporating these concepts into their designs as well? I realise that none of this is a guaranteed answer for all use scenarios, but it's worth a try. It contributes to improving the experience only a little bit.

Let’s Talk

About Your Next
Project Your Mind

Top