Web page Progress bar design: About discussion of some experiences after loading loading

Article Description: Loading, let irritability less.

A while ago, received an app Chettu to make a load of the circular progress bar task, see that small progress bar turn, I thoughtfully ... At the same time, an Impressionist to do the control design of the students have recently made a revision, the control landing takes some time to see him on the Loading loading bar optimization, and then the exchange together. As a newcomer who has just graduated, please allow me to share some ideas about the discussion of loading loading ...

This is an impetuous era, long heard such complaints "good slow!" "Wait Till Death!" ", every time I see the circle, or the" Loading ... "the back of the three points constantly flashing, the mind is always inexplicable anxiety, when the mood is like the following picture, I do not know if you have the same feeling ...

Some people count that the maximum waiting time a user can endure is about 6-8 seconds. 8 seconds is a critical value, and if the page loads more than 8 seconds, it's likely that most visitors will eventually leave the page. Unless he must open that page.

The above three kinds is the common loading way, if is me, I would like to see the third kind of progress bar, because I really do not know how long the first circle to calculate load success, also do not know the second point point to se years.

But if the interface does not see anything other than "load," can it distract the user? For example, when we are in the bank line, if we do not look at the hands of the number card and station board, although know when they will be round, but still will be bored and irritable. Some of the publicity sheets in the bank are doing a good job: for example, a variety of banking products, if you are not careful to see the appropriate investment, you will be excited, feel that this waiting time to bring their own unexpected harvest, even if they do not get the information they want, will not feel so boring. And for example, video in the process of buffering, always put a piece of advertising, I have been weak weak drops think this good chicken, reluctant to give up watching the video, but also endure this load time ads. But if the ad is good, it's not annoying at all, even in the comments to find the address to load ads. The loading of the Web page takes on the role of the leaflet and the loaded advertisement.

Local load on the page can often see the first circle of the figure, but each time to see the circle is similar, if the form of a circle, may feel that "this circle and other seems not the same", through curiosity to reduce the anxiety of waiting.

Below I looked for some to change the circle of the shape, is not more some new ideas?

Reduce user anxiety by giving a promise to indicate how long they will be loaded, telling the current progress (as a percentage of the process), and giving a reassurance. For example, the following ways:

One of the following progress bars has a different design:

Both of these deterministic progress bars indicate the current process, but the difference is that the first kind of progress bar content is pure color, the second progress bar content has animation effect, if this progress bar is suddenly stopped at some point, this time will cause the user to be troubled, in the end is the card dead or this section of the load relatively slow? If it is the next progress bar at a glance, if the card dies, the animation effect is gone, if there is still animation effect, it means that only this section of the load is relatively slow.

If the progress bar to do some more deformation, not only tells the user the current loading process, there is no appreciation of the meaning:

PS: On the right is Sogou laboratory logo, but this idea made loading is also very good ah, but also strengthen the brand impression.

In addition to the progress bar deformation, you can also start from the copy, for example, the following is the "Next Kitchen" app loading page, although only a short sentence "Who came from the mountains and lakes and the sea is confined to the day and night the kitchen and love" although only flashed a second, this does not give users the feeling of irritability, but feel that this application has a special temperament , not only deepened the impression, but also brought goodwill.

There is a trailer in general before the film is released to attract viewers to the cinema. Reveal the tip of the iceberg, to arouse the user's curiosity, but also told the user about the situation.

Pictured above is Qzone's popular app game-the landing page of the fishing tycoon, the loading's progress is designed to be like a torpedo's journey, not only telling the player which progress to load now, but also the small splash of the tail that seems to be saying I've been trying to load. In addition, this loading speed is a bit slow, the above also has the scene diagram introduction, thus lets the player have more understanding. This pop-up window shows that zooming in on pictures and multiple views is also the approach used by many top online retailers. Although the load is a bit slow, it gives the player the hint that it is a very worthwhile wait.

In addition, if you want to load more things, then the load progress will certainly be slower, showing a loading bar has been stuck in the case, in this case, we can divide the progress bar several times to load the progress bar to appease the user's restless heart. But each load is best equipped with text display now in the loaded content, or time and again the progress bar will let users panic "this is how many times to load is the head!" "But if, as in the following, clearly told the user in the loaded content, even if the user is a little annoyed" how there are so many to load "but each time relatively fast loading, and each load is justified, so that users feel that this load is still necessary."

To reduce the user's anxiety, "enhance the user's expectations" is also a good way, in addition to their own website expectations, there is the "progress bar itself" expectations.

If there is a different color in the percentage, then the user may be waiting to think: The next second will be what color, thus, it seems not so urgent.

The villain's expression is very rich, but it seems to represent the user's mood, watching him move and have a different mentality, like watching a fun gif.

This is the new version of the Indian-made landing, while waiting to tell customers what products can be used to the production room, not only conveyed the brand information, but also let users in the waiting time is not so boring.

In addition, if this is a multiple landing site, so regardless of the fishing tycoon's scene display, or the YXP steps of the process show, it seems that these shows only in the first time will play a more special role, but if each time with different information to the lander, then the user every time a small surprise, For example, every time there are random tips (the following four times loading):

Although loading is a small detail, it is also possible to inadvertently let users drain. These are some of my small experience, although the collection of these design methods can slow down some users are impatient to wait for emotion, but the real can slow down the way to load faster; Chic design can be a palliative, loading speed is the root of the cure. Displaying progress in the Load page, giving promises, adding information or humorous content can make users less aware of the time that "awareness" is loading. Of course, irritability is a kind of mood, loading is the fuse of irritability, but if you keep a good mood every day, then the patience to treat waiting will also greatly increase Oh ^.^

Finally, send a gadget that can generate load loops, and hopefully it will help you:

Http://preloaders.net/en/circular