Menu Search
Jump to the content X X
Smashing Conf New York

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

The Thumb Zone: Designing For Mobile Users

If there is one thing that will stand the test of time, it’s thumb placement on mobile devices. This makes consideration of the “thumb zone1“, a term coined in Steven Hoober’s research, an important factor in the design and development of mobile interfaces.

Have you ever interacted with a mobile website or app that simply didn’t play nice with your thumbs? Perhaps you’ve had to stretch to get to an important menu, or swiping turned into a battle with multiple swiping elements. Mishaps such as these reveal poor consideration of the thumb zone.

Further Reading on SmashingMag: Link

In this article, I will share the knowledge I’ve acquired about the thumb zone and how to apply its rules to navigation, cards and swipe gestures.

Learning From The Best Link

As mentioned, Steven Hoober researched and wrote about the thumb zone in Designing Mobile Interfaces. This is where I first encountered the notion that it might be important to consider thumbs while developing.

Along with Hoober, Josh Clark has recorded in-depth information on how people hold their devices in his book Designing for Touch. You can read an excerpt on A List Apart5.

Using Hoober and Clark’s study of how thumbs interact on devices, I performed user testing on wireframes that varied the location of design elements. My tests ran with navigation elements on the top and bottom of the screen, cards with buttons in different locations, and gesture areas outside and inside the thumb zone.

My test results validated Hoober and Clark’s research, while providing solid evidence of what works and what doesn’t in design. Below, I’ll share my findings on the design elements I tested. Let’s get started!

Thumbs Vs. Touchscreens Link

Opposable thumbs are nice to have, aren’t they? In addition to making us way cooler than jellyfish, thumbs are also key to how we interact with our mobile touchscreen devices. Hoober’s research shows that 49% of people hold their smartphones with one hand, relying on thumbs to do the heavy lifting. Clark took this even further and determined that 75% of interactions are thumb-driven.

With this understanding of hand placement, we can conclude that certain zones for thumb movement apply to most smartphones. We’ll define them as easy-to-reach, hard-to-reach and in-between areas.

Thumb-zone mapping of left- and right-handed users.6
Thumb-zone mapping for left- and right-handed users. The “combined” zone shows the best possible placement areas for most users. (View the large version7).

The trick is to design for the flow of the thumb zone. This provides a framework for making better design decisions, creating human-friendly experiences and getting fewer headaches. Through user testing and experimentation, I’ve discovered a few ways to use this knowledge in everyday development.

Problems With Navigation Link

We all remember a time when mobile navigation was simply a dropdown list of links. It wasn’t pretty, but it got the job done. Today, we see endless examples of navigation patterns8. What’s the best fit for the thumb zone?

The natural movement of the user is the first thing I learned to take into account. Ask questions: “Does my app have a long list of links?” “Do I need to mix menus?” “What goes well with my website design?” The answers to these questions will help you determine where to place navigational triggers and hooks.

If your app has a long list of links, then you’ll probably want to use a full-screen overlay9 menu. This type of menu affords space for you to organize the list, social buttons and other useful content. The pattern scales well between desktop and mobile devices, and the menu provides an opportunity to align clickable elements within the thumb zone.

Huge10 has always made great use of full-screen overlay menus on mobile devices:

Huge's full-screen overlay menu11
Huge uses a full-screen overlay menu. (View large version12)

On the flip side, if your app does not have a long list of links, then a sticky menu might be best. This type of menu attaches to the top or bottom of the screen and provides real estate for many links, depending on the design.

Airbnb’s mobile app13 has a sticky menu, attached to the bottom of the screen, providing easy access to important booking, messaging and listing information:

Airbnb mobile app fixed footer menu14
Airbnb’s mobile app has a fixed footer. (View large version15)

If you have a large website, mixing menus might work. Because mixing menus can get complex, it’s helpful to prioritize menu links based on their importance in the app. Sticky menus are great for commonly visited links, whereas full-screen and drawer menus come in handy for important but not high-priority links.

Consider Facebook’s mobile app16:

Thumb zone mapping of left- and right-handed users.17
Facebook’s mobile app combines multiple fixed menus and drawers. (View large version18)

