This website uses cookies to ensure you get the best experience on our website. Learn More.

Milliseconds matter. How time builds UX

Patience is a virtue. That’s what they teach us since we are kids. No rush, calm and collected approach is what seems to be the best way to solve problems. But what they also teach us is being efficient with time, reject wasting, and as one famous Russian proverb says – never postpone for tomorrow something that can be done today. We fear procrastination but often procrastinate slaying it. So where is the edge between patience and sloth? Is it better to take your time or not waste any time? And what is the perception of time in real life and online?

Milliseconds matter. How time builds UX

Time pursuit

Our perception of time is dynamic. What seemed to be normal in terms of waiting a couple of years ago is a hard test today. And this gap grows exponentially as we reach further. One thing we can all agree on is the fact that we value time more and more along the way.

Milliseconds matter
In terms of UX time is the attribute of performance. The entire purpose of optimization lies in the reduction of loading time. All mobile protocols are about time. Time is the most valuable asset and we go to battle for it.
Our sense of time is subjective. The younger you are – the slower time runs and the more you appreciate the process – the faster it ends. This relates directly to the concept of waiting. The kettle just won’t boil if you are staring at it, but boils instantaneously while you are away for just a minute! Or think of the last time you were on vacation – two weeks fly by faster than your commute back home every other day. It’s about the desired time or let’s call it “fondness”.
For general public waiting is not a good thing, anticipation is though!

Is it even possible to turn the despised waiting time into precious anticipation or even provoke serendipity?

In the early ages of internet, websites did not have the privilege of fancy design and unique behavior. The infrastructure just wasn’t there yet. Take a look at what 20 most popular websites in the world looked like at their launch. As technology grew and advanced, we quickly took over the possibility of stepping up the web game. The exponential growth of web application abilities inevitably led to the increase in loading time, because people have always had ambitions outreaching their current technical capacity.
When talking about website load speed, analysts tend to dig deep into nanoseconds and calculate scary rates of dependency between conversion and tenths of seconds. At the end of the day these seconds don’t matter much and people actually can wait but only if you are providing some sort of experience for their wait.
Some surprising facts have been revealed in the UIE’s article about loading time: first, slower websites can be perceived as faster ones if they pack value and a point of interest. The example shows that Amazon.com with its loading time of 36 seconds was rated faster than About.com with only 8 second load time. Some mind-boggling stuff here! The second discovery is that users tend to correlate positive experience with faster time they’ve spent on it. In other words, if they found what they came for – they think the website is fast. Again, enticement brings fondness. Every situation you face is contextually and emotionally unique, and so is the time judgement.

So how can we steer user experience strategies in order to change the perception of time?

Captivate

Keeping a user engaged and occupied while the page is loading is the key to prevent abandoning. I think this is where web and mobile app designers can learn from game designers. It takes time to load textures and complicated algorithms in the video games of today and this is something you can’t easily optimize. Some games have a notice warning you to avoid powering off your device while certain spinners are in place. I personally like what they did in the Far Cry franchise.

milliseconds matter farcry load animation

This Far Cry 3 loading screen has animated quotes from Alice in Wonderland

Before people start soul searching, questioning their deepest beliefs, and transcending into the unknown, give them a little boost, blow some wind into their sails and steer them in the right direction. If you played that game, you know exactly how Alice in Wonderland reference contributes to the experience. It’s always better to use quotes or tips, or something rather than white or stationary screens.

Interact with no delay

Even though any action a user performs on a website or an app requires time to reach the back end, the user doesn’t need to know that. An action as simple as liking or pinning a post intuitively requires immediate response. This is important because the action is already postponed – you see it, you love it, and then you hit the button. Absolutely no need to notify a user when the actual action is solidified. They get an immediate response, while things are still processing in the back.
The response time that makes users abandon whatever they were trying to do is everything after 10 seconds. It’s a hard blow to take for UX, so this waiting time has to be justified.
A 1 second load time is still within the limit, but depending on the amount of clicks and taps a user produces, a delay in reaction may come into place and affect the UX. Generally, a gap under 100 milliseconds is untrackable, the reaction within that range seems instant. That’s the honey hole you want to be in. The delay in switching between tabs in most of the browsers is 300 milliseconds. It is sensible to the naked eye but is not bugging us because we are focused on the information those tabs contain.

Some good examples of instant response solutions:

 

