We have a scenario where when a user changes the code language (script), they're given the option to either keep the code they've already written or override the code. I'm currently working on the dialogue box for this, but have previously not worked with multiple action buttons in a dialogue box. Below is a reference image. enter image description here

I have a couple of questions regarding my approach: - Is it appropriate to use a dialogue box for this? - Any examples of multiple buttons in a dialogue box?

Thank you.

  • Just so I'm clear: "Keep" = cancel / don't override the script "Override" = change the script with the new code – Koumtti Feb 5 '20 at 22:22
  • Yes, you're right. That's what I think I'm not communicating well, because technically 'keep' isn't canceling. Unless it would just be easier to communicate it as 'Do you want to override your code?' and then keep is no and override is yes. However, most people would want to keep it. – user131179 Feb 5 '20 at 22:25

You're on the right track. Dialogs should have one or two actions. They can contain form inputs but should not contain any other links or buttons which take the user away from the dialog.

A single button dialog is used when the user just needs to confirm they have read a message. A two button dialog is used when the user is about to perform an action that needs confirmation. The rightmost button (or leftmost if left aligned) should be the button which confirms the action with the other button being the one which cancels it and does nothing.

That last point is important here. I think it would be better if you flipped your logic around and asked the user if they wanted to delete their code instead of keeping it. Note: You could replace "Cancel" with "Keep" or "Skip" if that better suits your application flow.

Example of a discard code dialog

Another option would be to keep the code by default and give the user a button that discards all of the code rather than interrupting their flow with a dialog. The user may have unintentionally changed the code language so popping up a dialog interrupts their flow and stops them from quickly changing it back. Keeping the code and then adding an option to the editor which clears the code gives the control back to the user and adds an additional feature to your editor. You should also show a similar dialog when that button is pressed.

Example of a discard code dialog

  • Thanks for your feedback, this was very helpful! However, it got me thinking. Most of the time, users want to keep the code and not discard it. Would it still be beneficial to have them discard as the pop-up every time they change? I was thinking if a better alternative could be to have the default be keeping the code, and instead of providing a discard option. – user131179 Feb 10 '20 at 21:26
  • My second option is probably the least intrusive for the user. Just give them a button that discards the code if they want (with the dialog confirmation) but keep it by default if the user changes language. – James Coyle Feb 11 '20 at 10:13
  • Thanks a bunch, James! This has been very helpful. – user131179 Feb 11 '20 at 19:13

I think you have the right idea but as you mentioned in your comment, the content needs to be simplified. I like having the primary CTA be the non-permanent option. Perhaps something like this?

modal with CTAs

  • Thank you for the feedback! – user131179 Feb 11 '20 at 19:13

I believe you can follow google's guide for this. In a nutshell make sure your message box got clarity, conciseness and usefulness all checked off. Hope this helps


enter image description here

  • Thank you for this reference! – user131179 Feb 11 '20 at 19:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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