Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I am redesigning a website and currently working on the homepage. I have several links or points of entry via the homepage. I was wondering if I need to follow one convention for styling the links, i.e. either underline all links or use just different color and bold fonts.

Will it be confusing if the homepage uses a combination of both styles? For example, some links are underlined while some links are just in bold and different color (not red or green).

share|improve this question
    
there are good answers here, I would add that when making something stand out you must use more than just colour –  ColinSharpe Aug 15 '13 at 19:20
add comment

3 Answers

up vote 8 down vote accepted

It is a standard that all text links follow an identifying convention. This can be your choice of any styling combinations, but generally speaking, they should all follow suit.

An exception would be navigation elements. Some sites that use huge text-footer areas don't have to follow these conventions exactly for quasi-sitemap links. Most still share elements (a darker/lighter a:hover, an underline of some sort, etc).

Here's a pretty good article from Smashing Magazine that talks about web standards for styling links.

Essentially, you want to make your links as readable as possible. Users scan content for links - they do not investigate each word to see whether or not it's a link. This is why having a uniform style convention all links follow is important. When a user identifies "what a link looks like", they can depend on this description in all future instances - except for blatant "links", such as a UI Button.

By having multiple co-existing styles for text links, you run a risk of confusing the user a to what links should look like on your site, and possibly cause them to miss out on content they wanted due to a confusing link styling system.

This is also why establishing a style guide is important - to keep uniform sense and logic throughout the design process, and to create design cohesion.

share|improve this answer
2  
A tl;dr version that I always keep in mind - Remember, when designing your UI, the first thing you need to do is identify the verbs. All verbs in the same region of your design (sharing a background and with common priority) should share the same design cues. A link in this case is the verb go to link. –  Gusdor Aug 16 '13 at 7:45
add comment

As with nearly all things UX, learnability is key. You don't have to stick to one treatment for all text links but there should be clear rules.

As Arman pointed out, a large area of links like footer nav is going to be a mess if everything's underlined or brightly highlighted in some way. But it is important to segregate that section to signify that it is navigation. It's also important to consistently differentiate them from headings or other text.

Where your links fall in the flow of text or in the broader context of a page full of content, you probably need something different. If people need to be able to scan for links in this context, they'll need greater differentiation.

The one thing that I consider an unchangeable rule for desktop is hover. There should always be a confirmation on hover that what the user is about to click is indeed going to do something.

share|improve this answer
    
I agree 100%. Links should, generally speaking, always have a hover state - even if it's extremely subtle. The "Related" questions CSS on this site, for example, changes color just a few minor values. This is enough to indicate it is, indeed, the selected link. –  Arman Aug 15 '13 at 18:25
1  
I'd argue that the Related example is a little too subtle. Coming from me, that's saying a lot ;) –  plainclothes Aug 15 '13 at 18:28
add comment

A few thoughts:

  1. The homepage is your opportunity to establish your interaction language which then should be consistent throughout the site.

  2. While you don't need to stick to default browser link colors, the more you depart from them the less successful your users will be. On this website, the blue selected contains sufficient contrast from the body text to indicate interaction - it is consistently used and utilizes the users learning from most other sites that blue text = hyperlink.

  3. Removing underlines will reduce the click through rate of the links (a statement I am basing on our experimentation at Google). However removing the underlines can reduce the noise on the page and increases the readability of the words as web text underlines can interfere with the letter shape.

  4. While hover underlines help and I would recommend using this if you remove this text decoration, it still relies on the user getting feedback during the interaction rather than just by looking at the text link which may impact users who have some visual impairment and struggle with color contrast.

Whatever choice you make just establish the interaction language and stick to it. Good luck.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.