Focusing on Buttons
By: Carlota Antón
Tags: Button Design, UX Design, UI Design, Accessibility, Design Systems

¿Have you ever tried to navigate a website without using a mouse or the touchpad?

This is an excellent exercise to understand how some people use their laptops to navigate the web. But now… assuming you are not part of that segment of the population ¿what would happen to you if you didn’t have a mouse and/or your touchpad was broken? You would actually have even more problems to fulfill a task because you are not even used to interact in that way.

We tend to wrongly assume that when we are tackling accessibility issues, we are addressing people with some kind of impairment. And the same way we do this, we also forget that we are all impaired in a lot of situations in our daily lives.

When you are coming home from grocery shopping, carrying a lot of things with the inability to use your hands, we could say you are momentarily impaired. When you are out in the sun and you are unable to see the screen of your phone you are momentarily impaired as well. When addressing issues of accessibility we are not only enabling people with impairments to access useful resources, we are making things easier for everyone.

I also want to be clear about the difference here with an example: For people having a voice assistant at home to be able to perform actions without using a device, might be convenient because it allows them to multitask. For someone with limited mobility or a blind person, this technology might be the only way to make certain things. What for some it is a “nice to have” for others it is a necessity. So it is something to be taken seriously. If you are curious: https://www.un.org/en/webaccessibility/index.shtml#

So…with that said let's talk buttons…

Why buttons?

Well… buttons and links are the primary way of communication between the user and the system. This is why it is really important to not overlook these elements in our UIs.

I am currently in charge of the definition and generation of elements for the Design System of an investment app. When working on a DS I would say the most important things to have into consideration are color theory and accessibility. In my short experience using Design systems, complaints regarding these two aspects are the most recurrent and the most difficult to solve. I want to share the problems I stumbled across and the decisions I made regarding buttons while working on the Design system of MyInvestor.

The anatomy of buttons

Buttons and links are elements used to perform actions that allow us to move around the system in which we are operating. It is true that there are differences between links and buttons and screen readers actually handles them slightly different, but visually they interact almost identical. That is why in the exercises shown below we are going to see examples of both, links and buttons. If you are interested in the difference between buttons and links, there are some very good articles and I have provided some links in the reference list at the end.

As interactive elements, it is important that users can recognize them from the rest of the static content to successfully perform the task they intend to do.

For this matter, buttons need to be:

Identifiable

Easy to find

Concise and clear

We could say that a basic button is usually built by form and color; and a distinctive label.