homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Hover Effects and Usability
Link background change seems to improve stickiness

 1:12 pm on Aug 18, 2002 (gmt 0)

I recently made a change in a website and wonder if my results line up with anyone else's experience.

The site used to change the font color to a brighter shade on hover. We changed it (easily, thanks to stylesheets) to having the anchor background change to the previous link color, and the font turned white with no underline. I like this effect where I've seen it and think it makes the link very easy to see and click accurately, particularly where links are densely packed.

After one month (25,000 user sessions) we see a 1.2 increase in page-views per unique (up nearly 10%) so it looks like a good change, but other factors were not standing still, either.

Has anyone else tried different hover effects and seen how they impact website use? Do you have any hover effects you particularly like...or avoid?



 9:32 pm on Aug 18, 2002 (gmt 0)

Think I'll answer my own question for starters. I dislike links that have no underline and then show an underline as the only change on hover. It's very hard to scope out your options on that kind of page.

I guess it's good if you want the search engines to see the links and not your visitors, but that's not the way I see this "ultra clean look" used.


 10:04 pm on Aug 18, 2002 (gmt 0)

I've been using this method for awhile and I have no evidence to back up what you say other than ...I like links like you describe.

It's straight outta Jacob's mouth...use the conventions as they have been established, thus, leave the underline to denote links. Changing the background-color on the href class is a handy way to visually affirm your users selection quickly....they instantly know the link is clickable.


 6:46 am on Aug 19, 2002 (gmt 0)

Links should stand out one way or another: if not underlines then something that says "Click me!". Given a choice between underline and contrasting colour (meaning: if I could have one or the other but not both), I prefer the contrasting colour: it stands out more.

Incidentally, the links here on this board annoy me a little. They're underlined, yes, but they're black. On mouseover, half change to red-on-yellow, but the rest change to black-on-yellow instead. The links at the bottom of each thread are in different fonts. It's a bit... messy, if you ask me.


 7:15 am on Aug 19, 2002 (gmt 0)

I like to use a different colored font for important words and phrases. It makes a page easy to skim - the main ideas just jump out.

Pages that use a different color, but don't underline links (glish [example.com], ala [example.com], etc) are harder to scan for overall meaning, IMO, so I don't use non-standard link display. I don't just want people to scan a page to see where they can go, I also want them to scan to get a good sense of what the topics are.

Yes, undecorated links do look better from a purely visual design POV. Those underlines are just so gauche - like a country boy tucking the napkin under his chin at Le Five Star Restaurant.

But for ease of communication, I'm going to stick with underlined links for now.


 12:21 pm on Aug 19, 2002 (gmt 0)

Hmm. I suppose it's a lot to do with personal preference, which is always very difficult. I tend not to use colour for "important words or phrases", but then I'm also used to laying out black-and-white printed publications where that sort of thing is not an option: it's done with careful use of headings, lists, positioning and so on. For headings I tend to use colours that are related to that of the site overall, but for links I use colours that contrast.

In any case, I always use coloured links, whether or not they are underlined. Apart from anything else, there are enough sites out there that (incorrectly) use underlining purely for emphasis, so an inline link that is the same colour as the surrounding text but underlined tends to blend in a bit for me, and if the same piece of text also includes brightly coloured text that's not a link, I have to resort to pointing with the mouse to see which particular scheme the designer has used this time.

Also, I tend to avoid using inline links, although not entirely. But rather than writing, say,

There's a great example on Example.com [example.com].

I write:

There's a great example on Example.com [See their website [example.com]]

or words to that effect. This also allows me to include extra information if necessary:

There's another one on Beispiel.de which includes extra provision for pilsner. [See Beispiel.de's website [beispiel.de] (in German only)]

Probably I can get away with doing that because I don't use it too often: it does break the flow.

But I think a lot depends on how you lay out your site and where you put the links in relation to everything else. And a lot has to do with how people actually scan things, and that depends on an awful lot of unpredictable factors. What works on my site may not work on yours; and the sites I find easiest to navigate may be the ones you have most difficulty with.


 1:20 pm on Aug 19, 2002 (gmt 0)

I am pro-underlining links to clearly indicate what options are available to the user, but with all the
browser discrepancies of handling style sheets, I am beginning to use color as the determining factor.

It would only seem as common sense to a web developer to clearly indicate links on a page, but then
you have IBM's web site that display the links in ordinary text and only have a hover effect? Are they
following other guidelines?


 2:12 pm on Aug 19, 2002 (gmt 0)

