Get More Clicks – Strategies For Improving Website Link Usability

HTML is the language of the web.  It stands for Hyper Text Markup Language, which basically breaks down to “code with links to other pages”.  As far as usability is concerned, links are perhaps the most basic and important element on a web page.  Links should be easy to find and easy to click.

I took a quick glance at LG Display, ranked among the top 100 best performing tech companies by BusinessWeek (number 26!) and marked what I thought should be clickable in the content area based on their design.

As it turns out, I was a bit off.  Their use of colors, icons and other link indicators makes the page confusing to use.  So how can this page’s link usability improve?

What Should My Links Look Like?

Colors and Underlines – It’s a pretty common convention to reserve certain design cues for links since users have grown accustomed to it through their experiences on the web.  Blue is the most common link color; however there is no problem with using a different color as long as it is established well.  Underlining should be more strictly reserved for links.  LG Display basically did the opposite by making the titles like “News” appear like links and treated the news links like standard text in a dark gray.

Icons w/text and without – Icons are a great way to draw in a user’s attention.    Not all icons are links, so it’s the type of icon (arrows, icons with text in them, etc.) and placement that help indicate a link.  Well done icons without text can also help reduce clutter on the page, therefore making it easier to find and scan through content.  LG Display uses the arrow icons on their titles, but they aren’t links.

Buttons – Buttons are often the most obvious clickable elements on a page, however it’s important to not over do it.  Too many buttons can make it hard to focus on the actual content of a page.  LG Display only has a few buttons, which may be a bit on the small side, but there’s nothing really wrong with them.  However, they do make the user think orange is a link color, so it’s confusing that other text in orange are not links.

Images – Usually goes with some sort of title in the form of a thumbnail.  I always prefer to have these clickable since they’re usually more engaging than the text.

Forget Everything I said

Usability guidelines are great.  In a lot of ways they actually make design easier because certain colors are links, content text is black, etc.  Surfing the web, you’ll find plenty of sites that don’t follow these rules because the usability of an element is based on context.  Besides, what good are rules if you can’t break them?

Why You Should Care

Behind every link is more content. Make sure your users can find it. Navigating through LG Display’s website isn’t the most difficult thing to do, and it’s not the end of the world if a user clicks/hovers over some text that isn’t actually a link. What it really breaks down to is making things as easy as possible for the user so they can navigate through your site and find what they’re looking for. The fewer obstacles in the user’s way, the more likely they are to continue using the site and convert on sign ups, purchases or whatever the goal of the website is.

More Resources on Link Usability

• Guidelines for Visualizing Links – by Jakob Nielsen
• Designing “Read More” And “Continue Reading” Links – Smashing Magazine
• Some Great Link Examples at Pattern Tap