3

My site comes across many instances where I'd like to use a modal. Sign up, sign in, comments, and file uploading are a few examples.

Now, I can go with a conventional modal design where the modal is typically fairly small in size and you're able to see the page in the background (behind a transparent black overlay), like the one below:

https://i.sstatic.net/0jCNp.pnge

Or I can go with a fullscreen modal design, like the one below. I find that fullscreen modals look better and cleaner.

https://i.sstatic.net/ZTPML.png

What are the disadvantages of using a fullscreen modal? Should I go with the conventional modal design or the fullscreen modal design?

Improve this question

1 Answer 1

Reset to default
7

I just went through this same process last week, first starting with full screen modal and then retracting it back to a "standard" modal.

TL;DR users will hit the back button in the browser.

This experience was for web UI (bootstrap) - from your screenshot it looks like you are using bootstrap or something similar. You have tagged this as "webapp" so I think I'm on track.

My desire to use a full screen modal (which required a variety of CSS mods in bootstrap) was to not distract the user with the content "behind" the modal. The result looked good, and worked fine as far as I was concerned. The moment I let a coworker interact with the full screen modal i knew I was in trouble. If he opened the modal mistakenly, he would immediately hit the "back" button in the browser. This of course would take him to a completely different view from where he started from, losing any other progress he made in the initial view.

Improve this answer
6
  • 1
    I've thought of this. Couldn't this easily be solved by appending #modalName to the end of the URL? If the user hits the back button, it should remove the modal. gist.github.com/thedamon/9276193
    – user91668
    Commented Sep 27, 2016 at 6:19
  • In some cases sure - but browser page navigation will very likely wipe out any JavaScript / form state you may be trying to retain in the parent view.
    – Aaron Hudon
    Commented Sep 27, 2016 at 6:24
  • 1
    Sometimes, you might want to have the background page "shine through" as a teaser to sign up. So, it doesn't necessarily distract it might even attract users
    – tofro
    Commented Oct 26, 2016 at 19:49
  • this behavior you've observed from your users is actually a sign that non-modal is the preferred solution. If your users want to navigate using back button, it's because that is a behavior they expect to be able to use on the web. don't take it away from them by using a modal.
    – kenwarner
    Commented Apr 10, 2017 at 18:50
  • 1
    @MichaelHeraghty I think the key to correctly implementing a full screen modal is to ensure “back” commands get correctly translated to closing the “modal”. At the time I wasn’t aware of the JavaScript pushstate API.
    – Aaron Hudon
    Commented Jan 17, 2018 at 14:46

Your Answer

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

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