Design of filters: Don’t change position of items
Filtering of items on e.g. an ecommerce website is very useful to find the wanted items. However the interaction design, and more specifically the transitions used, has a big impact on the usability of the filtering mechanisms.
Don’t: Change position of items
As an example of what NOT to do, see what happens when you apply a filter on a bike manufacturer’s site:
Items (bikes) that don’t apply to filter settings are shrinking and disappearing while the rest are taking their places through transitory movements in straight lines from start position to end position.
It is pretty hard keeping track of where the different items are going because you loose points of spatial reference.
Do: Fade down items that don’t apply to filter settings and make items stay put
Something like this is much better :
