0

We have a sort selection dropdown list with around 6 options. We'd like the user to be able to specify the direction of the sort. Is adding up/down arrows like this intuitive?

dropdown with asc/desc selector

In looking at other sites, it's common to see the sort direction within the options themselves (e.g., "Price (lowest to highest)", "Price (highest to lowest)", etc.)

But we have a number of different quantities in our case and fear the drop-down would become too cluttered if each one was duplicated like that.

  • 1
    I find the A-Z sorting icon more intuitive. But it might be just my personal opinion here. :) – Adriano Dec 18 '19 at 0:11
  • Can you provide the whole section of your filters? Maybe there is room for other improvements because you should go by a solution like the first one @Barnyard visualized. The kind of arrows you use in your example typically indicate that you can move number up/down (number field) or move the position of the whole section. – chrisbergr Jan 17 at 7:01
1

I would add another control for sort direction right next to the existing control for sort type.

That new control could be another drop down: image showing two drop downs next to each other

Or a segmented control: image that shows a drop down and a segmented control

As noted by Adriano, A-Z can be clearer than arrows (at least to English speakers); However, I would not recommend putting A-Z on a toggle button because it is ambiguous (like when someone answers "Do you want coffee or tea?" with "Yes!").

| improve this answer | |
  • The problem with"Low to high" is that it doesn't make sense for some criteria (e.g., number of rooms). You'd want "Smallest to largest" in that case or some such. In that case A-Z is more general, but it seems to me a bit unintuitive to have A-Z for a price. Any examples of sites using these patterns? I've been looking but it seems uncommon. Thanks. – mla Dec 18 '19 at 5:12
  • Ascending/Descending would be a more generalized option but may not work for all possible cases. – James Coyle Jan 17 at 12:02
  • 1
    @mla You're right, A-Z/Z-A doesn't make sense for every criteria, so just define your "sort direction" terminology uniquely for each criteria. For some examples, Price → [Low, High], Number of Rooms → [Smallest, Largest], Date → [Oldest, Newest]. You'd then be able to show the appropriate directional terminology based on the criteria selected. – maxathousand Jan 17 at 16:06
  • @mla I am almost certain I have seen this style used before, but I cannot find any live examples that use two controls. – Barnyard Jan 17 at 23:37
  • 1
    @maxathousand At the time of night I wrote this answer my mind just assumed the terminology would change. Thank you for putting it in writing :) – Barnyard Jan 17 at 23:42
0

First off

I'd recommend reviewing the application/website and figure out whether the ascending/descending option is required for all the sorting criteria. I have faced a similar conundrum before and a bit of testing/user research made me realize that some sorting criterion don't need to be sorted both ways.

Next

If you identify that you do need to have all the sorting options with a asc/desc identifier, break them up. Let the dropdown select the sorting criterion and then have a toggle button in the table/list for order of display. That makes the sorting process feel less convoluted.


NOTE: Gauge the user's requirements and patterns when it comes to using filters/sorting. They have specific requirements. More often than not, when a user decided to sort by price, they'd want to see the cheapest option first. On the other hand, for ratings, they'd want to see the highest rated ones.

| improve this answer | |
0

I would tend towards using a datatable of some sort to render the data in columns rather than using a sort by dropdown. It is of course dependant on what you are actually sorting but if you can render it in a datatable then each column can provide sort functionality directly without the user having to select an item from a dropdown.

See this example taken from the Google Material Guidelines:

Example of a column sort in a datatable

| improve this answer | |

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.