Cómo diseñar enlaces y llamadas a la acción infalibles

Publicado: 2021-07-19

¿Alguna vez ha mirado las estadísticas de su sitio web y se ha preguntado: "¿Por qué la gente no va a donde yo quiero?"

¿Por qué no visitan las páginas de sus productos? ¿Por qué no realizan compras?

En esta publicación, compartiré algunos consejos de expertos que podrían ayudarlo a controlar el progreso de los visitantes en su sitio web.

Identificar el problema

Primero necesitamos identificar cuál podría ser el problema. Herramientas útiles como Google Analytics pueden brindarle mucha información estadística sobre su sitio, pero he descubierto que más herramientas visuales, como Crazy Egg, Heatmap.com e Inspectlet, realmente pueden ayudarlo a identificar con precisión dónde están los problemas en su sitio. mentira del sitio.

Tener un marco de referencia visual como un mapa de calor puede mostrarle instantáneamente lo que está llamando la atención de su audiencia. Es especialmente útil cuando se combina con un mapa de desplazamiento, que puede indicarle qué tan lejos están mirando los visitantes de su página. A veces, los problemas pueden ser rápidos y fáciles de corregir, pero a veces no es tan claro. Con suerte, estos consejos te ayudarán a mejorar tu sitio y lograr más de tus objetivos.

Soluciones

Claridad

Por tonto que parezca, a veces el problema puede ser tan simple como que los clientes no sepan de un vistazo qué constituye un enlace y qué no. Si bien esto puede parecer obvio para usted y para los demás, debemos recordar que todos operan de manera diferente y pueden ver su sitio web de manera diferente a como usted lo ve.

Por ejemplo, las imágenes promocionales de su sitio pueden dificultar la determinación de dónde se supone que deben hacer clic los visitantes. Este es un problema muy común en sitios web como downloads.cnet y filehippo.com:

Llamadas a la acción del sitio web Filehippo, diseño de enlaces
¿Encontró de inmediato el enlace de descarga correcto? Pista, es el botón verde debajo de la barra de búsqueda en la parte superior derecha. Confuso, ¿no?

Download.cnet llamadas a la acción, diseño de enlaces

Download.cnet.com es tan malo como filehippo para esto. ¿Viste primero el enlace de descarga o el gran banner naranja y azul brillante en la parte superior de la página? En este caso, solo lo llevaría al sitio web de la empresa, pero otro podría llevarlo a cualquier parte.

¿Cómo podrían arreglar esto? El simple hecho de dejarlo más claro resolvería instantáneamente este problema. Necesitan desvincular sus enlaces de los anuncios que intentan engañar a la gente. Una forma podría ser agregando un gran borde evidente alrededor del título y el enlace de descarga posterior, o incluso un color de fondo completo y espaciado para enfatizar aún más el título y el enlace de descarga. ¡Incluso algo tan simple como una flecha que apunta al enlace de descarga funcionaría de maravilla! Cualquier cosa para hacer que su enlace se destaque del resto rápidamente y así reducir los "clics perdidos".

Estilo

Otro problema podría ser cómo se diseñan sus enlaces y CTA. Ahora, no hay nada correcto o incorrecto en lo que respecta al estilo. Todo depende de lo que funcione con su diseño y sitio web y de lo que crea que se ve mejor, así como de lo que funcione mejor para su audiencia.

Dicho esto, es posible que haya notado en los últimos años un gran aumento de botones grandes y brillantes en vastos océanos de "espacio en blanco". Hay una muy buena razón para esta tendencia. Las investigaciones y las estadísticas muestran que es más probable que los visitantes interactúen con este tipo de enlaces, quizás más que otras variantes:

PayPal cómo diseñar llamadas a la acción
Paypal da un buen ejemplo de esto. Muy poco contenido y llamadas a la acción brillantes y obvias.

Pero, ¿por qué es esto? ¿Por qué, como usuarios, nos atraen los sitios con muy pocos elementos con los que interactuar, en lugar de un sitio web con muchas vías y enlaces para explorar?

Es simple: esto no solo elimina el desorden, sino que el estilo hace que sea muy simple y obvio qué es y qué no se puede hacer clic. Los botones de CTA y Sign up / Log in nos llaman la atención y nos invitan a hacer clic en ellos.

Pero, ¿significa esto que todos nuestros enlaces deberían ser grandes botones brillantes?

Para nada. Solo queremos destacar nuestras "Llamadas a la acción", es decir, nuestros enlaces con los que queremos que nuestros visitantes interactúen, algo que creemos que los beneficiará a ellos y a nosotros de alguna manera, como una página de ventas promocional o las últimas noticias. historia.

Volviendo al ejemplo de PayPal, está bien usar enlaces de texto sin formato para enlaces más estándar o menos importantes, siempre que sigan siendo enlaces muy claros a algo. En el pasado, esto siempre se indicaba con texto subrayado, y todavía podemos usarlo en la actualidad siempre que encaje con el diseño, aunque algunas personas sienten que los enlaces subrayados tienen poco lugar en el diseño moderno.

