The current interface for my application has two drop downs, the first has the columns that you can sort by, the second has the direction which can be either ascending or descending. While the user can sort by column/direction, the data is shown as a richly formatted list, rather than a straightforward table with column headings. Here's an example of what it looks like:

list of data

I've been tasked with replacing them with up and down arrows but I am unsure of which scenario is best for users to make it more obvious or intuitive as to what is happening now and what change they can make.

Just for clarity:

  • Descending = down arrow
  • Ascending = up arrow

These are the options I have:

  1. Show both the up down arrows, but 'disable' the current direction
  2. On page load, show the descending arrow (default direction), clicking on it changes the order of the data to ascending as well as hiding the descending arrow and showing the ascending arrow
  3. On page load, show the ascending arrow (option available direction), clicking on it changes the order of the data to ascending as well as hiding the ascending arrow and showing the descending arrow

So option 2 shows you your current selection, which falls in line with how the drop downs would work. Option 3 shows you the option available to you.

Personally, I think option 3 is better in theory but when executed I feel it doesn't work as well.

Having looked around the web for examples, it's hard to find anyone using this style of ordering. It seems that:

  • Price: low to high
  • Price: hight to low

are the more common way of solving this issue, and this would be great, but that would mean doubling the number of options in the first column making that would just introduce way too many options for the user (14 now, maybe more than 20 in the future).

Suggestions as to what the most common scenario is or what user preferences are would be great.

Edit I thought a 4th option would be to only ever give the option to order descending, but this is not a viable option for our application

  • As a user myself, I hate the asc/desc up/down arrows myself... I never remember which is supposed to represent which, so I just end up clicking column headings until the sort is the way I intended... this gets exceptions problematic, though, when combined with multi-sort ("first sort by column B, desc, then by column A, asc", etc.) Jul 3, 2012 at 15:06
  • Just occured to me there's a fourth option, to only allow ordering one way. Negated the need for user interaction completely.
    – cchana
    Jul 3, 2012 at 15:09
  • It's interesting that you describe them as arrows; the little triangles to me describe sort direction by looking like little stacks (an "up arrow" has the smallest item on top and the largest item on the bottom and vice versa).
    – Kit Grose
    Jul 4, 2012 at 1:52
  • @KitGrose I described them as arrows because we chose to use arrows, rather than the directional triangles! The functionality to sort sits outside of the data view, so we are free to use anything we want to achieve the required functionality. To be honest, either is fine for us, it's just figuring out the best way to display the information to the user.
    – cchana
    Jul 4, 2012 at 7:53

4 Answers 4


Can I suggest a different approach? I think that with text the sort options are clearer.


download bmml source – Wireframes created with Balsamiq Mockups

  • This is an excellent solution and we already have something similar in the product that we had forgotten about. It's use is for a different purpose which is why it wasn't obvious to us, but we could certainly work it to our advantage.
    – cchana
    Jul 6, 2012 at 13:37
  • Excellent answer, I like it a lot. Jul 6, 2012 at 16:46

There are two components to the issue.

  • Explain to the user that a column is sorted, and which one.
  • Explain what will happen if the button is clicked.

The important thing in my mind is that it doesn't really matter which you put... arrow showing what way they will be sorted, or arrow showing which way they are sorted. The user can see the ordering right there, and they either like it or they don't. If they don't, they click; if they do, they keep it.

As usual, in the absence of an obvious best practice, I defer to Microsoft: do what they do.

enter image description here

Over the past couple revisions of Windows they have de-emphasized the indicator, I suspect because users don't notice it at all. In Vista they emphasized the sorted column with a light background... they dropped that as well in Windows 7.

Once a user knows they can sort by clicking the column headers, most additional decoration is not needed... if it is wrong they click. If it is correct they don't. The visual look of a column's data is usually distinctive enough to show which is sorted instantly. So the important thing is getting users to click the headers at all... after that, the decoration seems to be just that... decoration.

  • Excellent answer but the option is presented external to the data. Maybe I didn't explain the way it is represented very well, but I've updated the question with an example of what the rendered list looks like.
    – cchana
    Jul 3, 2012 at 15:43

I'll look for some examples however, in my experience, I've found that the most intuitive of the 3 solutions presented is the second.

Show the directional arrow indicating the CURRENT state of the sorting and not the one which you can change it too, you want it to serve double purpose immediately indicating the sorting order but intuitively users will click to toggle the directional arrow to flip sorting order.


Since your sort interface is external, I would dispense with icons completely. They are used for brevity when the button has to fit inside a column header, but should not be used in a standalone control as they are too ambiguous.

This issue (show state vs show action) is common, and well documented here. The end recommendation? Avoid toggle buttons completely if you can because they are ambiguous.

One option however is to have two buttons, if you have the room. I don't think this use case warrents it, but making it explicit can eliminate ambiguity.


download bmml source – Wireframes created with Balsamiq Mockups

However, in this case I don't think it matters. As I mentioned in my previous answer the user can see the order and they are either happy with it or they are not. You could name the button [Reverse Order] and bypass the issue completely.

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.