Classic user interface error spotted in wild. Again.

Whilst playing in the “sandbox” of the most excellent payments provider Braintree, I couldn’t help but notice that they’d recreated a classic user interface design faux pas.

cancelprompt

Press the cancel button to cancel the cancellation.

To cancel the subscription you click the “continue” button. To avoid cancelling the subscription you click the cancel button. So to cancel the cancellation you click cancel. A little confusing, no?

I first saw this classic mistake in a User Interface class, years ago during my university days. The example given then was of a Windows OS dialog. It seems history is doomed to repeat itself. Braintree are not the first and I am sure that they will not be the last to make this mistake.

Whilst this is a funny example of bad interface design, it is also worrying. You see this action (like many actions with confirmation prompts) is a destructive action. In this case it is destroying a subscription record, which in a production system relates to what you are charging your customer on their recurred billing plan. It would be “a bad thing”TM to delete one by accident as it could result you missing getting paid, your user getting locked out of the system or many other subtle issues depending on the specifics of your integration with Braintree.

Fixing this issue is as simple as changing the buttons into a “Yes/No” combo instead of the confusing “Continue/Cancel”. Easy!

Update

I reached out to Braintree via Twitter and they were quick to respond to let me know that they are putting a fix in the queue.

braintree_response

Reason #29 of why I like dealing with Startups: they are responsive! Good work Braintree!