Los botones son elementos bastante comunes en una gran variedad de sitios web. Parecen ser un elemento pequeño, mínimo y simple en una interfaz web, sin embargo, existen ciertas características que todo botón debe tener. Asimismo, al ser un importante elemento que impacta directamente en la tasa de conversión, debes tomar ciertas consideraciones en cuenta. En este artículo te mencionamos algunos consejos prácticos para mejorar el diseño y crear botones de llamada a la acción efectivos.
Diferenciarlos como botones
Uno de los primeros pasos para diseñar botones es que debes hacerlos lucir como elementos interactivos. Es decir, que los botones luzcan como tal para que no haya duda de que se puede interactuar con ellos.
Los usuarios ya tienen ciertas expectativas en referencia a los botones de llamada a la acción, todas ellas en base experiencias previas con otras interfaces. Así que es recomendable seguir con los estándares de diseño de botones. Tanto la forma como la ubicación son indicadores para los usuarios de que es un botón lo que ven en la interfaz. Es usual que los botones sean rectangulares pues hay más espacio para escribir una frase de llamada a la acción. En ciertos casos los botones son largos, pero posee esquinas redondeadas.
Es importante también que al decidir la forma de los botones tomes en cuenta la coherencia pues ese mismo diseño debe mantenerse en todos los botones.
Añade frases claras
Aparte de considerar la forma de tus botones, la frase que se indica dentro del botón es importante. Sin esta frase, los usuarios no saben qué resultado esperar al hacer click sobre un botón.
La frase debe ser descriptiva y específica, debes evitar colocar “click aquí” pues aunque es un indicador de que deseas que el usuario haga click sobre el botón, no le estás informando sobre el resultado, es decir, no sabe exactamente para qué sirve el botón a menos que lea algún texto de apoyo que seguramente has incluido en alguna zona cercana al botón. Así que, en vez de emplear este tipo de frases opta mejor por acciones específicas como “Suscribirme ahora” o “Quiero una prueba gratuita”.
La frase debe ser directa, corta y simple. Así que debes analizar que verbo expresa de mejor manera la acción específica que deseas que el usuario realice.
Ubica los botones en un lugar visible
Un botón efectivo no solo se logra mediante una frase directa, mucho tiene que ver la ubicación del mismo. La práctica común suele ser colocar el botón en el primer pantallazo, de esta manera es visible no bien el usuario acceda a la página principal del sitio. Sin embargo, ¿qué tan común es que un nuevo visitante acceda a una prueba gratuita? Pueden existir usuarios que ingresen al sitio web y accedan inmediatamente a una prueba gratuita pues ya conocen previamente sobre el producto o servicio. Pero también se puede dar el caso de nuevos visitantes que ingresan a tu sitio web por primera vez para conocer más sobre el servicio o la plataforma.
Para poder complacer a ambos tipos de usuarios, la técnica que puedes utilizar es colocar el botón de llamada a la acción en el pantallazo inicial y también al final de la página de inicio. En sitios web que solo se han creado con el propósito de promocionar un servicio o plataforma, se suelen colocar estos botones tanto al inicio como al final de la página. Ya que no hay un gran volumen de contenido, puedes utilizar esta técnica.
Toma en cuenta el color
Los botones de llamada a la acción son elementos que deben captar la atención de los usuarios y diferenciarse del resto los elementos que forman parte del sitio web y con los que el usuario no puede interactuar. La ubicación, en cierto modo, logra este objetivo pues usualmente un botón se encuentra ligeramente separado del cuerpo de texto y se utiliza otra tipografía para escribir la frase de llamada a la acción. Pero aparte de considerar estas características, debes tener en cuenta además el color de los botones, más específicamente el contraste que presenta el botón con el resto de la interfaz.
Es este contraste el que permitirá destacar dicho botón. Así que considera los colores utilizados en la interfaz y emplea alguno que haga contraste con el fondo para tu botón. Existen ciertos estilos de botones que no tienen relleno, llamados botones fantasma. También puedes utilizar este estilo, solo recuerda que el color de texto para la frase colocada debe tener alto contraste con el fondo.
No olvides las micro-interacciones
Aparte de considerar la forma, frase y aspecto general de tus botones, debes tener en cuenta también cómo se dará la interacción con los usuarios. Como ya debes saber, los botones poseen diferentes estados. Cuando se encuentran visibles y pueden ser activados por los usuarios, cuando el cursor se posa sobre ellos, cuando son activados mediante un click y finalmente cuando el usuario deja de hacer click.
Usualmente se suele cambiar el color ligeramente para indicar que el cursor se encuentra sobre el botón. Por otro lado, cuando se hace click sobre el botón, también suele cambiar ligeramente de color y regresa a su color normal cuando el usuario ha dejado de hacer click. Este cambio de color es indicador de la interacción que ha tomado el usuario con este elemento en particular y como muchas otras micro-interacciones son esenciales para informar al usuario de forma visual.
En conclusión…
Aunque el botón es tan solo un elemento en un sitio web, no se puede negar su importancia y el impacto que posee su buen diseño en la tasa de conversión. Por esta razón, debes analizar las características que tienen los botones de llamada a la acción que decidas colocar en un sitio web.
