0

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.

enter image description here

1
  • In fact you have one filter dropdown - gas type, and one order dropdown - what's first. Is it right? Another question is - how could table data not correspond to filter after dropdown is set? Suppose you empty list after dropdown selected until data will fill it so no any inconsistency in such case.
    – Serg
    Mar 15 at 11:57

3 Answers 3

0

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

2
  • 2
    What if the number of results does not change, but the filter was still applied?
    – Nash
    Mar 12 at 19:07
  • The filters only change the order of the rows. The number of rows displayed remain the same.
    – rbhat
    Mar 14 at 14:04
0

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.

0

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

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.