Have you ever browsed a website on your mobile phone and the buttons were smaller than your thumb, so you had to zoom to click the button? Maybe used an app that had unconventional button placement, either because the buttons are not designed for your finger size or because the location is placed in an inaccessible area.
Having bad user experience design (UX) will make your user runaway and possibly find an alternative to your app without thinking twice. That’s not what you want now, is it? We browse apps and websites on our phones all day long. Aiming to provide an immersive experience is key to a good UX design, at least that’s what expert Steven Hoober thinks.
In his book Designing Mobile Interfaces” his finding showed that 49% of the people held their phones with one hand, 36% cradled their phone using both hands, one to tightly secure it in place and the other to tap with, and 15% held it portrait or landscape with both hands. In all cases, they were using their thumbs to browse the screens.
Touch Target Size vs. Average Thumb Size
Mobile app designers tend to create buttons and icons following the suggested target sizes. Apple’s iPhone Human Interface Guidelines suggests that an ideal touchscreen target size is 44 pixels wide and 44 pixels’ length. Android Material Design suggests that is must be 36 x 36 pixels. Microsoft Guidelines for Targeting suggests a touch target size of 48 x 48 pixels. Nokia also indicates that a target size 28 x 28 pixels. So do these target sizes align with the average dimension of the adult thumb?
According to Smashing Magazine, all of these target size suggestions are smaller than the size of the average adult thumb, which equals 2.5 cm, and converts into 72 pixels. Designing icons with this size does wonders as you want the user to ‘single tap’ his way through your application.
Locate Your Content on “The Thumb Zone”
When planning to design a mobile app, you must think about accessibility of content. The ‘contact patch’ will vary based on the patch size of the user. Look at it this way. The entire screen is segmented into primary, secondary and tertiary.
The primary has content situated in the middle of the screen. Text messages, stories, news feed, photos and videos, any content that will instigate the user to interact easily using opposable thumbs.
Hoober used the term “The Thumb Zone” to the map that he created to show app designers how to locate content based on priority on touch screens for a thumb-friendly experience.
A great example of an app that follows the “The Thumb Zone” structure is Facebook. The main highlight of content in the app – which is the newsfeed – is located in the middle of the screen, also known as the natural area. This gives the user the ability to scroll over the app quicker. We can also see the friend request icon included in the natural area.
Since viewing the Facebook stories is not the main goal of the user, it’s placed in the stretch area.
In the upper “Ow” area we can see a small part of the search bar, in addition to the ‘more’ button, which is considered less relevant.
Keep the Thumb-Friendliness on the Top
There are a lot of elements that should be taken into consideration while designing for a mobile app user experience. Making it thumb-friendly should be on top of that list. Give the users something to think about, a good user experience. Don’t design a pretty little app which is sluggish, chunky and inconvenient to navigate through. Always out design comfort Make it reasonable with a clean design that comforts their thumbs to encourage your users to stay more on your app.