The illusion of speed

Original author: Paul Bakaus
  • Transfer
For many years, my colleagues and I convinced developers that the faster the site, the better. The article is not about that. I'm not going to show you statistics on how much more companies that optimize the site for productivity (and this is) earn. Relax, take a cup of chocolate - together we will travel through time.

Present and Perceived Time




Proper performance measurement is incredibly difficult. For an example, we will try to measure page loading time. Choose one of the metrics:

  • Time to first display - time to first paint (automatically)
  • Time to first useful display - time to first useful paint (manually)
  • Time to first viewport - time to first viewport (semi-automatic)
  • Time to interact - time to interactive
  • Page loading

What do you choose: measure absolute performance (page load) or perceived performance (TTFP, TTUP, TTFV, TTI)? I did a study on how people perceive movement and tried to explain why a higher fps is better than a lower one - and it soon became clear that many of the things that I used to perceive in black and white were not really so. The perception of movement is an incredibly complex topic, largely subjective. Much of what you think you see, you really ... don’t see, because it is generated in the brain.

As it turned out, the perception of time and speed is as distorted as the perception of movement, if not more. As in my article “The Illusion of Movement,” I highly recommend an excellent series of articles as an introductionwritten by Denis Mishunov for Smashing Mag .

Perceived performance is so important that even Apple writes about it in its developer recommendations:

“Perceived performance is in many cases as effective as real performance” ( Basic Performance Tips )

Perceived reality - how our brain constructs the past, present and future


The way we measure perceived time is fundamentally different from the stopwatch. Time is a very abstract concept for people. We are not doing very well with her. Hell, we’re not even able to live in the present tense!

The present



“We all live in the past: our consciousness lags behind 80 milliseconds from real events in the present. When you think that an event is happening now, it actually has already happened, ”says David Eagleman , a neuroscientist. Yes, our brain has a time buffer!

A time buffer exists to synchronize processes within our body. Basically, these are chemical processes that take a significant amount of time. If you kick the ball, you feel the touch and see a foot that touches the ball. But in fact, these two feelings are very out of sync. The eye is physically much closer to the brain and receives a signal much faster. For this reason, the brain continuously waits for events and buffers 80 milliseconds of time. Without this buffer, our world would be annoyingly out of sync.

Unfortunately, the 80 ms time buffer plays various evil jokes with our perception of reality. From Scientific American Magazine :



While the clapper is closer than 30 meters, you hear and see the clap at the same time. But at a greater distance, the difference between the speed of light and the speed of sound exceeds 80 milliseconds, and the brain can no longer synchronize the image with the sound. The strangest thing is that the transition is abrupt: literally taking one step back, the slammer goes out of sync. Similarly, while the soundtrack of a TV show or movie is synchronized with the video sequence within 80 milliseconds, you will not notice any lag, but if the delay is even a little longer, they are sharply and annoyingly disconnected. Events that end faster than 80 milliseconds pass unnoticed by the mind. A baseball batter waves a bat across the ball before realizing that the pitcher has thrown it.

As a practical example, take trading on the exchange. A business where every day thousands of decisions are made within milliseconds. Since we are not able to sense the present, we simply do not have time to make decisions, and here algorithms come into play. Computers are not always smarter, but they are definitely faster. That's why high-frequency traders pay $ 300 million for a private transatlantic cable to save 5 milliseconds .

Past and future



We have problems not only with the perception of the present. This is surprising, but research shows that our whole concept of the future depends on the ability to extract memories and visualize the past. People who are unable to extract memories from long-term memory cannot imagine the future .

And our memories are extremely subjective and volatile. Here is what Henry Rödinger , who studies metacognition, says :

When we extract the memory from the memory, we simultaneously overwrite it, so the next time when we extract this memory, we get not the original version, but the last rewritten version. Therefore, every time we tell a story, we embellish it more and more, remaining sincerely convinced of the authenticity of the memories.

So, of course, it’s better to never think about cherished memories, so that they always stay fresh. What about short term memory? There are also some oddities. The way we perceive the past tense is somewhat contrary to intuition:

  1. Events in which nothing happened are remembered as short.
  2. Events that were funny and fascinating, but short, are remembered for so long.

To understand this, imagine a “memory store" as a compressed storage. The brain compresses long-lasting events such as a long, monotonous trip, as the memories of all the license plates that you saw along the road will be quite redundant and useless. As a side effect, we later perceive the elapsed time as shorter than it actually is.



