Oh… That Was A Link?

One main goal of a successful website is to lead users throughout the site, informing them about the services or products it offers. If the path of the website is clearly laid out, it will be easy for the user to reach their desired result. However, something as “small” as not clearly identifying a link can result in a frustrating user experience, and even a missed opportunity to create a relationship with that user. It’s very important to think strategically when mapping out your website, and things that seem like just details can be incredibly important.

I recently attended a 2-day seminar, where the schedule of speakers was only available online. The schedule included the title of the talk (which at times was rather abstract), the name of the speaker and the time.  When choosing which talks to attend, I based my decision on the title alone, assuming it would be about what it alluded to. Most of the time, it was right on, exactly what I expected, but there was one talk in particular, called “So You Think You Can Scale”. I figured it was about creating a responsive website, being able to scale the design down from desktop, to tablet and finally mobile. However, it was intended for developers, scaling a project into a larger build. I left the talk thinking, I wish the website would’ve had a short summary about each talk – that would’ve helped in this situation. Well, it turns out it did, I just didn’t realize it. If only I would’ve clicked on the actual title of the talk I would’ve been taken to a short summary page.

Though I should’ve known better, the website also should’ve more clearly conveyed that the titles were clickable. The listing of talks was set up in a table of rows and columns, and there was no hover state or actionable color used throughout. So in light of my experience I have some strategic suggestions to make links more identifiable to users.

Tips for Making Links More Identifiable:

1. Use A Consistent Actionable Color

When choosing a color, make sure that it stands out, on white, as well as against the various background colors you may be using throughout your site. An in-text link color is just as important as a button color, and consistency is key. If you choose orange as your “actionable” color, use it for every link across your site, and for nothing else. That way, users will become familiar with what is and isn’t clickable and recognize that when they see orange, clicking on it will lead them somewhere.

2. Underlined Or Bolded

Sometimes, when a link is within a body of text it’s hard to tell when it’s the same weight as the rest of the text, just a different color. To call out links in a body of text, either underline the word, or make it bold, in addition to using your actionable color. That way when the user is scanning a large body of text, the clickable links will be clear and identifiable.

3. Styling Your Call-To-Actions

Buttons on the web come in all shapes and fills; rectangles with sharp or rounded edges, pill-shapes, flat color, or use a gradient for depth. Whatever your style, buttons are universally recognizable and a great way to lead your users to take action, whether it’s “Buy Now” or “Get A Quote”. This type of button is the main converter on your page, and because of its importance, there should only be one main call-to-action.

4. Adding A Hover State

When adding call-to-action buttons, it helps to include a hover state, so that when the user “hovers” their mouse over the button, the state changes. Maybe the color of the button changes, or it becomes an outline instead of a fill, or scales a bit larger; all of these actions will help indicate to a user that an element is clickable.

5. Using arrows

Common icons such as arrows, carats or chevrons are used to help indicate what is actionalbe. If you see “Learn More” with an arrow after it, it helps solidify to the user that clicking it will lead somewhere. This is also important for what’s called, accessibility. Some of your audience members may be colorblind and cannot easily distinguish a button from a background if the color contrast isn’t strong enough. That’s why having a symbol like an arrow or carat will help to identify actionable items.

When it comes to your website, user experience is incredibly important. You never want to make it difficult for your users to get to where they want to go on your website. The worst thing would be for a user to leave, out of frustration, just to find they were unaware your site actually offered what they were looking for. So in closing: be clear, be consistent and identify your links appropriately to lead your users exactly where you want them to go.