What about a Floating-Back Button?

I’m using an iPhone 6 since almost two months now. I was pretty excited about the larger display and for sure does it improve the user experience when browsing a website or playing games. However, big smartphones do have their drawbacks and I want to focus on one particular problem. I’m using the Twitter App as an example:

My too short thumb…

The Problem

Can you guess it? I am the epitome of laziness! How I’m supposed to comfortable reach the back-button without repositioning my hand?

This seriously annoys me. I’m a one-hand smartphone user and I want to interact with it in a comfortable way. I don’t want to reposition my hand and I definitely don’t want to use my second hand to hit the back-button.

How can we improve this experience?

Known Solutions

Double Tab

Yeah, we could double-tab the home button to bring the screen down. But this is, as far as I know, only an iOS thing and it feels pretty unfamiliar and laborious. In addition; At the point I decide to navigate back, I just don’t think about the double-tab feature.

Gestures

The Swipe-Gesture from the left edge to the right to navigate back was introduced with the release of iOS7. This feature automatically works on apps where the standard back-navigation controller is in use. In most cases this works just fine. But I really have problems sometimes to trigger the swipe correctly, as it really needs to start on most outer edge of the screen. I apparently struggled so much that I didn’t even realized that Twitter already had this feature built-in. Thanks Michael Csanaky for pointing that out.

Another known gesture is the TouchMoveUp or TouchMoveDown to close the current view and go back to the last screen. We already know that from Apps like Facebook. This gesture reminds me of the Pull-Down to refresh feature. It’s just kind of hard to do… At least for me. :-)

Floating Back-Button

I really love the solution Pinterest uses to pin an image when you tab on it:

Pinterest Pin Animation

I thought this could be adapted to a Navigate-Back function, I call it the Floating-Back Button. The Floating-Back Button would appear when you “TouchMoveLeft” anywhere on the screen. When you release, you’ll come back to the last view. I’ve created a little prototype to illustrate this on the Twitter App:

The Floating Back Button (Prototype created using Sketch and Framer Studio)

This method should work perfectly even if you TouchMove over another UI element such as a link or button since it’s another gesture. Smartphones should recognize the difference. The experience feels very natural and it’s comfortable to use.

Let me know what you think and feel free to hit me up on Twitter or Dribbble.

Show your support

Clapping shows how much you appreciated Thomas Veit’s story.