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)?

PS: I apologize for my bad english...

  • I probably ask this question too soon, a lot a features are now challenged, anyway many thanks for our answers. – Brice Oct 1 '15 at 12:30
  • In your forms, do you have the ability to group items in a dropdown list? (it exists in HTML, see optgroup) – A.L Oct 2 '15 at 0:02

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

mockup

download bmml source – Wireframes created with Balsamiq Mockups

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

mockup

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.
  • Thank's for your anwser, I already think about using radio, obviously that's why they designed for. My question is maybe not well formulated, sorry about that. In fact I'm asking how to show that in the current app structure. See screenshot below : s3.amazonaws.com/f.cl.ly/items/2S1m1X0X0d3G2K0e2X46/… – Brice Oct 1 '15 at 9:20
  • 1
    Radio Button is that kind of space will invole a two click action : First I choose my filter, then I choose the parameter. I'm not totally confortable with this option. Testing the app would, of course, the best Idea but sadly, this project is driven by a really short planning :/ – Brice Oct 1 '15 at 9:23

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

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.