23

I am currently building a registration page where if the user leaves, I want to pop up a CSS box asking him if he is sure or not. I can accomplish this feat using confirm boxes, but the client says that they are too ugly. I've tried using unload and beforeunload, but both cannot stop the page from being redirected. Using those to events, I return false, so maybe there's a way to cancel other than returning false?

Another solution that I've had was redirecting them to another page that has my popup, but the problem with that is that if they do want to leave the page, and it wasn't a mistake, they lose the page they were originally trying to go to. If I was a user, that would irritate me.

The last solution was real popup window. The only thing I don't like about that is that the main window will have their destination page while the pop will have my page. In my opinion it looks disjoint. On top of that, I'd be worried about popup blockers.

Just to add to everyone's comments. I understand that it is irritating to prevent users from exiting the page, and in my opinion it should not be done. Right now I am using a confirm box at this point. What happens is that it's not actually "preventing" the user from leaving, what the client actually wants to do is make a suggestion if the user is having doubts about registering. If the user is halfway through the registration process and leaves for some reason, the client wants to offer the user a free coupon to a seminar (this client is selling seminars) to hopefully persuade the user to register. The client is under the impression that since the user is already on the form, he is thinking of registering, and therefore maybe a seminar of what he is registering for would be the final push to get the user to register. Ideally I don't have to prevent the user from leaving, what would be just as good, and in my opinion better is if I can pause the unload process. Maybe a sleep command? I don't really have to keep the user on the page because either way they will be leaving to go to a different page.

Also, as people have stated, this is a terrible title, so if someone knows a better one, I'd really appreciate it if they could change the title to something no so spammer inviting.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
JohnathanKong
  • 1,307
  • 3
  • 21
  • 36
  • 41
    Please don't do it. – mohdajami May 25 '10 at 15:00
  • 3
    doing this, is just like ask the user if he is sure he want come back again next time! and the answer will be NO! – Luca Filosofi May 25 '10 at 15:05
  • The arrow next to "Please don't do it" said "this is a great comment". I fully agree with the arrow. – Amadan May 25 '10 at 15:06
  • This breaks so many usability best practices, I would seriously look at another option if available. All the alternatives are irritating to a user I would say. – Geoff Adams May 25 '10 at 15:07
  • 10
    +1 for asking a perfectly valid question about how to implement an absolutely horrible idea. Good for reference. – Sky Sanders May 25 '10 at 15:09
  • 8
    I don't think all the commenters read the whole question, he wants to prompt the user to save their changes before leaving (*exactly like StackOverflow does* by the way...). – Nick Craver May 25 '10 at 15:09
  • @nick - i don't see any reference anywhere to losing input. – Sky Sanders May 25 '10 at 15:11
  • If the normal confirmation box is too ugly, use a prettier browser. It has nothing to do with the site itself. – Eric Mickelsen May 25 '10 at 15:12
  • @code poet - "Registration site" - as in where you enter all those details that suck to re-enter if you accidentally navigate away? – Nick Craver May 25 '10 at 15:13
  • @nick - umm errr OH! you mean that first line of the question. We are supposed to read those? – Sky Sanders May 25 '10 at 15:18
  • @JohnathanKong - Did you mean "registration page"? Clarifying what you want to prompt upon navigating away from would help here, e.g. is it just a name/address/email/etc registration page you want to do this on, not an entire site? – Nick Craver May 25 '10 at 15:19
  • You really do not want a browser to prevent you from leaving a page / site. So this should not be possible. – GvS May 25 '10 at 15:04
  • Exactly. All of those methods that were asked about (onUnload and onBeforeUnload) don't work precisely because it annoys users and browser makers realize that. – Brendan Long May 25 '10 at 16:30
  • In general, your answer was the best eventhough it's not what I was looking for. I had a feeling that what I wanted was not possible, which kind of sucks, so I've told the client of my findings, and we will decide on what to do next. It's a shame that we can't skin a popup box. – JohnathanKong May 26 '10 at 13:40
  • Think about what could happen if everybody (with bad intentions) could do what your client wants. Using normal popups people are already lured into installing malware. With skinning you could easily get more "clients" for bad virus scanners. – GvS May 26 '10 at 14:17
  • Nonsense! There are good reasons for not letting a user leave the page (for example in a post editor if the post was not yet submitted). – reggie Nov 21 '12 at 19:14
  • @reggie then cache this content in localstorage/cookies/etc if *YOU* care so much about it. Don't prohibit me from executing the action *I* want to do. There is NEVER EVER a good reason not to let the user leave the page. EVER. – theflowersoftime Mar 20 '14 at 17:36

