Contenido in­ter­ac­ti­vo: qué es y cómo in­te­grar­lo en tu web

El objetivo de la mayoría de gestores de páginas web es en­tre­te­ner a sus vi­si­ta­n­tes o in­fo­r­mar­les sobre áreas temáticas de­te­r­mi­na­das. 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 in­ter­ac­ti­vo, es decir, el contenido que motiva al usuario a pa­r­ti­ci­par, tiene cada vez más re­le­va­n­cia.

Los motivos están muy claros: los co­n­te­ni­dos in­ter­ac­ti­vos se dirigen a los usuarios a distintos niveles. Los vi­si­ta­n­tes no solo leen un texto o ven una imagen, sino que mediante su in­te­r­ve­n­ción también pueden influir en un elemento, de­s­blo­quear el acceso a in­fo­r­ma­ción adicional o ma­ni­fe­s­tar sus propias ideas. De esta manera, el contenido se convierte en toda una ex­pe­rie­n­cia y permanece más tiempo en la memoria. La in­ter­ac­ció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 pro­ba­bi­li­dad de que el usuario quede sa­ti­s­fe­cho y efectúe la ansiada co­n­ve­r­sión se in­cre­me­n­ta de igual forma que su tiempo de pe­r­ma­ne­n­cia.

A co­n­ti­nua­ción te ofrecemos un resumen sobre los di­fe­re­n­tes tipos de contenido in­ter­ac­ti­vo y te pre­se­n­ta­mos he­rra­mie­n­tas útiles para crearlo o in­te­grar­lo en tu página web.

Los co­n­te­ni­dos an­te­rio­res requieren más trabajo que los textos y las imágenes al uso. Asimismo, los costes también son su­pe­rio­res y en ello entran en juego las he­rra­mie­n­tas y servicios ne­ce­sa­rios para la creación de elementos in­ter­ac­ti­vos. Si no eres un experto en pro­gra­ma­ción de vi­deo­jue­gos pero quieres integrar uno en tu página web, lo re­co­me­n­da­ble es contratar a una agencia externa. Algo similar ocurre con los vídeos en 360º pro­fe­sio­na­les, que conllevan más trabajo de lo que puede parecer a simple vista. La necesidad de tener un equi­pa­mie­n­to de alta calidad y la inversión de tiempo para la re­ela­bo­ra­ción del material en bruto puede generar unos gastos que alcancen fá­ci­l­me­n­te las cinco cifras incluso si se trata de tan solo unos cuantos minutos de vídeo.

Algunos co­n­te­ni­dos in­ter­ac­ti­vos, como gráficos, cue­s­tio­na­rios o dia­po­si­ti­vas, se pueden crear sin ayuda de servicios externos. Para ello se necesita un buen concepto y la he­rra­mie­n­ta adecuada. A co­n­ti­nua­ción te pre­se­n­ta­mos algunas de las más in­te­re­sa­n­tes.

La versión básica del editor de imágenes es gratuita, pero ofrece solo un botón estándar en di­fe­re­n­tes colores para señalizar elementos in­ter­ac­ti­vos. Además, el número de vi­sua­li­za­cio­nes mensuales de imágenes o gráficos está limitado a 10.000. Si quieres pe­r­so­na­li­zar el diseño del botón y de la in­fo­r­ma­ción adicional, puedes optar por el paquete “Pro­fe­s­sio­nal” (20 $/mes para un usuario– 100.000 vi­sua­li­za­cio­nes), que ofrece numerosas po­si­bi­li­da­des de es­ta­dí­s­ti­cas de análisis y permite ocultar el branding de ThingLink del gráfico in­ter­ac­ti­vo. Con el paquete “Premium” (125 $/mes para cinco usuarios y 1 millón de vi­sua­li­za­cio­nes) también se pueden crear imágenes en 360 grados y vídeos con co­n­te­ni­dos in­ter­ac­ti­vos.

