Cuatro Errores De Diseño Web Que Están Arruinando Tus Conversiones

Neil Patel
I hope you enjoy reading this blog post. If you want my team to just do your marketing for you, click here.
Author: Neil Patel | Co Founder of NP Digital & Owner of Ubersuggest

El diseño web ha cambiado drásticamente en los últimos años.

Y, algunas de las técnicas que aún existen en la actualidad están saboteando la conversión.

Son el ‘faux pas’ o error que está matando tu conversión.

Tu sitio web debe ser bonito, pero también funcional. Necesitas tener lo mejor de ambos mundos.

Pero, muchos profesionales en marketing siguen utilizando técnicas de diseño que solo tienen un propósito: verse bien (en lugar de aumentar la conversión).

Y… ¿cómo funcionan? No tiene sentido tener un sitio web atractivo si no consigue conversiones.

Tu sitio podría parecer uno de los primeros sitios web creados, pero siempre que logre conversiones, deberías estar contento.

Infortunadamente, muchos especialistas en marketing están eligiendo sitios web basados en apariencia sin pensar en cómo afectan la conversión.

Si deseas tener una tasa de conversión superior al promedio de 2-3%, debes eliminar los errores de diseño web que dificultan obtener conversiones.

Tu sitio web es la única oportunidad que tienes para causar una buena impresión.

Si a la gente no le gusta tu sitio, se irán y nunca volverán.

Pero, afortunadamente, hay algunos estudios que han demostrado exactamente qué fallos en el diseño web no son buenas para conseguir que los clientes se conviertan.

Aquí hay cuatro errores de diseño web que están matando tu conversión, y cómo puedes solucionarlos.

1. Carruseles

Los carruseles se han vuelto muy odiados últimamente. Ve a casi cualquier sitio web y verás algún tipo de carrusel.

Son herramientas maravillosas a simple vista, pero una vez que analizas su uso, empiezas a verlos muy diferente.

No estoy atacando a los sitios web que los usan.

De hecho, me encanta cómo se ven los carruseles.

Simplemente estoy señalando que son extremadamente populares.

Aquí hay un ejemplo de cómo Square los usa en su sitio:

pasted image 0 751

Es bonito, ¿verdad? Completamente.

Incluso los he usado en mi página de inicio en el pasado, por lo que entiendo el atractivo que traen.

Y, no solo se usan en páginas de inicio. Puedes encontrar carruseles en varios puntos o lugares en un sitio web estándar.

pasted image 0 768

Esto significa que puedes usarlos para mostrar muchas opciones diferentes.

La idea de los carruseles surgió cuando las personas querían comenzar a condensar sus páginas de inicio.

Les permite incluir más información, más imágenes y más contenido en una sola página sin abrumar al usuario.

Gran idea, ¿verdad? Claro.

Se ve genial y parece funcional, pero ¿lo es?

En absoluto. De hecho, es un ‘faux pas’ en el diseño web que está matando tu conversión.

Incluso hay un sitio web dedicado a la pregunta: “¿Debería Usar Un Carrusel?

pasted image 0 771

Y, el veredicto es: ¡No! Un definitivo y firme no.

¿Por qué? Porque los carruseles ocupan la mayoría del espacio de la pantalla, pero los datos muestran que no logran conversión.

Simplemente, no obtienen la tracción, los clicks o las interacciones que las personas creen.

Infortunadamente, podrías estar desperdiciando mucho espacio de pantalla con ellos.

Según el experto en optimización de conversión Peep Laja, los carruseles rara vez funcionan y es mejor dejarlos fuera de la página de inicio.

Peep Laja recomienda utilizar imágenes estáticas en la página de inicio o, como mínimo, un carrusel que no gire automáticamente.

Por ejemplo, Hilton utiliza un carrusel en su sitio, pero no se mueve automáticamente después de un tiempo específico.

pasted image 0 757

Esto le da al usuario el control de la experiencia y no lo molesta al cambiar la pantalla a menos que decidan interactuar con el carrusel.

Entonces, ¿qué debes hacer? Intenta usar una página de inicio larga como la de Evernote.

pasted image 0 803

Esto te permite tener todo el contenido que necesitas en la página de inicio sin tener que utilizar una de esas función de diseño web que reducen la conversión.

2. Velocidad

Ah, la velocidad de carga de las páginas web. Este es uno de los mayores errores que veo.

Los elementos pesados de la página, como los carruseles y los gráficos animados, pueden disminuir rápidamente la velocidad de su página.

Y, la velocidad es lo más importante cuando se trata de diseño web, SEO y mantenimiento de visitantes por un largo período de tiempo.

