Bottom Navigation Interface

Cuberto
Prototypr
Published in
5 min readApr 12, 2017

--

Large smartphones don’t surprise anyone anymore. They have a lot of advantages, so the jumbo phone trend is likely to continue. But bigger isn’t always better: a large display doesn’t pack more content. The actual size and number of functionalities is the same for high and low res displays.

Steven Hoober’s 2013 mobile device research found that a whopping 49% of smartphone users rely on one hand, 36% take the cradled approach, and 15% use both hands.

In 2017, not much has changed. Since seamless design is so much more than good looks, one-handed and one-thumbed interactions are becoming the norm. In the first place, it’s more comfortable. Second, it’s not always convenient to use both hands. But here’s the rub: one-handed usage limits how far your thumb can easily reach.

Image Source: uxmatters

This is why it’s best to place an app’s frequently-used actions at the bottom of the screen.

Since top developers started paying more attention to how users interact with their devices, apps that assume one-handed usage are everywhere. The good news is that in striving to improve their products, large corporations also perfect user experience.

The user’s voice is invaluable, and the most popular services gather and analyze tons of information about their users, resulting in upgrades and product optimization. Typically, these changes involve usability, though updates aren’t always visually apparent. While interacting with the device, you’ll pick up on improvements and appreciate how your experience has become a lot more natural and effortless.

Feedback-inspired product revamps are becoming more and more common on both iOS and Android platforms, and not just with big companies, but startups, too. Nowadays, every new startup has a definite edge: they can launch an app designed for one-handed usage right off the bat.

Flipboard and Ada are excellent examples.

Flipboard is a personalized magazine which aggregates content from news feeds and social media networks, enabling you to discover and share the stories, videos, and photos you love.

Image Source: cuberto.com

The screenshots indicate how Flipboard’s core functionality is arranged. What’s different is the absence of a nav bar at the top, which is usually typical of iOS. It’s shifted to the bottom of the screen, into the thumb zone.
Notice that the user profile button is in the hard-to-reach red zone, so Flipboard enables users to swipe right to open their profiles.

Image Source: cuberto.com

The search icon appears in the center of the display without shifting the keyboard, so it stays in the yellow zone, requiring the thumb to stretch a bit.

Image Source: cuberto.com

Ada’s dev masters created a completely innovative navigation design. Ada is a health app which asks all the right questions and presents personalized information to improve well-being.

The revolutionary interface is super simple. It’s a flipped mirror image of a basic interface structure. Everything that’s usually at the top is conveniently at the bottom, in the green zone.

The start screen looks like this:

Image Source: cuberto.com

The hamburger menu is outdated because it hides app features off-screen, so Ada duplicates it with a more natural left swipe.

Image Source: cuberto.com

Menu list is placed lower and nobody’s intimidated by the negative space because it’s obviously deliberate.
Ada’s subviews apply the thumb zone rubric, too.

Image Source: cuberto.com

Last year, we developed a concept for a calling app which applied one-hand navigation principles. The method feels especially intuitive for call or message apps since we tend to use one hand for dialing and texting, anyway. The design didn’t take off from the concept stage because the client was wary of a total functionality overhaul which could alienate users who’d had grown accustomed to the interface structure.

Image Source: cuberto

We’d like to single out Facebook Paper. A company with an immense following and a hugely popular application releases something innovative and intuitive. From a UX perspective, it was a bold experiment and it’s unfortunate that it was shut down. The app was released in 2014 and there are plenty of detailed, high-quality reviews, like the one below.

Conclusion

First and foremost, app developers have to consider users and target audiences. These are the cornerstones of any future app’s UX. The more simple, streamlined, and convenient your app, the higher its chances of reaching a wider audience. Keeping up with trends is a must — what’s fresh today might grow stale by tomorrow.

Cuberto sets the trend in creative websites and mobile apps. We dare what others don’t. info@cuberto.com

Follow us on Dribbble and Behance

--

--

Leading digital agency with solid design and development expertise. We build mobile and web products for startups.