Case Study: Facebook Bottom Nav
Facebook lately has been adding some new tab bar elements to their mobile Facebook app. This morning I’ve noticed another one that has been added called “Groups”. I’ve asked myself a question:
Is it just me or there are other people that don’t use half of the navigation elements at the bottom nav bar on the Facebook mobile app?
To validate that idea I have asked about a dozen people about the tab bar usage and 80% of people said that they only use a couple of them. Then I asked them if they would prefer to be able to hide those tab bar elements that they don’t use and only keep those that they use. 10% of the people said that they don’t care and another 90% said that they would prefer to only keep those that they use.
These observations led me to an idea of creating a design that would provide the users an option to choose what they want to see in their tab bar.
Research
Before I started with sketching out ideas, I decided to explore some ways that option could be provided to the users and would still be natural and easy to use. Here’s what Apple has to say about the use of tab bars:
Avoid having too many tabs. Each additional tab reduces the tappable area for selecting a tab and increases the complexity of your app, making it harder to locate information. Although a More tab can display extra tabs, this requires additional taps and is a poor use of space. Include essential tabs only, and use the minimum tabs necessary for your information hierarchy. Too few tabs can be a problem too, as it can make your interface appear disconnected. In general, use between three and five tabs on iPhone. (Human Interface Guidelines)
Based on several articles studying user’s behavior and UI interactions on mobile devices, it’s important to acknowledge that having more than 5 tabs at the bottom can hurt user’s experience and clutter the interface (Material Design “Bottom Navigation”). I think that Facebook app should have a limit of 5 tabs and ability to pin and unpin tabs.
I have seen 2 instances where this feature is present. One is a native experience of iOS and second Facebook’s built-in feedback feature :
Both use the same gesture which is press & hold. iOS provides one option for that gesture and Facebook provides another. To make it more consistent with Facebook’s design, I decided to explore their option, but convert it into ability to unpin a tab element.
Customization vs Personalization
Another topic that I thought was important to consider when thinking about offering a customization option is: would users benefit from this?
After reading an article by Nielson and Norman group about customization vs personalization, I found that it all depends on the goals and implementation.
Personalization
Personalization is done in Facebook in many different aspects of the app when it’s pulling the content that is most relevant to the user based on their searching/viewing behavior. In this case, it could also be used by only keeping those tabs at the bottom that user uses the most, but it has its down sides. Let’s consider a use case when a user didn’t interact with a certain tab element for a while and then comes back and that tab is gone. In that case user would feel frustrated and would search for it. In this case personalization is tricky.
Customization
In this case, it makes a lot more sense to give users ability to control their tab behavior.
Customization lets users make their own selections about what they want to see, or set preferences for how information is organized or displayed. It can enhance user experience because it allows users to control their interaction (Customization vs. Personalization in the User Experience).
Ideate/Sketch
Sketching out these ideas helped me visualize user’s interaction unpinning a tab element. After testing these paper prototypes, I was able to discover that:
- users expected a tutorial message about the new feature
- users interacted better with the pin/unpin buttons with text
- users expected to be able to move tabs around
I will explore these interactions by creating low fidelity wireframes and testing on users to validate functionality of these recommendations.
Wireframes
Testing wireframes helped identify a couple of important interactions that users were not very confident about.
- Users were not sure how to unpin a tab until they got to the menu.
- Users didn’t know which tabs could be unpinned.
- Users didn’t know where the tab would go after they pin a new one.
To resolve issues I decided to introduce a new feature with a short pop-up informational message when they lunch the app for the first time after an update. With that message I plan to fix most of the bullet points.
High Fidelity mockups
Link to the prototype: https://xd.adobe.com/view/c7adcb5f-c21a-4d84-42cc-fd1fc9ab93a6-b19c/?fullscreen
