Website interaction design: "parent-child relationship" in Information Design"

The core of interaction design is information architecture and interaction details design. Information architecture includes information classification and logic design of information presentation. Interaction details are mostly displayed in the selection of controls and definitions of interaction effects. In information design, the most difficult problem is that there is too much information and the design results are unsatisfactory. Therefore, when the demand cannot be cut down (too much information, maybe there is still a possibility of streamlining the demand itself.) How can we solve such problems?

In general, there is a right-to-follow relationship in information design. Information is mutually exclusive, information is complementary, and information is contained and contained. So what we will discuss today is "parent-child relationship ". The so-called "parent-child relationship" refers to the comparison between core information and auxiliary information (similar information), key information and secondary information (non-similar information) in the interface design.

　I. Significance of "parent-child relationship" in Design

If you cannot make a page self-evident, at least let it explain itself. This is the point mentioned by Mr. Krug in Don't make me think. The embodiment of the "Parent-Child" relationship is to explain to the user what needs to be concerned, which is the most important at present, to ensure the smooth flow of the main path (even the advertisement, if it is customized, it is also positive ).

　2. How to find the "parent-child relationship" in the Design"

The designer must first determine the relationship between the information to be designed. The judgment can be based on business logic or user operation logic.

For example, a successful feedback page. If the business logic ends so far and there is no next action, the feedback information is more important. If the successful feedback in the business logic is only one part of the logic, the next step is more advanced than the feedback.

　　

 

　　3. How to embody the "parent-child relationship" in the Design"

Step 1: Information Classification

Sort all the information according to a certain logic (card sorting. Set all information to the same font size, Font, and color before category.

Classification design method:

Line: Design Guides, solid lines, dotted lines, etc.

Surface: background color, background frame

White space: separated by blank areas between information

For example, the email verification success page divides the information into three types based on different services:

　　

 

Original page

　　

 

Step 2: Order of information on the page

The order of different information on the page is specific. This Order may be a standard. For example, the successful feedback on the page must appear at the top of the page and be displayed after the guide. The previously classified information is displayed on the page in class order.

　　

 

Step 3: Priority of information on the page

Although the order of information displayed on the page is a standard, the priority of information is not restricted by this standard. After determining the priority, we need to design and reflect the priority.

Priority Design Method: Layer

The concept of a layer is similar to that of a ps layer. It is to make the highest priority information attract the user's attention immediately and give the user a closer feeling. Generally, shadow and background colors are added.

For example, on the mailbox verification success page, guide the user to improve the highest priority of personal information, then highlight the information by adding background color and shadow:

　　

 

Step 4: the priority of the information under the design unit after the design of the big framework is complete

The design method for the information under the class unit is the same as the above method.

For example, the design of information in the complete guidance of member information: the page information is divided into three categories: title, action, and Interpretation Language. Action should be followed by the title,

The explanation language is around action. Pay attention to the whitelist processing of information.

　　

 

Step 5: Adjust interaction details

After the above design steps are completed, the page information is basically OK. The adjustment of interaction details focuses on helping users locate information visually.

Design method: differentiate fonts, font sizes, colors, and styles.

On the email verification success page, the text color #666666, 12px (website specification), link color # 0066cc, and 14px bold are displayed.

　　

 

Step 6: Perform Subtraction

This step is essential. At the beginning, various effects have been used to achieve the best page design results, but at the end, we should go out to see this page from the overall perspective, remove excessive design elements

　　

 

Final design results:

　　

 

The page information level is obvious, and the "Parent-Child" relationship is particularly prominent.

　　Iv. Application of "parent-child relationship" in normal Design

A. Apple.com

The information design on the homepage of Apple's official website includes the relationship between key points, secondary points, and core points and auxiliary points.

　　

 

B. Amazon.com

In the local design of the default homepage of Amazon, there are also obvious operational information and Conventions, focusing on and secondary, and the relationship between core and auxiliary services.

Ps: the general information itself may be the most important, such as navigation. However, after the website is mature, users have a high degree of recognition of navigation, instead of requiring visual enhancement, the periodic nature of operation information determines that it needs to be strengthened for a certain period of time.

　　

 

C. Gap.com

Fashion card gap official website women's clothing page, with big picture as the main promotion method, in the information design, operation and routine, the relationship between the core and auxiliary information is very clear.

　　

 

The guidance with design methods can ensure the standardization and regularity of the page, but in the specific corresponding project, which design method requires the designer to have in-depth thinking and analysis. At the same time, after completing the project, design the review and summarize the experience for greater progress.

Source: http://www.aliued.com/2012/07/28/1021/