Design Essentials for loading pages from app

One of the most agreed criteria for interactive design is "Don't Let me Wait," but Internet products are always subject to actual network problems. Mobile end products are more obvious, 2G, 3G environment load is not enough to power, WiFi environment may not always be so smooth. So "Don't let me Wait" is more like a wild hope, we should think about is "how elegant and not irritating, etc.". The most direct connection is the design of the app load page.

An app loading page is roughly divided into 3 categories:

(i) Start load page

Boot loading is the first glimpse of the app we've seen. will give the user the first impression of the product.

Typically, you start the load page with several designs:

1. Fixed loading page

Logo, slogan, product main color, version number, production team, this is the basic elements of the initial start page, the designer's goal is the most direct and fast to the user to convey product image, which is to allow users the most direct understanding of the product of one of the means. But also because the realization of low cost, and the style fixed simple, over time easy aesthetic fatigue. So the load page starts to upgrade.

Here's how to make the load page less isolated and abrupt:

The continuity of vision

。 For example, Weiconote's load page background is consistent with its main interface background and visually achieves a harmonious transition.

Use of the dynamic effect

。 Make it a perfect transition to load pages and content pages through transitions such as fading out or opening doors. such as watercress movie and day Cat client.

2, will change the load page

When a dusty load page starts looking for a way out, what will the result be? Yes, the Load page will change. But any change has to be traced, so that the user can understand. There are currently 2 kinds of dimensions:

1. Holiday Custom Load Page

At different festivals, the launch load page will be designed around festivals & products. It is an example of affective design to convey festival information while highlighting product image. For example, Palm Baidu Symbian.

Another interesting example is the launch page for some apps, the eggs that are laid on the user's birthday: This is a means of diverting attention from the user, so that the user is no longer immersed in waiting, but through this waiting time to convey other useful information, so that users no longer irritable.

2. Different versions of the custom load page

When the app version is upgraded, the boot load page is upgraded to design a load page that conforms to the current version's theme, features, or new features. Also enhances the user to the new version, the new function cognition degree.

(on the left Sina Weibo summer version on the right Sina Weibo New Year version of the next left Zaker embedded in the Game Animation forum ads)

3. Startup page with the main interface

Using the app's content page as the content of the startup page, from the start load page to the completion of the loaded homepage, the layout content can hardly see the difference. Such a launch page, allowing users to advance into the main interface, to enhance the user's impression of the main interface. It is not easy to create a great sense of visual jumping. But there are problems, such as the main interface of the load page will give users the illusion of usable, but if the loading time is too long, click Pseudo Homepage If no response, may annoy the user.

(Pull time)

4. Use the Animation launch page

In the game app, this way is more common, in the process of loading, the user sees is a piece of dynamic flash. Sometimes it is possible to match music with related games. For example game Subway surf. While this approach is most media-rich, it also consumes resources. Sometimes because load burden is too heavy, even can cause picture not fluent. So you need to choose carefully.

(ii) Content loading page

At present, the more common content loading page will be loaded modal box to represent the current loading, it is not very beautiful, and before loading and loading of the page is very weak correlation. This experience is really a headache and displeasure.

(Zaker) is there a good experience with content loading?

Several optimization methods:

1. Increase the correlation between loading pages to avoid the use of modal boxes

such as line's notification load. The load process is performed on a loaded notification item, which does not prevent users from browsing the contents of the context.

2. Load on the display of the loaded page style, to maximize the visibility of consistency

This approach is to as much as possible in the loading process to inform users of effective information, "you will soon see what kind of page" "What will be the content", so that users have a forecast in advance, but also let users have the desire to wait.

(Flipboard)

3. Pre-populate content when loading

There are 2 kinds of content here. It can be preset well in advance, such as the head figure in next day, and the lovely bunny chart is replaced before it is loaded. Another is, display last browsing left content, like the recently updated path, load, users can see the last load successful content, and very clever to load the picture in black and white processing.

(iii) Download, application of the loading page

Another common load is loading pages when downloading/applying. The process of downloading and applying can be seen as a coherent process. Instead of imagining two separate modal boxes.

In Cardmon this application, the process of downloading and applying is packaged into a continuous and exquisite process.

The designer found the link between card and download, using the cloud to send cards to the envelope of the dynamic effect, coupled with the download progress bar, so that the original boring download waiting for the process to show a glimmer of anger. After the download is complete, the progress bar is a logical transition to the installation process. The animation effect is still around the previous card logo. The same installation progress bar can still prompt the user for the remaining time.

The main point of this packaging method is to find a link between the product and the download, reasonable use of dynamic effect, progress bar, continuous processing download installation process.

The other is the Weico theme download, which will be downloaded and installed as an independent two process. Downloading and installing separate usage scenarios Typically, users may want to browse, download multiple topics, and then determine which to use. Therefore, the download is processed to replace the download button's progress bar will be more appropriate, rather than modal boxes. Because such loading mode does not affect the user to browse other content, will not let the download mode interrupt the user's original browsing behavior.

These are several forms of app loading and design methods. Seemingly obscure loading page is actually the whole app is the focus of the heart and exquisite pen. This point of waiting time may change the entire user experience. To sum up, the above advocated several principles:

1. Reasonable use of the startup page, give more meaning to wait time

2. Avoid using modal interrupts for users

3. Load the page to provide users with expected, and more meaningful information

4. Attention to maintaining visual coherence