A web link connects a page to different web pages. They allow users to navigate a site at the click of a button. For usability purposes, styling links is important.
Styling Links
- When styling links, design for users to scan, not read (as that’s what most users do).
- Always make sure the link is obvious
- Links should also indicate where they will take the user
- These can be customised in the CSS via
a:link { }
Unvisited link.
a:visited { }
Visited links.
a:hover { }
What appears when users mouse cursor hovers over the link
a:focus { }
The user clicks on a link.
a:active { }
The user has clicked a link.
Ensure Contrast
- Links should stand out not only from the background but from the surrounding text.
- If the font colour is blue and the link colour is blue there is a problem
- Make your links stand out by using one or more than one of the following techniques.
text-decoration: underline;
Underline.
font-weight: bold;
Bold.
font-size: 1.4em;
Enlarge.
color: #ed490a;
Color.
background-color: #c0c0c0;
Background.
border-bottom: 2px solid #a959c3;
Border.
If you decide to make links red, make sure no other text such as headlines and subheadings is the same colour because users will expect it to be a link too.
A point to add is not to underline text that is not a link. In standard web design, links are underlined so don’t confused readers.
Also keep in mind that users with poor eye sight such as those who are color blind may not be able to distinguish clearly a red heading from a green link – you can address this issue by under, bold or italic links as an alternative to colour.
Don’t Forget About Visited Links
a:visited { }
For better web design usability, it is helpful to users to know which pages they have been before to avoid wasting time. Just like differentiating links to paragraph text, visited links ideally should be differentiated to un-visted links. You can do this by giving links a darker or lighter tone of colour – so that they stand out but aren’t as obvious as unvisited links. Google would be a good example.
Title Attributes
<a href=”example.com” title=”This is an example link”>Example</a>
The title attribute is a convenient way to add descriptions to your links and can be especially useful for those who rely on screen readers.
Use Button Styles
Making a link a button grabs more attention and is an excellent call to action technique. Buttons are useful as they can be used many times without restyling multiple times.
Hover State
a:hover { }
It is a nice feature to let users know they are hovering over a link via a change of font colour, background or style (such as removing the underline).
Normally a mouse cursor will transform into a hand cursor when the user hovers over the link – however this can be lost. Add the cursor via CSS: a:hover span { cursor: pointer }
Active State
a:active { padding-top: 2px; }
An active state link is when a user clicks on a link the user knows they have done so. E.g. making the link move 2 pixels downloads to imitate the look that the link has been pressed like a button.
Apply Padding
a { padding: 5px; }
Adding padding to link is good usability. More padding means the link is larger and easier to click. The user can hover in close proximity and still be able to be directed to a new page. This technique works best of the navigation of a website.
Using Icons for Quick Communication
If your link leads to a download of a PDF document for example, placing an icon of the PDF logo will inform a user better. This prepares the user for the type of file type they are downloading and icons are a quick representation of the file type as well.
This can also be applied to navigation links. E.g. a link pointing to the homepage may have an icon of a house or of the company logo or a link pointing to a twitter page may include the twitter bird icon.
Make Anchor Text Descriptive
Links with descriptive text are not only user friendly but will also will improve the SEO of a website. E.g. a text link such as “Click Here†is not as effective as “Get a Free Consultation†Having a simple “Click Here†forces users to find out what “Click Here†is actually about.
Link Your Logo
Always link your logo to the home page – this is the web norm and it is found that most users will click on a company’s logo to return to the homepage.
Don’t Open Links in New Windows
All users like control over what they search and how they search. Imagine if you had many tasks in your toolbar and a website forces you to add one more causing you to jam in more tasks in your already crammed taskbar – annoying right? Most users will expect a link to open in the same window – if the link must be opened in a new window; make sure you let the user know.
