Solving The Back Button

I love the iPhone 5. The extra 640×176 pixels for content is very useful. But, I’ve had a lot of trouble accessing the most used button of all: the back button. As a rule in user experience, when a function is this frequently used, it should be made easily accessible.

49% of mobile users use their phone with one hand, this means that almost 1 out of 2 users use the back button several times a day. That’s billions of awkward taps daily. It’s even worse with bigger phones because you would almost certainly have to use your 2 hands to reach the back button. I guess that could be one reason why Android has their hardware back button on the bottom left, but still, it’s not that great since the back button can differ from the “up” button.

Solving With Gestures

The minimal way to solve this problem is to rely on gestures. Gestures are great when your users are well-educated about them, or when they’re used in addition to obvious visual buttons that perform the same functions.

To my surprise, after testing countless apps, I found out that there are already many out there that have tried to solve this problem. No one solution will fit all, but it’s a start. I’m hoping to see designers come up with even more innovative ways to solve this.

The Toss Technique

Using the metaphor of manipulating real objects, the toss technique is a way to simply take an active screen and toss it out of the way. Letterpress uses this technique on their popup screen by letting users toss down the popup. It’s fun.

On Facebook, when you full-view a photo, you can toss it up or down and voilà, you’re back to the previous screen.

The Horizontal Swipe

The standard transition in iOS is having new screens slide from the right. By performing a swipe in the opposite direction, you navigate back. For example, Pinterest lets you swipe back to the flow screen after you tapped on an image.

Likewise, in Flipboard, after you navigate to a section, you can swipe back to the menu.

On iBooks, there’s no visual that tells you that you can swipe to the next or previous pages. But in addition to the swiping, tapping the left or the right portion of the screen also navigate pages, so the chances of failing to discover are almost non-existant. And because it’s such a powerful metaphor, users get delighted when they discover that function graced by a beautiful animation.

The Vertical Swipe

Just like the horizontal swipe, the vertical swipe can be fitting if the content slides from the bottom or top. Interestingly, Day One made their own version of the Pull To Refresh paradigm by letting users navigate to the previous and next content.

Clear lets you navigate to a previous level by doing a long swipe whereas the short swipe creates a new task.

While it’s not exactly performing a back function, Haze lets you access the settings menu.

How About Hold Or Double Taps?

Hold and Double Taps can be reached with one thumb and that’s why I think they would be great gestures that can be further taken advantage of.

Solving With Visual Design

It does feel natural within the iOS guidelines to place the back button on the top left, but that doesn’t stop us from completely changing the visual design and move the button elsewhere. The button doesn’t even have to look like a button.

Basecamp made the back function look like a side navigation where if you tap that space, it rids of the overlay.

We can even treat sub screens as overlays and use the “Done” button. Done buttons are placed on the far top right, which makes it fairly accessible.

Final thought

Until Apple comes up with a thiner and bezel-less phone, my conclusion is that designers need to be more open about using gestures to help perform frequently used functions. Gestures can be intuitive if carefully crafted by understanding how things move and how the brain works. As designers, we need to be aware of how people use their phone so that we can design efficiently by delighting rather than frustrating.