La versión básica de Infogram puede uti­li­zar­se to­ta­l­me­n­te gratis para crear contenido in­ter­ac­ti­vo, 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 obli­ga­ción de almacenar el proyecto pú­bli­ca­me­n­te. Para poder crear proyectos privados y acceder a millones de imágenes y de iconos son ne­ce­sa­rios los paquetes de pago “Pro” (hasta 100 proyectos a partir de 19 $/mes), “Business” (hasta 1.000 proyectos a 67 $/ mes) o “En­te­r­pri­se” (número ilimitado de proyectos, precio bajo petición). Estos últimos dos paquetes permiten, además, utilizar el propio logo (no­r­ma­l­me­n­te los gráficos y los diagramas contienen el logo de Infogram).

Qzzr no solo permite crear co­n­te­ni­dos in­ter­ac­ti­vos, sino que también entrega es­ta­dí­s­ti­cas de­ta­lla­das sobre las ac­ti­vi­da­des de los usuarios. Así se puede saber cuántos usuarios han re­s­po­n­di­do a un cue­s­tio­na­rio o han pa­r­ti­ci­pa­do en una encuesta, el promedio de tiempo que han ne­ce­si­ta­do o si han rellenado el cue­s­tio­na­rio o la encuesta hasta el final (co­m­ple­tion rate). Si se enlaza una llamada a la acción con el contenido se obtienen también datos sobre la tasa de co­n­ve­r­sión.

Con el fin de integrar un cue­s­tio­na­rio sencillo o una pequeña encuesta en una página web se puede recurrir al paquete gratuito “Basic”. Sin embargo, a los pro­fe­sio­na­les se les re­co­mie­n­da crear co­n­te­ni­dos in­ter­ac­ti­vos con el modelo “Pro” (24,99 $/mes), versión en la que los cue­s­tio­na­rios incluyen una pequeña re­fe­re­n­cia a Qzzr, mientras que en la versión “Basic”, por ejemplo, la marca también aparece en los co­n­te­ni­dos co­m­pa­r­ti­dos. Asimismo, también es posible incluir re­co­me­n­da­cio­nes au­to­má­ti­cas a otros cue­s­tio­na­rios y encuestas de la red Qzzr. Pero si se prefiere evitar hacer re­fe­re­n­cia a la he­rra­mie­n­ta o al proveedor, esto solo es posible con la versión “Pe­r­fo­r­ma­n­ce”, cuyo precio está muy por encima del de la versión “Pro”. Para conocer las tarifas, debes contactar con la empresa.

Para elaborar contenido mu­l­ti­me­dia in­ter­ac­ti­vo, los usuarios de Cincopa pueden recurrir a diversas pla­n­ti­llas para collages, dia­po­si­ti­vas, re­pro­du­c­to­res de vídeo, listas de re­pro­du­c­ció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 co­n­te­ni­dos in­ter­ac­ti­vos re­gu­la­r­me­n­te se les re­co­mie­n­da 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 ili­mi­ta­dos, 500 vídeos, 1000 audios, 5000 imágenes, 400 GB de tráfico por 99 $ al mes).

Para agregar contenido in­ter­ac­ti­vo a tu proyecto también puedes subir y utilizar tu propio material gráfico, además de crear en­ca­be­za­dos, bloques de texto y botones y po­si­cio­nar­los en el lugar deseado en las web stories. Se­le­c­cio­na­n­do un tema se puede influir en el diseño. Para importar clips es necesario in­tro­du­cir el URL co­rre­s­po­n­die­n­te y el contenido se comparte mediante el enlace generado au­to­má­ti­ca­me­n­te (funciones in­te­gra­das para Facebook y Twitter), se envía por correo ele­c­tró­ni­co o se incrusta en la página web propia con un código. Las apli­ca­cio­nes de Spark, que también están di­s­po­ni­bles para iOS, son co­m­ple­ta­me­n­te gratuitas y los abonados a la Creative Cloud pueden, por ejemplo, ocultar la pu­bli­ci­dad.

