Contenido interactivo: qué es y cómo integrarlo en tu web

El objetivo de la mayoría de gestores de páginas web es entretener a sus visitantes o informarles sobre áreas temáticas determinadas. Hoy en día conviene más que nunca priorizar el contenido único y de calidad para destacar sobre los demás. En este sentido, el contenido interactivo, es decir, el contenido que motiva al usuario a participar, tiene cada vez más relevancia.

Los motivos están muy claros: los contenidos interactivos se dirigen a los usuarios a distintos niveles. Los visitantes no solo leen un texto o ven una imagen, sino que mediante su intervención también pueden influir en un elemento, desbloquear el acceso a información adicional o manifestar sus propias ideas. De esta manera, el contenido se convierte en toda una experiencia y permanece más tiempo en la memoria. La interacción con la página web y también con las marcas o los servicios asociados va más allá de una simple lectura. La probabilidad de que el usuario quede satisfecho y efectúe la ansiada conversión se incrementa de igual forma que su tiempo de permanencia.

A continuación te ofrecemos un resumen sobre los diferentes tipos de contenido interactivo y te presentamos herramientas útiles para crearlo o integrarlo en tu página web.

¿Qué formatos de contenido interactivo existen?

Existen diferentes tipos de contenidos interactivos que pueden integrarse en los proyectos web con más o menos trabajo. En función del formato se necesitan diferentes herramientas y conocimientos sobre programación, lo que da lugar a que cada uno de los tipos de contenido se diferencie del resto en los costes que se generan. La siguiente tabla muestra algunas de las soluciones más interesantes para contenidos web interactivos:

Tipo de contenido interactivo

Descripción

Trabajo y costes

Ejemplo

Configuradores

Aplicación web que permite a los usuarios estudiar los productos que le interesan en profundidad y ver el resultado de sus configuraciones y ajustes.

Muy elevado

Configurador del vehículo deseado de Opel

Calculadores

Herramienta para calcular el precio de un producto

Elevado o muy elevado

Cómo calcular el seguro de coche de Rastreator

Cuestionario

Test de conocimientos en modo pregunta-respuesta

Reducido

Test de conocimientos científicos del FECYT

Vídeos interactivos/clips de 360 grados

Vídeos en los que los usuarios influyen activamente en su desarrollo en los ángulos de visión

Elevado/muy elevado

Vídeos de YouTube en 360 grados

Diapositivas

Galerías con imágenes desplazables sobre un tema determinado

Muy reducido

Galería de fotos de El Periódico de Aragón

Diagramas, tarjetas e infografías interactivas

Gráficos que presentan información y datos adicionales cuando el usuario hace clic

Elevado

Infografía “Millennials“ de Goldman Sachs

Juegos

Juego web o móvil que se apoya de manera temática o creativa en la marca, el servicio o el producto 

Muy elevado

“Pleasure Hunt 2” de Magnum

Storytelling interactivo

Conexión de diferentes elementos interactivos para explicar una historia

Elevado

Sevenhills “Nature’s Combinations“

Las mejores herramientas para crear contenido interactivo

Los contenidos anteriores requieren más trabajo que los textos y las imágenes al uso. Asimismo, los costes también son superiores y en ello entran en juego las herramientas y servicios necesarios para la creación de elementos interactivos. Si no eres un experto en programación de videojuegos pero quieres integrar uno en tu página web, lo recomendable es contratar a una agencia externa. Algo similar ocurre con los vídeos en 360º profesionales, que conllevan más trabajo de lo que puede parecer a simple vista. La necesidad de tener un equipamiento de alta calidad y la inversión de tiempo para la reelaboración del material en bruto puede generar unos gastos que alcancen fácilmente las cinco cifras incluso si se trata de tan solo unos cuantos minutos de vídeo.

Algunos contenidos interactivos, como gráficos, cuestionarios o diapositivas, se pueden crear sin ayuda de servicios externos. Para ello se necesita un buen concepto y la herramienta adecuada. A continuación te presentamos algunas de las más interesantes.