Milliseconds matter Twitter likeTwitter Like animation

Example of share animation

Share response concept by Jelio Dimitrov

Animate the wait

Interaction is based on dialog with its main attribute being dynamics. Motion is as dynamic as it gets, so animation has to be the first choice if you want to invoke interaction. Animation was perceived as ‘extra juice’ but is now capable of being an integral part of the experience, bringing better response, smooth flow, and sympathy.

Apart from that, animation has some technical benefits as well – it can give you some extra time to perform actions in the back end or to mask loading time. However, it is important to consider timing and volumes of requests that animation is triggered by. Those need to be significant actions.

Milliseconds matter Carwash app animation

Interface loading animation used by the CarWash app. It uses a weather aggregator to fetch data and the time required for response is concealed

Animated wait is an entertainment experience, Like the change of scenery on shows is camouflaged with some sort of interim performance, you can use motion to project the desired info and take users’ focus off the idle moment.

Use progressive image loading

Gradual, from top to bottom image loading is a thing of the past. Even though images following that principle load in a split second now, the idea of gradual image loading is being questioned. Some major players like Facebook, Twitter, and Quora have taken that approach and more will be coming along.

Quora Progressive Image Loading

Quora.com switched to progressive load and it was a smart move considering the case of bad internet connection when some images might take time to load while a user can already be reading somewhere in the middle of the page.

Google images loading

Google Images load the entire grid but no blurry previews, they select the base color and use it for the preview.

This principle prevents frustration from losing your focus spot due to the bouncing of the grid. After all, textual information is more valuable and you don’t want to mess up the experience of getting it. The website skeleton layout must be visible while it loads.

Use smart progress bars

The whole study has been conducted by Dr. Brad Myers pointing at the importance of percent-done progress indicators. Generally it all comes down to the idea that we need to keep track of time while performing tasks.

Progress Bar bar

Progress bars keep us from getting lost in the void. They bring satisfaction from completing the task. There is a back side though. Progress bars can’t be boosted and there is no way to speed up the process. And not only that. Progress bars can lie!
The reason why progress bars frustrate is the fact they they are not accurate. Everybody had the experience of a progress bar reaching 99% and then freeze processing the ‘hateful one’. This brings the thought of progress bars having been created not for adequate reflection of processing but as a means to show that the system is actually working on something. If the purpose is purely psychological and if the technology of honest depiction is too complicated, why not make progress bars work for you and contribute to the fondness?
Like with motion-driven screens, progress bars can tweak time perception if they are done in the right way.
Here are the examples of how you can visually speed up the progress bar with just design tricks:

  • Wave direction. Waves going in the same direction as the progress itself, visually increase the speed. Opposite direction waves slow it down. These two progress bars run with equal speed, one seems to be faster though.Loading
  • Colorization. Gradient change of color adds dynamic feel to the progress bar. Notice the direction of color – it has to reach warm colors indicating heating.
    iOS Progress Bar Acceleration
  • Unorthodox animation/textual stage reference. Not only they reflect the progress, but they create momentary fondness.

    Unorthodox Loading Animation

    From Howard Moen

Avoid wait cursors

Originally introduced as a symbol that indicates that an application is busy performing an operation, wait cursors have been following software, web interfaces, and now apps at every stage. Hardware of today is capable of performing tasks without significant delay and so are theck end systems.
However, wait cursors and throbbers are still there bringing back the memories of those scary times when everything would freeze and keep you suspended with the hypnotic motion of an hourglass. There are times for them, but whenever possible, you should abandon them. A nice substitution would be a quick animation confirming that the system has got what the user meant without showing them the ‘digestion’ cursor.
If wait animation is necessary, make it work for your mission to perpetuate fondness!

milliseconds matter weird spinners
Learning to value time is a crucial asset that unfortunately comes too late sometimes. The appreciation of time will pay back in various forms. Time is a resource and a tool we can’t influence. What we can though is learn from it and use it’s power, or as Adrian Zumbrunnen put it.

“Our perception of time, and every experience people have with the things we put in this world is shaped by various factors we might not be aware of. As long as technology doesn’t fully eliminate waiting, we can take advantage of our subjective perception of the world and make the experiences we craft a little more snappy, seamless and captivating.”

*  *  *

Written by Moses Kim

December 12, 2016

Subscribe to Our Blog

Once a month we will send you blog updates