Web Interaction Design: Optimizing the list-type information structure--eye movement research

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

The list information structure is commonly used in Web pages, a form-like top-down distribution of information. For example, the information flow that is commonly used in Facebook and other social networking sites, and the list of products commonly used in many electronic business websites, belong to the list structure.

There are a lot of research on list structure, its advantage is that it accords with the two basic laws of human nature reading at present-Top-down, from left to right. But after recent years of eye movement research, its shortcomings are more and more found, that is, the attention distribution is uneven, at the top of the element to get 90% attention, and the middle part of the element is difficult to be noticed, detailed information please see this blog.

Professor Li Chen, of the Hong Kong Baptist University, published a paper last year on eye-movement research on three list-type information structures. The following figure

As shown above, in addition to the General list structure (a), Li Chen tests two optimized structures (B,C), separating the existing lists into smaller pieces and adding them with subheadings. Hot maps, and browse order diagrams are as follows:

As can be seen from the above diagram, in the latter two list structure, the user's attention distribution will be more average, rather than the first list structure, the central is rarely noticed. The experiment also shows that the user purchase rate in the latter two list structure is higher. A closer look can be found in the latter two structures, the key role is the "small title", it will be scattered around the user's attention in tandem, so that the entire page into a whole. This concept may be instructive to the design of a more reasonable list structure flow of information.

Source: http://nickinteractiondesign.com