ThingLink

La empresa finlandesa ThingLink publicó en 2011 el software Rich Media Tags, con el que se pueden enlazar imágenes en páginas web y redes sociales. Desde entonces, el equipo de desarrolladores ha implementado de forma constante la aplicación web, que lleva el nombre de la empresa, la cual permite ampliar las imágenes y los gráficos con elementos adicionales como cajas de texto, fotos, música, vídeos o enlaces. Para ello, el usuario dispone de un intuitivo editor web al que arrastra el gráfico o la imagen original para trabajar. Los botones personalizados indican posteriormente al usuario dónde se oculta el contenido interactivo.

La versión básica del editor de imágenes es gratuita, pero ofrece solo un botón estándar en diferentes colores para señalizar elementos interactivos. Además, el número de visualizaciones mensuales de imágenes o gráficos está limitado a 10.000. Si quieres personalizar el diseño del botón y de la información adicional, puedes optar por el paquete “Professional” (20 $/mes para un usuario– 100.000 visualizaciones), que ofrece numerosas posibilidades de estadísticas de análisis y permite ocultar el branding de ThingLink del gráfico interactivo. Con el paquete “Premium” (125 $/mes para cinco usuarios y 1 millón de visualizaciones) también se pueden crear imágenes en 360 grados y vídeos con contenidos interactivos.

Ventajas Inconvenientes
✔ Inserción sencilla e intuitiva de contenidos externos ✘ Interfaz en inglés
✔ El contenido es automáticamente responsivo ✘ Solo se pueden crear vídeos interactivos con la edición Premium
✔ Versión básica gratuita muy útil para probar contenido interactivo  

Infogram

Infogram es la herramienta adecuada para aquellos que quieran presentar datos a sus usuarios de forma atractiva y utilizar elementos interactivos. Esta herramienta web pertenece a la empresa Prezi, que, entre otros, también ofrece un software de presentaciones homónimo. Infogram dispone de diversos diseños y módulos para crear infografías, mapas o diagramas interactivos. De forma manual o mediante la función de importación, estos pueden complementarse con algunos conjuntos de datos y también ofrece interfaces para Google Drive, Dropbox y OneDrive. Los gráficos resultantes pueden integrarse mediante un código de incrustación o descargarse como archivo JPG o PNG (solo en las versiones de pago).  

La versión básica de Infogram puede utilizarse totalmente gratis para crear contenido interactivo, aunque sus funciones están muy limitadas. Con todo, ofrece numerosos mapas (EE.UU., Europa, África, etc.) y una pequeña selección de iconos e imágenes. Además, existe la obligación de almacenar el proyecto públicamente. Para poder crear proyectos privados y acceder a millones de imágenes y de iconos son necesarios los paquetes de pago “Pro” (hasta 100 proyectos a partir de 19 $/mes), “Business” (hasta 1.000 proyectos a 67 $/ mes) o “Enterprise” (número ilimitado de proyectos, precio bajo petición). Estos últimos dos paquetes permiten, además, utilizar el propio logo (normalmente los gráficos y los diagramas contienen el logo de Infogram).

Ventajas Inconvenientes
✔ Más de 35 plantillas de diagramas ✘ Interfaz de usuario en inglés
✔ Los gráficos creados se integran fácilmente mediante código de incrustación ✘ Los proyectos solo pueden guardarse públicamente con la versión gratuita
✔ Varias interfaces para importar conjuntos de datos propios ✘ El branding puede esquivarse a partir de la versión “Business”

Qzzr

Qzzr es una de las mejores herramientas para la creación de cuestionarios, encuestas y listas a medida. El software cuenta con más de 270.000 usuarios, entre ellos instituciones y empresas conocidas como los canales de televisión ESPN y HBO, la plataforma de vídeos Vimeo o el fabricante de bebidas energéticas Red Bull. Con la herramienta se pueden crear rápidamente preguntas, opciones de respuesta, descripciones y consejos y el contenido interactivo puede enriquecerse con imágenes, vídeos o archivos de audio. Los contenidos ya acabados se insertan directamente en el proyecto web mediante un código de incrustación o se comparten con un clic en las diferentes redes sociales y están optimizados automáticamente para dispositivos móviles.

