2

I'm working on an application and utilizing a blue color to indicate interaction. Links are indicated with the blue color and an underline, the buttons have a blue background, tooltip icons have a blue background, etc.

My question is: How do I apply color to indicate interactivity to table headers in a table with a mix of sortable(interactive) and unsortable(not interactive) columns?

I have thought of three approaches to this:

Keep the sortable headers blue and the unsortable black. Drawback: Column headers are traditionally the same color so having some blue and some black breaks from the norm. This would mostly look weird I think. Here's option 1

Keep the headers all black. Drawback: The expectation is set with the blue color as interactive, so leaving the headers all black could leave users thinking that they can't sort by the header. Here's option 2

Keep the headers all blue. Drawback: Completely misleading and seems like it could be the most confusing so I'm not even really considering this. Here's option 3

Improve this question
1
  • "Steal like an artist" — just look how the the other "big guys" do it. You can also take a look at the UI guide on tables. Then collect the usage data and, if you need, improve your solution.
    – Alexey Kolchenko
    Mar 18, 2020 at 19:15

1 Answer 1

Reset to default
2

I would suggest introducing an "unsorted" icon that you could apply to the columns that are sortable. So any column that is sortable will have this grayed out "unsorted" icon, sorted columns will either have the up or down arrow, and unsortable columns will have nothing.

DataTables does this out of the box, and I think it's a great way to indicate where the sorting action is available.

Sortable columns

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.