App buttons: tips front-end developers should keep in mind
App users must be aware that a button... is in fact a clickable button. Therefore, app buttons must be designed in such a way that users should feel invited to interact with the interface and actually click on it.
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:
- The shape of buttons: for decades now, most buttons are rectangular in shape with rounded edges. This has made it possible for users to internalize that elements such as these are buttons and can be clicked on to do something. Nowadays, most buttons still look the same but there are new trends, especially in native applications for mobile devices. These trends include circular buttons or buttons defined solely by the text that represents the resulting action. Promoted by Google, in Material design, there are three basic types of interactive buttons: Raised Button (rectangular with rounded corners), Floating Action Button (circular) and Flat Button (text only). Any combination of these types of buttons must be consistent with their environments and the types of actions they trigger.
- Button placement: the space buttons take within the interface must also be consistent across the product and follow the general trend to ensure that users are certain they are seeing an interactive button and know which actions will be triggered if they click on it: registration, open menu... Button placement must also vary depending on the user's interaction so that animations do not hide these elements. For example, when floating buttons are hidden under animated bars.
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.
Sign up to the BBVAOPEN4U newsletter and receive tips, tools and the most innovative events directly in your inbox.