5 steps to design a tab bar the right way
Have you experienced the “header-bar stretch”? Are you designing a new app? Or are you simply interested in how we develop an app for the Netherlands’ fastest-growing tech company? Read about the 5 essential steps to designing a tab bar the right way.
We’ve all been there. Reaching out a thumb to a button. Your tendons stretching as you aim towards a function located in the header bar. Nearly there. You shift the phone in your palm to get a better shot. Got it! As soon as you reach the desired screen your hand relaxes and you can use the app in peace. Until you need to do something else… The app you are using has not been designed with a big screen in mind.
But bigger screens are here to stay. Smartphones have doubled in screen size over the last 10 years, from an average of 3” in 2009 to 6” in 2019. And thumbs are important because 90% of phone interactions involve at least one thumb. So, UI Designers have been catching up and evolving app design to match the physical reality of bigger devices.
The rule of thumb
Picnic makes grocery shopping effortless. That means no heavy grocery bags or driving to the supermarket. So we don’t want customers straining their fingers and thumbs when using our app. However, during the first years of our modern milkman revolution, the initial app architecture remained unchanged. We added core features to develop a solid e-commerce platform but the main UI layout remained the same. And, in this first version of our app, the main functionalities were presented in the top header bar; out of reach - for most thumbs - on a bigger device.
This year, we introduced the tab bar or bottom-based navigation architecture. Picnic customers can now comfortably do all their grocery shopping with just their thumb. But the process to get there was not easy. Apart from preventing users from suffering from any hand injuries, the journey of tab bar navigation brought profound insights and fresh understandings of the core functions of our product.
Picnic’s design team learned a lot along the way and we want to share our experience with you. Here are the five essential steps to designing a tab bar the right way:
Step 1: Does your app even need a tab bar?
Do not implement a tab bar just because it’s on-trend. A tab bar is about creating a solid navigational structure and complementing the core functions of your app. This assures users of their current location while giving a constant overview of all other destinations. These qualities and the growth in screen sizes explain the rising popularity of the tab bar. But a tab bar is not the answer to every app. So first, place yourself in the user’s shoes, launch your (future) app and answer these questions:
- Where am I now?
- What else can I do in this app?
If you are designing a single-purpose app, the second question is more or less irrelevant. Your app has one main function, significantly more important than other functions. Celebrate this single purpose and focus on an experience that boosts the main task. Think about stacking mandatory and little-used functionalities in a hamburger menu. Yes, it’s been frowned upon, but the design is elegant and deeply embedded in a user’s social consciousness. Need convincing, read this.
But if you’re sure that your app will benefit from a tab bar, you can move to the next step.
Step 2: List and rank all destinations
Listing and ranking app destinations and functionalities is always a useful exercise. Especially when distilling which functions are worth a place on your tab bar. A user-friendly tab bar should have no less than 3 functions and no more than 5. This is a design limit, and you should not go beyond it.
Cluster functionalities and iconize
For each functionality on your list, describe the core use case and check if they are mutually exclusive from all others. If not, cluster similar functionalities and describe the use case for the whole cluster. It also helps to visualize each functionality (cluster) with an icon or symbol. This nurtures an understanding that goes beyond words and may represent the functionalities conceptually.
Delve into data
If you are redesigning an existing app, this is when analytics come in handy. Delving into the data lets you make data-driven design decisions. It lets you understand what parts of the app are used most and gives you a foundation to decide what’s important to the user. Backing the list of functionalities with data will give it more credibility.
Look into the future
Go beyond the present and add realistic future functionalities to the list; this will help you design a future proof navigational structure, giving you flexibility down the line. But do not go overboard with this — only include realistic functionalities that will be developed within an overseeable term.
Present ideas
Present your list to the team. Together, you should make sure that the list is indeed complete. When you agree all functionalities have been included, start arranging them by order of relevance for your main target group. This will most definitely lead to a valuable discussion and sharpen the collective vision of your product.
We found that our list of functionalities was longer than the 5-function limit to tab bar destinations. We clustered functionalities, but because appropriate clustering was not immediately clear, this opened up a huge range of possibilities. If the endless possibilities are overwhelming and you’re struggling to know where to begin, take a gulp of the best medicine to streamline functionality: user-testing.
Step 3: Prototype and experiment with real users
You’ve designed a nifty, smart, elegant app. But do you know what your users think? Then find out. Test your prototypes and experiment with real users. Not only does this help you define the most important functions, but you’ll also gather some unexpected findings. It’s important to even test unrealistic and experimental prototypes. This generates rich insights and evokes a whole range of feedback from users.
There are weekly user-testing sessions at Picnic, giving us the luxury of constant feedback, and it’s a key factor in the success of our product. Over the course of 6 months, we tested 12 tab bar prototypes. We experimented with the number of tabs and the clustering of functionalities within those tabs. With each iteration, our understanding of the most desirable architectural structure grew. Eventually, this led to a solid idea of the most suitable tab bar, offering an intuitive navigation structure to our users.
Users are vocal participants in our design process. They put forward fresh ideas, helping us develop a truly user-friendly app. The user-testing process even led to a reconsideration of our previously listed must-have functionalities and destinations. You may think your prototype is the best thing since sliced bread but if a user is puzzling over how to get where next, your ideas need to go back to the drawing board.
Toward the end of the prototype phase, we struck gold. When we presented the final versions of the prototype, some users asked:
So what’s new?
They did not notice that the app had been overhauled to include a thumb-friendly tab bar — hinting that we found a truly intuitive design.
When you’re confident that users can navigate easily through your app, then you want to move onto the next stage: getting to grips with the details.
Step 4: The devil is in the details
Once you are confident about the functionalities of your tab bar, it’s time to detail the design. Here are some important pointers to take into account to create a user-friendly tab bar.
Never hide while navigating
A tab bar should always be there to help out your user. It’s the backbone of your app and users depend on its omnipresence. Wherever the user is in the app, they should be able to rely on the tab bar. Even on sub-pages, the tab bar should be present. Many apps ignore this basic rule, creating confusing navigational patterns.
Having said that, there are instances where you may want to hide or overwrite the tab bar. Like when the user needs to perform a focused action or self-contained process with a clear beginning and end. You can capture the interaction in a (full-screen) modal view that overwrites the tab bar. In the Picnic app, we implement this during the checkout process and the order rating flow. A user wants to focus during these actions and as soon as they are over, the tab bar is back again to act as a guide.
Make sure tabs are clear
The safest way to go about the UI design of your tab bar is labeling each tab with both a visual cue (icon) and a name (text). It is especially important if you are using ambiguous functions that represent abstract concepts specific to your app. The text under the icon ensures the user knows what to expect. This makes the user less hesitant to tab unknown icons and more willing to explore your app.
From a design point-of-view, an icon-only tab bar, free of text labels, is the most visually appealing. It reduces noise and for the loyal user, it will contribute to an even more enjoyable experience. But you can only consider this if your tabs can be represented by universally recognized icons. During user testing, we found that our icons for store, search, basket, and profile are well-embedded in the collective memory of users. So, we can confidently leave out the text labels.
Define reset behavior of tabs
Android and iOS guidelines differ in their approach to switching between tabs. On iOS, the tabs remain the same when navigating to other pages. When you leave a destination, the tab remains on the page or sub-page. So when you return, the tab is exactly how you left it. However, on Android, the default is to reset the tab to its top-level state when you switch.
We decided to implement the iOS pattern across both platforms. Our users frequently switch between tabs (e.g. from basket to store to search) and we want the tab bar to be a solid, unchanging navigational feature.
Furthermore, we want our tab bar to act as an immediate escape route when a user finds itself in an unwanted sub-level of the app. Like a thumb-powered get-out-of-jail-free card. So, whenever the user hits the tab bar icon representing their current location, the tab resets to the top-level state.
Step 5: Roll out and test
Congratulations! You’ve got to step 5. Once you are confident enough to develop and ship your brand spanking new tab bar it is important to gather quantitative and qualitative feedback. Especially if, like us, the introduction of a tab bar meant an extensive overhaul of your app’s architecture.
A/B testing
A/B testing a completely new design is not only technically complex, it’s also pretty scary: you’re basically testing an optimized old version of the app against a non-optimized new version of the app. Furthermore, existing customers know the old app, meaning that the new app will cause some friction for them — usually not something good for core KPIs.
To get an unbiased result, we focused our A/B tests on new customers. There were minor teething problems and we did not expect the tab bar app to perform well in terms of conversion. But when measured on first-order conversion, the new app performed slightly better. And over the course of the user journey, the uplift of the new app only grew. That showed that the app overhaul and increased thumb-usability has a long-lasting effect and a positive impact on user retention: a true sense of improved usability.
Look out for tweets
We have a large customer base that loves to talk about Picnic. So besides analyzing in-app behaviour, we kept a close eye on app ratings as well as twitter comments about the tab bar update. It’s always insightful to delve into such comments and discuss them with the team. It gives you a good grasp of user reaction. But remember to stay objective about feedback (of any kind). Every change will cause complaints. Don’t focus solely on the negative and loyal user and always compare with your A/B test results.
A thumb-based voyage of discovery
The tab bar journey at Picnic was a deep dive into our product. Not only did we create a thumb-friendly design but the process brought us profound insights and a fresh understanding of the core purpose of our product. This highly reflective re-design project allowed us to streamline the user journey. Customers can now use the app as comfortably as possible: no more header-bar stretches and a weekly grocery shop is done with just a thumb!
There are many opportunities ahead and since online grocery shopping is still so fresh we can only imagine the number of features and innovation to come.
