Feb 26 2013

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.

backbutton

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.

back-twitter

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.

back-letterpress

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

back-facebooktoss

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.

back-pinterest

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

back-flipboard

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.

back-ibooks

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.

back-dayone

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

back-clear

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

back-haze

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.

back-basecamp

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.

back-facebook-done

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.

0 tweets

163 Responses to “Solving The Back Button”

  1. Really interesting article which I fully agree: Solving The Back Button by @MengTo: http://t.co/0UPYBuE3WP #ios

  2. @tristanremy says:

    Solving The Back Button by @MengTo: http://t.co/VXIZWTTh5U

  3. @davidklaw says:

    Solving The Back Button by @MengTo: http://t.co/bXbH31CttS

  4. Solving The Back Button by @MengTo: http://t.co/RfTsiI9RAx

  5. Solving The Back Button by @mengto: http://t.co/UrvtmywIlC

  6. @cheeaun says:

    “Solving The Back Button” by @MengTo http://t.co/QeWtntMLw7

  7. @nefimov says:

    Solving The Back Button http://t.co/sd9XagsFY7 #mobile #ux

  8. matt says:

    Are hardware back buttons out of the picture? Or do I just really miss Sony Ericssons.

  9. Solving The Back Button http://t.co/baCwIRQbfQ via @mengto << Mind you, I still rock an iPhone 3GS so it’s not a problem for me. :))

  10. Article très intéressant et instructif sur le problème du bouton retour en ergonomie http://t.co/eTa4FsIgvC #ui #ergonomie

  11. @stiucsib86 says:

    For me, the most used buttons are Back, Options, Home, and Power. “Solving The Back Button http://t.co/16maUwjzRV

  12. @Jicecream says:

    Having more problems with the back button on Android to be honest. Hardware button and graphic… @MengTo: http://t.co/FxfQVf1rqG

  13. @jbfreelance says:

    Solving The Back Button by @MengTo: http://t.co/qWBK1dHvfV

  14. @mengto That’s why most iPhone 5 users, use their left hand (me included) ;-) >> Solving The Back Button http://t.co/kYm7lY2tE8

  15. @tomlewek says:

    The issue of the back button in mobile design: http://t.co/Qk5CSpAUyX

  16. @lilGronberg says:

    I’m posting an article about UX while doing UX research. How very meta… Solving The Back Button http://t.co/MhewrceEWk via @prismatic

  17. Andy says:

    This is why I believe the taller iPhone wasn’t because it’s a genuinely better design but because they needed more space in the case for LTE and the battery to power LTE

  18. @markgdyr says:

    Solving The Back Button — http://t.co/WOQv0HwGOB

  19. Solving The Back Button by @MengTo: http://t.co/n6jZbU1dDL

  20. conBdeBolio says:

    “The extra 640×76 pixels for content is very useful.”

    It’s 176 vertical pixels. Probably a typo.

    Hadn’t read an article that addressed the many ways in which designers/developers are trying to improve the “back button experience”. Thanks!

  21. Solving The Back Button by @MengTo: http://t.co/z4gFEtlqAm

  22. @PeterWWW says:

    Solving The Back Button by @MengTo: http://t.co/i1XFXwns75

  23. @uxs says:

    Solving The Back Button: iPhone 5はこれまでのiPhoneシリーズより縦に少しばかり長い。
    そして多くのユーザは片手でスマートフォンを操作することが知られている。
    こうなる… http://t.co/B2mheNOkYW #ux

  24. @so_billy says:

    Solving The #Back #Button by @MengTo: http://t.co/mnN3yFxsaV | #mobile #UI

  25. @_rzzo says:

    Solving The Back Button http://t.co/ImE77jqDPh

  26. Solving The Back Button by @MengTo: http://t.co/MYKDWIfndj

  27. @arieare says:

    Solving The Back Button http://t.co/r12xpctZSY #ux #usability

  28. nice read – Solving The Back Button http://t.co/ZNTgPwF7CZ

  29. @RohitRMehta says:

    Solving The Back Button by @MengTo: http://t.co/nJ1YGEyKXu

  30. @uxfeeds says:

    Solving The Back Button: http://t.co/RAHTDRm53H #ux

  31. @braitom says:

    参考になりそう。 Solving The Back Button http://t.co/N9kmkvHhyS

  32. Mobil uygulamalarda geri butonu mevzusu “Solving The Back Button” http://t.co/cgEY1blULK

  33. @jfdej says:

    Solving The Back Button by @MengTo: http://t.co/eKvD3pd7E2

  34. John says:

    I feel like one of the big issues with bezel swipes on phones is a manufactured one – so many people use protective cases that have a “lip” on them, which actually make it annoying to perform the gesture on the phone’s already-thin horizontal bezels.

  35. @remygazelot says:

    Solving The Back Button cc @gmajoulet @Romaind http://t.co/EDIg3PBNCF

  36. @Alex_Tak says:

    Solving the back button on iOS #ux #mobile IMo the worst case is on iPad !
    http://t.co/OX5sOQFh3S

  37. This is why the iPhone was 3.5”. Making it larger caused this. “@RyanColgin: Solving The Back Button by @MengTo: http://t.co/nUavKYSV0T…”

  38. @filipbrocke says:

    interesting! imo as a (mainly) left hand phone user it’s not that big problem… /// Solving The Back Button http://t.co/tDKlZDKG74

  39. Warwick says:

    Interesting… I personally (no actual testing as gone into this) nearly always use my phone with my left hand and find the back button fine to use. It’s the facebooks ‘DONE’ button that I really find hard to reach. I’m right handed btw.

    I would love to know what the % is for what hand the phone is used in.

  40. @megurary says:

    iPhone5 では左上 backボタンに右手指が届かない。問題を解決するには。 http://t.co/JTESQYLsQf

  41. meta.teo says:

    Thanks for your useful article! I read it with enjoyment.

  42. @pradeek says:

    Solving The Back Button http://t.co/dkx6WZqZCi #interesting

  43. Shankar says:

    For left handers, the back button will be easy to reach while the done button will be harder.

  44. @shankness says:

    challenging issue. RT @pradeek: Solving The Back Button http://t.co/T32HYJ6ADB #interesting

  45. @aizeadesign says:

    #UX #Design #Mobile Solving The Back Button by @MengTo: http://t.co/ZwszramMwn

  46. @pavel_macek says:

    Nice overview of go back interaction on iOS “Solving The Back Button” http://t.co/2Nb29g0c57

  47. @koks says:

    Solving The Back Button http://t.co/QJSykcg8zI

  48. Take a look at Solving The Back Button: http://t.co/D96wHXikwJ

  49. @apptamin says:

    Solving The Back Button http://t.co/NxaAlExHTz #iPhone5 #UX

  50. [...] Web Design, User Experience – Solving The Back Button “Gestures can be intuitive if carefully crafted by understanding how things move and how the [...]

  51. @bytino says:

    Solving The Back Button http://t.co/gWY3bYoJaL

  52. @fffabs says:

    Solving the back button http://t.co/ZF2S7KnHvJ – nice cameo of the upcoming StatNut, thanks @tancro

  53. @vijju2k says:

    Solving The Back Button (on iOS)
    http://t.co/XWgQKkZZac via @lukew #mobileux

  54. @essparker says:

    Tossing the button aside in favour of larger hit-area gestures – RT @lukew: Solving The Back Button (on iOS) @MengTo
    http://t.co/WGKmbyM6qT

  55. @garnerkory says:

    Something that’s been on my mind, too.

    “@lukew: Solving The Back Button (on iOS)
    http://t.co/F6g2ToJtpM

    ht/ @scottjenson”

    #gestures

  56. @denislesak says:

    Solving The Back Button via @lukew http://t.co/1wfm0JTwmF

  57. @JRulle says:

    Great article about that hard to reach iPhone 5 back button… Solving The Back Button by @MengTo: http://t.co/yxWFhDq10P #ios

  58. @rafaeldahis says:

    iPhone: Solving The Back Button Problem by @MengTo: http://t.co/wn476FRLF7

  59. @spacetamer says:

    Solving the iOS back button w/ gestures? rt @lukew http://t.co/YAoZTsNPic

  60. @LafiKL says:

    Solving The Back Button – http://t.co/PFnqMBy4sB

  61. @Jacques404 says:

    Definitely going to incorporate these concepts into my new app! http://t.co/7rA2BeffD4

  62. @philparry says:

    Solving The Back Button (via @Lukew ) – at least someone agrees with me about poor placement of iOS back btn. http://t.co/WAoq7mlbY3

  63. @mpuig says:

    Interesting article “Solving The Back Button” http://t.co/r83uNGMbNn #mobile #UX

  64. @cabgfx says:

    Solving The Back Button — great thoughts on the problems w large handhelds. But what about lefties? /cc @anderslemke http://t.co/6VEY8hHWKp

  65. @inautilo says:

    DESIGN / Solving The Back Button · Design suggestions for an iPhone 5 dilemma. http://t.co/9kOgqbZUvF by @MengTo. #iphone5 #ui

  66. Solving The Back Button by @MengTo: http://t.co/HjNvOohs6W via @SidebarIO

  67. @smcrowe says:

    Solving The Back Button http://t.co/tLR2RnIEgt (via Instapaper)

  68. Swipes, thumb navigation, back buttons and more : #ux patterns : http://t.co/xjjNxUYVFg

  69. @ravirani says:

    Solving The Back Button by @MengTo: http://t.co/XGS81a7apl

  70. Solving The iOS Back Button http://t.co/0DXUON07pX #mobile #ux

  71. @AlexOnUX says:

    Solving The Back Button …well, at least for for iOS apps http://t.co/pt0DfNwpLi #ux #mobile #iOS

  72. @madsroland says:

    Solving The Back Button by @MengTo. http://t.co/JFfYEJulBZ

  73. @gilgongo says:

    Nice, but who’s idea was it to make the iPhone5 unusable in the first place? http://t.co/tjsLCCpJzR

  74. Solutions to IPhone 5′s back button? http://t.co/RBTa7cUyYQ

  75. Solving The Back Button by @MengTo: http://t.co/xilN16wOow

  76. @zahareus says:

    Решение проблемы с кнопкой Back для “одноруких” пользователей мобильных http://t.co/m4wxVWeh2B

  77. Решаем проблему с кнопкой «Назад» (неудобно тянуться пальцем) при проектировании интерфейса для iPhone 5 (англ.) http://t.co/Dzdk7aNmur

  78. @arcatype says:

    Solving The Back Button (on iOS) by @MengTo: http://t.co/MtccH73dkq

    /ht @lukew

  79. Solving The Back Button with the iPhone 5:

    http://t.co/WK2JYXeKjK

  80. @LCdesigning says:

    Time to put on the thinking cap | Solving The ‘Back’ Button | http://t.co/HIXOIcjfxR

  81. @dancounsell says:

    Interesting article about the problem some people have with the back button. Solving The Back Button – http://t.co/YyACJlm48A

  82. @joelvodell says:

    great article on solving the back button for iPhones: http://t.co/vnKVo0Nv8E

  83. @idevzilla says:

    I like gestures like the Facebook “toss” when in fullscreen image, but the back button should be available as well. http://t.co/L9L4nq9eQ8

  84. Solving The Back Button by @MengTo: http://t.co/8mgdjmcGOf

  85. @NSElvis says:

    Solving The Back Button.

    http://t.co/GMm3y76TAc

  86. @gielcobben says:

    Solving The Back Button by @MengTo: http://t.co/VwtOVzSCRU

  87. Baca nih, ulasan tentang button “Back”: http://t.co/sSPvW3YUdP #DSindepth

  88. @myninka says:

    There is NO such #usability issue with #WindowsPhone:
    Solving The Back Button http://t.co/zlb0rUe4zB

  89. Solving The Back Button by @MengTo: http://t.co/i2JiVYHs6s

  90. Seems I’m not the only person who can’t reach the back button on the iPhone 5 when holding the phone one-handed … http://t.co/MVoHiXjX6V

  91. O problema do botão voltar http://t.co/TDxA5tuSuy #ux #mobile

  92. [...] Drobox CEO Drew Houston's message, really. The iPhone 5 has a nice, tall screen, but it can be a bit of a reach to hit back buttons in certain apps one-handed (also depending on which hand you're holding the iPhone in). Gestures [...]

  93. @amberkarnes says:

    Some good ideas about solving design problems in a mobile setting: Solving The Back Button by @MengTo: http://t.co/6TI2cUKOk7

  94. Worth reading: solving the back button problem for a better #mobile #UX. http://t.co/YpmXZk7g9d via @globalmoxie #gestures

  95. AD says:

    A cool follow up on this would be where to find frameworks/libraries or just open source code to help leverage programmers/developers to make alternative navigation methods.

    Thanks

  96. Ahmed Amanatullah says:

    There is one more you can add, that is dragging from the left edge of screen. I think Chrome does that if you have multiple tabs.

  97. [...] Solving the back button [...]

  98. Brian says:

    This is one of the big reasons why I switched from my iPhone 4s to the BlackBerry Z10 – the gestures take a little getting used to but once you get them the back button seems archaic.

  99. [...] 70 thousand unique visitors came to my blog seeking information about Sketch, Android design and Solving The Back Button. Many came back. Designers would ask me questions directly on Twitter, to which I happily replied. [...]

  100. max says:

    really great article to read, i would also suggest gestures like shake, hold screen and shake left is back, right is another action.

  101. Wharfy says:

    I know that we are trying to create an industry standard approach. What about left handed people!

  102. Ryan Murphy says:

    Who gave you permission to use my face?

  103. Mikail Husain says:

    great read!

  104. Jason says:

    Solution:
    1) Buy a Windows Phone

  105. Tom Wahlin says:

    Great thoughts here, thank you for sharing.

  106. [...] Real problem of thumb (can’t reach back button on 4″+ smartphones): Solving The Back Button [...]

  107. @lucas_cobb says:

    Solving The Back Button | Meng To|UI/UX Designer http://t.co/MSdb6czi4z

  108. Le diable et les détails Accéder au bouton back sur des écrans mobiles de grande taille http://t.co/xHdoAUl56o #ux

  109. @Chacha_ says:

    Solving The Back Button #ux #ui #ergonomie http://t.co/Je1oqwIhqm

  110. Repéré ce matin : Le diable et les détails Accéder au bouton back sur des écrans mobiles de grande taille http://t.co/xHdoAUl56o #ux

  111. @pixiolabs says:

    An interesting article on Solving The Back Button in smartphones with a tall display – http://t.co/1BFMDWHNoE #ux

  112. @chat0r says:

    Solving The Back Button by @MengTo: http://t.co/imSOuibQlx

  113. @jimstem says:

    Great insights into mobile #design patterns on large screens: The Vertical Swipe by mengto – http://t.co/quzxMFbGrI – #ux #design #mobile

  114. [...] 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. [...]

  115. @mmalioris says:

    Solving The Back Button by @MengTo: http://t.co/Q9GBm24kxP | Tweet Parade http://t.co/Z3xBiIcNls by @gonzodesign

  116. @pettjoh says:

    Good read! “Solving The Back Button” #design #ui http://t.co/dCS4T6OCRR

  117. @nikla88 says:

    Solving The Back Button http://t.co/oMcuszwUbK #mobile #ux

  118. @drublic says:

    Solving The Back Button – http://t.co/Zms3AIdwpu

  119. @_ADarwish says:

    For App designers – Solving the back button un -reachability in bigger phones http://t.co/xEIB6OvCWU

  120. [...] Designer le retour en arrière sur interface mobile… pas simple, mais de belles solutions existent ; [...]

  121. @LuigiNista says:

    Solving The Back Button by @MengTo: http://t.co/OJG9wyrUeo – or grow up your thumb ;-P

  122. Solving The Back Button by @MengTo: http://t.co/XXKbYOUExW

  123. @eliglynn says:

    Solving The Back Button | http://t.co/rKVWKNs4L0

  124. @Uxswitch says:

    Solving The Back Button by @MengTo: http://t.co/3AyaMDWLWN

  125. @mntgmry says:

    Solving The Back Button (via @MengTo) – http://t.co/g7H7ZUqBTk

  126. Great pictures! This is the types of information that ought to be contributed online. Shame on Google because of positioning the following release better! Can happen in excess of plus talk to our web page. Appreciate it Equals)

  127. [...] Решая проблему кнопки “Назад” 49% мобильных пользователей держат устройство одной рукой, а это значит, что привычное место кнопки “назад” в iOS и Home в Andoroid устройствах в половине случаев труднодоступное для нажатия. Автор статьи предлагает несколько вариантов решения этой проблемы. [...]

  128. @arjun_aj says:

    Solving The Back Button by @MengTo: http://t.co/pxHnyDZ0XK

  129. @bluemag says:

    Solving The Back Button by @MengTo: http://t.co/7sXH4JfQHG #UX #Appdesign

  130. @KezSan says:

    @thejennycrayon thought it was because I had short thumbs. Clearly not just me! http://t.co/h02ouKP7yY #iphone #ux #abittoolong

  131. Today I am thinking of ways to handle the “back” button interaction on a mobile app. This article is great… http://t.co/jeAd1XlpSY

  132. Solving The Back Button | Meng To http://t.co/0DXUON07pX #mobile #ux

  133. [...] of the phone on iOS 7′s apps will go back to the previous screen. This effectively solves the one-hand usage issue I blogged about [...]

  134. [...] 原文出处:blog.mengto.com 译者博客:Be For Web [...]

  135. [...] 原文出处:blog.mengto.com 译者博客:Be For Web [...]

  136. [...] FORM:http://blog.mengto.com/solving-the-back-button/ [...]

Leave a Reply