Force users to select only one of X filters in list display

Question

I'm currently working on a small App, the whole conception and dev are driven by planning and budget.

I'm trying to create a this display, showing many insurance operation to users. Users can filter this operation by two parameters (type of operation, people concerning by the operation) or via a search input but, Only one of these three filters can be used at once.

I'm stuck at this point: How should I visually represent to users that they have to choose ONLY ONE filter, even if they are functionally different (search/real filter)?

Answer 1

Looks like a radio button would be fitting here. Radio buttons are designed so that only one option can be active at once.

^{download bmml source – Wireframes created with Balsamiq Mockups}

If you have only a few people in the second group, you could use a combobox (like in Type of operation). If there are more people, you could still use a combobox, but with search feature - like this one: https://select2.github.io/examples.html

On mobile, you could surround each radio button "section" with color or variable saturation or lightness, or gray-out other input fields when their group is not selected. The circle in radio group should be clear enough indicator to users that only one option can be active at a time.

As for the default selection - there are two paths you can take:

1. Don't select anything at first. This will let user choose what they want. It would be wise not to gray out anything at first, or the user might think nothing is editable.
2. Test your app and pre-select one option the user is most likely going to use.

Answer 2

since you're in the mobile environment, you can try something similar to tabs. however, when you design the graphics for this, do make it look better than regular tabs.

this way it is very clear you can choose only one way to filter.

before you do anything, you might also want to check out this nice collection of examples of filtering in mobile: http://www.mobile-patterns.com/filter

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 3

You can give each search/filter option its own button and group them like this:

^{download bmml source – Wireframes created with Balsamiq Mockups}