When displaying tabular data, is the usage of an arrow, an universal symbol? (To symbolize if we're ordering in ascendant or descending order.)

I'm trying to figure out, if my developer tool, should assume everyone will want an arrow, or if this should be configurable. (There might be a use case I'm not remembering or maybe in some other region, they use other symbols, or inverted order... or maybe there are better ways to convey ordering.)

enter image description here

  • 1
    Note that the icon you are talking about isn't an arrow - it's a symbol showing that the largest amount is at the top of the sorting, the icon has it's largest part on the top. This mixup of what the icon really represents is one of the things that leads to confusion. Some attempts has been made to redo this icon to make it look less like an arrow - but none has so far become standard. – Henrik Ekblom Jun 18 '13 at 14:02

UI patterns suggests that the arrows are established conventions:

Each column headline/label is a link. When the label is clicked, the rows in the table are ordered ascending by the specific column’s values. If the same label is clicked again, the order is reversed: the rows in the table are now ordered descending by the specific column’s values.

When the rows of a table has been sorted by a specific column, an arrow is often showed beside the column’s label indicating the direction the rows has been sorted in. It is also often seen that the column’s label is presented in another font color or font weight (bold / regular).

another way is dropdown menu like on Ebay:


download bmml source – Wireframes created with Balsamiq Mockups

| improve this answer | |
  • 1
    The arrow (or triangle) is also a visual representation of the values and how they are sorted. Note that a down pointing triangle is widest (largest) at the top and narrowest (smallest) at the bottom, which is also how the row content would be ordered (i.e. largest number to smallest number) – wootcat Jun 14 '13 at 14:09
  • True, but, is this really universal. People in China, Right-to-left, India, etc, use it? Is this the better option for them? – John Assymptoth Jun 14 '13 at 14:12
  • @wootcat - now this is confusing. Ascending means smallest first. – Deer Hunter Jun 14 '13 at 14:20
  • 5
    I will make a big assumption here, but I'd say the arrow is just an indication that this column is available for sorting, and the actual ordering of the sort isn't what people are thinking of initially - they just hit the header and it sorts it ascending / descending. If that sort is the wrong way round then they'll just hit the column header again to reverse the sort. I don't think people spend much time thinking 'is it going to sort ascending or descending?' they just click it and then click again if it's not sorted in the order they need. – JonW Jun 14 '13 at 14:27
  • Yes, the arrows are the simple way to show the user that it is possible to sort the results, and the "Sort By:" dropdown, though harder to implement, will give the user clear explanation. – Igor-G Jun 14 '13 at 14:34

Arrows are not intuitive but discoverable (a down arrow may be confusing - see comments to Igor-G's answer). If sorting takes only a wink, the user can find out the order suiting her best in only two clicks.

You can also try (for alphabetic languages, at least) the intuitive A->Z vs. Z->A, and, mostly universally, 0->9 vs. 9->0.

| improve this answer | |

When wondering if something is globally understood, my first instinct is to look to interfaces that people are used to, globally, e.g. Windows. There, they do use arrows, but intriguingly enough they aren't placed next to items (where they draw too much attention to themselves and you might not know which row they represent) but above them. See the "Startup impact" sorting in the screenshot below:

Task manager in Windows 8, sorted by Startup impact

But Windows also offers two alternatives for Explorer, showing that it might not be the first place people look inside applications, at least. They also offer Sort (and View) options on right-click, though most users would not expect custom right-click menus within their web browser. And they have a button/drop-down dedicated to sort options:

Windows 8 Explorer sort by dropdown open

Note the icon use does have arrows, but it has two arrows -- the arrow next to text indicates "drop down" while the two-way arrow above text, next to a grid, indicates "sorting".

So I would say watch the placement, but arrows are definitely universal for "direction" and up-down arrows indicate more than anything "changing directions" when placed next to the word "sort". In the end, my personal preference is for both: arrows above the table row combined with a sort-by dropdown above the table, with double-arrow before "Sort by" text and a drop-down following. The drop-down would have to be non-standard, perhaps a JavaScript-controlled multiple select, alternatively, I would hide asc/desc and provide a default sort for each column. If they want a non-standard (reversed) sort, they could just pick the selected drop-down item again. Wait, that means it definitely wouldn't work as a standard drop-down, since by default you can't pick the selected item twice. Perhaps a "reverse sort" button might also be useful -- or a "Sort" button to submit the drop-down, allowing for multiple hits to change directions.

I've left this answer open as a community wiki in case anyone wishes to edit it, perhaps providing better examples.

| improve this answer | |

I'm trying to figure out, if my developer tool, should assume everyone will want an arrow, or if this should be configurable.

If you're allowing for taste, you should keep it configurable. Arrows are used very often, but sometimes you see three lines with increasing or decreasing length to symbolize sort order.

Since you're building a web-app, leave the final icon to the CSS styling, e.g.

<th class="ordered asc"><a href="...?order_by=price,desc">Price</a></th>

This gives you any flexibility you may want.

| improve this answer | |

three lines with increasing or decreasing length -> can you show me an example? I don't remember seeing that pattern. – John Assymptoth

This is it:

enter image description here

But it is interesting how this pattern is perceived in right-to-left reading countries?

| improve this answer | |
  • The icons I was mentioning have horizontal lines. – nibra Jun 15 '13 at 0:23

Two answers:

1 Arrow heads (triangles) mean sorting when they are set inside column headers. When set at the left of a list mean display or hide sub-items. In multimedia controls then mean "play" or "fast forward". It's a common idiom.

2 Different users might have different preferences for the arrows looks.
Like for example corporate colors, or general page coloring. I'd provide a neutral arrow and allow for the possibility of replacing with anything else. Like for example a much bigger one for people who can't see well.

| improve this answer | |

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.