Mobile client interactive design principles and information presentation

There are so many limitations in browsing the information on the mobile phone. The small screen of the mobile phone can not display too much information. The change of the ambient light is bound to be not too fancy for the page design. The traffic limit is not bound to have too many pictures and styles.

If you allow your users to browse web pages designed for the web directly on their mobile phones, even after some mobile browser optimizations, the experience will be either bad or sometimes unbearable.

How to adjust the way information is presented, so that the content can be more friendly on the small screen mobile phone to show it? Next, I will explain my point of view through some principles and examples.

First, Ben Shneiderman's interactive design of the eight golden rules of our ancestors we have to keep in mind, because these rules are also the basic law applicable to the mobile Internet -

Strive for consistency. Strive for consistency. Enable frequent users to use shortcuts. Allow frequent use of shortcuts. Offer informative feedback. Provide definitive feedback. Design dialog to yield closure. Tells the user that the task has completed Offer simple error handling. Provides error prevention and Simple error correction capability. Should be http://www.aliyun.com/zixun/aggregation/17453.html "> User-friendly cancellation of an operation Support internal locus of control. User should have control Reduce short -term memory load. Reduce the user's memory burden

Secondly, the interactive design principles for mobile phones, there are some points to be added below -

Minimize operational steps Try to use clicks instead of typing moments Let users know where they are in the same web and data sync Make room for input methods

The mobile phone on the way the information is displayed, it is the focus of this article, but also from the "Mobile Interaction Design" book was some inspiration.

The information displayed on the phone, on the one hand to help you find the information you need, on the one hand to provide a friendly way to read the information you need. In order to effectively support these two tasks on a mobile phone, the design of the information in the mobile website interaction design needs to satisfy the following items:

The summary form shows information navigation and prompts in obvious positions to reduce scrolling

First, the summary form to display information

Because the information presented on the phone and the information displayed on the web have a common starting point - easy to read. Anything that helps users quickly determine whether a piece of information is valuable or not can prevent users from spending a lot of time reading content that does not make sense to him. Because the web can display very detailed information, and the phone displays a slightly longer article requires several pages, so we can not be an article directly adapted to the mobile version on it, and need to provide a new way , So that users can take the overall situation, all of a sudden see the article, which requires information in the form of summary abridged, but this also needs to be sub-situation considerations, such as the following few examples -

1, for the news, you need to display the title

2, for the blog, you need to display the title + time + comments

If http://elyaaa.com does not fit directly to the phone, the style above, the experience is not good, even the large-screen touch-screen phone also need to zoom + scroll to see the whole picture

The optimized http://elyaaa.com/wap/index-wap2.php can provide a good enough experience to show the information in the form of a list, the user can be the first time to get an overview of the site, quickly find effective information to carry out Browse

3. For the forum, you need to display the title + author + time

Renren log display of the form, it is close to the presentation requirements of the forum, showing a detailed title, author and time of publication. After only one step you can open the log, a fast index and a good experience to the client a lot of color.

4, for microblogging, you need to show all

Sina microblogging android client information in summary form, click or long press to expand, display the details, and then click the pop-up action box. This increase the operational steps on the one hand, to bring the burden on the user, on the other hand need a section to unfold, affecting the smooth reading experience.

Twitter's Android client Twidroid full-text display Twitter information, click the layer selection operation. That is to simplify the operation steps, but also conducive to quick browsing.

Twigee, Twitter's Android client, also displays Twitter messages in full-text mode, click to open a new page selection. But also to simplify the operation steps while improving the browsing experience.

Second, navigation and prompts in a clear position

Sina Weibo android client provides a clear message and navigation information, but the disadvantage is that such new information is best to remind the operation

TweeCaster, a Twitter client on Android, offers a solution that integrates tips and navigation with great workability and experience.

Third, reduce the rolling

Obviously, users hate rolling on the web, even more so on their phones. However, the problem we face is that the mobile client needs to integrate a large amount of information into the terminal to be displayed to the user, which is bound to cause some scrolling and page turning. To reduce vertical scrolling, we can arrange the content as follows -

1. Put some navigation features (menu bar, etc.) on the top or bottom of the page
2. Place the very important information near the top

Comparison of Sina microblogging wap version and Tencent microblogging wap know, Tencent did more research, they put "refresh" this operation on the first weight position, and Sina microblogging refresh is going through at least four steps The action to reach (non-touch version), even the touch-screen version, the "refresh" location also make it not conducive to clicks.
3. Reduce the amount of information on each page, so that content is more concise and not lengthy
4. Important operations can be repeated at the bottom of the page

For the time being only some of the mobile client interaction design in principle to explore the future will study some design methods.

Reprinted notes: from http://elyaaa.com/userexp/510.html