Should opening a modal box change the browser history?

Question

I am displaying images which can be clicked to be opened in a modal box (like this plugin does) and zoomed when pinched on touch devices (like this demo).

The actual modalbox is as follows:

It displays the image and a simple navigation at the top right of the screen. The navigation has a left, right and close buttons.

When viewing the site on a mobile device I noticed some users press the browser back button when they want to close the modalbox. This makes the browser get out of the site. I already changed the background color of the navigation from white (which was meant to be less intrusive) to dark.

From a user experience perspective, is it recommended to push an extra browser history state (when opening the modal box) in case users press the back button?

(something like: www.example.com/#img1)

Is there any thought or common way of approaching modal boxes?

Answer 1

YES INDEED

For most users, this will be just another page. And conceptually, they will be right, they have no idea about the technical part, they only know that by clicking or doing something they are presented with different content. This is a very common (and quite studied) situation, of course.

From NNG Overuse of Overlays

You should also consider what will happen if the user decides NOT to complete any of your target actions. Of course you should include an explicit way to dismiss the lightbox, but another common user strategy is to click the browser’s Back button in an attempt to revert to the underlying screen. By default, web browsers don’t treat overlays like separate pages, so the Back button takes users not to the underlying screen, but to whatever page preceded that screen. If your analytics show users clicking Back after reaching an overlay, consider adjusting the Back button so that when an overlay is displayed, the Back button closes the lightbox instead of navigating to the previous page in browser history.

4 Design Patterns That Violate Back-Button Expectations

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.

Are lightboxes good UX?

Back Button Confusion - Users clicking the browser's back button in an attempt to go back to the parent page is a problem. In my personal experience, the problem is more prevalent on pages where the parent page is heavily dimmed, giving the user a feeling that they have navigated away from it. Use light or transparent overlays to help with this.

In short: most people who tested the back button issue has found this common behavior: users use the back button to go back to a previous state, and that's a given.

Some sites are so horribly done that they have content in modals (or even AJAX loaded pages) and when the user is in the middle of a journey, such as a photo gallery with navigation and the user clicks back, she's sent to... the beginning. Think of this: user is at element 51 and she wants to see element 50... and she's sent to the beginning!!! Sadly, this is very common, probably more common than the proper way, so make sure to always treat navigation as logical paths with their own history: if user wants to use the back button to go to a previous state of her experience, you should NEVER negate that. Instead, you should help the user to achieve it.

Answer 2

Thanks Devin for your answer. I am posting this answer to explain the way I am implementing it in case it is useful to someone.

I ended up adding an extra history state to the modal box, not to each image.

This way:

---

1 . User is on the site.

[example.com]

---

2 . User clicks on an image and Modal box is opened. An extra browser history state is added as an anchor, with the 'alt' attribute of the image. (The hash is related to the id attribute, I have to check which is the correct way to implement this)

[example.com > example.com/#Building_plan]

---

3 . User clicks on right arrow to load the next image. Anchor is replaced with the 'alt' of the new image.

[example.com > example.com/#Building_section]

---

4a . User clicks on close button. Browser goes back a history step. Modal box closes.

[example.com > example.com/#Building_section]

---

4b . User clicks on back browser button. Modal box closes.

[example.com > example.com/#Building_section]

---

I think this makes sense in my case. The user can press the forward browser button to open again the modal box.

I intendedly replaced instead of pushing an extra state from 2 to 3. The importance here is Page & Modal box, adding an extra state for each image would add too many unnecessary states in my opinion.

I could simply add [example.com/#Modal_box] and have no need to replace the state from 2 to 3, but I think it gives extra (useful) information about the current image.

Please note that I am using modal box just for images, loading full pages would be a different story.