8 Answers8

28

As soon as I saw the words "prevent the user" I started to wail in agony. Never prevent the user, only help them.

If they see your registration page and run off, that's their choice. Pop up a javascript confirm box if they've already filled in some data (because they might be navigating away accidentally) but leave it at that. If they haven't touched the form, leave them alone - they don't want to fill in your form.

Look at other methods of engaging users. If your form is huge and scary, break it into simple manageable chunks or better yet, simplify things so much that the user only gives you data when you need it. For example, you might not need their address until you want to post something to them.

By breaking it into multiple parts you can hook them with a simple form and once they've invested that time, they'll be more likely to continue the process.

But don't harass users. If they don't want to register, pestering them with pop-ups and jaavscript dialogues will just chase them off the site completely.

With that in mind, assuming you're just trying to stop people half-filling-in forms, there are a couple of options to genuinely help people:

  1. Detect if the form has changed and ask them a simple confirm() message.

    This is all you can do. A CSS "pop-in" just won't work because you can't control* the window location in the unload event.

    *You can put an event listener on all your page's links to fire off something to check the form, but this only helps if the user clicks on one of those links. It won't help if, for example, the user clicks back or closes the window. You could do both CSS and javascript but you end up with a bit of a mess.

  2. Persist the state of the form behind the scenes.

    An extension to #1. Instead of squabbling with the user, let them go where they want but save the content of the form either to session or cookie (if it'll fit) and put something on the page (like SO's orange prompt bars at the top of the page) that reminds them that they've started filling in a form and gives them a link back to the form.

    When they click that link, you load the data out of the cookie (or session) back into the form and let them carry on. This has the clear benefit of letting them do what they like on your site and keeps the data safe.. ish.

    If they don't come back and their cookie/session expire, that's their fault. You can only lead a horse to water. It's not your job to force it to drink.

Oli
  • 235,628
  • 64
  • 220
  • 299
  • 1
    Switch "registration site" to "registration page", just for a moment, what if that's what the OP meant? Then this is a perfectly legitimate question, just like SO prompting you before leaving a page once you started entering an answer... To be clear if your *assumptions* are correct, I 100% agree, but I don't agree that your assumptions here are absolute. – Nick Craver May 25 '10 at 15:16
  • 1
    My answer is generic to all forms. Only interfere if the user has started inputting data and even then, it has to be a very simple, unobtrusive "Did you really mean to do that?"-style question... Just as SO does. If the entire site is behind a registration wall, exactly the same applies. Don't bug them unless they've put data into a registration form. – Oli May 25 '10 at 15:20
  • 1
    @Oli - If you read the question, that's exactly what he's trying to do... – Nick Craver May 25 '10 at 15:22
  • 1
    Except that SO doesn't seem to keep me from using my Back button, or any other obnoxious crap like that. The phrasing of the question seems to be what people are jumping all over the OP about -- most of us have seen enough spammy "are you sure? really sure? you know, we have this really good deal... please stay? i'll be your best friend..." crap that we reflexively smack people who sound like they want to create more of it. – cHao May 25 '10 at 15:31
  • How am I saying anything different to you? There is only one valid time to prompt people: there's a form that they've used but not submitted (and data would be lost). Every other time, interfering is annoying and wrong. The question doesn't specify previous behaviour so I am. I'll admit I don't go into viable methods of doing this correctly. I'll edit. – Oli May 25 '10 at 15:40
  • Thing is, being able to have code say "no, don't leave the page yet" has historically led to abuse. That's part of why it's so hard to do now. Even if you have what could be considered a valid reason, there's no decent way of doing it that wouldn't already have been abused to hell and back by spammers, and eventually disabled for just that reason. And any way someone could tell you here could wind up abused to the same end (and certainly would, if by someone else). Especially considering the phrasing of the title, which is just begging to be found by spammers. – cHao May 25 '10 at 15:52
  • 1
    +1, especially for option #2. IMO, option #2 is the only acceptable solution that would do what the client is trying to accomplish. – Christopher Parker May 25 '10 at 17:14
  • And with duct tape you can force it to drink. I have a TV in my office showing each user registration *as they type*. If they stop typing I call them. My users have not complained about this being creepy. Reply if you want details as an answer. – William Entriken Mar 11 '15 at 18:57
