Games with time: accelerate the application at the level of perception
A recent study from Google in collaboration with Awwwards found that the speed at the moment occupies the highest place in the UX hierarchy. It's unlikely that anyone will be surprised: the pace of everyday life increases, mobile solutions tend to integrate into it as organic as possible - all this sets a certain level of expectations. Users expect minimal downtime.
In this article, we will not dwell on technical ways to honestly speed up site loading and processing operations. Instead, we will dissect the temporal aspect of the user experience: let's see what really stands behind the words "long" and "fast", how and why the perception of time is distorted and what UX practices exist for managing expectations.
company UIE discovered an interesting illustration of this principle. Respondents at the request of the experimenters assessed the speed of the sites, and the vast majority, comparing the sites Amazon and About.com, gave primacy to Amazon. For reference: the average download time for the About.com site was then about 8 seconds, the average download time of the Amazon site is about 36 seconds. This was explained simply: during the interaction, users simply did not suspect that Amazon was not fully loaded. The functionality they needed became available in a matter of seconds, and they no longer paid attention to background processes.
Hence the conclusion: the earlier the user can start the desired operation, the less the value has the total download time. By splitting the load into several stages on a pragmatic basis, we create the illusion of speed. You can do this in different ways:
Download "within the screen" . In other words, in the first place only what is displayed on the screen immediately after the transition is loaded. The content below this line is left for later. Naturally, this method works only if the upper screen is informatively saturated and the user will not have a desire to scroll for a while. For example, it is very popular on pages with products in online stores, where the first positions usually successfully hold attention while the system loads the rest of the materials.
Preloading . Here everything is transparent: 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 page. Accordingly, by the time of the request, there will already be enough to provide an "instantaneous" transition. This method works well on linear, predictable sections of the user's journey - for example, when filling out multi-page forms or on the login screen.
Optimistic design . In this case, the user only seems to have successfully performed the operation - the system issues the appropriate status before the completion (and sometimes even before the beginning) of its processing, literally in milliseconds after the click. For example, you can turn to social networks like Twitter and Instagram, and remember how deceptively they instantly allow you to keep your posts. Such optimism is associated with a known risk - there is always a possibility that something will go wrong. Silence in such cases leads to unpleasant discoveries and disappointments, therefore it is necessary to inform about the arising errors after the fact, let it create a contradictory impression.
Principle # 3: The user is more tolerant of downtime when there is a feedback
If something is in the process of downloading and works for us, then this is the effect of sunk costs. After having already spent some time working with the site, you will not leave just because the next step takes too much time. However, there is one nuance: at some point the user will inevitably have doubts that the protracted operation will in principle come to an end. Suspicion that something is not working and the journey has reached a dead end, prompts closing the page much more than just impatience.
Accordingly, this important point should be taken into account when designing transitional states and loading windows - the user should always be sure that everything is going according to plan. The following rules can help in this:
Buttons and other active elements must have a clear marking of the current state and display any changes at once. Many mobile browsers automatically set a delay of 300-350 milliseconds before issuing a response after tapping - it's better to get rid of it by writing in head: meta name = "viewport" content = "width = device-width"
Google strongly recommends that you use micro-scripts as much as possible throughout the user's work with the site, including small-scale actions within a single page (adding to favorites, sending text via a form of communication).
Animated elements work better than static ones: they entertain the user and create a sense of dynamism.
Spinner, a common type of animation for the standby mode, is good in that it intelligibly transmits the status "in the process," but is poor in its lack of informativeness. Experts recommend using it only at very short distances - definitely not more than ten seconds. If possible, you should also try to ensure that the animation does not block visually 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 center it, darkening the page.
The 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 before its completion. However, it is important not to succumb to the temptation to overstate expectations: the majority of visitors do not tolerate the "curse of 99 percent" at the genetic level. At a minimum, this will cause severe irritation and reduce the likelihood of return.
Accordingly, the total downtime should be evaluated fairly, without overcoming the first half of the indicator much faster than the second. The most common recommendation is to keep the pace smooth and do not allow stops in filling the field: they, again, create the feeling that the process is interrupted and may not resume. If desired, you can also act from the opposite: start filling slowly and gain speed as you move - this will be a pleasant surprise for users.
Uncirculated status indicator
If you move even deeper into the rabbit rate, there are several innocuous tricks that allow you to visually accelerate the filling process, which in turn changes the perception of time, making the application seem faster For example, unlike spinners, progress indicators are better to do larger - so on they are easier to observe movement, which increases the sense of continuity. Strips, too, create the illusion of speed, if they are tilted against the direction of movement.
In general, the expectations management practices largely overlap with the trends that have prevailed in design in recent years: dynamic, interactive interfaces, smooth transitions, elements of "delight" in UX. Perhaps, this should be expected - a sense of speed and neprizrynosti sewed into modern aesthetics at a basic level. Good luck in the game ahead!
It may be interesting