I'm working on the design of mobile version of a search engine. It has a few filters, and I want to provide some visual feedback for the user when he/she selects a filter, so he/she knows the search results are being filtered or have been changed since he/she selected the filter.

Please keep in mind, this is designed for mobile, so I've got limited space to work with.

enter image description here

  • Could you post an image?
    – Alvaro
    Commented Dec 20, 2016 at 9:09
  • @Alvaro Added a screenshot.
    – MJB
    Commented Dec 20, 2016 at 9:31
  • So the problem is that selected filters are kept hidden in the accordion right?
    – Alvaro
    Commented Dec 20, 2016 at 9:35
  • @Alvaro Not exactly, the question here is how do I make certain that users understand that when they press for example "februari", the results below have changed accordingly.
    – MJB
    Commented Dec 20, 2016 at 10:37
  • how does the user access the filter menu? is it collapsible once selection has been made? Does user have to do another action to confirm his filter selections , like 'Apply' ?
    – semuzaboi
    Commented Dec 21, 2016 at 6:44

7 Answers 7


We can provide loader icon by blurring the background. It will convey to user that the filtering of options is in progress. In addition to this where would be filter option displayed?


[Adding filter at bottom without covering whole screen is one method and another catch would be using apply button after modifying filter. There will be a problem when server has to pull data based on each filter changes and would crash eventually so think before using it , Solution would be add Apply Filter Button so that it could hit server and get results Hope this helps

enter image description here


You need to give the user some feedback that:

  1. The page received his interaction.
  2. The page responded providing him what he asked for.

It doesn't matter if the results are even the same. The importance is that the user understands his interaction was successful and what he sees now is a response to it.

The easiest and most efficient way I can think of is if the old results fade out and the new ones fade in or appear, this is how Google does it for example.


visual feedback for the user when he/she selects a filter - this can be acheived with the help of a simple loader icon in the results pane whenever the user has selected the filters.

I am guessing the filters is flyout menu below your header and it will be collapsed once the user has selected his filters .

In such a case , once the menu has collapsed, i would suggest dim the result screen with a centered loader icon, while the user waits for results from server.

Also denote a number in your collapsed filters menu section, so that the user is aware at any time a filter has been applied.


I would say that you don't need to have something obviously persistent, such as another bar saying 'Showing 43 results for 5 filters'. If you let the user know what you are doing behind the scenes at each stage, I think they will likely be happy with where they are in their search journey.

To achieve this, a nice big overlay with a big green tick, picking up whatever animation you are using elsewhere, and something like 'Applying filter: Februari 2017' for a second, should do the job.

A count of filters for each section would also be of benefit, for the amount of space they take up, so you top section could read 'Startmoment (1) v' - the brackets there implying a circle or other graphic to separate the count from the title.

A little bit of testing would go a long way here - put a couple of different designs or prototypes in front of users; see what they say.

EDIT: please note that I am not suggesting a 'loading' icon, which would mean that your search function would have to be slow in order for users to understand what is happening! Rather, this a message from you to your users, that appears regardless of how fast your search is.


Maybe you could use tag like this? Tags


That tags represent the current active/selected filter, you can adjust the size to fit your design.


One way to approach this would be to have the filters appear as a modal. This would address two issues:

1) The user presses 'Done' or 'Apply' to close the modal, which gives them the desired confirmation that the search results have been changed.

2) Users won't have to scroll past a long list of filters to get to the results beneath. This can be a problem, particularly if the results are spread over multiple pages and navigating through them takes the user to the top of the page each time.

The attached images are from next.co.uk. Pressing the 'Filter' button causes the filters modal (second image) to slide up from the bottom, so the user knows it hasn't taken them to another page.

Next.co.uk search page

Next.co.uk filter modal

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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