Overview
The Filter UI section is commonly used in e-commerce websites with an extensive number of products. It is a great way to limit the scope of search results and provide seamless shopping experience. It also presents the variety of available options that the business offers and enables the user to easily make a comparison.
Filters are usually separated from the main content as a horizontal or vertical section or are triggered to appear upon pressing a filter button. They are strictly contextual, depend on the product catalog, and can be represented by groups of different components such as inputs, dropdowns, radiobuttons, checkboxes, colorpalettes, sliders, and so on.
By choosing different filters, users can easily refine the search results and find out not only what they are looking for, but also what they might need.
A well-designed Filter UI section includes a comprehensive set of relevant filter options, reflects the products' specifications, and is intuitive to use. It also impacts the business by attracting more customers, increasing the conversion rate, and creating distinction among competitors.
Key Principles
- Simplicity—include only meaningful filters related to the product catalog.
- Visibility—make sure that not only the Filters section can be distinguished from the rest of the content, but that the applied filters are displayed too.
- Flexibility—products of different categories require different filters so the filtering section must change accordingly.
Filter Variants
The Telerik and Kendo UI Filter offers design variants showcased in our demos, each tailored to enhance your application development by covering different usage scenarios.
Filter 1
Filter 13
UI Components Documentation
For product-specific information, refer to the corresponding Telerik and Kendo UI documentation:
