This is a common design problem with some potential design patterns that might help you. I think the important thing to realise is that there are natural tendencies for users to assume relationships when you combine multiple controls and filtering options for them, and when you want them to be used in a particular way then it is a good idea to be more explicit with the labels and interactions. Say for example, you want the second filter to be based on the first filter (in a dependent manner), then you should make sure that the hierarchy of the layout and place of controls match this (e.g. top to bottom in order of how the user would interact with them). And you would also have default states and labels that reflect this. In your case, it is possible for users to want to find products/product numbers by supplier, or for users to want to find suppliers by product numbers. If you want to enforce the way the filters work then you have to be more explicit with the labels and interactions. This will prevent the users using the product number filter to look for suppliers. However, you should consider whether this is a useful enough feature to provide to users in another way.

It's always a good idea to reduce the amount of content users see at once. This reduces cognitive load. So, your approach in this case would be better. https://www.nngroup.com/articles/minimize-cognitive-load/ For the client approach. Is it scalable? How many filtering options will it have in 2 years from now? Would users know what "by type" means? Maybe yes or maybe not, in this case the clients approach would be better. Do users multi-filter? For example, by country AND by milk AND by type? In this case, the client's approach would give a better overview of filtering and reduce the amount of tasks and clicks users have to do. A third approach to this could be to have the filter options in a left column which is a common practice for most ecoms out there.

I don't quite understand the issue of limitations very well, especially when it's oneself who decides them. The question says: it doesn't make sense to sort by most recent first... we wouldn't want to list past webinars first ... we would be burying upcoming webinars down the page that we'd want to prioritize showing since they're upcoming Perfect, don't do any of those three things! A filter has two priority functions, one for the user a and one for the site owner b: a: help find a product easily b: facilitate to show/sale the products As the site owner, which one is your priority? If the answer is a as a user I would be interested in searching webinars by (this order is my preference as a consumer, maybe not the generic one): Price Subject Duration Top sales Upcoming Offers Specifics (author, ...) Other If the answer is b as a seller I would be interested in showing webinars by: Top sales Featured (weekly, monthly, by author...) Most recent Upcoming Offers (buy 3 pay 2,...) Others If I want to see all the webinars, as a user I have no preference, I want to see them all, I can spend an entire afternoon playing with the scroll bar. But, as a seller, I have preferences, I would show an order prioritizing the best placed within a ranking of the b list. BTW: this answer is generic, I don't know what webinars are about as it's not mentioned in the question

Consider something like https://twitter.com/search-advanced?lang=en : (Note that what looks like placeholders in the image are actually labels that pop into the corner of the input field. This is important so users can still see at a glance what each field is for, even if they have something already typed in it.) It's easy to know what you need to do, even if you've never used an advanced search before. It also doesn't even require more clicks to do a simple search. And of course it translates neatly to a smaller mobile view: the labels would just need to wrap while the text boxes shrink horizontally. There are more search options, tucked away under the fold because they are unlikely to be useful in most searches. This form creates the equivalent search in the search box. A user can then learn what each box does from experimentation (e.g. "all of these words" puts words in quotes), and create searches by using the main search bar. If you were using this form, your searches would be: Show items with "covid" or "coronavirus" and not "MERS" or "SARS": Any of these words: covid coronavirus None of these words: MERS SARS Show items with "2022" and "pandemic" All of these words: 2022 pandemic

Instead of a global filter you could provide a «apply for all» function. The meaning is. Your global filter will not reflect the filtersettings but set the filter in each widget. So if you filter globally by release, it is only an action that sets the release filter in each widget to the specific release. If a widget does not have a release filter this widget is not affected and if the user changes the filter in a single widget there is no influence on the global filter since the global filter does not show any state.

