3

Formerly, grids showed which column was sorted, by using a glyph (▼) in the column heading.

Old-school glyph in a sorted grid column

What I know

In Windows 10's File Explorer, this glyph is visually less prominent and has moved to the upper edge:

Windows 10 glyph in a sorted File Explorer column

I understand the principles of Modernist UI: strip away everything that isn't essential. In the case of Internet Explorer, users will know that they sorted a column, and whether it's in increasing or decreasing sort direction, so the glyph can be de-emphasized.

Why what I know isn't working

I have a design problem where multiple factors affect the sort order. I'd like to indicate that "THIS has become the sorted column" in a visible way. It is not important to me to show the direction of the sort. In my opinion (not yet tested) that a glyph in the Windows 10 style is not sufficiently prominent for users to notice.

My question

  • If you know of a standard—from any operating system—for prominently identifying the sorted column, please let me know.
Improve this question
4
  • 1
    There isn't really a standard because each UX problem is unique. With this in mind, making something prominent is of little challenge. Could you elaborate on "I have a design problem where multiple factors affect the sort order."? The sort is often initiated by the user, is this not the case with your system?
    – Izhaki
    Oct 21, 2015 at 0:07
  • 1
    Wow. I've been using Windows and Office since the 90's and I don't think I've ever noticed the glyph. It's just so subtle!
    – Julia Rezsnyak
    Oct 21, 2015 at 4:16
  • 1
    Windows 10's style doesn't seem that clear to me. Not prominent, as you said, and it looks more like something to expand or scroll a list than a sort order indicator. Of course, it is Windows, so people will get used to it...
    – user31143
    Oct 21, 2015 at 6:05
  • @Izhaki There is additional interaction. The legacy design has a drop-down list of filters; several of these filters also sort the items in the table. (Ouch!) Since it is counter-intuitive (to me) that filtering would abandon one sort order and start sorting another, I'd call that a complication. In three cases, the filter sorts by a value that isn't even in the grid! And in case there's any doubt, legacy means "inherited by those who went before me and too expensive to fix at this time." Obviously one drop-down that sometimes two functions is a problem. It cannot be fixed this year.
    – JeromeR
    Oct 21, 2015 at 20:31

2 Answers 2

Reset to default
6

You really just need to create contrast between the sorted column and the non-sorted columns. I would keep the carrot, as it is a symbol many people are used to seeing. You may consider adding a light background color or updating the text in the header to bold. I'd only use one of these tools though, you don't typically need to put a disproportionate emphasis on the column, you just need to distinguish it from the others.

Improve this answer
4

You can try lightly shading just the header when it's sorted in addition to the caret. I'd personally find highlighting the whole column to be fairly distracting, particularly when you have multiple tables.

http://github.hubspot.com/sortable/ http://github.hubspot.com/sortable/

I would make sure to make the color contrast well for the roughly 8.5% of users that are color blind.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.