Eye-tracking：How Interface Design Affects Eye Movement
For e-commerce websites, list-page is one of the most important pages that affect conversion. In this research, I used eye-tracking technology to figure out how different list page lay-out affect users’ eye movement.
Team: Yuzhou Guo, Pengyi Huang, Anan Sun
My Role: User Researcher
Date: Sep, 2014
Deliverables: User Research Report
Before this research, I sorted out some basic e-commerce list-page design patterns. Here are the three typical ones. Below will be a eye-tracking experiment based on these three typical patterns.
– Grid Layout
When list-page is designed in grid layout, according to the eye-movement plot showed below, patterns of eye plots are basically in Z or “弓” shape, which indicate high reading efficiency. Risk of misreading due to jumping across wrong lines can be reduced.
Due to this reason, when a list-page contains rich information, using grid layout is a more effective choice. The downside is that since pictures and texts are showed in this pattern are small, it might cause information cognition overload for users. Below is a typical list-page that display SKU under grid layout.
– Across Column Layout
Under across column layout, eye-movement are mainly in Z shape and F shape. As described above, Z shape enhances reading efficiency. When eye-movement plot shows F patterns, it indicates that users are initiatively processing information. Therefore, across the column layout can be applied in pages which contains intense information for users to process. The downside of across column layout is that each page can only show limited information if it is under such layout.
Below is a brand promotion list-page. This page not only contains brands information, but also popular items under these brands, promotion dates, etc.
– Waterfall Layout
The Under waterfall layout causes users eye-movement plot to be usually in a S shape, which indicates a fluent reading experience. The disadvantage of this layout, as showed below, is that certain information is easily missed out.
Therefore, the waterfall layout is more suitable for websites of where browsing of pictures maters most. Below is a social shopping website called Mogujie, whose list-page is designed in waterfall layout.
Through this research, we summarized features of typical list-page layouts, including information-carrying capacity, browsing/searching efficiency, information cognition difficulty, promotion effectiveness, and “shopping” atmosphere.
Below is a summarise of these features in radar chart format. These findings become some guidelines for UI designers applied in later list-page design.