Design for Clickability

Making things clickable is done for a single purpose, to get people to click on them. Yet, a lot of times, designers fail to make links or buttons look clickable. In fact, while this might seem like a no-brainer, a lot of sites get it wrong.

Imagine that you have an affiliate site for the travel industry. You write beautiful articles which vividly describes exotic places where people could spend their holidays. Sprinkled in the text you have affiliate links to traveling agencies, which in case you didn’t know, have pretty decent kick-backs on referred customers that leads to a sale.

This might sound like common sense but you would be surprised to know how many sites that get this wrong. Often I think, for aesthetic reasons.

What to do about it

You don’t have to take it as far as usability guru Jakob Nielsen, who infamously claimed that links should be blue and underlined (which they are on his site useit.com by the way). I don’t want to push this issue that far (even though the links on this site are blue and underlined), but do make sure your links stand out from the rest of the text.

Your safest bet is probably to have them underlined. It carries a really strong affordance for clickability (check the Fast Facts Section for more on affordance). But you could also have them in a different color, a different background color and/or styled in some other way. Just make sure that they stand out from the rest of the text.

Note: Since underlined text is such a strong affordance for links on the web, you should make sure that everything that’s underlined is clickable. I.e. don’t underline text just to emphasize it.

Account for color blindness

Don’t forget that about 8% of the male population are color blind. Having something more than just the color to distinguish links is therefor a good idea.

Not just text links

The same thinking goes for other things that are clickable such as buttons, checkboxes, select lists, images etc. Make sure that these too actually look clickable.

For buttons that can mean to make them look like physical buttons with a 3D effect. This makes them stand out from the page and look more like physical objects.

The button on the left could just as well be a banner or a header, while the button on the right is begging to be clicked.

Provide clues

Also make sure to provide other clues when the user moves the cursor over the object. The cursor itself could for example change to a pointing hand which carries a strong affordance of clickability. This happens by default over links in browsers but you could use a little CSS to create this effect on other clickable elements as well.

Another good idea is to make something happen with the clickable object itself when it’s being hovered. One common clue is to change the background color. This is easily achieved with the :hover pseudoclass in the CSS.

.clickable-item:hover { 
    cursor: pointer; 
    background-color: #ff9; 
}

Accomodate for keyboard

Some people prefer to use the keyboard instead of a mouse for one reason or the other. Don’t forget to take this into account when providing clues. Links and form elements are easily reachable by keyboard by just tapping the tab-key. For the user to know which element currently has focus, most browsers create a dotted outline around the element.

That’s a pretty good affordance, but you could make it even more clear. An easy thing that I often do is to make it have the same style as on :hover. This is easily accomplished with CSS by using the :focus pseudoselector.

.clickable-item:hover,
.clickable-item:focus { 
    cursor: pointer; 
    background-color: #ff9; 
}

Pro Tip: If you don’t like the dotted outline, you can get rid of it by setting outline to none in the CSS.

Don’t forget to design for touch

On touch devices there are no such things as a hover. It’s therefor extra important to make clickable objects look clickable. You will also want to make the click area bigger to accommodate for the fat-finger syndrome, but that’s a topic for another article.

Fast facts

Affordance

The term Affordance was popularized by Donald Norman in his seminal book The Psychology of Everyday Things. He later changed the term to Percieved Affordance since too many misunderstood what he meant by it. (Actually his latest term for this is Signifiers but that term hasn’t gained much traction yet)

The Percieved Affordance is the properties of an object we understand by just looking at it. For example a door knob communicates with its shape that it can be grabbed and turned. In a similar way we can, by just looking at a pair of scissors, see that the shape of the two “holes” looks like somewhere you can put your thumb and your hand.

The door knob affords grabbing and turning and the pair of scissors affords sticking your hands in the holes. In the same way a underlined link and a raised button affords clicking (or touching).

References

Online

Note: This article is a rewrite of the article Make Clickable Things Look Clickable that I’ve previously published on Code Crafting Blueprints.

About the author

Gabriel Svennerberg is an UX Designer and FrontEnd Developer living in Sweden. When he's not busy designing or building applications at Meetod, he writes about UX Design and all things web on In usability we trust. Gabriel is the author of the book Beginning Google Maps API 3 published by Apress. Gabriel on Google+