Cómo diseñar una página web bonita que genere conversiones
Los especialistas en marketing inteligentes saben que un diseño web inteligente puede marcar una gran diferencia en las tasas de conversión. Las primeras impresiones digitales pueden hacer o deshacer su credibilidad como empresa. Tenemos algunos consejos de diseño para ayudarlo a causar la mejor impresión en los visitantes de su sitio web.
Tiempo de carga
Todo el mundo sabe que un tiempo de carga prolongado puede aumentar los rebotes del sitio web y reducir las conversiones. Sin embargo, según Krypton Solid, un servicio de monitoreo de velocidad del sitio, comienza a perder visitantes después de solo 3 segundos, el tiempo de carga ideal.
Los períodos de atención cada vez más cortos de los consumidores no están dispuestos a esperar largos tiempos de carga cuando Google está a solo un clic de distancia, lo que podría llevarlos a los sitios web más rápidos de la competencia.
Si desea aumentar las conversiones, necesita encontrar formas de hacer que su sitio web se cargue más rápido.
Comprimir imágenes es una manera fácil de hacer esto. Además de prestar atención a los tipos de archivos, las imágenes en su sitio web probablemente también podrían ser un poco más pequeñas en la pantalla; de hecho, una imagen más pequeña seguramente será más amigable para dispositivos móviles.
Eliminar animaciones innecesarias, videos que se reproducen automáticamente y rotar pancartas también pueden hacer que un sitio web funcione más suavemente.
En 2018, el 52.2% de todo el tráfico del sitio web se realizó a través de dispositivos móviles , así que siempre asegúrese de verificar la funcionalidad móvil de su sitio web después de evaluar la versión de escritorio de su sitio.
Ley de Hick
Hick, o la Ley de Hick-Hyman, describe el tiempo que le toma a un individuo tomar una decisión en función de la cantidad de opciones que le dan. Aumentar el número de opciones corresponde a un mayor tiempo de decisión.
El famoso Jam Experiment de 2000 ilustra este punto perfectamente. Un día, en una tienda de comestibles, los compradores recibieron una muestra de 24 variedades de mermelada y un cupón de $ 1. En un día diferente, la tienda exhibió una tabla de solo 6 variedades de mermelada.
Aunque la mesa de 24 mermeladas atrajo más atención, la tienda recibió más compras cuando la mesa solo mostraba 6 variedades. Según Barry Schwartz , esta «parálisis de decisión» o «parálisis de análisis» puede afectar las cosas más pequeñas, desde qué desayunar hasta cosas más importantes como elegir una carrera.
¿Cómo se relaciona esto con el diseño web? Presentar demasiadas opciones a la vez a los visitantes del sitio web puede ser abrumador y llevar a una toma de decisiones estancada. En última instancia, esto puede llevar a los consumidores a abandonar un sitio web y no comprar nada en absoluto. Los clientes que realizan conversiones pueden tardar mucho tiempo, lo que puede ralentizar el progreso de su negocio y afectar negativamente la estrategia de marketing.
Simplificar las opciones es fundamental para obtener la mayor cantidad de conversiones en línea. La Ley de Hick es una de las razones por las cuales las empresas como Buffer suelen tener 3-4 opciones de paquetes, en lugar de opciones adaptadas a las necesidades exactas de cada consumidor.
De acuerdo con el diseñador de UX Paul Boag, si tiene muchos artículos, como paquetes de ventas que al menos desea que estén disponibles para ver, podría ser útil vincular a una página diferente que contenga selecciones menos populares .
Seguir la Ley de Hick puede ayudar a sus visitantes a sentirse como en casa en su sitio web y no sentirse abrumado por las opciones.
Regla de los tercios
Hasta el 38% de las personas admiten que abandonarán un sitio web si piensan que no es atractivo. ¡Eso es un montón de pistas perdidas! Aunque la Regla de los tercios no resolverá todos sus problemas de diseño web, sin duda es uno de los primeros lugares para comenzar.
La regla de los tercios es un principio de fotografía y videografía que funciona dividiendo un cuadro en tercios. El ojo naturalmente gravita hacia el rectángulo central y los puntos a su alrededor, como se ve en la imagen a continuación.
La página de inicio de Reebok , por ejemplo, destaca un zapato en dos de estos puntos. El texto de los dos puntos de la izquierda atrae la atención hacia el botón CTA (llamada a la acción).
Usando la Regla de los tercios, puede diseñar su sitio web para incluir imágenes importantes, texto o CTA cerca de estos puntos para dibujar conversiones.
Espacio negativo
¡Dé a sus elementos algo de espacio para respirar! El espacio en blanco, o espacio negativo, ayuda a evitar que su diseño se sienta abarrotado y apretado. También ayuda a destacar elementos importantes, como los CTA.
El espacio negativo no solo se refiere a los espacios en blanco en su encabezado o barra lateral. También se refiere a los espacios dentro del texto, como entre este párrafo y el anterior, y entre líneas y letras individuales. Si todo este texto se agrupara, ¡sería ilegible!
En la era actual, donde los sitios web se escanean con más frecuencia de lo que se leen palabra por palabra, la legibilidad es crucial. Si su mensaje no aparece, no se notará.
Consejos rápidos a seguir:
- Elija fuentes claras en lugar de decorativas.
- Evite la necesidad de llenar espacios negativos con anuncios o texto.
- Asegúrese de que su sitio web sea compatible con dispositivos móviles.
- Deje espacio negativo cerca de las barras laterales; Esto es especialmente útil para los usuarios de dispositivos móviles que tienen un espacio de desplazamiento limitado y pueden verse disuadidos por diseños reducidos.
Colores
Presta atención a los colores que elijas para tu sitio web. Si bien es una buena idea mantener la coherencia con los colores de su marca, podría perder muchas conversiones si no considera cómo los colores en su sitio web se relacionan entre sí y cómo los colores pueden usarse para influir en la decisión. haciendo.
Texto
El texto en sus páginas debe ser de alto contraste. Para la mayoría de los sitios web, esto significa que debe tener texto negro sobre un fondo blanco o viceversa.
CTA (llamadas a la acción)
¿Hay botones en su sitio web, como «Suscribirse» o «Agregar al carrito» en los que desea mejorar las tasas de conversión? Haz que sean de alto contraste y asegúrate de usar tu color de contraste con moderación. Un botón rojo de CTA, por ejemplo, se destacará en un sitio web con un fondo blanco que ya no usa con frecuencia el color rojo.
Una manera simple de descubrir el mejor color de contraste para su sitio web es usar la rueda de colores y ubicar el color opuesto a los colores principales en el diseño de su sitio web. Si el fondo de su sitio web es azul, considere hacer que sus botones sean de color naranja, por ejemplo.
Si el color primario de su sitio web es blanco, y su color secundario (los colores de su marca, tal vez) es amarillo, considere los botones CTA azules.
Tome la imagen del sitio web de Verizon a continuación. Aunque sus botones de llamado a la acción se presentan de manera prominente, no se destacan tanto como podrían porque sus colores se mezclan con el resto del sitio web. Cambiar los colores de fondo del botón a un azul simple (la rueda de color opuesta al rojo en el logotipo de Verizon) podría aumentar las conversiones del sitio web, por ejemplo.
Independientemente de los colores que elija, asegúrese de mantenerlos consistentes en todo el sitio web. No tenga un botón amarillo de CTA en una página y un CTA azul en otra, por ejemplo. Tener colores consistentes ayuda a establecer el reconocimiento de marca y facilita a los consumidores navegar por su sitio web.
La única excepción a esta regla: iconos de redes sociales. Puede ser más fácil para los visitantes de su sitio web detectar sus iconos sociales si están en los colores originales de la plataforma; es decir, los colores que usa la marca en su propio marketing. El pájaro azul de Twitter es reconocible al instante, pero si cambia el ícono a otro color para combinarlo con su sitio web, los usuarios pueden perder el ícono por completo.
Puede tomar un tiempo elegir los mejores colores para su sitio web. Juega con tus opciones hasta que te guste lo que ves.
Imágenes o videos llamativos
Imagine un sitio web lleno de texto, navegación y llamadas a la acción. Bastante aburrido, ¿eh?
Las imágenes y / o videos ayudarían a dividir esa información. También ayudarían a los visitantes a escanear el sitio y llegar al punto. ¿Qué me puede ofrecer esta empresa? ¿Qué hacen?
Si ve una imagen de un dentista en la página de inicio de un sitio web, por ejemplo, ni siquiera necesita leer el texto para tener una idea de lo que hace ese negocio.
El problema es que muchos diseñadores de sitios web de bricolaje no saben cómo obtener fotos o videos de alta calidad para poner en sus sitios web.
Afortunadamente, es 2019 e Internet tiene una solución para la mayoría de las necesidades de contenido. Si contratar a un fotógrafo, camarógrafo o diseñador web no es una opción, puede considerar uno de estos sitios web para obtener imágenes, a veces libres de regalías:
También vale la pena señalar que puede buscar imágenes libres de derechos de autor directamente en Google. También es posible insertar publicaciones en redes sociales, por lo que no siempre es necesario crear una imagen totalmente única.
Considere el mejor contenido visual para su marca, y recuerde que incluir las caras de las personas en los medios puede ayudar a los consumidores a establecer una conexión con su marca. Las expresiones humanas no tienen precio y pueden ser motivadores muy poderosos.
Ley de Fitts
¿Sabía que las tasas de conversión pueden verse afectadas por la ubicación y el tamaño de sus botones en relación con la distancia que necesita mover el cursor?
Así es. Suena tonto, pero imaginar dónde podría caer naturalmente el cursor al ver un sitio web puede ayudar a mejorar el CTR (tasa de clics).
¿Suena complicado? No lo pienses demasiado. Las barras de navegación son un gran ejemplo de la Ley de Fitts aplicada; Como las opciones del menú pueden llevarlo directamente a lo que está buscando, no tendrá que desplazarse al olvido. En lugar de buscar el puntaje de los Celtics en la página de inicio de las noticias, primero puede dirigirse a la página de deportes para ahorrar tiempo. Comprender qué atajos pueden ser útiles para sus visitantes y cómo aplicarlos mejorará la experiencia del usuario.
Otro ejemplo: la interfaz de usuario de WordPress. Si alguna vez has notado que la mayoría de las opciones de publicación de publicaciones están en la parte superior derecha de la página, no es un accidente.
Observe cómo el botón «Actualizar» contiene una fuente más grande y un color de fondo único, y está en una ubicación fácil de encontrar:
Los enlaces «Editar» son menos visuales ya que el usuario típico no los golpea con tanta frecuencia como lo haría con el botón «Actualizar». Sin embargo, todos están en el mismo lugar, por si acaso.
Adherirse a la Ley de Fitts no tiene que ser complicado. Simplemente enfoque el diseño de su sitio web para que sea lo más fácil posible para los consumidores localizar lo que están buscando.
Diseño familiar
El diseño familiar único puede ser personalmente satisfactorio, pero no siempre es mejor.
Tome un sitio web de comercio electrónico diseñando un nuevo botón «Agregar al carrito». Están trabajando en tres opciones, cada una con un fondo naranja pero texto diferente:
- +
- Añadir al carrito
- + Carro
¿Qué texto crees que sería más efectivo? Si dijiste la segunda opción, «Agregar al carrito», estarías en lo cierto.
Esto se debe a que los sitios web como Amazon nos han incrustado tanto que cuando decides comprar algo, presionas el botón «Agregar al carrito». Golpear cualquier otra cosa sería antinatural. Incluso puede pasar por alto el botón por completo.
También ha surgido una nueva tendencia en las barras de navegación, en la que los usuarios tienen que esperar las animaciones y luego deben hacer clic varias veces para obtener la información que necesitan. Los diseños complicados como este pueden ser confusos e incluso agravantes para algunas personas.
No es necesario reinventar la rueda para crear un sitio web hermoso y eficiente.
Páginas de destino
Cree páginas de destino distintas para búsquedas orgánicas y anuncios pagados. ¿Por qué? Porque la forma en que los consumidores llegan a cada página de destino es fundamentalmente diferente. En este ejemplo, imaginemos que está administrando una panadería local en Dallas, TX.
Tráfico orgánico derivado de la búsqueda orgánica o SEO
Si ha desarrollado el SEO de su sitio web, un visitante puede buscar «panaderías que atiendan en Dallas, TX» y descubrir su sitio web. ¡Excelente! Cuando hace clic en el enlace a su página de destino, puede encontrar una descripción completa de su establecimiento, lo que ofrece, los testimonios y los días y horarios en que el negocio está abierto. Probablemente hayas prestado atención a las palabras clave y hayas dedicado tiempo a perfeccionar otros elementos de SEO.
Sin embargo, si su cliente potencial ha descubierto su sitio web a través de anuncios pagados …
Tráfico derivado de anuncios pagados
Si ha comprado anuncios de un servicio como Facebook o Google, esas plataformas son lo suficientemente inteligentes como para encontrar sus clientes potenciales sin que tenga que preocuparse por el SEO . Sin embargo, dado que es posible que el usuario haga clic en el anuncio mientras está haciendo otra cosa que no sea buscar panaderías que atienden en Dallas, es importante llevarlo a través del proceso de conversión lo más rápido posible. Esta página de destino debe estar limpia y al grano.
Migas de pan
No puedes comer estas migas de pan; en cambio, los visitantes los usan para navegar fácilmente por su sitio web. Pueden verse así:
Design Company ABC >> Blog >> Conversiones >> Consejos de marketing por correo electrónico para aumentar las conversiones
Las migas de pan son útiles en sitios web grandes y para sitios web con mucho tráfico orgánico. Un visitante puede buscar consejos de marketing por correo electrónico y encontrar su artículo, pero digamos que quiere ver otros artículos similares en su sitio web. No sabrán dónde encontrar esos artículos en el menú a menos que los apunte en la dirección correcta.
Brindar más información a los visitantes de su sitio web solo puede aumentar la credibilidad de su marca.
Principio de similitud de la Gestalt
El Principio de similitud de la Gestalt en lo que se refiere al diseño de sitios web se puede resumir así: El cerebro humano agrupa objetos similares. En el mundo digital, es importante poder hacer conexiones de forma rápida y precisa.
Puede aprovechar esta ley de diseño colocando los elementos que desea asociar uno al lado del otro. Por ejemplo, podrías tener un testimonio increíble. Si uno de sus objetivos es aumentar las suscripciones a su lista de correo, puede considerar colocar un botón de CTA cerca del testimonio.
El principio de similitud de Gestalt se trata de aprovechar el contenido existente y organizarlo de una manera que pueda conducir a mejores tasas de conversión.
Conclusión
Estas son solo algunas ideas sobre cómo diseñar un sitio web hermoso que genere conversiones. Dado que las tendencias de diseño y SEO evolucionan constantemente, es importante mantenerse actualizado sobre los cambios.
También es importante realizar pruebas A / B cuando se trabaja con cualquiera de estos consejos de diseño, ya que ningún principio es completamente infalible. Lo que no funciona en la mayoría de los sitios web puede, de hecho, funcionar en el suyo.
Es posible que no entienda cómo realizar pruebas A / B o aplicar estos consejos. ¡Está bien! Una agencia como Krypton Solid puede orientarte en la dirección correcta.
