7 ms·

A polite rant on mobile UX

31 points by toportyan 12y ago

dr4g0n 12y ago
> The so-called “ow zone” is a zone that is hard to reach with your thumb, like corners of the screen. The image that goes along with this point demonstrates the areas that are hard to reach for right-handed users, ignoring that ~10% of people are left-handed and have trouble reaching the opposite corners. Your design shouldn't assume that two particular corners are bad and the other two are fine, all four corners should be used for uncommon options only.
- toportyan 12y ago
  You are correct. Let me point this out in an update.
- Ambadassor 12y ago
  I'd like to stress that this is the correct solution. It is not enough to just slap on a "left-handed mode" that mirrors the UI. Most left-handed people don't use just their left hand when operating their phones - they use both, but prefer their left.
- ovulator 12y ago
  I’m right handed, but I use my phone with my left hand. Most of the time because I need my dominant hand to do something more complex. I don’t know if “handiness” really determines the hand in which you hold your phone.
podgib 12y ago
I couldn't agree more with point one on the 'ow zone.' I really can't understand why since ICS, google insists on putting so many important UI elements at the top of the screen, even as screens are getting bigger and bigger.
- toportyan 12y ago
  That's right. I have a few more thoughts on reasonable screen sizes, maybe I'll write another blog post on that topic as well.
CheckHook 12y ago
Spotify has a massive UX flaw. To access the options for a track there is a button on the right hand side, this is also where the scroll menu appears. I often find myself half way up the playlist when I wanted to queue a song.
- untog 12y ago
  On Android? That's where I experience this same infuriating problem.
RyanMcGreal 12y ago
Sidenote: at the top is a "tl;dr" link to a summary of key points at the bottom. The link is a named anchor #toolongdidntread. When you click it, the page scrolls down to the bottom but the location doesn't change to the anchor. That means you can't hit "back" to get back to the top of the page. It's just a small thing, but I find the cumulative weight of little touches that break basic browser functionality for marginal aesthetic reasons really start to grate on me.
- toportyan 12y ago
  Thanks for the observation. I'll fix this UX issue :)
  - RyanMcGreal 12y ago
    True to your word. Nicely done. Thank you!
detaro 12y ago
Article is fine, but: One of the worst examples for the "above the fold" image: a) it is pixelated like crazy and to big to comfortably read its contents, b) the headline is really hard to read and find, because it is white text on a background of white text on black...
- toportyan 12y ago
  Thanks for pointing that out. I will change it to something that fits better.
Ambadassor 12y ago
> Depending on your target audience, strive for accessibility, create layouts that can be used while e.g. driving, try to make your application adapt to the environment (for example mind the time of the day) Spotify (at least the iOS version) does this both wrong and right. When you browse for music, the app offers playlists based on the time of day. This is great, as the time of day has a lot of influence on the mood you'll want your music to convey. On the other hand, player view got one thing wrong. In this view, you can swipe down anywhere to exit the player view - as the player is "minimized" when you're browsing for music. However, swiping down anywhere really means anywhere - even when you're trying to skip the current song, and your finger happens to move down a little (maybe because you're driving), it minimizes the player rather than skipping the song. The minimized player is a smaller touch target than the playback icons, which makes returning to the player view and ultimately skipping the song extra-hard.
- toportyan 12y ago
  Thanks for the example. One of the motivations behind this article was to draw attention to the handedness of the mobile user and to the fact that the mobile user's attention is usually divided, the mobile user is usually 'multitasking' while using a smartphone. Under such circumstances, the user could easily miss a button that is not placed in the best location.
onion2k 12y ago
At what screen size will the "ow zone" problem become moot because it's impossible to use a phone with one hand? Are we already there with phones like the Galaxy Note 2 and iPhone 6+?
- toportyan 12y ago
  In my opinion Galaxy Note 2 is just too large for using it with one hand. Still, it has a comfort zone where you can reach UI elements with one thumb (either left or right), so maybe the developers should take this into consideration when designing layouts.
