Building apps with tab bar layout

Tab bar layout is the newest addition to the series of platform improvements. This time, our focus was to bring a new design layout to app owners so they can add a brand new look to their apps.

Beginning this week, there’s an additional home screen layout available to choose in the Shoutem app maker. Until now, 11 different layouts were available in the app maker and with tab bar layout, you can now pick from a dozen.

Creating an app with tab bar layout

Bottom tab bar layout brings a few benefits to both users and app owners. To users, it allows a quick way to navigate easier between the main views in the app. App owners, on the other hand, have the opportunity to better organize content in the app.

A ‘one thumb’ app navigation

App’s navigation should be one of your major app design priorities. It doesn’t matter how many valuable and good features your have in your app; if users cannot find their way around it, they will abandon it.

In the research conducted by Steven Hoober on mobile device usage, the data shows that 49% of users rely only on one thumb to get things done on their smartphones. From the images below, it’s clear why the navigation should be easy and comfortably reachable for users.

Tab bar layout_Thumb-zone mapping for left and right handed users
Thumb-zone mapping for left- and right-handed users. The “combined” zone shows the best possible placement areas for most users. Source: smashingmagazine.com

Bottom bar becomes a standard

The importance of the bottom navigation, on UX side, is even higher as it has been officially added to Google’s Material Design guidelines, making it one of the design standards that Android developers should follow and implement. More and more apps are switching to bottom bar layout, ditching the hamburger menu controversial design.

Spotify, one of the most popular music streaming apps, ditched the hamburger menu in iOS app redesign and the reason is simple – users with the tab bar ended up clicking 9% more in general and 30% more on actual menu items.

With Google, Spotify and other major app developers embracing bottom tab bar layout, the rest should follow and easy navigation in the application should be a high priority. Apps are designed and built for users, and the easier the app is to use, it’s more likely they’ll want to return to it.

“Everything is designed. Few things are designed well.” – Brian Reed

  • 509dave16

    Can we anticipate this Tab Bar/Tab Bar Layout being open sourced for the shoutem/ui github project? Also it would be nice to see a roadmap for shoutem/ui. Thanks!

    • The complete UI toolkit is open-sourced so the Tab Bar will also be 🙂 Thanks for the feedback on the roadmap, we’ll discuss it internally.

  • it solutions

    hello , its not working properly on mobilizer for android :/

    • Hi, we tested in on our Android advices and it works like a charm. Please update the Mobilizer app if you still haven’t and if you still experience problems, please contact support team directly at support@shoutem.com.

  • Ab Dam

    Is Tab Bar Layout in @shoutem/ui github?

    • Tab bar is available on both current platform and our UI toolkit.

      • Ab Dam

        Well, i cant find Tab bar at http://shoutem.github.io/docs/ui-toolkit/introduction

        Or i should subscribe in order to use Tab bar at http://www.shoutem.com/pricing
        yes?

        • At this moment, tab bar layout is not accessible through UI toolkit – you can create one using elements of the UI toolkit. However, once the Shoutem Extensions are live, it will be a part of it.
          For now, if you want to use Tab Bar layout, feel free to register on shoutem.com and start your 30 days free trial.