Microinteractions Pt 2: The Waiting Game

In our previous post, Microinteractions: Introduction to Our Unsung Heroes (Pt 1), we shared the importance of microinteractions. There we stated that microinteractions are the minute details that we as designers should pay attention to in order to elevate the ordinary into exceptional. It is through these small, almost undetectable user experiences that we can turn a user into a new customer, an empty cart into a purchase, and the hesitant into a believer.

With that said, there are various types of microinteractions that come up on a website. For this blog, we’d like to dive into one of our favorites – the all-too-common…slow…and ULTRA annoying loading screen.

“An hour sitting with a pretty girl on a park bench passes like a minute, but a minute sitting on a hot stove seems like an hour.”
– Einstein

Time is of the essence

Designers of digital experiences share an ingrained obsession – the obsession of speed and performance. Amazon calculated that an increased loading time of just one second could cost their company $1.6 billion in sales each year. Google loses about 8 million searches (and ads displayed) when page speed decreases by just four-tenths of a second – craziness…I know!

Loading time is crucial to the success of your product, whether it be a site, app, or program. You never want your web visitors to wait (or at least “feel like” they are waiting).

Remember the last time you were on a bad date? Yeah….that was painfully slow wasn’t it? However, we can influence how a user perceives time during a digital experience. At the end of the day, the absolute minutes and seconds users have to wait don’t really matter, since our perception of time is highly subjective. The more important question is: what can we do to positively alter a user’s perception of time?

DID YOU KNOW?

47% of users expect a webpage or an app to load in two seconds or less. After four seconds, the average user starts getting frustrated and after eight seconds, they leave. In fact, a one-second delay in your site speed can result in a 7% reduction in customer conversions. (Source: Wired)
This is where our trusty heroes come in for the rescue! Adapting and creating a well-designed loading microinteraction can turn those few seconds of waiting into an entertaining and, from your perspective, beneficial experience.

Here, we can leverage one of the oldest and most efficient uses of web animation to distract a user from the loading time as well as promote other parts of the website.  Although this does not solve the problem, it can certainly make the user less annoyed.

Don’t keep the users guessing – tell them what’s happening. From hand-drawn designs to loading screens that implement 3D elements, there are a multitude of ways to design a clever preload. One of the most common is a progress indicator.

What makes for a “good” process indicator?

A good process indicator always gives some type of immediate feedback telling the user the app or website needs more time and approximately how much time it’ll take. You’ll want to use one for any action that takes longer than about one second. For anything less than that, it is distracting to use an animation. Indicators have two main advantages:

• Reduce user uncertainty (reassures the user that it’s working)
• Offer a reason to wait and reduce user perception of the amount time passing (app gives the user something to look at while waiting, making user pay less attention to the wait itself)

Process indicators can be either determinate or indeterminate in terms of time. A determinate indicator shows HOW LONG an operation will take and the “percentage complete,” while an indeterminate indicator requests that the user wait while something loads. A general rule is that looped animation should only be used for relatively quick operations, two to ten seconds. Making the user stare at a spinning wheel longer than that can increase bounce rates.

You should not be using static progress indicators!

DON’T DO IT! These are stagnant images or text like “Loading…” or “Please Wait” to indicate the request has been received. These do not offer enough information about what is happening and should be replaced with more meaningful interactions.

Another neat solution for this kind of microinteraction is skeleton screens (a.k.a. temporary information containers).  Using these is yet another way to focus on progress instead of wait times.

Essentially, a skeleton screen is a blank version of a page where information is gradually loaded. It provides the sense that things are happening immediately as information is incrementally displayed on the screen. With this interaction, the focus again is on content being loaded, not on the fact that it’s loading. Now that you know about this cool little guy, you’ll start to notice him everywhere!

Loading Screens for days

In the meantime…check out some sweet loading screen designs from these various sites. These all follow the rules outlined in our Microinteractions Overview. Again, microinteractions are small but mighty! Think you’ve found one of these unsung heroes? Send it on over and let’s chat about it.