Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

We're having a discussion in the office about whether a button should become lighter or darker when a user hovers over it.

Here are some examples from the field:

Apple "Buy Now" button (Second is hover, third is depressed) - http://www.apple.com/iphone/

apple button

Twitter Bootstrap - http://twitter.github.com/bootstrap/

Twitter unselected (Unselected)

Twitter hover (Hover)

Github homepage - github.com

enter image description here

github hover

The button on FogBugz homepage goes from yellow to slightly lighter yellow. The buttons on Optimizely and Visual Website Optimizer hardly change.

Amazon's "Buy Now" button doesn't do anything when you hover over it (besides change to a pointer cursor). The colored buttons in Google's new interface (see Gmail or Calendar) go slightly darker when you hover over them.

Finally here is our button:

twilio connect

Should your button become lighter or darker when you hover over it? What else should you consider? Does anyone have data on whether the hover effect matters for conversions?

share|improve this question
3  
I think the "darker" logic is usually used when the attempt is made to look like you're "pressing" the button –  Ben Brocka Oct 18 '11 at 18:12
3  
+1 for one of the best presented questions that I've seen. –  JohnGB Oct 18 '11 at 18:35
3  
Darker seems more natural. If anything, a physical button would appear slightly darker when you touch it because your hand is casting a shadow. Lighter (illuminated) might signal that the button is waking up at the moment it's needed, like a fog light, refrigerator light, or moving sidewalk. –  Patrick McElhaney Oct 18 '11 at 19:56
1  
+1 Patrick - this was my point in the discussion as well. –  Kevin Burke Oct 18 '11 at 20:04
4  
I don't have any data to refer to, but my inclination is that what really matters is that 1) you are consistent and 2) the button (and/or cursor) changes enough to be noticeable. –  jessegavin Oct 18 '11 at 20:07
show 3 more comments

9 Answers

up vote 33 down vote accepted

There isn't any pattern common enough to be considered "normal" for this by most people, so it doesn't matter which you choose as long as it makes sense for your application.

The important thing isn't whether it gets darker or lighter on hover. It is that there is some change. Someone using a site isn't going to say "that changed to dark on hover instead of light, so it must be something else".

The change is there simply to let you know that it is clickable in addition to any cursor change. Exactly what change that is, is more of a design or aesthetic question than a usability one.

share|improve this answer
3  
aye! the shading change is a kind of affordance isn't it. really doesn't matter as long as it signifies it has some kind of action associated with it. Whether it goes lighter or darker is really down to what you think is the most common mouse-over convention –  colmcq Oct 19 '11 at 9:46
    
I would add that making the button more prominent is important to usability. It's counter intuitive if the opposite happens, for example: the button becomes a color that's less prominent and it almost registers as though it disappeared a little. Same thing with a button moving on hover. If it goes away from the mouse, or feels like it disappeared somewhat. I wouldn't argue it needs to be necessarily darker or brighter, but it needs to stand out more on hover. –  user1803405 Jul 19 '13 at 16:23
add comment

An interaction like this should not be looked at in isolation. Chances are, the desired effect has already come up in a discussion:

...and when you hover over the button it will be highlighted...

Lighter/darker are not your only options either - in many cases I find it appropriate to have the buttons more saturated on hover (which is an easy choice - if it's interactive, you know not to de-saturate the button!)

This would work well for your scenario (i.e. bright on hover), but you may want to tune the other rendered state as well. It's so pale it almost looks disabled!

share|improve this answer
add comment

i think it depends on the background. if the background is white than definitely lighter on hover!

share|improve this answer
add comment

Hover state must be brighter then the default. You can highlight it with different color scale for text or background or with shadow or light.

The simplest example: textual links usually are in blue with no underline, on hover it becomes underline.

share|improve this answer
add comment

I'd say it's a bit more complex than lighter or darker. You want to make it stand out from the other buttons, and if less white does that, then that's fine. I say less white because that's different to more black (imagine mixing paint from those big bottles that you used to get in school). More black can give the appearance of the button being in shadows, which might make it look depressed. Making buttons look depressed should be reserved for mouse-down IMO. Don't do it for hovering.

We can translate the slightly subjective terms less white and more black into technical descriptions of colours. If the lightness (in HSL) is below 50%, less white and more black are essentially the same thing (reducing the lightness), and it will be up to you to determine if this gives the appearance of the button being depressed. If the lightness is above 50%, reducing the lightness is less white, but if you reduce the saturation even slightly, that'll give the appearance of more black.

Of course, there will be occasions when more black won't make the button look depressed, but it's a good general rule, especially since most of your examples gave the impression of being 3D.

share|improve this answer
add comment

The rule you follow is simply this.

When you hover over an item, you want to highlight it (make it 'pop' as some clients would say) compared to other items around you.

So on rollover ...
When the background text is WHITE, you DARKEN the button to emphasize the contrast.

When the background text is BLACK, you LIGHTEN the button to emphasize the contrast.

In your case:
hove example connect

An additional advice, make the drop shadows appear BELOW the text, NOT above. That play with shadow would give a sinister look to your designs. A common movie trick, to make an evil character identifiable is to shine the light source from BELOW.

share|improve this answer
add comment

Let say that you have the more common scenario of dark text and no other part of the design changes on hover and it's the background only, then when you hover, the button should be given a highlight. You're trying to focus on an item - to examine it and therefore it makes sense to brighten it up as if giving it more light to see by. Appearing backlit or frontlit makes no difference.

Except... however, this is not a universal written rule - it's just logical - and common.

The key is not really the colour, it is the contrast.

The key outcome of the above scenario is that the button under the hover is slightly more clearly identified and the figure better contrasted against the ground than it's neighbours.

So, for example, by comparison, look at the inverse scenario, where you have light text, the same rule of thumb would say that in order to increase relative contrast between figure and ground, the background should darken, to increase the relative contrast.

Eg as at apple.com.

enter image description here

Not that Apple are necessarily the byword for 'correct'! - For example - these download buttons don't have any effect with hover or press!

share|improve this answer
2  
They do change the cursor at least... –  Kevin Burke Oct 18 '11 at 22:51
add comment

Depends on the background color, doesn't it? A button preferably becomes "more visible" relative to the other UI elements when the end user hovers over it, so in a dark design they would become brighter and vice versa. (Note: I said "brighter", not "less opaque" :))

share|improve this answer
    
I'm not sure this is entirely true. One of my biggest pet peeves is a menu where I have to hover over each option to be able to tell what it does. –  aslum Oct 24 '11 at 17:32
add comment

Are there other buttons/links on your site/app? And how's your UI treatment for hover or onClick? Key things to think about are consistency and relevancy.

Consistency is something that is not need to be explained, as long as you have an understanding of displaying similar UI design patterns throughout the site.

Relevancy is just to think about how strong of a call-to-action do you want this 'Connect' button to be? Are you afraid that user may not understand it is actionable button, or are there a specific reasons why you want to have the button change onHover? I think what I am trying to get at is if you design the button to standout from the rest of the elements on the site, why is there a need to change the color from lighter to darker or vice versa in the first place?

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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