Hyperlinks, or simply links, are what connect pages together to form websites, and ultimately websites together to form the web. Without them we simply wouldn’t be able to navigate from page to page, website to website. You most likely followed a link to this article; it’s one of those things you don’t even think about ordinarily, you just do it. But if there’s a problem with the design or styling then navigation can frustrate users, and frustrated users are more likely to leave our website.
All links have four main states, link, visited, hover and active. There is a fifth state, focus, which come into play when a keyboard is used for navigation. Each of these states can be styled differently.
- a:link – a normal, unvisited link.
- a:visited – a link the user has visited previously.
- a:hover – a link when the user mouses over it.
- a:focus – a link is currently selected using the keyboard.
- a:active – a link the moment it is clicked.
The a:focus is usually grouped together with the a:hover and styled exactly the same way.
Although most elements on a webpage can be used as links from a styling perspective they usually fall into one of following;
- Menus
- Text
- Buttons
- Photographs
Menu Links.
Navigation, menu bars, sidebars, whatever you call them, these are your users primary method of getting around your website so it pays to give these the attention they deserve.
Give users a larger target.
Extra clickable space around your menus links means users don’t have to be so precise with their mouse clicks. Either by adding padding to the links or by making the parent tag (usually a <li> tag) the link.
Take the example menu above; in the first menu item only the text is the actual link, meaning you have to be very precise with your mouse, whilst in the next menu item the whole area is the link making it far easier to use.
Highlighting current menu items.
However you organise your websites pages always give your users a visual clue of the current page, or area they’re in by keeping the menu highlighted in some way.
Drop Downs.
If your website uses drop down menus, then again use plenty of clickable space, and keep the parent (main menu) link highlighted to show users where they are even once the drop down has disappeared from view.
Text Links.
Is that a link?
One of my pet hates is arriving at a website and clicking on what looks like a link. I wait, then realise that what I’m clicking isn’t a link, it is just some underlined text. There are plenty of unwritten rules in web design – things we just take for granted, and underlined text means a link to a lot of people.
Keep links uniformly styled.
When someone arrives at a website they make a quick assessment of how to get about, they glance at the page and think, “hey that looks like a link to something I’m interested in”, and click. Whilst doing this they make a mental note of what the links look like on your website, read your article, and look for the next link. If links in one area of your website are all underlined, but on another they aren’t then you’re forcing a user to stop, think and re-learn.
Try to have a single, simple rule that covers most of your websites link styling. For example on this website it’s “if its orange you can click it”.
Make your links obvious.
Users scan web pages, looking for the bits that are relevant to them, so you need to make sure your links are obvious. Don’t be tempted to make your links the same or a similar colour to the rest of your web page to make things look pretty or stylish, not unless you don’t want anyone to actually use your links!
Links need to stand out from the background of your website, and also from the text surrounding them. There are plenty of options to style your links;
And of course any combination of the above.
The link states.
Visited links.
Have I been here before? On smaller websites with few pages I don’t think this is really necessary, but on larger websites, or once your website grows to an appreciable size then showing users which links they’ve already followed is really useful. One of the most common ways of displaying this is by using a line-though, or by changing the colour to make the link now seem less important.
Hovering on links.
Again, give a clear indication to users that they are able to click on your text link by altering its appearance. This is the same list as above, but with the addition of movement. I would recommend using at least two of these, for e.g. Many people have difficulties with certain colours, so add another visual clue to be certain.
NOTE
Extra care is needed when altering the size, weight or adding movement to links as this has an impact on any surrounding text.Active links.
When a user actually clicks on a link you can provide a visual signal by using any of the methods mentioned previously. A personal favourite is to introduce movement, moving the link down by one or two pixels simulates the action of pressing a button.
Links to files.
Most users are pretty familiar with icons representing certain file types. So if your links point to files in various formats then let the user know what file type they are about to open, be it a PDF, DOCX or a JPG by using icons in your links. If you don’t want to use icons then you can still let your users know what the files type is including this information in the links text.
Use descriptive terms in your link text.
As mentioned earlier, users scan pages looking for terms related to whatever it is they’re interested in. So a link “click here”, doesn’t really indicate what a user will find by clicking it. Ok, the surrounding text might offer more clues, but remember we’re trying to be obvious! A better link might be “10 web design tips for small business websites”. In doing this you’re also making your links a little more SEO friendly.
Button links.
Navigation or Action?
Buttons used to be reserved exclusively for important ‘action’ type events, commonly the submit button found in web forms. However the line between navigation and action is somewhat blurred these days, you’ll find links styled as buttons and form buttons styled using a common set of rules.
So I classify buttons as either navigation or action.
Navigation Buttons.
Navigation buttons link between the pages or your website, or lead to other websites, clicking on one makes no significant difference to how the website behaves after you’ve followed the link.
Action Buttons.
Action buttons on the other hand are primarily used when clicking the button changes the state of the website in some way, or represents a significant event. Examples of action type events are submit buttons on web forms, add to cart and purchase buttons on e-commerce sites etc.
So whether you style your link buttons and action type buttons similarly is largely down to personal preference, however in your users mind there is a psychological difference; button links have no real consequence, action type buttons do.
When you need your link/action to really stand out then styling it as a button works very well. Be careful of the size, colour and quantity of your buttons, too many and you’ll just confuse your users. Reserve you largest most eye-catching button for your pages primary call-to-action.
Photographs as links.
When photographs are used as links these also deserve some attention. Whether used as links to other webpages, opening larger version of the photograph or starting slideshows, whatever clicking on your photograph does it’s worth giving some feedback to users so they have a indication of what clicking will do.
Like all links, photographs and images also have the same five states. If a user is hovering over your photograph link provide them with some visual feedback that it is indeed a link, and what clicking it will do.
Remember, the key to getting your links working right is consistency. For example, on one page of your website clicking on a photograph opens up a larger version of that image, but if on a similar page the image isn’t linked then your user will probably click it anyway (because they’ve just learnt that photographs on your site can be clicked) and end up confused and wondering why it isn’t working.
To Sum Up.
Draw a distinction between navigation and action type events.
Make the linkable areas as large as possible.
Let users know where they are.
Keep styling and actions consistent.
Be descriptive in link text and titles.
Useful WordPress plugins.
MimeTypes Link Icons is a plugin that looks for links to files and uploads in your blogs posts and adds a nice icon next to it. Optionally add the file’s file size next to the link.