Amazon Forgiving Checkboxes
Screenshots powered byGetScreenshot Screenshot API
✋ What is it?
This is a solution found in Amazon.com. When a user clicks on the label of one of the filter's checkboxes, the checkbox will get selected although the click wasn't performed directly on the checkbox target.
🤲 How does this interaction or solution work?
As the "everything" store, is not a surprise that Amazon has a sophisticated and comprehensive functionality behind their filtering system. Not only Amazon's filters are contextual to specific search queries, but also they rely on several UX accommodations that increase their usability.
One important UX solution in their filters is the forgiveness of their checkbox fields.
When users want to interact with Amazon's website filters, they usually have to go through the process of selecting specific criteria that would help Amazon to narrow down their search.
When users click on the checkbox target, the checkbox would be selected as expected. However, if the user misses the checkbox target and instead clicks on the label (or chooses to click the label), the checkbox will be marked regardless, allowing the users to continue with their search.
🙌 How does this interaction or solution work?
Although this solution seems like an obvious choice, you will be surprised to find that most implementations of radio buttons and checkboxes are very unforgiving.
Amazon makes the right choice here by extending the target area of a crucial interaction control.
Forgiving interactions are essential when users are performing tasks over and over. At the very least they help to reduce cognitive load and frustration, but in some instances like Amazon's, they can also have an impact on conversion rates and general customer satisfaction.
That's it! If you like the content, consider subscribing to Waveguide Next, a newsletter / blog where I share new examples and lessons on User Experience.