The challenge was to display filters for a property range that made the options really clear to users:
- You can select multiple types of property
- You can select multiple attributes of properties
- You can combine types and attributes in your filtering
- You are seeing the whole range to begin with
- You can get back to the whole range easily
Generally it's a good idea to stick to user interface conventions so that users know how to interact with your site. For example, radio buttons tell users that they can select one option out of the list:
Whereas checkboxes allow users select more than one option:
We chose checkboxes for the advanced filters on the TuckerGardner website, allowing users to select any combination of filters together:
To make clear that the user was beginning with the full range of results, we added ‘All’ options at the head of each list. These are checked by default, and when the user has checked none of the options underneath:
This adapted checkbox system shows every property in the range to begin with so that the user does not miss anything, yet allows filtering to show specific types of property with a single click. Returning to all properties does not require each filter to be unchecked: users simply click 'All' again.
Linking checkboxes in this way is unconventional but we’re in great company – LinkedIn uses this method on its search page.