Absolute goals of relative perception


So, we do a poor job of maintaining uniform timing. At the same time, we always try to operate with objective numbers, such as those that come from RAIL . This is the performance model introduced by Chrome developers (later replaced by PRPL ):

  • animation target 60fps
  • boot time 1 second
  • 100 ms response time

For a long time we thought that optimal performance is measurable by objective numbers. But let's see what actually happens when we expect the page to load:

  • 100-200 ms - instantly
  • <1 s - immediately (delays are noticeable but tolerable)
  • <5 s - part of the user stream
  • <12 s - attention span

Some of these indicators are quite reliable, but it turns out that this does not concern the concentration of attention: the average fleeting concentration of attention (focused attention can last much longer) in people fell from 12 seconds in 2000 to 8.25 seconds in 2015! Thanks a lot, MTV.

The main thing is context


To date, we have established that we have a shitty built-in clock. But our perceptions and expectations also vary greatly depending on the current context and situation.

Let's say we are waiting for the end of some process, here a simple example would be loading a site. As we learned earlier, the ideal load time can be about 1 second. But, as in everything previous, there is also a catch! Context matters more than you think:

  • Are you at the bus stop?
  • On the run?
  • In a restaurant?
  • At home on the couch?
  • On the beach?

I don’t know about you, but at the bus stop I never wait for the page to load for more than 10 seconds. But if I’m at home and turned on the game console, then I’m more than happy to wait a minute for my game to load. Why? Because I'm already on my couch, I already decided that I will play for 2-3 hours, so the ROI of waiting for 1 minute is more than comparable to the web page of the article, which I wait 10 seconds for the 20 seconds of viewing.



Now let's build another example over time, this time with 5 seconds . Compare two situations:

“It takes 5 seconds to switch channels on the TV”

Generally slow!

“This guy made me a burrito in 5 seconds.”

But it's too fast! He could not make a burrito in 5 seconds. This thing was ready in advance!

Too fast?


Wait a moment. Are we talking about performance and claiming something might be too fast?

In addition to the Burrito example, imagine that you are asking someone a difficult question, and he answers almost instantly. You will doubt that he seriously listened to what you want to say. Sometimes high speed reduces the value of the service :

  • “If something works fast, it should be easy.”
  • “If something is easy, then it should be cheap.”

A longer waiting time can also create some anticipation and is an important dramatic element, especially when creating OMG sensations from text content. So when does the situation begin to develop too quickly? Here are some examples:

Coinstar


Obviously, Coinstar automatic coin counting machines can do this much faster than people believe. Therefore, in order to avoid skepticism, an artificial delay of “calculation” for credibility was added there ( source ).

Locksmiths


Sadly, locksmiths are fined for improving their skills . Better paid apprentices who spend much more time installing the castle. The consumer perceives such a service as more work that costs more money.

Blogger


From the reddit commentary by Karim Mayyan :

In 2004, I attended the “Redesigning Blogger” workshop where Jeff Win of the Adaptive Path and Douglas Bowman of stopdesign.com (now on Twitter) discussed Blogger redesign. Among their observations is that when users clicked “Create a Blog” at the last stage of the installation process, they were confused by how quickly the blog was created. "It's all? Is something wrong? ”They asked such questions. Therefore, an intermediate step was added to the process - the “Create a blog ...” page, which does nothing, but only shows a small rotating gif, waiting a few seconds before redirecting new users to the “Hurray, your blog has been created!” Page. The users have become much more satisfied with the longer process.

We will compress


Armed with all this knowledge, we can now manage time - even without a streaming drive, because we simply influence the perceived expectation. First you need to understand the phases of active and passive waiting.

Active and passive waiting


Waiting feels like waiting with active participation. This is what we call the active phase, and everything else is called the passive phase. In the passive phase, the time in the user's perception is greatly stretched. One way to improve perception is to shorten the passive phase and lengthen the active phase. This is done in the following ways:

  • Proactive Start - Start work before the user understands this.
  • Premature Completion - Show things to the user before they are ready.



Denis parses these two techniques in detail in his articles , so read them later. But I want to go a little further and add three more techniques to our tool kit:

  • Optimistic UI - Show incomplete action as completed.
  • Prediction - Predict the outcome before it occurs.
  • Optical illusion - Sometimes even animations are enough to change the perception of time.

From theory to practice


Anticipatory start


