El arte del diseño de botones de la interfaz de usuario del sitio web: 10 tendencias y consejos
El gran diseño de botones es algo en lo que la mayoría de los usuarios del sitio web nunca piensan ... porque cuando funciona bien, es casi invisible. 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, observamos 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. Dale un impulso al diseño de tu botón con estos consejos, tendencias e ideas para inspirar.
Explore los recursos de diseño
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 tiene que ser demasiado complejo. Debe ser obvio y funcional. A veces, otras tendencias de diseño pueden interferir con esto, y eso puede afectar las conversiones en su sitio web.
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. Proporcione 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 cual los estilos de los botones fantasma en la parte superior de las imágenes se desvanecen rápidamente se deben a que los botones no tenían suficiente contraste para ser fácilmente discernibles. Los usuarios no pudieron encontrarlos de inmediato.
No escondas botones con poco contraste. Haz que se destaquen y griten con mucho color y contraste de espacio para que se destaquen de otros 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 para que los usuarios encuentren e identifiquen como elementos en los que se puede hacer clic, y también hace que sea físicamente más fácil hacer clic sin obtener el elemento incorrecto por error.
3. Use color
¿Alguna vez has notado cuántos botones son rojos o naranjas? Es porque los colores brillantes atraen la atención hacia estos elementos y alientan la acción.
Usar color también es una técnica de diseño bastante moderna. Desde colores brillantes hasta botones con gradientes simples, el color podría ser una de las formas más fáciles de ayudar a las personas a interactuar con el diseño.
4. Escribe una microcopia que crea expectativas
No cometa este error: un botón con las palabras "Haga clic aquí". (¿Qué tan spam es eso?)
La microcopia dentro del diseño de un botón debe crear una expectativa clara de lo que sucederá con un clic. Dígales a los usuarios qué obtendrán a continuación. Esto podría ser tan simple como "Enviar" para ingresar datos, o hacer clic en un enlace para "Obtener más información", o mirar un video. Independientemente de cuál sea la acción, informe a los usuarios en la microcopia.
Esta información puede ayudar a crear confianza con los usuarios y aumentar las conversiones con acciones / interacciones que los usuarios consideran deseables.
5. Comprometerse con la 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, uno es un estilo fantasma. Ambos incluyen una animación de desplazamiento 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 fomenta los clics. Se ha convertido en un patrón de usuario comúnmente aceptado para incluir una animación de desplazamiento en los botones y proporciona una señal simple a los usuarios de que deberían participar.
Simplemente no te vayas por la borda. Los botones que giran, giran y parpadean son más molestos que útiles.
6. Que sea lo suficientemente grande como para aprovechar
Los botones deben incluir un área en la que se pueda hacer clic (tappable) que tenga al menos 10 milímetros de diámetro y que sea más grande siempre está bien. Este consejo proviene de un estudio realizado por el MIT Touch Lab que analizó los tamaños de las almohadillas de los dedos en relación con los dispositivos táctiles.
Pongamos eso en perspectiva. La tecla típica en un teclado físico de computadora es de 15 milímetros por 15 milímetros. Esa es una buena meta. (Simplemente no olvide tener en cuenta los diferentes tamaños de pantalla para que su botón no se pierda en pantallas pequeñas).
Si necesita usar botones más pequeños, considere agregarle un radio de clic amplio. De esa manera, si el usuario pierde los botones, hay suficiente espacio alrededor para que la acción deseada aún ocurra. (Los visitantes de su sitio web se lo agradecerán).
7. Use un estilo familiar
Hay algunos estilos de botones generales con los que todos están familiarizados. Usa uno de ellos.
- Un botón relleno rectangular con bordes cuadrados y texto dentro
- Un botón relleno rectangular con bordes redondeados y texto dentro
- Un botón relleno rectangular con una sombra visible (arriba)
- Un botón fantasma rectangular
- Botones circulares simples, más comúnmente utilizados en la esquina inferior derecha para indicar soporte, ayuda o chat
8. Poner en un lugar esperado
Los botones no solo deben aparecer y funcionar de manera esperada, sino que también deben ubicarse en un lugar donde los usuarios los busquen.
- Para las páginas de inicio, esto incluye la colocación de botones debajo de un título principal o bloque de texto. Los botones generalmente se dejan alineados con el texto o en el centro de la pantalla.
- Para los formularios, los botones aparecen después de las entradas. Algunos formularios de entrada única alinean el botón en la misma fila a la derecha de la entrada.
- Los botones generales de CTA aparecen directamente debajo del contenido al que hacen referencia.
- Los botones para jugar o iniciar un video o juego a menudo están en el centro de la pantalla de vista previa.
- El carrito de compras o los botones de comercio electrónico generalmente están en la esquina superior derecha.
9. No olvides tu opinión
¿El botón responde a la interacción? Asegúrese de que haya un bucle de retroalimentación obvio incluido 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 enlazan a otra página o sitio web, por ejemplo, proporcionan comentarios de que el botón ha funcionado si se carga la nueva página. Un botón de envío de formulario puede proporcionar un mensaje de agradecimiento en la pantalla si la información se envía correctamente.
10. Use los botones intencionalmente
Demasiados botones crean caos.
Use botones donde tengan sentido. No sobrecargue el diseño con botones en todo el lugar. Los usuarios no tendrán una idea clara de dónde y qué es más importante hacer clic.
Guardar botones para usar con los objetivos del sitio web. Deben conducir 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. Pruebe los diseños de botones para asegurarse de que tiene la versión más funcional en su interfaz.
Si tiene un botón que funciona, no caiga en la trampa de las tendencias y cambie el diseño. Cuando se trata de botones, la función debe ser la máxima prioridad.
