7

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.

  • 1
    A great example for the confusion around these icons can be seen in this Font Awesome issue. They ended up adding every possible combinations, but which one should we use? Can you figure out the meaning of each icon? – totymedli May 17 '19 at 21:46
13

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.

| improve this answer | |
3

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

| improve this answer | |
  • What Marcos said, plus applying a rollover effect on the column header. – ThomPete Oct 18 '10 at 18:10
  • I never remember if "up" is ascending or descending (even in software I wrote) so I always just look at first two items to see the order - and that's why I like Michael Zuschlag's answer – Nir Oct 19 '10 at 10:48
2

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. =/

| improve this answer | |
1

Another possiblity is to use small ascending and descending barcharts.

For example ascending sort

| improve this answer | |
  • Welcome to the site, @Naveen. The OP's question asks specifically about a date column. Can you provide evidence that this solution works for dates? – Graham Herrli Nov 25 '15 at 17:55
  • That is really ambiguous, especially if you do it for alphabetical order. Is "A" the small or "Z"? It becomes worse when you have to invert it: should we flip both icons or just one of them? Which one? The arrow or the bars? – totymedli May 17 '19 at 21:43

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.