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.