over 1 year ago from Thuy Gia Nguyen, 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
How dare we as designers even assume our users have a thumb
Real designers evolve predictive invisible interfaces tuned to Our Gentle Users' unconscious microexpressions.
That sounds like a sentence out of one of those generators like Corporate ipsum
If anybody wants to build that, I'm totally open to a partnership.
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.
Too sad that the floating button is always right aligned. Too bad for lefties.
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
I'm curious...what metrics, feedback, or insights did you use to formulate this?
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
They will have to pry my 4.4 inch screen from my cold dead hands.
Most of this is from https://abookapart.com/products/designing-for-touch
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.
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.
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)
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.
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)
I could do that, but I believe the pattern would be slightly different though. Especially on the lower regions of the iPhone X.
Exactly why I have a Loopycase. :)
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
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now