iOS shows animations as they zoom in while the application is loading, which gives the impression of a faster download than it actually is, since the action starts with a proactive start, before the application is ready to be shown. There is also a predictive download : Safari browser preloads pages using links that, in its opinion, you can click (“Top Hits”), and Top Stories Carousel also goes to Google Search. And if you want to score bonus points, you can implement the multi-stage preload process on your website : it is organized in such a way that you can almost always predict the next step while the user is busy with something else. Examples are authorization forms, payment in the online store, or the installation of Service Worker.



Premature termination


Good examples of how to show the completion of a process before it actually happened are lazy loading and buffering of videos . If you show the UI skeleton before showing the content, then the perceived time will be reduced compared to if you download everything at once. Progressive image loading also benefits from this phenomenon. When you click on an online video, it starts playing until the entire video is fully downloaded, creating the illusion of faster downloads.



Optimistic UI


Instagram always pretends to be working . Pressing the Like button always “works”, even if you are temporarily offline. Instagram optimistically promises that the action you take will happen, sooner or later.

One tip for optimistic UI developers: it's only good to lie if you haven't been caught. A little optimistic lies can be a problem if you do not keep your promise. If for some reason you stopped using the device after entering the tunnel, and later from another device you find that none of these likes have passed, then you will feel cheated.

Prediction


Someone may say that prediction is a kind of preemptive start, but here we are not talking about active / passive modes, but rather about removing obstacles like hardware limitations already in the active phase. A great example is a metric called glass time , which describes the delay between how your finger touches the touchscreen and receiving a visual feedback from the screen. Even in the most optimal solutions, the delay is at least 16-32 ms due to a refresh rate of 60 Hz on most consumer screens.

That's why Microsoft (starting with Surface tablets) and Apple (starting with iOS 9.1 and Apple Pencil) have invested heavily in predicting clicks, which is exactly what the name implies: the ability to predict the future position of your finger.

Of course, the use of predictions is limited to situations with a high probability of a positive outcome, but when it works, it looks like magic. To prove the presence of predictions on your Surface, try panning (horizontal shift of the entire image - approx. Per.) With your finger, and then suddenly stop. You should see a tiny rebound / correction.

Optical illusion


Sometimes optical illusions are what you need. In the animation world, a correct change in speed (easing) can dramatically affect how animation is perceived:

  • Ease out (замедление) работает, потому что торможение кажется совершенно естественным, как в реальном мире, а визуальный «вес» переносится на первую половину анимации. На самом деле есть случаи, когда изменение скорости более убедительно и эффективно, чем манипуляция активной/пассивной фазами: инерционная прокрутка (в отличие от традиционной прокрутки) существенно расширяет пассивную фазу, но естественное изменение скорости компенсирует это.
  • Ease in (ускорение) работает, потому что, как показывают исследования, ваше эмоциональное и восприятие последних моментов более длительного действия определяют то, как вы его запомните. Так что если вы пошли на концерт, и он по большей части был так себе, но последняя песня оказалась восхитительной, у вас будут хорошие воспоминания о концерте. Поэтому для анимированного индикатора выполнения длительного процесса до странности приятно видеть, как он ускоряется ближе к концу, заставляя пользователя думать, что весь процесс прошёл быстрее, чем на самом деле.

Everything becomes even more interesting if you carefully look at the progress indicators of the process . Chris Harrison found that an indicator with an accelerating ripple reduces perceived load time more than an indicator with a slowing ripple, and also - it came as a surprise to me - downloading seems faster if the waves on the indicator go from right to left, and not from left to right.

This does not mean that you should add deceptive indicators to all your products. “The best indicator of a process is its absence,” says Luke . For tasks that take less than a few seconds, it is better to prefer the transition effect.

Perceived speed is a problem field not yet fully resolved


The perception of time is an incredibly wide and complex subject, and I did my best to dive deeper than usual into this subject. But some problems are far from a simple solution. Take the case of a web browser that only downloads the current web page after it starts rendering a new page . On the one hand, loading the next page seems faster than it actually is. But the responsiveness suffers when we do not get an immediate reaction to clicking on a link. But if you leave it as it is, then we swap the advantages and disadvantages. So what's the perfect solution? Nobody knows.

Therefore, I challenge you: help even more “hack” the perception of time and offer your own research and practical examples of how to make everything seem fast. And keep in mind when you think about users:

No one cares how fast your site is. The main thing is how fast it seems.

Also popular now: