Eye‑Tracking Reveals the Best Layout for Ele.me’s “Frequent Order” Tab

Background

Ele.me users frequently reorder meals, but the app lacked a dedicated UI area for repeat purchases. A new Frequent Order tab was added on the home page to aggregate previously ordered stores and streamline repurchasing.

Research Objectives

The study focused on three design dimensions:

Card layout : compare product‑first versus store‑first arrangements and their impact on information‑retrieval efficiency.

Discount attribution : evaluate the effect of placing discount information above or below the store name on visual attention.

Visual strength : assess strong versus subtle styling of discount cues.

Rapid Eye‑Tracking Experiment

Equipment

Used Tobii Pro Glasses 3 (wearable eye‑tracker) together with Glasses 3 software for recording and Tobii Pro Lab for analysis.

Preparation

Create a project in Glasses 3; each recording is named after the participant (e.g., “User1‑xx”).

Calibrate the device for each participant, optionally using corrective lenses.

Load the prototype screens (seven design variants) into the Glasses 3 software.

Procedure

Participants wear the glasses; the system streams video wirelessly to the computer.

During the trial the participant browses the prototype while gaze data are recorded.

The experimenter observes real‑time gaze paths and notes visual flow.

Data Processing in Tobii Pro Lab

Open the project directory; each Recording appears in the list.

Open the Analyze page for a recording.

Import static UI screenshots (design variants 11, 12, 13, 14, 21, 22, 23) into the Snapshot images panel.

Select the video segment that corresponds to a given design on the timeline.

Right‑click the snapshot and choose Run assisted mapping. The software synchronises gaze points with the static UI, generating a heat map and a gaze plot.

Visualizations

The Visualizations tab allows toggling between:

Heat Map : aggregated fixation density.

Gaze Plot : sequential eye‑movement trajectories.

Results

Nine participants evaluated seven design variants, producing 126 visualizations (heat maps and gaze plots). A consistent pattern showed that discount information placed below the store name caused users to misinterpret the discount’s ownership. The design was revised by moving store information to the top of the card and finalising the layout, discount placement, and visual emphasis.

Conclusion

Rapid eye‑tracking with Tobii Pro Glasses 3 and Pro Lab delivered concrete, data‑driven insights within a short timeframe, avoiding lengthy A/B tests and reducing research costs. The workflow—project creation, calibration, recording, assisted mapping, and visualization—can be reused for future UI design evaluations.