Sorting arrow confusion in data tables by@toastylog

Sorting arrow confusion in data tables

October 2nd 2017 26,327 reads
Read on Terminal Reader
react to story with heart
react to story with light
react to story with boat
react to story with money
image
Arnaud Jaegers HackerNoon profile picture

Arnaud Jaegers

Understanding and choosing column sorting symbol representing ASC/DESC

At work we had a discussion about table sorting design used in data tables in our app. We didn’t agree about triangle symbol correct orientation representing ascendant sorting in a column (▲ or ▼ ?). It wasn’t a designer against developers confrontation but a good user experience case of how symbols are interpreted.

Most of the case in Webdesign, many symbols are used to show users which sorting is applied in a column:

image

Arrow sorting Twitter poll

Considering the foregoing, I launched a little poll on Twitter which results show concretely that column sorting symbol understanding depends on people experience. I needed to find the best way to resolve this issue… 🤔 Thus, I decided to check how other tools are designed to make sorting arrow clear for the users.

Sorting design used in popular dataTables and OS

Sorttable: Triangle ▼ for ASC

image

Sorttable sorting example

DataTables: Triangle ▲ for ASC

image

DataTables sorting example

TableSort: Triangle ▲ for ASC

image

TableSort sorting example

NgTable: Triangle ▲ for ASC

image

Ng-Table (Angular JS table component) sorting example

Having a look at how sorting column symbol looks like in popular OS

macOS Sierra: Chevron for ASC

image

Mac OSX Sierra file sorting

Windows 8: Chevron for ASC

image

Windows 8 Explorer showing file sorting

Ubuntu : Triangle ▼ for ASC

image

Ubuntu files sorting

image

Photo by Smart on Unsplash

Design is important to exclude misunderstanding

image

Ring stack toy real example of sorting

“Triangle symbol” understanding depends on how you view it:

  • Upward triangle ▲ is literally smallest at the top and largest at bottom like ascending order. You view the triangle strictly as a triangle, without any interpretation. This could be an abstracted representation of a ring-stack children’s toy.
  • Triangle ▲ could be interpreted as an incomplete arrow. If you put a line below ⬆︎, you see an up arrow usually interpreted as descending order.

image

Triangle arrow seen as an incomplete arrow top change signification

Which symbol to choose for sorting state?

As you figured out, choice is plenty and difficult. Here are some representations of various symbols to help you and compare them in real usage.

image

Triangle usage for table sorting like some datatables

image

Chevron usage for table sorting like in macOS and Windows 8

image

Diagonal arrow usage for table sorting

image

Triangle up and down representing both states or ordering

The fastest and most understandable is probably the diagonal arrow ↗↘︎ ➘︎➚ ⬊⬈ but in design it is honestly not the prettiest. The up and down triangle is probably the best compromise between design and understanding.

image

Some symbols used for column sorting in tables

In Conclusion, I think you should use a simple symbol that is frequently used like chevron, triangles or arrows for your design according to your target. Even more important, keep in mind that only designers or some people might have a critical point of view regarding this question. Most people do not pay attention whether it’s a triangle ▲, a pyramid , a menhir, a rocket 🚀 or whatever else. The key fact is to have ASC and DESC symbol visually opposite using horizontal mirroring. That’s a UX question, not a design issue.


**Credits**Thanks to my wife for her logic that a triangle could be interpreted as an incomplete arrow and Thomas Jacobsen for advice and proofreading.

react to story with heart
react to story with light
react to story with boat
react to story with money
L O A D I N G
. . . comments & more!