Qzzr no solo permite crear contenidos interactivos, sino que también entrega estadísticas detalladas sobre las actividades de los usuarios. Así se puede saber cuántos usuarios han respondido a un cuestionario o han participado en una encuesta, el promedio de tiempo que han necesitado o si han rellenado el cuestionario o la encuesta hasta el final (completion rate). Si se enlaza una llamada a la acción con el contenido se obtienen también datos sobre la tasa de conversión.

Con el fin de integrar un cuestionario sencillo o una pequeña encuesta en una página web se puede recurrir al paquete gratuito “Basic”. Sin embargo, a los profesionales se les recomienda crear contenidos interactivos con el modelo “Pro” (24,99 $/mes), versión en la que los cuestionarios incluyen una pequeña referencia a Qzzr, mientras que en la versión “Basic”, por ejemplo, la marca también aparece en los contenidos compartidos. Asimismo, también es posible incluir recomendaciones automáticas a otros cuestionarios y encuestas de la red Qzzr. Pero si se prefiere evitar hacer referencia a la herramienta o al proveedor, esto solo es posible con la versión “Performance”, cuyo precio está muy por encima del de la versión “Pro”. Para conocer las tarifas, debes contactar con la empresa.

Ventajas Inconvenientes
✔ La versión gratuita permite crear numerosos cuestionarios ✘ Interfaz de usuario en inglés
✔ Estrecha vinculación con características de análisis y de gestión de leads ✘ Solo se puede eliminar completamente el branding de Qzzr con el plan “Performance”möglich
✔ Integración sencilla de elementos multimedia como imágenes, vídeos o GIF  

Cincopa

Cincopa, proveedor de plataformas multimedia fundado en 2006, ofrece soluciones para la integración y gestión de contenidos multimedia en proyectos web. Con ellas, los usuarios pueden ampliar sus páginas web con elementos a medida como portales de vídeo, podcasts o diapositivas. Para tales fines, Cincopa ofrece, por un lado, editores web especiales con los que se puede crear el contenido interactivo deseado y, por el otro, los recursos de hosting necesarios para los archivos multimedia que se utilizan (audio, vídeo, imágenes, etc.). Además, también existen otras posibilidades para la incrustación de contenidos ya creados como, por ejemplo, con código HTML, páginas de destino, enlaces o plugins para CMS como WordPress, Joomla, Blogger, Drupal o Wix.

Para elaborar contenido multimedia interactivo, los usuarios de Cincopa pueden recurrir a diversas plantillas para collages, diapositivas, reproductores de vídeo, listas de reproducción o timelines, todos incluidos en la versión gratuita. Esta tarifa básica solo incluye un dominio, 50 imágenes, 3 archivos de audio y 3 de vídeo, así como 200 MB de tráfico y también puede verse “Powered by Cincopa” en el contenido. A los que crean y publican contenidos interactivos regularmente se les recomienda uno de los paquetes de pago: “Startup” (1 dominio, 5 archivos de vídeo y 5 de audio, 1500 imágenes, 10 GB de tráfico por 99 $), “Plus” (5 dominios, 50 archivos de vídeo, 200 de audio, 2000 imágenes, 100 GB de tráfico por 25 $ al mes) o “Corporate” (dominios ilimitados, 500 vídeos, 1000 audios, 5000 imágenes, 400 GB de tráfico por 99 $ al mes).

Ventajas Inconvenientes
✔ Diversas plantillas para audios, vídeos e imágenes personalizados ✘ Interfaz de usuario en inglés
✔ Editores web intuitivos ✘ Alojamiento de los archivos en servidores de los EE.UU.
✔ Posibilidad de cambiar de paquete en cualquier momento  

