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

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

Los usuarios deben saber que un botón es realmente un botón. Por eso, deben cumplirse las premisas necesarias para transmitirles que es un elemento donde se puede hacer clic y, además, debe invitar a usarlo, a que esa interacción con la interfaz se produzca.

BBVAOpen4U
|
23 Jun. 2017

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:

  • La forma de los botones: desde hace décadas la mayoría de botones han tenido forma rectangular con los bordes redondeados. Eso es lo que ha permitido que ese tipo de forma se haya instalado en la mente de los usuarios como elementos que son botones y que se pueden cliquear para hacer algo. Hoy en día, la forma habitual de los botones se sigue manteniendo, pero nuevas tendencias se han ido incorporando, sobre todo en aplicaciones nativas para dispositivos móviles, otro tipo de formas como la circular o donde el botón viene definido sólo por el texto que avanza la acción que esconde detrás. En el diseño Material Design, impulsado por Google, existen tres tipos básicos de botones de interacción: Raised Buttom (el rectangular con esquinas redondeadas), Floating Action Button (circular) y Flat Button (sólo textual). La combinación de los distintos tipos de botones debe guardar una coherencia en los entornos y tipos de acciones que desencadenan para ser consistente. 

  • La colocación de los botones: el espacio que ocupan los botones dentro de la interfaz también debe guardar una relación coherente y de consistencia en todo el producto y seguir la tendencia general para garantizar que el usuario sabe perfectamente que está ante un botón de interacción y qué tipo de acciones se pueden desencadenar al hacer clic: registro, desplegar un menú… También es importante cómo esa colocación varía a partir de la interacción con el usuario para evitar que las animaciones escondan los elementos debajo de otros. Por ejemplo, esconder botones flotantes bajo barras animadas. 

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

¡Suscríbete!

Recibe nuestro boletín semanal. No te pierdas nuestros trucos, consejos, artículos y los eventos más innovadores.