How to eliminate the negative effect of long loading times using progress indicators? Preloaders - generator of animated GIF or PNG preloaders

Displaying system state is one of the top ten fundamental usability standards, remaining one of the most important and universal principles of UI design.

Progress indicators are implemented to provide timely feedback about the functioning of the system/interface. According to Norman's interaction theory, these elements should also help users evaluate the state of the system.

One of the most frequently used forms of feedback on the operation of the system is an animated progress indicator - this element displays the load on the system/resource when processing information or loading data.

Today we bring to your attention a translation of an article by Katie Sherwin, a usability specialist at NNG (Nielsen-Norman Group, Nielsen-Norman Group), in which she talked about various types indicators of progress and provided recommendations for their use.

The Power of Feedback - Make Users Feel Like You're Listening to Them

Progress indicators are not one of the latest, but their implementation is guaranteed to improve the user experience - by receiving feedback on their actions, users are convinced that the system has accepted their request and is processing it.

Unfortunately, most sites and systems do not display information about the status of a process until it completes - this irritates users because they do not know whether their command is being executed or whether the system is running at all. Moreover, lack of awareness of the system status causes repeat orders and many unnecessary clicks.

High download speed is general requirement for all resources, but sometimes servers process data longer than usual, and this cannot be corrected even by upgrading them. In such cases, consumers should be informed that the system is working and their command is being followed. If the download takes more than 10 seconds, it is recommended to indicate the approximate time until it completes - otherwise, many users simply will not wait.

As an example of system status feedback, Katie shared this call with the California Department of Motor Vehicles (DMV):

• Predictably, Sherwin was informed that all operators were busy.
• A few minutes later a message was turned on indicating that Katie was still on the line.
• The next entry stated that the approximate wait time was 15-20 minutes - this allowed the NNG specialist to go about his business without fear of missing the line.
• After 15 minutes, Katie was asked to leave contact number so that the operator can contact her when he is free. Moreover, Sherwin was assured that she would not lose her place in line.

The DMV's feedback tools made waiting to be connected to an operator easier—Katie was not only kept informed of the status of her call, but also offered a convenient alternative to waiting. By the way, implementation similar system retention is much cheaper than staff expansion.

Loading indicators inform users that the system is taking more time to complete a command (which could be downloading a file, installing an update, etc.) and display the estimated wait time.

To convey the properties of these elements clearly, Katie described their benefits, drawing a parallel with a call to the California Department of Transportation:

• Indicators eliminate user doubts about the correct operation of the system by displaying its status - this was achieved using a message about the busyness of operators.
• These elements provide an object to watch that makes waiting easier—when a call is on hold, this is music.
• They encourage users to wait by displaying a process—Sherwin was informed that all department representatives were busy and that the operator would be free within 15 minutes, so she was willing to wait.
• Progress indicators weaken the sense of time, since users, concentrating on feedback, pay less attention to the waiting process itself - while listening to music, the NNG specialist forgot how tedious it is to wait for a connection with an operator.

The purpose of one study conducted at the University of Nebraska-Lincoln was to determine the amount of time users are willing to wait for a website to load. One group of respondents was presented with a version of the page with progress indicators (an animated loading bar), and the second - without.

As a result, those who were shown the web page with the indicator were more satisfied with the user experience and waited on average 3 times longer than those who were not shown the feedback element.

Animated loading indicators

Despite the fact that the speed of digital connections increases every year, the problem of slow loading resources is still relevant. And as you know, low performance Websites irritate visitors and often cause them to leave.

The willingness of users to wait for downloads is determined by several factors:

• Urgency and complexity of the purpose of the visit.
• The context of using the resource is that a visitor in a hurry to download an important project is more likely to leave the resource than someone who is on a social network to kill time.
• Meets expectations based on previous experience interacting with a resource or performing a similar process.

Marketers cannot influence these factors, but by following the recommendations below, they can significantly increase users' willingness to wait:

Always Display Some Feedback

Since the wait begins immediately after completing an action (for example, clicking on a CTA element), the system must immediately indicate that the request has been accepted and is being processed: for example, the color of the button that the user clicked may change, or a loading bar may appear.

The static nature of the interface after sending a request is perceived by many users as an error, so they often try to execute the command again, which, in turn, can lead to negative consequences.

Display the progress of any process taking longer than 1 second

Users' attention begins to wander after a few seconds of waiting, which can lead to them leaving. Therefore, to display the progress of processes whose duration is longer than a second, you should use cyclic animation or a percentage indicator.

A graphic with a looping animation indicates that the system is running, but does not provide information about the estimated loading time.

Such elements should be used to display the status of processes that last from 2 to 10 seconds. If you use looping animation for requests that take less than a second to process, it will cause users to be confused by the sudden appearance and disappearance of an incomprehensible element.

From a web development perspective, it's tempting to use looping animation in all your indicators because it doesn't require calculating loading times. However, it is not recommended to display the processing of processes lasting more than 10 seconds with looping animation - the lack of progress information will encourage users to leave. Moreover, according to this graphic element it is impossible to determine whether the system is working, which also increases the possibility of digital interaction being interrupted.

