Pick up your phone. How are you holding it? Are you a righty? A multitasking southpaw? A two-hander?
In an observational study conducted by Steven Hoober and published on UXmatters, Hoober determined that smartphone users interact with their phones’ touchscreens in one of three ways:
● One-handed (left or right, using the thumb to interact)—39%
● Cradled (holding the phone in one hand, using the other hand to interact with the screen)—36%
● Two-handed (cradling with both hands, using both thumbs to interact with the screen)—15%.
No matter how you hold it, the thumb is the primary digit of choice when it comes to touching the screen. And that’s where the trouble starts: Our thumbs can only take us so far. Data tells us users are reaching for larger and larger phones, but alas, our thumb size remains the same. So how are phone and website developers creating the most comfortable and fluid user experience as screen size continues to grow?
Well, they’re designing for thumbs.
Designing for Thumbs
Pick up your phone again. From your natural phone grip, see how far you can comfortably navigate on your screen. What areas are easy to reach? What areas are a stretch? What areas would you have to adjust your grip in order to get to?
Leading mobile device and website designers are taking all of this into account when developing their products and interfaces. They’re looking at how users hold their phones, what fingers dominate the touchscreen commands, and how they can make the experience more fluid, more effortless, and more comfortable.
It’s called “designing for thumbs.”
According to web and mobile product designer/expert Scott Huff, designing for thumbs “means building interfaces that are the most comfortable to use within our thumb’s natural, sweeping arc.” This can mean keeping primary tap targets in the thumb-friendly hot zone – the lower one-third of the screen where a thumb reaches most effortlessly – or helping eliminate “mistaps” by not stacking phone controls and app controls on top of one another at the bottom of the screen.
According to Wikipedia, the average width of the adult thumb is 25mm or 1 inch, which is equal to 72 pixels. This means actionable items must always be developed large enough that users can easily tap them and with enough space around them to avoid hitting the wrong thing.
How This Impacts What We Do
In the 1990s and early 2000s, our primary focus at The Brandon Agency was to build websites that would be viewed on a desktop or tablet. But that mindset has changed. Today, the growth of mobile devices and increased use of them to access the Internet has completely reset how we approach modern website design. For many of our clients, we have seen mobile traffic explode. In fact, it’s not uncommon for us to see traffic to client websites via smartphones exceed 60% – and that’s not even including tablets!
Much of today’s website design discussions revolve around responsive design and adapting the website to the size of the screen on which it’s being viewed. While important, we foresee a day when website traffic from smartphones exceeds 90% of the total. As a result, we think “mobile first” when working on new website designs. If we get the mobile user interface right, the rest is easy.
So here are a few of the rules of thumb we use when starting the mobile Web design process:
● Bigger Is Better: Make your touch targets bigger rather than smaller; small touch targets do not create a user-friendly mobile experience.
● No Pinching: If you have to pinch it to see it or read it, get rid of it.
● Mobile Priority: Most mobile website users have a different priority than a full website user. They want directions, click-to-call phone numbers, or the ability to buy quickly. Make sure you can do all of these with one thumb – without ever clicking away from the home screen.
● No Hovers: Hovers are never a good idea for mobile.
● Less Is More: Always streamline your content and your images. And remember, less is more.
For more information on The Brandon Agency’s mobile website capabilities, please contact us at The Brandon Agency.
Scott Brandon
Chief Executive Officer
With the mind of an entrepreneur and a heart for innovation, Scott has grown The Brandon Agency into a Southeastern powerhouse with over 100 employees in four offices across the U.S. As a highly sought-after strategist and business-minded visionary, he has helped develop and grow brands such as YETI Coolers, Southern Tide, CresCom Bank, Williams Knife Co. and Fish Hippie. Always on the forefront of technology, Scott was the first to develop opt-in email database capture strategies using customer relationship management tools for stronger capture rates on conversions. Although he has an endless passion for marketing, Scott is happiest when he is outdoors hunting and fishing with his family.