Chapter 7: Designing for Touch By Josh Clark (@globalmoxie) in the recently released “The Mobile Book”, by Smashing Magazine. Reflection by Kyle Keeling
At its most fundamental level, this chapter implores us designers to start designing for the physical and not just the digital realm when designing for touch. We need to abandon our conventions of desktop design, while keeping their foundations close to heart, and be inspired and influenced by industrial design. Fingers, hands and arms have replaced the fine tuning maneuverability of the mouse on touch devices, and this forces us to design physical experiences as well and visual ones. The way you interact with a screen using your meaty digits is quite different than with a mouse and the UI needs to adjust accordingly.
To help us down the path of designing for touch, Josh Clark discusses the “Rule of Thumb”. The thumb, as it turns out, is the most commonly used digit when dealing with a touch screen device. More common on mobile, but still prevalent on tablets. As a result, mobile sites should be optimized for the one-handed grip. This passive engagement by the user is not a new concept but this helps to reiterate how a user will engage with their device. Therefore, it is recommended to place primary tap targets in the “thumb-thumping” hot zone (not “tubthumping” for all those 90’s peeps). The chapter includes some illustrations to help visualize, but just pick up your device to get a sense of where these regions exist.
This recommendation for a best practice fundamentally comes down to, “content on top, controls on bottom”. This approach helps prevent the user from blocking that valuable content with their meaty paws. While this flips the traditional placement of top navigation on its head, literally, it’s a technique that is becoming more common in well thought out mobile experiences.
When working with mobile web apps, Josh Clark advocates a page-bottom navigation system, which has been discussed before by Luke Wroblowski (Off Canvas Multi-Device Layouts) and others I imagine. Page-bottom navigation is preferred because it saves valuable real estate for the content and avoids the pesky woes of “position:fixed”. Again, this is merely a suggestion and is not meant to be the one-stop solution to all the unique projects that are out there.
While the line between mobile and tablet are blurring, we can assume that tablets are typically a larger screen, less mobile, and potentially force a two handed experience. Due to the amount a real estate that exists on tablets, “few websites place primary navigation in easy reach of the thumb zone for either tablets or hybrids (touch and mouse, like the Surface); they favor cursor-friendly screen-top navigation instead”. Perhaps this is just a phase as we transition to developing and designing better experiences for targeted devices. Perhaps it’s mere laziness on the part of designers, or companies not seeing the ROI on a tablet catered user experience (I’m leaning towards this one).
In addition to proposing ideal target zones for various interaction on tablet devices, Josh Clark encourages us to think outside the box when in comes to touch interaction. One of my favorite suggestions was to think if there are any instances when a button can be eliminated and potentially replaced by a more intuitive, touch focused gesture. The familiarity and ease of interaction associated with tap and swipe are just two examples, but as other gestures become more common and mainstream the possibilities are abundant. Just don’t make them obscure, such as “place nose and 5 fingers and a thumb on screen to trigger new message”.
Ultimately, it is always necessary to consider the content and how it can best be presented for the users engagement. As long as those considerations are left at the forefront of any touch design, confusion and poor experience can be adverted.