Showing ASC/DESC icons intuitively

Question

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:

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

Answer 1

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

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

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.

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.

Answer 3

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.

Answer 4

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.