Links

Make them blue, and other thoughts

Links are the lifeblood of the internet. They make the internet a true "web," an awesome network that can effortlessly connect two pages from opposite ends of the globe.

Traditionally, web browsers displayed unvisited links as blue underlined text and visited links as purple underlined text. This convention did two important things: it made links stand out from the rest of the text, and it let users know which pages they had already visited. (As usual, visit Yahoo! as an example.)

Some sites try to be different by displaying links in alternative ways... perhaps as text that is underlined but not blue. Did that look like a link to you? I didn't think so. Other sites make their links creative colors, like green or grey. And some sites make visited and unvisited links the same color.

These changes are dangerous because they go against convention. In web usability, convention is crucial. If users are familiar with something from other sites, then they'll know how to use it when they find it on your site. Blue/purple links are one of the most important web conventions, since links are such an integral part of the web.

We at RKI are all for visual appeal and creative design. However, when it comes to link colors, we don't fool around. Consider yourself warned: make links non-blue at your peril!

"Click here" syndrome

If you remember one thing about links, it's to make them blue. If you want to remember another thing, here it is: avoid the dreaded "click here!"

You know what I'm talking about. Many sites include language like this:

Click here for our portfolio. Click here to contact us.

There are several reasons not to say "click here." First of all, the actual link text should be as informative as possible since it will stand out due to its bright blue color (your links ARE blue, right?). Users should be able to scan a page and quickly know where all those links are going. Also, not everyone "clicks" -- users who cannot operate a mouse because of physical disabilities will use an alternate method of following links. And finally, "click here" just gets annoying and monotonous after a while.

Here is a better version of the sample text above:

Browse our portfolio and feel free to contact us with any questions or comments.

Guide your users

In-text links are a great way to show users what your site offers. This is especially true of the homepage. In addition to including the main links in your navigation bar, try working them into the homepage text itself. That way, you present the links in two ways: as a prominent list (navigation bar) and as sentence elements with a little more elaboration (homepage text). The user in a hurry, or the repeat user, will use the navigation bar. The first-time visitor, or the visitor who likes to linger a little, can use your homepage text as a quick introduction to what the site offers.

You can see an example of this on our own homepage. We offer clear links to "Our Services," "Portfolio," and "Web Usability" in our navigation bar at the left. We also worked those links into the second paragraph of the homepage:

Our services include web design and redesign, usability improvements, and text editing. Browse our portfolio to get a feel for our simple and usable designs. We also offer a selection of articles detailing our approach to web usability.

This gives users a little more grounding and lets them know what to expect from each section. The homepage we designed for KC Wellness is another good example of offering helpful guidance through links woven into the homepage text.

The same rule applies to interior pages. If a word or phrase is begging to be linked to the appropriate page of your site, link it! Don't get carried away, but do link when it improves the flow of navigation and encourages browsing.

As an example of offering in-text links when appropriate, look at this text selection from a previous version of www.pfks.org, the website of the Partnership for Kentucky Schools. This is a bulleted list of things the Partnership does:

• builds understanding of reform and its importance through public information
• guides business initiatives that address challenges inherent in changing schools
• provides teacher support through technical assistance and continuing education opportunities
• creates a positive learning experience by encouraging community involvement in education

Seems like an okay bulleted list, right? Well, there's something missing. This text introduced a particular section of the site, and that section included individual pages called "Public Information," "Business Initiatives," "Teacher Support," and "Community Involvement." Those phrases appear in the bulleted list, but they were not links. What a missed opportunity! Those words are begging to be links. Check out our revision below. It's a small change, but a very significant one. It invites browsing by encouraging users to click on a phrase of interest. It offers more explanation for some of the internal section links. It is far more user-friendly.

• builds understanding of reform and its importance through public information
• guides business initiatives that address challenges inherent in changing schools
• provides teacher support through technical assistance and continuing education opportunities
• creates a positive learning experience by encouraging community involvement in education

(This page is located at http://www.pfks.org/about/index.html)

Links are a powerful tool. Use them!

[ home | about us | our services | portfolio | web usability | contact us ]

A division of Roberts & Kay, Inc.