Searching with LinkedIn Style Checkboxes

by Ian

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:

Amazon radio buttons

Whereas checkboxes allow users select more than one option:

Amazon checkboxes

We chose checkboxes for the advanced filters on the TuckerGardner website, allowing users to select any combination of filters together:

TuckerGardner new checkboxes

TuckerGardner new checkboxes

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:

TuckerGardner adapted checkboxes

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.

LinkedIn search checkboxes