What you see is faster than what you get - ways to speed up perception

This May, I had the pleasure to present at Web Performance Meetup in Berlin. This was a very special moment for me as it was my first public talk :blush: The following is a transcript and slides from my presentation. You can also find links to all resources I used preparing for this talk. Enjoy!

Hey everyone, thanks for having me tonight!

I'm going to talk about perceived performance, why it matters, and how we can be better at it.

Let me introduce myself first. My name is Radimir and I'm a front-end developer with a passion for web performance, accessibility, and interface animation.

You can find me on all of these social medial channels as @radibit. I'm pretty active on Twitter, so please ping me if you have any questions 😃.

Time perception can be really tricky and the following quote by Lewis Carroll shows exactly that.

It's also an objective quantity which means we can measure it very precisely e.g. atomic clocks.

And we're really inventive when it comes to clocks and watches. Here we can see a beautiful digital clock made out of smaller analog clocks created by Humans Since 1982.

We focus too much on improving the objective time! There are so many great tools built with the idea of tracking the page load time.

However, the way how people perceive time is subjective.

To illustrate that I will use the Kappa effect. It can be explained with a journey made in two parts that take an equal amount of time. Between these two parts, the journey that covers more distance may appear to take longer than the journey covering less distance, even though they take an equal amount of time.

It’s vital for the success of our apps to consider the following metrics time-to-interact, first meaningful paint, and above the fold loading time.

As web developers, we need to understand that people care only about the feel of our apps. But it’s not only about the technicality. Everyone should contribute in the process of building great user experience.

In the next minutes, I'm going to explain why perceived performance matters, how people perceive time, and which techniques we can use to improve the perception of our apps.

So let's elaborate on the reasons why perceived performance matters!

For starters, it affects the perception of your brand. Twitter released recently progressive web app for their main product which includes data saver feature, progressive image loading etc. Source pwastats.com

Another great example of how performance optimizations produce better results is the new PWA platform for housing.com.

Radware's study proves that 500ms delay increased users’ frustration by 26%, while at the same time satisfaction dropped by 8%.

They also concluded that slow websites dramatically reduced the measured emotional aspect of purchase intent and brand functionality.

Ilya Grigorik defined in his Fluent 2014 talk that perceived performance is a function of the expected performance from the users, actual performance, and the UX. The latter is every team member's contribution.

Perceived performance is our chance to optimize our apps and websites by thinking like our user.

Let’s start with describing how people perceive time.

The internal clock model shows how our time perception depends on our memory associated with a certain stimulus. It starts by activating a pacemaker. Then in the second (memory) stage the neurons transmit the information and our brains start looking for previous experiences connected with this stimulus. Finally, we are making a decision based on the accumulated information. The time of decision making shortens considerably if we have a memory connected with the received stimulus.

Perceived duration is the perceived time interval between two successive events.

For example with each movement of our eyeballs we are loosing a fraction of a second. This is nearly 40 min every single day!

To illustrate that we can try the Chronostasis experiment. It's a temporal illusion in which the first impression following the introduction of a new event appears to be extended in time (stopped-clock animation).

Next, let's see what we know about perceived duration and its impact on web performance.

Reaction time has a been a favorite subject of experimental psychologists for almost a decade. Studies defined four important time durations in the context of perceived performance:

  • 0.1 to 0.2s Acceptable response time which simulates instantaneous behavior.
  • 0.5 to 1s Immediate behavior. Usually the response time in a human-to-human conversation. Delays within this interval are noticeable but easily tolerated by most users. During this time, the user must receive a response that their command (click of a button or link) has been accepted.
  • 2 to 5s Optimal experience as a state when people experience concentration, absolute absorption in an activity and deep enjoyment.
  • 5 to 10s The user would still be focused on their task but would become easily distracted. This is the time for the system to engage the user in the process. If this is not done, then the user will most probably be lost forever.
  • Less than 1s - no need to distract users’ attention with visual indicators.
  • Between 1s and 3s visual feedback is needed, though most people still have patience.
  • Between 3s and 8s we need to explain what is our app doing. Really high chance to lose people’s attention.

Allen Pike gives us another perspective in terms animated feedback. In his article Providing joy at 60 fps he states that over 1s joy is lost and users are loosing their feeling of task flow.

To prevent this scenario and to understand better how far we need to go optimizing our apps, we should understand the theory of just-noticeable difference or JND.

It's based on Weber–Fechner law which relates to human perception, more specifically the relation between the actual change in a physical stimulus and the perceived change.

In his book "Designing and engineering time", Steven Seow comes to the conclusion that in order for users to detect any difference (visual, audio etc.) it has to be changed by minimum of 20%.

We can do even better! Aim for 30% to go beyond the threshold. If we have an action that takes 3s for example, we need to make it 0.9s faster in order for our users to notice the difference.

Let's talk about how we can speed up perception.

First are the optimistic updates 🔮. These are invisible, background operations that happen before the user actually asks for them.

Great example of this technique is the Instagram app. They invite the user to add a title and tags as the picture uploads in the background. By the time the user is ready to press a share button, upload will be completed and it’ll be possible to share their picture instantly.

Another example is the fact that they can register the user "Like" action even if the feed is still loading.

Next are the skeleton screens. Luke Wroblewski first discussed the drawbacks of using loading spinners in on-screen experience. He spoke in favor of what he called “skeleton screens”. Skeleton screens create anticipation of what is to come and reduce cognitive load.

Apple included it in their Human Interface Guidelines. The example shows how in Safari iOS app a launch screen appears instantly when the app starts up. Then it's quickly replaced with the first screen of the app, giving the impression that the app is fast and responsive.

Let's talk about progressive image loading (not to be confused with progressive JPEG loading).

It's a really popular approach to give users idea of what they can expect from the image content. With this Medium's blog post we can see the progressive image loading in action (blurred, small version of the original image file has been loaded first).

We can see an example of the result produced using color-extractor and linear-gradient in this codepen. For better effect change to 3G throttling in your browser's network preferences.

Next, progress indicators. When people don’t have a sense of how much is left of a particular process they will feel that it takes longer. It’s better to combine it with exact indication of the progress e.g. 70% or 1 of 4 etc.

With the following codepen example we can demonstrate what Chris Harrison discovered. The effect of animation in the opposite direction of the progress bar increases the perception of faster completion.

You might ask "What about spinners and loaders?".

However, they draw attention to the fact that the user is waiting and we should avoid using them as a single indicator.

One of my favorite techniques is using interface animation. It can affect the perception of time and duration for our site’s visitors.

"Studies demonstrate that well implemented animations have a direct effect upon cognitive load." However, it's important to note that poorly designed or overly complex animations might have a negative impact on our apps. This indirectly can affect user's perception of time needed to complete certain action. Source.

Animation can help the eye to follow easily the position of newly appeared objects on the screen. Using motion gives us ability to create a mental map of where items are located. Val Head (highly recommend to follow her) illustrates this as part of her great article in a form of a codepen example.

In her article "The Importance of Context-Shifting in UX Patterns", Sarah Drasner elaborates on the animation role as part of web development. She states, that the associations of space, time and placement can help an interaction seem more fluid and intuitive. Of course, if it's elegantly implemented it will affect positively the perceived performance of our apps.

Animation is a really powerful technique. Nevertheless, performance and functionality should not be sacrificed.

Most likely one of the quickest techniques for improving perceived performance is providing an active state of button elements.

It's way better to present this immediate visual feedback to our users.

We should avoid using transition with active state as it increases the time between registering user's action and reacting to it.

Think carefully about the performance optimizations and their contribution to the UX.

No need of overengineering!

What really matters is how fast your website or app feels.

Care more about your users. It's all about them!

Thank you!