Hello Reader,

Make it easy to spot interactive elements.

I might not have drawn the best illustration, but I’ll try to explain.

First, we should learn about signifiers. Here is the definition from the Interaction Design Foundation:

I’m going to show a bad example for the sake of demonstrating why certain elements might not look interactable or may not look “sufficiently” interactable.

In the left image, apparently, nothing looks interactable. But what exactly should we do to fix it?

1. Links should be underlined. This not only makes it more obvious that they are links, but also addresses an accessibility issue: users with color vision deficiencies will benefit from the underlining.
2. If the textarea can be resized, there should be a handle that can be dragged. Ideally, it should stand out enough to be easily seen.
3. In the dropdown, apart from having an icon (which is essential), we can also play around with background and shadows to make the input look like something clickable.
4. And the last thing is the button. It should not only look like a button (having a background, standing out enough to be clearly visible) but we can also use an icon as a signifier that the form will be submitted.

There are many cases when we can forget about it. We tend to forget about such things as:

1. Reaction on mouse hover (read about affordance)
2. Placing an icon, e.g., in a file upload area
3. Making the element stand out enough to be considered as an interactive element
4. Links should be underlined
5. Carousels (if you use them) should have large, clearly visible handles that are easy to hit

And so on.

Thank you and have a nice day.

​