7

Don't do it.

But if you want, try this. Record mouse positions and detect a quick upward thrust -- the user is reaching for the BIG X or the top left or top right. Now might be your chance for an unobtrusive box in the screen.

I've seen this implement on the web and it is evil.

William Entriken
  • 37,208
  • 23
  • 149
  • 195
4

If you want to trap links, you could rewrite the links in the page to go to a "you really want to leave?" javascript function, passing the destination URL as an argument.

If you wanna keep users from using their "Back" button, or keep them from putting another URL in the address bar, stop. Stop now. (1) Browsers were made to prevent exactly that kind of obnoxious behavior, and (2) Even if they allowed it, see the last two words of (1). It's freaking rude. Your site is not that special, no matter how cool you think it is.

cHao
  • 84,970
  • 20
  • 145
  • 172
  • I was thinking about trapping links so I can pass the link to the other page if they don't want the free coupon. That would simulate what I want, but is there a way to get what page they were trying to go to at the time of redirect with javascript? – JohnathanKong May 25 '10 at 16:37
  • 1
    If you rewrite the hrefs for all the links on the page from 'http://some.site' to 'javascript:verify_exit("http://some.site")', then the verify_exit function (which you'd make) knows what URL the user was going to. Of course, you'll want to rewrite the links using jQuery or something like that, so your your links don't all break if someone doesn't have javascript. – cHao May 25 '10 at 21:24
  • Would that help if they were trying to go to a page outside of the site? Like if they typed in a url instead of clicking on a different link. – JohnathanKong May 26 '10 at 01:16
  • No...it'd only affect links in your page. But it, plus the onbeforeunload stuff, would cover all cases while only showing the "ugly" JS confirmation box when people try to navigate away by using the Back button or typing in a new URL, or other cases where you couldn't show your pretty confirmation box (or stop them). – cHao May 26 '10 at 03:22
  • Unfortunately they want to do away with the box entirely. – JohnathanKong May 26 '10 at 13:32
  • Then they're screwed. There's no way that'll always keep users from leaving, short of that ugly box. And most of the ways that people think they've found will clear out your form, thus defeating the whole purpose. The best that you can do is make a prettier box that you can show to confirm navigation to a clicked link on the page. – cHao May 26 '10 at 19:30
2
window.onbeforeunload = function() { return "Message"; };

Use a JavaScript like this to display a leave confirmation message.

Stefan
  • 14,530
  • 4
  • 55
  • 62
  • 1
    He was already doing that. His client was only complaining that those default screens are ugly. Read the question once again. – BalusC May 25 '10 at 15:21
2

Here are just a couple of approaches I could think of but they are not without flaw:

Whatcha Gonna Do technique
Detect the mouse position going towards the edges of the browser as the user might be going to close the tab, window, go back, navigate elsewhere among other things. If so, immediately prompt them that that may be a mistake and they are going to lose out on something very valuable. However, the catch here is that you don't know for sure what their intentions were and you might piss them off with that popup. Also, they might use a bunch of shortcuts such as Ctrl+W etc to do the same.

You've Got Mail technique
If you've managed to get hold of the user's email address before they closed the page, you've hit a jackpot. As soon as the user types anything into the email box and then leaves it, immediately send it to the server using AJAX. Save the state of the page into localStorage or on the server using a cookie or something so it can be recreated later. Every couple of hours send them an email giving them a direct link to the previously saved form, and maybe with special offers this time.

History Repeats Itself technique
Then there's the infamous history manipulation where you keep stacking the current page into the document history so the back button renders effectively worthless.

Don't Put All Your Eggs In One Basket technique
Another technique off the top of my head is to create multiple windows in the background with the registration form and keep them all in sync when any the fields in any one changes. This is a classical technique and really puts the "don't put all your eggs in one basket" saying into real-life usage.

Another advantage of this awesome technique is even if the user closes one of the windows, and later comes across an identical cloned window with all the fields they filled up-to-date populated, they might get confused and think that they never closed the page. And guess what, this time they might just go ahead and fill out the registration form. But you have to be cautious with this as anything more than 2 or 3 clones will make it obvious as to what's going on.

You're Winner technique
Another technique is to tell every user they they are the Xth visitor on the site and use a good rounded number for X such as 1000, 10000, 50000, etc. Tell them that they can claim their prize once they register on the site. Imagine how special each user feels when they land on your site. The prize doesn't have to be anything tangible, it can simply be free coupons that you find on the intertubes.

Where Do You Want To Go Today? technique 1
This is basically a rip-off of your answer. Use document.location.href = 'some url' inside your onbeforeunload callback to navigate to a different page before it is unloaded.

1 Firefox only.

Note: there is no silver bullet solution here unless you write your own browser with your own security policies, but these are all optimizations that you can do to make it utterly impossible for users to leave.

Anurag
  • 140,337
  • 36
  • 221
  • 257
  • 1
    I really hope this answer is supposed to be a joke. You are listing amazingly bad practices. The part about `Every couple of hours send them an email giving them a direct link to the previously saved form, and maybe with special offers this time.` is really creepy. And the "You're a winner technique" is pathetic. Really, we don't need any more spam, please do not encourage people to use these horrible practices. Also... catching mouse movements... are you for real? What if I'm going to open another tab, open an application, minimise the browser etc etc etc... ? – nico May 25 '10 at 20:35
  • @nico - In the `Whatcha Gonna Do technique `, I've already mentioned that the user might use shortcuts or use one of the infinitely many other ways to get out. It is an optimization problem like I said, and there are no guarantees. – Anurag May 25 '10 at 23:26
  • You did not get my point. If I want to open a new tab or minimise the browser, I am gonna move the mouse outside of the page area. I **don't want** an annyoing popup showing up! – nico May 26 '10 at 05:32
  • 1
    @nico - I was hoping the technique are adequately named, but it appears my sarcasm wasn't obvious at all :) – Anurag May 26 '10 at 06:14
  • Well, I'm sorry but I've seen far too many sites doing that... you know how they say: don't give'em ideas... – nico May 26 '10 at 06:23
1

Not all browsers support a modal popup, without which your page would go ahead and navigate anyway.

This is real awful requirement. The sort of requirement that is reasonable in a desktop application but entire unreasonable feature of a web site. Imagine being unable to leave a website.

The answer is either use the horrible confirm box and lump it. Or don't ask the user to enter too much data per page. Use a step by step wizard style data entry, the loss due to accidental navigation is minimised.

AnthonyWJones
  • 187,081
  • 35
  • 232
  • 306
0

You can change the Value of the url using document.location.href = "www.website.com"

Kasturi
  • 3,335
  • 3
  • 28
  • 42
  • 1
    IIRC you can't do this when the browser is already navigating away. This is explicitly because so many people in late 90s abused the hell out of it. – Oli May 25 '10 at 15:11
  • Actually this is possible to do because that's what I am using right now to redirect if they do want to get the free coupon to the seminar, although this isn't the part I am having issues with. – JohnathanKong May 25 '10 at 16:40
  • this works on Firefox.. not on Chrome, Safari, Opera. dunno about IE – Anurag May 25 '10 at 23:39
  • It works on IE as well. I use ie and firefox to test only, so that's probably why I haven't had any problems. I know it's bad a bad habit to be browser specific, but I usually just target ie and firefox because those are the main ones. Come to think of it, I think it worked on Safari because one of the other developers on my team uses mac, and he was able to see the redirection. Can't be sure though. – JohnathanKong May 26 '10 at 13:34
  • Just as a followup as I was thinking, if the main browsers support changing the url on page unload, spammers can essentially keep you at a site until you close the browser. Just a scarry though, because if ie and firefox supports this, those are the two biggest browsers. – JohnathanKong May 26 '10 at 13:42
0

I can accomplish this feat using confirm boxes, but the client says that they are too ugly.

If the problem is the ugliness of the standard JS popup boxes, try something like this: http://www.sohtanaka.com/web-design/inline-modal-window-w-css-and-jquery/

Apart from that I second what most people are saying: do this with extreme caution if you don't want to lose users.

nico
  • 50,859
  • 17
  • 87
  • 112
  • That is exactly the problem with my solution right now, the ugliness of the standard JS popup boxes. I love the link that you sent me, but those boxes don't pause execution of code, so when the user tries to exit, that modal box will popup, then disappear almost instantly – JohnathanKong May 25 '10 at 17:03
  • @JohnathanKong: reading a little bit about it, it looks like `onunload` or `onbeforeunload` is the way to go, although you'll get the standard modal popup, in any case. You can personalise the message (see http://stackoverflow.com/questions/276660/how-can-i-override-the-onbeforeunload-dialog-and-replace-it-with-my-own ) but I really doubt you can replace the modal dialog. – nico May 25 '10 at 17:29