A module tab is a user interface (UI) design. It organises content into different panes, with one pane viewable at a time and controllable by the user. The visibility of each pane is controlled by its respective tab which is always visible and placed next to (usually above) the pane area.
Tabs allow the user to stay in the same position of an email or page, while accessing alternating content.
The screenshots below show a tab module example in a desktop and mobile environment.
This tab module comprises:
- One row of (three) tab labels positioned above the pane area.
- Pane area beneath, where one pane is shown at a time.
- The first pane is initially shown by default.
Why use it?
to view example in web browser.
Much like the real-world counterpart of using tab dividers in a tangible folder or paper pad, tabs in an email or web page provide a familiar and intuitive way of organising and accessing content.
Tabs are best for allowing the user to alternate between contextually similar information, rather than as a means to navigate to different areas.
They provide a means of presenting content in a compact and unobtrusive manner. This can be particularly useful for devices with small screens.
When to use it (determining usage suitability)?
You should use tabs when:
- All content can be organised and share the same purpose or relationship with each other. Using a tab design implies that there is a relationship or logical connection between the information displayed on each pane. It would be unexpected for the user to find pieces of information positioned together as tabs that have no relevance to each other.
- The information is succinct and to the point, typically in the form of lists or short paragraphs.
- The organised content can be referred to using short categorical labels, using one keyword or two at the most. Much like the real-world size characteristics of tabs used in a cabinet filing system or paper pad, short label names should be used to retain the familiar and intuitive tab appearance with the user.
- The information does not need to be compared or accessed simultaneously by the user. If the need to compare is a key part of consuming the information, tabs are not recommended. Only one pane is visible at a time and tabs will slow down the user.
Which email reading
environments support this?
At the time of writing, Profusion supports tab functionality in these popular email reading environments:
- Apple Mail on Mac
- Outlook for Mac
- iPhone Mail (mobile)
- iPad Mail (tablet)
- Samsung Mail (mobile)
- Android 4.4 Mail
Please ask your Profusion contact for a report showing the percentages of recipients estimated to be opening in each of these environments.
For other popular email reading environments not listed above, but listed in Profusion’s Email QA handbook, tab functionality email is not supported. To find out what measures we take for non-supporting email environments, please see the ‘alternative fall-back presentation of interactive content’ section of this document.
Notes for designers and marketers
Presentation and interactivity
Users have preconceived ideas about how tabs should appear and behave on websites. So it’s important to keep the intuitiveness of tabs in the email.The tab panes could be viewed or activated by hovering a mouse cursor over them when using devices with a pointer-device. However, from a user experience standpoint this is not recommended.
Tab labels should:
- Each contain one or two words maximum. This maintains the appearance of familiar, intuitive and concise tabs. If short, categorial labels cannot be determined for the content of each pane, accordion functionality can be used instead.
- Preferably be the same size, to be aesthetically pleasing.
- Be arranged in an order that makes logical sense to the user.
- Be written in plain language for the user to scan quickly and predict the information under each tab.
- Avoid ambiguity by not replacing text with icons.
- Be positioned above the pane area, preferably. This aids familiarity and helps prevent users overlooking them.
- Be positioned on one row. Tab labels stacked on top of each other can be challenging to scan and navigate. This guidance does not refer to secondary-level tab navigation (tabs within tabs), where tab hierarchy can be useful.
- Vary in style according to whether they are active or inactive. For example, the active tab should appear pronounced (perhaps slightly larger in size or with a heavier font weight) and ‘connected to’ the active pane.
- Easily readable and clearly present, if inactive. This encourages users to click on them.
Each pane should:
- Be shown one at a time. Initially one pane (typically the first) should be visible by default without user interaction.
- Be a clearly defined area, distinct from its surrounding elements.
- Not be scrollable, neither vertically nor horizontally.Scrolling is an unnecessary hindrance to the user when accessing information in a tab module. Content should be succinct and the pane area size should accommodate the length of content in its entirety.
- Where possible, have a common fixed height to accommodate the height sizes of content across all panes. This prevents subsequent content on the page/email from ‘moving’ when the tab pane area grows or contracts when each pane is viewed.
- Possibly include elements such as copy and imagery.
- When active (as shown), be styled to appear connected to the corresponding active tab.
- Not force the user to scroll within a smaller tab pane.
Interactive content fall-back
What is a fall-back and why should my interactive email contain it?
When an email featuring interactive content is viewed in an email reading environment that does not support this feature, an unpredictable user experience (such as loss of functionality, and/or presentation and layout issues in the email) may follow.
Measures can be taken to avoid this by presenting alternative, non-interactive content within the email. This is referred to as a ‘fall-back’, a design and development consideration for interactive emails. A fall-back progressively enhances the appearance and functionality of the email, where possible, to provide the best possible user experience across the most popular email reading environments.
As fall-backs are best effort attempts that operate on characteristics of email environments that are subject to change, they are not to be considered as bulletproof methods.
Fall-back options for tabs
In the supplied PSD design for the interactive email, please supply a variant showing how the non-
interactive alternative fall-back content should be presented within the email.
The following content fall-back options to consider for tabs are:
- Hide the tab labels and any associated tab presentation and functionality from the email. Instead, pieces of content that are positioned on each pane are presented on top of each other. See the screenshots below for examples of fall-back content. Note the absence of tab controls and pane styling.
- Alternatively, the tab and pane presentation and associated content can be hidden entirely from the email.
View more guides