Foldable phone
Reachability
Research
Duration
4 weeks
My contribution
Test design
Test execution
Data analysis
Team
Interaction designer * 2
Design Technologist * 1
4 weeks
Test design
Test execution
Data analysis
Interaction designer * 2
Design Technologist * 1
In 2021, Xiaomi introduced its first Foldable device MIX-FOLD. Given its unusually large size and heavier weight, it is necessary for MIUI’s OS design to match these physical traits. In order to guide our UI layout, we designed and executed an experiment around thumb reachability, mapping out the areas that are easy to reach and areas that should be avoid when placing frequently-used buttons.
To get a sense of how one interacts with foldable phone on a daily basis, I used Xiaomi Mix-fold for 1 week and observed 20+ people’s interaction when handed a foldable .
Natural position is the way people grab the device by instinct. Most people would start with two hands evenly supporting at the back and their two thumbs naturally hanging above the lower half of the screen. Noticeably, depends on their hand-size, some people would put their little finger against the lower edge of the device to add extra support
While users are interacting with the UI, I found the collaboration between two hands follows certain pattern:
Even though index fingers are involved quite often while using foldable devices, its clickable area nearly covers the entire screen, so we scoped our research around the more valuable thumb-click reachability.
Two tests are proposed to reflect the reachability map for the stabilizing hand and the active hand respectively.
1. A red cube will appear at a random position on screen
2. Long press on blue cube, wait until red cube turns green and click on it**
3. Repeat 1-2
4. If a cube can’t be reached, skip by swiping on the edge of the screen, the cube will be count as unreachable
5. The test finishes when all positions have been covered
6. Switch hand and go through the same process
.gif)
1. A red cube will appear at a random position on screen
2. Long press on blue cube, wait until red cube turns green and click on it**
3. Repeat 1-2
4. All cubes must be clicked
5. The test finishes when all positions have been covered
5. Switch hand and go through the same process
.gif)
The blue origin cube is set to measure the velocity it takes to reach each cube. Long press is designed to eliminate the influence of momentum and keep the clicks on an even pace.
Ideally the origin point should be close to user’s nature thumb position. To achieve the best result, we invited 40 people with various gender and hand-size to mark their natural thumb position, cube that is marked most frequently is set as the origin.
Previous observations showed that people who hold the device with their little finger at the bottom will have a lower range of motion. To even out the effect of this we asked half participants to have little finger support and half without. Also, participants’ hand size has to be between 16-18.5cm, to eliminate the extreme cases.
In test A, we can see a relatively clear separation of reachable - hard to reach - non-reachable areas. It is also noticeable that the lower edge has a relatively low success rate ( average 78%), left and right sides have surprisingly high success rates (average 94.3%).
In test B, difference in click-speed is less conspicuous but a trend can be observed that resembles test A.
Our reachability map has helped many designers to make important design decisions and innovate for more user-friendly design. It is a challenge unique to foldable, large screens.
Move interactive elements down and visual elements up will make sure that frequently performed actions can be operated with ease
Placing password entry, one of the most frequent action in the middle, which is the most hard-to-reach zone is not a wise choice. Therefore, we introduced a responsive design: location of password is automatically determined by the location users swipe up, which is most likely on the left or right side of the screen.
The map we produced serves as a straight-forward guide for people who are willing to add “reach-friendliness” into their design criteria. However, design decisions are complex mixtures of different factors and constraints, improvement on one aspect usually means trade-off in another. We have provided design recommendations with good reachability, but it is eventually up to individual designers to determine whether they would stick to this "rule-of-thumb”.