A participant in one usability test waited more than 15 minutes for an online publication's page to load, and ultimately it turned out that an error had occurred and the application needed to be restarted. It's obvious that real user won't wait that long.

Adding to indicators text symbols(e.g. "Load Comments") can also increase their effectiveness.

It is worth noting that cyclic animation is not suitable for displaying the progress of downloading data from servers, since the quality of the connection, which affects the speed of work, is beyond the control of the developers. According to standards, data should load no longer than 2 seconds, but this figure is not always achievable.

Percentage progress indicators are the most informative type of animated feedback. These elements allow users to estimate approximate wait times (giving them the opportunity to decide whether they will wait or not), eliminate as much uncertainty as possible regarding processing times, and reduce the sense of time.

Circles and horizontal columns, which fill from 0 to 100%, are examples of this type of progress indicator.

As a general rule, percentage indicators should be used for processes lasting 10 seconds or more - visual element, reflecting the gradual completion of processing, calms and encourages anticipation. However, these elements can be used to display the status of processes that require less than 10 seconds, if they involve file or registry processing, since visitors understand that the system is working with a certain number of entries.

It is recommended to add text to animated percentage indicators (for example, “Files downloaded: 17 out of 50”), and to indicators of long processes to add a cancel button in case the user does not want to wait. By the way, the absence of an undo element deprives users of control over the system, which harms the user experience.

Percentage indicators provide insight into the duration of the process, which makes changes in the rate of progress more noticeable, which in turn has a positive impact on the user experience. However, users are annoyed if the indicator fills too quickly and then stops with a few percent left to complete - this reduces positive influence no feedback.

Many designers and developers who implement load indicators are faced with the problem of calculating the speed of processes. To cope with this task, follow these recommendations:

• Set the animation so that the indicator begins to fill slowly, and as it gets closer to loading, the speed increases - this will not create high expectations for site performance among visitors. It is always better to exceed customer expectations than to disappoint them.
• It’s worth noting that this recommendation only applies to loading indicators—studies have shown that survey progress indicators, whose completion rate decreases as they progress, lower the bounce rate.
• Please indicate approximate exact time Waiting times - in some cases, the download will likely take longer than the specified time, which will negatively impact consumer confidence.
• Simple text like “This will take about a minute” or “About 3 minutes left” is enough to inform and retain users. Also add a few extra seconds to the specified value in case of unexpected delays.
• Instead of displaying overall progress, in some cases it is optimal to display the number of steps completed and remaining - visitors will not know exactly how long it will take to complete a particular step, but the number of steps will help them get a rough idea and will attract them to complete the process or wait for it to finish.

Static indicators, such as the text “Please wait, results are loading” without any animated elements, are ineffective. Such indicators do not display information about the progress of the system and the state of its operation, therefore they should be replaced with dynamic ones.

The worst way to prevent accidental reorders and unnecessary clicks is to add a warning to your CTA button that says, “Re-clicking may result in a repeat order.” First, any threats are contrary to basic standards of positive user experience, and secondly, such warnings are simply ineffective, since they are rarely paid attention to.

Warning text: “Do not double-click!”

During the study “Children in World Wide Web” (Children on the Web), NNG specialists encountered a lot of interactive tools and games that took a long time to load.

To make the loading screen fun and engaging, designers often include video content and mini-games to keep users occupied while waiting. However, such modifications do more harm than good, since children often do not distinguish real game from the download process and do not understand why the interaction was interrupted.

Katie provided some tips on how to keep young users interested without distracting them from the main activity:

• Always use visible percentage indicators to let children know that the system is loading. Children, like adults, want to know if the system works and how long it will take to boot.
• Make sure that the in-between animation does not obscure the indicator or look like gameplay.
• Use exciting and simple animations, relevant to the main activity - these are the most effective for maintaining attention and raising expectations.

Conclusion

Providing feedback is one of the guiding requirements of a positive user experience. By openly and transparently displaying the time it takes to load, designers can eliminate user confusion about system status and increase the amount of time they are willing to spend waiting.

Cyclic indicators should be used for processes lasting 2-9 seconds, and percentage indicators for delays lasting more than 10 seconds. But since it is not always possible to estimate the loading time, you should increase the display delay for processes that require more than 10 seconds. The higher the load time instability, the lower the minimum threshold for showing accurate progress should be.

Effective progress indicators keep users waiting and positively influence their impression of the site/app.

Imagine the situation: you are in a store trying to find a product and ask the consultant where it is. In response to this, the consultant simply stands still without taking any action. You will most likely feel disappointed and leave. Users who watch the “spinner” loading indicator on their monitor for too long feel the same way.

Spinners are not for long loading

Spinners do not tell the user how long the loading process will take. If you use this indicator for too long a process, users will start to think that something has gone wrong and there is a problem with the application. Lack of information creates uncertainty that visitors will interpret in the worst possible way.

Users will decide that the download will take too long, and this, as you can imagine, will not brighten up their expectations. Impatience will build, and eventually the visitor will simply press the “back” button or exit the application altogether.

Four Second Rule

