108

To represent "sort ascending" (a -> b -> c -> ...) , my first sense told me that, I should use ↓ to represent it. This is because if I lay my data

a
b
c

It seems like thing is moving naturally toward downwards.

However, for the table header under Windows, the thing I saw is, they are mostly using up arrow.

enter image description here

Hence, I was wondering, which symbol is more suitable? up arrow or down arrow?

From http://www.iconfinder.com/search/?q=ascending, I can see they mostly use up arrow.

But, from end user point of view, if I saw a up arrow at table header, I would thought the largest value (says z) nearest to the top table, and smallest value (says a) at the bottom of table.

2
  • 1
    Very similar to this question: ux.stackexchange.com/questions/2041/… Apr 4, 2013 at 0:59
  • i guess ux stack don't mind. Microsoft has IMHO decided to discuss the position of the A-letter in deference to determining the orientation of the whole alphabet. always thought so. but Cheok, alternatives may be more appropriate for human consumption than the MS/Apple table dishes out. Phew-yugh! A-letter at the head, head equivalent top; Z-letter at the tail, tail equivalent bottom. There we are ~> top to bottom: A-Z. I didn't think so. Have a nice day! Jun 24, 2015 at 1:48

9 Answers 9

40

as·cend (-snd)

v. as·cend·ed, as·cend·ing, as·cends v.intr.

  1. To go or move upward; rise. See Synonyms at rise.
  2. To slope upward.
  3. To rise from a lower level or station; advance: ascended from poverty to great wealth; ascend to the throne.
  4. To go back in time or upward in genealogical succession.

Hence, the Microsoft Windows version is right in this sense. Ascending should be upwards.

In the case of the alphabet, you have to think of it in this sense; A is the beginning of the alphabet and Z is the end. You increase as you move from beginning to end. Same as you do with numbers. 1 through infinity.

6
  • 3
    It is still not clear if the ascending sort symbol is a label (which should display current state) or a button (which should display the new state switched into by sorting).
    – Wilbert
    Apr 25, 2013 at 14:04
  • 24
    The OP has chosen to accept this answer, although it does not actually seem to answer the question. Yes, the sorting happens ascendingly (speaks for up-arrow), but the thusly-sorted items have to be read from top to bottom (speaking for a down-arrow), which is what creates the contradiction described in the question. Jun 15, 2015 at 18:48
  • 3
    This is not a good argument in my opinion. In fact, if anything this is a good counter argument. Yes the word ascend means upward, but in the list, the ascending is clearly happening from top to bottom, meaning this is actually not a good metaphor at all. Imo @SNag has it. It's not really an arrow indicating direction, it's a triangle indicating sort order.
    – devios1
    Jun 15, 2015 at 20:42
  • 2
    @O.R.Mapper but you read a table from top to bottom regardless of how it is sorted, so if the arrow is meant to indicate reading direction, then it should ALWAYS be the down arrow, regardless of sorting direction. This is why arrows are fundamentally a UX problem for sorting, because they conflict with your instinct to see them as a read direction vs a sort direction. Using localized (A-Z) or (Z-A) and (1-9) or (9-1) labels is far more clear. Jun 17, 2016 at 12:55
  • 2
    There are no objective arguments in favor of either direction because there can be different subjective interpretations of what the arrow represents. Hence I think most UX designers just follow what seems to be the most widely used convention, which as far as I've seen is up arrow for ascending.
    – Andy
    Nov 10, 2016 at 7:12
98

An up arrow (upward triangle) is literally smallest at the top, and largest at the bottom! Exactly like Ascending order!!

Upward triangle for ascending order

Addendum:

This ring-stack children's toy helps understand how ascending order came to be abstracted to an upward triangle, and descending order to a downward one.

Montessori Ring-Stack Toy

The early 'stacked' up-arrow is visible in the screenshot from Mac OS 8 (circa 1997) in devios1's answer.

7
  • 9
    Would you include this diagram explanation in your user interface? A good symbol speaks for itself, without need for annotation or explanation.
    – Brendon
    Apr 25, 2013 at 11:10
  • The understood meaning of "point" is so ingrained that the also obvious meaning of "growing" has been completely obscured. But thank you for making it so flagrantly obvious that this should have been the interpretation all along! Kudos!
    – user67695
    Apr 12, 2016 at 19:44
  • 1
    This is very interesting, do you have citations or a link to background reading that this was the original intention of this symbol? Also, for alphabetic data, I don't think 'a' is 'smaller' than 'z', it's just an arbitrary ordering.
    – EoghanM
    Oct 11, 2016 at 9:00
  • 1
    nice diagrams and metaphor! Mar 14, 2018 at 0:27
  • 1
    I am tempted to miniaturize and use the children's stacking blocks as icons in place of the triangles.
    – Capricorn1
    May 29, 2019 at 13:58
15

I think the confusion exists because 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.

Is the column that is clicked on for sorting a button (where we would expect the 'future' sorting criterion)? Or is it rather a label (where we would expect the 'current' sorting criterion) with the additional functionality that it can be clicked to toggle sorting criteria?

3
  • 8
    I agree. This is the same classic confusion as with switches that have "ON/OFF" printed on them -- when the switch says "ON", is it currently ON ('ON' being an adjective in this case), or will it go ON when the button is pushed ('ON' being a verb in this case)? This confusion is eliminated when the symbol is outside the button, rather than on it. This switch is very clear, whereas this one is ambiguous.
    – SNag
    Apr 25, 2013 at 14:13
  • 1
    But according to the question, both up and down arrows can be interpreted as "ascending", while in both cases indicating the criterion currently used for sorting. Jun 15, 2015 at 18:56
  • nice diagrams and metaphor! Whoops wrong answer. That was for the above :) Mar 14, 2018 at 0:26