Si tu sitio web es lento, puedes esperar que las tasas de conversión sean más bajas.

Los últimos benchmarks de PageSpeed de Google muestran que, mientras más tarde en cargar tu página, más alta será la probabilidad de que el cliente se vaya.

pasted image 0 782

De hecho, si tu sitio web tarda 10 segundos en cargar, la probabilidad de que el usuario se vaya aumenta en un 123%.

Y, odio decírtelo, pero probablemente no estés en el rango de uno o dos segundos.

Los datos de Google muestran que la mayoría de las industrias ni siquiera se acercan al punto de referencia.

pasted image 0 800

Esto significa que la mayoría de los sitios, en la mayoría de las industrias, se están perdiendo clientes únicamente debido a la baja velocidad de las páginas.

Infortunadamente, eso no es todo.

Una de las principales causas de las lentas velocidades de carga de los sitio web, se debe al peso promedio de la página. La mayoría de nosotros somos culpables de tener páginas pesadas.

pasted image 0 767

La velocidad es uno de los mayores ‘faux pas’ de diseño web de la actualidad, o tal vez el más grande.

También, es uno de los mayores asesinos de conversión.

Según datos de TruConversion, el 83% de los visitantes esperan que la página se cargue en tres segundos o menos. El tiempo de carga promedio para las principales tiendas de comercio electrónico es de 10 segundos.

pasted image 0 810

Hasta una simple mejora de un segundo en la velocidad puede resultar en un aumento de 7% en la conversión.

Es de vital importancia que la velocidad sea fija, rápida.

La velocidad te costará conversión y, en última instancia, dinero.

pasted image 0 787

Si tu sitio te da ganancias de $100,000 dólares diarios, un retraso de un segundo en la velocidad de la página podría costarte más de $2.5 millones de dólares al año.

Por supuesto, la mayoría de los sitios probablemente no generan $100,000 dólares diarios, pero entiendes el punto.

La baja velocidad de la página te costará conversión, saboteará el retorno de la inversión y hará que los usuarios no estén contentos.

Así que, aquí está la ventaja potencial de solucionar tus problemas de velocidad.

pasted image 0 798

Con solo una pequeña mejora, de 400 milisegundos, Yahoo pudo aumentar el tráfico en un 9%.

Mozilla mejoró la conversión en más del 15% cuando disminuyeron su tiempo de carga en dos segundos.

Entonces, aquí te explico cómo puedes comenzar a disminuir el tiempo de carga de tu página hoy mismo.

Limpia tu código

Primero, comienza por limpiar el código.

Un código sucio es una de las razones más importantes por las que los sitios web son lentos.

Puedes usar una herramienta como Varvy para analizar el código y limpiarlo.

pasted image 0 774

Simplemente ingresa tu URL y presiona “Go” para comenzar a ver qué scripts y códigos están ocupando mucho espacio.

pasted image 0 789

Por ejemplo, esos scripts resaltados en rojo y amarillo son demasiado grandes. Probablemente están obstaculizando algo de mi velocidad.

El objetivo aquí, es identificar lo que está causando problemas de velocidad. La mayoría de las veces gira en torno a un código sucio.

Usa Insights de PageSpeed

La herramienta Insights de PageSpeed es una de mis formas favoritas de probar la velocidad de mi sitio y estar constantemente al día con los cambiantes benchmarks.

pasted image 0 806

Esta herramienta es excelente porque describe exactamente lo que está causando la baja velocidad en tu sitio.

Además de eso, te dará instrucciones detalladas sobre cómo mejorarlo.

Por lo tanto, si no tienes tanta experiencia en los detalles técnicos de la página, tendrás instrucciones guiadas para usarlas o enviarlas a un webmaster.

Comienza ingresando el URL de tu página y presiona “Analyze.”

pasted image 0 779

La herramienta te mostrará exactamente lo que estás haciendo bien y, lo que es más importante, lo que estás haciendo mal.

Por ejemplo, cuando hago click en un elemento de “Possible Optimizations”, me da más detalles sobre lo que está mal y cómo solucionarlo.

pasted image 0 805

También escanea tu sitio móvil, por si te estás preguntando cómo optimizarlo.

pasted image 0 775

Es una excelente manera de probar las fallas de tu sitio y mejorar la velocidad.

Una vez que hayas hecho algunas mejoras, regresa y analiza el sitio nuevamente para ver qué mejoras hicieron la mayor diferencia.

3. No colocar botones de redes sociales

Compartir en redes sociales puede ser el elemento vital para hacer crecer tu negocio, promocionar tu contenido y generar entusiasmo en tu sitio.