Facebook mixes menus based on the size of content within them. In the screenshot above, we see two sticky menus, each containing valuable links for the user. The top sticky menu is in the stretch zone, but just low enough on the page that it feels natural. The bottom sticky menu items are organized to provide comfortable tapping of popular links.

By gathering user data, practicing good design and leveraging the thumb zone, Facebook is owning sticky menus. The next time you’re trolling your friend’s posts, remember the series of decisions that have made your trolling experience that much better.

Remember that in addition to keeping important navigation items within the thumb zone, placing links outside of the friendly zone is acceptable at times. The general rule is to keep frequently used links in the easy-to-reach zone and to keep infrequently used links in the hard-to-reach zone.

Keeping Cards Friendly Link

Next, we’re going to review how a well-designed card pattern can work for your app. The card pattern19 has been widely used for a while now. Cards are quick, easy and predictable; they provide bursts of information in small doses, making it easy to deliver the right content at the right time.

Often, we couple cards with actions: send, save, done, close, etc.

Poncho weather app card with actions20
Ponch: Wake Up Weather’s card pattern (View large version21)

In this example we see the Poncho: Wake Up Weather22 app. This is a great example of placing actionable links within a card: The weather report doesn’t require a thumb tap, so it’s placed way inside the unreachable zone. The action item — in this case, a share button — is placed directly in the natural zone.

On the other side, Poncho places its “location search” and “use current location” links far inside the hard-to-reach zone. This is acceptable: A user would use those features infrequently, because the app remembers your location from the last time it was open.

On the flip side, there are times when card patterns don’t utilize the thumb zone. A prime example of this is Etsy’s mobile app23. During checkout, Etsy provides a form in a popup card for the user to enter their shipping information:

Esty checkout flaws24
Etsy’s checkout flaws in the card pattern. (View large version25)

At first glance, this use of a card seems appropriate and design-savvy. Digging deeper, we see flaws. The first problem is the “Cancel” link in the top-left corner. Does that link close the card or cancel the checkout process (if I’m confused, others surely will be, too). Also, The “x” is at the edge of the thumb zone, forcing the user to stretch to reach it.

Here’s a dilemma: Adding a close button to a top corner of a card is a common pattern, but it goes against the thumb zone rubric. If you’re breaking out of the thumb zone to meet a user’s expectations, look for an alternative solution. We could experiment by adding a close button at the bottom of the card, or — since cards are best when delivering short bursts of content — we could try limiting the length of content in cards.

As the card design fad takes hold, it’s a good idea to run designs through the thumb zone map to ensure that most elements are easily accessible and not confusing. Avoid following trends; instead, make human-oriented decisions throughout the design and development of your app.

Gestures and Movement Link

The gesture26: tap, double-tap, swipe, drag, pinch and press. These are the icing on the smartphone cake. Gestures enable us to engage with technology through our sense of touch.

You might be able to guess where this going. Keep gestures within the thumb zone. More importantly, allow the user to perform gestures naturally. This seems obvious, but to really pull off a comfortable experience, it’s important to calculate where the gesture should happen.

Let’s focus on the swipe interaction. Through swipe-tracking scripts27, I found some really interesting movement data.

Map of swipe movements28
Visualization of swipe-gesture data found during user testing. (View large version29)

In the map above, circles represent taps, and arrows represent swipes. The data that I collected from tests show that users usually swipe somewhere from the device’s edge towards the middle, diagonally downward. I also found that users generally swipe in the natural area of the thumb zone.

Originally, I had the misconception that users swipe horizontally across, which created problems when measuring thumb areas for swipe gestures. My design specifications did not provide enough room to swipe without triggering another swipe area simultaneously. As with most mobile design elements, consider the thumb space required for swiping. I’ve found an appropriate size of swipe areas to be at least 45 pixels tall and wide.

With all of this information, we can conclude that it’s better to place swipe-gesture actions in easy-to-reach areas, while also allowing enough space to prevent accidental inputs.

A great example of the swipe gesture is Google’s Inbox app30.

Google Inbox swipe areas31
Google Inbox supports swipe gestures in the right places, with the right amount of space. (View large version32)

