Best Link Strategies
Posted by Daniel | Posted in HTML/CSS | Posted on 18-02-2011
0
CLICK HERE. Have you seen this as a button for websites. Is this descriptive enough? What is wrong with this method? For the most part it lacks originality and just seems like the designer gave up on a linking strategy. Let’s take a look at some of the strategies that will equip you to design and code with usability in mind. This post will cover some of the best practices when it comes to links. Some of the newer practices that are cropping up on the scene aren’t necessarily the ideal method and we will discuss some bad habits that will be reminders for some of you.
Scan-ability
One important thing to remember with content is that users scan your content. This isn’t anything new but we need to realize this and know that this transfers to links as well. How this translates is that the links need to be scannable; just link scanning the content. For example, if your business is named Shark Boards and you have a list of links in which you use shark boards as the beginning for each link, this isn’t easily scanned by the user as they have to scan and read through every “sharkboards” to find where or what the link actually is.
www.sharkboards.com/audio
www.sharkboards.com/archive
www.sharkboards.com/video
www.sharkboards.com/morelinks
Just imagine if the name of the URL is longer than Shark Boards and you can see how that can be a hindrance to usability.
Generic Links
This was a poor practice that just took off and everyone used and that is the “click here” button. To this day many people choose to use this and it is not a valid choice when trying to decide what to use for your buttons or links. You should use meaningful words that tell the user what the link is for. So rather than “click here” you could use “Shark Board Items” or “Don’t forget to view our very own Shark Board surfers.
Color me Links
This one is a bit more open for discussion but let me just say reserve blue for unvisited links and a less saturated color for visited links. The hue blue is synonymous for links and great for usability; however, some designers work with a color pallet and they don’t want that blue so they change it. In this case I would definitely use an underline with this method to show that the colored text is a link as that is also a widely understood method for distinguishing links. This is done quite simply so let me show you how to do this.
Link states and some prep work
- When the CSS is embedded in the page and not an external style sheet it resides in the <head></head>.
- The colors are irrelevant and you determine what these are but the order is what is important.
- The /* */ is how you comment the CSS and in no way affects the code.
- In the href=”URL” you place the destination such as http://www.cre8vedesign.com/blog.
- The Target _blank tells the link to open a separate new page.
- The “This is a link” is the text that you enter which displays; this doesn’t have to match the link.
So, my long URL http://www.cre8vedesign.com/blog doesn’t have to be seen by the user because in between the > and the < you enter the text of what you want the user to see. All of this together will give you a great link and the users will be able to discern a link and determine when the link has been visited.
- a:link – a normal, unvisited link
- a:visited – a link the user has visited
- a:hover – a link when the user mouses over it
- a:active – a link the moment it is clicked
Remember: that a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective and a:active MUST come after a:hover in the CSS definition in order to be effective(w3schools).
<html>
<head>
<style type="text/css">
a:link {color:#cc0000;} /* unvisited link */
a:visited {color:#00cc00;} /* visited link */
a:hover {color:#cc00cc;} /* mouse over link */
a:active {color:#0000cc;} /* selected link */
</style>
</head>
<body>
<a href="URL" target="_blank">This is a link</a>
</body>
</html>
Some additional thoughts on the color of links is in regards to the unvisited state. Black is a poor choice due to usability issues as body copy is black the majority of the time or at least understood as body copy and it would be quite easy to overlook. Some sites recently have been using gray as the visited link color and this is an example of not following new trends just to do it because gray is known as something being unavailable.
Home Products Links Contact Us
This used to be a common practice which is using the word links as the menu text for the links page. This falls under the same category as using “click here” for a link. Instead name it according to what the links are for or what they are pointing to.
Linking non-web pages
If your linking to pdf files, audio, video or other sources that aren’t a web page you need to define this in some way. Audio icons, video icons and so forth need to be implemented so the user isn’t surprised or their browser crashes do to the resources that are needed for the computer if they happen to be on a dial up Internet or have 2 gigs of ram. If they see the video icon they would avoid it from the start and not have this unfortunate experience.
Case Studies
http://www.cnn.com/
If you notice some of their images are truly images but what if the videos lack the common play icon and the user thought the video was a simple image; this could effect that users experience. CNN does well by simply placing a small play button in the corner of the images that are video content.
http://www.foxnews.com/
Depending on when you read this and view the site it may vary; but, Fox News commonly will have text under an image that is a hyper link and they will often have a video icon such as a small camcorder to represent that the link is a video. This is a great example of linking properly.
What “best” practices to you adhere to when working with links?
Regards
