Mobile app designer experience sharing: App user experience design

Article Description: practical experience Sharing: How to make app faster!

Did the design blink also more than 4 years, from 2011 from the Web designer to mobile phone app designer; The recent work is not very busy, and then calm down to read some of the Internet's development trends to make up for their own shortcomings in this (because most of the work time is to do the design) Before always thought that the user experience aspect work is has the specialized researcher to do, does not have the relation with the design personnel, through these few days study, discovers does the design also can achieve the user experience Ah, below I will give everybody to introduce each other, everybody learns each other ^_^

First, the backstage implementation

core idea: by running the loaded program in the status bar, you can enable the user to do other things

An example is provided:

Instagram

When you click on the "Praise" button, the words of the button immediately become a "praise" of the state; In fact, look at the picture of the red box loading icon, it is only in the background to run silently loading program; The advantage is that the user does not need a second to wait, to avoid when the network is not good when the circle has been turning.

Hair microblogging platform

For example: I have just published a comment the area on the right red box immediately appears in the comments list, but in fact I reply to this comment, the other party can not immediately receive a message to remind; Because in the view of the status bar, I sent that sentence is in the background program silently add the carriage line; So the background performs its task, I can continue to look at other comments and not delay.

Second, display the content before loading

Core idea: let the user feel quickly want to see related product information

An example is provided:

App Store Details page

When the user from the list into the Details page, the top is the red box on the left side of the area, there is no loading state, immediately have the product information display, people feel the content immediately after clicking out.

Third, make full use of the cache.

Core idea: using caching mechanism to improve the opening speed of the page

An example is provided:

Cicada travels "Travels" and the "Add Micro Bo Friends" and other pages, all take advantage of the 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 new content is exchanged immediately or the next time it is accessed.

Four, the interface first, the network then

Core idea: for some small data, and less likely to fail the network interaction, or in the absence of network, users can also use the app

An example is provided:

The "Send Picture" and the Weibo "collection" function of the micro-trust Friends Circle

Circle of friends even in the absence of a network, you can publish pictures, and so have the network automatically upload just released content, this experience to do very good (PS: hope that micro-letter can quickly update iOS7 flat)

Weibo collection, when you do not want to collect the time, click again, to help you can do other things, at this time in the status bar of their own efforts to load.

V. Predicting user behavior and starting tasks in advance

Core idea: predicting what the next step is for users, paving the way for users in advance

An example is provided:

NetEase Cloud Reading

When the user enters the details page from the list page, when you look at a piece of information and then pull down to see the next one, and the content has been loaded out, pull up will go back to the previous one, so it is in line with the public's habit; do this to avoid having to read one and then click Back to see another one from the list.

Android Update alert

It is prompted after the installation package has been automatically downloaded, avoiding the process of letting the user wait for the download.

Six, as little as possible to allow user input, input as much as possible to give a reference

Core idea: The mobile end of the virtual keyboard has its advantages, but also its shortcomings, the main disadvantages are:
The space limit of the virtual keyboard, the click of the finger often causes false press;
Input positioning can not be feedback (for example, I input Tintin, the results of the search list of the adventure of Ding, in fact, I want to search for a good voice in China Tintin ah, hehe)

An example is provided:

Baidu Map

For example: I want to find Wanda International Studios, when the input box search "wand" a few letters will be listed all about the content of Wanda, it is easy to find, so as to avoid the user input more than the situation, very intimate.