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.
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.
Really interesting article which I fully agree: Solving The Back Button by @MengTo: http://t.co/0UPYBuE3WP #ios
Solving The Back Button by @MengTo: http://t.co/VXIZWTTh5U
Solving The Back Button by @MengTo: http://t.co/bXbH31CttS
Solving The Back Button by @MengTo: http://t.co/RfTsiI9RAx
Solving The Back Button by @mengto: http://t.co/UrvtmywIlC
“Solving The Back Button” by @MengTo http://t.co/QeWtntMLw7
Solving The Back Button http://t.co/sd9XagsFY7 #mobile #ux
Are hardware back buttons out of the picture? Or do I just really miss Sony Ericssons.
That wouldn’t really solve the one-hand reach issue since the screen takes most of the space. Personally, I don’t miss physical buttons. One is enough.
Actually, the Android hardware “back” definitely works for me on my Android phone. It’s on the bottom right side of the screen, so it’s right in the range of motion for my thumb when I hold the phone in one hand. So it’s super easy to go “back” when holding the phone with one hand.
I had a Android, the back is great when the phone is in portrait, but when you switch to landscape the button is a pain in the ass to press.
That is why i love my HTC ONE X ;) No back required as I already have one! Only big problem with this (obviously) is the question ” What are the programmers going to use this back button for?!”
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. :))
Article très intéressant et instructif sur le problème du bouton retour en ergonomie http://t.co/eTa4FsIgvC #ui #ergonomie
For me, the most used buttons are Back, Options, Home, and Power. “Solving The Back Button http://t.co/16maUwjzRV“
Having more problems with the back button on Android to be honest. Hardware button and graphic… @MengTo: http://t.co/FxfQVf1rqG
Solving The Back Button by @MengTo: http://t.co/qWBK1dHvfV
@mengto That’s why most iPhone 5 users, use their left hand (me included) ;-) >> Solving The Back Button http://t.co/kYm7lY2tE8
The issue of the back button in mobile design: http://t.co/Qk5CSpAUyX
I’m posting an article about UX while doing UX research. How very meta… Solving The Back Button http://t.co/MhewrceEWk via @prismatic
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
Well, good design makes us rethink old paradigms. The back button is one of them. When I go back to the iPhone 4, I much less appreciate bulkiness and the small content area. It’ll be interesting to see how designers can adapt and how phone makers can improve the hold experience.
Solving The Back Button — http://t.co/WOQv0HwGOB
Solving The Back Button by @MengTo: http://t.co/n6jZbU1dDL
“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!
Thanks for the correction! I’m sure there are even more ways, but I had to draw a line. :)
Solving The Back Button by @MengTo: http://t.co/z4gFEtlqAm
Solving The Back Button by @MengTo: http://t.co/i1XFXwns75
Solving The Back Button: iPhone 5はこれまでのiPhoneシリーズより縦に少しばかり長い。
そして多くのユーザは片手でスマートフォンを操作することが知られている。
こうなる… http://t.co/B2mheNOkYW #ux
Solving The #Back #Button by @MengTo: http://t.co/mnN3yFxsaV | #mobile #UI
Solving The Back Button http://t.co/ImE77jqDPh
Solving The Back Button by @MengTo: http://t.co/MYKDWIfndj
Solving The Back Button http://t.co/r12xpctZSY #ux #usability
nice read – Solving The Back Button http://t.co/ZNTgPwF7CZ
Solving The Back Button by @MengTo: http://t.co/nJ1YGEyKXu
Solving The Back Button: http://t.co/RAHTDRm53H #ux
Solving The Back Button » http://t.co/5iCfQ6GN9W #iPhone
参考になりそう。 Solving The Back Button http://t.co/N9kmkvHhyS
Solving The Back Button – http://t.co/XYD8ltIRaA
Mobil uygulamalarda geri butonu mevzusu “Solving The Back Button” http://t.co/cgEY1blULK
Solving The Back Button by @MengTo: http://t.co/eKvD3pd7E2
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.
Solving The Back Button cc @gmajoulet @Romaind http://t.co/EDIg3PBNCF
Solving the back button on iOS #ux #mobile IMo the worst case is on iPad !
http://t.co/OX5sOQFh3S
This is why the iPhone was 3.5”. Making it larger caused this. “@RyanColgin: Solving The Back Button by @MengTo: http://t.co/nUavKYSV0T…”
interesting! imo as a (mainly) left hand phone user it’s not that big problem… /// Solving The Back Button http://t.co/tDKlZDKG74
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.
Jonathan Stark recently did a mobile-handedness survey and, although the sample size is small, it’s on the right track to answering your question.
http://jonathanstark.com/blog/results-of-mobile-phone-handedness-survey
iPhone5 では左上 backボタンに右手指が届かない。問題を解決するには。 http://t.co/JTESQYLsQf
if you don’t use canned bean,Uggh, the only thing thats more laborious than making hummus from scratch is scraping wall paper off the walls. Soaking the beans is a two day process. (Que John)We have done it this way and it still never comes out the same as the flaffel pleSt.cmooahe hummus is one secret we have never been able to unlock.
Thanks for your useful article! I read it with enjoyment.
Solving The Back Button http://t.co/dkx6WZqZCi #interesting
For left handers, the back button will be easy to reach while the done button will be harder.
challenging issue. RT @pradeek: Solving The Back Button http://t.co/T32HYJ6ADB #interesting
http://t.co/Y4rh8lMDl1
#UX #iOS
#UX #Design #Mobile Solving The Back Button by @MengTo: http://t.co/ZwszramMwn
Nice overview of go back interaction on iOS “Solving The Back Button” http://t.co/2Nb29g0c57
[…] Must To Read – How to Solving Back Button ! […]
Solving The Back Button http://t.co/vpAjHn5H3w
Solving The Back Button http://t.co/QJSykcg8zI
Solving The Back Button http://t.co/p32BcNzBcz
Take a look at Solving The Back Button: http://t.co/D96wHXikwJ
Solving The Back Button http://t.co/hXVm75uGdB
Solving The Back Button http://t.co/NxaAlExHTz #iPhone5 #UX
[…] Web Design, User Experience – Solving The Back Button “Gestures can be intuitive if carefully crafted by understanding how things move and how the […]
Solving The Back Button http://t.co/gWY3bYoJaL
Solving the back button http://t.co/ZF2S7KnHvJ – nice cameo of the upcoming StatNut, thanks @tancro
Solving The Back Button (on iOS)
http://t.co/XWgQKkZZac via @lukew #mobileux
Tossing the button aside in favour of larger hit-area gestures – RT @lukew: Solving The Back Button (on iOS) @MengTo
http://t.co/WGKmbyM6qT
Something that’s been on my mind, too.
“@lukew: Solving The Back Button (on iOS)
http://t.co/F6g2ToJtpM
ht/ @scottjenson”
#gestures
Solving The Back Button via @lukew http://t.co/1wfm0JTwmF
Great article about that hard to reach iPhone 5 back button… Solving The Back Button by @MengTo: http://t.co/yxWFhDq10P #ios
Solving The Back Button http://t.co/2ooWLvFVBd
iPhone: Solving The Back Button Problem by @MengTo: http://t.co/wn476FRLF7
Solving the iOS back button w/ gestures? rt @lukew http://t.co/YAoZTsNPic
Solving The Back Button – http://t.co/PFnqMBy4sB
Definitely going to incorporate these concepts into my new app! http://t.co/7rA2BeffD4
Solving The Back Button (via @Lukew ) – at least someone agrees with me about poor placement of iOS back btn. http://t.co/WAoq7mlbY3
Interesting article “Solving The Back Button” http://t.co/r83uNGMbNn #mobile #UX
Solving The Back Button — great thoughts on the problems w large handhelds. But what about lefties? /cc @anderslemke http://t.co/6VEY8hHWKp
Solving the back button: http://t.co/2kHPpTAS92
DESIGN / Solving The Back Button · Design suggestions for an iPhone 5 dilemma. http://t.co/9kOgqbZUvF by @MengTo. #iphone5 #ui
Solving The Back Button by @MengTo: http://t.co/HjNvOohs6W via @SidebarIO
Solving The Back Button http://t.co/tLR2RnIEgt (via Instapaper)
Swipes, thumb navigation, back buttons and more : #ux patterns : http://t.co/xjjNxUYVFg
Solving The Back Button by @MengTo: http://t.co/XGS81a7apl
Solving The iOS Back Button http://t.co/0DXUON07pX #mobile #ux
Solving The Back Button …well, at least for for iOS apps http://t.co/pt0DfNwpLi #ux #mobile #iOS
Solving The Back Button by @MengTo. http://t.co/JFfYEJulBZ
Nice, but who’s idea was it to make the iPhone5 unusable in the first place? http://t.co/tjsLCCpJzR
Solutions to IPhone 5’s back button? http://t.co/RBTa7cUyYQ
Solving The Back Button by @MengTo: http://t.co/xilN16wOow
Решение проблемы с кнопкой Back для “одноруких” пользователей мобильных http://t.co/m4wxVWeh2B
Решаем проблему с кнопкой «Назад» (неудобно тянуться пальцем) при проектировании интерфейса для iPhone 5 (англ.) http://t.co/Dzdk7aNmur
Solving The Back Button (on iOS) by @MengTo: http://t.co/MtccH73dkq
/ht @lukew
[…] 《Solving The Back Button》by Meng To […]
Solving The Back Button with the iPhone 5:
http://t.co/WK2JYXeKjK
Time to put on the thinking cap | Solving The ‘Back’ Button | http://t.co/HIXOIcjfxR
Interesting article about the problem some people have with the back button. Solving The Back Button – http://t.co/YyACJlm48A
great article on solving the back button for iPhones: http://t.co/vnKVo0Nv8E
I like gestures like the Facebook “toss” when in fullscreen image, but the back button should be available as well. http://t.co/L9L4nq9eQ8
Solving The Back Button by @MengTo: http://t.co/8mgdjmcGOf
Solving The Back Button.
http://t.co/GMm3y76TAc
Solving The Back Button by @MengTo: http://t.co/VwtOVzSCRU
Baca nih, ulasan tentang button “Back”: http://t.co/sSPvW3YUdP #DSindepth
Solving The Back Button http://t.co/uS3SMn3WaG
There is NO such #usability issue with #WindowsPhone:
Solving The Back Button http://t.co/zlb0rUe4zB
Solving The Back Button by @MengTo: http://t.co/i2JiVYHs6s
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
Solving The Back Button http://t.co/yENTS0GR29
O problema do botão voltar http://t.co/TDxA5tuSuy #ux #mobile
[…] 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 […]
This piece was cogent, wewntlri-tel, and pithy.
Now I know who the brainy one is, I’ll keep looking for your posts.
25 julio, 2007Anónimoya hice todo eso antes y aun asi sigue sin salirme nada esque creo q la actualizacion no me yega nose porque, porque el programa lo tengo en la ultima version actualizado oy
best dicision to help make your goals come true. Be sure to learn all you can the info here aboutprotein bar and what it can do for you. Posted in Fitness , best protein bar reviews, Fitness, Protein Bar,
Che meraviglia! Mi son persa un paiodi tuoi mesi, hai due progetti meravigliosi per le mani, diciamo uno nel pancione e uno di cucina, mi piacerebbe partecipare ti immagino bravissima a insegnare!!!auguroni per tutto!
Some good ideas about solving design problems in a mobile setting: Solving The Back Button by @MengTo: http://t.co/6TI2cUKOk7
Worth reading: solving the back button problem for a better #mobile #UX. http://t.co/YpmXZk7g9d via @globalmoxie #gestures
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
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.
[…] Solving the back button […]
[…] http://blog.mengto.com/solving-the-back-button/ […]
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.
[…] 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. […]
really great article to read, i would also suggest gestures like shake, hold screen and shake left is back, right is another action.
I know that we are trying to create an industry standard approach. What about left handed people!
Who gave you permission to use my face?
great read!
Solution:
1) Buy a Windows Phone
seriously?
[…] Solving the back button […]
Great thoughts here, thank you for sharing.
[…] Real problem of thumb (can’t reach back button on 4″+ smartphones): Solving The Back Button […]
Solving The Back Button | Meng To|UI/UX Designer http://t.co/MSdb6czi4z
Solving The Back Button http://t.co/0Y5rwsm7aK
Le diable et les détails Accéder au bouton back sur des écrans mobiles de grande taille http://t.co/xHdoAUl56o #ux
Solving The Back Button #ux #ui #ergonomie http://t.co/Je1oqwIhqm
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
An interesting article on Solving The Back Button in smartphones with a tall display – http://t.co/1BFMDWHNoE #ux
Solving The Back Button by @MengTo: http://t.co/imSOuibQlx
Great insights into mobile #design patterns on large screens: The Vertical Swipe by mengto – http://t.co/quzxMFbGrI – #ux #design #mobile
[…] 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. […]
Solving The Back Button by @MengTo: http://t.co/Q9GBm24kxP | Tweet Parade http://t.co/Z3xBiIcNls by @gonzodesign
Good read! “Solving The Back Button” #design #ui http://t.co/dCS4T6OCRR
Solving The Back Button http://t.co/gn1TbM8ccT
Solving The Back Button http://t.co/oMcuszwUbK #mobile #ux
Solving The Back Button – http://t.co/Zms3AIdwpu
For App designers – Solving the back button un -reachability in bigger phones http://t.co/xEIB6OvCWU
[…] Designer le retour en arrière sur interface mobile… pas simple, mais de belles solutions existent ; […]
Solving The Back Button: http://t.co/PHtHOVRWzw
Solving The Back Button by @MengTo: http://t.co/OJG9wyrUeo – or grow up your thumb ;-P
Solving The Back Button by @MengTo: http://t.co/XXKbYOUExW
Solving The Back Button | http://t.co/rKVWKNs4L0
Solving The Back Button http://t.co/AiiOTWB2YW
Solving The Back Button by @MengTo: http://t.co/3AyaMDWLWN
Solving The Back Button (via @MengTo) – http://t.co/g7H7ZUqBTk
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)
[…] Решая проблему кнопки “Назад” 49% мобильных пользователей держат устройство одной рукой, а это значит, что привычное место кнопки “назад” в iOS и Home в Andoroid устройствах в половине случаев труднодоступное для нажатия. Автор статьи предлагает несколько вариантов решения этой проблемы. […]
Solving The Back Button by @MengTo: http://t.co/pxHnyDZ0XK
Solving The Back Button by @MengTo: http://t.co/7sXH4JfQHG #UX #Appdesign
@thejennycrayon thought it was because I had short thumbs. Clearly not just me! http://t.co/h02ouKP7yY #iphone #ux #abittoolong
Today I am thinking of ways to handle the “back” button interaction on a mobile app. This article is great… http://t.co/jeAd1XlpSY
Solving The Back Button | Meng To http://t.co/0DXUON07pX #mobile #ux
[…] 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 […]
[…] http://blog.mengto.com/solving-the-back-button/ […]
[…] 原文出处:blog.mengto.com 译者博客:Be For Web […]
[…] 原文出处:blog.mengto.com 译者博客:Be For Web […]
[…] FORM:http://blog.mengto.com/solving-the-back-button/ […]
Or for ease of use, get a flygrip for your phone. You will find that it provides the most comfortably way to use ypur phone and gives you the added reach fornyour thumb. Works on all phones..even the big android phones. Made specifically for one handed use.
[…] to the best UX for Android. If you are just starting with Android and confused by the back button, here is more information on how to work with and understand the back button in Android app […]
Even the home button is difficult to press with single hand as I need to exert some pressure to press.. I feel a ‘tap’ would be better alternative with ON/OFF option.