27

I tried to buy a train ticket from a vending machine yesterday in a hurry and had some difficulty navigating the English menus (Chinese is the default language). I was trying to back up one step, but it seems I'd hit a "cancel" button instead.

Instead of instantly cancelling the transaction, a pop-up window opened with the question "Cancel this operation?" So far, so good.

But then I saw the two options: "Cancel" and "Yes".

Time stopped, my brain froze. I could not understand exactly what would happen if I chose either option - it looked like they would both cancel the transaction but that couldn't be the case. Luckily my clear-thinking friend clicked "Cancel" in order to not cancel the operation. He canceled the cancel.

But what would be a better way to state the query and the labels on each button?

"Cancel this operation?" So far, so good. But then I saw the two options: "Cancel" and "Yes".

update: While this answer to Should I use Yes/No or Ok/Cancel on my message box? does address the cognitive conundrum I faced:

Just for example, I recently saw a dialog with a question like "Do you really want to cancel your account?" and buttons labelled "Ok" and "Cancel". In this case, "Ok" meant "Cancel", and "Cancel" meant "don't cancel".

(which reminds me of the Star Trek TOS scenario where Spock says "I am lying") I think that the Cancel vs Yes options pose a specific problem not actually answered there, and answers accumulating here so far seem to be much more focused on this specific issue and its potential solutions.