Por ejemplo, mire el texto debajo del enlace “Más información” de PayPal, “¿No es cliente de PayPal? Empezar. ”Simplemente envalentonando esas dos últimas palabras, se llama la atención de los visitantes y se les anima sutilmente a interactuar. “Este texto es diferente”, piensan. “¿Hay algo ahí? ¿Por qué esa parte está en negrita y el resto no? " ¡Esto invita al usuario a pasar el cursor sobre él y descubrir que es un enlace!

Es una diferencia simple, pero en un mundo en el que tenemos que luchar por cada segundo de la atención del usuario, es una diferencia que puede resultar en un clic y puede ser muy fácil de implementar. Vea qué funciona mejor para su sitio web y su clientela.

Ubicación en pantalla

Los usuarios tienen tan poco tiempo para buscar un enlace en un sitio, y más tiempo perdido resultará en que más personas abandonen su sitio. Entonces, ¿cómo podemos evitar esto? Nuevamente, simplemente lo hacemos para que los usuarios puedan identificar los enlaces de la manera más fácil posible.

Los mapas de desplazamiento pueden ser de gran ayuda aquí. Según mi experiencia, casi todos los visitantes de una página verán la parte superior de la página, pero menos del 20% de las personas se desplazarán hasta el final, incluso más abajo para páginas más largas. Sin embargo, más del 80% verá el primer 50% de la página.

Los tamaños de pantalla juegan un papel importante en esto, junto con las resoluciones de pantalla y el tamaño del dispositivo. Sin embargo, esto significa que es probable que los visitantes no vean cualquier cosa debajo de la parte inferior de la pantalla. Así que, idealmente, queremos asegurarnos de que nuestros preciosos CTA ocupen un lugar destacado en la página. Problema resuelto, ¿verdad?

Esto es bueno para considerarlo como regla general y funciona especialmente bien para productos individuales y promociones. Pero, ¿qué pasa cuando comparas los resultados de búsqueda de un producto, por ejemplo? Vas a tener muchos objetos luchando por la atención del visitante.

Aquí es donde deberá combinar las tres cosas juntas en su diseño: claridad, estilo y ubicación. La clave para recordar es que si hay demasiada información en la pantalla, el usuario perderá interés rápidamente. Si tienes muchos productos para mostrar, debes brindarles la información mínima que puedas permitirte, idealmente el título, el precio y una llamada a la acción "Más información / comprar ahora".

Depende de usted decidir qué más incluir. Pero para buenos ejemplos de diseño, busque en los grandes sitios de supermercados como Tesco:

Tesco Bread, Cómo diseñar múltiples CTA, eCommerce

Una simple búsqueda de "pan" produce cientos de productos diferentes, pero Tesco ha permitido que todos los productos tengan suficiente espacio para respirar y simplificó el proceso de compra a "¿Cantidad?" y añadir".

También puede notar que los botones siguen todas las reglas: son claros, están espaciados y con un estilo atractivo, y aparecen lógicamente en la cuadrícula, debajo del producto y cualquier descripción que pueda tener.

Busque otros ejemplos para ver qué hacen los grandes sitios de comercio electrónico cuando se trata de presentar múltiples llamadas a la acción, ¡podría sorprenderse con lo que encuentre!

Resumen

Esperamos que este blog te haya dado una idea del tipo de trucos simples que realmente pueden ayudar a impulsar el éxito de tu sitio web. En resumen, lo que debe recordar al crear sus enlaces y CTA es:

  • Claridad . Asegúrese de que sus CTA se destaquen de cualquier otra cosa en la página, especialmente si habrá otros enlaces y botones que puedan causar confusión. Debería poder distinguir lo real de lo falso al instante.
  • Estilo. Las personas se sienten atraídas por los botones grandes y brillantes y nos atraen los campos de texto grandes que llaman nuestra atención. Cuanto menos esfuerzo tenga que hacer el usuario para identificar un enlace o botón, es más probable que haga clic en ellos. Esto se aplica a los enlaces más pequeños y menos importantes: nunca querrá perder un enlace en el texto o en una imagen, así que establezca pautas estrictas sobre cómo diseñar sus enlaces y CTA. Utilice fuentes en negrita, diferentes colores o algo más para resaltar y distinguir sus elementos seleccionables de los que no se pueden hacer clic. Solo asegúrese de que se usen de manera consistente. Del mismo modo, asegúrese de que ninguna de sus imágenes incorpore estos elementos a menos que tenga una buena razón para hacerlo.
  • Ubicación, ubicación, ubicación . El lugar donde colocas tus enlaces y llamadas a la acción es importante. Si su valioso e importante vínculo "Comprar ahora" no aparece en la mitad superior de la página para alguien, hay menos del 50% de posibilidades de que un cliente haga clic en él, ya que menos del 50% de los usuarios se desplazarán hasta aquí.

¡Espero que este consejo te ayude! No olvide buscar siempre y ver qué están haciendo los demás para resolver este problema, y ​​comparar su sitio con el suyo para ver dónde y cómo se podría mejorar el suyo.