- sp332 12y ago
  If you double-tap the iPhone 6 home button, it moves the content of the screen down so you can reach it with your thumb.
  - DanBC 12y ago
    That doesn't sound particularly discoverable. That sounds like a power-user keyboard shortcut for what should be simple functionality.
    - sp332 12y ago
      Most of the touchscreen functions are not discoverable. Pinch-to-zoom, long-press, swiping with multiple fingers, etc. It's very easy to do though, not what I would call a power-user thing. Remember there is only one physical button on the front of the device, and this is one of the things that it does.
      - DanBC 12y ago
        Yes, I misuse "power user" to mean "someone who reads the fine manual" or "someone who does a websearch to learn about nice features".
        12y ago
Ambadassor 12y ago
The part about Android actually applies to all mobile operating systems - they would all rather you'd use their native UX language than invent your own.
- toportyan 12y ago
  That is correct, the user is used to a platform's behavior, and, in my opinion respecting the native UX language will keep that specific platform's user happy.
emehrkay 12y ago
"Android is Android" I don't like the fact that Google's apps, all of them, feel foreign on iOS and OSX. Chrome has its own PDF renderer, settings pane, maximize behavior (before Yosemite), other little things. The iOS apps feel like the Android ones. Google seems to be creating its own little OS inside of every other OS and the baseline is Chrome (OS). Wasn't there an effort, or talk about, to have Chrome do its own thing in Windows 8? This is why Material Design is important to Google. It targets the lowest common dominator, web browsers, and seems like it runs the same on a powerful computer or low-spec'd phone. While Material looks good, I feel that they may have held back a little because of browser limitations (you cannot do overlay blurring like iOS, for example). Anyway, a lot of people love the common feel of apps across platforms. People seem to really like that about SublimeText and Chrome. I personally don't. I thought it was in poor taste when Apple made Safari and iTunes behave as if it were on OS X when running on Windows and I think Apple even had its on OS X-style update windows for the windows apps. It's a fine line. As a developer Id rather code once and ship than to figure out all of the little idiosyncrasies for every platform. As a certain type of user I want apps to act like the other apps on my platform of choice, most users probably don't care or notice though.
- marcoms 12y ago
  > you cannot do overlay blurring like iOS, for example this may change in the future - the backdrop-filter CSS property should allow you to do exactly that, and support has already landed in chrome
  - emehrkay 12y ago
    Nice, very nice. I remember years ago I thought that I could do gaussian blur by copying the transparent layer in photoshop and repeating the tile in html/css. I think html/css/js would benefit if it just recreated everything that flash could do 10 years ago. Is that whats happening?
  - emehrkay 12y ago
    There was a tweet about this today, thought I'd share https://vine.co/v/OxmjlxdxKxl https://vine.co/v/OxmjlxdxKxl https://twitter.com/_ryanmack/status/567795669848616960 https://twitter.com/_ryanmack/status/567795669848616960
lucaspiller 12y ago
> Network data access costs a lot of money in some countries Very much this. I live in a country which has country wide LTE coverage in populated areas. While the network is fast, data is very expensive. Here 1GB of data in a bundle is around 35 USD, where as back home I can get 25GB for the same. I have mobile data turned off for most apps because of this. Everytime I open one (even if it works perfect offline) iOS pops up "Mobile data is turned off for XXX".
- toportyan 12y ago
  Thanks. In the past I downloaded some large files and I had to pay heavy money for them, so, as a developer, I will keep this in mind for a long time :)
- hamburglar 12y ago
  In addition, there's a good point to be made about network access related to the previous point: network traffic means battery drain.
Someone1234 12y ago
I haven't held a phone with one hand since 2011. I do mean that literally has I've owned a 5.1-5.2" phone since then. Therefore don't use my thumb to interact with it at all. The whole "The 'ow' zone" section assumes small phones, small hands, and right handed users.
- cauterized 12y ago
  Just because you don't doesn't mean that nobody does. Ever tried to use a phone two-handed while holding onto a subway pole? Or walking home with groceries? Or holding your kid's hand?
  - Someone1234 12y ago
    > Just because you don't doesn't mean that nobody does. The article claims though that everyone does which is what I take issue with.
    - cauterized 12y ago
      > The reason behind this term is that in many cases Mobile Users hold their device with one hand, and perform actions using their thumbs. Many, not all. It's enough of a problem for enough people that developers should pay attention to it.
wffurr 12y ago
The standard android and iOS navigation controls are directly within the "ow zone". Application "up" in the top left, system "back" in the bottom left. App switcher in the bottom right. The "go/search" button on the keyboard, bottom right.

