El arte del diseño de botones para sitios web: 10 tendencias y consejos

Un gran diseño de botones es algo en lo que la mayoría de los usuarios de sitios web nunca piensan… porque cuando funcionan bien, son casi invisibles. Los mejores botones son fáciles de hacer clic o tocar, tienen una función obvia y ayudan a los usuarios a interactuar con el diseño sin pensar.

Es una fórmula bastante simple, pero puede ser difícil de diseñar si la deja como una ocurrencia tardía.

Hoy, analizamos las tendencias en el diseño de botones, además de algunos consejos para ayudarlo a diseñar un botón de interfaz de usuario en el que las personas hagan clic una y otra vez. Mejore el diseño de sus botones con estos consejos, tendencias e ideas para despertar la inspiración.

1. Mantenlo simple

Todo vuelve a esta frase clásica en la teoría del diseño: Keep It Simple, Stupid (o Silly, si lo prefiere).

El diseño del botón del sitio web no es diferente. El diseño de un botón no debe ser demasiado complejo. Debe ser obvio y funcional. A veces, otras tendencias de diseño pueden evitar esto y esto puede afectar las conversiones en su sitio.

Entonces, cuando se trata del diseño de botones, piense así, y no lo piense demasiado. Un botón debe verse como un botón. Es así de simple.

2. Da mucho contraste

Casi tan importante como tener un botón identificable es asegurarse de que sea fácil de ver.

La razón por la que los estilos de botones fantasma en la parte superior de las imágenes se convirtieron en una tendencia y se desvanecieron rápidamente es porque los botones no tenían suficiente contraste para ser fácilmente distinguibles. Los usuarios no pudieron encontrarlos inmediatamente.

No oculte los botones de bajo contraste. Haz que se destaquen y griten con mucho contraste de color y espacio para que se destaquen de los demás elementos en la pantalla. Deje suficiente relleno alrededor de los botones para que puedan respirar.

Esto hace que los botones sean más fáciles de encontrar e identificar como elementos en los que se puede hacer clic, y hace que sea más fácil hacer clic físicamente sin obtener accidentalmente el elemento incorrecto.

3. Usa colores

¿Alguna vez has notado cuántos botones son rojos o naranjas? Es porque los colores brillantes llaman la atención sobre estos elementos y fomentan la acción.

El uso del color también es una técnica de diseño bastante de moda. Desde colores brillantes hasta botones con degradados simples, el color puede ser una de las formas más sencillas de ayudar a las personas a interactuar con el diseño.

4. Escribir microcopia que genere expectativas

No cometa este error: un botón con las palabras «Haga clic aquí». (¿Qué tan spam es eso?)

La microcopia en el diseño de un botón debe crear una expectativa clara de lo que sucederá con un clic. Indique a los usuarios lo que obtendrán a continuación. Esto puede ser tan simple como «Enviar» para ingresar datos, hacer clic en un enlace para «Más información» o mirar un video. Cualquiera que sea la acción, díselo a los usuarios en la microcopia.

Esta información puede ayudar a generar confianza en los usuarios y aumentar las conversiones con acciones/interacciones que los usuarios consideran deseables.

5. Participa con una animación sutil

Hay una tendencia en el diseño de botones donde los sitios web usan dos botones uno al lado del otro. Uno está lleno, el otro es un estilo fantasma. Ambos incluyen una animación flotante que enfatiza aún más dos opciones en las que se puede hacer clic.

La animación puede ayudar a llamar la atención sobre los botones e incluso fomentar los clics. Se ha convertido en un patrón de usuario comúnmente aceptado para incluir una animación de mouseover en los botones, y les da una pista simple a los usuarios de que deben participar.

Simplemente no te excedas. Los botones giratorios, giratorios y parpadeantes son más molestos que útiles.

6. Hazlo lo suficientemente grande como para tocarlo

Los botones deben incluir un área en la que se pueda hacer clic (presionar) que tenga al menos 10 milímetros de diámetro, y más grande siempre está bien. Este consejo proviene de un estudio realizado por Laboratorio táctil del MIT que mostró los tamaños de los dedos en relación con los dispositivos táctiles.

Pongamos esto en perspectiva. La tecla típica en un teclado de computadora físico es de 15 milímetros por 15 milímetros. Es un buen objetivo. (Recuerde tener en cuenta los diferentes tamaños de pantalla para que el botón no se pierda en las pantallas pequeñas).

Si debe usar botones más pequeños, considere agregar un radio de clic grande. De esa manera, si el usuario pierde los botones, hay suficiente espacio alrededor de ellos para que la acción deseada siga ocurriendo. (Los visitantes de su sitio web se lo agradecerán).

7. Usa un estilo familiar

Hay algunos estilos de botones generales con los que todo el mundo está familiarizado. Usa uno de ellos.

• Un botón rectangular lleno de bordes cuadrados y texto dentro
• Un botón rectangular relleno con bordes redondeados y texto dentro
• Un botón rectangular relleno con una sombra paralela (arriba)
• Un botón fantasma rectangular
• Botones circulares simples, más utilizados en la esquina inferior derecha para indicar soporte, ayuda o chat.

8. Poner en una ubicación esperada

Los botones no solo deben aparecer y funcionar como se espera, sino que también deben ubicarse donde los usuarios los buscarán.

• Para las páginas de inicio, esto incluye colocar botones debajo de un encabezado principal o bloque de texto. Los botones generalmente se alinean a la izquierda del texto o en el centro de la pantalla.
• Para formularios, los botones aparecen después de las entradas. Algunas formas de entrada única alinean el botón en la misma fila a la derecha de la entrada.
• Los botones de CTA generales aparecen directamente debajo del contenido al que se refieren.
• Los botones para reproducir o iniciar un video o juego suelen estar en el centro de la pantalla de vista previa.
• Los botones del carrito de compras o de comercio electrónico generalmente se encuentran en la esquina superior derecha.

9. No olvides los comentarios

¿El botón responde a la interacción? Asegúrese de que haya un circuito de retroalimentación obvio integrado en el diseño de la interfaz del botón.

Proporcione una señal visual o instructiva de que el botón ha hecho su trabajo. Algunos botones requerirán más trabajo que otros. Los botones que vinculan a otra página o sitio, por ejemplo, brindan información de que el botón funcionó si se carga la nueva página. Un botón de envío de formulario puede proporcionar un mensaje de «gracias» en la pantalla si la información se envía correctamente.

10. Usa botones intencionalmente

Demasiados botones crean caos.

Utilice los botones donde tengan sentido. No sobrecargues el diseño con botones por todas partes. Los usuarios no tendrán una idea clara de dónde y qué es más importante hacer clic.

Guarde los botones para usarlos con los objetivos de su sitio. Deben llevar a los visitantes a los elementos que son más importantes en su diseño general.

Conclusión

Un botón de sitio web es un elemento que convierte su llamado a la acción en un resultado. Tómese el tiempo para pensar en este diseño, desde el color hasta la función y la microcopia. Prueba el diseño de los botones para asegurarte de tener la versión más funcional en tu interfaz.

Si tienes un botón que funciona, no caigas en la trampa de la tendencia y cambia el diseño. Cuando se trata de botones, la función debe ser la máxima prioridad.