Touch Zones and Assumptions
Back in 2014, just before the release of the iPhone 6 and 6Plus, Scott Hurff made an interesting observation about the iPhone screen sizes. Hurff’s observation was that the natural touch zone for an iPhone has shrunk down after the introduction of larger screen sizes and that it’s harder to reach the top of the screen.
Scott’s observation has gained a lot of attention since then and the touch zones’ image he posted back in 2014, has been circulated amongst designers, and pretty much forms the basis of the idea that the navigation should be bottom heavy.
While the bottom heavy navigation is a great idea, and one that’s been explored often. I’d argue that the entire top area isn’t all that unusable.
Essentially, the touch zones are based on an assumption that the thumb is anchored to the bottom right corner of the display. The bottom right corner anchor makes sense if it’s an iPhone 4S, or an iPhone 5s. That sort of grip, isn’t ideal for the iPhone 6 or 6Plus, as it’d disturb the balance of the phone if the thumb were to try and reach at the top. Instead, people grip their larger phones differently, which tends to shift their thumb anchor a little upwards and more towards the centre than the bottom of the screen. Touch Zones look different if the position of hand is taken into account as well.
If I were to pick the touch zone on the right, the changes made to the UI in iOS 11 would make some more sense. (The top navigational bar containing bold title, but then offering the search bar or some other interact-able element exactly below the title, instead of bottom of the screen).
While it makes sense to shift some of the elements of the navigation bar downwards, shifting the entire navigational structure to the bottom would potentially leave some interact-able area at the top
While I don’t have enough data to prove which one of the touch zones more accurately represents the ideal zones for thumb-reach, I hope more and more designers take the hand position into account when using touch zones.
Modern Touch-Friendly Design
* Place primary content and actions at the center of the screen
* Place secondary actions and tabs along the edges
* lace tertiary functions behind menus
* Research how users perform specific interactions. Grip, task, context are all key.
* Design for the different ways people use their devices, not just one way
* People look at the center of the screen - keep key content in the center
* People touch the center of the screen - center key actions if possible
* People only tap what they see - keep room around touch targets so users can tap and see state changes.
* People use different devices in different ways - gather data on how users use your UIs
Why care about this?
UX research into touch interaction suggests:
* 75% of users touch the screen with only one thumb.
* However, 49% of users use their phones with a one-handed grip, 36% hold it cradled (phone in one hand, tap with the other) and the other 10% use it with
both thumbs. This makes that 75% number slightly misleading.
* 67% of one-handed use is with a right thumb and 33% with left.
In recent years, our understanding of how people grip and touch mobile phones and tablets has become significantly more nuanced. It doesn’t make sense to assume every user interacts with a phone in the same way (as the Thumb Zone encourages), but there are newer guidelines Steve’s research over years has captured that I like to follow.
Users interact with their phones in many different ways. It’s essential to design for the variable ways users use their devices and not just one way. It’s common for users to change their phone grip for different types of interactions, based on the task and context. In addition, by moving their fingers, users can change the area of the screen their thumb can reach.
Users really like the center of the screen!
Hoober's studies highlighted that when given the choice, users preferred to move content to a position in the center of the screen and would then tap it. He suggests that key items you can read or click should be in the center of the screen while secondary options providing path to other screens (routes) are placed along the top and bottom of the screen.
This is one of the reasons why Material Design’s suggestions, like the Bottom Bar, work well.Bottom navigation bars are closer to the edges and provide comfortable access to key actions. It's perhaps unsurprising that in recent years, bottom navigation patterns have increased in popularity.
