22

I've been working on a web-platform for some time now.

As I was writing the usual "Sign-up" and "Login" pages I realized that a whole page was an overkill for such simple tasks so I decided to put them in modal dialogs.

Aside from depending on JS, what usability / user experience drawbacks could this bring to my users?

(If you don't know what a modal dialog is see here)

Improve this question

5 Answers 5

Reset to default
21

While looking at a selection of more than 100 high profile sign up forms, I found that just 7% showed their sign-up form in a modal dialog, and I believe there is a good reason for this.

Consider this - where (if at all) do you send the user after they have signed up or logged in?

If you popup a modal dialog, the user generally expects the dialog to disappear afterwards and remain on the page they were on before the dialog came up.

But actually logging in and especially signing up represent a significant event or change of state and you'd normally want to welcome the user by taking them to a suitable page - and that doesn't usually sit comfortably with what the user expects when a modal dialog is closed.

For those interested the sites I found to use modal popups for sign-up included Slashdot, Pageflakes, Digg, HuffPost, Gist, Break, Barnes and Noble. Groupon also use a modal dialog for 'one last thing' after sign up and immediately after being taken to a welcome page of enticing offers

Improve this answer
5
  • 2
    In my experience I have found that modal dialogs should be avoided except where absolutely necessary or in the few rare cases where they provide a better user experience than the alternative. I completely agree with @Roger sentiments above. Perhaps you should go with the mindset of if they aren't logged in provide a space for logging in right inline with the page (with a link beneath to a sign up page).
    – Matt Lavoie
    Sep 6, 2011 at 13:42
  • 1
    We have been using modal dialogs for registration and login and are abandoning this approach soon. After a year, I can say it's been a development headache, a UX headache, and it's harder to track in Google Analytics.
    – Taj Moore
    Apr 16, 2012 at 19:14
  • @Roger Attrill: Can you perhaps point me to some sort of resource regarding your stats/findings? It might be a useful piece of research.
    – Zoran Pavlovic
    Feb 1, 2015 at 6:49
  • your friends at smashing magazine would disagree with ya smashingmagazine.com/2011/05/…
    – PirateApp
    Dec 14, 2017 at 6:50
  • Now I'd like to ask: how about modals like these? i.imgur.com/veSxLll.jpg and i.imgur.com/W6w2WEu.jpg ? I'm a beginner yet, and I'm working on a site of my own in my free time, and I'm using bootstrap modals(with Ajax) for multiple actions on my site, so that the user is not being redirected all the time for simple actions, making the use of the site more fluent(?). And I set all the modals a max height of 70vh, so they can never fill the screen, so the users can just close them by touching below them(touch devices)/ clicking anywhere else(desktop).
    – K. P.
    Nov 10, 2019 at 19:10
7

We use a modal dialog for signing up and logging in. To give you context, we run a network of sites on different domains which use the same accounts. Almost all content on these sites is public.

There isn't a wall between being logged in and logged out. Certain actions like voting or commenting require the user to be logged in. When a user tries to perform that action, we prompt them with the modal.

We opted for modals because it keeps the user on the page and in the context of the task they are trying to perform. If a user tried to vote, we save that action and perform it after log-in. We fall back to non-modal versions of these forms in the event the user has JS disabled.

There are certainly tradeoffs to this approach. Like, you're limited by space to sell the product to the user in the signup flow. It also takes more time to make everything work right relative to a whole page version of the actions. For us, it enables us to provide a good experience cross domain for users signing up and logging in that we couldn't have provided with whole pages.

Our signup form

Improve this answer
4

Modal dialogs should be used with care and should be avoided when possible. The StackExchange login is a great example on how to do it right.

There are some legitimate reasons for using modal dialogs. When there is a positive user action (print for instance - show print options). But login could be done in another way.

If it's your choice, choose something else. If it's someone else's choice, try to convince him/her there are other options. Look at useit.com for more info (I have nothing to do with them).

Modal Dialog Boxes: Yes or No?

When it comes to modal dialog boxes, our winners have very distinct ideologies. At one extreme is Seating Management. As a real-time application monitoring a physical environment, Seating Management didn't set out to interrupt hostess work in any way. If a hostess wants to seat 5 guests at a table that the database says has a capacity of 4, the system won't halt the running of the restaurant by saying that it can't be done. Maybe that party looked friendly enough that they can squeeze in an extra chair.

At the other extreme, several apps use modal dialog boxes — and plenty of them — in ways that clearly stop users in their tracks and require them to do something before they can proceed. As discussed below, the lightbox was a preferred technique to this end.

So, what's the answer here? There is none. Generally, a user experience feels more accommodating if modal dialog boxes are avoided or downplayed. But, when something does need fixing, it's better to make sure that the user knows about it.

Improve this answer
4

If your login modal fills most of the user mobile screen, users might be tempted to cancel with the Back button on mobile. If you do not handle this explicitly, your app is going to close the dialog AND also go back the browsing history. Imagine this:

Google.com -> Your Landing page -> user click to login, login modal appear then user change his mind, cancel with back button.

Now user ends up back at google, instead of your nice landing page.

Improve this answer
0

Simple rule of thumb: never use modal dialogs, unless you have no other choice. They disrupt the user flow by imposing unnecessary restrictions on user action.

Generally the "no other choice test" means that once they start a modal action, they must complete it or else something bad will happen.

If you use a non-modal login dialog, the "something bad" that could happen is that the user could think they logged in, when in fact they didn't.

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.