8 técnicas de diseño para aumentar tu tasa de conversión con éxito

Este es un post invitado de Óscar Fernández, creador de Creativolandia.

---

Mi nombre es Óscar Fernández y soy diseñador especializado en WordPress. Quizás mi nombre te suene porque soy quien se ha encargado de rediseñar con Antonio Inteligencia Viajera. De hecho, hace muy poco que hemos terminado de pulir todos los detalles.

Si quieres saber cómo fue todo el proceso puedes echar un vistazo a este post.

La verdad es que el diseño es un aspecto muy importante de un blog, pero no por el motivo que tú estás pensando… Pero antes de entrar en eso déjame darte un dato.

¿Sabías que el 90% de los blogs que se crean no superan el año de vida?

Sí, como lo oyes. Solo un 10% consigue superar su primer cumpleblog. La verdad es que una tasa de fracaso tan alta no puede deberse a una única cosa, pero sí me voy a atrever a decirte cuál creo que es una de las principales razones.

Una tasa de conversión muy baja.

No estamos hablando de visibilidad, ni de conseguir visitas. Pero si esa es tu máxima preocupación en este momento, lee estos posts de Antonio donde tienes 1.001 técnicas para conseguir visibilidad.

• Cómo conseguir miles de visitas y hacer renacer tu blog de viajes en menos de un mes.
• Cómo conseguí 4000 visitas la primera semana del lanzamiento de mi blog ¡Mi secreto para romper estadísticas!
• Cómo conseguí 80.000 visitas y 1.000 suscriptores en el primer mes de vida de mi blog.

Pero a lo que yo me estoy refiriendo va un paso más allá, yo hablo de lo que pasa cuando las visitas ya están en tu blog.

¿Porque sabes una cosa?

Si todas esas visitas se quedan en eso, en visitas, tu blog no crecerá. Para que tu negocio online crezca necesitas suscriptores y clientes. Y para conseguirlo, necesitas mejorar tu ratio de conversión.

Como Antonio solo quiere post 100% prácticos (y si no me crees fíjate en esta guía para ganar dinero con un blog o este tutorial sobre cómo sacar vuelos baratos), hoy te voy a explicar cómo mejorar la tasa de conversión de tu blog.

Vamos a por ello.

¿Que es una conversión?

Este es un término que si te mueves por este mundillo de los negocios online ya habrás escuchado bastantes veces. Pero como me gusta empezar desde lo más básico por si hay alguien que no lo conozca, te explico qué es esto de la conversión y por qué es tan importante.

Una conversión, no es más que una transformación, que algo pase de un estado a otro.

En el caso del marketing online, entendemos por conversión el momento en el que una visita se transforma en algo más. Por ejemplo, un suscriptor.

Porque como te dije antes, un negocios online no vive de las visitas, sino de sus clientes. Pero como esa transformación no es inmediata y requiere un tiempo es importante que optimicemos el proceso al máximo.

¿Cómo se mide la tasa de conversión?

Para poder calcular la tasa de conversión lo que primero que tienes que hacer es definir el objetivo. ¿Qué es lo que quieres que ocurra?

• Buscas suscriptores.
• Altas en un webinar.
• Reserva de una sesión gratuita contigo.
• Ventas de un infoproducto.
• Más clientes para tu servicio estrella.

Y una vez que tengas el objetivo definido, ya tendrás todos los elementos para resolver la ecuación.

El ratio de conversión se mide dividiendo la cantidad de veces que has conseguido tu objetivo por las visitas totales a tu página.

Un caso práctico:

Supón que has creado una Squeeze Page para ganar suscriptores (si quieres ver como ejemplo la squeeze page de Antonio pincha aquí).

Ojo: si no sabes qué es este tipo de página, te recomiendo que te leas este post donde explico qué es: Cómo crear una squeeze page rápido que incremente tu lista de suscriptores hasta el infinito.

