The iOS Back Button

Backbutton

23 Responses

  1. Robert van Klinken Robert van Klinken

    Had an interesting discussion about the Back Button on Twitter the other day. Used the Back Button with the Label 'Back' quite often, not sure why. So I started doing little research to find the best option.

    1. Best option, labeled Back Button. Users know where they came from and the button itself says 'Back'. According to Apple a Back Button should be labeled with the previous level’s title.

    2. If the previous page has an unpredictable or long title you can use an arrow. The arrow means 'Back' and the Button itself means Back. Apple uses this in their Music app.

    3. Fairly close to the second Back Button, also works great. The arrow itself is pretty obvious. So a squared button should be fine.

    4. Back Button with 'Back' label. I think you should never use this. The label has no context that adds anything to the button itself. Apple never does this.

    Neven Mrgan wrote a nice blog post about this subject.

    likes

    over 1 year ago

  2. Joey Rabbitt Joey Rabbitt

    I think 1. is the best all rounder as it gives context to the content of the destination, and the button shape implies you're travelling to somewhere you've already been.

    likes

    over 1 year ago

  3. Alexandre Naud Alexandre Naud

    The first one is my favorite.

    likes

    over 1 year ago

  4. Joel Helin Joel Helin

    Number one. All the way.

    likes

    over 1 year ago

  5. Haziq Mir Haziq Mir

    I also think that 1 is the best. It doesn't try hard to serve its purpose, unlike the 2nd one. The 2nd one does come in handy when the title is huuuuge to maintain the balance =)

    Excellent shot. I was thinking the same thing a while before :P

    likes

    over 1 year ago

  6. Jack Bingham Jack Bingham

    1 is the best all rounder, but 3 is also great. Facebook use this and I've never had an issue with it.

    over 1 year ago

  7. Marco Moreno Marco Moreno

    Really interesting shot, full of useful knowledge. 1 works best but it's good to know you have options depending on your app flow.

    over 1 year ago

  8. Chris Meyers Chris Meyers

    glad to see others thinking correctly.

    over 1 year ago

  9. Daryl Ginn Daryl Ginn

    I'd definitely role with 2.

    Shoot me.

    over 1 year ago

  10. Robert van Klinken Robert van Klinken

    likes

    over 1 year ago

  11. Doney den Ouden Doney den Ouden

    Without a doubt #1 is the best option.

    over 1 year ago

  12. Garrett Gee Garrett Gee

    1 and 3 are my tops..

    over 1 year ago

  13. Christoph Bach Christoph Bach

    over 1 year ago

  14. Victor Erixon Victor Erixon

    These are nice. I would prefer 1 or 2. As you mentioned number one for shorter titles and the arrow if it doesn't fit the button.

    over 1 year ago

  15. Chris Irwin Chris Irwin

    Hrm, #1 is 'okay'..and I'll leave it at that. It's biggest flaw is that it makes the assumption that the user looked at the navigation title from the previous UI. At some point when the user has entered multiple child views, a tendency does arise to accomplish the intention rather than focus on the current instance. I think #1 is best for returning a user to the parent view, but child views within themselves I would disagree in certain "deep" instances...

    over 1 year ago

  16. Marvin Kennis Marvin Kennis

    Number one it is :)

    over 1 year ago

  17. Bert Devriese Bert Devriese

    Number one is definitely the best option. A lot of other people tend to agree.

    over 1 year ago

  18. Robert van Klinken Robert van Klinken

    @Marvin Kennis did you not read anything in my post comment:P

    over 1 year ago

  19. Josh Vandergrift Josh Vandergrift

    I never really dug into this issue. I noticed now that path uses a "P" to go back home, then option #1 elsewhere. Cool stuff.

    over 1 year ago

  20. Ralph Manning Ralph Manning

    #1 first choice is obvious. But when it is too long of a title, I'd go with #2 if 'Apple uses this in their Music app'.

    over 1 year ago

  21. Marvin Kennis Marvin Kennis

    @Robert Now I do :P

    over 1 year ago

  22. Kevin Steigerwald Kevin Steigerwald

    I'm going to disagree with this. I think the order should be 1, 3, 4, 2.

    Why 4 before 2? Because 2 is repetitive. You say it yourself "The arrow means 'Back' and the Button itself means Back." Why do we need two visual clues that mean back? If a user doesn't understand one arrow to mean back, how does doubling down on arrows make the concept more clearer than instead of actually spelling out that the arrow means "back" by including the word itself?

    The label adds more context than another arrow. Not much. And certainly not as relative of context as giving the title of the previous screen. But it adds clarity to what a user couldn't identify with a single shape.

    likes

    over 1 year ago

  23. Taylor Carrigan Taylor Carrigan

    A back button's label should never be "back". In almost all cases, option 1 is the only valid solution that falls in line with iOS view navigation paradigms. The distinct shape and placement of the back button signify its function – it's more important that the label gives users a sense of place by identifying the previous view in the navigation hierarchy.

    Option 2 is valid if the current view is one which is modal in the sense that it can be transitioned to from any view and is not necessarily a detail view for something in the view prior to the current one. A good example of this is the Now Playing view in Music, which can be accessed from any other view using a forward control in the navigation bar.

    iOS users are familiar with the identifiable shape and function of the back button in comparison to other navigation bar controls. Why would you ever use a standard, rectangular button in place of a control specifically designed for going back which is well understood by users?

    (These are my personal opinions on this matter and don't necessarily represent the opinions of my employer.)

    likes

    over 1 year ago

keyboard shortcuts: previous shot next shot L or F like