App buttons: tips front-end developers should keep in mind

Buttons are one of the most common elements in any native application. Together with text fields (either forms or search engines), they are the most frequently used way of interacting with the user interface. And even though they seem easy to design, in fact they are not.
3 min reading
App buttons: tips front-end developers should keep in mind
App buttons: tips front-end developers should keep in mind

BBVA API Market

Buttons are one of the most common elements in any native application. Together with text fields (either forms or search engines), they are the most frequently used way of interacting with the user interface. And even though they seem easy to design, in fact they are not.

Buttons are one of the most common elements in any native application. Together with text fields (either forms or search engines), they are the most frequently used way of interacting with the user interface. And even though they seem easy to design, in fact they are not. That’s why there are currently countless libraries that front-end designers and developers use to save their efforts when designing app buttons. Here is a list of useful tips so that you don’t make any mistakes with such a sensitive element:

1. Users must know it is in fact a button

This may sound like an absurd detail but it is not. All on-screen elements must undoubtedly convey what they are and what their purpose is as well as the actions that can be triggered when you interact with them. A button must look like a button and it must be clear which specific actions will be achieved when you interact with it. This idea is summarized in the term clickability: buttons must be elements that the user sees as interface areas where they can click to achieve something specific. To reach this goal designers use design patterns that are already inherent to their DNA and, by extension, to the DNA of users all over the world: 

2. Buttons are elements in a context

Buttons are design as well as interaction elements. And they are part of a context with a specific graphic approach. As a consequence, their style must be in line with their environment; it must shore up the graphic design and add its grain of sand to a consistent visual project. Buttons are more than a shape: they have a certain color and size; you can use tints, shadows, effects, animations… There must be consistency. It is not very advisable to use shadows in excess or blurry shadows or not to use buttons with light borders when they are set against a light background.  

Interestingly, button design must add value to the actions buttons trigger and, ultimately, to the project’s goals. There is nothing worse than a button that leads to a registration section that does not prompt you to interact, does not move its purpose forward and does not get users to register. 

3. Number one goal: affordance

This tip combines the other two perfectly. This objective may seem more holistic than real but it can result in increased sales, increased registrations in a newsletter, or more pages viewed… Affordance is used to define the capacity of interface elements and their consistency with their environment so that users do what it expected of them. This term is commonly used in many disparate fields that are strongly linked in the context of product development, such as cognitive psychology, industrial design, artificial intelligence and Human-Computer Interaction (HCI).

A possible definition of affordance is perhaps invitation to use. It is an interesting concept when you wish to fulfill the goal of inviting interaction, playing with buttons as well as with text copies and the resources that put the interaction process between the user and the interface into context. The principle that users must always know what is happening in the interface and what their interactions trigger almost always helps you achieve affordance. 

Are you interested in financial APIs? Discover all the APIs we can offer you at BBVA

It may interest you