Adobe Spark

Adobe es principalmente conocido por su Flash Player y su Creative Cloud (antes Creative Suite). Con Adobe Spark, la empresa de software ofrece una solución propia para crear un storytelling interactivo en la World Wide Web. Este modelo creativo cuenta con las tres herramientas Spark Post (imágenes simples), Spark Video (vídeos interactivos) y Spark Page (web stories). El usuario puede decidir libremente si quiere optimizar una foto con texto y filtros de diseño, crear clips publicitarios e informativos de calidad o contar una historia interactiva. Además, los clientes de la Creative Cloud, de Adobe Stock o de Lightroom tienen la posibilidad de vincularlos con las aplicaciones web de Spark.

Para agregar contenido interactivo a tu proyecto también puedes subir y utilizar tu propio material gráfico, además de crear encabezados, bloques de texto y botones y posicionarlos en el lugar deseado en las web stories. Seleccionando un tema se puede influir en el diseño. Para importar clips es necesario introducir el URL correspondiente y el contenido se comparte mediante el enlace generado automáticamente (funciones integradas para Facebook y Twitter), se envía por correo electrónico o se incrusta en la página web propia con un código. Las aplicaciones de Spark, que también están disponibles para iOS, son completamente gratuitas y los abonados a la Creative Cloud pueden, por ejemplo, ocultar la publicidad.

Ventajas Inconvenientes
✔ Aplicación fácil e intuitiva ✘ Los contenidos no pueden descargarse, pero sí alojarse en Adobe
✔ Aplicaciones disponibles para iOS ✘ Opciones de diseño limitadas (p. ej., el tamaño de fuente no es personalizable, las fuentes están vinculadas a los temas)
✔ Compatible con Creative Cloud ✘ Interfaz de usuario en inglés

Genial.ly

Genial.ly es una herramienta web española gratuita con sede en Córdoba y creada en 2015 que permite crear un sinfín de contenidos interactivos atractivos, entre ellos presentaciones, infografías, microsites, catálogos, etc., utilizando HTML5 y sin necesidad de tener conocimientos sobre programación. Desde sus comienzos ha experimentado una gran evolución que la ha convertido en una herramienta versátil, intuitiva y fácil de usar. Una de las características más particulares es que no solo está orientada al ámbito del marketing y la publicidad, sino que también ofrece funciones para el sector de la educación, para diseñadores o para empresas.

Para poder utilizarla, la plataforma requiere registrarse como usuario a través de un correo electrónico, de una cuenta de Google+ o de Facebook. Tras ello, podrás sacarle el máximo partido a la herramienta para crear el contenido interactivo más adaptado a tus necesidades y con una amplia gama de recursos digitales (imágenes y plantillas propias, audios y vídeos, localizaciones de Google Maps, pines, etc.) Asimismo, Genial.ly permite también almacenar en tu perfil todos los trabajos que hayas elaborado y los cambios se guardan de manera automática, lo que supone una importante garantía para no perder ningún dato.

Otro de los aspectos más importantes de esta herramienta multiuso es que permite la integración de proveedores externos, tales como Spotify, Amazon o YouTube, y con ella también es posible compartir los contenidos interactivos en las redes sociales o por correo electrónico e incrustarlos en páginas web, blogs, etc. Todo ello, unido a un editor de fácil manejo con numerosos elementos, hace de Genial.ly una herramienta versátil que cada vez tiene más peso en el ámbito de la interactividad y la animación tanto en su versión gratuita como de pago.

Ventajas Inconvenientes
✔ No requiere conocimientos de programación ✘ Requiere registro para poder utilizar la plataforma, aunque es gratuito
✔ Numerosas plantillas gratuitas y posibilidades de animación  
✔ Versión gratuita completa y fácil de usar  

Mapme