Para poder uti­li­zar­la, la pla­ta­fo­r­ma requiere re­gi­s­trar­se como usuario a través de un correo ele­c­tró­ni­co, de una cuenta de Google+ o de Facebook. Tras ello, podrás sacarle el máximo partido a la he­rra­mie­n­ta para crear el contenido in­ter­ac­ti­vo más adaptado a tus ne­ce­si­da­des y con una amplia gama de recursos digitales (imágenes y pla­n­ti­llas propias, audios y vídeos, lo­ca­li­za­cio­nes 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 au­to­má­ti­ca, lo que supone una im­po­r­ta­n­te garantía para no perder ningún dato.

Otro de los aspectos más im­po­r­ta­n­tes de esta he­rra­mie­n­ta multiuso es que permite la in­te­gra­ción de pro­vee­do­res externos, tales como Spotify, Amazon o YouTube, y con ella también es posible compartir los co­n­te­ni­dos in­ter­ac­ti­vos en las redes sociales o por correo ele­c­tró­ni­co e in­cru­s­tar­los en páginas web, blogs, etc. Todo ello, unido a un editor de fácil manejo con numerosos elementos, hace de Genial.ly una he­rra­mie­n­ta versátil que cada vez tiene más peso en el ámbito de la in­ter­ac­ti­vi­dad y la animación tanto en su versión gratuita como de pago.

Si quieres utilizar Mapme para generar contenido in­ter­ac­ti­vo para tu página web, es re­co­me­n­da­ble que recurras a la versión de pago. La versión gratuita de la apli­ca­ción web sirve como de­mo­s­tra­ción de la he­rra­mie­n­ta y no ofrece, por ejemplo, la po­si­bi­li­dad 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 in­te­re­sa­n­tes. Adi­cio­na­l­me­n­te, los pro­pie­ta­rios de la licencia “Plus” pueden adaptar los mapas mediante CSS.  

Las he­rra­mie­n­tas que se han pre­se­n­ta­do ofrecen numerosas opciones para crear proyectos propios in­ter­ac­ti­vos con medios sencillos y un pre­su­pue­s­to reducido. Las empresas con una mayor solidez fi­na­n­cie­ra también pueden recurrir a agencias para la creación y el ma­n­te­ni­mie­n­to de los co­n­te­ni­dos web in­ter­ac­ti­vos. En cualquier caso, dichos co­n­te­ni­dos in­ter­ac­ti­vos confieren un mayor atractivo a las páginas web siempre que este se coloque en el lugar adecuado y no aleje a los vi­si­ta­n­tes del producto o servicio propio. Por ello, es necesario crear el marco adecuado para el contenido in­ter­ac­ti­vo y también encontrar el equi­li­brio perfecto entre in­fo­r­ma­ción y en­tre­te­ni­mie­n­to, una tarea que consiguen con éxito las si­guie­n­tes páginas web in­te­r­na­cio­na­les:

• Airbnb: en una in­fo­gra­fía in­ter­ac­ti­va, la página alemana de Airbnb pone de relieve con varias imágenes, ani­ma­cio­nes y mapas el impacto económico del servicio en la economía de la capital.
• Fillory: con un im­pre­sio­na­n­te mapa in­ter­ac­ti­vo, la página we­l­co­me­to­fi­llo­ry.com presenta el mundo fa­n­tá­s­ti­co Fillory de la serie del canal Syfy “The Magicians” (basado en la trilogía homónima de Lev Grossman), pero también ofrece in­fo­r­ma­ción detallada sobre los ca­ra­c­te­res pri­n­ci­pa­les y mi­ni­jue­gos y cue­s­tio­na­rios bajo el nombre de “Quests”. Con la pu­bli­ca­ción de la segunda temporada de la serie la emisora permitió que el estudio de pro­du­c­ción UNIT9 creara la página web.
• Druni: la página web de la pe­r­fu­me­ría Druni es un buen ejemplo del valor de las sli­de­sho­ws para el eCommerce. En la página web de dicha tienda se aprecia una pro­ye­c­ción de imágenes con algunas de las pro­mo­cio­nes y productos más de­s­ta­ca­dos 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 co­n­fi­gu­ra­dor online del fa­bri­ca­n­te de coches Seat, el usuario puede se­le­c­cio­nar las ca­ra­c­te­rí­s­ti­cas de su vehículo en función de sus ne­ce­si­da­des teniendo en cuenta factores como el modelo, el consumo, la emisión de CO₂, el color, etc. En una vista principal en la que aparecen los modelos de la marca, basta con se­le­c­cio­nar uno e ir eligiendo las ca­ra­c­te­rí­s­ti­cas y funciones deseadas.