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.
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.
Sorttable: Triangle ▼ for ASC
Sorttable sorting example
DataTables: Triangle ▲ for ASC
DataTables sorting example
TableSort: Triangle ▲ for ASC
TableSort sorting example
NgTable: Triangle ▲ for ASC
Ng-Table (Angular JS table component) sorting example
macOS Sierra: Chevron ⌃ for ASC
Mac OSX Sierra file sorting
Windows 8: Chevron ⌃ for ASC
Windows 8 Explorer showing file sorting
Ubuntu : Triangle ▼ for ASC
Ubuntu files sorting
Ring stack toy real example of sorting
Triangle arrow seen as an incomplete arrow top change signification
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.
Triangle usage for table sorting like some datatables
Chevron usage for table sorting like in macOS and Windows 8
Diagonal arrow usage for table sorting
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.
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.