List vs. Grid: Which Product Layout Drives More Sales on Smartphones?

The user interface (UI) of e-commerce platforms plays a pivotal role in driving consumer purchasing decisions. One of the most critical pages in mobile commerce is the Product Listing Page (PLP) — the screen where products are displayed for users to browse. To optimize the PLP for better sales performance, researchers combined AHP (Analytic Hierarchy Process) analysis with eye-tracking technology to understand which types of information capture user attention and influence their buying decisions.

Real-Time Insights: Tracking User Focus on Product Listings

To examine how users interact with PLPs, in their article The Product Listing Page UI Structure in Mobile Commerce: An AHP and Visual Attention Analysis of Key Information for Sales Enhancement (2024), Minhwa Lee, Younjoon Lee and Jeeyoun Kim, tracked eye movements as participants viewed products in two interface styles: list layout and grid layout. These two UI designs are widely used in mobile commerce apps, but they offer distinct visual experiences.

Participants were shown product listing pages displaying essential product information, such as price, product image, reviews, shipping details, and promotional offers. The research team applied RealEye to capture participants’ visual attention in real time. This process involved tracking users' gaze points, fixation duration, and frequency of attention shifts as they explored the pages.

‍

What Holds Your Gaze? Key Eye-tracking Metrics

By analyzing this gaze data, researchers were able to determine which layout style (list vs. grid) was more effective at drawing users’ attention to key information like price, reviews, and product images.

The study relied on several key eye-tracking metrics to analyze how users interacted with the list and grid layouts of the PLP:

• Fixation Duration: The amount of time a user's gaze is "fixed" on a particular area. Longer fixation durations indicate higher cognitive processing or interest in that area.
• Fixation Count: The total number of times a participant's gaze "lands" on a specific area of interest (AOI), such as a product image or price. Higher fixation counts signal repeated user interest or attention shifts.
• Gaze Duration: The cumulative time spent looking at specific AOIs. This metric is used to measure how much time users spend on key content like price, product name, and promotional offers.
• Heatmaps: Visual maps that show where users focused their gaze the most. "Hot" areas (red) indicate heavy user attention, while "cool" areas (green/blue) show lower levels of attention.

These metrics provided valuable insights into how users perceived and interacted with content on the PLP, enabling researchers to compare the effectiveness of the list layout vs. grid layout.

Results and Findings

The combination of eye-tracking and AHP analysis yielded several important findings about how users engage with the Product Listing Page.

1. Key Information That Drives Sales
Using AHP, researchers surveyed e-commerce experts to rank the most important information for driving sales. The top three were:

• Price Information (Rank 1)
• Review Information (Rank 2)
• Visual Information (Product Image) (Rank 3)

These findings highlight the importance of clearly displaying price and reviews, as they have a direct influence on purchase decisions.

2. List Layout Outperforms Grid for Text Information
Eye-tracking revealed that the list layout was more effective for driving attention to text-based information, including price, product descriptions, reviews, and shipping details. In the list layout:

• Users viewed price information more frequently and for longer periods.
• Reviews, promotions, and shipping information also received higher fixation counts.
• Scrolling was smoother and more consistent in the list layout, allowing for better exploration of product information.

3. Grid Layout Excels at Highlighting Visual Information
The grid layout was more effective at drawing attention to visual information (like product images) and CTA (Call-to-Action) buttons (like “Add to Cart” or “Buy Now” buttons). Key findings include:

• Users spent significantly more time looking at product images in the grid layout than in the list layout.
• Visual content attracted attention more rapidly, and users' gaze was more dispersed across the screen, focusing on multiple products at once.
• Call-to-action (CTA) buttons were viewed more frequently and for longer durations in the grid layout, as they were placed closer to product images.

4. Gaze Behavior Depends on Layout
Eye-tracking heatmaps revealed that in the list layout, attention was concentrated along the vertical scroll path, with users focusing on content in the center of the screen. In contrast, the grid layout produced a more dispersed gaze pattern, as users scanned products horizontally and vertically. This difference reflects how interface structure influences the way people navigate and process information on e-commerce platforms.

Design Smarter, Sell Faster: What E-Commerce Can Learn From Eye-Tracking

This research offers actionable guidance for e-commerce platforms aiming to optimize their PLP design for better sales performance.

Prioritize Price and Review Visibility - since price and review information are the most influential factors for purchasing, platforms should ensure that this information is prominent in the list layout. Key elements like “discounted price” or “customer rating” should be placed near the product title to grab user attention early.

Leverage Visual Engagement for Lifestyle Products - for product categories that rely on visual appeal (like fashion, furniture, or luxury goods), grid layouts are more effective. Product images should be bold and clear, and CTA buttons should be placed nearby to reduce cognitive effort.

Choose Layouts Based on Business Goals - platforms can mix layouts for different product categories. List layouts are better for detail-driven decisions (like electronics), while grid layouts are better for discovery-driven shopping (like fashion).

This study highlights the value of eye-tracking as a UX research tool. By tracking gaze data, platforms can identify areas where users hesitate or get "stuck" on certain content, leading to continuous UI refinement.

You can run a similar study!

Follow the steps below to start your own experiment with RealEye:

1. Go to RealEye Dashboard and create or log in to your account.
2. Purchase the License of your choice (https://www.realeye.io/pricing). If you need any custom adjustments, contact us at contact@realeye.io. We are happy to help!
3. Activate your license by following the instructions in the RealEye License Activation Guide

Ready to set up your own study? Visit RealEye Support page to learn more and keep us posted on your results! 🚀