Improve this question
8
  • 12
    Does this answer your question? Should I use Yes/No or Ok/Cancel on my message box?
    – Danielillo
    Commented Mar 6, 2023 at 8:02
  • 5
    @Danielillo hmm... this answer does seem to be a pretty close fit
    – uhoh
    Commented Mar 6, 2023 at 8:22
  • 2
    Cancel this operation: [No] [Yes] — ??
    – bloodyKnuckles
    Commented Mar 6, 2023 at 13:01
  • 2
    @Danielillo but these new answers seem a lot more specific to this (in my opinion) pathological example. Closing would point future readers away from them, so I've updated the question to include a link to that answer and an explanation why this is different.
    – uhoh
    Commented Mar 6, 2023 at 17:51
  • 2
    @uhoh To me, it clears up the confusion you reached when you said "I could not understand exactly what would happen if I chose either option - it looked like they would both cancel the transaction". By using "Yes" and "No", you eliminate the confusion and create two clear cut answers, Yes, I would like to cancel or No, I would not like to cancel. You could further expand upon that and make the buttons [Yes, cancel transaction] and [No, don't cancel transaction], but I think given the question that is being asked in the pop up, I think Yes or No is clear enough.
    – Gene
    Commented Mar 6, 2023 at 18:17

7 Answers 7

Reset to default
40

enter image description here

These misleading UIs are everywhere.

They're mostly long-life radioactive waste left behind by the MFC MessageBox() function. Back in the day it was quite a lot of work to make a custom popup, and using MessageBox() was much simpler. However, this function allowed no layout customization, and only a few generic button text settings (Yes/No, OK/Cancel, Yes/No/Cancel, etc). Due to their ease of use (for the programmer) these simple MessageBoxes litter every application... and as often happens with bad design that becomes entrenched, they've spread to other OS'es and platforms. However the limited choice of button text often turns them into "WTF" moments, as shown by the asker in the question and the very special example on top of this answer.

Since the problem comes from the unneeded constraint on button text, the solution is to remove this constraint.

The machine you were using looks like it has a touchscreen, and on these, large buttons are fashionable. So why not make it explicit?

Are you sure?
🗑  Cancel order

↩ ↪  Return to order  

Add some icons, for example trashcan for "cancel order" and left-arrow for "return to order".

Esc key always means "cancel current operation", in this case "cancel the canceling" (I can feel MessageBox headache already) so it should map to "Return to order".

As a courtesy for the blind, you should make sure the screen reader can read the button text, perhaps not the icons.

Please do not make the "return to order" option into a light grey "X" over a slightly less light grey background hidden in a random corner of the popup.

Improve this answer
9
  • 3
    Re 'left-arrow for "return to order"' – You know, there are countries with RTL script (or top to bottom for that matter). I've never placed or even seen an "order" at buying tickets. Anyway, +1 for the large buttons and the icons.
    – Gerold Broser
    Commented Mar 7, 2023 at 1:40
  • 2
    @GeroldBroser the icon could be localized, or if it's too expensive to localize graphics, replaced by unicode arrows ↩ ↪ in the translated text ;)
    – bobflux
    Commented Mar 7, 2023 at 8:21
  • 2
    The arrow with the word "return" next to it makes my brain think this is an Enter-key which I can use to confirm the question - which is quite the opposite of the button's function. While I like the explicit labels, I would choose another icon or maybe add some color.
    – Christoph
    Commented Mar 7, 2023 at 8:46
  • 1
    @Christoph yeah that's right! Maybe ← would be better ;)
    – bobflux
    Commented Mar 7, 2023 at 8:49
  • 5
    The good thing abut this answer is that the user can read only the buttons and still know what to do. (Some people don't read more than they have to; and, arguably, a good UI is one that needs the least text to be read.) macOS and Mac apps don't generally have ‘OK’ buttons — they use an explicit verb instead, and that's usually much clearer. ‘Cancel’ can make some sense when it's obvious what operation is in progress, but in cases like this it can be really confusing, and an explicit verb is usually much clearer there too.
    – gidds
    Commented Mar 7, 2023 at 11:36
19

Rather than thinking of this as a continue/abort or yes/no prompt, you can treat it as a full choice between two actions, and describe those actions to the user.

Since this is a modal dialogue with no other controls, you don't need to keep the description separate from the options, just give each a clear heading.

For example:

Cancel Transaction
Forget all selected ticket information and go back to start screen.

Continue Booking
Continue booking process for current tickets.

Or even name the step that the user will be shown if they don't cancel the transaction, e.g.

Continue Booking
Continue selecting payment options for current tickets.

Now rather than going back and forth between a question and two possible answers to work out what will actually happen, the user can read the description on the button they are about to press, and decide if it matches what they want to happen.

Improve this answer
16

  1. Be explicit.

    "... this operation" (with its 9 meanings there) isn't at all.

    Are you sure?
    Cancel buying ticket[s]¹.

          Yes          No    

    ¹ Singular or plural dynamically depending on the user's prior selection[s]².
    ² Singular or plural depending on the user's prior activit[y|ies]³
    ³ Singular or ...

    What the F***?!?
    Cancel this infinite nonsense.

                          OK                   

    PS: Please forgive me. Just for working stress relief. 😊

  2. As mentioned/linked in comments to the question: Should I use Yes/No or Ok/Cancel on my message box?

  3. It can be even (much) worse: Interface Hall of Shame, - Error Messages -.
    [⚠️ Be prepared to stay on this site for hours!]

Improve this answer
3
  • 5
    Although it avoids the worst part ("Cancel Cancelling"), a "Yes"/"No" question still requires the reader to think through that the double negative "don't cancel buying tickets" is equivalent to "continue buying tickets".
    – IMSoP
    Commented Mar 7, 2023 at 12:53
  • 1
    @IMSoP That's a point. However, | Are you sure? | Continue buying ticket[s]. | – would 1) not be logical (i.e. not reflecting to the user's prior action) since the user didn't choose any form of Continue before (but Cancel, though unintentionally), 2) potentially confuse the user since (s)he didn't choose any form of Continue before, 3) probably confuse users who chose Cancel intentionally before (since not reflecting the user's prior action). What do you suggest in detail?
    – Gerold Broser
    Commented Mar 7, 2023 at 14:29
  • 1
    @IMSoP Ah, I've seen your answer at the bottom here right now. +1 for it.
    – Gerold Broser
    Commented Mar 7, 2023 at 14:35
4

This is a good example of bad writing. You have two options that mean the same thing. Here are some examples you can use:

  • Go Back - Cancel
  • Don't cancel - Yes, cancel
  • Back - Cancel Operation
  • Disagree - Agree
  • Keep it - Cancel Operation
Improve this answer
2
  • 2
    Re "Don't" – The human brain doesn't get negative messages that good. Example: Don't think of tasty ice cream! Yes, YOU in front of the display: Don't think of TASTY ICE CREAM NOW! (personal address, repetition, markup and immediacy intensify :) Apart from Cancel and < Back (this in conjunction with Next > in a dialog sequence only) I haven't seen any of the other options in any dialog I've ever seen–and there were quite a few over the decades. Re "Operation": ux.stackexchange.com/a/146909/67216.
    – Gerold Broser
    Commented Mar 6, 2023 at 20:45
  • 3
    please no variety of Back/Cancel because cancelling also goes back.
    – user20574
    Commented Mar 7, 2023 at 12:32
2

With the assumption that 'Yes' is 'Yes, I'd like to cancel this operation' and 'Cancel' is 'Cancel this cancel operation', I'd change the two buttons to be 'Go back' and 'Yes, cancel this operation'/'Yes, cancel'.

Improve this answer
1
  • 2
    "Go back" (... to where you once belonged?) is relative which needs an added step in the human thinking process: Where/What was my "back"? Absolute targets are way better: Go back to buying ticket(s), but that's too long then. "Yes, cancel this operation'" is way to long, too, even more in a hurry like the OP and like many people are at stations. Re "operation": ux.stackexchange.com/a/146909/67216.
    – Gerold Broser
    Commented Mar 6, 2023 at 20:01
1 
Do you want to cancel the operation?

[Cancel operation]

Cancel

I would style it like this:

enter image description here

Improve this answer
-2

I would go for more detailed explanations on the buttons while keeping them short. The following button texts in my opinion are unambiguously explaining what each button does:

Cancel this operation?

[Confirm cancel] [Keep it running]

Improve this answer

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.