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.
- Removed the text. It doesn’t do anything useful. Most people don’t read that and besides it’s already clear what is happening.
- Changed the hint text to be clearer what the box was for.
- Mad the action “Delete” so it’s not confusing
- Made the negative case clearer without using the word Cancel at all.
- Added the X at the top right.
- 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”)?
Whatya think?