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.
  • 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 '15 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 '15 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 '15 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 '15 at 20:31
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, privacy policy and cookie policy

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