Look familiar?

For some of you that experienced the web between 1996–2010, the screens above may be giving you flashbacks to when waiting on the web was the norm.

In the late 90s Flash gained ground and became the go-to for creating dynamic interactive websites. It was the all-in-one tool for awesomeness and quickly overtook the web, used for everything from entire sites down to animated buttons. The mantra was if you could animate it, why not?

Flash forward to today and Flash is dead. Flash fell out of use for several reasons — it was slow, it was proprietary, it didn’t work across devices meaning it fell out of sync with the mobile boom, and finally, Steve Jobs.

The demise of Flash was also influenced by a resurgence of web standards and the rise of user experience (UX) as a concept.

The Nielsen Norman Group’s article Flash: 99% Bad states:

About 99% of the time, the presence of Flash on a website constitutes a usability disease…Flash tends to degrade websites for three reasons: it encourages design abuse, it breaks with the Web’s fundamental interaction principles, and it distracts attention from the site’s core value.

Flash defined poor UX; it promoted a function follows form approach to the web.

Here’s the rub — the loading screens above weren’t made with Flash, they were built using modern web technologies — HTML5, CSS3, canvas, svg, WebGL — to preload complex animations.

Are these technologies the new Flash?

Loading Screens

Because Flash files were so large, loading screens became synonymous with the Flash experience. The load time could be anywhere from mere seconds to a full minute, depending on complexity and bandwidth.

Courtesy of the oatmeal

Faster devices, more bandwidth, and current web technologies have decreased user tolerance for the slow web. 47% of users expect a page to load in 2 seconds or less and 40% abandon sites that take more than 3 seconds to load. Additionally, a 1 second delay decreases user satisfaction by 16%. Source: gomez.com, akamai.com.

What are the alternatives?

1. Skeleton screens

Avoid the loading screen and use skeleton screens or a progressive reveal of features/animations. Give the user context; allow them to focus on the content being loaded rather than focusing on the loading.

2. Simplify

Complex animation experiences are super cool, but in many cases they are not the appropriate tool to deliver content.

Smashing Magazine‘s article How Functional Animation Helps Improve User Experience states:

Animations should always serve a purpose. They should never be done for animation’s sake. When an animation doesn’t fit a functional purpose, it can feel awkward or annoying, especially when it is slowing down a process that could be faster without any animation.

Context is important. The problem with loading screens is that context has not been established, thereby putting the onus on users to trust the experience blindly.

3. Shuffle the deck

Another option is to follow the same conceptual models for site performance optimization such as lazy loading images, prioritizing above the fold CSS, and deferring javascript — shuffling the resources around to avoid delays. For animations, shifting complex animations to localized areas of the site, deferring animation resources, or chopping up animations into digestible bits that are applied in context, can allow for the removal of the loading screen. These approaches allow a site to establish a relationship and build trust with the user, increasing perceived value and potentially decreasing abandonment during periods of wait.

Conclusion

Simply put, loading screens are a byproduct of a design choice and offer no benefit to the user. Don’t burden the user with wait, there are better approaches to delivering content, while also showcasing design.