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.
over 1 year ago
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.
The first one is my favorite.
Number one. All the way.
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
1 is the best all rounder, but 3 is also great. Facebook use this and I've never had an issue with it.
Really interesting shot, full of useful knowledge. 1 works best but it's good to know you have options depending on your app flow.
glad to see others thinking correctly.
I'd definitely role with 2.
@Daryl Ginn BANG
Without a doubt #1 is the best option.
1 and 3 are my tops..
Read something similar a while ago.
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.
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...
Number one it is :)
Number one is definitely the best option. A lot of other people tend to agree.
@Marvin Kennis did you not read anything in my post comment:P
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.
#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'.
@Robert Now I do :P
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.
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.)
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2014 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.