13

I agree with @SNag on this one in that the sort indicator is not, in actuality, an arrow at all, but rather a visual indicator of the way the list is sorted.

To offer further support of this, I present a screenshot from Mac OS 8 (circa 1997) that uses a similar metaphor, but one that is clearly and intentionally differentiated from an arrow:

enter image description here

I find the analogy to less-than (<) and greater-than (>) to be more appropriate than that of an arrow.

In mathematics we write 3 < 6 to represent 3 is less than 6. As I'm sure we all remember the mnemonic device that the small end of the symbol points to the smaller value. Of course if the values were arranged vertically, the smaller end would be at the top:

enter image description here

As such, one might consider using a less-than symbol or chevron turned sideways as a more intuitively understandable symbol to represent the order. It works intuitively for text (abc < xyz), numbers (3 < 6), and dates (today > yesterday).

So in short, try not thinking of it as an arrow pointing in a direction and think of it as a symbol representing order, just like less-than and greater-than.

Update: It turns out, coincidentally enough, that the latest version of Mac OS X actually does use a vertical chevron just like I had suggested. I did not realize this when I originally posted the idea.

enter image description here

So there you have it. There is some precedent after all.

3
  • I don't understand it. In you first screenshot (Mac OS 8), the last letters of the alphabet (the letter P) is at the top of the list (where the point of the triangle is). In you second screenshot (Mac OS X), the first letter of the alphabet (A) is at the top of the list (with the same sorting) Dec 16, 2021 at 11:22
  • 1
    @robertspierre it's the Name column that is sorted (APPLE-LO.GIF, ESCAPEFR.HTM, HERRDERR, etc.), and not the Kind column. May 16, 2023 at 16:57
  • @robertspierre In Mac OS 8, the sort direction button was a separate button that lived above the vertical scroll bar. It wasn't incorporated into the column header until later.
    – devios1
    May 23, 2023 at 13:21
8

I would say neither the up or down arrow are suitable for this. For people reading from left to right, it is slightly more difficult to 'read' a vertically-orientated arrow. There is also the problem of the arrow pointing in direction of the data, which gives the impression of the down arrow meaning ascending. Here are some alternatives which leave no (or less) ambiguity:

  • slanted arrows ('↗' for ascending and '↘' for descending);
  • right angle triangle ('◢' for ascending' and '◣' for descending);
  • textual description ('(A-Z)' for ascending and '(Z-A)' for descending).

(Apologies for the Unicode.)

7
  • 2
    Actually, the right angled triangles, as well as 'A-Z' or 'Z-A', can be confused to mean the opposite by people who read from right to left.
    – SNag
    Apr 25, 2013 at 14:27
  • @SNag I'm not sure what reading right-to-left is actually like, but I was assuming that reflecting the symbols vertically would have similar interpretations for RTL readers. Perhaps there's somebody on here who reads RTL and can enlighten us(?)
    – Brendon
    Apr 25, 2013 at 14:45
  • 2
    A-Z and Z-A makes a lot of assumptions actually. (1) That the user uses an alphabet at all. (2) That they use the Latin one. (3) That they don't have other letters before the A or after the Z.
    – Hakanai
    Aug 14, 2014 at 0:06
  • 6
    ◢ looks like the arrowhead in ↘, yet shall mean the opposite.
    – Crissov
    Jun 15, 2015 at 20:24
  • 1
    I like the idea of right-angle triangles but I'd prefer ◣ for ascending and ◤ for descending. Is that intuitive to others? It is to me because I imagine it representing what the sorted, left-aligned text would look like (a, aa, aaa).
    – Golly
    Aug 28, 2015 at 1:12
8

In my opinion, the fact that it is an arrow, a triangle or a chevron is more up to design. The important fact it is the symbol is the same for all pages and not used for another usage.

I personnaly find interesting text + symbol, like symbols

2
  • 3
    This is the only unambiguous presentation.
    – user67695
    Apr 12, 2016 at 19:42
  • 6
    Unambiguous =/> user friendly.
    – devios1
    Apr 12, 2016 at 21:27
5

It would be much simpler to understand if you consider "Where will the first row/element appear?". If it is on the top, the enter image description here arrow represents that well.

1
  • 9
    Except that the "first" row is at the top even in descending order.
    – Hakanai
    Aug 14, 2014 at 0:04
4

There is an easy way to remember which way the icon should go for either case. Ascending starts with an "A" and the icon for ascending is shaped like the "A". Yes, very "pre-K" but I am a visual person :)

1

For alphabetic data, I think it has always been a mistake to apply the idea of 'ascending' and 'descending', after all the alphabet is just an arbitrary ordering of the letters.

For numeric or datetime data, switching between sorting ascending and descending makes a lot more sense and is actually useful.

Why do people sort a table or list based on the alphabet? The answer is usually to aid the user as they laboriously scroll and scan through the list looking for the item that they are interested in. Reverse sorting alphabetically does not make this process any easier.

If you reverse sort Z-A, why would you want the 'Z' items at top? Alternative solutions such as search and filter are much more useful.

So my answer would be not to use an arrow, disable the toggle between A-Z/Z-A on that column, and instead just always sort A-Z any time that column heading is clicked.

1
  • 3
    Although, the ordering of the letters is the alphabet is arbitrary, the order exists nonetheless. Every person that has learned the alphabet knows this order. A is followed by B In the same way as 1 is followed by 2. Denying the existence of this order doesn't help to answer the question of this thread.
    – Davyd Geyl
    Apr 27, 2022 at 1:11

Not the answer you're looking for? Browse other questions tagged or ask your own question.