Imagina que tienes una Squeeze page donde diriges un gran volumen de visitas. Tomas como referencia un periodo de tiempo concreto, pongamos una semana. Y en esa semana, 3.000 personas visitan la página pero sólo se suscriben 67.

La tasa de conversión de nuestra Squeeze durante esos 7 días será del 0,02 %. Esta cifra es lo que nos sale de dividir las 67 veces que hemos conseguido nuestro objetivo entre las 3.000 personas que han visitado la página.

¿Quieres saber cómo captar suscriptores?

Echa un ojo a este post: Cómo conseguir suscriptores. Caso de éxito: De 197 a 1.136 suscriptores en tres días.

¿Es importante el diseño para  incrementar la tasa de conversión?

Pues afortunadamente para mí que soy diseñador, sí, es muy importante.

Ha habido varios estudios al respecto, uno de los más prestigiosos lo hizo la Universidad de Standford en EEUU.

Este estudio determina, entre otras muchas cosas, que un diseño profesional aporta credibilidad y confianza a cualquier sitio web. Y la confianza, a su vez, afecta en gran medida a la tasa de conversión.

Pero empecemos por lo básico.

¿Que es el diseño?

Es imposible hacerte entender que el diseño es la polla, si no sabemos exactamente qué es el diseño.

Todo el mundo cree que el diseño es hacer que las cosas se vean bonitas, preciosas. Nada más lejos de la realidad. El objetivo del diseño no es otro que hacer que la comunicación cumpla con su función.

Un buen diseño es aquel que hace que tu comunicación se vuelva útil para el que la recibe. En otras palabras,  consigues que tus lectores entiendan lo que tú quieres decirles.

Piensa en esto un segundo: ¿crees que los que diseñaron Ikea lo hicieron así para que tú te fueras por la puerta sin comprar nada? Voy más allá, ¿alguna vez has entrado en Ikea y no has comprado absolutamente nada?

Para mí, como diseñador, Ikea es una puñetera obra de arte.

Click para twittear:

Por muy bonita que sea tu web, si tiene una tasa de conversión baja, no está bien diseñada

Una de las cosas en las que he basado mi trabajo es precisamente esto. No me sirve de nada hacer obras de arte a mis clientes si sus webs no convierten. La funcionalidad siempre debe ir por delante.

8 técnicas para mejorar nuestra tasa de conversión por medio del diseño.

Una vez hemos entendido que el diseño debe ser funcional, vamos a ver cómo puedes mejorar el ratio de conversión de tu web con el diseño.

1. Marcar los puntos de foco

Marcar los puntos de foco no es otra cosa que conseguir que tus visitas dirijan la mirada hacia donde tú quieras. Esto es más fácil de lo que puedes parece, todo se basa en una matemática muy básica que se llama la regla de los tercios.

Esta regla se basa en dividir la pantalla en bloques de 3, tanto de izquierda a derecha como de arriba hacia abajo. Los puntos de foco son donde se cruzan todas las líneas.

La regla de los tercios se basa en colocar lo que queremos que las personas miren primero en uno o en varios de estos puntos.

No te preocupes si los puntos de foco no caen precisamente en el centro de las intersecciones, basta con que caigan cerca.

Piensa que hay muchos dispositivos con diferentes resoluciones. En diseño responsive (para dispositivos móviles) todo se vuelve líquido. Es decir, para poder adaptarse a las diferentes pantallas, todos los elementos van cambiando de tamaño y posición en función de la resolución de la pantalla.

Se vuelven como el agua porque toman la forma del contenedor en el que se encuentran.

La regla de los tercios es una fórmula muy usada en fotografía. De hecho, muchas cámaras modernas te permiten poner esta malla en el visor para cuando hagas la foto esté perfectamente compensada. Incluso algunos programas de retoque fotográfico, como Photoshop, te permiten hacerlo.

Fíjate en cómo se ve la web de Antonio con los puntos de foco señalados.

