Best practice for in-page tab design

June 30, 2017 10:39 am

Best practice for in-page tab design



An in-page tab is a go-to method to categorise content on a page, without overwhelming users with too much information at once, however, this functionality is commonly misused on many websites and apps. As a UX practitioner, this UI element is something that I witness users struggling with when implemented poorly. So in this article I will review and give 8 examples of best practice regarding in-page tab design and guide you on how to implement these successfully.

1. Clearly indicate the active tab and ensure this is connected to the content below.

Users should be able to understand which tab is selected and which heading relates to the content shown. To do this, high contrasting colours can be used, and the heading could be bold to differentiate this from the other tabs. In regards to accessibility, having high contrasting colours between the active tab and in inactive tab makes it easier for users with low vision to understand this too. This is also particularly important when there are only two tabs on the page, as evidence from user research shows that users are often confused which tab is currently active in view when the design is not prominent and this causes users to question where they are on the website.

2. Keep tabs separate from one another, and ensure they appear like separate buttons to interact with.

This is important so that users are aware that content can be accessed by clicking onto these tabs. If these look flat in design and are touching, it is not clear that they display different content. We have observed users scan over tabs like these and mistake them for headers on the page, rather than separate tabs to engage with.

3. Ensure the inactive tabs are still visible against the background.

This helps users be aware they can navigate between views to display a different set of content. When the tab colour blends into the background colour, users miss the inactive tabs altogether, as their attention is not drawn to this on the page. Therefore, if tabs go unnoticed, valuable content is at risk of being missed.

4. Use title case for tab headings, rather than capitals.

This allows users to quickly scan their options and is easy to read. Title case is encouraged, where the first letter of the word is capitalised and the rest is written in lower case.

5. Keep tab headings short and concise but ensure they are still meaningful, consisting of one word if possible.

Short headings made up of plain language make it easy for users to scan the headings, especially when there are multiple tabs. To aid understanding, icons can also be used to help visualise content so users are able to grasp the sort of content that would be revealed if they were to navigate into this section.

6. Keep the tab design visually consistent.

Tabs on the page should all look like they belong or relate to each other as the content falls under a larger category. This way, users are more likely to understand that content has been broken down into separate sections, and know to navigate between tabs depending on what content they are interested in seeing.

7. Place tabs at the top of the page and keep these in one row, rather than at the side or the bottom of the page.

As users naturally scan the page top to bottom, the placement of tabs at the top will meet user expectations and avoids users having to look in unusual places for hidden content. This would also be consistent with the visual hierarchy of headings and content on a page.

8. Always have one tab preselected as users arrive onto the page.

Without this preselection, users may feel lost on the page and unsure how to get started. The tab that is preselected should be one that users are most likely to engage with, as this reduces the effort that users have to take on the page by having the content readily displayed.

Conclusion

Tabs can be an excellent user interface design to divide content into sections, without taking up too much space on the screen. However, when in-page tabs are implemented poorly on websites and apps, users miss important content and struggle to carry out tasks, impacting the user experience. If best practice is followed, as this article reiterates along with user evidence as insight, then tabs should be an effective tool for users to see different content they are interested in, whilst keeping the page tidy.