10

The Thumb Zone for iPhone X

1 year 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

18 comments

  • Steven CavinsSteven Cavins, 1 year ago

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

    15 points
    • A. DeWittA. DeWitt, 1 year ago

      Real designers evolve predictive invisible interfaces tuned to Our Gentle Users' unconscious microexpressions.

      3 points
      • Jacob JJacob J, 1 year ago

        That sounds like a sentence out of one of those generators like Corporate ipsum

        0 points
        • A. DeWittA. DeWitt, 1 year ago

          If anybody wants to build that, I'm totally open to a partnership.

          0 points
  • Nelson Abalos JrNelson Abalos Jr, 1 year 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, 1 year 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, 1 year ago

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

      0 points
      • Thuy Gia NguyenThuy Gia Nguyen, 1 year 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
  • John LeschinskiJohn Leschinski, 1 year ago

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

    2 points
  • Alex HoffmanAlex Hoffman, 1 year ago

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

    2 points
    • Steven CavinsSteven Cavins, 1 year 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
  • Jonathan ShariatJonathan Shariat, 1 year 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, 1 year 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
  • Wentin ZWentin Z, 1 year 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 Nguyen, 1 year 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
  • Gavin McFarlandGavin McFarland, 1 year ago

    Exactly why I have a Loopycase. :)

    0 points
  • Vitaliy VerbenkoVitaliy Verbenko, 1 year 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