En el caso de la home de Inteligencia Viajera puedes observar como los dos puntos de foco superiores recaen en la call to action y en la foto de Antonio.

Ya verás como con esta técnica y con algunas de las que explicaré ahora afinarás mucho más el tiro. Por ejemplo, la del contraste en las call to action o la importancia de humanizar la web (la foto de Antonio) te ayudarán a mantener la atención en estos puntos focales sin remedio.

2. Contrastes bien marcados

Esta técnica es complementaria a la técnica anterior porque también ayuda a resaltar los puntos focales. El contraste se basa en resaltar los elementos por encima del resto.

Hay contrastes de muchos tipos, hay muchas posibilidades:

• Color: por ejemplo, cambiar las secciones de color hace a las visitas estar alerta y darse cuenta de los cambios de contenido.
• Tamaño: puedes usarlo para resaltar un titular. Solo es poner una tipografía más grande.
• Forma: para hacer resaltar una call to action (CTA) es importante que tenga forma de botón. Así harás que cobre mayor importancia que el resto de los enlaces de la página.
• Intensidad: para resaltar un texto por encima del resto lo ponemos en negrita.

En algunos casos, los diferentes tipos de contraste se pueden juntar para multiplicar así su efecto sobre el resultado.

Si te fijas en la foto de la home de Antonio que he puesto más arriba, una call to action contrasta por encima del resto del contenido a la perfección. Lo hace tanto en la forma como en el color.

3. Paleta de colores coherente con tu mensaje y tu sector

El color es uno de los aspectos más importantes de cualquier diseño. Lo más importante de este punto es que te quedes con 2 ideas:

1. Elige una paleta de colores coherentes con tu imagen de marca y tu sector.
2. Juega a combinar el mensaje que quieres aportar con la psicología de los colores, con el significado de los colores.

El color es prácticamente una regla matemática en la que aplicando una serie de fórmulas acabas obteniendo el resultado.

Si quieres profundizar sobre este tema, te recomiendo que te leas este post: ¡Ni se te ocurra elegir los colores para tu web sin antes leer esto!

4. Orden y alineación de los elementos

Alinear correctamente los elementos es algo primordial.

Los seres humanos inconscientemente encontramos belleza en la simetría. De hecho, en gran medida el que una persona nos parezca guapa tiene que ver con la simetría entre ambos lados de su cara.

Por esto, es importante que las columnas y las imágenes de tu web mantengan el mismo ancho.

También es importante que mantengas siempre la misma distancia y espacios entre las diferentes secciones de tu web.

Cuanto mayor sea la sensación de orden que proyectes  más cómodo se sentirá tu lector y más le facilitarás la asimilación de los contenidos que expongas en las diferentes páginas de tu web.

Fíjate en la foto de ejemplo. Todos los iconos están al mismo tamaño y alineados perfectamente al igual que  todas las columnas ocupan el mismo espacio.

Cierto es que el texto no siempre acaba en el mismo punto. Pero hay que tener en cuenta que no es un diseño estático, sino que es un diseño basado en un código, en este caso, HTML.

5. Espacio para respirar  (white space o negative space)

Todo en la vida necesita un descanso y el diseño no iba a ser menos. A veces, dejar espacio para respirar y tomar tiempo hace que el diseño fluya con más naturalidad.

La vista y el cerebro necesitan espacio para descansar y poder asimilar así todo lo que el ojo percibe.

La comunicación ha de ser pausada, tener muchos elementos a la vez puede saturar a la persona. Y esto al final hará que tu tasa de conversión se reduzca.

6. Fotos, gráficos e iconos

Las fotos son importantísimas para los seres humanos y juegan un papel decisivo en la comunicación. Así que como te habrás imaginado, también afectan a la tasa de conversión de tu web.

Los seres humanos pensamos en imágenes.