Yo uso las redes sociales todos los días para promocionar mi contenido y dirigir el tráfico.

De hecho, es una de mis formas favoritas de promocionar contenido viral. Lo uso para cada publicación que se haga en mi sitio.

Pero, ¿qué pasa cuando las personas no pueden compartir tu contenido? Es uno de los mayores errores que veo en el diseño web en la actualidad.

Las personas simplemente no incluyen los botones para compartir en el contenido de su blog, o lo incluyen en las páginas incorrectas, como la página de inicio.

Te explicaré cómo estructuro mis botones para compartir.

Primero, cuando alguien llega a mi blog, no les pido al instante que compartan.

¿Por qué? Porque ni siquiera han leído el contenido todavía. No quiero saturar su pantalla con botones que les desentonarán.

pasted image 0 801

Intento que la pantalla sea menos detallada, que esté más limpia y sea más fácil enfocarse en el contenido.

Cuando alguien comienza a desplazarse hacia abajo en la página, es cuando empezará a ver los botones para compartir.

pasted image 0 807

¿Por qué? Porque los botones se han convertido en su propia categoría de ceguera a banner.

Y la ceguera a banner mata conversiones.

Si no conoces este término, (ceguera a banner), aquí hay un pequeño resumen.

pasted image 0 802

Esencialmente, la gente está harta de ver banners. Los ignoran inconscientemente.

Cuando mis botones estaban al tope de mi blog, obtuvieron casi cero acciones.

La gente simplemente los ignoró y siguió leyendo, lo que significa que mi contenido sufrió enormemente por tener poca o ninguna promoción del usuario.

Pero, ahora, cuando alguien se desplaza hacia abajo, los botones aparecen lentamente.

Eso significa que van a sobresalir y que alguien los notará.

Esta estrategia ha aumentado las acciones promedio en las publicaciones de mi blog en un 25,3%.

Entonces, aquí te explico cómo configurar tus botones como los míos.

Dirígete a AddThis para comenzar.

pasted image 0 755

AddThis es una excelente manera de incluir botones de redes sociales que siguen al usuario a medida que leen a través de la publicación.

Regístrate con tu dirección de correo electrónico de forma gratuita y dirígete al panel de control.

Aquí puedes elegir entre algunas opciones diferentes, pero para este ejemplo, queremos configurar botones de redes sociales.

pasted image 0 760

Aquí puedes elegir entre diferentes tipos de botones.

pasted image 0 764

Incluso puedes utilizarlos en forma de banner o de carrusel.

pasted image 0 808

Una vez que hayas seleccionado los botones de redes sociales que deseas tener en tu sitio, haz click en continuar y comienza a editar la posición y los botones.

pasted image 0 812

Incluso puedes editar cosas como el estilo, el tamaño del botón y el color.

pasted image 0 804

AddThis es una excelente herramienta gratuita que puedes usar para incluir fácilmente botones de intercambio social increíbles en tu sitio.

Y lo mejor de AddThis es su fácil personalización y optimización móvil.

Comienza a agregar botones al contenido de tu blog hoy si deseas aprovechar tu tráfico y lograr que tu contenido se comparta más en las redes sociales.

Si no lo haces, corres el riesgo de que tu contenido obtenga menos links, recursos compartidos y tráfico.

4. No usar ventanas emergentes de suscripción

La mayoría de la gente tiene la impresión de que las ventanas emergentes son molestas.

Pero, el enfoque real debe estar en estas preguntas:

¿Funcionan? ¿Logran conversión?

¡La respuesta a ambas es Sí!

Es igual que el caso del carrusel. Los carruseles son percibidos como bonitos y útiles, pero no logran conversión.

Las ventanas emergentes de suscripción se consideran molestas, pero funcionan.

Y, si generan conversión, las queremos en nuestros sitios.

Nikki McGonigal, una blogger de alimentos, comenzó a utilizar ventanas emergentes de suscripción.

pasted image 0 784

Con esta sencilla táctica, pudo conseguir 7,000 suscripciones más en solo ocho meses.

Elevó su tasa de conversión al 5,5% mediante el uso de ventanas emergentes.

Hay una publicación completa aquí en CrazyEgg que muestra innumerables ejemplos de lo increíbles que pueden ser las ventanas emergentes para aumentar la conversión.

Yo las uso todo el tiempo en CrazyEgg.

pasted image 0 792

¿Por qué? Porque funcionan.

Hacen que la gente las note y se convierta.

También las uso en QuickSprout.

Los sitios web tienen un objetivo real: producir conversión e ingresos.

Entonces, si no estás utilizando las últimas y mejores técnicas de captura de clientes potenciales, tu sitio web no está haciendo su trabajo.

