When searching for shoes on Zappos, you can filter search results by price. As seen below, the four options are:
A: $50 and Under
B: $100 and Under
C: $200 and Under
D: $200 and Over
This is really strange for the following reasons:
1. The four groups are not mutually exclusive. Groups A and D are independent groups. Group B includes all of the shoes in Group A in addition to the shoes that are between $50 and $100. Group C includes all of the shoes in Group B (which includes Group A shoes!!) in addition to the shoes that are between $100 and $200.
2. What if the user wanted to search for shoes that were between $50 and $100 OR between $100 and $200. As its currently implemented, the user cannot.
3. It is an inconsistent pattern. You start with Group A that stands alone. Then Group B includes Group A. OK, fine. Then Group C includes Group B (which includes Group A). OK, fine. Then all of a sudden, Group D comes along and is independent from the bunch??
4. The UI control allows the user to select more than one option! As seen above, Groups B and C are selected. This is no different than just selecting Group C. So what was the point??
Here is the better design:
Arrange the different price groups into the following options:
A: $50 and Under
B: $50 – $100
C: $100 – $200
D: $200 and Over
For the UI control, allow the user to select more than one option.