Ejemplo práctico: «Era un paisaje completamente tropical. La playa de arena blanca y las aguas azul turquesa que se extendían hasta el horizonte solo eran interrumpidas a lo lejos por un fantástico velero blanco. Este era mecido dulcemente por las olas del mar”.

Que pastelazo te acabo de soltar, pero ¿qué ha pasado? ¿A que te lo has imaginado perfectamente en tu mente?

Click para twittear:

Con las imágenes le ahorras tiempo al lector y lo guías para que entienda más rápido

“Una imagen vale más que mil palabras”. Entiende que cada uno de nosotros somos un filtro. Por ejemplo, la escena anterior cada uno la puede haber imaginado de una manera diferente.

Si tú pones las imágenes, estas consiguen imponer tu criterio y guiar al que las ve para que entienda lo que tú quieras.

Además leer toma un tiempo. Una imagen, un gráfico o un icono trabaja a nivel subconsciente. Ten en cuenta que desde bebé aprendiste a interpretar las imágenes mientras que a leer tuvieron que enseñarte.

Interpretar las imágenes es algo innato en ti.

7. Humaniza tu web

Este punto es totalmente complementario al punto anterior.

A las personas nos encanta ver personas. Somos seres empáticos y ver a otras personas nos transmite confianza. Nos ayuda a comprender al otro.

Este es un recurso que la publicidad usa hasta la saciedad. Por eso en los anuncios de la tele, revistas, etc, sólo ves a personas felices con cuerpos Danone.

Con esto te transportan a un estado equivalente al de las personas que estás viendo en las imágenes.

Del mismo modo que si se quiere transmitir una sensación de tristeza, basta con poner a una persona triste y de mirada perdida. Tachaaan tu subconsciente lo capta rápido.

Por eso es muy recomendable poner una foto tuya en la portada de tu web.

No se trata de hacerte pasar por un gurú. Es una mera cuestión de generar confianza y empatía. Ayuda a saber que quién está detrás de una web es una persona como tú que tiene anhelos, esperanzas y problemas.

En el caso de los viajeros inteligentes son muy importantes las fotos porque muestran cómo viajan por el mundo. Te enseñan esos sitios en los que tú has estado o deseas estar.

8. Jerarquía de la información

Esto es fundamental en toda comunicación. Cada cosa tiene su importancia, su momento de protagonismo y su función en la comunicación.

Por eso se requiere una jerarquía, especialmente en los textos.

• Titular : el titular es algo necesario en todo bloque de texto. Su función es captar la atención del que lo lee y que le interese seguir leyendo. Suele tener un corte sensacionalista y tiene que contrastar en tamaño con el resto de textos. A veces también en color (depende del contexto).
• Subtítulo y entradilla: el subtítulo tiene la función de ampliar un poco la información contenida en el titular y aumentar el interés del lector. Contrasta en tamaño porque tiene un menor tamaño que el titular (está por debajo en la jerarquía) pero ha de tener  un tamaño mayor que el cuerpo. Y la entradilla es el primer párrafo.Su objetivo es incentivar todavía más el interés del lector para que siga leyendo.
• Cuerpo de texto: en el cuerpo de texto va nuestro contenido, la esencia de lo que queremos dar a entender. Aquí donde nos extendemos con explicaciones. Pero eso sí, siempre hay que intentar usar párrafos cortos, viñetas, subrayados, etc. Hay que evitar «ladrillos» de texto para que sea más fácil de asimilar.
• Llamada a la acción o call to action (CTA): ¿quieres aumentar tu tasa de conversión? Pues dile a tus lectores lo que tienen que hacer con una call to action. Está demostrado que cuanto más pidas más recibes, por lo que tendrás que usar mucho el imperativo en tus call to action.  Usa verbos de acción como “Sí , quiero descargar el libro”, “¡Envíamelo, YA!» o «Compra ahora”, invitan al usuario a pasar a la acción.

Ten en cuenta que no en todas las secciones de tu web necesitarás usar todos estos elementos juntos. También, tendrás que combinarlos en función de lo que estés expresando.

