1

In my app, I've got grids like the following:

enter image description here

It is not apparent, but if you click on the column header in the first three columns, it sorts by that column, but if you do this on the other columns (with the colored bars), you get, instead, a popup help page for what that column means.

This inconsistency is bad, and leaves no good way to sort by that column.

I want clicking on the column header to sort, always, but provide a way to access help for the column AND make this visible, so the user knows it's there.

I considered adding a question mark icon next to the text, but this won't work in other situations, where I have no extra space in the columns:

enter image description here

So what would be a good way to enable context sensitive help in this situation?

Improve this question

2 Answers 2

Reset to default
2

Use two different icons and two separate clickable areas.

Let's break this down

You have two functions you want to provide: sorting, and "more info". Give these two functions their own buttons, each with their own icon.

Where do the hitboxes go?

You can make it clear where to click by using :hover and :focus states. Hover the mouse over the title or chevron, and the whole background will change color. Hover over the info icon, and the icon can change color while the background color goes back to the default shade. enter image description here

You might want to make the hover/focus state more obvious than in my mockup. You should avoid using color alone to indicate state, but this should get you going in the right direction.

Stick with convention

Since clicking on the column title to sort is a common interaction in all spreadsheet programs, I wouldn't deviate from that pattern.

Improve this answer
3
  • How would you do this in the situation I describe where space is very tight?
    – Joshua Frank
    Commented Dec 27, 2017 at 17:26
  • @JoshuaFrank Change the design to make room. If you must have both "sort" and "info" actions for every row, set that as a design constraint and rethink the current design. Consider allowing the table to scroll horizontally, or adjust the number of skill sets shown at once. Repeating "Skill Set" on each column could be considered redundant. You could also let those icons float above the text, and trim the title with an ellipsis.
    – elliottregan
    Commented Dec 27, 2017 at 17:43
  • I think this is probably the right way to go, although in practice these groupings are dictated by the application and may not be changeable. I will give it a try though. Thanks.
    – Joshua Frank
    Commented Dec 28, 2017 at 13:43
1

For clarity's sake, I think it's important to have a chevron in the header of each column that you can sort by ascending / descending. Clicking the chevron should control how the columns are sorted, as is expected in many web apps.

For additional information on a column's header, you ought to make the text itself clickable. Convey this by applying a hyperlink-like effect to the text.

Improve this answer

Your Answer

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

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