Mobile Design Optimization: A design approach to making apps faster

Article Description: we all know that regardless of the Web page or mobile applications, response speed is one of the most important experience indicators, and mobile applications of the network environment instability, speed of experience is particularly important. In fact, speed optimization is not only a programmer's business, design, but also can make the app become faster.

D.A: We all know that both Web pages and mobile applications, response speed is one of the most important experience indicators, and mobile applications of the network environment instability, speed experience is particularly important. In fact, speed optimization is not only a programmer's business, design, but also can make the app become faster.

1. Backstage execution

This is a very common and easy to understand method. Users will not be willing to stare at the progress bar innocently waiting, in addition to "Cancel" there is no other option. When the system is dealing with some network tasks, it is entirely permissible for the user to do something else.

Each big platform's hair Weibo, all adopted the backstage execution. Offline downloads of cloud Reading are also performed in the background.

And Weibo's long view (or video) is a counter example. The network does not give force, or wait 1 minutes Jeantougas load, or just give up looking at the picture. Why can't you let the diagram load while the user can see other tweets?

2. Display content before loading

A different point between the client and the Web, the client's display includes both local and network data. In the design of the interface, more information on the local, when the network data is not loaded to display the local data, so that users have a "already loaded half" illusion, even if the final time consuming, the psychological feeling will be faster. Of course, too much of the data in the local, will sacrifice some flexibility, need to consider the specific circumstances.

Please see Twitter, Facebook, Vine, such as the launch screen of excellent products, although the same static picture, but they do not use the logo and pretend to have loaded the "navigation bar" and "title bar", People feel "click immediately after the start."

As with the details page of the App Store, information is displayed first before the details are loaded.

3. Make good use of cache

Caching can store network data locally and there is no need to request the network again next time, reducing traffic and reducing latency. At design time, you can display the cached content, and then pull the new content back into the network, if any new content is replaced immediately or the next time it is accessed. But cache use also pay attention to "degree", too large cache file takes up too much system space, will let user rage uninstall app.

Cloud reading "bookstore" and "through microblogging to find friends" and other interfaces, have used caching mechanism to improve the speed of opening pages.

4. Interface in advance, network interaction Then

For network interactions with small amounts of data that are less likely to fail, users do not need to know exactly what the app is doing, and they can use it seamlessly, so we should "cover up the facts", that is, to perform the task (mental model) in the interface, silently, in the background. (Implementation model).

The most commonly used, such as QQ, micro-letter, Ishin and other chat interface. Click Send, the message immediately "fly" to chat context, in fact, the other party has not received. But such a design makes the process of communication smoother and does not interfere with the various processes of "sending-sending success".

Users in the collection of articles, attention to friends and other operations, data volume is very small, can interface first. Users continue to browse the article at the same time, the system will be a good collection of articles.

Another method similar to this one is often used: in the absence of network conditions, users to operate (such as write comments, write notes, etc.), the user's input to save the local, wait until the network upload. Let the user have a coherent experience.

5. Predict user behavior and start tasks in advance

Do not know if you use Taobao have no such habits, in the search results list, will all interested results open as a new tab, and then look at each one, not interested in the closed. The advantage of this is that when I browse the details page, each page is loaded completely, otherwise I point to open a look at one, each have to wait for loading, will greatly reduce efficiency.

So is it possible to design it to meet similar usage scenarios? It should be possible to predict the behavior of the user and start the task ahead of time.

The strategy looks something like this:

When a user stops at an interface, it predicts that the next step may do ABC three tasks, and the system then finishes all these tasks ahead of schedule. When a user makes a choice such as a, the interface can respond quickly, and the BC two tasks are emptied out of memory to conserve resources. (There is a limit to this, of course: 1, which is only available for free networks.) 2, preload does not affect the performance of the system)

We'll come back to see Taobao's ipad client. It has such a design, in a certain Detail Page view, a row to the right to see the next item, perhaps this is a good design, but did not help me preload the next interface, I still have to foolishly wait for the page to load up.

So let's look at some other designs.
In the NetEase cloud reading, we think that the user enters one of the information sources one of the most likely is refreshes to view the new content. So even if the automatic refresh option is not turned on, the source list, the background automatically loads the new content, and displays "new" on the Refresh button, and when the user refreshes, the content is rendered immediately.

Android Update reminders are prompted after the installation package has been automatically downloaded, so that users no longer need to wait for the download process.

Another example of the cloud reading the larger view, automatically load the next one; TableView is automatically loaded when the bottom is to be reached.

Chrome asked if it was saved before downloading, and it saved a lot of time when the user decided to start downloading. If the user discards, the downloaded content is automatically deleted.

So, use this idea.
Write Weibo inserted photos, can automatically upload, and do not have to wait for users to click the "send" before uploading?

Do you want to automatically load large images or videos when you are targeting a micro blog?
Music applications should download the next song when the current song is almost finished, so that when the song is cut, it will be stuck for a while?

6. Use dynamic effect to cover loading process

Excellent dynamic design, so that products better use and make people bright. In fact, there is another major use of dynamic effect, to attract the attention of users, so that the original boring waiting for the loading process, into a pleasant appreciation of the process.

The following examples come from the network.

Original address:uedc.163