Which direction should the arrows point in a sorted table?

Question

In a sorted table, it's common to have an up or a down arrow indicating the sort style. However, I'm having some trouble determining which direction the arrow should point. In an ASC sort, characters are sorted 1-9A-Za-z. Should the arrow point up or down?

I've found implementations of both on the web, so that didn't help me much: Up and Down (you have to create the table first).

Is there a hard and fast rule for this? I find myself able to justify both implementations. Which method do you use? Which is more intuitive to you and why?

Edit: Some of you have suggested alternate implementations like rising bars or having letters with an arrow indicating sort direction. Great suggestions. I'm definitely open to other options. The less ambiguous, the better. It might be picky, but I'd really like there to be minimal or no confusion on the part of the user.

Edit: I ended up going with the rising and falling bars for now. It's not standard, but seems less ambiguous than the triangles. The current sort column shows three bars, small to large (left to right) for ASC, the opposite for DESC. Other sortable columns have no bars by default, but hovering over any sortable column heading (including the current) shows bars depicting how the table will be sorted if that column heading is clicked.

Answer 1

"Is there a hard and fast rule for this?" - Apparently not, since you found examples of both.

For general consistency, I'd say that the arrow should point up for ascending, down for descending. This is consistent with Windows (click a column header in Explorer) and Office (filter/sort a column in Excel).

Answer 2

I expect the arrows to show the current state (pointing up when the list is currently ascending). The is what Windows Explorer does in Details View.

Answer 3

I don't think of them as arrows, but as a visual mnemonic of the current state. So, showing a triangle pointing down shows descending order. It is visually in line with the icon with the largest item (base of the triangle) at the top of the list and the smallest (point of the triangle) at the bottom.

Answer 4

An arrow pointing up usually means larger or getting larger, so that should be used for Ascending order. An arrow pointing downwards usually means something is smaller or getting smaller and it should be used for Descending order.

Answer 5

I've always went with the following:

• Ascending -- Arrow pointing up
• Descending -- Arrow pointing down

In my opinion, the visual representation of the arrow pointing up/down most accurately explains the sort order.

Answer 6

Best place to check, in my opinion.. would be large corporate websites like amazon, dabs etc. as these will be what users are most used to.

Answer 7

in the classic Finder, Apple didn't use arrows. instead, there were a small icon that looked like three (or four?) horizontal lines of increasing or decreasing length. at first sight, it was like a triangle; but when looking at it, it was clear if it was getting bigger or smaller.

other GUIs (KDE, for example) use triangles, but most people interpret them as arrows, making the message ambiguous.

Answer 8

My favorite is actually the way that e.g. Excel handles it -- don't use an arrow, but rather a custom icon with

A  |
Z  V

for ascending sort and

Z  |
A  V

for descending sort. Nobody will ever wonder which way you're sorting.

Now, if you can't use a custom icon but rather need a printable character, I'd say people are about as likely to be confused by either one. Windows uses the "small part of arrow corresponds to smaller value" for Explorer, which is to say that ascending sort points up. But plenty of other sources assume that the base of the arrow starts at the lowest value and points in the direction of the sort, which frankly makes as much sense as anything else. In other words, half your users will probably have to adjust either way.

Answer 9

For some reason I feel is always backwards. For me the down pointing arrow/triangle should represent the way I usually read things (from top to bottom -> from a to z) and the up pointing arrow is backwards from the way I read things (from z to a). But that's just me, since most popular UIs (Mac, Windows, etc. etc.) use it the other way, they must know something :).

In any case consistency with what the user is used to is a good option.

Answer 10

The other thing that you need to consider is whether the arrow represents the current sort direction or the sort direction that will be applied if you click on the arrow. (Not always obvious from the contents of the table as there can be arrows on every column)

Sorry to add to the confusion, but you need to consider this.

Clarification on this front can be partially achieved by adding a suitably worded tooltip to the arrow.

Answer 11

I’ve done usability tests on this. There does not appear to be a consistent interpretation among users on what the arrows mean. I seem to recall that even each user was not consistent, thinking the arrow down meant ascending in one case and descending in another. I tried arrows to left and right (“forward” versus “backwards” sort), but they failed to be interpreted consistently too. I tried showing current state and showing the state that would result. Neither worked.

What did work was a schematic text depiction of the sort order: “A..Z” and “Z..A” for alpha, “1..9” and “9..1” for numeric, “1..12” and “12..1” for dates (the usability test used mm/dd/yy date format).

Show this text as read-only indicating the current state. Place a button beside the text to set or swap the sort order.

Didn’t try the rising/falling bar icon, but I expect it can run into difficulties where “bigger” is ambiguous. For example, is an older date in the past bigger (longer ago) or smaller (closer to Time 0) than a more recent date? Is Priority 1 bigger or smaller than Priority 2? Grade A bigger or smaller than Grade B? For that matter, who, other than geeks, thinks that “Zuschlag” is vastly bigger than “Abbott”? Not that I’m taking this personally, of course.

Answer 12

Remember that descending is for down. So, I would use the down arrow for descending. But, I always get confused by this anyway. I recommend that you use letters instead, like A-Z and Z-A instead of the arrows. Or, use them in conjunction with the arrows.