246365 - onbeforeunload dialog should use better button labels

Status: RESOLVED DUPLICATE of bug 588292

(Core :: DOM: Core & HTML, defect)

Description

[Matthew Mastracci]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7) Gecko/20040609 Firefox/0.8.0+
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7) Gecko/20040609 Firefox/0.8.0+

The onbeforeunload dialog uses the same button text as IE: "ok" and "cancel".  

I believe better button labels would be "Continue" and "Stay on Page" (or
something to that effect).  



Reproducible: Always
Steps to Reproduce:
1.  Navigate to page: http://www.webreference.com/dhtml/diner/beforeunload/
2.  Leave page

Actual Results:  
Dialog shows "Ok" and "Cancel"

Expected Results:  
Dialog shows alternate button titles: "Continue" and "Stay on Page" (button
labels not important - alternative content is)

Comment 1

[Matthew Mastracci]

Ideally, with better button labels we could remove the "Press ok to continue or
Cancel to stay on the same page" text.

I believe the "Confirm close" dialog when closing a window with multiple tabs is
a good example of descriptive button labels:

------------------------------------------------------------------
This browser windows has XX windows open.  Do you want to close it 
and all tabs?

                | Close all tabs |  | Cancel |
------------------------------------------------------------------

Perhaps then, a good dialog choice would be:

------------------------------------------------------------------
Are you sure you want to navigate away from this page?

(user-specified message)

                | Navigate away |  | Cancel |
------------------------------------------------------------------

or perhaps:

------------------------------------------------------------------
Are you sure you want to leave this page?

(user-specified message)

                | Leave this page |  | Cancel |
------------------------------------------------------------------

With proper button titles, I believe the third line (describing the function of
ok and cancel) could be omitted.

Comment 2

[Gérard Talbot]

Changing component to XP Apps: GUI Features
Confirming.
The button captions, whatever they are, should be clear and univocal answer
alternatives to a predefined, clearly worded question, preferably just before
the buttons. I think the order of message is important here; the user-specified
message could be confusing but the decision-maker question should not be confusing.

E.g.:

(user-specified message)

Are you sure you want to leave this page?

                | Leave this page |  | Cancel |

Comment 3

[voracity]

This is one of those nuisance interface shortcomings that keeps popping up every so often.

Bug 411855 might be a duplicate. I agree with the suggestions in that bug, except I'd prefer the button labels to be:


     |Leave Page|  |Stay|

Comment 5

[Roger Peters]

Attachment: Mockup

I like the suggestions Biju made in bug 411855, so I'm posting them (and the mockup) here:

"At present a web-site can make message on window.onbeforeunload too long and
spoof it to confuse users.

"Added to that, tricks like the one at http://www.internetisseriousbusiness.com/
can make user accidentally click "Cancel" instead of "OK"

"So Firefox should:
1. show site message in different color/background.
2. reduce built-in text in the confirm question
   and keep them together.

   ======================== current ===========================
   Are you sure you want to navigate away from this page?
   Press OK to continue, or Cancel to stay on the current page.
                    [OK]  [Cancel]
   ============================================================


   =================== proposed ====================
   Do you want to leave this page?   [Leave] [Stay]
   =================================================

3. show site name for which the pop-up message is shown.
   (shorten it to show only relevant part of name 
    to avoid domain name spoof/hack) 

"See attached onbeforeunload.png"

Note: I think we should call the button "leave page" instead of just "leave".

Comment 6

[Sylvain Pasche]

What about Chrome's wording:

=== Confirm Navigation ===================================
[ onbeforeunload text provided by the page ]

Are you sure you want to leave this page?
              [ Leave this Page ]  [ Stay on this Page ]
==========================================================

That's close to the previous proposal, but provides a bit more context on the buttons, which can be helpful.

Another advantage of following Chrome's wording is that web developers would only have to maintain two "onbeforeunload" messages: one for Firefox-before-this-change + Safari + IE and one for Chrome + Firefox-after-this-change.

Comment 7

[trev]

Here's a thought, just disable the damn dialog box all together.  All the posts agree the message is there to trick or confuse the user.  It's an old piece of code that is being abused.  Death to onbeforeunload!

Comment 8

[Roger Peters]

Gmail uses it if you try to navigate away from the page while it is still doing something. My site uses it if changes have been made to a page, and it has not been saved.

The message can be used to try to trick users, but it also has many valid uses. Just labeling the buttons to say what they are doing would already get rid of much of the confusion.

Comment 9

[Alex Faaborg [:faaborg] (Firefox UX)]

Perhaps close this tab instead of leave this page?  I've occasionally nearly lost some data and have been saved by a onbeforeunload message, so I'm not sure disabling the dialog altogether is a net win.  We just need to make sure the user understands who is generating the dialog box, and has the control to close the tab (either directly because the dialog is only tab modal, or with the "close this tab" button).

Comment 10

[Jesse Ruderman]

I like the idea of using "close this tab" as a button label, but the dialog can also be shown when navigating to another page.  In that case we'd have to use a button label like "leave this page" (or decide not to show the dialog in that case).

Comment 11

[Josh Triplett]

I recently found myself attempting to help someone over the phone who ended up in a sea of this type of dialog.  I ended up having to advise them to power the system off, rather than attempting to explain which of the dialogs they could safely say "OK" to (as opposed to all the other kinds of dialogs where "OK" could mean "OK, install malware on my system").  It would help immensely if the dialog had unambiguously said "leave this page" and "stay on this page".  Among other things, I could then have safely said "don't click OK on anything".

Hopefully sites will learn to do incremental saving and remember user data without having to explicitly *do* something when leaving a page, and then onbeforeupload can go away as a tool only needed by malicious sites.  In the meantime, making this dialog unambiguous would vastly improve the current situation; this dialog represents one of the worst bits of UI in an otherwise excellent browser.