Designing a Thumb-Friendly User Experience

While user experience continues to gain focus from mobile developers, every element concerning the ease of use has become the subject of focus. Specifically, a large focus has been placed on how hands adjust to use different mobile devices and experience, especially our thumbs.

The thumbs are the part of our hand that makes us different from other animals, and the most crucial finger for single-handed mobile navigation. As per a study by UX Matters, the majority of people hold their mobile device single-handedly and use the thumb to navigate through the app, designers and app makers have to think hard about making their apps friendly for navigating with thumbs. This post shares tips on how to design mobile experiences with thumb usage in mind.

Manufacturing thumb-friendly devices

The vast majority of smartphones launched in recent years tend to be bigger in screen size. Even Apple, which always tried to remain true to user experience through other means than the screen size, finally succumbed to this trend and quite unexpectedly joined the large screen bandwagon with the launch of iPhone 6 and 6 Plus. The rapid decline of smaller devices is already evident everywhere, almost with every mobile brand. As per a mobile benchmark report produced by Adobe, smartphones with 4” or smaller screens already went down by 11% and now in the end of 2016, the decline has become widespread.

Larger screens are simultaneously great for precise finger taps and challenging for single-handed thumb navigation since it needs to cover a larger area. Naturally, app makers have to focus on thumb friendly design more than ever.

What is mobile thumb zone?

As screen size increased, the term “mobile thumb zone” suddenly became a crucial part of the designer vernacular. What does this mean and what does this signify in design perspective? Let us answer these two questions first.

When users hold a phone single-handedly for navigating through the app, they mostly use their thumb. Naturally, the mobile user interface must provide majority of clickable elements and important navigation buttons within the comfortable reach of the thumb. This comfortably reachable zone around the user’s thumb is referred as mobile thumb zone.

What is significant about the mobile thumb zone for the user experience? Primarily, the comfort of reaching navigation elements with thumb helps getting things done more easily and with least difficulty. So, a UI design optimized for the mobile thumb zone will ensure better user experience and higher overall user engagement.

Prioritizing UI elements for the mobile thumb zone

Designers must prioritize a few points when it comes to the mobile thumb zone. It is wise to admit that you cannot bring all the navigation and clickable elements within the reach of the thumb, and with that, you need to make a priority of elements put within this area around the thumb. While the less important design elements can be displayed outside this zone, some of the most common and frequently clicked buttons and navigation elements must be displayed within this thumb zone.

There is no fixed area with a fixed dimension for the mobile thumb zone as it is highly variable since it changes with the different users, as well as the device. With the difference in hand size and screen dimension of the device in use, the size of the zone you design for varies. However, a typical average dimension and hand size should be considered for thumb zone consideration. Meeting the average requirements will help to make the design pattern friendly to various hand sizes and device screen dimensions.

Additionally, your thumb zone design should be able to address both the right handed and left handed users. A study by UX Matters reveals 67% of users use their right thumb to access the screen. But in spite of this stunning statistics in favor of right-handed users, you are morally obligated to make your design equally great for handling with both hands.

Here are a few specific tips to keep in mind:

1. Thumb zone for responsive web design

Design principles in relation to the thumb zone in responsive websites are different than those of mobile apps. Mobile websites or responsive websites uses hidden menus for a clutter-free experience. Now this needs introducing a drop down menu for accessing the pages as and when required. Now for ease of single handed use if the navigation aviator can be placed within the thumb range all the menu items become easily accessible. Thus responsive web design can make the user experience better by placing elements within the easy reach of thumbs.

2. Thumb movement over touch screen

As mentioned above, it is clear that thumb-centric design consideration is key to making UX better. Now over the touch screen, the various areas can be considered as easy to reach, harder to reach, and areas in between.

In this respect, the basic trick is all about designing to address the flow of the thumb over the touch screen. If UI elements can be placed as per the thumb movement and flow, then users can experience more comfort and ease while navigating through the mobile app or mobile website.

3. Thumb-friendly gestures

Your app must allow various gestures and touch-based commands for desired actions and outputs. Consider the variety of touch inputs and gestures we use for navigating through mobile apps and mobile websites. It varies from the pinch, tap, double tap, zoom, tilt, and many others. Do your app and website allows using most of these gestures easily with your thumb while holding the phone single-handedly? If yes, your UI design is addressing the thumb-friendly gestures.

In conclusion

There are many elements to take into consideration when formulating your mobile user experience, but it’s extremely important to keep thumb friendliness top-of-mind. If you have additional design suggestions, please leave your thoughts in the comments below.