Con el editor web Mapme pueden crearse mapas interactivos de calidad. El usuario tiene la posibilidad de elegir entre ocho estilos de mapas diferentes tales como fotografías por satélite, mapas viales o mapas físicos. Independientemente del tipo de mapa elegido, pueden incluirse pines para marcar un lugar determinado o revelar información sobre él. Además, es posible personalizar el aspecto de los pines (en el paquete “Premium” también se pueden utilizar algunos iconos) y añadir imágenes, archivos de audio y vídeo y botones para las redes sociales. En función del diseño, el contenido interactivo de los pines aparece en la parte inferior del mapa en un menú desplegable (slider style) o en una lista en la parte izquierda del mapa (list style).

Si quieres utilizar Mapme para generar contenido interactivo para tu página web, es recomendable que recurras a la versión de pago. La versión gratuita de la aplicación web sirve como demostración de la herramienta y no ofrece, por ejemplo, la posibilidad de publicar e integrar los mapas creados. Los usuarios pueden elegir entre tres paquetes: “Basic” (a partir de 19 $/mes), “Standard” (a partir de 29 $/mes) y “Plus” (a partir de 49 $/mes). Este último no solo permite poner pines en 500 lugares, sino también acceder a efectos 3D para obtener mapas interesantes. Adicionalmente, los propietarios de la licencia “Plus” pueden adaptar los mapas mediante CSS.  

Ventajas Inconvenientes
✔ Los pines pueden crearse individualmente ✘ Interfaz de usuario en inglés
✔ Todos los mapas están automáticamente optimizados para dispositivos móviles ✘ Los mapas no pueden publicarse con la versión gratuita
✔ Tutorial incluido  

Proyectos web con contenidos interactivos: best practices y ejemplos

Las herramientas que se han presentado ofrecen numerosas opciones para crear proyectos propios interactivos con medios sencillos y un presupuesto reducido. Las empresas con una mayor solidez financiera también pueden recurrir a agencias para la creación y el mantenimiento de los contenidos web interactivos. En cualquier caso, dichos contenidos interactivos confieren un mayor atractivo a las páginas web siempre que este se coloque en el lugar adecuado y no aleje a los visitantes del producto o servicio propio. Por ello, es necesario crear el marco adecuado para el contenido interactivo y también encontrar el equilibrio perfecto entre información y entretenimiento, una tarea que consiguen con éxito las siguientes páginas web internacionales:

  • Airbnb: en una infografía interactiva, la página alemana de Airbnb pone de relieve con varias imágenes, animaciones y mapas el impacto económico del servicio en la economía de la capital.
  • Fillory: con un impresionante mapa interactivo, la página welcometofillory.com presenta el mundo fantástico Fillory de la serie del canal Syfy “The Magicians” (basado en la trilogía homónima de Lev Grossman), pero también ofrece información detallada sobre los caracteres principales y minijuegos y cuestionarios bajo el nombre de “Quests”. Con la publicación de la segunda temporada de la serie la emisora permitió que el estudio de producción UNIT9 creara la página web.
  • An deiner Seite: el rapero Kontra K no ha rodado un vídeo musical normal para su canción “An deiner Seite” (a tu lado), sino una versión interactiva alternativa. Mientras se reproduce la canción, el usuario puede utilizar el espaciador para elegir el momento de la trama (actualmente o 24 horas antes) y averiguar toda la historia.
  • Druni: la página web de la perfumería Druni es un buen ejemplo del valor de las slideshows para el eCommerce. En la página web de dicha tienda se aprecia una proyección de imágenes con algunas de las promociones y productos más destacados de algunas marcas. Al hacer clic en las imágenes, se redirige al usuario a la página de productos de la marca en cuestión en la tienda.
  • Seat: con el configurador online del fabricante de coches Seat, el usuario puede seleccionar las características de su vehículo en función de sus necesidades teniendo en cuenta factores como el modelo, el consumo, la emisión de CO2, el color, etc. En una vista principal en la que aparecen los modelos de la marca, basta con seleccionar uno e ir eligiendo las características y funciones deseadas.