Website interaction design: optimizing the List-based information structure-eye movement research

List-based information structure is commonly used in Web pages. It is similar to form-based top-down information distribution. For example, information flows commonly used in Facebook and other social media websites, and product lists commonly used in many e-commerce websites are in List-based information structures.

There are many studies on the List structure. Its advantage is that it complies with the two basic rules of natural reading-from top to bottom, from left to right. However, after the eye movement research in recent years, its shortcomings are more and more found, that is, the attention distribution is uneven, and the elements at the top have received 90% of attention, the elements in the middle part are hard to be noticed. For details, refer to this blog.

Professor Li Chen from Hong Kong Baptist University published a paper last year to study the eye movements of three List-based information structures. For example

 

For example, in addition to the General list structure (a), Li Chen also tested the two optimized structures (B, c ), separate the original list into several smaller parts and add subtitles to them. The hotspot diagram and browsing sequence diagram are as follows:

 

 

It can be seen that in the last two list structures, the user's attention distribution will be more even, unlike the first list structure, which is rarely noticed in the middle. The experiment also proves that the user's purchase rate in the last two list structures is also higher. Looking at the details, we can find that in the last two structures, each of the key functions is the "Subtitles", which Concatenates the attention of users in different places, make the entire page a whole. This concept may be of some inspiration for the design of a more rational list structure information stream.

Source: http://nickinteractiondesign.com