Information design in interactive design of mobile website

Browsing information on the mobile phone, there are too many limitations, the phone screen is doomed to a page can not show too much information, environmental light changes doomed to the page design can not be too fancy, traffic restrictions are doomed to not have too many pictures and styles.

If you let your users browse directly to a Web page designed by your mobile phone, even through the optimization of some mobile browsers, the experience can be bad or even unbearable.

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

First of all, our ancestors Ben Shneiderman 8 golden rules of interaction design we have to keep in mind, because these laws are also applicable to the Basic Law of mobile Internet--

1. strive for consistency . Strive for consistency
2. Enable frequent users to use shortcuts. Allow frequent use of shortcut keys
3. Offer informative feedback. Provide a clear feedback
4. Design dialog to yield closure. Design dialog to tell the user that the task is complete
5. Offer simple error handling. Provides error prevention and simple error-correcting capabilities
6. Permit easy reversal of actions. It should be convenient for the user to cancel an operation
7. Support Internal locus control. The user should have control right
8. Reduce Short-term memory load. Reduce the user's memory burden

Second, there are a few additional points to be added to the principle of interactive design on the phone-

1. Minimize the steps of the operation
2. Try to use clicks instead of input
3. Always let the user know where they are
4. Consistency with the web and data synchronization
5. Give room for Input method

And for the information on the mobile phone display way , it is the focus of this article, but also from the "mobile Interaction Design," a book has been some inspiration.

The information 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 support these two tasks effectively on the mobile phone, the information design in the mobile website interaction design needs to satisfy the following several:

1. Summary form Presentation Information
2. Navigation and hints in a clear position
3. Reduce scrolling

Presentation of information in the form of a summary

Because the information on the mobile phone and the information on the web have a common starting point-to facilitate reading. Any way to help users quickly determine whether a piece of information is valuable can be used to prevent users from spending a lot of time reading something that doesn't make sense to him. Because the Web can display very detailed information, and the mobile phone display a slightly longer article on the need for several pages, so we can not put an article directly fit to the mobile phone version on it, but also need to provide a new way, so that users can view the overall situation, all of a sudden see all the articles, This requires that the information be abbreviated into the form of a digest, but this also needs to be considered in terms of circumstances, such as the following examples-

1, for the news, need to display the title

2, for the blog, need to display title + Time + comments

If the http://elyaaa.com does not fit directly into the phone, the style, such as on the experience is not good, even the large screen touchscreen phone needs to zoom + scrolling operation to see the full picture

But after the optimization of the http://elyaaa.com/wap/index-wap2.php can provide a good enough experience, in the form of a list of information, users can be the first time to learn about the site's profile, quickly find effective information to browse

3. For the Forum, need to display title + Author + time

Renren's log presentation form is close to the presentation requirements of the Forum, showing the detailed title, author and time of publication. You can then open the log in just one step, with a quick index and a good experience that adds a lot to the client.

4, for micro-blog, need to display all

Sina Weibo Android client information is displayed as a summary, click or long press expand, display details, and then click the Pop-up Action box. This on the one hand to increase the operating procedures, to bring the burden on the user, on the other hand, the need to expand, affecting the smooth reading experience.

Twitter's Android client, twidroid, displays Twitter messages in full text and clicks on the choice of layers. That simplifies the procedure and facilitates quick browsing.

Twitter's Android client Twigee also displays Twitter messages in full text, clicking to open a new page selection operation. It also improves the browsing experience while simplifying the procedures.

Second, the navigation and the hint is in the obvious position

Sina Weibo's Android client provides clear hints and navigational information, but the downside is that this kind of new information alert is best to operate

The Android Twitter client Tweecaster offers a solution that prompts and navigates together, and ensures operability and a good experience.

Third, reduce rolling

Obviously, users hate scrolling on the web, especially on mobile phones. But the problem we face is that the mobile client needs to integrate a lot of information into the terminal to display to the user, it is bound to cause some have to roll and page. To reduce the vertical scrolling, we can lay out the content in the following ways--

1. Put some navigation functions (menu bar, etc.) fixed on the top or bottom of the page

2. Place very important information near the top

Compare Sina Weibo WAP version and Tencent Micro-blog WAP can know, Tencent did more research, they put the "refresh" operation in the position of the first weight, and Sina Weibo refresh will have to go through at least four steps to reach (not touch screen version), even if the touch screen version, the "Refresh" location also makes it not conducive to click.

3. Reduce the amount of information per page to make content more concise without lengthy

4. Important operations can be repeated at the bottom of the page

Temporarily only do some mobile phone client interaction design In principle of discussion, will study some design methods in the future.

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