Showing that dropdown filter has been applied?

Question

An issue I've had with mobile apps with dropdowns is that when I change the dropdown selection, it's not clear if the filter was applied. It usually happens when my phone has weak reception. I continue clicking on dropdowns but nothing happens.

With that said, our mobile app has two dropdowns.

Just above the results I added a column header that changes when the dropdown changes. That way the list changed and the user knows the filter has been applied.

I don't want to waste space on a header that repeats information.

Question: After user makes a selection, Is there a more elegant way to let the user know that the filter was applied?

Note: the filters only change the order of the rows. The number of rows displayed remain the same.

Answer 1

You can show number of results. Customer will be understand when the number is changed.

Answer 2

I am not sure how you have implemented the list or data table in the mobile view to display the information, but one idea that I thought of is to change the label of the header row so that it is more informative.

For example, instead of the label "Cheapest first", you would actually use the label "Price" and then apply a status icon that shows the sorting order as either:

• Unsorted
• Sorted by ascending order
• Sorted by descending order

Another example could be to update the row items to show additional information, so instead of just displaying the name of the Gas, maybe use an icon or label to show the type of gas it is (e.g. Puma (R) for regular gas).

But it ultimately depends on the filtering options you are providing (even though there are only two filters) because it can create many different numbers of combinations that you need to be able to represent visually. I would have assumed that on mobile any filter selection would cause the result to be updated immediately (because there is no "submit" call-to-action to apply the selected filters).

In addition, your table may have default filtering options that have already been applied, unless there is a default state where no selections have been made. So you'll need to take all these variables and factors into consideration before coming up with the final design solution for your interface components and their behaviour.

Answer 3

Temporarily replace the results with a glimmer (an animated gray placeholder) to show that the new results are loading. For fast connections this should only appear briefly; for slow connections, it's better to show no results than to show the wrong results (that don't match the selected filter).