Mobile UI ergonomics: How hard is it really to tap different areas of your phone interface?
I have seen many diagrams explaining easy/hard tap zones on mobile interfaces. While I do believe these diagrams, they are mostly without any explanation of the analysis behind. Because of this I decided to do an experiment myself, measuring the time it actually takes to tap different parts of a phone’s screen. I expect there’ll be some correlation between the time it takes to tap an area and the experienced difficulty of tapping. More on this later.
As observed by more UX practitioners, it’s normal for users to adapt the way they hold their devices to the interface of the app they’re currently using. But for this first experiment, so far, I’ve only tested single, right-hand use on an iPhone 5S. (yes, I know that’s an old phone now, but the reality is sometimes faster than I am).
As Steven Hoober notes in his study from 2013, How Do Users Really Hold Mobile Devices, users who interact with their phones hold them predominantly in three different ways, listed with the statistics from his research:
- one handed (49%)
- cradled (36%)
- two handed (15%)
Limiting the research needed for this experiment, I’ve focused on the dominant – one handed – hold.
The Experiment
For the test, I built a small web application with 7x12 tiles (=84). Each tile turns red once, in random order. When the test person taps a red tile, it instantly turns yellow for a moment and then back to white. The respondents’ reaction times – defined as red-to-tap – is stored per tile. The average tap-time for everyone who participated in the test is calculated and then visualised for easier analysis and digestion.
Red highlighting was chosen as it’s the colour which is most efficiently captures attention of humans. The tile size for iPhone 5S form factor gives a good approximation to the minimum tap area size as suggested in Apple’s iOS design guidelines (44x44 points).
Each test person was approached in a similar way, and asked to sit comfortably, holding the phone in their preferred hand while not resting it on any surface. The test persons were also asked not to use their other hand for any interactions with the phone during the experiment. It was stressed that the goal was to tap the flashing tiles as quickly as possible and focus on the task of tapping all tiles in the shortest amount of time.
To increase participation and by invoking a sense of competition from the testers, I told them they will be informed how they performed compared to other testers, prior to the test. This seemed to help focus them and it increased their attention.
The Results
Single-hand use (right-hand hold)
The diagram shows the average tap-time for 20 people, holding an iPhone 5S in one hand: their preferred, right hand.
It’s immediately clear that center and just below the center are the fastest to reach areas, and it takes almost 50% more time, to reach the upper and lower edges of the screen.
The vertical edge furthest away from the thumb is slightly faster to reach, than the closest edge.
Contrary to some claims, all corners actually cause significant delays in tap-time.
While this pattern is probably not super-surprising to anyone, it does confirm that there’s a sweet spot in the most natural resting position of the thumb. More surprising is maybe that there’s a slightly slower vertical zone before the last column of tiles on the far left. I.e. it’s actually faster to tap a tile further away, when it’s bordering the phone’s edge. The reason for this could be, that there’re less neighbouring fields which the user risks tapping and further, plus the condition that the edge can be used for aligning the thumb.
Limitations and Sources of Error?
- Small set of respondents (20). I hoped to have many more respondents, but figured out I’d never get to finish this post. So instead of never publishing these findings, I went for the 2nd best solution I could think of. This also means that some tiles next to each other have very different reaction times, as outlier data isn’t “ironed out” as it would with more tests.
- Only tested on iPhone 5(S) form factor. It’s a relatively small phone which rests differently from many other phones in the users hand. So these results may not be applicable to other form factors.
- Phone 5 touchscreen accuracy may have caused slower tap-times along the edges, due to mishits. In case of mishits, the test person needs to tap multiple times for a single tile, which obviously increases tap time for that tile. Having personally supervised all tests myself, it seems this has not been a significant issue. Ideally I’d have recorded mishits/mishit tiles to also get a measure of accuracy. Anyway, for the specific device, it’s also worth accounting for screen inaccuracies when laying out an interface.
- Definition of tap-time may be off. The tap-time also includes the time it takes for the test person to recognize a tile changing, reflect on that change and and initiate thumb movement. Visual changes along the edges may be harder to recognise, or, the fingers may cover a red tap, and will naturally add to the tap-time. This way, it’s possible, that it’s relatively faster for a user who already knows an interface, to tap off-center elements than this experiment suggests.
Next steps
This study was a small experiment I did to confirm some assumptions I had. When time allows I’ll dig into further analysis of some areas:
- Correlate with thumb-length: Is there an optimum thumb-length for phone-UI single hand use?
- Correlate with age: How does age affect our ability to reach different areas of the screen?
- Test more form factors as larger phones are becoming increasingly popular.
Further reading and references
- How Do Users Really Hold Mobile Devices, by Steven Hoober
http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php - iOS Human Interface Guidelines, by Apple
https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/LayoutandAppearance.html
Hope you liked this post. If you did, I’d love a recommendation or share.
I’m also on Twitter where I tweet about these things: @mibosc