Good idea to have back button close a modal window?

Question

I have a request to make the browser's back button close a modal window.

I think it's probably a good idea, since I think the majority of times when a user is looking at a modal window (and this is one that dominates the page and has information, not just an alert popup), if they press back they want to go to the information they were looking at before.

My only concern with doing this is that it could train users of the site to expect that with modal windows, which will make them more frustrated on other sites.

Are there other considerations I should keep in mind?

Answer 1

In my experience, modal windows are best used to present clear interactions that the user either:

• needs to do (e.g. resolve an alert)
• has chosen to do (e.g. open a photo gallery).

Resolving that interaction should close the modal, and there should already be a control in place that does that.

This is because modal windows interrupt the user flow and break standard browser controls and idioms; you cannot deep link into a modal, you cannot back out of a modal, web spiders can't read modals, they're just not a good place to put actual content.

With that out of the way, I don't actually see any problem with changing the behavior of the browser back button. A lot of websites modify the back button to return to the last semantic "page" that the user was on (c.f. gmail). In this case, the modal is a seperate space that contains content that isn't in the main page, it's definitely a semantic page all of its own, so it makes sense for the back button to revert out of it.

In the worst case, all you're going to do is cause the user to have to click back twice to get their expected behaviour, and in the best case, you're going to prevent a user pressing the back button and ending up on an unexpected, and completely different website (i.e. back to google).

Answer 2

Arguments of the appropriateness of modal windows aside (because I don't think we have enough context for that from your question), I think your reasoning for why this is a good idea is sound. Some users rely very heavily on the back button:

The Back button is the lifeline of the Web user and the second-most used navigation feature (after following hypertext links). Users happily know that they can try anything on the Web and always be saved by a click or two on Back to return them to familiar territory.

Nielsen Norman Group - The Top 10 Web Design Mistakes

The use of back buttons is also evolving. Specifically in mobile phone user interfaces.

An example of this is that clicking a link in an application like Facebook might launch a browser, but you can click your phone's back button to return to the Facebook app from that browser window. That behaviour follows the users journey wherever it goes inside the OS, rather than providing context specific behaviour for different applications and actions.

Obviously we aren't talking in terms of a whole OS behaviour here, but I believe there is a parallel. On my mobile I always want the back button to take me to the last thing I was looking at. Currently the standard modal behaviour is that pressing the back button will not take you back to the last thing you looked at, but the previous page you loaded into your browser. I'd argue that although some users might be used to current modal behaviour, that's non-standard behaviour to start with.

If you're implementing this functionality the key to making all users comfortable will be to make sure that the standard behaviour of modal windows is still supported; a [X] button to close it, for example. This means that if users have any specific expectations they won't be confused. As Racheet has pointed out, the worst that will happen is that a user very familiar with modal windows will need to click the back button twice to get back to the previous page.

Answer 3

"Overlays and lightboxes are by design meant to convey a new page that’s laid on top of the of previous page. It should therefore come as no surprise that users perceive these as separate pages and expect the browser back button to bring them back to the original page. Alas, during testing, the vast majority of user-initiated overlays at the tested site did not close as the subjects clicked the browser back button, and instead sent them way back past the overlaid page."

http://baymard.com/blog/back-button-expectations

Answer 4

Closing a modal window using the back button in the browser is none standard practice. Common practices include: clicking on the "X" on top right corner, clicking outside of the modal window, or hitting the "Esc" key on the keyboard.

The problem of implementing a none standard practice is most people won't know it's there to use it.

Clicking the "Back" button in a browser environment should take user back to the previous page.

If you enable "Back" button to close the modal window, what will happen when user clicks on the "Forward" button after closing the modal window?

Answer 5

Modal messages and pop ups are usually an indicator that something is wrong with the UI concept. Often times they can be avoided. They are not good practice in general since it leads to exactly the problem you mentioned: users will have to start guessing:

"What will happen if I click this back button here? Humm...."

Users won't know for sure. Unless you show a screenshot of the user interface, it's really hard to answer this questions since it dramatically depends on the context where it is used and the overall visual design language. Gmail is a whole different case, since it is a dedicated app that not only looks like an app, but feels so too. On a traditional website, a users mental model is different.