Information flattening

A few days ago the information flattened as five mobile phone interactive http://www.aliyun.com/zixun/aggregation/8912.html "> Design principles of one of them, did not find the relevant content, personal attempts from the concept, reasons and methods of implementation analysis."

Less information-level relationships, users can find the information they want by manipulating fewer pages.

1. The information structure is based on depth. From Taobao Ued's article to see the web focus on deep breadth balance:

In the entire tree structure, the number of linked layers is called the depth of the page link (depth). In a tree-shaped structure, the total number of pages contained in the bottom page is called the breadth of the page link (breadth).

But this article for Taobao's web page and mobile phone client does not apply, the two functions are: Select the product category → find goods → purchase → payment, the information frame of the most basic interface to reverse the payment interface, not the normal tree-type structure. This concept for watercress to quite suitable, the Web page structure is a tree, the home is the root, the group of topics, film reviews and book reviews are branches; Taobao page is inverted tree structure, hot goods, search entrance and catalog is the branch, payment is the root.

Due to the limitations of the mobile phone screen, the main interface Taobao shopping only select goods and search goods, the weak breadth of the entrance, the depth of information more obvious.

2. Each jump interface, will lose user traffic. The purpose of the carry-on is to guide the user to find the desired goods and pay, such as the completion of the operation to jump 5 interface than jump 7 interface orders will be more.

3. Interface jump is more complicated than web page. The mobile client does not have the ability to display the path like breadcrumbs, and must be returned on a level.

↑ Look up photos in the iphone, return from photos to the photo catalogue and click two times on the navigation bar.

↑ from the map of the mobile phone client information structure diagram can be seen from the "interface C" jump to "interface I" path is: C→b→a→home→h→i.

In addition, mobile clients do not have the easy way to navigate like the web, such as catalogs, tree-like navigation and breadcrumbs. For example, the iphone's photo catalogue and photos are displayed in two interfaces, and the Web photo catalogue and photos can be displayed in the same interface. If the tree-like navigation is displayed in the mobile interface, it will cause the page to be too long.

↑ If you use the breadcrumbs in the iphone program, there are several questions:

The above problem is contrary to the role of web breadcrumbs, if you are worried that users can easily get lost in the program and use the breadcrumbs instead of a "back" button, it may mean that the user has access to deep information to find what they want, and what more should be done is to reduce the depth of the information.

↑ Add tab. Display side-by-side information in the same interface, reducing the page's jump.

↑ The path from "interface C" to "Interface I" is: C→b→a→h→i. At this point A is the real home interface, the C level from the original 4th level into the 3rd level.

↑ Shortcut channel for the process. Add a shortcut to C in interface A, although logically C or level 4th, but for the user, C is the 3rd level. For example, the process of buying movie tickets is: Choose Movie (A) → Choose movie theater (B) → Select the date (c), if the show in a interface, XX cinema is aggressively "the War of the Gods", click to jump directly to the selection of the game (c).

↑ Prioritize the process. Assuming that the data shows that more than 80% of users choose to use the shortcut, then B is not a necessary part of the process, but a secondary process, then the 4th level of the original C interface into the 3rd level.

↑ Extract Important information. The 3rd level has 3 interface BFE, the user wants to see these 3 interfaces to decide which interface is needed, logically bfe is the juxtaposition, if can extract the BEF important information, the user in a interface can decide chooses the 3rd level which interface. If a is to choose the movie interface, BEF is the show of each film and the price of the film, such as in the A interface to know the BEF film's minimum price, can help users to save the process of comparing fares. This practice does not make the information flat, BEF information, such as the extent of the user from the point of view of the importance of BEF, can also flatten the breadth, reduce the number of clicks. If the user chooses the B process, B process is also the simplest, Jump 2 interface can complete the task, and E and F jump 4 times to complete the same task, then can realize the purpose of flattening information.

Source: http://daichuanqing.com/index.php/archives/1344