Forum Moderators: not2easy
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?
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.
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.
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.
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.
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.
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?
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!
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).
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:
Bad:
Example.com [example.com] has lots of useful information.
Good:
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.
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]
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.
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.
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