Eso sí, ten en cuenta que está estructura de contenidos se usa en todo tipo de diseños (carteles, flyers, periódicos, revistas, televisión) y es superpoderosa.

Hay algo más en el diseño de una web que influye en la tasa de conversión

Además del diseño, hay otras cosas a nivel técnico que también influyen en la tasa de conversión. Según el estudio de la Universidad de Stanford que mencionamos al principio también afectan aspectos como:

1. El tiempo de carga de tu web

Dos motivos principales por los que el tiempo de carga es importante para tu web:

1. Sí el lector ve que una web tarda mucho en cargar, se pira. Según algunos estudios, este tiempo está entre los 4 y los 6 segundos.
2. Google es consciente del punto anterior y penaliza cualquier web que tarde más de 3 segundos en cargar.

En la solución a este problema hay muchas variables que debes vigilar:

• Tener cuidado con no usar temas muy pesados: no escojas plantillas con muchas funcionalidades. A la larga no las usarás y solo harás que tu tema se ralentice.
• Optimiza tus imágenes: sube las imágenes con el tamaño que tu tema requiera y optimízalas antes de subirlas.
• Usa un plugin de caché: estos plugins aceleran sustancialmente los tiempos de carga de tu web.

Si quieres saber la velocidad de carga de tu web y qué hace falta para optimizarla, hay varias herramientas que puedes usar. Te hacen un análisis exhaustivo de los tiempos de carga y te señalan como mejorarlos :

• GTmetrix.
• Pingdom.
• Page speed insights de Google.

2. La experiencia de usuario

Es muy importante que el usuario sepa manejarse por tu web. Durante estos últimos años  ha habido intentos de usar formas más creativas de navegación. Por ejemplo:

• Webs a pantalla completa.
• Webs con el scroll horizontal en vez de vertical.

Pero por suerte o por desgracia estas alternativas no han funcionado.

Cuanto más simple y común sea tu web (con unos límites claro está), más cómodos se sentirán tus lectores porque podrán moverse de forma intuitiva. 

Click para twittear:

Un diseño que necesita explicarse no sirve y se traduce en una tasa de conversión baja

Lo que mejor funciona es la ley del KISS (keep it simple and stupid): “mantenlo simple y estúpido”.

Por supuesto, las 8 técnicas que te expliqué ante te ayudarán a mejorar con creces la experiencia de usuario de tu blog.

3. Diseño responsive

Esto se supone que a estas alturas ya debía estar superado, pero la realidad es que no del todo. Como vimos antes, el diseño responsive es el que adapta tu web a cualquier dispositivo.

A día de hoy es muy importante porque más del 70% de la población tiene un móvil y navega con él. Ya hay más dispositivos móviles que dispositivos de escritorio.

Además, desde enero de 2017, Google penaliza todos las webs que no se vean bien en dispositivos móviles.

Por lo que si quieres que tu tasa de conversión mejore, más te vale que tengas este punto solucionado.

4. Testimonios de clientes 

Los testimonios son fundamentales para que aumente el ratio de conversión.

Son pruebas firmes de que lo que haces es válido y que a otros les ha servido. Más aún si incluyes las fotos (recuerda la importancia de humanizar la web).

Ver a una persona como tú, de carne y hueso, a la que le han solucionado los mismos problemas que tienes tú es todo un punto de inflexión. Cuanto menos crea curiosidad.

Y si además consigues testimonios de influencers hablando de ti, tu credibilidad se disparará por las nubes. Y con ella tu tasa de conversión.

Empieza a mejorar hoy mismo las conversiones de tu web

Ahora no hagas de este post uno más y pasa a la acción. Haz un esquema práctico y anota todo lo que deberías cambiar en tu web para que tu tasa de conversión mejore. Recuerda lo que vimos antes, un diseño que solo es «bonito» no sirve de nada.

---