How to Design Mobile Apps for One-Hand Usage(smashingmagazine.com)
smashingmagazine.com
How to Design Mobile Apps for One-Hand Usage
https://www.smashingmagazine.com/2020/02/design-mobile-apps-one-hand-usage/
18 comments
I remember this being a thing for sometime, years ago as you said - always found this approach very interesting and resulting in beautiful and diverse UIs.
Sadly this trend seems to have faded away together with the rejection of skeumorphism and the advent of "design systems" (eg component lib based design)
Sadly this trend seems to have faded away together with the rejection of skeumorphism and the advent of "design systems" (eg component lib based design)
Back then the UIs and OSes were less set in stone. Nowadays we have two mobile UIs: iOS and Android (while there's also the gesture-based SailfishOS [1]). Just like everyone's a Qwerty user, which isn't necessarily the most efficient, even on mobile (example [2]). Problem is, you can only deviate so much from the defaults/standards.
[1] https://sailfishos.org/design/gestures/
[2] https://keybee.it/
[1] https://sailfishos.org/design/gestures/
[2] https://keybee.it/
No, not everyone is a QWERTY user.
French are AZERTY[1], we are 70 millions. There is a really small fraction of the population able to type on QWERTY.
Germans are QWERTZ, they are 86 millions.
Scandinavians have their own QWERTY variation, where a lot of symbols are mapped differently.
There is a whole world outside there, you know ? :)
I agree with you on the point that those are not the most efficient layout nowadays though.
[1] https://en.m.wikipedia.org/wiki/AZERTY
There is a whole world outside there, you know ? :)
I agree with you on the point that those are not the most efficient layout nowadays though.
[1] https://en.m.wikipedia.org/wiki/AZERTY
Even the UK keyboard can drive you nuts if you are an engineer and you are used to the US one. The Enter key has a different shape, the backtick and the backslash are placed differently.
Interestingly, such UI (well done, but seen such before) challenges the whole size of the smartphone as we know it, akin to a gaming keypad [1] challenging a keyboard.
[1] https://en.wikipedia.org/wiki/Gaming_keypad
[1] https://en.wikipedia.org/wiki/Gaming_keypad
If you want to take it a step further you can look into something such as Azeron[1], I've ordered one myself. But prooduction time is quite long (3 months). So I haven't experienced it myself, ordered it because of RSI issues.
[1] https://azeron.eu
[1] https://azeron.eu
Regarding RSI, have you tried a vertical mouse?
I really like that UI.
Well done!
Well done!
I had long thought that Apple was about to have a big shift in native UI components, because for years they have been shipping first party apps that have card based interfaces that progressively disclose complexity as the card is pulled up from the bottom. Maps and Music are the most obvious examples of this paradigm, but ever since iPhone 6 Plus, a back button in the top left has been a bad paradigm (although the system wide swipe-from-left-edge has helped).
I've been pretty disappointed that Apple has not pushed harder in this area, has kept this first party by not updating native components, and has not updated their HIG. We've had to move to third party libraries. It has been at least 3 years since they started using this paradigm.
I've been pretty disappointed that Apple has not pushed harder in this area, has kept this first party by not updating native components, and has not updated their HIG. We've had to move to third party libraries. It has been at least 3 years since they started using this paradigm.
I don't know if its still the case or not, but a lack of a system wide swipe-from-left-edge to go back was the primary reason I couldn't use Android a couple of years ago. Having to move my thumb down to the back button just always felt so unnatural and clunky.
I really hope this is fixed now in newer versions of Android.
I really hope this is fixed now in newer versions of Android.
Not sure about other models but the Pixel 4 has done away with that bottom button bar entirely in favor of gestures. Swipe from the left to go back, from the bottom to go home.
I use Android 9 on a Samsung Note 8 and I still don't have that feature. It is one of the few IOS features I miss from my iPhone days.
I never use the back button at the top left. I just use it as a visual indicator that you can go back.
Since almost every app on iOS supports swipe to go back, I use that. It's crazy to me that people don't use this...
Since almost every app on iOS supports swipe to go back, I use that. It's crazy to me that people don't use this...
For anyone else who was wondering, HIG = Human interface guidelines.
One of my family members has only one hand, the left.
They would love to have a camera on hand to capture spontaneous moments around their young children. But choosing a smartphone is a compromise between buying a low-level phone that is small enough to be operated with one hand, normally leaving you with a terrible camera, or one with a decent(-ish) camera that is a pain/impossible to use day to day due to the screen size.
BTW just using a camera on a smartphone with one hand is no joke; the trigger buttons generally assume a right-handed or two-handed hold. You can test this by operating your phone with your right hand held behind your back.
I'd love to see more UI designs that take into account that some people have non-standard configurations.
They would love to have a camera on hand to capture spontaneous moments around their young children. But choosing a smartphone is a compromise between buying a low-level phone that is small enough to be operated with one hand, normally leaving you with a terrible camera, or one with a decent(-ish) camera that is a pain/impossible to use day to day due to the screen size.
BTW just using a camera on a smartphone with one hand is no joke; the trigger buttons generally assume a right-handed or two-handed hold. You can test this by operating your phone with your right hand held behind your back.
I'd love to see more UI designs that take into account that some people have non-standard configurations.
I'm a lefty, so I've probably adapted to this over the years, but I regularly use my phone's camera with one (left) hand. At least on Android (my recent phones were the pixel 3 & pixel), the shutter button is low and in middle.
Pulling my phone out of my pocket, unlocking it, opening the camera app and taking a picture all with my left hand is a pretty common task for me and not really any trouble at all.
Pulling my phone out of my pocket, unlocking it, opening the camera app and taking a picture all with my left hand is a pretty common task for me and not really any trouble at all.
I'm a street / documentary photographer so I have more experience than most, but I keep my iPhone 6S in my left pockets and operate it one-handed a lot of the time.
I have two hands, but also have tendonitis in my right thumb, so I've been training myself to use my phone left handed. The first thing I tried was a smaller phone, but I'm also old and my eyes suck. Now I'm on a large phone (Note 8), and I'm not going back. The trick was to get a phone with (a) one-handed mode (entire UI shrinks to left side of screen), (b) a floating camera button (that I can position anywhere on the screen), and (c) a Lovehandle, or similar accessory, so I can confidently hold my phone in my left hand. Just some things to consider for your relative's needs.
I have a PopSocket on the back of my iPhone 11 and routinely use the camera with it one handed. To be honest, I couldn’t imagine using a phone of this size without the PopSocket.
Couple options using an iPhone:
1- Enable Accessibility> Voice control.
Then you can do it all with your voice:
- Say `open camera`, then
- `Show numbers`, then say
- `9` to take photo.
2- Open camera app,
then use the `Volume Up` button to take photos.
I have a Sony Xperia (something ZXZXZXXZ232...) Compact.
The CPU etc is in league with the large phones, but it's small. A double press of the power button opens the camera, and there's a physical shutter button on the side of the phone.
The CPU etc is in league with the large phones, but it's small. A double press of the power button opens the camera, and there's a physical shutter button on the side of the phone.
Android's browser way back when (c. 2011?) had an amazing option for this; you'd swipe from the edge and a radial menu would appear where your finger was. Could do everything from back, forward, refresh, to opening the url bar, to switching tabs, and even saving and navigating bookmarks.
Honestly it's the still pinnacle of cute and clever UX for me.
Edit: Found it~ It was Settings > Labs > Quick Controls https://cdn57.androidauthority.net/wp-content/uploads/2012/0...
Honestly it's the still pinnacle of cute and clever UX for me.
Edit: Found it~ It was Settings > Labs > Quick Controls https://cdn57.androidauthority.net/wp-content/uploads/2012/0...
Radial menus are underappreciated in general. I used to use an extension for Firefox that provided access to most common browser controls (Back, Forward, Reload, etc.) via a radial menu, and found it made my browsing experience feel much quicker and more fluent.
https://www.youtube.com/watch?v=GfUe6DJfKLQ
Finally found a succinct video.
Oh my god I miss these.....
Finally found a succinct video.
Oh my god I miss these.....
There are custom ROMs that will do this (replacing the navbar), too. Actually now that I'm thinking about it I think there used to be an app that would provide it even on a ROM that didn't support it, although I think that required root access still.
While you’re at it remember that 20% of your user base will be left-handed. Since you’re probably right-handed anything you put within reach for yourself will be difficult to reach for southpaws.
The "handedness" of phone use is also not stable. For example, a right-handed person might want to swipe stuff on the phone in the left hand with the left thumb while holding a mug in my right hand.
Good point. As a single data point from a left-handed person: I primarily use my phone with my right hand.
This is directly addressed in the article: it estimates 66% right thumb, 33% left thumb use, and app screenshots are shown with left- and right-handed "reachability" heat maps.
Ahh but later on in the article, there are bunch of linked videos and follow on commentary, that only work for right-handers. If we're going to fix mobile UI, please let us left-handers at least flip the button from the left to the right of the screen. Having a fly-out menu button in the bottom right is great for right-handers, but impossible to reach for left-handers.
> While you’re at it remember that 20% of your user base will be left-handed
Try 10%.
"Studies suggest that approximately 10% of the world population is left-handed. [...] Studies suggest that approximately 90% of the world population is right-handed." [1]
The same webpage also suggests that in e.g. sports, left handed people are overrepresented and have an [at times severe] advantage.
[1] https://en.wikipedia.org/wiki/Handedness
Try 10%.
"Studies suggest that approximately 10% of the world population is left-handed. [...] Studies suggest that approximately 90% of the world population is right-handed." [1]
The same webpage also suggests that in e.g. sports, left handed people are overrepresented and have an [at times severe] advantage.
[1] https://en.wikipedia.org/wiki/Handedness
Does this mean we're to be ignored? If so, I am insulted.
There are approximately 2% of people in wheel-chairs in the UK and approximately 3% of blind people, would you ignore them in your accessibility design? No, of course not. Then why should 10% of left-handers be ignored?
And before you say 'left-handedness is not a disability' try living as a leftie for 1 week, and see the problems we have to deal with every day.
There are approximately 2% of people in wheel-chairs in the UK and approximately 3% of blind people, would you ignore them in your accessibility design? No, of course not. Then why should 10% of left-handers be ignored?
And before you say 'left-handedness is not a disability' try living as a leftie for 1 week, and see the problems we have to deal with every day.
> Does this mean we're to be ignored? If so, I am insulted.
No, I'm sorry you got that impression. I am just setting the facts straight (20% is a completely different percentage than 10%). My partner is left-handed, my daughter might be, and I grew up with a disabled father (he ended up in wheelchair and was practically blind). I feel a lot of empathy to minority groups such as the ones you mentioned (plus a myriad of others).
In my youth, I knew a guy who'd cross his arms while gaming (he was left-handed). This was approx 1995. Quite clever. He was using the mouse with his left hand, and the keyboard with his right. It worked for him (he was a decent gamer). He adopted, though it looked weird.
No, I'm sorry you got that impression. I am just setting the facts straight (20% is a completely different percentage than 10%). My partner is left-handed, my daughter might be, and I grew up with a disabled father (he ended up in wheelchair and was practically blind). I feel a lot of empathy to minority groups such as the ones you mentioned (plus a myriad of others).
In my youth, I knew a guy who'd cross his arms while gaming (he was left-handed). This was approx 1995. Quite clever. He was using the mouse with his left hand, and the keyboard with his right. It worked for him (he was a decent gamer). He adopted, though it looked weird.
> No, I'm sorry you got that impression.
Ok, Fair enough :)
Ok, Fair enough :)
[deleted]
> 90% of the smartphones sold today have bigger than 5-inch displays.
I want a smaller display but they're just not being made anymore. For the past few years if you wanted better specs, you _had_ to get the bigger model.
iPhone SE still being in demand indicates that there's a market for people who want smaller phones, if given the choice.
I want a smaller display but they're just not being made anymore. For the past few years if you wanted better specs, you _had_ to get the bigger model.
iPhone SE still being in demand indicates that there's a market for people who want smaller phones, if given the choice.
What exactly do you mean by "in demand"? Obviously the demand is not zero but all of the evidence points to it being a tiny fraction of the overall phone market. If the SE was actually wildly popular I doubt they would have stopped making small phones.
Sony was the only company making smaller Android phones for years (last model introduced 2018) and their marketshare was plummeting pretty much the whole time. Then they stopped making them presumably because very few people were buying them.
Sony was the only company making smaller Android phones for years (last model introduced 2018) and their marketshare was plummeting pretty much the whole time. Then they stopped making them presumably because very few people were buying them.
> Obviously the demand is not zero but all of the evidence points to it being a tiny fraction of the overall phone market.
We’re a small but very vocal fraction of the market :)
We’re a small but very vocal fraction of the market :)
You could make a similar analogy with the headphone jack. We know everyone wants those back but alas...
The good news is that Apple will be releasing a new iPhone with a 4.7-inch display next month:
https://www.bloomberg.com/news/articles/2020-02-18/apple-s-o...
https://www.bloomberg.com/news/articles/2020-02-18/apple-s-o...
Worth noting that the SE has a 4.0" screen so that is 0.7" larger.
I still don't understand how Apple does noet update their guidelines. Navigation and the top bar are sch a pain to use.
Reachability helps, but it's just bandaid around bad decisions
Also, reachability suffered a big blow in usability when they got rid of the home button - swiping down on the bottom of the screen is very awkward and prone to clicking something unintentionally.
I was dependent on reachability with a 6S. Recently upgraded after that phone became unusable and I'm suffering the same problem as you.
I have about a 20% hit rate with reachability now. So if anyone has any tips please do share them.
I have about a 20% hit rate with reachability now. So if anyone has any tips please do share them.
I didn't even know what the new gesture was, just kept doing it by accident.
If you ever watch official demos, Apple users always use one hand to hold, one hand to gesture/interact.
I very recently started using a phone which is too large to be used with one hand. Not because I wanted to, but because my old phone was aging, I needed a new one and nowadays there aren't any recent and decent phones anymore which are small enough to allow one-handed usage.
And so far it's been mostly annoying. Sure, the larger display is great, but the lost ability to operate the phone with single handed is a real bummer.
I wonder why the smartphone manufacturers don't at least offer a single device small enough to allow one-hand usage. There just has to be a market for that, given how many people complain about large phones.
And so far it's been mostly annoying. Sure, the larger display is great, but the lost ability to operate the phone with single handed is a real bummer.
I wonder why the smartphone manufacturers don't at least offer a single device small enough to allow one-hand usage. There just has to be a market for that, given how many people complain about large phones.
My previous phone - Asus Zenfone - featured the one-hand mode, where you scale whole viewport down and move it on the screen as you see fit. See this image:
https://www.technokick.com/wp-content/uploads/2015/05/DSCN79...
Maybe not beautiful but it was practical in some cases.
More vendors should ship things like this. But the companies value fake visual niceness over usability so I'm not holding my breath.
https://www.technokick.com/wp-content/uploads/2015/05/DSCN79...
Maybe not beautiful but it was practical in some cases.
More vendors should ship things like this. But the companies value fake visual niceness over usability so I'm not holding my breath.
LineageOS has a left/right hand mode. Basically the screen gets resized to about 75% of the size, with the top right (for left hand mode) or top left (for right hand mode) becoming black. It can be activated by swiping from left to right / right to left on the bottom bar.
iOS has Reachability[1] which is a similar solution the same problems.
The problem with solutions like this is that they are often hard to discover.
1: https://support.apple.com/en-gb/guide/iphone/iph77bcdd132/13...
The problem with solutions like this is that they are often hard to discover.
1: https://support.apple.com/en-gb/guide/iphone/iph77bcdd132/13...
I find it interesting that it is supported on a 6s, but not an SE.
I assume it is because the screen is the ‘correct’ size on the SE.
I assume it is because the screen is the ‘correct’ size on the SE.
Sony did for ages (with their flagship compact line), but in general people don't actually seek out and buy products with the features they claim to want/need.
(I am very, _very_ bitter over the growing certainty that the XZ2 Compact was the last of the compacts).
(I am very, _very_ bitter over the growing certainty that the XZ2 Compact was the last of the compacts).
If you haven’t done so already, get a Popsocket or similar device and give it a solid week’s chance.
With my old smartphone (Nokia N9) I could reach anywhere with my thumb as the screen was so small. No surprise that my new "phablet" is much harder to use as I constantly have to change grip, and hit stuff by accident.
Before the N9 I had a Windows Mobile 2003? And even though it had touch support, it was designed to be used with a stylus. With a stylus you need two hands, or a table, but you can reach anywhere on the screen, and the pen is very accurate, so you can have higher information density. Android nor iOS is designed to be used with a stylus though. Modern phones have the same screen resolution as desktop monitors, so in theory using a stylus/pen (and sharp eye-sight) you could have the same user interface on the mobile as on the PC. Also writing on a virtual keyboard using the stylus is not that bad, although not as fast as typing on a keyboard, but faster then typing by touch.
Before the N9 I had a Windows Mobile 2003? And even though it had touch support, it was designed to be used with a stylus. With a stylus you need two hands, or a table, but you can reach anywhere on the screen, and the pen is very accurate, so you can have higher information density. Android nor iOS is designed to be used with a stylus though. Modern phones have the same screen resolution as desktop monitors, so in theory using a stylus/pen (and sharp eye-sight) you could have the same user interface on the mobile as on the PC. Also writing on a virtual keyboard using the stylus is not that bad, although not as fast as typing on a keyboard, but faster then typing by touch.
Ah! Yes! Oh wow I love this!
Many years ago, back when everyone was just discovering smartphones (we used to call them smartphone back then, now we just call them phones...) and figuring out that widgets need to be larger in order to be easier to touch, I was having a beer with a colleague who was doing design back at the time and we were making an inventory of all the ways that this is going to change things.
And we thought this was going to be one of them, and we had the math to prove it! Fitts' famous law considers all axes of motion equal -- i.e. it's a model that describes moving horizontally, diagonally, horizontally or anything in-between as equally difficult.
This isn't the case for phones, especially not when they're used with a single hand. Horizontal motion at the bottom of the screen is very hard, because your thumb just don't bend that way. So is vertical motion on the right-hand side of the screen (for right-handed users -- left-hand side for left-handed users). Diagonal motion is easier because, well, that's how the thumb bends. It's not just about the difficulty of making the motion happen -- the motion is inherently imprecise (this is what Fitts' law effectively cares about, not necessarily the amount of physical effort).
We tried to sketch a "revised" model but it was a little unwieldy to plug into the beautifully-logarithmic Fitts equation. I think I still have that notebook.
Unfortunately, we never pursued it further. I'm a lowly programmer and not really interested in UX design anymore. My colleague was so burned out by academia that he didn't want to touch anything even vaguely resembling a research project with a ten-foot pole and I didn't even dare suggest publishing something 'cause I sort of valued our friendship.
However, it's something that's been lurking in the community for a while. I've mentioned it every once in a while, and almost every time I've heard something along the lines of "huh, I think I've seen this, too, I wonder if we could make a useful UI like this".
Turns out you can and it's finally happening!
Many years ago, back when everyone was just discovering smartphones (we used to call them smartphone back then, now we just call them phones...) and figuring out that widgets need to be larger in order to be easier to touch, I was having a beer with a colleague who was doing design back at the time and we were making an inventory of all the ways that this is going to change things.
And we thought this was going to be one of them, and we had the math to prove it! Fitts' famous law considers all axes of motion equal -- i.e. it's a model that describes moving horizontally, diagonally, horizontally or anything in-between as equally difficult.
This isn't the case for phones, especially not when they're used with a single hand. Horizontal motion at the bottom of the screen is very hard, because your thumb just don't bend that way. So is vertical motion on the right-hand side of the screen (for right-handed users -- left-hand side for left-handed users). Diagonal motion is easier because, well, that's how the thumb bends. It's not just about the difficulty of making the motion happen -- the motion is inherently imprecise (this is what Fitts' law effectively cares about, not necessarily the amount of physical effort).
We tried to sketch a "revised" model but it was a little unwieldy to plug into the beautifully-logarithmic Fitts equation. I think I still have that notebook.
Unfortunately, we never pursued it further. I'm a lowly programmer and not really interested in UX design anymore. My colleague was so burned out by academia that he didn't want to touch anything even vaguely resembling a research project with a ten-foot pole and I didn't even dare suggest publishing something 'cause I sort of valued our friendship.
However, it's something that's been lurking in the community for a while. I've mentioned it every once in a while, and almost every time I've heard something along the lines of "huh, I think I've seen this, too, I wonder if we could make a useful UI like this".
Turns out you can and it's finally happening!
How about we design phones for one-handed usage? Phones have been too big for years and years now. There are simply no options for a reasonably sized phone.
Hm, doesn't seem right.
My thumb can't reach the other side of the screen when I'm holding it with one hand.
The lower yellow space is where my thumb can reach best.
My thumb can't reach the other side of the screen when I'm holding it with one hand.
The lower yellow space is where my thumb can reach best.
Same. I don't have the biggest hands, but the when holding the phone with my right hand, the only area that is comfortable to reach is near the bottom right corner. That green "peak" on the top left definitely doesn't exist for me.
Tbh I'm not really able to do any interactive thing on my phone with just one hand. No matter how good the UI is. Reading news from a scrollable list, or swiping through pictures are the only things that are doable for me. Maybe I really have small hands? ._.
Tbh I'm not really able to do any interactive thing on my phone with just one hand. No matter how good the UI is. Reading news from a scrollable list, or swiping through pictures are the only things that are doable for me. Maybe I really have small hands? ._.
One of the worst aspects of Spotify's near monopoly is that it comes bundled with their app, which is functional but not great. I'm particular, the number of times I need to reach to the top then bottom of the screen to accomplish simple things is too high.
Which version? Their entire menu is at the bottom
Android. The setting menu is upper right hand corner on the home screen, and the triple-dot menu is upper right hand corner while a song is playing.
I really miss the jog dial on phones, specifically the ones on Sony Ericsson phones, which allowed for “click” and the left/right tilt. Perfect for scrolling content and list traversal.
Always wonder why no phones use them anymore.
Always wonder why no phones use them anymore.
I would already be happy if app designers (and mobile web designers) wouldn't put the buttons on top of the screen, where I can barely reach them most of the time.
I so wish phones had relative touch mode where the portion of the screen not covered by the keyboard acted like a trackpad.
It's not sexy but it's (IMO) much more ergonomic.
It's not sexy but it's (IMO) much more ergonomic.
maehwasu(3)
https://apps.apple.com/us/app/futurecalc-futuristic-calculat...