designing link styles

Links are the fabric of the web.

In this post I discuss the importance of link styling, and in particular, text links. I emphasise that link styles form a core prerequisite in designing a great user experience.

Users love well designed link styles

Reproduction rights obtained

But lets not kid ourselves… users are unlikely to turn to their friends in a bar and say ‘did you see those links, they were hot’. No, but they might say ‘That website is great’. In many cases a website is ‘great’ because it is easy to use, with well designed, intuitive link styles.

Users want the following things from a link style:

• links should be easy to recognise : a user should be able to quickly and easily scan and identify links within a web page
• links should be responsive : links with hover states provide further visual confirmation that the text is a link
• links should communicate behaviour : if a link is pointing to an external site, than the link should be styled in a way that indicates this

Styling links that are easy to recognise

The best way to make links recognisable is to use text-decoration and/or colour.

Text-decoration : the use of ‘text-decoration:underline’ has traditionally been the best way of making links recognisable. The approach however has not been adopted by all. Many designers feel, that in circumstances where there are lots of links on a page, ‘text-decoration:underline’ can often be too overwhelming. Instead, designers often use ‘border-bottom: thin dotted’ to create a dotted underline. The later however can have an adverse affect when links wrap onto 2 lines (IE only).

Colour : If you don’t want to use an underline style for your links then colour is your next best option. The important thing to remember is to use a colour of high contrast. Remember, many users will want to scan a page for links – if your links look similar to your paragraph text they become hard to find and your users will become frustrated. Using a high contrast link colour that fits neatly into your websites colour palette can remove the need to use underline styling and improve readability.

Tip : Do not introduce too many link colours. Your links, regardless of whether they appear within a paragraph or in a list, should often be the same colour. Links of varying colour may suggest that they will behave differently when clicked.

Styling links that are responsive

Links with hover states provide visual confirmation that the text is a link… and they are a load more fun! The best way to make links more responsive is to style the ‘hover’ state different to the ‘link’ state.

Tip: Avoid styling the ‘hover’ state in bold if its corresponding ‘link’ state is not also styled in bold. A link styled in this way causes shifting on hover which can be awkward for users.

Styling links to communicate behaviour

Not all links behave the same. Links can direct a user to another website, they can open documents, they can force a file download… the list goes on. With many different behaviours possible, it is important that we style links to reflect their behaviour.

External Links : a user may often decide against clicking a link if they know it is going to another website. We can reflect an external link using a number of different methods however the style winning the most favour with designers is the use of a background image. Another option is to place information regarding the behaviour of a link in the anchor ‘title’.

Documents : Browsers often crash when a user clicks on a link to a PDF or an MS Word document – more often than not it is when the document being linked is a large size. There are ways of reflecting both document type and size when styling links.

In conclusion… do not underestimate the power of link style design. Links form an essential part of all websites. Use them to their full potential – make them easy to find, responsive and reflective of their behaviour. Once you have a good link style design in place… you can confidently focus on the design of your websites many other wonderful features.

Other sites that discuss link styles
- Link hover effects by fecklessmind.com
- Accessible external links by Max Design
- The why and how of styling text links by Andy Rutledge