Mobile UI for One-handed Use

I remember before the smart phone was invented, I could use only one hand to type text messages and make calls. But now I have to use two hands to finish some tasks on my iPhone. The main reason is that the screen gets bigger and it is hard to reach the upper part. It sounds like an obvious problem, but why do we still insist putting those buttons at those awkward locations? I guess the answer from most people is ‘because everybody is doing that.‘ Well, I think now it is time to break the rule and start doing the right thing. I happen to be redesigning an e-commerce app recently and it is the perfect opportunity to explore the possibility of creating a one-handed use design pattern for mobile apps.

Discovery Page

Search Page

Shopping Bag

Me Page

Identify the ‘safe zone‘

Before we jump into the design, we need to figure out the ‘safe zone‘ on the screen. I use iPhone 6 for the test. Because if the design works on iPhone 6 and it should work better on smaller screens. Those smart phones bigger than iPhone 6 are designed for two-handed use and there is no need to worry about them.

The green color indicates the ‘safe zone‘ in which it is easy to move my thumb around. Within the blue area, it gets a little bit harder, but I am still able to reach any spot. The red zone is the area that is impossible for me to reach without moving my other fingers. So in our design, we should put all the buttons and other interactive elements within the green and blue area and stay away from the red zone.

Easy

Hard

Find the problems

Now let’s take a look at some examples and find the problems we are gonna solve. Basically, there are 4 types of interactive elements often being used in the red zone: List of items, Back button, Sub navigation and Action buttons.

Back button (Fancy: Detail)

Sub Navigation (Spring: Shop)

Buttons (Facebook: News Feed)

List of items (Facebook: More)

Solution for ‘Back button’: Popover window

Back button is one of the most used buttons on mobile app. Android phone even makes it a fixed physical key. However, it is placed at the top-left corner of the screen in iOS, which is extremely hard to reach. The idea of the solution comes from the popover window on desktop: to close the popover, we tend to click anywhere outside the popover other than the close button. In the new detail page design, I put the detail info in a big popover, which is actually the same size as the old design, but the dimmed status bar and tab bar makes it look like floating above the previous page.

Detail (Previous)

Detail (New)

Detail Flow (New)

Solution for ‘Sub navigation’: Enable left-right swiping

It is relatively easy to solve this problem. All we need to do is to enable users swiping left and right to switch among different tabs. In the new ‘Discovery’ design, I changed the style of the sub navigation to make it look like more swipeable.

Discovery (Previous)

Discovery (New)

Discovery Flow (New)

Solution for ‘Action buttons’: Move everything to the tab bar

Search (Previous)

Search (New)

Search Flow (New)

Solution for ‘list of items’: Make the first item bigger or add informative content

List items stack from top to bottom. To avoid placing them in the red zone, we need to push them down. There are 2 ways of doing this without leaving an empty space: 1. Make the first item big enough so the bottom part can reach the safe zone. In the redesigned ‘Me‘ page, the user’s avatar is enlarged and the user can click its bottom part to edit the profile image. 2. Add informative content to the top. In the new shopping cart design, I moved shipping and tax fees on the top of the page to push the first item to the safe zone. However, you can notice that only the bottom part of the item is in the safe zone, to make it easy for users to click the ‘X‘ icon, I move it to the bottom and change it to ‘REMOVE‘.

Me (Previous)

Me (New)

Shopping Bag (Previous)

Shopping Bag (New)