The Thumb Zone for iPhone X

over 2 years ago from , Senior App Designer at FINN.no

I love using this great reference heat map whenever designing new apps. I've been looking for an updated heat map for the optimal Thumbzone for iPhone X. Anyone seen anything like this?

Read about the Thumb zone here: http://scotthurff.com/posts/how-to-design-for-thumbs-in-the-era-of-huge-screens


  • Duke CavinskiDuke Cavinski, over 2 years ago

    How dare we as designers even assume our users have a thumb

    15 points
  • Nelson Abalos JrNelson Abalos Jr, over 2 years ago

    This is why Google's floating action button makes a lot of sense.

    Also, it's why (finally) Twitter pushed their nav to the bottom.

    3 points
  • Thuy Gia Nguyen, over 2 years ago

    I've done an attempt to create my own heat map for iPhone X due to the lack of it elsewhere. https://dribbble.com/shots/4958110-Thumb-Zone-Heat-Map-for-iPhone-X

    2 points
    • Josh Sanders, over 2 years ago

      I'm curious...what metrics, feedback, or insights did you use to formulate this?

      0 points
      • Thuy Gia NguyenThuy Gia Nguyen, over 2 years ago

        To be honest, I am totally far outside my profession claiming that this formula is correct. What I've simply done is to expand on the current iPhone 6 heatmap that already exists from Scott Hurffs post since the iPhone X is basically the same width. Being the same width you won't need to hold the phone itself differently (like the Plus versions). I do however wish that the people making the original heatmaps could supply us with a proper one though. :D

        1 point
  • Alex HoffmanAlex Hoffman, over 2 years ago

    Most of this is from https://abookapart.com/products/designing-for-touch

    2 points
    • Duke CavinskiDuke Cavinski, over 2 years ago

      Which is funny because the advice on Android in that book (about not stacking up lots of UI on the bottom) is now defunct I guess.

      1 point
  • John LeschinskiJohn Leschinski, over 2 years ago

    They will have to pry my 4.4 inch screen from my cold dead hands.

    2 points
  • Jonathan ShariatJonathan Shariat, over 2 years ago

    I'm so glad apps are FINALLY starting to catch on. I remember seeing these heatmaps years ago and it seemed so straightforward to move the nav to the bottom. Instead, we were using patterns from desktop and putting it all on top.

    One thing I still don't get is why we still put symmetrical nav patterns. I like Google's FAB but its still in an "ow" zone. Much of the bottom nav is also in a medium pain zone.

    pain map over gmail material design interface

    I think what we need is more asymmetrical UI patterns that are truly ergonomic.

    The biggest difficulty is not knowing if your user is right or left handed. You could ask but I also wonder if you could guess or detect L or R handed use. (Maybe by measuring touch-hit on targets)

    1 point
    • Jim SilvermanJim Silverman, over 2 years ago

      The biggest difficulty is not knowing if your user is right or left handed

      this is a good idea, floating action button is always a pain. google pixel's "active edge" could probably be rigged to detect handedness. someone do that, pls. thx.

      1 point
  • Vitaliy VerbenkoVitaliy Verbenko, over 2 years ago

    Interesting post, I've never thought of it.. But now that the bezels are getting smaller we won't have the thumb reach all the way down either.. meaning the whole bottom part of the phone will be one giant "ow"zone

    0 points
  • Gavin McFarlandGavin McFarland, over 2 years ago

    Exactly why I have a Loopycase. :)

    0 points
  • Wentin ZWentin Z, over 2 years ago

    Human thumb do not get updates like software, you can just overlay the same heat map on Iphone X mockup (be mindful of the size, better choose a picture with 2 phones in it, one iphone x one previous iphone)

    0 points
    • Thuy Gia NguyenThuy Gia Nguyen, over 2 years ago

      I could do that, but I believe the pattern would be slightly different though. Especially on the lower regions of the iPhone X.

      0 points