Games over time: speeding up the application at the level of perception

    A recent study from Google, in collaboration with Awwwards, found that speed is currently at the top of the UX hierarchy. This is unlikely to surprise anyone: the pace of everyday life is increasing, mobile solutions tend to integrate into it as organically as possible - all this sets a certain level of expectations. Users expect minimal downtime.



    In this article, we will not dwell on technical methods to honestly speed up the loading of a site and processing operations. Instead, we dissect the temporal aspect of the user experience: see what is really behind the words “long” and “fast”, how and why the perception of time is distorted, and what UX practices exist to control expectations.

    Let's start by defining the concepts. What is generally meant by “fast” loading and where does the line between tolerated and unacceptable speed go? According to a study by Google and Awwwards, the rating scale for waiting time for users looks like this:

    • 200 milliseconds - The action is rated as instant
    • 1 second - A sense of continuity is not broken
    • 5 seconds - The operation is perceived as part of the overall chain
    • 8 seconds - Attention weakens, user drops out of the process

    Here, however, two reservations must be made. Firstly, the above scheme becomes valid already in the course of working with the site or application. At the start, the credit of patience, which the user is ready to allocate, is significantly lower - most of them will wait for loading no more than three seconds. Secondly, the absolute values ​​are given on the scale, while the subjective perception of time can distort the estimate. In general, users tend to overestimate the length of their waiting time in their minds - the estimated values ​​are somewhere around 80 milliseconds higher than the real ones. This perceptual gap can increase under the influence of several factors:

    1. Demographics of the audience . According to polls, the most categorical in terms of time is a group of users in the range of 18-24 years. Older generations are much more tolerant: after the turn of 25 years, the likelihood that a visitor will rate the site as fast increases by almost 50%.
    2. Interaction terms . If the scenarios for using the application or site involve work from home, in a relaxed atmosphere, then you can relax. If people will turn to the product mainly on the go (for example, view maps or track the movement of vehicles), be prepared for the fact that their exactingness will increase by the same 50%.
    3. The psychological state of the user . The perception of time is greatly influenced by the internal state: in situations of stress, mental congestion or severe anxiety, time begins to flow for us almost twice as fast.

    So, the requirements for site speed, multiplied by psychological and situational particulars, are quite stringent. Statistics show that from a technical point of view, they are quite realistic (70% of the sites examined in the study loaded in less than 4 seconds, while one third of them were enough for one), but those who work with voluminous, heavy content or many scripts, may run into problems.

    In this case, comes to the rescue ... all the same specifics of perception of time. The features of our thinking make it possible to build the UX in such a way as to hide or compensate for the prolonged expectation. The entire set of recommendations on this subject can be summarized in three basic principles, in accordance with which the overall emotional picture of the interaction with the site or application is formed.

    Principle # 1: The sense of time is dulled when the user has something to concentrate on


    There are two types of waiting - active and passive. The psychological difference between the two can be illustrated by an instructive example from an airport in Houston. The airport administration faced a usual problem: customers were annoyed by the need to stand idle for a long time (up to seven minutes) near the conveyor belt while waiting for baggage. Optimization of work processes did not give a result, and as a result, a very elegant way out was found - the layout was changed so that the distance from the terminal to the landing strip increased. The waiting period has not been reduced, but now people spent a significant part of it in motion. Miraculously, the flow of complaints ceased: time no longer seemed to customers wasted, simply because they were busy with something.

    Similarly, site visitors are much more sensitive to passive waiting (that is, contemplating a blank page) than to waiting, spiced with at least some mental activity, even if it is objectively useless. How can this be taken advantage of?

    Some developers make a separate entertainment event out of expectation, up to mini-games that can be cut on the loading screen while the site is “thinking”. However, animations are used much more widely, however - the best option in terms of the ratio of labor to effect. Animations are visually attractive and dynamic, which allows them to keep the user's attention for a couple of precious seconds and provide a smooth transition to the main content.



    Animations you can watch for a long time

    The Google Team provides the following guidelines for creating animations:

    • Optimum speed - no more than 60 frames per second; each frame should render in about 16 milliseconds
    • The optimal duration is 200-500 milliseconds. In animations that use bouncing effects, the elasctic rate of time rises to 800-1200 milliseconds.
    • Animations where the speed is linear look less natural than those where the movement gradually accelerates or slows down.
    • Slowing animations create a feeling of quick response - this can be very useful when interacting with interface elements.
    • Accelerating animations are best avoided if waiting times are long.
    • CSS animations are suitable for simple, short transitions. More complex animations and transformation effects are more convenient to do on Javascript.

    Another approach is not to distract the visitor to the beauty, but to give out the content right away, just in small portions. In this case, the download begins with the most basic elements that do not require much time, while the more “heavy” ones are loaded in the next stages. This also eliminates the effect of a blank screen: even if the components of the first echelon are not too informative, the user can still quench cognitive hunger for a while, until something more significant arrives.

    As substitute elements may be:

    • Page skeleton: markup showing which blocks (text, headings, images) are loading and where they will be located.
    • Pixelized images or images of low quality, which are gradually “clarifying before the eyes” of the user - the so-called progressive download.
    • Metadata that tells the general essence of the loaded item.
    • The previous page or its individual components. Experts recommend borrowing repeating elements to the maximum - firstly, it makes the transition smoother, and secondly, this is content with which you can continue to interact.




    Facebook offers page skeleton as a lightweight spoiler

    Principle 2: Download is considered completed after the successful start of interaction


    In a study , UIE discovered an entertaining illustration of this principle. At the request of the experimenters, respondents evaluated the speed of sites, and the vast majority, comparing sites Amazon and About.com, gave priority to Amazon. For reference: the average load time for About.com was then about 8 seconds, and the average load time for Amazon was about 36 seconds. The explanation was simple: during the interaction, users simply did not suspect that Amazon was not fully loaded. The functionality they needed became available in seconds, and they no longer paid attention to background processes.

    Hence the conclusion: the sooner the user can start the desired operation, the less important is the total load time. By breaking the load into several stages according to a pragmatic sign, we create the illusion of speed. You can do this in various ways:

    Download "on-screen . " In other words, only what will be visible on the screen immediately after the transition is loaded in the first place. Content below this line is left for later. Naturally, this method only works if the top screen is informatively saturated and the user does not want to scroll further for some time. For example, it is very popular on the pages with goods in online stores, where the first positions usually successfully hold attention while the system loads the rest of the materials.

    Preload . Everything is transparent here: while the user is working with the current page, the system in the background loads everything that may be needed when he opens the next one. Accordingly, by the time of the request, it will be done enough to provide an “instant” transition. This method works well on linear, predictable sections of user travel — for example, when filling out multi-page forms or on the login screen.

    Upbeat design. In this case, it only seems to the user that he has successfully completed the operation - the system gives the appropriate status until its processing (and sometimes even before) begins, literally milliseconds after the click. For example, you can turn to social networks like Twitter and Instagram, and remember how deceptively instantly they allow you to like posts. Such optimism is fraught with a certain risk - there is always a chance that something will go wrong. Silence in such cases leads to unpleasant discoveries and disappointments, therefore, errors should be reported ex post, even if this creates a contradictory impression.

    Principle 3: The user is more tolerant of downtime when there is feedback


    If something in the download process works for us, then this is the effect of sunk costs. After you have already spent some time working with the site, you won’t leave just because the next step takes too much time. However, there is one caveat: at some point, the user will inevitably doubt that the protracted operation will in principle reach the end. The suspicion that something is not working and the journey has reached an impasse prompts you to close the page much more than just impatience.

    Accordingly, this important point should be taken into account when designing transition states and loading windows - the user should always be sure that everything is going according to plan. The following rules may help:

    • Buttons and other active elements should have a clear marking of the current state and display any changes immediately. Many mobile browsers automatically register a delay of 300-350 milliseconds until a response is returned after a tap - it’s better to get rid of it by writing in head: meta name = ”viewport” content = ”width = device-width”
    • Google strongly recommends that you maximize the use of micro-interactions throughout the user's work with the site, including minor actions within a single page (adding to favorites, sending text via a contact form).
    • Animated elements work better than static ones: they entertain the user and create a sense of dynamism.
    • Spinner, a common type of animation for standby mode, is good because it intelligibly conveys the status of "in progress", but poor in its lack of information. Experts recommend using it only at very short distances - definitely no more than ten seconds. If possible, you should also strive to ensure that the animation does not visually block the rest of the available content. For example, when sending a message, you can restrict yourself to a small spinner next to the input field, rather than positioning it in the center, darkening the page.
    • A progress indicator is the optimal feedback format: it makes it clear that the process is running and allows you to track how much time is left until it is completed. However, it is important not to give in to the temptation to raise expectations: the majority of visitors cannot tolerate the “99 percent damnation” at the genetic level. At a minimum, this will cause severe irritation and reduce the likelihood of a return.

    Accordingly, the total downtime should be estimated honestly, without overcoming the first half of the indicator much faster than the second. The most common recommendation is to keep the pace steady and prevent stops in filling the field: they, again, create the feeling that the process is interrupted and may not resume. If you wish, you can act from the opposite: to start filling slowly and gain speed as you move - this will be a pleasant surprise for users.


    A flawless status indicator

    If you go even deeper into the rabbit hole, there are several innocuous tricks that allow you to visually speed up the filling process, which, in turn, changes the perception of time, making the application seem faster ... For example, unlike spinners, it is better to make progress indicators bigger - so it’s easier to observe movement on them, which enhances the feeling of continuity. The stripes also create the illusion of speed if they are tilted against the direction of movement.

    In general, expectations management practices overlap with trends prevailing in design in recent years: dynamic, interactive interfaces, smooth transitions, elements of “enthusiasm” in UX. Perhaps this was to be expected - a sense of speed and continuity is sewn into modern aesthetics at a basic level. Good luck in the game ahead of schedule!

    Also popular now: