Maybe We Should Consider the Thumb-zone Rule for Mobile Users

This day, the phone size transforms to a wider display than before we have 2015’s phones, popular screen size back then was 4.7 inches. Five years later, the popular screen size in 2020 is around 5.7–6.2 inch, much larger than before. Also, the display ratio gets bigger, which is 18:9 and 19.5:9.

Based on Steve Jobs’s statement, people love a 3.5-inch phone since it fit comfortably for one-handed. But today, devices which smaller than 4-inch screens sold less than 1%. Statista shared the data chart of phone shipment based on size. So, we have to build product which have reachable for our thumb.

I did a simple research to dig what people’s preference for the Search Bar position relates to the thumb-zone.

A/B Testing

I did A/B testing on my Instagram story using a polling feature. It is a simple method to gather data from my friends and acquaintances as respondents of my research.

As you have seen, the result told us that 67% prefer to place a Search Bar on top of the page. I asked a few of them why they choose the A design, their responses are, “I am used to seeing the search bar at the top on the other site. Without needing to think, I know it was there.” It is aligned with Jakob’s Law,

“Users spend most of their time on other sites. It means that users prefer your site to work the same way as all the other sites they already know.” — Jakob Nielsen, Law of UX.

But, there are 33% of respondents who choose the B design. The reason is the thumb-zone. They found it difficult to reach the Search Bar as they visual it to their phone, which a wide-size phone (18:9 and 19.5:9). They told me that the B option is a good alternative as it is reachable, conform for one-handed users, and close to the other menu at around the above-the-fold bottom position.

Steve Hoober, in 2013, do a 2-months study of the way people naturally hold and interact with their mobile devices.

49% of users interact with their phones in a one-handed way and people still interact with their phones concurrently performing other tasks.

So, we need to consider our decision while designing the placement of the elements to support one-handed and two-handed users.

Design Implementation

Finally, I go with option B. Then I use Figma to create a high fidelity design, which implements it on Pet Adoption App.

I put the Search Bar near the user’s thumb on the home page. It can be easy to reach the search bar when they’re riding a bus, standing, holding something in the other hand, or doing anything while they need to search on the app. As you scroll the home page, the search bar will attach at the top of the page. On the other pages, such as Pets and Health, provide the search bar at the top of the menu due to the complexity of the content on the page.

Other Consideration

Aside from one-handed users, we also need to consider the complexity of the menu and the page. Teisanu Tudor gives us a nice example of a messy thumb-zone.

See, it turned out to be a mess. So, as a designer we should make a wise consideration based on many user scenarios in the real life.

Here are some readings with a deeper discussion about thumb-zone:

  1. How Do Users Really Hold Mobile Devices? By Steven Hoober;
  2. We All know It, But We Rarely Follow It by Teisany Tudor;
  3. Laws of UX by Jon Yablonski.

I’m an UI/UX Designer. Try to write anything in my head