GH GambleHub

Eye-tracking and UX navigation

1) Why use Eye-tracking

Eye tracking shows exactly how users scan the interface: what they notice, what they ignore, where they are lost. It complements click and scroll metrics, revealing the path of attention and the correspondence of the visual hierarchy to the user's tasks.

Key cases:
  • Check navigation and information architecture (menus, filters, search).
  • Validation of the first screen/above the fold and accents.
  • Comparison of card/directory/table options (F-pattern, Z-pattern, Gutenberg diagram).
  • Diagnosis of banner blindness, overload and "visual noise."
  • Products with a high bet on accuracy: finance, bets, live markets, cashier.

2) What artifacts does eye tracking give

Heatmap: aggregated intensity of fixations by region.
Gaze plot/Scanpath: sequence of fixations (numbered points) and saccade (arrows).
AOI metrics: indicators for the specified interface zones (buttons, fields, menus, banners, cards, tables).
Transition matrices: how users "jump" between zones (navigation habits).
Segment reports: differences in attention by role/device/experience.

3) Basic attention patterns

F-pattern (texts/tables): top row → left column → horizontal below.
Z-pattern: left top → right top → diagonal → right bottom.
Gutenberg diagram: strong/weak quadrants, natural reading path.

Blind spots: right/lower areas on dense screens, "banner blindness."

Competing anchors: discount dies, flickering elements, animated banners - "steal" attention from CTA.

4) Metrics that we operate

For each AOI and for the screen as a whole:
  • TTFF (Time to First Fixation) - time until the first fixation on the zone.
  • Fixation count/duration - number/total duration of fixations.
  • Dwell time - total time in the zone (including re-calls).
  • Revisits - number of returns in the AOI (sign of difficulty/importance).
  • Transition probability - probability of transition from AOI A to B.
  • Sequence score/order of fixations - how early the zone falls into the sequence.
  • Scanpath length/Entropy - route length/randomness (low entropy = clear hierarchy).
  • Coverage/Convex hull - visual inspection area (excess bypass = overload).
Interpretation short:
  • Low TTFF and high dwell on CTA - good (quickly noticed, thought and clicked).
  • High TTFF for navigation - bad (searched for the menu for a long time).
  • Many returns to one block - a suspicion of ambiguity or a mandatory action without prompts.

5) Study plan (template)

The goal is to test whether the user finds key navigation items quickly and predictably.
Segments: 2-3 (beginners/experienced; desktop/mobile).
Sample: 6-8 per segment (qualitatively) or 25-60 (quasi-quantitatively).
Objectives: 5-7 realistic scenarios with controlled start (see below).
Equipment: stationary tracker/mobile installation/webcam (see § 7).
AOI: pre-mark key elements (logo/search/menu/filters/CTA/banner/card/table/cache).
Procedure: calibration → task → recording results → short debrief without leading questions.
Yield: heatmap, scanpath, AOI metrics table, recommendations, and A/B hypotheses.

Task Script Template

1. "Find and turn on the Dark Theme (or set a rate limit)."

2. "Filter the directory by provider X and sort by RTP."

3. "Open the cache and look at the available output methods."

4. "Find the live event and add the outcome to the betslip."

5. "Find the Rules and Responsible Play page."

For each step, we fix TTFF, transitions, success and runtime.

6) AOI marking: best practices

Make the zones semantic: "Full main menu," "Search," "Filters," "Game card: cover," "CTA: Play," "Promo banner," "Bread crumbs."

Separate informants (labels, statuses) and interactive (buttons).
On mobile, consider hidden panels (burger/curtain) as separate AOIs.
For tables/factors: separate AOI by columns ("League," "Live indicator," "Factor 1X2," "CTA Add").
Do not crush to pixels: 10-15 AOI per screen is the optimum for analysis.

7) Equipment, accuracy and limitations

Hardware trackers (desktop/mobile rigs): high accuracy, good for dense UI (tables, coefficients).
Webcam (remote ET): cheaper/faster but higher noise, worse for small purposes; fit for a rough hierarchy.
Calibration - critical: 5-9 points; repeat on offset/fatigue.
Think-aloud can distort the look pattern - use minimal, better post-task interview.

