Cuándo usar vídeos de fondo en tus sitios web

No hay mejor momento que el presente para conquistar a tus visitantes con un video de fondo.

Cuándo usar vídeos de fondo en tus sitios web

Índice de contenidos

Los videos de fondo no son el futuro. Son el presente. No porque sean geniales y todo el mundo los use, sino porque plataformas sociales como Facebook están apostando por la realidad aumentada (RA): experiencias inmersivas que impulsan nuestras interacciones. Y el video es un pilar fundamental de la RA.

El video de fondo es una maravilla. Pero si no sigues algunas pautas importantes, puede arruinar el rendimiento de tu sitio y estropear el diseño y la experiencia general. Antes de profundizar en esas pautas, asegurémonos de que estamos listos para añadir videos de fondo a nuestro sitio.

Cada vez vemos más videos de fondo por toda la web

Los videos de fondo pueden ser una forma fantástica de mejorar el aspecto de tu sitio web, hacerlo más agradable para los visitantes y captar su atención.

Los visitantes quieren sentirse atraídos, y un buen video lo consigue. Los videos pueden contar la historia de una empresa, y toda empresa tiene una historia que merece ser contada de la mejor manera.

Buenas prácticas para añadir videos de fondo

Usa un video de fondo solo cuando realmente mejore el aspecto y la sensación de tu sitio. Es tentador lanzarse a por lo último y más llamativo sin considerar su impacto. Aunque el impacto será mínimo si se hace bien, tu sitio será más lento. Cambiar una imagen estática por un video debe valer la pena.

Aquí tienes algunas cosas a tener en cuenta:

  • Elige un video corto que cargue rápido. Deja las películas de larga duración para el cine.
  • No uses sonido. El sonido aumenta el tamaño del archivo y aporta poco valor. A menos que consideres valioso obligar a tus visitantes a buscar desesperadamente cómo silenciarlo.
  • Usa un marcador de posición. Si el video se detiene o no puede reproducirse, asegúrate de que haya una imagen de respaldo. Crear marcadores de posición en Webflow es sencillo. Coloca tu elemento de video de fondo en una sección que ya tenga una imagen de fondo.
  • Sustituye el video por una imagen en la versión móvil — los videos a menudo no se reproducen o son difíciles de implementar en móviles. Además, no es muy considerado consumir los datos móviles de un usuario con un video de fondo. Sustituir el video por una imagen en Webflow también es pan comido. Oculta el elemento de video de fondo en los puntos de interrupción móviles para mostrar la imagen de fondo. Esto garantiza la mejor experiencia para el visitante móvil.

Cuándo no deberías usar un video de fondo

Aunque un video de fondo es excelente para captar la atención, puede ser contraproducente si quieres que los visitantes se centren en tu texto.

Si abusas del video de fondo, eclipsará el contenido importante. Los videos pueden distraer cuando hay ideas complejas, como contenido de ventas, que requieren lectura. Si tu oferta necesita mucha explicación, las palabras son mejores. No corras el riesgo de distraer o perder visitantes por culpa de un video.

Elige la utilidad sobre la complejidad

“¿Cuál es la cantidad mínima de interfaz necesaria para que el usuario encuentre el contenido y este le hable?” Deberíamos hacernos esta pregunta a menudo durante el proceso de diseño, especialmente cuando decidimos si añadir o no un elemento.

Es fácil caer en el error de pensar que mejorarás la experiencia añadiendo animaciones divertidas o ocultando y revelando elementos. Pero en realidad, podrías estar añadiendo un obstáculo.

La mejor forma de mantener las cosas simples es... ¡mantenerlas simples! Empieza con la solución más directa y añade capas complejas solo cuando sea necesario. Tu video de fondo debe reforzar el mensaje, eliminar barreras y complementar el resto del contenido de tu sitio.

La palabra clave aquí es "fondo". Los vídeos de fondo deben integrarse en la estética del sitio web, no destacar por sí solos ni estorbar.

"El buen diseño es el diseño mínimo posible".

–Dieter Rams

La inteligencia detrás de añadir un vídeo de fondo

Mantén el objetivo de conversión como prioridad absoluta. La narrativa del vídeo de fondo siempre debe respaldar el objetivo final de la página.

El escenario ideal es aquel en el que los vídeos de fondo complementan o potencian la llamada a la acción (CTA).

Dale un toque personal

Por lo general, la gente prefiere tratar con personas, no con empresas sin rostro. Esta es una de las razones por las que a los compradores les encanta adquirir artículos en tiendas como Etsy: hay una cara detrás del negocio.

Añadir un vídeo corto que muestre a personas interactuando con tu servicio permite que los clientes potenciales se visualicen trabajando contigo. Esto, idealmente, lleva a tu audiencia a realizar una acción, como registrarse, hacer una compra o ponerse en contacto.

Haz que destaque

En la mayoría de los casos, querrás colocar texto sobre el vídeo de fondo, así que asegúrate de que sea fácil de leer durante todo el bucle. Por lo general, busca un fuerte contraste de luz y sombra entre el vídeo de fondo y el texto.

Una forma de garantizar un contraste total y legible es aplicar un filtro sólido y monocromático sobre el vídeo. Esto no solo se ve súper profesional, sino que el contraste de color hace que el texto, el formulario y la llamada a la acción de la página de destino resalten. Otras alternativas incluyen una sombra en el texto o un bloque de color semitransparente detrás del mismo.

Diseña interacciones y animaciones sin escribir código

Crea interacciones y animaciones complejas sin tener que tocar ni una línea de código.

→
↗
►
↓
←
↑
Leer ahora

Mantenlo breve

Los vídeos de fondo no deberían durar más de 10 segundos. Un vídeo corto en bucle debería ser suficiente para transmitir el mensaje sin afectar el tiempo de carga.

Recuerda que es un bucle. Si el vídeo es demasiado corto, el bucle parecerá fuera de lugar o incompleto. Por otro lado, si es demasiado largo, es posible que los visitantes abandonen el sitio o pasen a otra página antes de que el vídeo haya tenido la oportunidad de hacer lo que mejor sabe hacer: despertar las emociones deseadas.

Busca o produce un fondo sencillo en bucle que sea relevante para el contenido de tu sitio web. Hay muchos lugares donde conseguir clips de vídeo de stock. Si no puedes producir tu propio material, verifica los derechos de autor asociados a cualquier vídeo antes de usarlo.

Pero darle un toque personal es difícil cuando el contenido no es realmente tuyo. Así que, si es posible, produce siempre tu propio vídeo.

Hazlo imparable

Siempre que el contenido del vídeo sea de calidad y coherente con tu marca, no debería haber razón para que los visitantes tengan que pulsar play o pausa; no les des esa opción.

Los vídeos de fondo se reproducen automáticamente. Esto capta la atención del visitante y la mantiene desde el momento en que ven el elemento de vídeo. Te aseguro que quieren que les captes la atención; para eso están visitando tu sitio.

No olvides las analíticas

Como con cualquier otra cosa, revisa las cifras y consulta a tus usuarios para entender cómo está afectando tu vídeo de fondo a tus métricas clave.

Para que tus pruebas sean claras y precisas, no añadidas un vídeo de fondo junto con otros cambios de diseño. Si lo haces, no podrás sacar conclusiones definitivas sobre el impacto del vídeo. Asegúrate también de tener un plan por si el vídeo acaba afectando a tus métricas clave.

Realiza un test A/B para comparar el rendimiento de tu página con un vídeo de fondo frente a una imagen estática. Por seguridad, empieza dirigiendo solo una pequeña parte de tu tráfico a esa página.

Los tests A/B tienen su aquel: son una mezcla de magia y matemáticas. La mayoría de los especialistas en usabilidad se dejan llevar por la experiencia, el instinto y la opinión personal a la hora de decidir qué cambios de diseño encandilan a los clientes.

Al fin y al cabo, son tus clientes y tu marca quienes deciden qué funciona mejor. Pero los datos son la mejor forma de saber lo que tus clientes realmente piensan, en lugar de lo que dicen que piensan.

¿Has experimentado ya con vídeos de fondo?

Si es así, ¡nos encantaría conocer tus resultados! Puede que incluso nos interese publicar tu historia, así que no dudes en dejar un comentario aquí abajo.


Última actualización
September 26, 2017
Categoría

Artículos relacionados

Nomenclatura de clases 101: BEM
Nomenclatura de clases 101: BEM

Nomenclatura de clases 101: BEM

Nomenclatura de clases 101: BEM

Diseño
Por
Micah Ryan
,
,
Leer artículo
Crear texto con efecto knockout en Webflow
Crear texto con efecto knockout en Webflow

Crear texto con efecto knockout en Webflow

Crear texto con efecto knockout en Webflow

Diseño
Por
Micah Ryan
,
,
Leer artículo
De Sketch a Webflow: cómo convertir maquetas en sitios web reales
De Sketch a Webflow: cómo convertir maquetas en sitios web reales

De Sketch a Webflow: cómo convertir maquetas en sitios web reales

De Sketch a Webflow: cómo convertir maquetas en sitios web reales

Desarrollo
Por
Micah Ryan
,
,
Leer artículo
Diseña y construye el sitio web de tu agencia, parte 2: Planificación
Diseña y construye el sitio web de tu agencia, parte 2: Planificación

Diseña y construye el sitio web de tu agencia, parte 2: Planificación

Diseña y construye el sitio web de tu agencia, parte 2: Planificación

Estrategia
Por
Tom Johnson
,
,
Leer artículo
Destacado de aplicaciones: Google site tools para Webflow
Destacado de aplicaciones: Google site tools para Webflow

Destacado de aplicaciones: Google site tools para Webflow

Destacado de aplicaciones: Google site tools para Webflow

Dentro de Webflow
Por
,
,
Leer artículo
Cómo añadir videos de fondo en HTML: consejos y ejemplos gratuitos
Cómo añadir videos de fondo en HTML: consejos y ejemplos gratuitos

Cómo añadir videos de fondo en HTML: consejos y ejemplos gratuitos

Cómo añadir videos de fondo en HTML: consejos y ejemplos gratuitos

Diseño
Por
John Moore Williams
,
,
Leer artículo

verifone logomonday.com logospotify logoted logogreenhouse logoclear logocheckout.com logoreddit logothe new york times logoideo logoupwork logodiscord logo
verifone logomonday.com logospotify logoted logogreenhouse logoclear logocheckout.com logoreddit logothe new york times logoideo logoupwork logodiscord logo

Empieza gratis

Prueba Webflow todo el tiempo que quieras con nuestro plan Starter gratuito. Compra un plan de sitio de pago para publicar, alojar y desbloquear funciones adicionales.

Empieza, es gratis
Ver demostración

Prueba Webflow todo el tiempo que quieras con nuestro plan Starter gratuito. Compra un plan de sitio de pago para publicar, alojar y desbloquear funciones adicionales.