What do the users assume? I would be quite confused if I select "vegetables" (if that is a category" and still see the different meats. But I am only one and a designer, to boot. Please test this with new potential users. Design a prototype where the second column adapts to the selcetion of the first and again test this with new potential users. Think about animations or other design "tricks" that clarify the dependency. Of course, you have to consider the existing users who are already used to the established way. In my experience, if the new way is more logical and easy to perceive, users will adapt quickly (there will be some resistance, though) Established users are used to how the table works, but usually you always have to consider new users as well. If the established design does not work well, the onboarding of new users is more difficult, it may even cause resistance. You have to weigh the costs of keeping the design and changing it. Having test data will facilitate a good decision.

A dropdown with checkboxes makes sense when the user wants to select multiple items. This is a pattern you see all the time with filters for example. A dropdown with a radio does not make any sense to me. Radio buttons should be used when the user can only select one item which is the default behavior of a dropdown. So adding the radio buttons to the dropdown menu is redundant and may add confusion.

Can you add chips with delete option below the search field and above the table? And then remove auto suggestion in dropdown, and leave table results instantly update onChange in the search input field. Ofcourse rows that are already selected, if they are searched - should be signalized also active that as it is now. You can even switch from table row and checkboxes, to some version of toggable boxes where whole box could be clickable. If you want to avoid "pager", Load more button could be worth trying. You should clearly mark how contacts are sorted (i.e. Alphabetical)

Some multiple filters work the other way around: they show all possible items at startup and when clicking on each filter, the unfiltered ones disappear. The button All options is replaced by Reset or Clear all. Example demo https://www.bostoen.be/assets/bower_components/mixitup-multifilter/demos/checkboxes/

If I understood right you have one search field for all parameters over all categories. This might be confusing. What a faceted filter should provide (if there are a lot of parameters) is a 'search' within the category. Means one search field per category. To keep it simple you could us a 'toolbar' per category. The tools could be select all, reset and search. Only if the user clicks on search the search field is provided. If you hide the search field or not depends on how often the search field is needed or used. The search field should work as you described. Hide the non matching parameters. Make it easy to the user to delete the search term by providing an action to do so. In the example below on category 2 the user has clicked on 'search'

I don't think the button is necessary, but at the same time I think the selection mode of each filter should show a more advanced methodology of how the type of search is carried out, so that it's more implicit the results appear dynamically. A clear example is the https://www.myfonts.com/sans-serif-fonts filter system where there's no SHOW RESULTS button but the filters at the top have sliders that favors the perception that it's acting automatically. Even with the possibility of slider and text fields for the same filter, where both the slider and the text edition update the filter's result automatically. I think the option is: when removing a relevant element, offer a better alternative.

Use placeholder, but be try to be specific about the input type as well: Try reversing the stripes Another approach is to remove the tiger striping from the row, and use the background for the filter bar, to emphasize its 'separateness' from the data itself. Normally dropdown lists use 'Select...' to indicate more UI (a menu), but you might try using the word 'Filter...' and test on users. Another option: move the filters to a bar above the table In this approach, you can be explicit w/ a filters label, and if there are common columns to filter on, you can order those any way you like. This pattern is useful if you have a data table with lots of columns that don't fit in the viewport (but some might have a filter). You'll see this approach in Google Flights. It's not a spreadsheet like UI (it uses fat rows), but users can see at a glance if there's a filter engaged.

I think 'fuzzy' search is a term that was used when natural language processing wasn't as mature as it is now. But I suspect that you are looking at having to come up with a simpler problem to solve, or to spend the time and effort in creating a more sophisticated solution. It all comes down to time and $... I suggest looking at https://www.wolframalpha.com/ and their examples of https://www.wolfram.com/language/12/natural-language-processing/ capabilities as to how they manage the expressions that can be used as input and how it is processed. There are probably other examples as well but I think this is an area that they seem to specialise in and has been successful in creating proper context for different types of searches.

I think based on the circumstance where it is used, if the user's action (open, close & checking) is mostly towards a single type (example - docs.) of files then following the folder structure with the listing of documents as in recently added with a search option will be better, Or, if the user will be using multiple types of files mostly with respect to time, then the list view (paginated list) will be better.

Consider using a tree view for better hierarchy visualization. See tree view live example below: https://mdbootstrap.com/docs/b4/jquery/plugins/treeview/ If that's a filter with a multi-select option you can add checkboxes.

There's a pattern for this type of UI: https://material.io/components/chips#filter-chips Material delineates the active filter state by adding a checkmark, and another click removes the checkmark: you can also use an outline for more contrast:

That's your answer! If the blur washing the text, we would create two blocks and a text block. Positioning absolutely. !* { margin: 0; padding: 0; } .a-wrapper, .c-wrapper { display: inline-block; position: relative; } .a-wrapper .a, .c-wrapper .c { width: 200px; height: 200px; background: url(https://i.stack.imgur.com/69R3w.jpg); background-size: cover; filter: blur(5px); -webkit-filter: blur(2px); -moz-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); position: relative; } .b, .d { display: inline-block; width: 20%; height: 200px; background: url(https://i.stack.imgur.com/69R3w.jpg); background-size: cover; } .text { position: absolute; top: 0; left: 0; width: 200px; height: 200px; color: #fefefe; line-height: 200px; text-align: center; }<div class="a-wrapper"> <div class="a"></div> <div class="text">некоторый текст</div> </div> <div class="b"></div> <div class="c-wrapper"> <div class="c"></div> <div class="text">некоторый текст</div> </div> <div class="d"></div>

DevExpress didn't use it, but here. https://itemsfilter.codeplex.com A second reference is a working one. The only author somehow circulates the decision through ClickOnce.Actually, there's only one library for work. ItemsFilter.dll♪ So if you don't want ClickOnce install, you can go to Application Files/ItemsFilter.NET.Sample_1_1_0_1, take the file. ItemsFilter.dll.deploy and clean up .deploy On behalf of the file, after which, add this library to the project. The rest of the files are based on the author &apos; s drift, and they were not checked.Well, then you work like a regular hybrid, just standard. DataGrid replacement bsFilter:FilterDataGrid♪ Add the title:xmlns:bsFilter="http://schemas.bolapansoft.com/xaml/Controls/ItemsFilter" And run grid, for example:<bsFilter:FilterDataGrid ItemsSource="{Binding ItemsCollection}" AutoGenerateColumns="False"> &lt;DataGrid.Columns&gt; &lt;DataGridTextColumn Header="String" Binding="{Binding StrValue}" /&gt; &lt;DataGridTextColumn Header="Date Time" Binding="{Binding DateTimeValue}" /&gt; &lt;/DataGrid.Columns&gt; </bsFilter:FilterDataGrid> Where? ItemsCollection It's a collection.ObservableCollection(d) Facilities which in this example contain properties StrValue and DateTimeValue♪The result is:

When I did something like that, when I changed the search form in the hat, I added a parameter to the urn. ?search=[строка поиска]In the counterpart of articles, check the value of the search parameter at first load and sign for changes$rootScope.$on( "$locationChangeSuccess", function(event, next, current) { // get articles }) So you'll have a direct reference to a search request, which might be convenient.

I've decided.extension Results { func uniqueValueForObject<U : Equatable>(objectKey: String, paramKey: String, type: U.Type)->[U]{ var uniqueValues : [U] = U for obj in self { if let o = obj.valueForKeyPath(objectKey) { if let v = o.valueForKeyPath(paramKey){ if(!uniqueValues.contains(v as! U)){ uniqueValues.append(v as! U) } } } } return uniqueValues } func uniqueValue<U : Equatable>(paramKey: String, type: U.Type)->[U]{ var uniqueValues : [U] = U for obj in self { if let val = obj.valueForKeyPath(paramKey) { if (!uniqueValues.contains(val as! U)) { uniqueValues.append(val as! U) } } } return uniqueValues } func uniqueObject(paramKey: String)->[Object]{ var uniqueObjects : [Object] = Object for obj in self { if let val = obj.valueForKeyPath(paramKey) { let uniqueObj : Object = val as! Object if !uniqueObjects.contains(uniqueObj) { uniqueObjects.append(uniqueObj) } } } return uniqueObjects } } Then we use it.let unique1 = try! Realm().objects(News).uniqueValue("name", type: String.self) let unique2 = try! Realm().objects(News).uniqueValueForObject("subItem", paramKey: "name", type: String.self) let unique3 = try! Realm().objects(News).uniqueObject("subItem")