Pros and Cons of Stacking Divs for Faster Interactions

We've talked about the importance of faster interactions before. In this post we wanted to break down and explain a simple technique to achieve faster interaction by replacing page loads with stacked divs. The core idea is simple, you take two pages from your application and combine them into a single page. The markup for each of the old pages is contained in a separate div. The first div is shown while the other is hidden. To move between pages you hide the current div, and show the other.

Advantages

The transition is crazy fast
A full page load will take no longer then 2 seconds in most cases. Hiding and showing a div takes less than 10ms and thus is instantaneous as far as the user is concerned. State is maintained in the inactive divs
If you had forms, or other interactive elements, they will stay where you left them until the page is loaded again. Because all you are doing is hiding the element, nothing is reset by activating different stacked divs. Fancy pants animations
Page loads are fairly unimaginative and don't allow you to communicate anything about the transition between the pages. Rather then simply doing a show/hide with the stacked divs, you can animate the transition between them to show the relationship between the two pages.

Disadvantages

All the content is generated when the page is loaded
This is not an issue so long as nothing changes after the page is loaded. It's going to be a problem if the actions in one div effect the content of another. In this case you would need to either update the other divs client side (not so simple anymore), or just do a regular old page load to get the updated content. State is maintained in the inactive divs
If you need forms and interactive element to be reset when the div is activated, a page load may be the easier way to accomplish this. The transition is crazy fast
The speed at which the page changes may be disorienting when switching tasks or modes. Instant changes are great while performing a single task, or tasks of the same type, it puts the user in control of the application. The short delay of a page load communicates shared control, which is what people expect when changing modes or saving data.

In Practice

We use this technique for our tests in Verify. Each test consists of multiple steps, so we structured each test as a page load, and each step as a stacked div within the test. This provided a couple different benefits:

• Animated transitions to communicate progress (watch the direction the instructions tab moves when clicked)
• Frictionless movements between test steps (accomplished by removing page loads)
• All the markup can be generated server side (thanks to page loads between tests)
• Asynchronous persistance of data (by sending AJAX requests in the background)

See a Sample Verify Test in Action As we mentioned in the disadvantages above, persisting data without any feedback to the user may communicate that nothing was saved. In the Verify tests, AJAX calls that record user data block the interface until they complete. AJAX calls recording passively recorded data (response time, location, etc) are done in the background.

The Code Bits

The most basic stacked divs implementation could look something like this:

But ideally you want to avoid setting inline styles like that, so here's a better (albiet slightly more verbose) way to do the same thing:

More Resources

For a more in depth discussion of JavaScript interactions and response times, check out the Super Awesome jQuery Interactions talk we gave at the jQuery Conference in Boston. If you need the speed of stacked divs, but can't deal with all the content being generated when the page loads, check out this post introducing Backbone.js, a lightweight JavaScript framework for generating markup client side. If you need to create a linkable url for each state of your stacked div page, check out the Router in Backbone.js or Ben Alman's sweet jQuery BBQ plugin.