The smart decisions here are:

  • keep swipe gestures out of hard-to-reach areas;
  • provide enough tapping space;
  • allow swipes to start anywhere in each email block element.

With all of this, gestures feel natural and comfortable, making email management faster and less complicated. Keep on keepin’ on, Google!

Summary Link

What have we learned? Hopefully, you better understand why the thumb zone is important. Remember these points:

  • Mobile devices and languages will change, but as long as there are touchscreens, the thumb zone will remain a critical part of design.
  • Navigational design is thumb-friendly when important links are in the easy-to-reach zone and unimportant links are in the hard-to-reach zones.
  • Cards are a powerful design asset when content and actions are thumb zone-friendly.
  • Determining swipe gesture areas becomes simpler when we consider how a person thumb swipes against a glass screen.

I’ll leave you with this: Keep reading! There is much to learn from other people in the industry. Below are a few links on the subject of designing for humans:

(da, yk, al, il)

Footnotes Link

  1. 1 http://blog.usabilla.com/designing-thumbs-thumb-zone/
  2. 2 https://www.smashingmagazine.com/2017/02/mobile-first-is-just-not-good-enough-meet-journey-driven-design/
  3. 3 https://www.smashingmagazine.com/2016/10/designing-card-based-user-interfaces/
  4. 4 https://www.smashingmagazine.com/2013/05/gesture-driven-interface/
  5. 5 http://alistapart.com/article/how-we-hold-our-gadgets
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2016/08/thumb-zone-mapping-opt.png
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2016/08/thumb-zone-mapping-opt.png
  8. 8 https://www.nngroup.com/articles/mobile-navigation-patterns/
  9. 9 https://speckyboy.com/2014/08/12/fullscreen-responsive-menus/
  10. 10 http://www.hugeinc.com/
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2016/08/huge-full-screen-opt.png
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2016/08/huge-full-screen-opt.png
  13. 13 https://www.airbnb.com/mobile
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/08/airbnb-app-fixed-nav-opt.png
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2016/08/airbnb-app-fixed-nav-opt.png
  16. 16 https://www.facebook.com/mobile/
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2016/08/facebook-app-combined-menus-opt.png
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2016/08/facebook-app-combined-menus-opt.png
  19. 19 http://thenextweb.com/dd/2015/11/16/why-cards-are-dominating-mobile-design
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2016/08/poncho-card-actions-opt.png
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2016/08/poncho-card-actions-opt.png
  22. 22 http://poncho.is/
  23. 23 https://www.etsy.com/mobile/
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2016/08/etsy-card-actions-opt.png
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2016/08/etsy-card-actions-opt.png
  26. 26 http://thenextweb.com/dd/2015/11/09/how-to-implement-gestures-into-your-mobile-design
  27. 27 http://blog.blakesimpson.co.uk/read/51-swipe-js-detect-touch-direction-and-distance
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2016/08/swipe-movements-opt.png
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2016/08/swipe-movements-opt.png
  30. 30 https://itunes.apple.com/us/app/inbox-by-gmail-new-email-app/id905060486?mt=8
  31. 31 https://www.smashingmagazine.com/wp-content/uploads/2016/08/swipe-zone-google-inbox-opt.png
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2016/08/swipe-zone-google-inbox-opt.png
  33. 33 http://provide.smashingmagazine.com/thumb-zone-psd.zip
  34. 34 https://abookapart.com/products/designing-for-touch
  35. 35 http://shop.oreilly.com/product/0636920013716.do
  36. 36 http://blog.usabilla.com/designing-thumbs-thumb-zone/
  37. 37 http://thumbzone.co/
  38. 38 https://medium.com/@konsav/-55aba8ed3859#.mf1j05vv7
  39. 39 http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
  40. 40 http://scotthurff.com/posts/facebook-paper-gestures
  41. 41 http://www.lukew.com/ff/entry.asp?1927
AndroidiOSNavigation

↑ Back to top Tweet itShare on Facebook

