6

I know that it is bad practice to use a "Go Back" button (since the browser has such a function) but when it can't be avoided for some reason, is it better to put it on top (similar to how the back buttons on browsers are on top) or at the bottom (similar to "cancel" buttons on forms)?

Let's say the page is not a form but rather a "Preview" / "View" page of some sort where user can view data.

1
  • 1
    I think putting the question in the context of web applications or websites and also define what the function of the Back button does will provide a better answer to your question. Also, it depends on whether you need to be able to save the information on the page or if it is reset when the user goes back can influence the design.
    – Michael Lai
    May 21, 2013 at 3:10

6 Answers 6

8

Top-left seems to be the ideal position for the "Back" button due to the following reasons:

  1. All traditional and modern PC browsers have it there. There is almost no learning curve.
  2. This would seem much more native on tablets than mobile. But you will have an advantage of efficient scaling up of UI since Back button won't change its position across different platforms. And users will be at ease while shifting among them. Since, tablets come closest to the PCs in terms of screen size, consistency among them comes handy sometimes and users don't feel too out of place (particularly the ones who are moving to tablets from laptops or such).
  3. Most applications have it on top-left. Consistency across applications for similar elements is always good for the users. Also, I would suggest it be a floating kind of a button particularly if your screen contains scroll-able content.

Top-left would not be ideal if your app is not native and will run in a browser window which has its own controls on the top. Then, it would be ideal to place the said button on bottom-left.

In any case, it's always a best practice to avoid such buttons on right side of the screens since traditionally, they are much more suitable for forward kind of functions and not backward (which a "Back" button is for).

Also, you said that it's a preview kind of screen, then I would suggest you use a text button like "Close Preview" or something which is much more descriptive and to the point.

1

You can put it in both places.

I imagine the hypothetical situation where a user gets to the page, realizes he/she's looking for something else and decides to go back. Top would be better for this scenario. But it could also be that the user reads the information, gets to the bottom and decides to go back. Bottom works better in this case.

Alternatively, you could have the button on top, and put another button in the bottom that takes you back to the top of the page instead. It's an extra click, but you avoid the scrolling.

2
  • Simple answer with the two main cases described.
    – Samuel M
    May 21, 2013 at 6:39
  • First It is important to be consistent with information place an especially with icon...always the same place for same icon function for different pages...second avoid to ask the user to think...in this case to choose between two same buttons. In some cases the same button is repeat in the page often with big tables...but in this case to repect one of the egonomic criteria of Baptiste it is preferable to group and distinct them. How ? By keeping vertical alignment. May 21, 2013 at 16:51
1

The simplest method that covers all use cases is to have a floating header (a header that is always on top of the screen) and have the 'back' button there.

This way it's always available and always in the same place, which means less thinking for users. Additionally, it mimics the interaction of most mobile devices

1
  • Yes, great! I love this solution in Feedly.
    – sysscore
    May 22, 2013 at 12:03
1

Top left on mobile phones is awful. For some reason, it is a standard now in iOS and Android (phones without physical "back"). Though it makes it very awkward to use with one hand. Assuming you use right hand, in order to reach the top left corner with your thumb is a pain, especially on 5+ inch phones. The only logical place for the "back" button is bottom right (for right handed) or bottom left (for left handed).

0

Is it for a tablet or a pc layout ? For fields form or a simple text page ?

On tablet habits is to have back button on top left because the navigation is a page by page navigation. ..and more often you go to the next page when you tape a line which has a right arrow at right. The metaphor is you go to the downer next page (daughter page)

So top left is natural to go back upper level (the parent page)

On pc it is different, the more often your read the page with the mouse in you hand and the pointer of the mouse moves while you are reading or filling form. ...and you decide if you want to continue or go back at the end of your reading or filling ..so in this case it is better to have the go back button at the bottom right.

And finally if it is a general function for a web application habits are to have such a function in a top toolbar on the left like a go home button (the position is similar of go back button of a browser)

Be careful trying to give a different name not "back" or "go back" perhaps "cancel" is good or for example the name of the previous page to help the user to click on your back button and not on the browser back button.

But you can be sure some users will click on the brower back button because it is impossible to avoid this and users always use it in their personal website navigation sincerely lot of years.

So it depends of your device output and type of your software but better is to work with browser back button. ...

0

Top-Left.

If the page is long, then put on both places Top-Left and Bottom-Center.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.