Uno de los elementos de la interfaz de usuario más frecuentes es el botón. Permiten que los usuarios interactúen con un sistema y realicen una acción permitiéndoles hacer elecciones. Los formularios, las páginas web, las ventanas de diálogo y las barras de herramientas tienen botones.
Es fundamental distinguir entre botones y enlaces. El diseño de los botones del sitio web se utiliza para dirigir a los visitantes a otras páginas, y los enlaces se utilizan para dirigir a los espectadores a otras páginas cuando quieres que realicen una acción (enviar, cancelar, eliminar) (sobre mí, leer más).
Es más probable que los usuarios realicen la acción que quieres que hagan si tus botones están bien diseñados. Este post te mostrará cómo hacer botones irresistibles en los que la gente quiera hacer clic en tu sitio web.
Ideas de diseño de botones para sitios web
A continuación hemos detallado algunos métodos de diseño de botones web excelentes y terribles para darte un curso intensivo para crear botones atractivos como los expertos.
1. Buen diseño de botones web
- Nítido: El texto y los colores del botón deben ser nítidos, claros y fáciles de leer. En los últimos años, el diseño de botones planos ha sido una tendencia de diseño web muy popular, por lo que es un estilo seguro para probar. Evita utilizar botones sofisticados y llamativos que puedan distraer a los lectores.
- Conciso: En los botones, lo ideal es utilizar un texto mínimo. La idea es utilizar sólo una o dos palabras. Más se vuelve incómodo y desconcertante. Tómate un respiro y pregúntate: "¿Qué quiero que haga el lector ahora mismo en la página? "La primera palabra que te venga a la mente es casi seguro que es un verbo. Para una redacción breve y concisa del botón, añade un adverbio de tiempo después.
- Contextual: ¿Cuál es la función del botón? ¿Qué hace exactamente? Los botones que son difíciles de entender no se pulsan. Si tienes un botón de "comprar ahora", debería llevar al visitante a una página en la que pueda introducir los datos de su tarjeta de crédito, en lugar de a una página en la que se hable de los productos que quiere comprar.
2. Mal diseño de los botones del sitio web
- No es responsivo: Cuando se trata de diseño web, la experiencia móvil es el rey. Como es casi seguro que diseñarás tus botones en un ordenador de sobremesa, tendrás que comprobar manualmente que también funcionan en los dispositivos móviles. Si te saltas este paso, el diseño de tus botones web puede ser demasiado grande o demasiado pequeño para un dispositivo móvil, lo que afectará a tu porcentaje de clics. Afortunadamente, la mayoría de las soluciones de CMS ofrecen un botón de alternancia que te permite previsualizar los elementos de tu página web en varios tipos de pantalla, lo que te permite modificar el diseño de tus botones en consecuencia.
- No hay color: Los botones brillantes y llamativos funcionan bien como CTA, ya que llaman la atención del visitante sobre aspectos importantes de la página. Ten en cuenta que tu sitio web es un viaje, y los botones que pongas en él deben servir de mapa. Tus lectores pueden tener dificultades para recorrer la página y convertir si no utilizas botones a todo color.
- Desalineación: En una cuestión similar, los visitantes pueden sentirse confundidos por los botones mal colocados. Un botón solitario en medio de un párrafo no ayudará e incluso podría empeorar las cosas si tus botones no están colocados en un lugar que anime al lector a obtener más información o a realizar una compra. Añade botones justo donde requieras que el visitante realice una acción para mantener las cosas sencillas. Cerca de una sección de características y beneficios, en la cabecera y hacia el final de la página son algunos ejemplos de estos lugares.
Inspiración para el diseño de los botones del sitio web
Imagen obtenida del usuario de Strikingly
Antes de empezar a diseñar tu propio botón, echa un vistazo a varias plantillas gratuitas para ver qué hay disponible, qué se adapta a tu estilo y qué tiene más sentido para tu sitio web.
1. Hazlo fácil para ti
Todo se reduce al viejo adagio del diseño: "Mantenlo simple, estúpido" (o tonto, si lo prefieres). El diseño de los botones del sitio web no es una excepción. El diseño de un botón no tiene que ser extremadamente complicado. Debe ser evidente y práctico. Otras tendencias de diseño de botones de sitios web pueden obstaculizar esto, lo que puede perjudicar la tasa de conversión de tu sitio web. Así que, cuando pienses en ideas de diseño de botones, ten esto en cuenta, y no lo pienses demasiado. Un botón debe tener la apariencia de un botón. Eso es todo.
2. Asegúrate de que hay mucho contraste
Es casi tan crucial como tener un botón distinguible asegurarse de que es visible. Debido a que los botones no tenían suficiente contraste para ser inmediatamente discernibles, los estilos de botones fantasma sobre los gráficos se desvanecieron rápidamente. Los usuarios no pudieron localizarlos de inmediato.
Los botones con poco contraste no deben ocultarse. Hazlos resaltar utilizando mucho contraste de color y espacio para diferenciarlos de los demás elementos de la pantalla. Deja mucho espacio alrededor de los botones para que puedan respirar. Esto facilita que los usuarios detecten y reconozcan los botones como objetos sobre los que se puede hacer clic y hace que sea físicamente más fácil pulsarlos sin seleccionar accidentalmente el equivocado.
3. Utiliza el color
Imagen obtenida del usuario de Strikingly
¿Te has fijado alguna vez en la cantidad de botones rojos o naranjas que hay? Como los colores brillantes atraen la mirada hacia estos elementos e inspiran la acción, se utilizan de esta manera. El color también es una técnica de diseño de botones de sitios web muy popular hoy en día. El color puede ayudar a los consumidores a conectar con un diseño de varias maneras, desde tonos vibrantes hasta botones con simples degradados.
4. Crea un microcopy que provoque anticipación
No cometas este error: Escribir las palabras "Haz clic aquí" en un botón. (¿No suena a spam?) La microscopía del diseño de un botón debe proporcionar al usuario una idea clara de lo que ocurrirá cuando haga clic en él. Informa a los usuarios de lo que van a recibir a continuación. Puede ser tan sencillo como hacer clic en "Enviar" para introducir información, o hacer clic en un enlace para "Saber más" o ver un vídeo. Indica a los usuarios cuál es la acción en el microcopy, independientemente de cuál sea. Esta información puede ayudar a crear confianza en el usuario y a aumentar las conversiones mediante acciones/interacciones que la gente encuentre atractivas.
5. Utiliza una animación sutil para atraer a tu audiencia
Los sitios web utilizan cada vez más dos botones uno al lado del otro en su diseño. Uno está relleno, mientras que el otro es fantasmal. Ambos tienen un movimiento hover que llama la atención sobre dos opciones en las que se puede hacer clic. El uso de la animación puede ayudar a llamar la atención sobre el diseño de los botones de un sitio web y quizás instar a la gente a hacer clic en ellos. Las animaciones en los botones se han convertido en un comportamiento frecuente de los usuarios, y sirven como una señal directa para que los usuarios se comprometan. Pero no exageres. Los botones que giran, dan vueltas y parpadean son más molestos que beneficiosos.
6. Amplíalo lo suficiente para tocarlo
Imagen obtenida del usuario de Strikingly
Los botones deben tener una región cliqueable (tappable) con un diámetro de al menos 10 milímetros, pero siempre es aceptable que sea mayor. Este consejo procede de un estudio del MIT Touch Lab que analizó el tamaño de las almohadillas de los dedos en relación con los dispositivos táctiles. Pongamos esto en contexto. En un teclado de ordenador físico, una tecla típica mide 15 milímetros por 15 milímetros. Es un objetivo excelente. (Sólo tienes que tener en cuenta que los distintos anchos de pantalla harán que tu botón desaparezca en los dispositivos pequeños). Si debes utilizar botones diminutos, intenta darles un radio de clic grande. Si el usuario no ve los botones en sí, seguirá habiendo suficiente espacio alrededor de ellos para que se produzca la acción prevista. (Los visitantes de tu sitio web lo agradecerán).
7. Utiliza un estilo con el que ya estés familiarizado
Todo el mundo está familiarizado con algunos tipos de diseño de botones para sitios web. Utiliza uno de ellos.
- Un botón rectangular relleno con esquinas cuadradas y texto en el interior
- Un botón rectangular relleno con bordes redondeados y texto en el interior
- Un botón rectangular relleno con una notable sombra paralela (arriba)
- Un botón rectangular fantasma
8. Colocar en un lugar previsto
Imagen obtenida del usuario de Strikingly
Los botones no sólo deben aparecer y funcionar como se espera, sino que también deben colocarse en un lugar donde la gente los busque.
- Esto incluye la colocación de los botones detrás de un titular principal o de un bloque de contenido en las páginas de inicio. Los botones suelen estar alineados con el texto o en el centro de la pantalla.
- Los botones muestran las siguientes entradas en los formularios. En algunos formularios de una sola entrada, el botón de la misma fila que el campo de entrada se alinea a la derecha del campo de entrada.
- Los botones CTA de uso general se muestran exactamente debajo del contenido al que se refieren.
- Los botones de reproducción o inicio de un vídeo o juego suelen estar situados en el centro de la pantalla de vista previa.
- Los botones de comercio electrónico o del carrito de la compra suelen encontrarse en la esquina superior derecha.
9. No te olvides de dar tu opinión
¿El diseño de los botones del sitio web responde a sus acciones? Asegúrate de que el diseño de la interfaz de los botones tiene una retroalimentación evidente. Ofrece un indicador visual o verbal de que el botón ha completado su tarea. Algunos botones tardarán más en completarse que otros. Si la nueva página se carga, los botones que conectan con otra página o sitio web, por ejemplo, proporcionan una retroalimentación de que el botón ha funcionado. Si la información se completa correctamente, un botón de envío de formulario puede mostrar un mensaje de "gracias" en la pantalla.
10. Utiliza los botones de forma intencionada
Cuando hay demasiados botones, se produce un caos. Cuando los botones sean apropiados, utilízalos. No hagas el diseño demasiado recargado esparciendo botones por todas partes. Los usuarios no sabrán dónde hacer clic y qué es lo más importante. Para utilizarlos con los objetivos del sitio web, guarda los botones. Deben dirigir a los visitantes a las partes más significativas de tu diseño general.
¿Cómo hacer un diseño de botón web llamativo?
¿Quieres hacer un botón de sitio web pero no sabes cómo? Estás cubierto con Strikingly. Con Strikingly puedes desarrollar botones de comercio electrónico que atraigan a tus clientes y les animen a comprar tus productos. Cabe destacar que puedes cambiar la opción "Comprar ahora" por "Reservar ahora". ¡Se han ampliado las opciones de estilo y alineación de los botones individuales! Para acentuar un botón, hazlo más grande o cambia su color. También puedes modificar la fuente del botón en el tema de tu sitio web. Para hacer o modificar los botones de tu sitio web de Strikingly Haz clic en "ESTILOS" en el editor de tu sitio. Aparecerá un panel de estilos que contiene Encabezados y Navegaciones, Secciones y Botones, como se muestra a continuación.
Imagen obtenida de Strikingly
Conclusión
Un botón del sitio web es un componente que convierte una llamada a la acción en un resultado. Ten en cuenta todos los aspectos de este diseño, desde el color hasta la función y el microcopy. Prueba el diseño de un botón del sitio web para garantizar que tu interfaz tiene la versión más funcional. Si tienes un botón que funciona, no te dejes llevar por la moda y modifica el diseño. Cuando se trata de botones, la funcionalidad debe ser siempre lo primero.