what about images would that be to much it sure hepls the user know thier options.


 2:49 pm on Aug 19, 2002 (gmt 0)


IBM's site looks like an unconscious patchwork to me. Some links only underline on hover. On other pages links LOSE their underline on hover. Some links show no hover effect at all. I'd say IBM is following no guidelines whatsoever.

By the way, occasionally changing font color to emphasize certain phrases is a technique that I first saw in print: spot color plus bold text in a direct mail piece.

If it's overdone it just looks like chaos - but when I used it with restraint it improved conversions on a recent site. I use it to reinforce and elaborate on the headers and lists, which certainly are important.

That technique probably works better on the web where links already give the page a bit of a mixed look. I do think it's a useful tool for the kit.

> what about images
Not sure what kind of images you mean here. If you're talking about rollovers for the main menu, that can help the visitor know it's a link - but rollovers also tend to be a bandwidth hog and they need to be kept to a minimum.

There's also IE's awful handling of rollover scripts in recent versions - it often refuses to look at the cache and takes an extra download!


 2:54 pm on Aug 19, 2002 (gmt 0)

I use:
in bold on my links. They also help with ranking.


 3:59 pm on Aug 19, 2002 (gmt 0)

Example.com (See their website [example.com])

Usability is good for this approach, rewboss, but the link text is problematic, IMO. As the linkee, I'd certainly prefer "visit Great Widgets Company [example.com] to the other approach. As the linker, your page also don't get any kind of link text boost from "see their website [example.com]" (to the extent that any SEs still weight link text in their algos).


 7:59 pm on Aug 19, 2002 (gmt 0)

Fair enough, and this is one reason I avoid inline links if I can. There are other considerations, and they often conflict.

For example, an inline link is much better at the end of a sentence, because it's much easier to find. Users read the sentence as a whole, and if they then have to backtrack to find the link, that makes it harder:

Example.com [example.com] has lots of useful information.

Lots more useful information can be found at Example.com [example.com].

Now, that also takes advantage of "end-weight" -- put the most important part of the sentence at the end of the sentence. (That works in English... but not in other languages, which is an extra problem.)

Sometimes, you can't always rewrite a sentence in this way. For example:

Example.com [example.com] experienced real difficulties with the launch of their new website last week.

Can you re-write it so that the link appears at the end of the sentence? How about:

Real difficulties with the launch of a new website were experienced last week by Example.com [example.com].

That's a tortuous sentence to have to read. So let's try:

Example.com experienced real difficulties with the launch of their new website last week. [Example.com's website [example.com]]

Kind of repetitive.

The problems here are not insurmountable. At the moment, I avoid inline links, unless I'm writing a blog entry or something (they have their own rules). I sometimes have a box at the end of an article with external links to further information where appropriate.

When CSS positioning is more reliable, it should be possible to pull inline links out into a margin -- out of the flow of the text, but still in the relevant place vertically. Non-CSS browsers will continue to show the links inline. I'm looking forward to that capability.


 8:47 pm on Aug 20, 2002 (gmt 0)

Here's a "don't do" as far as I'm concerned. Don't make the hover effect turn the link text unreadable. That means don't let the default hover color stand -- yellow text on a white background in Explorer, for instance.

There's a lot to be said for the user taking one last look at the text before they click with confidence.

[edited by: tedster at 6:32 am (utc) on Aug. 26, 2002]


 12:15 am on Aug 26, 2002 (gmt 0)

I always use the underline for links so visitors can see them, and then i use no underline for the hover effect, usually with a slight change in color as well.

I wouldn't think the change in pages per unique would be related to the bg color, but on sites that have no underlines as default, changing to underlined links might actually make a substantial difference.

I've always assumed that new users are expecting links to be underlined, and won't know what to do when there appear to be "no links" on a page.


 3:42 am on Aug 26, 2002 (gmt 0)

I should perhaps go into a bit more detail about this particular site.

Much of the text on that site is reprinted from books, and we are legally required to use underlines for emphasis in the same way they were used in print. So, this hover effect, I feel, has been particularly helpful in making links obvious and contrasted to underlined words which are there only for emphasis. We also use color differences for links, and no color difference for emphasis underlines.

In addition, there are several places where text links are tightly packed in the footer, and I also think the block of color on hover helps there - it's good visual feedback.


 6:26 am on Aug 26, 2002 (gmt 0)

I've discoverd lately that I have always designed webpages for my own aesthetics. Underlined links look ugly to me so I never use them. However after reading the arguments for underlining links, I am giving it a try, couldn't hurt - LOL

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved