Don't fake interactive areas

Again again and again I click on "buttons" just to figure out that the element that looked like a button, triggered a pointer cursor and had a hover effect, is not interactive at all. This is not only frustrating, but also makes a user feel stupid as they feel like they are doing something wrong. This is not a good user experience and you should avoid it.

An example

Click this button:

Were you able to make it directly? If you were, feel lucky, because in my testing not a single person was able to make it first try. Some even just assumed the button doesn't work after clicking it 2 or 3 times. If you have a button like this, you should rething how you're implementing buttons.

Another example

In this section, select the nav item "...":

Was it just as annoying as the first example? I hope so, but it's more likely you got it right the first time, as you're primed by the first demo. Still, the "..." is a small item to hit.

You should keep in mind that your users do not have this priming and they will probably keep clicking around. This is still not a good experience.

What's the problem?

To put it simple: Reimplementing the browser's native elements or wrapping them to a point where the visual "button" is detatched from the actual button.

Let's say your code looks like this:

html
<div class="button">
  <button>Click me</button>
</div>

Now you might add some CSS like this:

css
.button {
  padding: 1rem 2rem;
  background-color: red;
  cursor: pointer;
}

.button button {
  background-color: transparent;
  border: none;
  color: white;
  appearance: none;
  -webkit-appearance: none;
}

This looks something like this:

But the problem is, that based on the layout, the items look like this:

...and only the button is interactive. and the outer div is not.

Is it only buttons?

Obviously not. The same "problem" also applies to links and any other interactive element. Even worse when you're "faking" interactivity on a style level like adding cursor: pointer to the wrapper element (I intentionally did this above, but I've seen this many times in real production sites of major companies before).

How to fix it?

Click me

Just use and style the element...

Your visual elements should somewhat match the actual DOM. From my experience you won't have any or little problems with this if you actually have a semantic DOM and your elements have semantic meaning without tons of wrapper elements. If you've gone the "React route" of tons of wrapper elements, you'll be fighting hard for this.

So the "fixed" code for the button above looks like this:

html
<button>Click me</button>

css
button {
  background-color: red;
  color: white;
  padding: 1rem 2rem;
  appearance: none;
  -webkit-appearance: none;
}

And with this "fix" applied every single tester was able to click the button on the first try. This is a huge difference and a much better experience for your users.