31 points by toportyan 12y ago

> The so-called “ow zone” is a zone that is hard to reach with your thumb, like corners of the screen. The image that goes along with this point demonstrates the areas that are hard to reach for right-handed users, ignoring that ~10% of people are left-handed and have trouble reaching the opposite corners. Your design shouldn't assume that two particular corners are bad and the other two are fine, all four corners should be used for uncommon options only.

toportyan 12y ago
You are correct. Let me point this out in an update.
Ambadassor 12y ago
I'd like to stress that this is the correct solution. It is not enough to just slap on a "left-handed mode" that mirrors the UI. Most left-handed people don't use just their left hand when operating their phones - they use both, but prefer their left.
ovulator 12y ago
I’m right handed, but I use my phone with my left hand. Most of the time because I need my dominant hand to do something more complex. I don’t know if “handiness” really determines the hand in which you hold your phone.

podgib 12y ago

I couldn't agree more with point one on the 'ow zone.' I really can't understand why since ICS, google insists on putting so many important UI elements at the top of the screen, even as screens are getting bigger and bigger.

toportyan 12y ago
That's right. I have a few more thoughts on reasonable screen sizes, maybe I'll write another blog post on that topic as well.

CheckHook 12y ago

Spotify has a massive UX flaw. To access the options for a track there is a button on the right hand side, this is also where the scroll menu appears. I often find myself half way up the playlist when I wanted to queue a song.

untog 12y ago
On Android? That's where I experience this same infuriating problem.

RyanMcGreal 12y ago

Sidenote: at the top is a "tl;dr" link to a summary of key points at the bottom. The link is a named anchor #toolongdidntread. When you click it, the page scrolls down to the bottom but the location doesn't change to the anchor. That means you can't hit "back" to get back to the top of the page. It's just a small thing, but I find the cumulative weight of little touches that break basic browser functionality for marginal aesthetic reasons really start to grate on me.

toportyan 12y ago
Thanks for the observation. I'll fix this UX issue :)
- RyanMcGreal 12y ago
  True to your word. Nicely done. Thank you!

detaro 12y ago

Article is fine, but: One of the worst examples for the "above the fold" image: a) it is pixelated like crazy and to big to comfortably read its contents, b) the headline is really hard to read and find, because it is white text on a background of white text on black...

toportyan 12y ago
Thanks for pointing that out. I will change it to something that fits better.

Ambadassor 12y ago

> Depending on your target audience, strive for accessibility, create layouts that can be used while e.g. driving, try to make your application adapt to the environment (for example mind the time of the day) Spotify (at least the iOS version) does this both wrong and right. When you browse for music, the app offers playlists based on the time of day. This is great, as the time of day has a lot of influence on the mood you'll want your music to convey. On the other hand, player view got one thing wrong. In this view, you can swipe down anywhere to exit the player view - as the player is "minimized" when you're browsing for music. However, swiping down anywhere really means anywhere - even when you're trying to skip the current song, and your finger happens to move down a little (maybe because you're driving), it minimizes the player rather than skipping the song. The minimized player is a smaller touch target than the playback icons, which makes returning to the player view and ultimately skipping the song extra-hard.

toportyan 12y ago
Thanks for the example. One of the motivations behind this article was to draw attention to the handedness of the mobile user and to the fact that the mobile user's attention is usually divided, the mobile user is usually 'multitasking' while using a smartphone. Under such circumstances, the user could easily miss a button that is not placed in the best location.

onion2k 12y ago

At what screen size will the "ow zone" problem become moot because it's impossible to use a phone with one hand? Are we already there with phones like the Galaxy Note 2 and iPhone 6+?

toportyan 12y ago
In my opinion Galaxy Note 2 is just too large for using it with one hand. Still, it has a comfort zone where you can reach UI elements with one thumb (either left or right), so maybe the developers should take this into consideration when designing layouts.
sp332 12y ago
If you double-tap the iPhone 6 home button, it moves the content of the screen down so you can reach it with your thumb.
- DanBC 12y ago
  That doesn't sound particularly discoverable. That sounds like a power-user keyboard shortcut for what should be simple functionality.
  - sp332 12y ago
    Most of the touchscreen functions are not discoverable. Pinch-to-zoom, long-press, swiping with multiple fingers, etc. It's very easy to do though, not what I would call a power-user thing. Remember there is only one physical button on the front of the device, and this is one of the things that it does.
    - DanBC 12y ago
      Yes, I misuse "power user" to mean "someone who reads the fine manual" or "someone who does a websearch to learn about nice features".
      - 12y ago

