Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

  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.

share|improve this question
add comment

1 Answer

up vote 2 down vote accepted

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

share|improve this answer
    
+1 for "SWITCHING IN BETWEEN PANES SHOULD BE FAST", that's why they're panes and not other pages. –  msanford Sep 7 '12 at 19:42
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.