Case study · Xiaomi · HCI research

Touch Hot Zone

Mapping where thumbs actually reach on a 6.8-inch screen, so layout decisions stop being guesses.

HCI Research · Experimental Design · Data-informed UX
144
screen zones measured
40
participants, both hands
75%
of users operate one-thumbed
40%↓
shorter task path shipped
01Overview
Overview

The first HCI design research project initiated by the design department at Xiaomi. We measured how thumbs really perform across today's large screens, turned the data into a hot zone map designers use daily, and packaged the method so it could be rerun on foldables and tablets.

My contributions
  • User research
  • Experimental design
  • Data analysis
  • User experience design
Team
  • 2 UX designers
  • 1 user researcher
  • First research project by the design team
02Screens outgrew thumbs

Steve Jobs called 3.5 inches the perfect size. Since 2012 screens kept growing anyway, and Xiaomi's bestsellers now run about 6.8 inches. Our thumbs did not grow with them, yet most layout rules still assumed they had.

The study aimed at three deliverables:

  • 01A touch hot zone map designers can use daily
  • 02Design guidance Xiaomi's business teams can apply
  • 03A replicable method for foldables and tablets
03The setup

Desk research surfaced two dominant single-hand grips, pinky supporting the back of the phone or catching its bottom edge. We scoped the study tightly so the data would stay credible on a limited budget.

  • Xiaomi 11 · 6.8 in
  • Single-hand use
  • Thumb clicking
  • Seated, stationary
  • Left and right hands
  • 50 / 50 gender split
04The experiment

We split the screen into 144 zones sized from Apple's ideal 9 by 9 millimeter target. In each zone, participants long-pressed a square, waited for it to turn green, then tapped it. 40 people, 20 per grip style, ran the task with both hands after 10 practice rounds.

Four screens of the tap test app: a welcome form collecting name, gender and daily phone-use habits, an instruction to hold the phone one-handed and tap a comfortable spot, the tapped grid with a confirm button, and a screen asking which grip the participant is using
The test app we built. Participants register, calibrate a comfortable spot, then declare their grip.
Four more screens of the tap test app: practice mode instructions, a trial where a blue square is long-pressed while a gray square waits, the gray square turned green and ready to tap, and the experiment 1 instructions asking participants to keep their palm in place
One trial: long-press the blue square, wait for the target to turn green, tap it. 10 practice rounds first.

Five metrics were collected for every zone:

  • Hit rate
  • Abandon rate
  • Misoperation rate
  • Click duration
  • Click offset
05What the data showed

Per-zone hit rates fell into three clean bands: an easy zone under the thumb's natural sweep, a stretch zone reachable with effort, and a dead zone the thumb abandons. The maps below are the real data, first how to read one, then both hands side by side.

The hit-rate heatmap with its legend: each cell shows the percentage of people who tapped that zone successfully. Green cells mean 75% or more hit the target, yellow 25% to 75%, red 3% to 25%, and black cells were hit by no one
How to read the map. Each cell is one zone’s tap hit rate: green 75%+, yellow 25–75%, red under 25%, black untouched.
The real hit-rate heatmaps from the study, two full phone screens side by side: left hand and right hand, each covered in per-zone percentages, with the green high-hit-rate pool sitting low on the thumb's side and fading to red and black toward the opposite top corner
Per-zone hit rates, left hand vs right hand. The green pool mirrors with the thumb.
The heatmap annotated with the three reach bands: the green center is reachable with just a little thumb movement, the yellow ring is reachable with some effort but risks tapping the wrong spot, and the dark top corner is basically out of reach with a high rate of mis-taps
The three bands on the real data: easy under the thumb, stretch around it, dead zone in the far corner.
06From map to shipped design

We turned the map into design guidance and audited MIUI screen by screen, overlaying the zones on real UI to check where every control lands. The lock screen shortcuts, notifications and the file manager below are a small sample of that review. The full guidance covered static fixes, moving controls into the easy zone, and whole-flow redesigns, with the biggest win, bottom tab navigation replacing top tabs, launching in MIUI 15.

Three lock screens side by side: an iOS lock screen, the MIUI lock screen, and the same MIUI lock screen with the touch hot zone map overlaid, showing the camera and flashlight shortcuts sitting inside the easy zone
Auditing shipped UI: the map overlaid on the MIUI lock screen puts its shortcuts in the easy zone.
The overlay applied to more screens: lock screen notifications landing in the stretch zone, and the file manager app whose tabs and recent files sit across the easy and stretch zones
The same audit on notifications and the file manager, zone by zone, control by control.
07Takeaway
“3.5 inches is the perfect size for consumers' hands.”Steve Jobs, 2010. Screens kept growing anyway.

The findings were shared across design, product and research teams, and the method became the template for the folding screen, gesture and eye-tracking studies that followed.

Presenting the study on stage at Xiaomi, standing at a Mi lectern with a microphone in front of a large screen showing the research deck's welcome slide
Sharing the findings with the product, design and user research teams, to unanimous praise.

Want the full dataset and method?

Next case study →
sherrrryz@outlook.com · happy to walk through the research