Never use the word Cancel in your UI

I like Calendly alot. However, some parts of their UI are not very good. They bury functionality in strange places and use a few anti-patterns. Plus, it’s a little bit ugly. One thing however, is a serious UX no-no.

Do you see the problem that causes confusion?

UX Rule #81: Never use the word Cancel for anything other than discarding an action before it’s too late.

Notice the dialog above. I want to get rid a lunch appointment because of a conflict. They chose the words “Cancel Event”. This leads to the modal being confusing. The word Cancel in this case means “Yes, delete the event”. Cancel can never mean “Yes”. It’s a reserved word that means “No”.

Here is a less confusing alternative I whipped up with no change in functionality.

  1. Removed the text. It doesn’t do anything useful. Most people don’t read that and besides it’s already clear what is happening.
  2. Changed the hint text to be clearer what the box was for.
  3. Mad the action “Delete” so it’s not confusing
  4. Made the negative case clearer without using the word Cancel at all.
  5. Added the X at the top right.
  6. Invisible: Make the escape key (on the keyboard) close the window.

Shorter, clearer. That is the goal of a product designer. 6 changes in one dialog.

This wouldn’t be a terrible junior interview question. Why is the top modal bad and how would you fix it? How would you make it better without new functionality (like “Suggest a new time”)?

Leave a Reply