Before you decide on a page layout, consider how to chunk the information into distinct units. Remember that tabs and accordions are only some ways to organize content. You can also use headings, subheadings, and bullets to group relevant information. Concise, descriptive subheadings can help users scan the content and quickly find the necessary information.
When presented with an accordion-style HTML page, students felt surprised by the amount of text hidden in the menus and overwhelmed by the unexpected content. Students had trouble locating materials on these pages.
It is very different. I am not a fan [of the accordion layout]. I have seen this type of thing before and never been a fan of it. I have never seen a schedule like this. This is crazy. I don’t like it no. It is like, by the time I read this, there is no way I am like that’s gonna stick with me after I scroll through all of these.
Interaction Cost
Tabs and accordions require a more significant interaction cost than scrolling through a page. Users must read the heading, decide if they want to expand the tab or accordion, and physically interact with the device. On the other hand, too much information can overwhelm readers and lead to lower retention. Tabs and accordions can reduce information overload. These layouts also give users choices about what they can view and control on a web page.
Devices and Printing
Avoid using tabbed interfaces when you know the user will primarily access the page on a mobile device. The Daylight template stacks headings vertically on mobile and displays the tab content in a bottom container. While this layout is functional, it’s not a standard design pattern and may confuse some users.
Similarly, do not use tabbed designs for pages that users will print. The print version of tabs displays a horizontal stack of headings above a vertical stack of tab content (Figure 2). It is hard to tell which heading matches which content container.
The Daylight accordion template handles mobile and print views better than tabs, and there is some evidence that accordions are ideal for mobile. However, consider sticking to a simple heading, subheading, and body structure if your users primarily rely on print views.
Content Structure
As you design your page, consider these factors when deciding to use tabs or accordion layouts:
Will the layout hide important information? Assume that your users will only click on some of the interactions. Will they miss crucial instructions? Try only to include supporting information in tabbed or accordion layouts.
Does the user need to compare or contrast information? Remember that the tabbed interface will only display one content block at a time. However, users can open multiple accordions simultaneously in the Daylight template.
Are the content subsections logically connected? Tabbed content should share parallel themes. For example, a tab structure that includes “Apples, Oranges, Bananas” is parallel, while tabs labeled “Apples, Oranges, Health Benefits of Fruit” are not.
How long is each subsection? Ideally, keep the content in the accordion and tabbed sections around 1-2 paragraphs.
Can you write short, descriptive, consistent headings for each content subsection? Tab headings should only be 1-2 words in length. Try to keep accordion headings to a single sentence.
How will you order the subsections? Put the most critical information in the first tab, as this tab is automatically displayed to users in Daylight.