I had a great response to my 3-Question Usability Quiz – thanks for everyone who participated and who commented. I asked people (perhaps unnecessarily) not to comment too much on the questions in the previous thread, so feel free to do so now.
Results (from those who actually answered all three questions):
|Left, A, A||12|
|Right, B, A||5|
|Left, B, A||2|
|Right, A, A||1|
|Left, B, B||1|
So our first conclusion might be that there is certainly disagreement on how this should work :-) This could be a factor of the particular UI chosen or of column sorting in general. Several comments about “I just click until I get what I want” suggest the latter is certainly a factor.
Several people made the important point that using triangles is always going to be confusing – because some people will think of the triangle as an arrow, so that “A” is where the base is and “Z” is where the tip is, whereas other people will think of it as a widening, so “A” is the small tip and “Z”, being bigger, is the widest part. This is interesting, because most UIs of this sort do use triangles. The solution seems to me to be to use explicit arrows, such as ↑ (↑) and ↓ (↓). (Pirates must like those entities…)
Having two arrows means that there’s always a UI and affordance for sorting, but it is almost certainly an example of the UI principle where giving people two ways to do something actually loses them time, because they have to choose between them. It also implies that it’s equally likely that the user will want to sort in either direction, which is usually not the case – A-at-the-top is more commonly wanted by far.
However, keeping the affordance is good. So here’s a mockup of my suggested UI for this sort of sorting:
|Animal ↓||Family ↓||Price ↓|
There are arrows on all columns on which the table can be sorted, to show this fact. Clicking the arrow sorts the column from the smallest item at the top to the largest at the bottom – I think a downward-pointing arrow is reasonably unambiguously correct for this. There is a highlight on the arrow on the column by which the table is currently sorted, to differentiate it from the rest. Clicking this arrow again reverses the sort (this is a more advanced feature, which people can discover).
And what was the point of all this? The UI I used was from BookEx, a book-selling web app that I’ve just become co-maintainer of because I’ve put up a private installation for some people. I didn’t think the UI was very good, but I wanted to find out why it seemed wrong to me. Thanks for helping me find out :-)
Update: After a little more thought, there are some other options for the symbols. For example, by analogy with “twisties”, you could have the “unsorted” arrow be →, converting to a downward arrow when clicked. Or, you could have the sorted arrow be ⇓ to differentiate it further. One would need to work within the HTML 4 Entity List, of course.
Would the arrow reverse if you click it again to reverse the sort? If so, there is the potential for confusion on whether it’s a state-keeping mechanism (this column is currently sorted in this direction) versus an action mechanism (click to sort the column this way). You’re trying to avoid that by the rectangle around it. I would (a) prefer to make this more obvious (I can see this is a mockup, but I would argue you need more than a 1pixel border on the image to make this point) and (b) make sure there is NEVER a situation where there is no sort selected anywhere, because that’d mean there would be no highlight anywhere, and hence confusion would ensue once more.
If you don’t reverse the arrow then you still don’t have clear UI, because you can’t tell from the look of the arrow what it is going to do (not without thinking, anyway).
I think it might actually be more intuitive and fluent to allow dragging elements in the list up and down to do sorting, though then you get a problem as to whether this takes the element you’re dragging into account (if I drag an element with an A to the top, does that mean sort A->Z (A at the top) or does dragging anything to the top always mean sort Z->A (this is what I think would be intuitive, but UI in dragging elements as opposed to ‘sliding’ the list will confuse people))
Yes. the arrow would reverse if you clicked to reverse the sort. It’s a current state indicator, rather than a future state indicator. That’s why it doesn’t look like a button.
I agree you want to avoid the situation where there’s no sort, but I don’t see how it would cause confusion. You would just have a lot of little grey arrows.
Are you really suggesting that we make people sort the list manually by dragging elements around? What if it’s a buglist? You’d be there all day…
heh. Didn’t read this before I commented in your Quiz thread. But I agree with your conclusions, particularly your final mockup.
Hey! I thought those looked familiar.
I usually just make the column titles clickable to change the sorting. I don’t really like having the arrows on every column; the difference between arrows is just too subtle. Plus, clicking on the title gives you a larger target. You could use just one arrow to indicate the current state.
Oh no; you’re going to hate this, but when I saw that arrow pointing downwards, I thought it was going to list Z->A. To me, the big thing it looks like is “descending”. An arrow downwards looks like “descending” while an arrow upwards looks like “ascending”. And that was immediate reaction. Something like this:
“Oh, good, he’s going to use arrows, that should make it clea-oh no!”
I don’t think those arrows add help to clear up the possible confusion…
Like others have mentioned – a downward pointing arrow can both be “a descend” and the “a pointer of direction for the sorted order”…
I vaguely remember seeing UI like |aA→zZ|, |zZ→aA| – but i can’t remember what the symbol was for the unsorted scenario…
Another idea i remember seeing before was to have icons with accending blocks like
Ascending : |▁▅█|
But of course these would probably be misleading in a RTL locale
The people actually aren’t required to guess anything.
Use tooltips :P.
The most important is that the user understands your UI.
A F1 car placed around would help to keep direction sense?
Gerv: no, I was definitely not suggesting the user sort the list manually. Perhaps I was not clear.
The idea I had was that a dragging motion over the list should sort it depending on the direction in which you drag. This seems like something that would, after figuring out the list affords this, be a lot more intuitive, as well as saving you the step of moving towards the header and clicking it. It’s an unpolished idea, and you get into trouble with selecting as well as the “am I dragging ‘over’ the list or an element” issue I described above, but I think it might be worth pursuing if you can solve those issues.
sskroeder: But I think that we can fall back on the expectation that if there is just one arrow, people will expect it to do the “usual” sort.
There’s no perfect way of untangling the fact that what people call an “ascending” sort goes down the page rather than up. All we can do is make the situation confusing for fewer people.
(Thought: I think that definitely means avoiding using “ascending”/”descending” terminology.)
Gijs: ah, I see. I’m not sure how discoverable that would be, particularly as no-one else does it right now!
One reason I don’t like those triangles for sorting is that they’re a tiny target to click with a mouse. I’d suggest using something like “A↓” or “A↴” instead of just a plain down arrow. Besides making it more obvious which way the list’s sorted, it’d also make the button bigger.
Ant: if size is a problem, we can add margins. I’m not sure your icons make it more obvious – does A↓ mean “Go from A downwards” or “Put A at the bottom”?
The question of what constitutes the most common sort order is a complicated one, and very much depends on not just the data type of the column, but also the particular semantics attached to the specific data that are in that column. Suppose, for instance, that you have dates. Are those historical dates in a chronology? Then an ascending/forward sort would normally mean the longest-ago date is first, and the most recent last. On the other hand, if the dates in question are from the top Received: headers on a table full of email messages, then normally you’re going to sort them in order of ascending _age_, i.e., most recent at top. Using a word like “ascending”, or an arrow pointing up or down, seems to me like it will potentially lead to even more confusion than the triangle.
Similar situations exist for numbers, and then there are strings, which sometimes have very special semantics such that an asciibetical sort (even if done case-insensitively) would be totally wrong. Library call numbers are a fantastic example of this, or “status” type fields where you want to sort the strings in a sort of chronological or logical order based on the relationships between what the different possible values mean, e.g., you want PENDING to sort first then CURRENT then EXPIRED, or whatever. (These last could be implemented as enumerated types, but often they are implemented as strings.)
All told, I am convinced that the default or primary sort order for any given column should depend on the meaning attached to the information in that column. Which, with the arrows, puts you in the awkward position of trying to decide whether the arrow-pointing-down always corresponds to the default sort order, or whether it always corresponds to what would traditionally be called an ascending sort (or, as another poster suggests, just the reverse). My gut instinct says forget about the arrows and make the column title clickable to sort by that column or, if it’s already sorted by that column, reverse the sort order.
I’d entirely agree that column headers should be clickable too, but I think there needs to be UI to show which columns are sortable and which are not, which column the table is currently sorted by, and to show differences between different types of sort. And that means arrows, or something like them.
Think my preference would be:
* Sortable column headings clickable (and underlined/coloured to indicate this, as per hyperlinks in browsers)
* Non-sortable column headings not clickable
* Arrow appears only for the column which is currently selected for sorting. Downward indicates the “usual” ordering in all cases, upward indicates the reverse ordering. Arrow does not resemble a button.
* Clicking the already selected column heading a second time toggles the sort direction (in that case, clicking the arrow is also permissible), and the arrow changes to reflect this.
It just came to me — several months after your article was first posted.
What about an arrow that looks like a stylized ‘A’, very narrow, with the crossbar very near the tip. Then every Latin-alphabet reader gets a big hint that rightside-up stylized ‘A’ means increasing sort and upside-down stylized ‘A’ means decreasing sort.