It all start with the hand

Two of my colleagues have shared their "thumb tendinitis" issue with me, characterized by pain and swelling near the wrist of the thumb, worsen with thumb movement.

Tenosynovitis, which is proven can be caused by repetitive manipulation of thumbs and fingers too much.

Despite reading about the link between mobile phone use and tendonitis, I initially didn't think it was the phone to blame. I suggested less time on the phone and Nintendo. TBH I didn’t really take this seriously until I joined a project on a foldable device.

I got this new machine for interface prototype work, an uncommon large-screen mobile phone at the time, with an 8.02-inch screen and a weight of 269 grams.

I mean, it’s cool, but also BIG.

It was a bit challenging to hold and tap with a single hand. After daily use I began to experience symptoms of pain in the root of my thumb, just as my colleagues had previously mentioned to me.

Large-sized folding screen mobile devices magnify discomfort symptoms that would normally only appear after long-term use on regular-size mobile phones. And it might be avoided by design.

💡

THE RESEARCH

Foldable phones enable more diverse tapping gestures, with increased index finger usage in touch interactions.

When using a foldable phone, users typically adopt a two-handed grip: one hand bears the weight while the other taps. As the weight-bearing hand stabilizes the device, the tapping hand must stretch further and move more across the larger screen. This extended reach and increased movement can lead to fatigue during prolonged use.

Some previous research has shown in the book “Designing Mobile Interfaces” (2011) designer Steven Hoober coined the term “The Thumb Zone” — the most comfortable area for touch with one-handed use.

However, this thumb-zone map no longer applies to our foldable phones in 2023 since the screen size is way bigger and the holding postures differ on different devices.

The entire inner screen is divided into approximately 9mm✖️9mm small squares. During the tasks, we collect the accuracy and speed of the user clicking on each small square Thus obtaining the heat zone distribution of the entire screen.

The holding posture as one of the variables is controlled, and buffers are set for each square.

We tested with 40 people, whose hand size falls into the “standard hand size range” (international standard).

>> ①st Round Test: Get the Most-comfortable Square

Participants are asked to tap on 10 square areas they find most comfortable or effortless for their hands/fingers. The area receiving the most taps is designated as the "most comfortable square." It then serves as the starting point to which participants must return before each subsequent tap.

the most comfortable square

Red area (accuracy rate≤25%)

Hard-to-reach zone: an area that most people find difficult to tap without moving their hand.

Black area (accuracy rate=0%)

Unreachable zone: an area that cannot be tapped without moving the hand.

The three crucial hot zone maps obtained after data cleansing:

Green area (accuracy rate≥75%)

Easy-to-reach zone: an area that most people can easily tap on.

Yellow area (accuracy rate 25%-75%)

Reachable zone: an area that can be reached with some effort without moving the hand.

Here is the one of the results we got from the test:

The numbers on the image represent the success rate (%) of tapping each square. The white square is the "most comfortable grid" we mentioned earlier (the initial position users return to after each tap), so the number on this square can be considered 100%.

By assigning corresponding colors to different values, we ultimately visualized the hot zone maps for the left and right hands.

Of course, here comes how we use the maps.

This heat map became a crucial guideline for interface design of similarly-sized foldable phones. The mindset of always considering "can users easily reach this with hands?" allows the designers to assess user experience impact through the lens of “touch hot zones” when confronting new device sizes.

Based on this experiment's results, I crafted a report with interface design recommendations for this foldable device, here are some of the examples 👇👇👇

According to the hot zone map, areas towards the top of the interface are more difficult for fingers to comfortably reach, while areas towards the bottom are easily reachable. When designing interfaces, consider placing frequently used function buttons（or other components） in the lower areas.

Centered buttons are in the 「yellow」 zone, making them not that easy to tap.

If you'd like to discover more inspiring tips, feel free to reach out to me : )