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.

Screen Shot 2016-06-19 at 10.28.22 AM

– 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.

Screen Shot 2016-06-19 at 10.28.40 AM

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.

Screen Shot 2016-06-19 at 10.48.32 AM.png

– 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.

Screen Shot 2016-06-19 at 10.51.09 AM.png

Below is a brand promotion list-page. This page not only contains brands information, but also popular items under these brands, promotion dates, etc.

Screen Shot 2016-06-19 at 10.56.40 AM

– 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.

Screen Shot 2016-06-19 at 10.59.44 AM

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.

eyetracking summary

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: