The Thumb Zone: Designing For Mobile Users - TRooTech

“The Thumb Zone” coined by Steven Hoober is very important factor in design & development for mobile user interfaces. You simply cannot ignore the thumb playing across the mobile screens, which is why it should be taken seriously. You don’t want your user to feel inconvenience when using the thumb to interact with your application or website. Poor consideration in design for the thumb is revealed through these inconveniences.

When you conduct the user interface testing on wire frames with the thumb, you might see a sequence for placement, which you would have technically ignored. Isn’t thumb the way to interact with devices? The way the thumb interacts with the top space may differ from the way it interacts with the bottom space of your mobile device.  You will need to consider a few design elements when designing the interface keeping the thumb in mind.

According to Hoober, 49% of the people use a single hand to hold their smartphones, and they rely heavily on the thumb to bear the weight. Clark mentioned that close to 75% of the interactions with the smartphone occurred via the thumb, which proved its importance in accessing a smartphone. There are certain zones that are easy to reach for the thumb, and then there are the in-between areas and finally the ones that are hard to reach. You will need to design for the flow of the thumb zone in this case to make user friendly and interactive designs.

Handling Navigation Issues

Remember a time in mobile world, when you had to deal with dropdown lists for mobile navigation? While the interface was not slick as that of the modern times, it could help you get through the navigation part. While there are various navigation patterns in present times, you are probably still wondering which one is the best fit for your thumb. To understand the natural movement of your thumb, answer questions on whether you app has long list of links or mix menus to deal with? What type of menu suits your website best? If you have long list links then you need a full screen overlay menu, so that there is enough space to organize the different things required from navigation perspective. You will need to align clickable elements so that they are placed near the thumb zone. If there are no long list links, then you may want a sticky menu that keeps moving with your scroll. In case you have a huge website, then you will need to mix menus, and then prioritize the links based on their weightage in your app. The sticky menus are quite user-friendly, and oft visited, while the full screen menus are not high-priority menus. You will need to gather user data, and combine it with best designing practices to leverage your thumb zone and create user friendly designs.

Make the Cards Friendly

The card pattern design is very important in your app design. You may want to get it reviewed in line with your thumb zone to measure the user friendliness. The card patterns are quite popular as they are quick, easy and predictable. They can offer good content with minimal lines, which makes reading easy, and comprehending better. These cards allow you to perform certain actions such as send, save, done and close. Weather apps have actionable links within the card. You will need your thumb to work on the card to either save or share it.

While the weather based apps may use the thumb zone, there are apps that don’t use a thumb zone. You may want to check the card pattern, and then figure out if you need to design it for the thumb zone or not. There are some issues in here that you may want to address. A close button to the top corner of the card may be common, but it does not suit the thumb patter. You may want an alternative solution for this.

Gestures & Movement

Gestures are important when you are testing user interface for your app development. Tap, double-tap, swipe, pinch and press are common gestures, and some of them use the thumb. When designing the gestures for your app, you will need to design them for the thumb zone, so that these gestures can be performed naturally. You will need to study the swipe and other gestures and figure out how exactly does the movement occur? There is an assumption on how the thumb moves, and the reality is slightly different. Make sure your swipe gestures are away from the hard to reach areas. You will need to provide enough tapping space on your mobile app.

With the thumb movement given some thought, you are ready to launch the app. You will definitely get more users on board if you have given some thought to the thumb approach on the app.