How Should Tabbed Content be Loaded?

Question

There are several approaches to loading content inside tabs. For example,

1. Load all content initially, then just manipulate the DOM to show/hide tabs
2. Load only the content of the active tab initially, then fetch the content of the other tabs via AJAX when the user switches tabs.
3. Load only the content of the active tab initially, then preload the content of the other tabs while the browser is idle.

I think that #3 is the best practice because it combines the advantages of #1 and #2, but if you're not going to use #3 for whatever reason, then which of the first two is better?

With #1, the page will take longer to load initially, but switching between tabs is instantaneous.

With #2, the page will load faster initially, but the user will have to wait for the content to load on the other tabs.

Answer 1

Well I do agree that approach #3 seems the best option with regards to utilizing bandwidth and ensuring that the user has access to data at once, with regards to the other two choices I would recommend going for approach #1 since users like to switch between tabs to get related information quickly and a delay might cause them to lose track of their thought process.

To quote this article Module Tabs in Web Design: Best Practices and Solutions from Smashing Magazine about the relation between content on different tabs

INFORMATION THAT IS RELATED

Information in the panes of module tabs must have some connection to each other so that users can make a logical correlation towards the content of the component.

Hence with regards to switching,the article states:

SWITCHING IN BETWEEN PANES SHOULD BE FAST

A purpose for using module tabs is to permit quick and interactive presentation of content. For this, you should try to have the inactive pane contents written inline in the HTML document, and then use CSS and JavaScript to style and hide the pane visually, which is quicker than requiring a page reload or requesting remote-source data.

Avoid page reloads when switching in between the panes because this significantly delays navigation in between panes. Remotely-loaded content using Ajax can be an option for dynamic and remotely-located pane information but presents a challenge for screen reader users who may not be aware of asynchronously DOM-inserted nodes in the document’s tree.

To quote this article about Website tab usability :

Ensure fast response time: Users expect content to show up faster when clicking a tab (typically less than 0.1s), rather than when clicking a link. This can be achieved using AJAX by loading content in the background and making it visible on tab click. However, you can use any technique as long as the end result gives users the impression that a physical connection exists between their mouse click on the tab and the content that is loaded

.

Hence I would go for an approach which would reduce the waiting time which is choice #1 (though choice #2 might work just as fast, an user with a slow internet speed might get pretty frustrated with no data to be found when he switches the tabs) .Also Ajax might pose an issue for screen readers as highlighted in the above quoted text

Answer 2

As an alternative to Mervin's excellent answer - there are cases when between tabs if there is too much content then it makes sense to load the tabs as you click on them. However for the reasons Mervin gives, I'd suggest that AJAX loading still wouldn't be the way to go, unless you're writing a single page app.

Here on UX.SE, the different views between sorting the questions (votes, active, unanswered etc.) are tabs by the sense that it's displaying related information, but they are loaded one tab at a time: