This approach contrasts with the use of a loading spinner. A spinner is great at communicating that the user is in a state of waiting — but that’s a problem! As we recall in the anecdote of the airport baggage claim, the state of waiting is an agonizing ordeal. In other words, designers can inadvertently make the wait feel longer and more unpleasant by rubbing the waiting period in the user’s face. How’s that for a non-user centric design choice?

Instant load transitions mitigate the wait by providing a perceived sense of movement and activity by loading placeholders instead of making the act of waiting the star of the show like spinners do. It’s similar to how some of the best dentists turn the operating room TV on to your favorite show while performing your root canal. In the same way, the best designed shopping sites can distract you from the act of waiting for pages to load, by seemingly saying that there’s no wait at all.

2. Immutability and motion

The visual power of immutability

Instant Load Transitions (ILTs) improve the waiting experience by pre-emptively providing a perceptible sense of constant progress — but an important role played by the placeholders rendered by ILTs is that of providing a consistent visual experience, between, say, a homepage and a product description page.

How often have you seen image heavy sites load with the site footer appearing where you’d expect a beautiful splashy product image? Seconds later, the image renders, pushing the footer and other UI elements down the page. This flash of a layout in its unfinished state of loading has the powerful effect of making the site feel both slow and disorienting.

Maintain a consistent visual experience and convey the sense of a performant page load by designing a highly controlled first page load. In other words, keep page elements, especially interface elements, in the position they would be in after the page has completely loaded. Use set heights and widths for page elements to avoid any unexpected or erratic reorganization of elements on your pages as content like text and images load in.

Mindful motion