2 ways the app loads the interaction: the current window enters a new window

The loading of the app window, such as the loading of the list window into the Details page, is an easily overlooked problem. Why? There are many reasons: 1. Everyone (including designers) are accustomed to the web side first into the new page, after waiting for the loading of the way, the app is directly used; 2. When the network is good, the two kinds of loading methods are not much different from the experience. 3. Designers, product managers often feel that loading is the engineer should consider, but unless the project time is sufficient, and encountered very sense engineers will be considered in advance loading.

However, in many cases the benefits of early loading are very obvious, Gmail,alipay, iOS Native SMS are also silently used. Here we will resolve the next two loading modes:

Usually two ways

Mode one: Load in new window. (A to B, loaded in window B)

This approach follows the traditional Web page loading method, and is very common.

Advantages: Windows Instant switch.

Applicable to: B window information is large, such as long graphics and text mixed page.

Suggestions:

1. Do not use the blank window when entering B, use the preset formatting information (picture placeholder, information separating style, etc.);

2. A portion of the information that has been loaded into a window surface,

3. Sub-loading of information on window B. (This allows the user to read the information in advance, while waiting, to reduce the anxiety)

Example: Figure 02& Figure 04 Load in the page with a preset format, the information framework has been passed to the user before the information is loaded. The user has a vision of what information will be loaded.

Figure 01 Figure 02

Figure 03 Figure 04

Mode two: After the current window load completes, then toggles the next window. (A to B, loading complete in window A, then entering B)

This approach is relatively less used

Advantages: Do not appear blank pages, the page integrity to switch.

Applicable to: B window less information, loading time fast, text-oriented pages. Or a window is already performing a task, and there is continuity. For example, a window is an audio playback page, and users can continue to listen before entering page B.

Suggestion: need to consider the network extreme bad situation, loading information very small use, such as Figure 05,ios original SMS application is the current page load, when you encounter a lot of information such as mobile phone, the feeling of the interface card for a little while. However, the majority of text messages are mainly written, so that the design is understandable, if the loading time is long, as shown in Fig. 61 provide the state is more perfect.

Example:

In addition, submitting information (such as registration, login, etc.) is generally returned in the current window and processed for loading.

Reminder: Loading mode is dead, the above mentioned two ways in fact can be combined with flexible use of specific circumstances.

For example: A window loaded in the list data before a few pull complete data information, the user switch to the case of detail B can be directly seen. The rest of the information is then read back in the background. Reduce user Switching latency. (This is what Gmail does.) The first 5 emails are prefetch. To do this to the server, the request is higher, but experience smooth a lot, we use the time to weigh themselves.

In addition, be sure to save the current state of a before entering, B return a to go back to the previous state (such as in the 15th entry, return when the 15th message in the original position, and with the original highlight disappeared effect).

Article source: Baidu User Experience Department