UI/UX
Apek Group 1206-1500x1000-1 Designing Usable Tabs

Designing Usable Tabs

Tabs play a significant role in helping users get the information they need in a mobile application. It says a whole lot about the information architecture of the application. Before starting a UI/UX project, a lot of research should have been done on what type of icons to use, the hierarchy of the content, and other things. 

Here are some factors to put into consideration while designing tabs. 


Hierarchy:

Some content must always come first before the others. For example, you can’t have ‘Contact Us’ as the first option on the tab. I doubt if anyone will ever do that? The first tab should be your homepage, which is usually called ‘Home.’

Another example is, if you are designing for an e-commerce brand, it may be wise to make the homepage sort of like a shop page to enable customers to see products available at first glance. The first tab (which is the furthest tab to the left) will contain the most frequently used information. The reason why people use the app should be on this page. 

Apek Group Hierachy-Image Designing Usable Tabs
From the image above, you can tell the tab menu to the left has a poor hierarchy compared to the one by the right. 

Texts:

It is usually better to add texts alongside icons in your tab, which provides a great user experience. It is generally better not ‘assume’ users will understand what a symbol means. However, while inputting texts, please pay attention to their sizes as they should be well spaced and not oversized. It would be best if you also defined their alignment.

It is usually neater to have them center aligned below the icon they are describing. Try to avoid using ‘ALL CAPS’ to ensure that the size of the text does not go beyond the tab’s dimension. We want to make sure our text is evident to users and, at the same time, short and highly descriptive of its use. 

Apek Group Text-Image Designing Usable Tabs

Icons:

While choosing icons, you should ensure uniformity. This uniformity is in terms of their sizes, color, and overall look. I usually use flaticons.com and https://material.io/resources/icons/ for my icon designs. Always download ‘SVG’ versions so you can edit the colors etc. Users should also be able to differentiate between Active and Non-active icons in your tab; this makes the whole experience better for the user(s).

Your active tab should appear more prominent than others, and you can use accent colors or simply reduce the opacity of non-active tabs or maybe use a scroller. It all depends on your design preference.  

Apek Group Icons-Image Designing Usable Tabs
Image above is a Facebook tab that shows ‘News Feed’ is the currently active tab. The color makes it easily recognizable.

No Scrolling Please

Avoid using scrollable tabs at all costs. If you are building a mobile app, you’d prefer users to see important information at a glance. “Out of sight is usually out of mind.” Users might miss those essential details. If scrolling is unavoidable, kindly ensure you place the most important tabs first. 

Apek Group avoid-scrollable-content-in-tab-bar Designing Usable Tabs
This is a scrollable tab. Credit: Google.

It might be unavoidable in some apps, such as picture editing apps. If you’d have to use them like in the gif above, make sure the last item from a glance is visible enough to allow users to know there’s more information available if they scroll.


Interaction: 

When designing a tab for a web app, for example, you should decide whether you want users to click to see information in a tab or to just simply ‘hover’ to have information pop. If you want users to click, it should be very obvious that it is clickable. 

Apek Group simple-pure-css-dropdown-menu-with-following-subnav Designing Usable Tabs
A great example of a hover over tab experience. Credit: Google

Notifications:

You can add a badge to an icon to indicate sections you’d like users to navigate to that needs their immediate attention. Such badges can have an accent color so it can stand out. 

Apek Group Notifications-Image Designing Usable Tabs
The ‘My Trips’ tab will catch any user’s attention compared to other menus. 

Sticky Tab

Sometimes, you’d want your header tab or app bottom tab to stick to their position as users scroll. This is particularly important to deliver a better user experience. Most users want comfort, and this is what technology should always advocate for. 

Apek Group unnamed-1 Designing Usable Tabs
Credit: Google.

You’d notice the way a white underlay appears when you scroll with the menu now appearing on top in a black text to make it visible. That’s a great UX. 

Author

Ayilara Olatunde