Las llamadas a la acción deben ser tu forma número uno de conseguir suscripciones.

Si no le haces saber al usuario la acción que deseas que realice, puedes despedirte de esas conversiones.

¿Quieres configurar esto hoy? Podemos usar la herramienta gratuita AddThis de nuevo.

Regresa al panel de control y selecciona la opción “List Building” en la lista de herramientas.

pasted image 0 809

A continuación, se te pedirá que elijas un tipo de herramienta de construcción de lista.

La clave aquí es seleccionar “Popup.”

pasted image 0 797

En el lado derecho, también tendrás una vista previa rápida de cómo se verá este tipo de herramienta en tu sitio.

pasted image 0 795

Luego, puedes personalizar fácilmente el título y el texto del botón de CTA a tu gusto.

pasted image 0 814

Por ejemplo, si deseas usar esto como un mensaje de bienvenida, puedes considerar ofrecer un descuento a cambio de la suscripción.

Elige el diseño que deseas. También puedes cambiar el tipo de fondo a una imagen específica.

pasted image 0 811

Las opciones de personalización son excelentes y te permiten agregar diversos elementos a tus ventanas emergentes.

Además, una de mis cosas favoritas sobre esta herramienta es la capacidad de conectar las suscripciones y conversiones directamente a una plataforma de correo electrónico o CRM.

pasted image 0 813

Esto significa que puedes automatizar todo el proceso.

O, simplemente puedes seleccionar “Download to CSV” si prefieres tener un archivo con los correos electrónicos.

Usar AddThis es una excelente manera de eliminar estrategias de diseño web que sabotean la conversión.

Agrega ventanas emergentes basadas en varias páginas, al salir de la página, o pantallas de bienvenida para comenzar a capturar más clientes rápidamente.

Comencé a usarlas en mis sitios y vi aumentos inmediatos en las suscripciones de correo electrónico. Es una forma increíble de hacer crecer tu lista de correos.

Conclusión

El diseño web ha progresado mucho en los últimos años.

Cada pocos meses aparecen nuevos diseños y elementos de páginas que hacen que los sitios web se vean mejor que nunca.

Pero, algunas de estas técnicas de diseño web sabotean la conversión.

El hecho de que se vean bien no significa que funcionen bien.

Se han convertido en un ‘faux pas’ que está matando tu conversión.

Tener un sitio web que no sea funcional no generará conversión.

Tu sitio web debe tener un gran diseño a la vez que mantiene su capacidad de conversión.

Sin embargo, muchos de los especialistas en marketing siguen utilizando técnicas de diseño o ignorando los faus pax que obstaculizan las conversiones.

Si no solucionas estas acciones en tu sitio, corres el riesgo de perder muchas conversiones.

Y la tasa de conversión estándar de sitios webs del 2-3% no es suficiente.

No debería ser una meta.

Todos debemos esforzarnos por tener una alta tasa de conversión.

Comienza por quitar los carruseles. Pueden verse bonitos e incluir más información en menos espacio, pero las personas no interactúan con ellos.

Son, simplemente, un desperdicio de espacio.

Luego, debes centrarte en mejorar la velocidad de carga. La velocidad es una de las cosas más importantes de un sitio web, incluso podría ser la más importante.

Si tienes una baja velocidad, no puedes esperar que los visitantes se conviertan, porque nadie va a esperar que tu página cargue.

Luego, asegúrate de usar los botones de redes sociales para promocionar tu contenido y generar más recursos compartidos y enlaces.

Por último, utiliza ventanas emergentes de suscripción para aprovechar al máximo tu sitio web. Ningún buen sitio web está completo sin buenos CTA.

Arreglar estos ‘faux pas’ de diseño web significará una mejor experiencia para tus visitantes.

Y, eso podría significar grandes aumentos en la conversión.

¿Qué errores de diseño web que hayan saboteado tus conversiones has solucionado?

Neil Patel

About the author:

Co Founder of NP Digital & Owner of Ubersuggest

Es el cofundador de NP Digital. The Wall Street Journal lo llama el influenciador más importante en Internet, Forbes dice que es uno de los 10 especialistas en marketing más importantes, y Entrepreneur Magazine dice que creó una de las empresas más brillantes. Neil es autor best seller del New York Times y fue reconocido como uno de los 100 empresarios más importantes menores de 30 años por el presidente Obama, y como uno de los 100 más importantes menores de 35 años por las Naciones Unidas.

Follow the expert:

Compartir

Neil Patel

source: https://neilpatel.com/es/blog/cuatro-errores-de-diseno-web-que-esta-arruinando-tus-conversiones/