0

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.

Improve this question
2
  • Why not make that menu button a toggle - simple click it again to hide the overlay?
    – Fractional
    Jun 3, 2014 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, 2014 at 11:11

5 Answers 5

Reset to default
4

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
Improve this answer
2
  • 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, 2014 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 K
    Jun 3, 2014 at 12:08
0

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.

Improve this answer
0

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

Improve this answer
5
  • But you're referring to keyboard behaviour, not what is actually displayed to the user on the UI.
    – JonW ♦
    Jun 3, 2014 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, 2014 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, 2014 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, 2014 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, 2014 at 12:20
0

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.

Improve this answer
0

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

Example

Improve this answer

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.