3

I want to combine two things in the list header in our product:

  1. Sort highlight like Spotify. We have a small sorting arrow indicator, but adding a highlight to the header of the sorted column makes the sorting much clearer. You can click three times; two directions of sorting, and the third click removes the sorting, and thereby the highlight too.

  2. Hover effect like windows explorer. We have a filter button that only shows when hovering the column. Without the hover effect on the column header, the button popping up in the right end would feel malplacé.

My question: How do I combine these two effects, graphically? Is there a standard or any examples of combining these two graphical effects? I have been experimenting with borders and gradients of different strength, but it ends up a mess.

The problem is that both these graphical effects changes the background image. I have to find a combination that can show both the hover and press effects "on top of" the sorted effect. I find it hard to find a way of designing background images that clearly shows what state the sorting is in, no matter where the user keeps her mouse.

In the image you see that the examples I found does not combine these effects.

enter image description here

Improve this question
4
  • You say you've experimented with borders and gradients - how so? My initial response would be that you go with Border Only for a hover effect, and then Highlight for the sorting effect. Therefore when you hover over a field, regardless of whether it has an active highlight then the border of that cell appears.
    – JonW ♦
    Oct 31, 2012 at 11:18
  • @JonW: I experimented with the borders together with different gradients, but never border only. I like the thought of the gradient making it look convex, and then concave when pressed. The stronger gradient makes it hard to differ different gradients in different highlights though, so a border only might just do the trick.
    – JOG
    Oct 31, 2012 at 12:20
  • @JonW: That calls for two different borders though; one for hover, and one for press.
    – JOG
    Oct 31, 2012 at 12:23
  • That depends on the colourscheme you go with though. I still think you could just have two properties - border and background, both unrelated to eachother. If you hover you get the border=true and if you select it then you get background=true, with combinations of both depending on what is hovered over and what has been selected.
    – JonW ♦
    Oct 31, 2012 at 12:28

2 Answers 2

Reset to default
2

You could do the sorted column highlight not in the the header but in the column itself. You could also use a flat color for sorted, and another shade of that color for hover.

Improve this answer
1
  • +1. A great visual effect by itself, but it conflicts with other color coding in the cells. The question is about column headers.
    – JOG
    Aug 28, 2013 at 13:08
0

I ended up solving this need, following the track I started in the question, using 4 different images.

  1. Original gradient
  2. Increased gradient
  3. Flipped gradient
  4. Inreased and flipped gradient.

column headers hovered and sorted

Note that the state order of normal mouse movements typically is:

  • 1-2-3-5-4, for sorting an unsorted list, or
  • 4-5-6-5-4, for resorting in the opposite order, or
  • 4-5-6-2-1, for unsorting again.

(Same as Spotify)

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.