|
Usability Tip:
Highlight Your Links
by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.
A lot of designers remove the traditional underlining from their text links because they think it creates a cleaner, more professional looking layout. You may think so too, but consider user expectations and usability issues if you decide to remove underlining. Be sure to use other visual clues that clearly identify your text links as links.
The Great Disappearing Standard
Think about how a standard text link appears on a Web page. It's in blue or purple text and underlined. Some designers change the default display because the think it looks "boring." Others find it necessary sometimes: blue or purple link text becomes almost invisible against a black or dark background color. In that case, the links aren't legible unless the designer changes the defaults.
Cascading Style Sheets (CSS) make that so easy to do that it's tempting to start changing other link properties as well. Link underlining is usually the first to go.
That isn't always bad! A lot of plain text links on a Web page may create a cluttered and confusing effect. However, visitors will be even more confused if they can't find any links at all on the page.
It's important to remember that you need to provide other visual cues for visitors if you change the default display for your text links.
Let's Play "Find The Link"
This text illustrates the problem . Here, we're using a lot of common style sheet techniques to add background colors and add various text effects. There's a hyperlink in here too, but one of the CSS properties we used for our links was "text-decoration:none" so the link isn't underlined. Can you find it?
It may have taken you several seconds to find the link, but that's several seconds where you weren't reading and enjoying the rest of the page content. How much time do you think casual visitors will search for links or your navigation system? Not long.
Fortunately, there are ways to create a usable text links even if you've removed the underlining.
Note that this article focuses on links inside text content only. When you use CSS properties to create a custom menu system, you have a lot more options. The menu system itself is a strong visual signal to visitors that the links are clickable!
Highlighting Non-standard Links
Since style sheet properties make it so easy to change link display, let's consider ways to use CSS to create text links that don't mess up your layout, but still are instantly recognizable as clickable text links.
Yes, underlining is the most common visual cue, but you have plenty of other options using common, browser-safe CSS properties:
- Background: Add a contrasting background color to all text links inside your content. Although it needs to contrast with the text, it should also complement your overall color scheme.
- Text appearance: Use a different text color or font weight for text links. If the surrounding text is black, perhaps all links could be dark green or in bold text - or both.
- Hover effect: The mouse is said to "hover" when it moves across the text link. That's generally where the cursor changes from an arrow to a hand. You have a lot of options with hover: change the background color, the text appearance, add underlining only on hover, etc. Your options are limited only by your CSS abilities.
|
It's best to use these in combination. You don't want to style links only on hover because then visitors are back to playing "find the link" instead of reading your content! But it's perfectly ok to have a different background color always behind text links and then highlight them further on hover.
For specific instructions on using CSS properties to create custom links and menu systems, visit our newsletter archive:
Whichever display combinations you choose, always be consistent and create a common look and feel between links on the page and through the entire site content. For example, don't have all green text links on one page and have black, bolded text links on another!
How Will Future Browsers Display Links?
Opera 7 gives surfers many options to customize their browser display. One option is the ability to turn off link underlining - even if the Web designer used standard text links! If that feature becomes popular with visitors, other browser manufacturers may add it as well.
Should that happen in the future, you'll be glad that you've added other visual cues to your text links! At the same time you're creating a professional layout and enhancing your page usability, you're building pages that could stand out from the crowd in future browser versions!
But don't get so focused on what might happen with browsers that you ignore the problems you could have now. Every browser interprets standards differently. Explorer is pretty forgiving of simple HTML errors, but the same errors can completely break a page in Netscape.
Always validate your HTML code using HTML Toolbox. It flags slow loading pages, broken links, HTML errors, and browser-specific code. Then, just to be sure, quickly check your page display using Browser Photo. It gives you actual screen shots of your Web page in 16 different browsers, browser versions, and operating system combinations.
|
