Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I am designing a social intranet and I'm in need of advice for a friendly, straight-forward 'back' button.

Here's the context - user lands on a home page displaying priority content. There is a menu button in the far left-hand corner which triggers a menu overlay, which displayed more content. I want the user to be able to exit this overlay in the best way possible.

Any suggestions?

Thanks.

share|improve this question
    
Why not make that menu button a toggle - simple click it again to hide the overlay? –  RedSirius Jun 3 at 8:39
1  
It's not a 'back' button because the user hasn't actually gone anywhere at that point. It's more of a 'close' option really. –  JonW Jun 3 at 11:11

5 Answers 5

You should allow the user to use standard practices to go back : Modal Window with Back

  1. Pressing Esc key should take the user Cancel/Close.
  2. Have a Back - icon followed by the context where it would go to.
  3. Have a CLOSE icon which closes the modal without change of State. Similar to #1.
  4. Clicking outside the modal should take the user back.
  5. Hitting the back button on the browser should also take the user back. Thanks to @LieRyan
share|improve this answer
1  
+1 for providing multiple different ways, but IMO having both the "back to X" button and the close button is probably too similar that people will be wondering if there's any difference. I'd also suggest making the browser's Back button close the modal as well. –  Lie Ryan Jun 3 at 11:46
    
@LieRyan Having the browser back button to close the modal is a good idea. Should be included. Added the same to my answer. The X convention is good for people who are "looking around for a CLOSE button" most are familiar. Those looking to go back instead can use the back option. The difference becomes more prominent when the modal has a state where it comes from. If it's only opening up OVER previous page then CLOSE should be sufficient. On mobile devices, the back makes more sense though –  Vaibhav Kanwal Jun 3 at 12:08

Can the users not use the browser back button? If not placing a left facing arrow on the top left-ish corner would emulate the browser's back button. Everyone is used to using IE, FireFox, Chrome and Safari nowadays, all of which utilise the top left back button.

share|improve this answer

For exiting the overlay, program 'ESC' key to emulate 'Cancel' and 'ENTER' to emulate 'Ok'.

For normal web page, 'BACKSPACE' is good enough for implementing back button behavior

share|improve this answer
    
But you're referring to keyboard behaviour, not what is actually displayed to the user on the UI. –  JonW Jun 3 at 11:10
    
@JonW That is true if you assume that user hardly looks at keyboard while operating the UI. For web-developers like me, it is quite natural to use backspace, esc and enter. –  gurvinder372 Jun 4 at 12:06
    
But you, a web developer are not representative of the whole audience. You are just you. There is no problem having keyboard controls, in fact that's required for accessibility. But the question is not asking for keyboard behaviour; it is specific to on-screen UI controls. –  JonW Jun 4 at 12:13
    
@JonW Question states "I want the user to be able to exit this overlay in the best way possible." Where does he mention UI Controls? –  gurvinder372 Jun 4 at 12:16
    
Question title: "What's the Friendliest 'Back' Button?" And even still, how can you be sure that keyboard only controls are 'the friendliest' aside from your subjective statement of 'as a web developer it's quite natural'? –  JonW Jun 4 at 12:20

Why not make that menu button a toggle - simple click it again to hide the overlay?

You can see this same behaviour in the Chrome settings 'hamburger' in the top left. Or in the IE favourite menu. Or in Firefox's Firefox dropdown in the top left.

share|improve this answer

My first thought was just to use a 'close' button similar to how bootstrap handles modal dialogues:

Example

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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