Web Interaction Design: "Parent-child relationship" in information design

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

The core of interactive design work is information architecture and interactive detail design. Information architecture includes classification of information and logic design of information display, and interaction details are expressed as control selection, interaction effect definition and so on. In the information design, encountered the most difficult problem is too much information and the design results are unsatisfactory, then in the premise of the need to cut off demand (too much information, perhaps the demand itself and the possibility of being streamlined), how to solve such problems?

Generally speaking, information design has a very good relationship to be followed, mutual exclusion of information, information between the complementary, information between the inclusion and inclusion of the relationship. So what we are going to discuss today is the relationship between father and son. The so-called "father-son relationship" is the core information and auxiliary information (similar information), the emphasis of information and secondary information (not similar information) in the interface design of the contrast relationship.

The significance of "father-son relationship" in the design

If you can't make a page self-evident, then at least let it explain itself, as Mr Krug in Don T makes me think. The embodiment of the "father-son" relationship is to explain to the user what is needed to be concerned about, which is the most important, to ensure that the main path unimpeded (that is, advertising, if it is customized is also a positive significance).

Ii. how to find "parent-child relationship" in design

The designer first needs to judge the relationship between the information that needs to be designed. And the basis of judgment can be business logic, can be user operation logic.

such as a successful feedback page. If the business logic ends here and there is no next move, the feedback is more important; If the success feedback in the business logic is only one part of the logic, then the next step is better than the feedback.

How to embody the "father-son relationship" in the design

The first step: information classification

Categorize all information according to some logic (card sorting). Set all information to the same font size, font, and color before the collation.

Classification Design methods:

Line: Design guides, solid lines, dotted line, etc.

Face: Background color, background frame

To be separated by a blank area between messages

For example, the success of the mailbox verification page, according to business different, the information divided into three kinds:

Original page

Step two: information in the Order of the page

The order of the different information in the page arrangement is specific, this order may be a specification, such as the page success feedback must appear at the top of the page, after the boot row. Then the information that was previously sorted is displayed on the page in the order of class.

Step three: Information in the priority of the page

Although the order in which information is displayed on the page is some kind of specification, the priority of information is not limited by this specification. After prioritizing, we need to design and prioritize.

Priority Design Method: Layer

The so-called layer concept, similar to the PS layer. is to allow the highest priority information to attract users the first time, and give users a sense of closer proximity. Usually the processing way has the shadow, adds the background color and so on.

For example, in the mailbox to verify the success of the page, guide the user to improve the highest priority of personal information, then the use of the color plus shaded way to highlight:

Fourth step: After the design of the big frame, the priority of the information under the Design class unit

The method of designing the information under the class unit is the same as the above method.

For example, member information to improve the guidance of information design: page information is divided into 3 categories: Title, Action, interpretation language. The action should be followed by the title,

Explain the language around the action. Attention to the information between the white processing.

Fifth step: Interactive detail adjustment

After the above design steps are completed, the page information is basically OK. Then the interaction details of the adjustment focus from the visual is to help users locate information.

Design method: Distinguish between font, font size, color, and style.

Success in the Mailbox verification page, successfully prompted the body color #666666,12px (site specification); Guide text link color #0066cc, character 14px bold, etc.

Sixth step: Do subtraction

This step is essential, just start with a variety of effects have reached the best page design results, but the last time to go out from the overall perspective of the page, will be a number of excessive design elements removed

Final design effect:

Page information level is obvious, "father-son" relationship is particularly prominent.

The application of "father-son relationship" in the ordinary design

A. apple.com

The information design of the homepage of Apple's official website includes emphasis and secondary, core and auxiliary relationship.

B. Amazon.com

Amazon default home page in the local design, there are more obvious operating interest and routine, focus and secondary, core and auxiliary relationship

Ps: The general information itself may be the most important, such as navigation, but the site after the maturity of the user's awareness of navigation, but no longer need visual reinforcement, and the operational information itself periodically determines that it needs to be strengthened in a certain period of time.

C. gap.com

Chao Brand Gap official website Women's page, to figure dress up as the main mode of promotion, in information design, operations and conventional, the core and auxiliary information is very clear.

There are design methods to ensure that the guidance of the page is normative and regular, but in the specific project, the use of a design method requires the designer to have in-depth thinking and analysis, at the same time, after the completion of the project on the design review and can experience, in order to make greater progress.

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