Loading feedback can not be neglected in practical design

Usability studies show that users can be aware of the response time over a second.
Although in the feedback system, when the user needs to wait, the better solution is to adopt a deterministic progress bar. But for some short time consuming, and the user's bandwidth is the main factor, but use loading this low cost implementation feedback.

The historical origins of the loading icon have been impossible to elaborate (it is rumored that Apple was the first to use), but its dynamic effect, in the visual is just a repeat cycle of "Hot Wheels." Very suitable for the progress of uncertain waiting time feedback.

The primary role of loading is to provide feedback to the user to represent the current state, and to make the execution and completion of the user's commands smoother. From this point of view, it and a lot of mobile feedback is not much different, such as the MAC system window to minimize the progressive animation.

The loading icon is generated only in Web applications, but is less used in the client, because the mouse hand type can replace its work.

But compared to the client, the web side of the loading feedback more controllable, more creative. as follows:

So in the design, how to place the loading icon, also should have the composition. But regardless of placement, there is a rule: make sure that users can notice.

1. Near-click Area

Proximity to the click area can give your loading feedback the most direct presentation, and is most conducive to being noticed. This is good feedback if you can match the button's enabled and disabled state switching.

2. At the top of the content refresh area

When the user chooses to refresh the contents of a block within the page, the visual focus will also focus on this, if the loading feedback is not suitable for placing in the click Area, then put it in the content refresh area of the upper level, is also a very intuitive feedback. such as QQ mailbox broadcast comments Expand the area:

However, it should be noted that loading feedback should not be used in modal form, the modal form will cause the user to wait for loading to complete and not to perform other operations, but also may cause loss to the user.

As shown above, if this loading feedback is modal, when it appears, you will not be able to click on the other parts of the page, in case of unlucky, this time your network disconnected, this hard to write the log, you may never find back . (Note: The picture is Qzone publish the log screenshot, its loading feedback is not modal form)

3. Fixed area

Fixed area rendering, preferably in a location in the browser window (to ensure that the user can easily notice), rather than fixed in a page location. Like Gmail, loading feedback is always in the top position of the browser window.

But also remember, do not put loading feedback from the visual focus too far. It's hard to notice.

Although loading feedback is a small part, but it can give users, but the system visibility of the effective improvement, in the ordinary design, need to pay attention to the loading feedback design.

But loading feedback is not enough to tell the user exactly what time to wait. Just like the "Wait a moment" that was told in a customer service call. Even so we can still do better, like Gmail.

When the user loading for about 10 seconds, if the system is still in operation, then Gmail will automatically modify the loading tag to still Working, clearly inform the user, may need to wait for some time.

Loading feedback can not be neglected in the actual design, especially when the user submits the form, loading feedback and the chain state change scene of each control. Ignoring its consequences, will give users a serious waiting for the feeling of anxiety, to bring losses to users.

So, please design the loading feedback of your product well.