Botones dentro de las aplicaciones: consejos para desarrolladores ‘front-end’

Los botones son uno de los elementos más comunes en cualquier aplicación nativa. Son la forma más habitual en la que interactuamos con la interfaz de usuario, junto a campos de texto (ya sean formularios o buscadores), pero no son sencillos de diseñar.
Botones dentro de las aplicaciones: consejos para desarrolladores ‘front-end’
Botones dentro de las aplicaciones: consejos para desarrolladores ‘front-end’

BBVA API Market

Los botones son uno de los elementos más comunes en cualquier aplicación nativa. Son la forma más habitual en la que interactuamos con la interfaz de usuario, junto a campos de texto (ya sean formularios o buscadores), pero no son sencillos de diseñar.

Los botones son uno de los elementos más comunes en cualquier aplicación nativa. Son la forma más habitual en la que interactuamos con la interfaz de usuario, junto a campos de texto (ya sean formularios o buscadores). Y aunque parezcan elementos sencillos de diseñar, lo cierto es que no lo son. Esa es la razón por la que en la actualidad existen numerosas librerías con las que diseñadores y desarrolladores de front-end salvan el escollo de diseñarlos desde cero. Este es un listado de algunos consejos prácticos para no cometer errores en este elemento tan sensible:

1. El usuario debe saber que es un botón

Puede parecer un detalle absurdo, pero no lo es. Todos los elementos en la pantalla deben transmitir, sin ninguna duda, lo que son y el objetivo de que estén en la interfaz de usuario y las acciones que se pueden desencadenar si se interactúa con ellos. Un botón debe parecer un botón y quedar claro qué acciones concretas se conseguirán si uno decide interactuar con él. Esto se resume en el término anglosajón clickability: los botones tienen que ser elementos que el usuario interprete como zonas de la interfaz donde puede hacer clic para algo concreto. Esta meta se alcanza usando algunos patrones de diseño que ya forman parte del ADN de cualquier diseñador y, por extensión, de todos los usuarios globales:

2. Los botones forman parte de un contexto

Los botones son un elemento de interacción, pero también lo son de diseño. Y forman parte de un contexto, con una línea gráfica concreta. Por tanto, el estilo de esos elementos debe ir en sintonía con el entorno, con la capacidad de apuntalar esa línea gráfica y aportar su granito de arena a la consistencia del proyecto visual. Los botones son algo más que una forma: tienen un color, un tamaño, se pueden usar degradados, sombras, efectos, animaciones… Debe existir una coherencia. No es muy aconsejable el uso de sombras excesivas o borrosas o no usar botones con un leve borde en la caja si se encuentran en una interfaz con un fondo claro.

Un elemento interesante es que el diseño de los botones debe aportar valor a las acciones que hay detrás de los elementos y, en última instancia, a los objetivos del proyecto. No hay nada peor que un botón a través del que se accede a un registro que no invite a la interacción, no avance su finalidad y no consiga altas de usuarios.

3. Objetivo número uno: affordance

Este consejo es la mezcla perfecta de los dos anteriores. Es un objetivo que puede parecer más holístico que real, pero que puede suponer un aumento de ventas, altas en una newsletter o mayor número de páginas vistas… Affordance es el término usado por los anglosajones para definir la capacidad que tienen los elementos de una interfaz y su coherencia y consistencia con el entorno para lograr que un usuario haga lo que se espera de él. Es un término muy utilizado en campos tan dispares, pero tan conectados en el desarrollo de producto, como la psicología cognitiva, el diseño industrial, la inteligencia artificial o el HCI (Interacción Humano Máquina).

Tal vez, aunque no tiene una traducción al castellano especialmente buena, el término en que mejor definiría affordance, tal vez, es invitación al uso. Es interesante para cumplir con el objetivo de invitar a la interacción, jugar con los botones, pero también con los copies de texto y los recursos de señalización para contextualizar el proceso de interacción entre el usuario y la propia interfaz. La máxima de que el usuario siempre debe conocer qué está pasando en la interfaz y hacia dónde le llevan sus interacciones, casi siempre, cumple con ese affordance.

¿Te interesan las APIs financieras? Descubre todas las que te ofrece BBVA

También podría interesarte