Over the past eight years, Samantha has developed a bunch of websites and apps professionally. Some may say that she is jack of all trades, her most proficient skill-set involves solving every-day challenges during development processes. Currently she is leading Front-End Development at Planetary.io!

  1. 1

    Oliver McGough

    September 19, 2016 10:50 am

    If you’re going to plagiaries, at least reference the original source: http://blog.usabilla.com/designing-thumbs-thumb-zone/

    -4
    • 2

      Michael

      September 19, 2016 4:23 pm

      You are credited? Quite clearly.

      6
    • 3

      Samantha Ingram

      September 20, 2016 2:08 pm

      Oliver, I’m sorry that you feel as if you were plagiarized. I had read your article, around the time it was published, and found it very informative. After re-visiting your article after your comment I see similarities in the way we have covered the topic. However, it was not my intention to copy or closely follow your outline. To help amend your opinion I have provided a credit in the beginning and end of my article. If you feel this is not sufficient, let me know so we can handle this matter privately.

      9
    • 5

      Raul Gonzalez

      January 5, 2017 6:15 pm

      Samantha,

      I agree with you 100 Percent! I have Implemented what I consider to be a “Mobile First” Scrolling Menu Design in my website at http://www.raulgonzalez.com/mobilefriendly.php

      I give credit to Stu Nichols in the UK for this CSS3 Only Scrolling Menu and I have the right to use it on my website!

      I have also linked your article on my website.

      Thanks

      2
  2. 6

    Jon Hobbs

    September 19, 2016 11:14 am

    Maybe it’s just me, but I can see so much wrong with this.

    The “thumb zone”, much like the “fold” is in a different place for everybody. We all have different sized phones and different sized thumbs so the idea of providing a PDF template of where the zone is and advising us all to keep navigation inside it is ludicrous.

    This all assumes that people navigate with their thumbs anyway, which I never do and neither do most of my friends with large screen phones (I know several note users and I use a Nexus 6p). Designing for a fixed screen size is not good responsive design.

    10
    • 7

      Jeff Gapinski

      September 19, 2016 9:24 pm

      I hear you, but I think with todays market of modern devices it’s fair to play to the law of averages here. Devices are skewing towards larger displays, making that stretch to the top corners more and more difficult.

      It’s actually quite refreshing to see this stuff being highlighted, the industry is standardizing menus in inefficient places (Hell, I’ve done it too, but trying to work out of that habit).

      2
      • 8

        Darren

        September 20, 2016 9:18 am

        Because the stretch to the top corners are more and more difficult, I think we naturally start holding our devices differently, or just navigate differently. So unless you are going to be forcing your thumbs to stretch to areas it can not reach, you will have to rather find or adapt to another way of navigating on your mobile device.

        4
      • 9

        Geoff

        September 20, 2016 10:54 pm

        Maybe instead of slinking immediately to the “law of average” as you say we should be looking at how we can design an interface that can mold itself to fit a user better. Listen to http://99percentinvisible.org/episode/on-average/ if you want to understand why.

        No I don’t have to answer to that question and hey, maybe its something we’re not quite capable of doing just yet but the question should be on the table.

        1
        • 10

          Mundstrøm

          September 26, 2016 7:40 am

          One thing we need to remember is how annoying it can be to set up an app – so posing the question”are you left- or right-handed?” before using an app might seem smart at first, but it’s like those apps that start with a 6-screen introduction you can’t skip. The best solution would be to build it right into the mobile OS, so every app installed and the entire UI can adapt itself to the user rather than each individual app having to ask these questions. All apps should simply be designed with dual interphase layouts where one or the other is employed based on the OS settings.

          0
  3. 11

    Ben

    September 19, 2016 8:37 pm

    As Jon already mentioned, the reachable area depends highly on the screen size and how the user is holding the device. You can find more illustrations of different behaviours and different screen sizes on this post: http://scotthurff.com/posts/how-to-design-for-thumbs-in-the-era-of-huge-screens.

    9
  4. 12

    Samuel Rouse

    September 19, 2016 10:53 pm

    I would argue that the Cancel & “X” elements of the Etsy app are correctly placed. When you get to the cart you certainly don’t want to lock people into the purchase path, but placing the “exits” outside of the convenient area provides subtle pressure to continue without falling into a “dark pattern” of hiding the elements.

    It also means you are less likely to hit either of those “failure” states by accident.

    12
  5. 13

    Tylor

    September 20, 2016 3:27 pm

    Interesting article. If nothing else, you got me thinking about something I hadn’t before. Thanks!

    5
  6. 14

    Steven Hoober

    September 20, 2016 7:49 pm

    You have referenced one of my articles, but I’ve done a number of studies on this, found dozens of other studies (some with millions of data points) that have found the same touch preference results, and published a series of articles, and talks on these findings: 4ourth.com/Touch/

    I remain entirely unconvinced by any fixed zones, by any fixed behavior, and especially by the “stretching” to hit the corners of the screen. People shift their grip to reach corners of the screen, regardless of size. From handset to tablet. There’s a strong preference not for thumb sweep ranges, but for looking at and tapping the center of the screen.

    In my touch research, and in other usability studies I perform for day to day client work, I encounter no problems at all with the Back or Menu buttons, as long as used appropriately. Back works as it is a change in mode, so is fine far away. As long as the menu contains only expected, tertiary controls or links, users will seek out and find them.

    Samuel Rouse makes some excellent points along these lines that functions have to be deconflicted, and low-use or dangerous ones should specifically be far from primary functions or content.

    10
  7. 15

    carmen

    September 21, 2016 5:22 pm

    Thanks, very usefull!!!

    0
  8. 16

    Jeremy

    September 22, 2016 12:39 am

    As per usual I think the whole thing is being over complicated.

    My job is designing for user experience (not a UX Designer, which is a completely stupid idea, how the hell do I “design” someone’s experience??) and I watch people using their phones all the time (clients/users, friends/family, on the train, out and about, etc). The one clear thing I see? People use their phones with one hand and clearly prioritise their thumbs for navigation. This is not rocket science people. Why are these things always over thought?

    From a Primary/Secondary navigation item point of view, my preference is to design a mobile UI (phone here, not tablet!) so that primary navigation items or gestures are within the thumb zone, THEN make people stretch (or readjust/use different finger/etc) for the top part of the screen (where thumbs don’t generally get too with ease) for secondary (or “dangerous”, or less important) navigation items if needed.

    Sometimes I feel we like to make user experience so much complicated than what it is so that we feel like really smart, special little snowflakes. Drives me insane.

    1
  9. 17

    Anthony Wijaya

    September 22, 2016 9:35 am

    Super agreeing on the article, but for the Etsy case, wouldn’t you think that putting the exit buttons far out of the reach of your thumb kinda pushes the users to complete the form instead of exiting it? It’s bad user experience, sure, but I would think that conversion should be the goal here, which is to fill in the form.

    What do you think about this kind of approach if it was really intended to be like this?

    0
  10. 18

    Brian Steeves

    September 26, 2016 9:50 am

    My thumbs can reach two inches from side to side and four inches top to bottom. How can ANYTHING be out of reach on a phone? I think this is all overblown and you need to design the actual LEARNING EXPERIENCE (LX) for the user.

    LX = Contextually relevant narrative based on user Intent. I do not care where the buttons are!

    -2
  11. 19

    Maja Falkenberg

    October 10, 2016 8:00 am

    Nice of you to share a design rule which designers always needs to pay attention to.
    On the other hand what about the eyes??? I mean, it is not only your thumbs using apps and websites. Your eyes will pay attention to the top of the “page” while your thumb wants to navigate in the bottom.
    My point is: important to think of the thumbs area for clicking but remember to pay attention to the focus of the eyes. In my opinion the eyes are what meets your design first and therefore the most important bodypart to design for.

    0
  12. 20

    Vwish Solution

    October 26, 2016 10:51 am

    You guys really have a good stuff of data please continue sharing with us it’s really helpful for new web designers in this competitive field.

    Want to rule the world of app in ios? If so, then call right away to get in touch with VWish, the best iPhone App Development company in India providing reliable and latest technology through their services.

    0
  13. 21

    Hotzzi

    November 14, 2016 9:15 am

    Thank you for the good article. Can I translate and introduce it into Korean on my blog (http://www.brunch.co.kr/@userhabit)? I would share the original link on top of the post. If you feel bad about it, please let me know.

    0

↑ Back to top