While testing some changes I made to a site for work, I caught myself making a somewhat common UI/UX mistake.
Here were the original screens. They show Step 1 and Step 2 of a “Record” functionality:
Step 1
Step 2
Can you spot the problem?
The issue, which is admittedly minor, comes when users double-click the Stop button in Step 1. The first click advances the screen to Step 2 and the second click triggers the Cancel button. Most users know to only use a single click on buttons, but the capacity for users to misuse your UI can never be discounted.
One solution to the problem is to ensure there is an “Are you sure?” confirmation on the Cancel button. I already had that in place but didn’t consider it sufficient.
Another solution is to use Javascript to detect and suppress the second “half” of the double-click. But… ain’t nobody got time for that.
In the end, I tweaked the layout on the Step 1 design to push the button further down so it no longer overlaps the other button in terms of screen position:
