Cómo diseñar mejor los botones para tu proyecto digital

Al diseñar un proyecto digital debes tener en cuenta algo muy simple, pero a la vez súper importante: los botones. Conocé en esta nota algunos tips de diseño para mejorar la funcionalidad y la experiencia del usuario, y así potenciar la conversión hacia tu sitio o tienda online.

Un botón es un elemento interactivo que contiene una llamada a la acción (en adelante CTA). Por ejemplo, si un botón dice “Registrarme”, al usuario le queda claro que, al clickearlo, lo llevará directamente a crearse una nueva cuenta. Ya sea para que el usuario guarde, descargue, compre, etc, los botones son esenciales en la UI (interfaz de usuario). Son los principales elementos que generan las conversiones en una web transaccional o de interacción.

Te presentamos algunos tips para diseñar botones que inviten a hacer click:

Un botón debe verse como un botón

Los botones en el mundo real suelen ser rectángulos o círculos. Hacerlos de una forma que no sea rectangular o circular va a ser muy confuso para el usuario.

TIP: Los bordes redondeados se consideran más amigables y de aspecto positivo que los de esquinas rectas. Pero, al mismo tiempo, son más difíciles para diseñar contenido a su alrededor.

¿Cuál es el tamaño ideal?

Los botones muy pequeños son molestos y difíciles de usar. Por lo tanto, deben ser lo suficientemente grandes como para que resulten cómodos para el usuario.

Mobile: 50×50 puntos es el tamaño ideal para que el botón sea cómodo para el dedo de un usuario.

Desktop: Es ideal una fuente de 18 px o más, y alrededor de ella, el padding o espaciado igual de arriba y de abajo. El padding de sus lados debe ser el doble que el de arriba y abajo. Dejá un margen de 10/15 px alrededor de todo el botón.

TIP: Usá colores que generen alto contraste con el fondo y ubicá el botón dentro del patrón del camino del usuario.

Usá iconos

Los íconos, junto con el texto, se utilizan para dar otra pista visual sobre el propósito del botón y comunicar el significado. Una buena regla general es comenzar con el ícono en lugar de mostrarlo después de la etiqueta.

Usá un ícono por etiqueta

Si usás muchos íconos en una sola etiqueta, se puede generar confusión, y además, no es una buena práctica UI.

Añadí sombras

Las sombras ayudan al objeto a resaltar en su fondo y a identificarlo como algo elevado y clickeable. Combiná los colores correctos para la etiqueta del botón y la letra. Los colores deben complementarse entre sí y el texto debe ser legible siempre.

Ajustá la alineación

El tamaño del contenedor y de la fuente son importantes. Si tenés un botón de 32pt con un texto de 17pt, no hay manera de que quede perfectamente centrado. Deberás ajustar alguno de los dos valores para que coincidan.

El CTA debe ser claro

Un botón debe dirigir al usuario a realizar la acción que se desea dentro de la interfaz. Enviá mensajes sencillos, de forma fácil y directa, y usá verbos de acción para que el usuario entienda lo que va a suceder al tocar ese botón.

Agregá una sola línea por etiqueta

Probá los botones en todas las pantallas y resoluciones para verificar que tus etiquetas tengan una sola línea, ya que, de lo contrario, se puede pasar por alto el texto y malinterpretar el CTA.

Ajustá el estilo

Juega con los estilos para que coincidan con el branding de tu proyecto…pero que no caiga en la monotonía.

TIP: Comunicá la importancia de cada tipo de acción con un estilo de botón. Creá una jerarquía visual para distinguir cada opción. El botón primario es el CTA principal, el secundario tiene el énfasis medio y el terciario el de menor importancia.

Sé consistente

La consistencia es uno de los principios más poderosos de la usabilidad. Al crear los estilos de botón, tratá de encontrar elementos comunes entre colores, formas, tamaños. Allí es cuando entra en juego el sistema de diseño.