We're Designing Apps Wrong For Huge Smartphones

We're Designing Apps Wrong for Huge Smartphones

As smartphones continue to get larger but our hands don't, what kinds of design solutions can ensure mobile interactions remain comfortable, quick and easy on our thumbs? Here are a few options to consider.

Designing for Thumbs

In his analysis of 1333 observations of smartphones in use, Steven Hoober found about 75 per cent of people rely on their thumb and 49 per cent rely on a one-handed grip to get things done on their phones. On large screens (over four inches) those kinds of behaviours can stretch people's thumbs well past their comfort zone as they try to reach controls positioned at the top of their device.

We're Designing Apps Wrong for Huge Smartphones

As an example, I personally encounter this issue daily when listening to Amazon's Music app. The primary control for navigating through music, which I use frequently, is located in the upper left corner of the screen — arguably the worst place for one-handed use. To reach it on a larger smartphone, I need to reset my grip to the middle of the phone or switch to two-handed use. But it doesn't have to be this way.

We're Designing Apps Wrong for Huge Smartphones

OS-Level Solutions

To account for existing applications designed like Amazon Music, mobile operating systems have created system-level features that make top-aligned controls reachable. Apple's version of this solution is aptly called Reachability.

With Reachability, a quick double tap on the phone's home button slides an application halfway down the screen. This makes previously unreachable controls accessible. While that's great, a simple one-tap action has now been turned into three.

We're Designing Apps Wrong for Huge Smartphones

Reachability also has an automatic time-out. Double-tap to bring down controls, look to see what you need next, and the app has already moved back to the top, requiring you to double-tap the home button again. It's an inelegant and (hopefully) unnecessary dance.

Edge Swipe Gestures

While manoeuvring your thumb to the upper-left corner of a large mobile screen can be difficult, swiping from the edge of the screen along the bottom of your device is not. This "edge-swipe" gesture can serve as a simple, alternate way to access controls positioned far from the thumb-zone.

We're Designing Apps Wrong for Huge Smartphones

Like all gesture controls, however, this form of menu access is out of sight and thereby often out of mind. In other words, you have to know the gesture exists and remember to use it when the need arises. As a result, it usually can't replace the visible menu control at the top but it can complement it.

Also, an edge swipe solution only makes access to the menu easier with one-handed use, not access to content within the menu.

Bottom Positioning

To ensure important frequently-used actions are comfortably reached with one-handed or one-thumb interactions, we need to consider repositioning controls at the bottom of the screen. This solution doesn't just address reachability, it can also improve a variety of other important metrics. Facebook found in recent testing that a bottom tab bar solution in their iOS app also improved engagement, satisfaction, and even perception of speed.

We're Designing Apps Wrong for Huge Smartphones
We're Designing Apps Wrong for Huge Smartphones

In the Amazon Music app, not only can we position the menu at the bottom of the screen but we can also reorder the options within it to ensure the most frequently used choices appear closer to the bottom of the screen. This allows quick access to the menu and its contents.

Floating Action Buttons

While many design solutions work well across multiple operating systems, there are times when we to take important differences into account in our designs.

For instance on Google's Android OS the bottom of the screen is reserved for the system navigation bar. This means any controls placed at the bottom of the screen are in close proximity to system-wide actions and thereby prone to mis-taps. In fact, Android's guidelines explicitly state "don't use bottom tab bars."

In Google's newer Material Design specifics, however, there's an alternate solution in the form of floating action buttons. Floating action buttons are a special type of promoted action and stick out above the rest of the UI. Usually, these actions are not navigation controls but in the case of the Amazon Music app, the case could be made that navigation is an action worthy of promotion given how often it gets used.

We're Designing Apps Wrong for Huge Smartphones

More to Learn

These are some of the ways to make important actions in mobile applications more accessible to one-handed use on large smartphones. As screen sizes continue to increase, we're likely to see even more approaches soon.

This post republished with permission from Luke Wroblewski's blog.

Luke is currently a Product Director at Google. Earlier he was the CEO and Co-founder of Polar (acquired by Google in 2014) and the Chief Product Officer and Co-Founder of Bagcheck (acquired by Twitter in 2011).


Comments

    This is why I liked having common control options at the bottom like when I was on WP7. Never understood why Apple thought the back button being placed in the furtherest place was a good idea

    BlackBerry 10 is a good example of using a mixture of gestures & placing controls low on the screen for fast & easy interaction.

    I don't agree with this at all, it assumes that people don't also use their left-hand for phone controls. I'm right handed, I use my left hand on my phone, putting the primary menu in the bottom right is more a PIA than the top left. It also assumes that everyone hold's there phone in the same height position and has the same sized thumbs.

    What really irks me is the way web pages render on mobile phones when you are navigating back and forth (this is not limited to any particular OS). I go back a page, the web page displays but because it hasn't stopped loading, the page moves up and down as pictures are loaded. The problem is that I'm trying to tap the next link, but inadvertently tap the wrong link because the page moves and registers my tap after it moved. If they could just anchor the page as soon as it displays, then load the page around the anchor point, it would solve the problem.

      Modern Web design allows for this easily, the developer just needs to implement it.

    I don't see the need to force old habits we developed during the nokia and blackberry heydays on current generation devices. While I agree we use our large phones one handed most of the time, the other hand or at least a finger from the other hand is often free and ready to assist using a large smartphone. If you cannot free up your other hand then you are likely engaged in an activity when you should not be using your phone to begin with.

    I also strongly disagree with revamping menu systems and UI design to primarily be positioned at the bottom. We read from left to right, top to bottom. When scanning for something, you instinctively start from there. Common action buttons like player controls, submit buttons, keyboards, dialers, etc. should be and already are often placed at the bottom.

    Only ever use two hands while doing anything on my phones, bar calls of course. Even when phones were tiny, I'd still use two hands. It's more precise and easier.

Join the discussion!

Trending Stories Right Now