8) Analytical pipeline

1. Data quality: tracking accuracy, loss percentage, valid fixations.
2. Summary of tasks: success, time, errors, subjective scales (SEQ/UMUX-Lite).
3. AOI-table: TTFF, dwell, revisits, transitions, entropy - by segment and device.
4. Heatmap + Scanpath: we are looking for extra anchors of attention, "sticky," omissions.
5. Hypotheses and solutions: what to rearrange/enlarge/rename/hide; what clues/scaffolding.
6. Prioritization: Impact × Effort; Quick Edits → Prototype → Benchmark Retest.
7. Validation: A/B on key metrics (navigation CTR, task time, step conversion).

9) Typical finds and how to react to them

High TTFF on search/filters → make them constantly visible, increase contrast/label.
The banner draws attention from the primary CTA → reduce the visual weight of the banner, exchange positions, add a frame/CTA font weight.
Long scanpath on cards → simplify visual primitives (fewer dies/labels), standardize previews.
Weak status/error detection → color/icons + proximity to the field, ARIA-label, micro-copywriting.
Navigation dead ends → explicit "returns," breadcrumbs, fixed hat, duplicating CTA.

10) For iGaming/Financial UIs: Examples of AOIs and Solutions

Cash: "Deposit/Withdrawal" tabs, methods, limits, commissions, ETA → check TTFF and path to "Confirm."

Betslip: adding an outcome, changing the amount, coefficient hints, risk warnings → minimize micro-movements of the gaze.
Live markets/factor tables: coefficient column priority, sticky hat, change highlighting.
Slot lobby: provider card, badges (jackpot/freespins), mechanic filters → avoid visual noise so that CTA "Play" is not lost.
Responsible game: placing limits in the high attention zone, do not hide behind a burger.

11) Report template (copy to wiki)

Product/Version/Device Context

Tasks: list, success criteria

Segments: N for each

AOI: Diagram/List

Key Metrics: TTFF Table/dwell/revisits/transitions

Finds (Top-5): brief + visual (heatmap/scanpath)

Impact × Effort Recommendations

Experiments: A/B plan, expected effect, term

Risks/comments: limitations of data/generalizability

12) Pre-launch checklist

  • Study objectives/questions formulated
  • Tasks are realistic and atomic (≤60 sec/task)
  • AOI marked, legend agreed
  • Calibrated, repeated at offset
  • Interface options are counterbalanced (A/B order)
  • Consent gathering and privacy policy ready
  • Analysis Plan/Table Templates Procured
  • UX control metrics (success, time, SEQ) are connected

13) Antipatterns and interpretation traps

Consider "more fixations = better." Sometimes it's confusion.
Draw conclusions only by heatmap without sequence (scanpath).
Mix different screens/resolutions into one heatmap.
Ignore content and task context (banner may be appropriate).
Transfer outputs to all users without segmentation/device.
Draw loud conclusions on 5 participants as on a quantitative study.

14) Ethics and privacy

Informed consent: goals, recording, storage, anonymization.
Minimize PII, store raw data to a limited extent, use ID.
For sensitive scenarios (finance/games) - soft wording, the ability to skip a question, secure demo data.

15) Fast start (one-pager)

1. Describe 3-5 key navigation tasks.
2. Mark 10-15 AOI on target screens.
3. Conduct 8-10 sessions (10-12 minutes each): calibration of the → task → a short debrief.
4. Summarize the AOI table (TTFF, dwell, transitions, entropy) by segment/device.
5. Generate Top-5 finds and 3-5 A/B hypotheses (positions, dimensions, copyright, visibility).
6. Run quick edits → test eye tracking on the same tasks.

Contact

Get in Touch

Reach out with any questions or support needs.We are always ready to help!

Start Integration

Email is required. Telegram or WhatsApp — optional.

Your Name optional
Email optional
Subject optional
Message optional
Telegram optional
@
If you include Telegram — we will reply there as well, in addition to Email.
WhatsApp optional
Format: +country code and number (e.g., +380XXXXXXXXX).

By clicking this button, you agree to data processing.