2

In our app we allow users to select multiple items to search for data on. We also allow users to search this list of items as it can be quite long.

So for example the main purpose of a page is to list people's pets, but you can search based on species. So select dog, cat, rabbit...etc. We allow you to select more than 1 species at a time and when selecting we allow you to search the list of species. This looks something like this:

List of items to be selected

When you tap on an option a tick appears on the right to show you have selected it. If you tap the item again the tick is removed.

When you have finished making your selections you tap "Done" in the top right and return to the previous screen with the filters applied.

You are able to search this list for ease of finding a specific item, but you still have to tap it to select it. As you type in the search box the list is filtered instantly.

For example:

Elephant searched for

In this example the user has searched for Elephant, only 1 item is returned. All previous selections are still in place, but they have not tapped on Elephant to select it yet.

We have had feedback that users see this screen, assume that as only 1 item is appearing that if they tap "Done" they expect "Elephant" and only "Elephant" to be selected and searched for. Even though it does not have a tick, and they have not tapped it.

Is there any way we can redesign this so that it is more obvious to the user how this search, filter and select works?

  • What's the end result of the search, what are people doing? – DarrylGodden Mar 27 at 10:51
  • The search is an instant filter on species. Once you have selected all the species you want and select done, you will see a list of pets that match the species you have selected. – Tom.Bowen89 Mar 27 at 11:39
  • And then what do you do? – DarrylGodden Mar 27 at 12:16
  • Select a pet to view. But that's not covered by this question. – Tom.Bowen89 Mar 27 at 12:51
  • It should be, the end result is where you're trying to get to, the minutia of getting there is important, what you're trying to achieve with the application is more important. – DarrylGodden Mar 27 at 15:43
1

I've used cards for the animals, cards can select and select by tapping the card.

enter image description here

  • this solution looks better if it have both grid and list view. You can add toggle button on below the search box on default view. – Kevin Andrid Mar 27 at 12:04
  • yeah! nice idea. I'll update. Thanks – Yasintha Mar 27 at 12:07
  • Only issue is this is more of an example, and there will be times when it's not just animals. I want a consistent solution to a multiselect with search that I can use for things that don't have images...etc Very good otherwise! – Tom.Bowen89 Mar 27 at 12:14
  • you can use some icons if images are not there! and Separations like 'birds, fish, reptiles' – Yasintha Mar 27 at 12:17
0

agree with 1. and 3. of Davis

but as already mentioned using radio buttons for a multi-select is not recommended.

for indicating the other selected species, you'd might also make a sticky section of already selected species on the top or have a single sticky item which says "5 other species selected" once a search is in progress.

For the button caption i'd also use sth like "Apply filter"

0

I would have couple of suggestions here.. :)

  1. Pretty minor and you probably have thought of it, but in the search bar once person has entered text, display "X" icon so users can clear the text without going in the text field and holding delete button.
  2. I would probably do multi select checkbox for selection. So show a checkbox for each item that would better indicate that the species can be selected and which have been and have not been selected. This way when person searches for Elephant they could see a grey radio button instead of a green one for example.
  3. To add even more clarity, I would show a number of how many species have been selected in the "Done" button. Also maybe change the text on the button to better indicate what will happen when it has been pressed, so maybe "Filter" instead of Done?

I'd say these are suggestions to clarify things more without going with a whole new redesign. But some people might have some more drastic ideas here. :D Hope it helps :)

  • you can use multiselect checkbox instead of radio buttons in this scenario, whereas radio button is mostly using on selecting a particular value within multiple options. – Kevin Andrid Mar 27 at 11:51
  • Ahh yes, I meant the multi-select checkbox. Accidentally wrote radio button, my bad ^_^ – DavisCipans Mar 27 at 15:17
  • That's ok, but be careful while answering. because the whole context might change between radio button and checkbox. – Kevin Andrid Mar 28 at 5:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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