I counted 8 mistakes in this 15-word dialog design

Why UX writing is not just about being a professional writer.

This is a dialog box that pops up after the user taps on the “x” in the top left corner:

Granted, this is designed by a non-native English speaker, probably in a hurry. I am not a native speaker either, yet this dialog box is triggering so many allergic reactions in me and is a quintessential poor UX writing.

Let’s examine why this dialog box of only 15 English words is a design crime scene, line by line.

Cancel Add Service?

Two verbs side-by-side; the “Add Service” context is hard to perceive; Title Case causes confusion

1. Writing two verbs, side-by-side, is confusing. In addition, the verb “cancel” is destructive and the verb “add” is constructive, exacerbating the confusion.
2. Yes, I know this workflow is called “Add Service”, but this context may be difficult for the end users to perceive. Users may wonder what exactly they are trying to exit from.
3. The Title Case does not help with parsing the line as a sentence.

There are already many well-established ways to ask this question:

• Discard progress?
• Discard changes?
• Save changes as a draft?
• Unsaved changes
• Leave page?
• (Or don’t show the dialog box at all; auto-save for the user and show a snack bar saying “saved as a draft” instead)

Cancel and continue buttons

The precise meaning of “cancel” was not clear; the destructive action is encouraged instead of canceled.

4. The verbs used in the buttons do not agree with the verb used in the title.
What is “cancel”? Is it “cancel so that I can go back and edit”, or “cancel/exit this workflow”? And what is “continue”? “Continue staying on the page” or “continue exiting the page”?

5. By using a filled style for “continue” and an outlined style for “cancel”, this design encourages users to click “continue”, a destructive action that will discard all the progress, rather than “cancel”.

Select ‘Continue’ will loose all the settings added so far.

Dialog description should not be necessary if the other parts of the dialog were well-written; inconsistency between the dialog title and the dialog description; a grammatical mistake and a typo.

6. Assistive dialogs should be concise and effective. They should avoid any redundant details. If designed well, many dialogs do not even need a description text. In this case, if the “Continue” button is properly labeled as “discard changes”, users shouldn’t need to read the description text at all.

7. The workflow is called “add service”, but here it is being referred to as “add settings”.

8. The sentence is not grammatically correct. Should have been this:

Selecting “Continue” will lose all the settings added so far.

My Fix

Unless it adds a big performance toll, I usually opt for a snack bar approach with a draft-saving function. The snack bar slides in from the screen bottom after users exit the workflow. It is less intrusive to the workflow, and users are informed that they may resume in the future at their convenience:

The snack bar / toaster approach is way less intrusive.

But if intervening with the exiting workflow is necessary, a concise dialog box works the best: