Estás leyendo la publicación: Elementos visuales de la página de destino que convierten: su guía completa
Las imágenes son la base emocional de sus páginas de destino.
Tienen el poder de hacer que sus visitantes se vayan sintiéndose felices, informados, motivados o tranquilos.
Y lo más importante: tienen el poder de impulsar sus conversiones.
Pero, ¿cómo puede incorporar imágenes en sus páginas de destino exactamente?
Como era de esperar, hay muchas formas de usar imágenes, como imágenes, videos e incluso GIF.
Vamos a sumergirnos:
Capítulo 1 – Como imágenes
Así es como generalmente usará elementos visuales en sus páginas de destino: como imágenes.
Las imágenes tienen el doble beneficio de captar la atención y amplificar su mensaje, además de ser fáciles de usar y rápidas de cargar. ¡Y los tiempos de carga de la página son un gran problema para la experiencia del usuario!
Agregue el hecho de que las imágenes están fácilmente disponibles, son fáciles de editar y su producción cuesta casi nada (en comparación con el video), y puede ver por qué son el pilar de las páginas de destino.
Entonces, ¿qué tipo de imágenes puede usar en sus páginas de destino?
Aquí hay algunas ideas para comenzar:
Usa imágenes de personas.
Hay tres cosas que debe saber sobre el uso de imágenes de personas en sus páginas de destino:
Este comportamiento hace que las imágenes de personas sean una herramienta particularmente poderosa para crear empatía, mantener la atención y dirigirla a un elemento importante en nuestra página de destino.
Por ejemplo, un estudio de seguimiento ocular de una página de inicio con un bebé mostró que cuando el bebé miraba directamente, el espectador casi ignoraba el texto de la página. En cambio, la cara del bebé contó con toda la atención.
Cuando se movió la imagen para que el bebé estuviera frente al texto, los visitantes miraron primero al bebé (es decir, la cara captó su atención). Luego siguieron la mirada de los ojos del bebé para mirar el texto.
Este es un gran ejemplo de nuestra tendencia a fijarnos en los rostros y seguir su mirada.
Ahora, veamos algunas formas específicas en las que puede usar imágenes de personas en sus páginas de destino:
1. Ayude a los visitantes a identificarse con su producto
Mostrar a los visitantes que sus clientes son “igual que ellos” puede cerrar la brecha de empatía. Esto significa que es más fácil para ellos identificarse con sus productos y visualizarse usándolos.
¿El resultado? Mayores tasas de conversión.
Una forma de hacer esto es mostrar clientes existentes o una versión idealizada del cliente (basado en sus personas) en sus páginas de destino.
Por ejemplo, esta página de destino de Campamento base muestra una cita de un cliente real junto con su imagen:
Y aquí hay un ejemplo de Voyaque muestra un modelo que representa un cliente objetivo ideal:
Siempre que sea posible, use un cliente real en lugar de un cliente objetivo ideal: se siente mucho más auténtico (o al menos, me lo parece a mí). Y si tiene dudas, use pruebas divididas para ver qué funciona mejor.
2. Representa una emoción que quieras que sientan los visitantes
¿Cómo demuestras que el uso de tus productos hace felices a las personas?
Simple: use una imagen que retrate la emoción de su objetivo.
Este es un establo de la publicidad moderna. Ves gente feliz en los comerciales de autos porque eso es lo que las compañías automotrices quieren que sientas por sus autos.
Es similar a las imágenes del ‘antes’ en los infomerciales de televisión. Están llenos de gente infeliz y frustrada porque esa es la emoción que la empresa quiere amplificar.
Por lo tanto, cuando use imágenes de personas, intente mostrar una emoción que desee que sientan sus clientes.
En este ejemplo de escritorio fresco, ves a un niño sonriente y feliz. La imagen es lo suficientemente única como para captar nuestra atención (especialmente las enormes gafas del niño). Y la sonrisa se alinea con la emoción de “felicidad” que Freshdesk quiere transmitir:
Aquí hay un ejemplo más complejo de este tipo de imagen ‘feliz’, cortesía de Lejos de casa:
Ve una amplia gama de acciones en la imagen, pero todas las personas están uniformemente felices: la emoción que HomeAway quiere que sienta.
3. Usa imágenes para captar la atención
Ciertos tipos de imágenes captan inmediatamente nuestra atención, especialmente si son atrevidas, dramáticas o apelan a los deseos.
Este ejemplo de Lyft utiliza una imagen de una modelo femenina:
¿Por qué? Porque la investigación muestra que las caras atractivas captan nuestra atención.
Es importante saber que este enfoque también puede ser contraproducente. Si el CTA no es lo suficientemente convincente, es posible que un visitante no lo note y centre su atención exclusivamente en el modelo.
Por ejemplo, en este estudio de seguimiento ocularlos espectadores apenas miraron el producto en sí:
Si va a utilizar este enfoque, asegúrese de que su CTA y su oferta sean lo suficientemente sólidas.
También puedes usar el seguimiento de la mirada haciendo que el modelo mire hacia tu CTA.
4. Usa fotos del fundador de la empresa
Usar fotos del fundador de la empresa hace dos cosas:
- Hace que la marca sea más ‘humana’ y identificable
- Asocia la marca con un individuo y así transfiere la personalidad del individuo a la marca.
El ejemplo más famoso del ‘fundador como imagen’ es, por supuesto, KFC. La imagen del Coronel está por todas partes en todos los KFC.
En una escala más pequeña, verá que los blogueros y los autores a menudo usan sus propias imágenes en sus páginas de destino.
Aquí está OKDork de Noah Kagan:
Usa imágenes del producto.
Antes de comprar un producto, sus clientes naturalmente quieren saber cómo se ve y cómo funciona.
Esta es la razón por la que las imágenes de productos son tan populares en las páginas de destino. Muestran el producto (incluso si es digital) y ayudan a los compradores a tener una idea de cómo funciona.
Veamos algunas formas en que puede usar imágenes de productos en sus páginas de destino:
1. Mostrar el producto en uso
Esta es la forma más común de usar imágenes de productos en las páginas de destino: muestra cómo se ve el producto y cómo se usa.
Puede usar una imagen independiente del producto o mostrar a las personas que lo usan o lo usan. Querrá elegir la última opción si desea que las personas visualicen el producto (como el cierre o los accesorios).
Por ejemplo, warby parker muestra modelos usando sus productos:
En los ejemplos anteriores, el producto no tiene un diseño lo suficientemente único como para sostenerse. Es por eso que se necesita un modelo que te ayude a visualizarlo.
Si su producto es único o tiene una nueva visión de un problema, querrá mostrarle a la gente cómo funciona en su página de destino.
Por ejemplo, la página de inicio original de Square mostró cómo funcionaba el producto porque en ese momento, aceptar tarjetas en un teléfono era una idea bastante revolucionaria.
2. Mostrar el producto por sí mismo
Si el producto no requiere un modelo o tiene un diseño excepcional que desea mostrar, puede tener una página de destino como esta de Nike:
El diseño centrado en el producto funciona aquí, ya que ayuda a mostrar las características únicas del producto.
Y, por supuesto, no podemos hablar de páginas de destino centradas en productos sin mencionar Manzana:
En ambos casos, la página de destino destaca el diseño y las características del producto. Esto no funcionaría para un diseño genérico, pero funciona para empresas como Apple y Nike.
La industria alimentaria también sigue esta tendencia, aunque normalmente presenta una versión ‘idealizada’ del producto. Esta página de inicio de McDonald’s no muestra cómo se ven realmente sus hamburguesas; muestra una interpretación con Photoshop de las hamburguesas:
Otro ejemplo es esta imagen de comida zen que muestra una versión mejorada de la comida:
Pero, ¿qué pasa si su producto no es nada excepcional en términos de diseño o propuesta de valor?
Una gran opción en estas circunstancias es enfocarse en el empaque o mostrar el producto en contexto.
Por ejemplo, esta página de destino de Ganar muestra el producto en su embalaje completo. El embalaje forma parte de la USP de la empresa, no el vino. Y esta página de destino lo destaca.
Del mismo modo, el Página de inicio de Trunk Club muestra el ‘baúl’ y no la ropa individual:
3. Visualiza un producto digital
Si está vendiendo productos digitales, hay tres formas principales de usar imágenes:
- Visualícelo como un producto físico, como un libro electrónico retocado con Photoshop para que parezca un libro físico.
- Visualiza su contenido. Esto funciona particularmente bien para productos de software en los que puede mostrar la interfaz de usuario.
- Visualice el producto en contexto, es decir, muestre dónde y cómo se utiliza el producto.
Por ejemplo, este página de destino de Unbounce muestra un eBook como un libro físico:
Esta es una tendencia común con las páginas de destino de libros electrónicos, ya que ayuda a visualizar el producto. También ayuda a dar la impresión de mayor valor.
Los productos de software generalmente muestran la interfaz del producto, principalmente en un dispositivo específico (computadora portátil/iPad/teléfono).
Aquí hay un ejemplo de ventasgenio:
Otra alternativa es mostrar el producto que realmente está siendo utilizado por una persona. Esto coloca el producto en contexto y ayuda a los clientes a comprenderlo mejor.
Aquí está un ejemplo:
Usa imágenes abstractas
En este contexto, las imágenes ‘abstractas’ significan cualquier imagen que no tenga una relación clara con el producto.
Piense en las ‘imágenes de héroes’ que ve en Unsplash.com. Estas imágenes funcionan porque son hermosas para mirar y captar la atención.
Aquí hay algunas maneras en que puede usar imágenes abstractas:
1. Usa imágenes de paisajes
Una imagen de un paisaje u otra imagen no relacionada no hace nada por su producto. Y no amplifica la emoción que quieres crear.
Sin embargo, crea un telón de fondo interesante para su copia. Es posible que no capte la atención de la misma manera que una imagen de una modelo sonriente, pero crea un “actividad” adecuada en cualquier página.
Cuando se hace correctamente, también se puede combinar con la copia en la página para ayudar a los lectores a visualizarlo.
Por ejemplo, de Kapost la página de aterrizaje muestra un camino. Esto se alinea con la copia en la página: el ‘camino’ hacia el éxito del contenido.
2. Usa un fondo abstracto o simple
Un fondo abstracto o simple ayuda a que su texto se destaque mientras complementa el diseño de su página. Dado que los fondos como estos son pequeños en términos de tamaño de archivo, se cargan muy rápido. Esto puede ser útil para visitantes móviles y aquellos con conexiones lentas.
Aquí hay un ejemplo de ImpresionanteHablar:
El fondo es de un color sólido que ayuda a poner el foco de atención en la copia.
Aquí hay otro ejemplo de Mitro:
Capítulo 2 – Como videos
Si se les da a elegir, muchas personas preferirían ver una publicación de blog en forma de video en lugar de leerla.
Este es el por qué:
Los videos reducen el nivel de esfuerzo que los visitantes deben realizar para comprender su mensaje. Esto conduce a una mayor comprensión de su oferta.
Para los especialistas en marketing, los beneficios de los videos son obvios. Le ayudan a demostrar mejor sus productos. También lo ayudan a utilizar mejores técnicas de narración (como la animación) para contar su historia.
Pero, hay un inconveniente. Los videos sufren de dos fallas principales:
- Eliminan a los usuarios con velocidades de red bajas, especialmente a los usuarios móviles.
- Eliminan a los usuarios que tal vez no puedan usar auriculares/altavoces.
A pesar de estos defectos, los videos generalmente mejoran las tasas de conversión de la página de destino, a veces tanto como 80% según un estudio.
Es una buena práctica incluir una alternativa al video o mostrar el video solo si el usuario lo solicita haciendo clic en un botón. Esto asegurará que no pierda ningún visitante.
Y aunque los videos suelen ser más costosos de producir, la tecnología ha recorrido un largo camino. Es posible obtener una cámara que tome video de alta calidad sin gastar mucho. Luego, hay muchas herramientas disponibles que hacen que la edición de video sea fácil (y económica). La resolución de Da Vinci es un buen ejemplo.
A continuación, te mostraré algunas formas de usar videos en tus páginas de destino:
1. Muestra el producto en acción
Esta es la forma más común de usar videos en las páginas de destino: para mostrar cómo se ve el producto y cómo funciona.
Querrá usar esto especialmente para productos innovadores.
Aquí hay un ejemplo:
Flojo usa video para dar a los usuarios un recorrido por el producto. Dado que la visión de Slack sobre la comunicación en el lugar de trabajo es muy diferente, el video de la visita les brinda a los nuevos usuarios todo lo que quieren saber sobre el producto:
Aquí hay otro ejemplo de IIos mostrando cómo funciona su producto:
Pero, la mayoría de los usuarios no quieren sentarse a ver un video de 10 minutos. Tranquilícelos mostrándoles la duración del video. Por ejemplo, swagbucks, les dice a los usuarios que su video tiene exactamente ’43 segundos’. Esta es una gran manera de reducir su resistencia.
2. Use el video como fondo de su página de destino
Una tendencia creciente en el diseño de páginas de aterrizaje es usar videos como fondo de página.
Esto agrega un nivel más profundo de complejidad emotiva y visual al diseño. Pero puede perjudicar los tiempos de carga de la página, por lo que es una buena práctica utilizar una red de entrega de contenido o una plataforma de alojamiento de video dedicada para sus videos. También querrá tener una alternativa estática para conexiones más lentas.
Una forma de usar fondos de video es mostrar un producto en contexto. Por ejemplo, toque bistró, muestra el uso de su producto POS en un restaurante. Esto ayuda a los clientes a comprender cómo funciona el producto.
Otro enfoque es usar un fondo que no muestre el producto o sus usuarios, pero que agregue complejidad visual a la página.
Un buen ejemplo es Talleres de trabajo página de destino.
Usan un fondo abstracto que agrega un toque dramático a la página mientras enfoca la atención en la copia:
3. Usa el video como herramienta de venta
Encontrará ejemplos de este enfoque en las páginas de ventas. Por lo general, involucrará a un narrador (visto o no) haciendo un discurso con la ayuda de un video. Esencialmente, esta es una página de ventas de formato largo en formato de video.
Por ejemplo, Prosperar Temas usa videos en la mayoría de las páginas de destino de sus productos. Estos videos ayudan a demostrar cómo funciona el producto y presentan su propuesta de valor central.
En una nota al margen, Thrive Themes ofrece un conjunto de herramientas de WordPress enfocadas en la conversión. Puede usarlos para crear páginas de destino, sitios web completos, formularios de suscripción y más. ¿Querer aprender más? Echa un vistazo a mi revisión de Thrive Themes.
4. Usa testimonios en video
Los testimonios muestran que el producto o servicio brinda un valor real a otros y puede generar resultados similares para usted. Son una gran forma de prueba social.
Los testimonios en video superan tanto a los testimonios en texto como en audio. Si bien es fácil crear un testimonio de texto falso, los videos son más difíciles de falsificar, lo que conduce a una mayor confianza.
Si va a utilizar testimonios en video, asegúrese de que su orador toque los siguientes puntos:
- Desafíos que enfrentaron (y sus intentos fallidos de resolverlos)
- Cómo encontraron su producto / qué tan fácil fue usarlo
- Cómo su producto ayudó a resolver su desafío
Por ejemplo, Scorpion Internet Marketing muestra a un cliente real discutiendo su experiencia trabajando con la empresa. En un campo competitivo (marketing en Internet) con baja confiabilidad, este testimonio en video agrega autenticidad a su mensaje.
Capítulo 3 – Como GIF
Los GIF no son nada nuevo.
Fueron creados a fines de la década de 1980 y rápidamente adoptados por la comunidad de Internet. Sin embargo, su uso como estrategia de marketing ha comenzado a ganar terreno recientemente (gracias, Buzzfeed).
Estas pequeñas animaciones ofrecen un “término medio” entre imágenes y videos.
Son baratos de crear y, a menudo, más atractivos que las imágenes fijas. Además del compromiso, estas pequeñas animaciones le permiten enfocarse en una emoción exacta dentro de sus visitantes.
Nota: Mi herramienta preferida para crear GIF ahora mismo es aplicación en la nube. Todo el proceso de creación de GIF es extremadamente rápido. Tienen un plan gratuito que te permite crear GIF de hasta 15 segundos de duración. También puede usar esta herramienta para capturas de pantalla y videos de captura de pantalla (capturas de pantalla / videos ilimitados en la cuenta profesional).
El único problema que he encontrado hasta ahora es con el tamaño de archivo de los GIF, por lo que algunos de los siguientes se muestran como imágenes.
Aquí hay algunas formas fáciles de usar GIF en sus páginas de destino:
1. Use GIF para demostrar el producto y su principal beneficio
En algunos casos, es posible que pueda usar un GIF para mostrar su producto y sus beneficios principales.
Este suele ser el caso de los productos digitales.
por ejemplo, el Página de inicio de instapaper muestra la característica principal del producto, la capacidad de ‘leer en cualquier lugar’, con un GIF animado.
Un GIF funciona mejor que un video en esta situación porque es más fácil de animar. Y, dado que el GIF solo tiene colores limitados, su tamaño de archivo también es más pequeño (recuerde, los tiempos de carga de la página son importantes).
2. Muestra el producto en acción
Con este enfoque, el GIF funciona como un video de reproducción automática. En lugar de hacer que las personas presionen ‘reproducir’ en un video, puede usar un GIF para mostrar su producto en acción.
Dado que un GIF debe tener un tamaño de archivo relativamente pequeño, deberá limitar las funciones que muestra. Considere mostrar solo las funciones más importantes en lugar de una demostración completa (donde un video funcionaría mejor).
Por ejemplo, Optimizador visual de sitios web usa un GIF para mostrar cómo funciona su optimizador ‘visual’:
3. Agregue interés visual a una página
Otra forma de usar GIF es agregar complejidad visual a una página básica. El GIF generalmente reemplaza un elemento estático en la página y lo hace más interesante visualmente.
Por ejemplo, esta página de destino de Banco podría haber usado una imagen estática (que ofrecen a algunos usuarios según su ubicación o dispositivo), pero el GIF hace que la página sea mucho más interesante.
Poniendolo todo junto
Para impulsar las conversiones, una página de destino debe ser visualmente atractiva y dinámica.
Agregar GIF, imágenes y videos a su página de destino puede aumentar su impacto emocional, resaltar su copia o CTA y agregar complejidad visual.
Use los ejemplos anteriores para inspirar el diseño de su próxima página de destino: ¿qué creará?
Otras lecturas:
