It’s been a little too long since I posted any real beginner content, so here we go. This is a fundamental user experience (UX) skill, and as design trends change, it never hurts to refresh your intuition about fundamentals.

There are two things that make something look clickable: difference and change.

It is always tempting in UX design to look for concrete “rules” for stuff like this, but when you get more experience in design, and live through a few more trends, and measure more real users, you will realize that there is no such thing as a “clickable style” of anything.

It all depends on the design around the clickable thing. It’s relative.

Hence: difference and change.

****

Difference:

When you design your general non-clickable pages or content or whatever, they will obviously have styles too. Your text will have colors and fonts and sizes, for example. You might put content in boxes, or define colored areas and backgrounds to divide up your layouts. It doesn’t matter what the details of your design look like. But you will have some.

“Clickable” things should look different than all of that, in some way. Ideally they should stand out a little bit. If your text is black, then maybe links should have a color. It doesn’t even matter what color you choose, as long as that color represents clickable-ness. Or maybe you can use an underline, like standard web links, as long as underlined things are always links.

That is also why disabled buttons (non-clickable things that can become clickable) are often grey and “visually quiet”.

Imagine a button that is only activated when you have filled in a form about your favorite type of goat. When you have typed “Alpine Ibex” into the text field — because they are obviously the Gandalf the Grey of goats, and therefore awesome — then the button becomes clickable.

Making the button grey and boring at first allows the button to “blend in” with the rest of the page. It doesn’t look clickable. There isn’t much difference compared to the rest of the design, so you intuitively know that it isn’t clickable. When the form has been filled in, the button suddenly gets color and contrast and it looks “alive” compared to the rest of the design, so you intuitively know you can click it.

It’s also worth mentioning that a Markhor is also a particularly rad type of goat, with horns that look a lot like these chopsticks. But I digress.

****

Change:

The other thing about clickable stuff — if you have done a good job with the difference part — is that users often expect some kind of reaction from those things when they hover over them with a mouse, or tap them with their finger. If we interact with a clickable element on the screen (or a swipable element, or a draggable element, or a magic thing in a game, or whatever…) and that element gets brighter, or changes color, or sparkles fly out of it, or it makes a fun noise, we feel like we have caused the change.

Non-clickable paragraphs of text don’t change when our mouse passes over them, right? Right!

In UX that is called user feedback. The user does a thing and their action causes feedback so they know it worked. And that’s how people learn stuff.

Like when celebrities “accidentally” release a sex tape and it makes them more famous, and then they start “not so accidentally” posing nude every time their stock drops a little. And then the rest of their family starts doing it. And then they sell the rights to put their entire lives on tv. And then the family members start posing nude too. And then everybody is rich and naked and complaining about not having any privacy! Hypothetically speaking, of course.

Action > positive feedback > repeat action.

A psychologist might call that conditioning.

****

One more thing…

At this point many designers will want to jump in and say that consistency is important for clickable things. They’re not wrong, but there is a little more to it.

All of the clickable things should be clickable in the same way. But that’s not what makes users understand that they are clickable. It’s what helps users learn what a clickable thing looks like in your design.

Remember: you are training them to click.

You can use every color in the rainbow to indicate clickable things if you want — all in the same design— as long as any color always indicates that things are clickable. If some colored things can’t be clicked, suddenly it is confusing. But if every pink, yellow, blue, green, orange, red, or purple thing can be clicked, no problem! Color = click!

The less things the user has to learn to understand your design, the faster they will learn. So consistency is often a good rule of thumb, because it reduces the number of clickable styles the user has to learn. If you use a style that is common on the internet, they learn even faster.

****

So, in summary:

Goats are awesome. Sex tapes will make you famous. And difference and change are what makes things feel clickable.

Make your clickable styles different than other things in your design, and make clickable things change somehow when you users interact with them.

Then try to keep the number of clickable styles to a minimum. That will help your users learn your design faster.

****

Have questions? Ask me on Twitter!