One-handed mobile interface

In his book “Designing Mobile Interfaces” (2011) designer Steven Hoober coined the term “The Thumb Zone” — the most comfortable area for touch with one-handed use. Since the book was published, the average size of a smartphone has increased and “the dead zone” — an area that is extremely difficult to reach with a finger of one hand — has also become larger.

“The Thumb Zone” for 5–4,7-inch display, if you hold the phone in the left and right hand, respectively. Based on Scott Hurff post.

Both Android and iOS application toolbars (Android App Bar / Primary Toolbar and iOS Navigation Bar) located at the top of the screen fall into “the dead zone” marked in red. The use of such toolbars is definitely uncomfortable.

Certainly, there were attempts to solve the problem of “the dead zone”. For example, Samsung S4 and LG G Pro 2 offers One-handed Mode — phone interface decreases proportionally and shifts to the bottom corner of the screen. The iPhone 6 now has the same feature called Reachability — the interface moves down the screen, maintaining its width dimensions.

One-hand Mode on Android device and Reachability on iPhone 6.

These modes and features are just temporary solutions. They do not solve the problem completely. What they do — is just making one-handed use of your phone uncomfortable instead of being impossible.

A complete solution shouldn’t help to reach a desired button, but save a user from having to reach it.

iOS “Back” button is located in the midst of “the dead zone”. However, there is no need to reach it in most iOS applications due to “Navigate with a swipe” feature — swiping from the left edge of the phone to go back (Edge Swipe). Surprisingly, not all iPhones users know about it.

By the way, Google apps for iOS are almost the only ones that do not support swipes for going back. Apparently, Google intentionally degrades the user experience, stimulating users to buy phones with a hard “Back” button.

Android sidebar button (Navigation Drawer) also falls into “the dead zone”, and can also be reached by a similar gesture — a swipe from the left edge of the phone.

Sidebar (Navigation Drawer) on Android and “Navigare with a swipe” on iOS.

In these examples of two platforms, a swipe from the left edge of the phone (Edge Swipe) is equivalent to pressing the leftmost button on the app toolbar. Why not to use this solution for the entire toolbar and all buttons on it?

The leftmost and the rightmost toolbar icons should cease to be just buttons — they should suggest an action hidden behind a swipe from the left and right edge of the phone, respectively.

For example, iOS Messages app has a new message button on the right side of the navigation bar — in accordance with this new rule, a swipe from the right edge of the phone will create a new message.

One-handed mobile interface concept. A swipe from the edge of the phone equals to pressing toolbar icon on the same side of application toolbar. In this case — creating a new message in iOS Messages and getting back.

Android Gmail message screen has mailing action buttons on the right side of the app bar. Some general actions are shown — others are hidden behind the context menu button. In accordance with this new rule, a swipe from the right edge of the phone will open a message context menu. New context menu will contain a full list of actions, including the previously shown, bringing them closer to “the thumb zone”.

One-handed mobile interface concept. A swipe from the right edge of the phone equals to pressing a toolbar icon on the same side of the application toolbar. In this case — email context menu in Android Gmail.

The “Back” button on the same Android Gmail screen is located on the left side of the app bar, but a swipe from the left edge of the phone opens application sidebar. Users are misled by the wrong tip. Despite the presence of the hard “Back” button on Android-based phones, a swipe from the left edge of the phone on this screen should return a user to the inbox folder, and then — on the inbox folder screen — it should open the sidebar.

However there are no rules without exceptions. Either “Done” or “Send” buttons leading to a non-return action could be located on the right side of the toolbar. Such a simple gesture as a swipe should not lead to a non-return action.

One-handed mobile interface concept. A swipe from the edge of the phone equals to pressing a toolbar icon on the same side of application toolbar. In this case — search in Android Gmail and getting back.

A swipe from the edge of the phone (Edge Swipe) is hard to confuse with a swipe inside the screen (Swipe). The difference between these two gestures doesn’t cause any difficulties for a user or a developer. Edge Swipe starts outside of the screen and phones respond well to such gestures.

For example, Android Gmail inbox screen supports both gestures: a swipe from the left edge of the phone opens the sidebar, swipes inside the screen — next and previous messages.

Using swipes from the left and right edges of the phone to activate toolbar actions are easily applicable for both iOS and Android. Moreover, such features have already been partially implemented for the left edge of the phone on both platforms. This intuitive behavior has the potential to become a part of mobile interface standards.

Also published on Habrahabr.Ru
One-handed UI animations on Dribbble