I recently came across an annoying micro-interaction.
Here’s a screenshot of that UI, which is a webinar shopping cart.
Let’s take a look at the interaction.
As you can see, clicking on the teal button selected that option, indicated by a checkbox being checked, and an item added to a shopping cart.
Clicking on the yellow button selected that option indicated by a checkbox being checked, and the second item in the shopping cart was removed.
But here are problems…
Problem 1: “Checkbox-like” icon used in a button gives a user a false impression that’s where you click to select the checkbox.
Problem 2: A button provides a proper visual feedback when anywhere other than the checkmark icon is clicked, but it doesn’t when the checkmark icon is clicked.
Problem 3: When I clicked the checkbox in the teal button twice, it did not turn to a checked status either, but I realized that the item actually got added twice to the shopping cart.
So how can we design this experience better?
I created 3 improved designs.
Improved design A: A proper checkbox with expected behaviors
This one uses a real checkbox that you can check or uncheck. Checking the checkbox adds the item to the shopping cart. Unchecking the checkbox removes the item from the shopping cart. The beauty of this design is that you don’t need “No thanks” button, which makes things simpler.
Improved design B: Radio buttons
This is old-school. Using a pair of radio buttons for two options makes it crystal clear that you can only choose one option.
Improved design C: This is closest to the original design.
Here, checkmark icons are used on buttons without looking like actual checkmarks.
None of these look fancy, but it works without confusions.
Visual design can be fancy and look cool, but that’s not the most important point.
The most important thing is to make things as easy and clear as possible for a user, so that a user can use it and complete a task with confidence.
Designers may be attempted to create cool fancy visuals.
And there’s nothing wrong with that, as long as it does not defeat the whole purpose of making things easier and clearer.for a user.
Check out YouTube version too.
Check out relevant article #51 When UI conventions are used the wrong way.