Mission: To communicate to the user that a table has a complex sort.
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.
- 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.
- I am sorting this column
- Here is how I’m sorting
- 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.
Ascending = A-Z therefore the one on the right is ASC
Ascending = 1-100 therefore the one on the right is ASC
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.
- The arrow indicates primary. Small to big bars indicate the natural ASC or DSC of the data
- 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.
- 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.