Thumb Zone Interaction Design – Mobile UX
▲Photo by Andrea Natali on Unsplash
When Saha upgraded from the old iPhone 6 to iPhone 11 with the 2019 trend for new smartphones, I did not feel any exhilaration or anticipation, but I was shocked and shouted in my mind, “How big it is! I’m afraid I can’t get used to this heavy phone!” The huge upgrade from a 4.7″ screen to a 6.1″ screen iPhone 11 was a brand new experience for my hand. The first worry is that it would really hurt if iPhone 11 slipped from my hand when using it in bed (LOL). In the past, I was able to use a single hand to hold the iPhone 6, but now it’s been reduced to only three quarters of the screen width maximum. I have to shift my hand to press the power button as well. It requires a longer adaptation period for single-hand user transitions. Moreover, this reminds me of the Thumb Rules that I once read. If we apply them to devices in recent years, will it change the UI design rules followed by the designers?
▲iPhone 6 vs. iPhone 11
Do you use your smartphone with one hand only? If so, think carefully about whether you mainly rely on your thumb movement for operations or not? Senior interaction designer Steven Hoober summarized the following statistics from the quantitative research of 1,300 smartphone users in 2013:
- The ratio of single-hand smartphone users is 49%
- The ratio of right thumb operations is 67%
- The ratio of right thumb operations is 33%
Hoober’s research found that half of the users hold their phones with one hand and operate with their thumb. However, the trend of large-screen smartphones in recent years have forced users to hold smartphones with both hands, and most of people still rely on thumb interactions. A research conducted by Josh Clark also supports this conclusion explaining that 75% of the interaction tasks are completed with thumbs.
Thumb vs. Small Screens
According to the model provided by Samantha in 2016, the accessible range for a woman on a 4.7″ smartphone is illustrated below. The green area is easily accessible, and the orange/yellow area requires stretching or even shifting the hand, while the red area is hard to access.
▲The Thumb Zone: Designing For Mobile Users
This model shows that the trend for many App interfaces have quietly moved from top buttons to the bottom green thumb zone, so that users can easily complete their tasks with frequent functions. For instance, the old version of Facebook, the upper hamburger menu and messaging function are moved to the bottom tool bar, where four most frequently used functions are listed. The others are integrated into the hamburger menu. The fixed tool bar of Airbnb simply lists all five major functions at the bottom. For the App in Taiwan, I will use Shopee as an example. Aside from the tool bar, you can see that Shopee has placed all its main services in areas that are easily accessible, and find more services by swiping left.
What about smartphones with large screens?
From my own experience with iPhone 11, this model has already changed. On my 6.1″ screen, I used the built-in graphic software to draw a small size hand, and the finger touch track is as illustrated below. As you can see, the top level is almost unaccessible, while a right hand holder cannot access one fifth of the left side of the screen.
▲ The finger touch track on a 6.1″ screen (without moving the smartphone)
If this model is applied to the current Airbnb App, a right-hand holder cannot allow his/her thumb access to the bottom tool bar “Search” without switching the hand. This is why that in 2020 UI design trends, not only main functions are shifting to the bottom, and even IMDb and Microsoft Apps are moving their search bars directly to the bottom, so that the thumb can do it all at once. Let’s take a look at Taiwan’s Richart App payment page, on which five main functions are displayed on the bottom, allowing users to click on the tool bar for payment, and then easily press the next function menu with a thumb. In comparison with prior block or list display methods, this complies better with behavioral interactions on smartphones. Taishin International Bank make a great job of this UI. They truly are mobile banking for the younger generation!
Large smartphones have already become standard
A year ago, large smartphones were merely a trend, but now it has become a standard.
The on-demand App data of Missbeez (one of the hottest startups in Tel Aviv) in October 2018 showed that large smartphones (iPhone X/XS/XR, etc.) occupied around 16.3%. However, the wave of new iPhone 11 upgrade in December 2019 has brought the rate to 41% with a steady growth. It could be estimated that the two-factor authentication unlock and 5G support of iPhone 12 will prompt those small-screen smartphone user to join this trend next year and significantly increase the ratio of large-screen smartphone users.
The iPhone itself has actually already included the interaction design of a Home button double-click to pull down the page due to its ultrahigh screen-to-body ratio. In the X series, after the Home button is removed, you can go to Settings > General > Accessibility to turn on “Reachability”. Then you can slightly swipe down the horizontal bar to pull down the page. On the iPhone 11, you can directly go to Settings > Accessibility > Touch, then turn on Reachability for using the pull down function on screen. I have heard that Android phone directly applies an ultimate method, in which a single-hand mode will zoom to the bottom right into a range where your thumb can reach. This method is definitely a step further than iOS into extending the thumb’s accessible range. Personally, I’m still not used to this pull-down function behavioral model, and I think the two extra pull and clear steps that would create a cognitive burden for the user. I’m quite curious about the ratio of users that actually uses this function.
▲ iPhone 11 reachability to pull down the page
PS. If you think that the horizontal bar gets in the way while playing mobile games, take a look at this article on how to hide the home indicator!
Changes to Interaction Design
The essence of the product has not changed, but the evolution of technology has changed its format. In response to the large-screen smartphone trend, allowing single-hand users to browse websites more smoothly, the interface interaction model has also gradually changed. Changes have occurred from the button interactions in the past to the 2020 call to action format.
In terms of the 2020 mobile UX design trend, Instagram (IG) Stories are the perfect example. In addition to the simple thumb swipe to view the last and the next story, the downward swipe will close the Story mode, and the upward swipe will achieve the call to action task. IG stories have successfully led other Apps in incorporating the “Story Trend” UI concept into their presentation format.
▲Mobile UX design trends to watch out for in 2020
Conclusion
In fact, from the super large smartphone format in the early days, to super small, and till now, the content becomes a king era that has gradually increased smartphone sizes. The interaction model has also changed gradually with the usage methods. We have gone from the basic point click trigger to the left and right swipe behavioral model that is already familiar to users. When I changed to the iPhone 11, I had complained to my younger brother that the phone is too large for me to hold. He responded by saying, “It’s ok, your hand will become longer.” I rolled my eyes at him at that time, but if I really thought about it, I will slowly get used to holding a large smartphone, and find a suitable way to lazily swipe my phone. Maybe the users will eventually changed back to two-handed swipes because of the large phones. Otherwise, we’ll just have to see what innovative interaction designs (like gestures) that designers will come up with to satisfy users!
https://www.smashingmagazine.com/2016/09/the-thumb-zone-designing-for-mobile-users/#problems-with-navigation
https://medium.com/@hitech.qb/mobile-ux-design-trends-to-watch-out-for-in-2020-5a27270ad0ec
“The Impact of smartphone Holding Methods on UI Design, Let’s Talk about Thumb Rules” , reprinted with permission by the author, Saha Chuang.