Web Interface  |  Patterns

Tabs & Accordion

This section is about how to work with tabs and accordion pattern.

01Tabs on mobile

Tabs don't work well on small screens. Therefore, when the screen is smaller, it is best to turn the tabs into an accordion view with collapsible blocks.

Tabs do not work well on small screens.
Tabs turn into an accordion on small screens.

02When to use Accordion

When something is hidden, it's not there. So basically any pattern that hides something and requires some action to open/expand it is potentially a bad solution.

Accordion on large screens looks questionable more often than not. Users are much more comfortable scrolling through the page looking for information than clicking on the small controllers of the Accordion blocks, looking through each panel in sequence. Terrible pattern.

So on large screens, it's better to expand the accordion panels and show their content immediately without hiding them. Better yet, add a search or table of contents. Or both together. This is a good solution. It makes no sense to save space in height on big screens.

Accordion on big screens is not the best solution.
Expanded blocks are always a good solution, especially if there is a content search or table of contents.

On small screens, both solutions make sense. Content that is immediately shown is always a good thing.

Accordion, on the other hand, is suitable as a solution when you want to show the main thing and it's immediately expanded, but also to show on demand the secondary things that may be of little importance to the user. For example, on a product page: its description is important and should be shown immediately in the Accordion expanded panel. Technical specifications and other less relevant information can be hidden in other panels.

Expanded blocks on small screens are quite fine.
Accordion on small screens is sometimes okay.

03Active state in tabs and segments

The display of active state in tabs and segments, often raises questions. It can be difficult to understand which segment is currently active.

There are three ways to highlight the active state:

1. Color
2. Style
3. Shape

Color is always a good indication of the active state. There is only one trick, if the inactive is not muted, confusion appears. So inactive must be muted. Then highlighting with color the active state always works.

It's hard to understand which segment is active.
It is clear which segment is active when inactive is muted.

The difference in style with the border, shadow, etc., also helps to make the active one stand out. The difference needs to be really significant.

The style difference is not enough.
The difference in style is quite significant.

Sometimes the style has enough difference, but something goes wrong. The logic is simple: the active state should be highlighted, the inactive muted.

Although there is a difference in style, the logic is wrong. Active is muted, inactive is highlighted. It should be the other way around.
There is logic. The active state is highlighted.

And finally, the third way: shape difference. If the shape of the active state is clearly different, it is always a good and unambiguous indicator.

Confused. There is no difference in shape.
The difference in shape gives an understanding of the active state.