Ambadassor 12y ago

The part about Android actually applies to all mobile operating systems - they would all rather you'd use their native UX language than invent your own.

toportyan 12y ago
That is correct, the user is used to a platform's behavior, and, in my opinion respecting the native UX language will keep that specific platform's user happy.

emehrkay 12y ago

"Android is Android" I don't like the fact that Google's apps, all of them, feel foreign on iOS and OSX. Chrome has its own PDF renderer, settings pane, maximize behavior (before Yosemite), other little things. The iOS apps feel like the Android ones. Google seems to be creating its own little OS inside of every other OS and the baseline is Chrome (OS). Wasn't there an effort, or talk about, to have Chrome do its own thing in Windows 8? This is why Material Design is important to Google. It targets the lowest common dominator, web browsers, and seems like it runs the same on a powerful computer or low-spec'd phone. While Material looks good, I feel that they may have held back a little because of browser limitations (you cannot do overlay blurring like iOS, for example). Anyway, a lot of people love the common feel of apps across platforms. People seem to really like that about SublimeText and Chrome. I personally don't. I thought it was in poor taste when Apple made Safari and iTunes behave as if it were on OS X when running on Windows and I think Apple even had its on OS X-style update windows for the windows apps. It's a fine line. As a developer Id rather code once and ship than to figure out all of the little idiosyncrasies for every platform. As a certain type of user I want apps to act like the other apps on my platform of choice, most users probably don't care or notice though.

marcoms 12y ago
> you cannot do overlay blurring like iOS, for example this may change in the future - the backdrop-filter CSS property should allow you to do exactly that, and support has already landed in chrome
- emehrkay 12y ago
  Nice, very nice. I remember years ago I thought that I could do gaussian blur by copying the transparent layer in photoshop and repeating the tile in html/css. I think html/css/js would benefit if it just recreated everything that flash could do 10 years ago. Is that whats happening?
- emehrkay 12y ago
  There was a tweet about this today, thought I'd share https://vine.co/v/OxmjlxdxKxl https://vine.co/v/OxmjlxdxKxl https://twitter.com/_ryanmack/status/567795669848616960 https://twitter.com/_ryanmack/status/567795669848616960

lucaspiller 12y ago

> Network data access costs a lot of money in some countries Very much this. I live in a country which has country wide LTE coverage in populated areas. While the network is fast, data is very expensive. Here 1GB of data in a bundle is around 35 USD, where as back home I can get 25GB for the same. I have mobile data turned off for most apps because of this. Everytime I open one (even if it works perfect offline) iOS pops up "Mobile data is turned off for XXX".

toportyan 12y ago
Thanks. In the past I downloaded some large files and I had to pay heavy money for them, so, as a developer, I will keep this in mind for a long time :)
hamburglar 12y ago
In addition, there's a good point to be made about network access related to the previous point: network traffic means battery drain.

Someone1234 12y ago

I haven't held a phone with one hand since 2011. I do mean that literally has I've owned a 5.1-5.2" phone since then. Therefore don't use my thumb to interact with it at all. The whole "The 'ow' zone" section assumes small phones, small hands, and right handed users.

cauterized 12y ago
Just because you don't doesn't mean that nobody does. Ever tried to use a phone two-handed while holding onto a subway pole? Or walking home with groceries? Or holding your kid's hand?
- Someone1234 12y ago
  > Just because you don't doesn't mean that nobody does. The article claims though that everyone does which is what I take issue with.
  - cauterized 12y ago
    > The reason behind this term is that in many cases Mobile Users hold their device with one hand, and perform actions using their thumbs. Many, not all. It's enough of a problem for enough people that developers should pay attention to it.

wffurr 12y ago

The standard android and iOS navigation controls are directly within the "ow zone". Application "up" in the top left, system "back" in the bottom left. App switcher in the bottom right. The "go/search" button on the keyboard, bottom right.