Skip to content

UX Mission: Complex Column Sorting Icons

Mission: To communicate to the user that a table has a complex sort.

Data Example:

Sort order: This data is sorted first by State, then by City, then by Age.

So what icons can I put in the headers to help communicate the sort?

Google images shows alot of different icons for sort. The simplest looks like this:

It’s simple, it declares the primary sort is that column and it goes … down?  What does down mean?  Is it high number to low number? Is it alphabetical or reverse alphabetical? Is it earliest date versus latest date? Also, what would UP mean?  The opposite, I suppose, but that doesn’t really mean anything based on the stated questions. I think the arrow by itself is simple, but not very communicative of what is happening.

Hmm, the plot thickens.

  • Dates
  • Numbers
  • Strings
  • Complex columns

Well, for strings, this is helpful:

For numbers this looks good:

That seems to be an improvement, doesn’t it? Big to small. Or Small to big. It seems better to keep the arrow always pointing down. Pointing up is just confusing.

So if I used the AZ for letters and the big to small for strings, I am still left a big soft on dates. Neither one indicates recency. What does it look like to be sorted earliest to latest or the reverse?

I could do something like this:

Hmm, that’s pretty subtle. The forward and back arrow are tiny. Way too small to notice for a normal person.

Using just the arrow is kinda explanatory, but could be misunderstood pretty easily.

Maybe something like this:

I definitely feel that an up arrow is confusing accompanied with any other indicators. My gut tells me that the arrow down says “Im sorting this column” and the indicator next to it says the details. Like “I am sorting A-Z from the top down.”

At this point, I would suggest some basic testing. Show the icons to people, get their input. For the sake of getting through this, let’s assume the last one is acceptable.

Unfortunately, I am still stuck with the 3 levels of sorting. This is a third piece of data to add to a single icon.

  1. I am sorting this column
  2. Here is how I’m sorting
  3. I am actually the secondary, not the primary sort

How does one do that?

I could do something like this for strings:

So each bar indicates the sort priority. This is alot to take in and interpret.

What if I put a number in the icon?

It’s pretty small, but I think it communicates a little better than just the bars.

I am struck by the idea that maybe I don’t need the arrow at all. Wouldn’t any icon with a direction achieve the same thing?

The problem with this is the Z-A and A-Z do not accommodate an extra indicator of priority.

Maybe, I should revisit the idea that the big to small is not good enough for dates and strings. Which one of the following means alphabetical?

Side note: I am figuring this out while I blog. I didn’t figure this out in advance. I am trying partially to show what it is like to be a designer. The word “Maybe” comes up alot.

I just did a small scale poll (Sample = 5) and someone said something important. These icons have meaning. The first one is ASCENDING and the right one is DESCENDING. So let’s map out what that means.

Strings
Ascending = A-Z therefore the one on the right is ASC

Numbers
Ascending = 1-100 therefore the one on the right is ASC

Dates
Ascending = Today to the future therefore the one on the right is ASC

This feels like a breakthrough. I only need these two icons. I shouldn’t try to indicate the data type. The user can see the data type in the column itself. I just need to follow the natural rules of ascending and descending data.

Now, I go back to that arrow. It’s a nice way to indicate primary versus all the secondary sorts. I don’t think the number is useful unless there actually is a complex sort happening.

This is starting to make sense to me. Fewer icons. Streamlined communication.

  1. The arrow indicates primary. Small to big bars indicate the natural ASC or DSC of the data
  2. If secondary or tertiary sort, the arrow is removed and a badge is added. The ASC and DSC bars are the same, but the badge indicated the priority.
  3. Colors can be muted to gray to help if needed.

I feel pretty good about this outcome. Hopefully, blogging my process helps you with your own.

Side note 2: I was just looking at AG-GRID. They landed on the different icons per data type and ignored multiple sort priorities. I am a fan of their approach for most use cases.

Published inUncategorized

One Comment

  1. Daniel Lipka Daniel Lipka

    Just my thought, but my focus would be more on how to do the sorts (and multiple layers of sorts). If that process is easy to get what I want, I just need some icon to remind me what column(s) have been sorted. I can look with my eyes in 1 second and see the order it is in (and if it is in the wrong order, I want a quick way of changing it). Is the time is takes to figure out the icon longer than just clicking on in once or twice to get what you want (are you trying to solve a problem that doesn’t exist). Of course, I am looking at this through the prism of my own data tables.

    An another note, the arrows and descending horizontal bars next to each other, just seem repetitive. I looked at Excel (which I use often) and there is no arrow or anything after a sort. I guess it would be nice if there was a small arrow/bars at the top of the column to sort (if selected, maybe a “1” or something appears next to it, to indicate this sort has been activated.)

    How far are we from having Alexa do these things? “Alexa, sort everything by column 3 and than column 2. Filter out everything that a blank for column 4. Highlight any account that made a sale within 3 months”. The commands would be pretty straight forward, we just offices were people can talk out loud at any time.

Leave a Reply