Member-only story
When To Use What— Module Tabs vs Accordion vs Single Page
Information can be shown in various ways to users. We can show all the information in one-go or we can show it in chunks. Module Tabs and Accordion are a good way to show information in digestible chunks, but single page design has also its use case. Choosing the right way entirely depends on the context and user-requirement. Without wasting words let’s take a quick view.
Module Tabs
Module Tabs are a metaphor for folders kept in a drawer. Where each folder is specific to its content, yet belongs to all other folders.
Checkpoints Module Tabs
- Avoid information imbalance (Broken Experience) — One tab is scrollable and the other is non-scrollable with very less information.
2. Which tab would be your default tab? (Not a big problem, but need to consider what will be our criteria)
3. Multiple rows of tabs should be always avoided (because it increases complexity and makes visual relations among sections tough). Amazon did that in their earlier designs, later they dropped the Tabbed design and went for Single Page (You will get the reason in the later part of the article).
4. Section names should be relatively short and there should be some kind of color-coding or other visual support to indicate what tab is currently being viewed.
5. Avoid placing swipeable items in the content area of a UI that has tabs, as the user may mistakenly swipe the wrong component.
Choose Module Tabs When
- Information can be divided into chunks that don’t need to be compared or accessed simultaneously. Tabs organize content into categories to help users easily find different types of…