If you want users to stay in your app, don't use spinners on load times longer than four minutes. Scientific research has shown that users' maximum wait tolerance is four minutes. This means that after four seconds, behavioral intentions change.

When to use a spinner

The user expects an immediate response from the application. The immediate reaction lasts less than a second. If the user doesn't see any reaction for more than a second, they start to worry.

If you have a process that lasts more than a second, use a spinner. This will let users know that the app is loading, which will ease their wait and worry.

Loading bar for long processes

If the process takes more than four seconds, you need to use the loading bar. In this case, users tend to be more tolerant when waiting.

This is because you give a clear understanding of how long the wait will take. The loading bar allows users to see progress, which keeps them on track as they wait. If they only see the spinner, then they cannot observe any progress, and generally cannot be sure that the action is actually happening. The visitor simply has no incentive to wait.

How to design a loading bar

The progress bar should show users how much progress is being made. Animation should occur from left to right at a gradual and consistent pace. If the animation stops too long for a long time, users begin to think that the process has stalled and do not want to wait any longer.

You also need to add a numerical assessment of progress. If the process takes less than a minute, display the download as a percentage of the download or the number of files downloaded. Inform users about exactly what activity the application performs.

If the download takes more than a minute, you must provide information about how long the wait will take. This will give users an understanding that the process will take longer than usual. Specify the remaining wait time in minutes so that the person can switch to something else and return to the application within the specified period.

Don't overuse spinners

Many designers have the habit of using spinners in any loading process. But if you use them during long loading times, it will lead to user frustration. Avoid this by using loading strips when necessary.

The loading bar makes the user more tolerant in his waiting process. They don't mind waiting when they understand that the application is working for them at that moment. But if this process takes longer than usual, visitors need visual feedback. The lack of information about how long to wait provokes impatience and users simply leave.

Translation – Duty room

Animated preloaders are used by developers when loading web applications and web page data via Ajax. Sometimes you want to use something more original instead of a standard boring picture. If you need animated GIF or PNG (APNG) preloader (indicator) loading loading.gif I advise you to pay attention to the Internet service. Previously, you had to make a lot of effort to find suitable image files; in principle, there are not many such services, so the emergence of another project is certainly a plus for designers and developers.

So, let's look at Preloaders in more detail - free generator GIF and APNG preloaders displaying the loading process. Moreover, the generator is as simple as possible and very convenient. Immediately getting to the page, you will see that all downloadable pictures are conveniently sorted into categories - 3D, emoticons, zodiac signs, people, religious signs, astronomy, etc. You may even find the category " Social media" In today's times, the thing is almost irreplaceable. By the way, in addition to the categories, you can see the most popular animated pictures or the latest 10.

Once you have decided on the category and the main loader (the choice of which is available from the corresponding drop-down list), you can begin to customize it. You can define:

• Image type (format - gif or apng);
• The color of the bootloader/background itself (selected using a convenient “palette”), as well as transparency;
• Animation speed;
• Image size (including 128x128 pixel resolution supported);
• Some additional “effects” (color inversion, background reflection, reverse animation, etc.).

A unique feature of the Preloaders.net service is that if you don’t find the required loader in the database, you can order it! To do this, you need to go to the “Order new” section and fill out the simplest form:

For novice users it will be useful detailed instructions by the Preloaders.net generator, which you can find. In principle, there is nothing more to add, since the service is as simple as possible; you can make the necessary animated preloaders with its help quickly and easily. Thanks to our developers for this useful service, everyone who programs in Ajax should appreciate it.

This stylish arrow display serves to present data on the operation of servers. It displays the CPU load percentage, random access memory And hard drives computer. Data is displayed using three analogue pointer-type instruments - voltmeters direct current at 10 V (or any suitable ones; choosing a resistance to fully deflect the needle is not a problem). Responsible for control over the operation of the system Raspberry module Pi Zero along with a system consisting of two operational amplifiers LM358, powered by a boost converter 5>12 V (ready module from Ali).

Electrical diagram

In order to connect voltmeters to the outputs, you need simple program, written in Python language, which generates three PWM signals, proportional to the load of this element controlled server. Op-amp circuit - analog converter PWM voltage signal.

The DAC converts the 3.3 V PWM signal coming from the Raspberry Pi into a voltage ranging from 0 to 10 V. analog outputs- 1, 2 and 3 - are connected directly to the sensors on the panel, and the PWM inputs - 1, 2 and 3, are connected to the controller.

Indicator design

The most difficult thing here is not to assemble the diagram - but to print beautiful 3 scales. Here is a drawing you can use for your device.

Then cut it out and paste it on top of the original dial gauge scale.

Type of finished device

The indicators are mounted on a plate painted gray. You can build it into the computer case, or you can arrange it in the form of a separate box. The entire system is installed in compact body, so there's nothing outside but dial indicators can not see.

Everything feeds on one total voltage 5 Volts from the PC power supply. On the one hand, it powers the Raspberry Pi Zero, and on the other, through a 12 Volt converter, it powers an analog circuit that generates a control voltage from 0 to 10 V for switchmen. The circuit diagram and firmware of the MK are not given - since this is a separate story...