I want to let the user toggle a column heading to sort a grid by a date field. How can I make ASC/DSC intuitive?

Question

I want to let the user toggle a column heading to sort a grid by a date field.

How can I make the ascending/descending dichotomy intuitive?

---

EDIT: I was looking for date-column specific solutions.

Answer 1

The convention is to have an upward arrow for ascending lists and a downward arrow for descending lists. It doesn’t work. In usability testing I’ve done, users are evenly split on whether my name ends up at the top or bottom of the list no matter which arrow you show.

Part of the problem is there is just something cognitively weird about an upward arrow meaning the list increases when you go downward in the list. However, I tried left (ascending/forwards) and right (descending/backwards) arrows, and still had unacceptable performance.

The only thing I found that works is a generic alphanumeric representation of the bounds. For example:

Name (A--Z)

File Size (1--9)

Date (1--12)

I found that it’s not necessary for the bounds to reflect the true minimum and maximum values in the list.

It’s up to you if you think it’s worth the clutter. Users I talked to say they look at the items in the list to see the order, and ignore the symbols in the header. Maybe that’s good enough for your situation.

Answer 2

The preferred way to do this seems to be with an "up" triangle (▲) for ascending and a "down" triangle for descending (▼).

Answer 3

Sorry for posting this as an answer, I am not sure if this is actually an answer. But I can't comment yet, anyway.

I see two different problems here. First, whether the ascending order should be represented by a triangle pointing up or down (or similar icons). Second, whether this icon represents the current (now) or the future state (after click).

As for the first problem, as a Windows user (and maybe we should see the OS or other widely used user interfaces convention of most of our target users to decide), my intuition says arrow up for ascending (a>>z, 1>>9), even though the results are shown top-down. But there is no study/evidence I can show here.

For the second problem, I've seem @Wilbert answering on this thread, with the following conclusion:

(...) it is not clear if the column header symbol shows the criterion that is currently used for sorting, or acts like a button that will sort according to the symbol when clicked.

Well, I do agree with him. So I was wondering two situations that might make more sense to me:

1. We use the sort symbol only in the column in which the sort is being applied, and representing the current sorting; or
2. We use the sort symbol on all columns, but representing the future state after clicked.

The first options seems more intuitive for me, as the column chosen for sorting, and the sort ordering are explicit for the user. By the other hand, the user has no explicit means to know that clicking in a column header will sort the results (although this is quite a common sense). So this is the option I would apply.

The second is just the opposite: while it becomes more explicit to the user that clicking the columns will sort the results, it is not clear which is the current sorting criteria (the sorting column and the sorting direction).

I would love to hear that there is a convention widely used, but as far as I could find until now, there is not. =/

Answer 4

Another possiblity is to use small ascending and descending barcharts.

For example