UI Pattern: Filter

  • 1 Research
  • 2 In Progress
  • 3 Feedback
  • 4 Done

UI Pattern: Filter (Beta)

The data on a page is very numerous and reviewing it would be very time consuming. Users want to narrow down the amount of information on the canvas to find the information valuable to them at that moment.


  • Filters are secondary to data, and are therefore on a sidepanel instead of on the canvas. Using this pattern consistenly, lets users know where to find filters and where to find data.
  • Offering filters on a page is no substitute for user research and considering what is valuable to the user. If it can be reasonably expected that a users wants to see a certain piece of information at that point in their customer journey, it would be good to consider presenting the information in such a way that filtering is not needed.
  • There are filters that affect the outcome of a solve, for example filters that include/exclude a certain location from the solution. There are also filters that are view only, for example show DC’s only, and do not affect the outcome of the solve itself. It is important to be deliberate between the two and let users know if the filter they are using has an effect on the solve. This can be done for example by using two different sidepanels.


  • A sidepanel is used, with a MultiSelect, Legend or Selection widget.