Diseñando botones: Buenas prácticas, tipos y estados

Diseñando botones: Buenas prácticas, tipos y estados

Repasamos buenas prácticas básicas en el diseño de botones, para crear botones efectivos que mejoren la experiencia de usuario.

Los botones son un elemento cotidiano en la interacción de los usuarios. Les permite realizar acciones y elecciones con un solo toque, lo que les convierte en un elemento vital en el flujo de navegación e interacción.

Vamos a ver como podemos, de manera sencilla, mejorar la experiencia de usuario a la hora de interactuar con una app o un sitio web.

UX en botones. Haz que los botones parezcan botones.

Piensa siempre en accesibilidad y usabilidad orientada al usuario ¿Cómo entienden los usuarios a un elemento como un botón? Utiliza formas y colores para hacer que un elemento parezca y se vea como un botón.

UX en botones. Haz que los botones parezcan botones

El tamaño de los botones también juega un papel clave para ayudar a los usuarios a identificar estos elementos. Piensa siempre en mobile. Una parte muy importante del tráfico es generada a través de dispositivos móviles, donde las pantallas reducen el espacio de interacción. Un estudio de MIT Touch Lab encontraron que los promedios para las yemas de los dedos entre 8 y 10 mm, lo que hace que 40px x 40px sea un buen tamaño mínimo de contacto.

Ubicación y orden de los botones

Coloca los botones donde los usuarios puedan encontrarlos fácilmente o esperen verlos.
Cuidado con el orden y la posición de los botones. El orden en el que entran los botones, especialmente si hay pares correspondientes (como “anterior” y “siguiente”) es importante. Asegúrate de que el diseño ponga énfasis en la acción principal o más importante.

En el siguiente ejemplo, usamos un color rojo para el botón que realiza una acción potencialmente destructiva. Observa que la acción principal no solo es más fuerte en color y contraste, sino que también está en el lado derecho del diálogo.

Ubicación y orden de los botones

Textos o Etiquetas

Etiqueta los botones con lo que hacen. Añade un mensaje claro de lo que sucede al hacer clic.
El mismo ejemplo anterior pero sin las etiquetas de texto adecuadas. ¿Notas la diferencia?

Ubicación y orden de los botones

Llamada a la acción (CTA)

Haz que el botón más importante (especialmente si los usas para llamadas a la acción ) se vea como el más importante.

CTA, el botón más importante

Formas de botones

Por lo general, querrá hacer que los botones sean cuadrados o cuadrados con esquinas redondeadas, según el estilo del sitio o la aplicación. Algunas investigaciones sugieren que las esquinas redondeadas mejoran el procesamiento de la información y atraen la atención hacia el centro del elemento.

Asegúrese de mantener la coherencia en todos los controles de la interfaz, de modo que el usuario podrá identificar y reconocer los elementos de la interfaz de usuario de la aplicación como botones.

Tipos de botones y comportamiento

Botón con relieve

Es un botón típicamente rectangular que simula elevación añadiendo sombreado (el sombreado indica que es posible hacer clic). Los botones con relieve añaden dimensión a los diseños en su mayoría planos.

Se utilizan para dar más protagonismo a las acciones en diseños con una gran cantidad de contenido variable. Usa los botones con relieve para dar más importancia a la acción que ejecuta en botón.

Comportamiento

Los botones con relieve incrementan el efecto relieve y cambian de color al ser presionados.

Estado y comportamiento de botones

Los botones con relieve sobresalen más que los botones planos. Ejemplo de aplicación para Android.

botones con relieve en app android

Botón plano

Los botones planos carecen de relieve, pero cambian de color al presionarlos. El mayor beneficio de los botones planos es bastante simple: minimizan la distracción del contenido.

Se utilizan en diálogos (para unificar la acción del botón con el contenido del diálogo) y en barras de herramientas.

botones planos en app android

Botones que cambian de color al ser presionados.

comportamiento de botones planos

Botón plano en el cuadro de diálogo de la aplicación Android.

ejemplo de botones planos en cuadro de dialogo

Botón fantasma

Los botones fantasma son aquellos botones transparentes y vacíos que tienen una forma básica. Generalmente están bordeados por una línea fina, mientras que la etiqueta consiste en texto plano.

El botón Fantasma se utiliza en contenido secundario, para evitar competencia con el CTA principal. Lo ideal es que el usuario vea el CTA principal y luego (si no es relevante) lo omita en el botón secundario.

Ejemplo de botones fantasma

Se rellenan de color al ser presionados.

Ejemplo

La landing page de ejemplo muestra un botón fantasma junto al CTA principal.

Ejemplo de botón fantasma

Elegir el tipo de botón

La elección de un estilo de botón depende de la prioridad de la acción del botón, el número de contenedores en la pantalla y el diseño de la pantalla.

Función: ¿Es el botón lo suficientemente importante?

Dimensión: elija el tipo de botón según el contenedor en el que estará y cuántas capas de espacio z tenga en la pantalla.

Diseño: Utilice principalmente un tipo de botón por contenedor. Solo mezcle tipos de botones cuando tenga una buena razón para hacerlo, como enfatizar una función importante.

Estados del botón

Este punto no se trata tanto de cómo se ve el botón inicial para el usuario, sino que se trata de presionar un botón y encontrar que nada cambia. El usuario podría confundirse: “¿Es un botón o no? Ahora tengo que hacer clic para saber si esa cosa que parece un botón es en realidad un botón. Bien…”

El botón no es un objeto de un solo estado. Es multi-estado. Y proporciona una retroalimentación visual a los usuarios para indicar que el estado actual del botón debe ser una tarea de máxima prioridad.

Estado normal

Regla principal para este estado: el botón debe verse como un botón en un estado normal. Windows 8 es un buen ejemplo de este problema: es difícil para los usuarios saber si se puede hacer clic o no en un menú de configuración.

Estado enfocado

Es una buena práctica ofrecer una buena información visual a los usuarios que están sobre un botón. El usuario instantáneamente sabe que su acción va a ser aceptada y espera recompensas visuales.

Estado presionado

Al animar diferentes elementos de su diseño, puede agregar un poco de emoción y deleitar a sus usuarios con un movimiento creativo y útil.

Estado inactivo

Hay dos posibilidades: ocultar un botón o mostrarlo en estado desactivado.

Conclusión

Los botones tienen la finalidad de incitar a los usuarios a realizar una acción determinada. Haciéndolos atractivos e intuitivos, conseguimos una “conversación” fluida.

El diseño UX trata de hacerlos sencillos e intuitivos. Piensa en la web o en una app como una conversación con los usuarios.

Carlos Pinar

Carlos Pinar

Tengo más de 15 años de experiencia como Diseñador Web Front-End, Web Marketer y diseño UI. He trabajado tanto en grandes compañías como en pequeñas empresas, abarcando sectores como comunicaciones, formación y comercio electrónico. Mis pasiones son WordPress, en el que me he especializado, el diseño UI y e-Commerce, al que considero un campo por explotar.