¿Cómo producir un vídeo interactivo para tu público?

Con la metodología DCU/UX podrán colaborar filmmakers, “marketeros”, diseñadores y desarrolladores en la producción de un vídeo interactivo que se adapte al usuario final

Ruben Mir Ugolini
Blog de Interactius UX
8 min readSep 29, 2016

--

La era digital presenta un nuevo escenario para el storytelling: el usuario puede jugar y navegar por la historia. Pero, ¿cómo podremos crear un vídeo interactivo que se adapte a su curiosidad e intuición? Profesionales del campo audiovisual, “marketeros”, diseñadores y programadores necesitan compartir un lenguaje en común: la metodología de Diseño Centrado en el Usuario (DCU).

“Interactive Storytelling brings the best and most engaging traditions to the digital age”, por Paulina Greta Stefanovic (Inglés, subtítulos) | Hackaday

Producir un vídeo interactivo: mi equipo no se entiende, mi público tampoco

IT-Workflow
El usuario, en el centro del vídeo interactivo, tiene que navegar intuitivamente | Linear Systems

Ya no hay marcha atrás, el vídeo interactivo ha llegado para quedarse. Con él han aparecido nuevos modelos de negocio en el mundo digital, gracias a sus enormes posibilidades a nivel de engagement. Aún así, todavía no existe una metodología clara para ejecutar de una manera eficiente y efectiva este tipo de proyectos multidisciplinares: filmmakers, publicistas y “marketeros”, diseñadores y programadores están obligados a entenderse. Según el timing de un proyecto interactivo , y sin tener en cuenta la Experiencia de Usuario (UX), un modelo plausible sería el que muestra la tabla que aparece en el lateral: las 3 fases de la producción audiovisual (estandarizadas en más de 100 años de historia del cine) encajarían de este modo con las 4 fases de realización de un interactivo.

Sin embargo, existen ya numerosos ejemplos de proyectos con un coste elevadísimo que han fracasado por no tener en cuenta la UX. De este modo, la metodología DCU pone en el centro de todo proyecto al usuario final del producto digital. Y así es que aparece en escena una nueva figura en la producción audiovisual interactiva: el User Experience Designer (que, según la fase del proyecto, irá acompañado por un perfil profesional de la producción interactiva diferente). Esta persona se insiere en cada una de las fases del proyecto, como veremos a continuación, para garantizar que la información, la interacción, el look&feel y la funcionalidad del vídeo interactivo aúnen los objetivos del proyecto con la satisfacción del usuario final.

Como explicaba mi compañera Elena Campo en su artículo “Pon un UXer en tu producción audiovisual”, el proceso de creación de cualquier tipo de vídeo encaja perfectamente con la metodología DCU.

Metodología para vídeo interactivo, sin DCU | Interactius

Las 4 fases del proyecto: requerimientos, definición, diseño y desarrollo

Para realizar un vídeo interactivo se deben acometer 4 fases consecutivas: requerimientos, definición, diseño y desarrollo. Esto, sin tener en cuenta al usuario. Sin embargo, con la metodología DCU, se pueden realizar estas fases de manera iterativa, repitiendo procesos cada vez que se testea con usuarios finales una evolución del proyecto.

A continuación vamos a conocer en qué consiste cada fase, qué perfiles necesita, y qué valor aporta el UX Designer.

UX-fases-Interactius
Metodología DCU, fases de un proyecto interactivo con evaluación de la Experiencia de Usuario (UX) | Interactius

Requerimientos

La toma de requerimientos constituye la primera fase de todo proyecto digital: ¿qué necesidades vamos a satisfacer con el desarrollo de este vídeo interactivo? Para responder a esta pregunta existen innumerables elementos que se pueden analizar previamente a la definición del proyecto. Por ello, según la metodología DCU, una de las principales tareas a desarrollar en esta primera fase es la investigación.

En el caso del vídeo interactivo parece interesante fijarse en: objetivos del proyecto (¿qué quiero conseguir con este proyecto?), público (¿a quién va dirigido y qué le puedo ofrecer?), búsqueda de referentes (¿qué se ha hecho ya que sea parecido a lo que quiero hacer?), detección de oportunidades (¿qué no se ha hecho y puede resultar original en el storytelling de mi vídeo interactivo?).

  • Perfiles audiovisuales: Productor ejecutivo, productor, director, director de fotografía, director de arte y guionista.
  • Perfiles UX: Investigador UX (Researcher), encargado de analizar los objetivos del proyecto y el público objetivo, definiendo los deseos y necesidades de los usuarios y cómo el vídeo interactivo puede encajar en ellos. Ayudará a entender qué tecnología usan, cómo interactúan con ella.
users-in-the-center
¿Qué busca y por dónde se mueve mi público? | Designmodo

Definición

La definición de un proyecto interactivo consiste en recoger todos los requerimientos previos y convertirlos en Arquitectura de la Información, Estrategia de Contenidos, Diseño de la Interacción y Estructura Visual de la aplicación. O lo que es lo mismo: ordenar las ideas de manera jerárquica (con un mapa de contenidos o sitemap + despliegue de contenidos), planificar cómo navegará nuestro usuario (con un workflow o flowchart) y cómo se desarrollará por el storytelling (con un guión interactivo). Una vez se cuente con estos tres documentos se podrá componer la estructura visual de la página, llamada wireframe, imprescindible para que el diseñador pueda crear una interfaz para el usuario, y para que el programador entienda las funcionalidades de cada elemento que aparezca. Hay que diseñar tantos wireframes como páginas clave (con diferentes elementos interactivos, diferentes funcionalidades) haya.

  • Perfiles audiovisuales: Director y guionista.
  • Perfiles UX: Arquitecto de la Información (IA) o Estratega de Contenidos, encargado de definir la estructura de los contenidos, el diseño de la interacción y la estructura visual y funcional del vídeo interactivo, e Investigador UX, encargado de testear la definición propuesta por el IA con usuarios finales. Existen numerosas técnicas interesantes para evaluar la estructura e interacción de la información: desde el tree testing, que evalua la estructura y comprensión de la información, hasta el cognitive walkthrough, que analiza la interacción y estructura visual a través de prototipos/wireframes en papel.
Workflow o Flowchart de usuario | Stephanie Pakrul

Diseño

Una vez terminada la fase de definición con la creación de los wireframes, empieza la fase de diseño de interfaz de usuario, o UI Design, donde se aplica la capa creativa/artística a los elementos del vídeo interactivo: desde los colores o la tipografía, al espacio entre elementos y contenido (borde, margen y relleno). La documentación generada se resume en maquetas gráficas y guía de estilos, como se aprecia en la imagen lateral, que servirá para programar el CSS de la aplicación digital.

Mi compañera Alba Huguet, diseñadora UI de Interactius, explica la metodología en profundidad en el artículo “Buenas prácticas a la hora de iniciar el diseño UI en un proyecto digital” (en catalán).

  • Perfiles audiovisuales: Director y director de arte.
  • Perfiles UX: Diseñador UI, encargado de crear la capa artística del interactivo y de generar su guía de estilos, e Investigador UX, encargado de testear la visibilidad del diseño UI con usuarios finales. Para decidir entre dos diseños podremos realizar, por ejemplo, un Test A/B con Eyetracking.
Guia-estilos-lonely-planet
Guía de Estilos | Lonely Planet

Desarrollo

La producción de un vídeo interactivo, como cualquier proyecto digital, finaliza con el desarrollo de la web/app donde se va a reproducir el contenido. Siguiendo las funcionalidades que indican los wireframes definidos por el Estratega de Contenidos y la maquetación que describe la guía de estilos, el desarrollador front-end ejecutará toda la programación a medida.

Con tal de que la web o app siga las recomendaciones de la metodología DCU, que apuntan hacia optimizar la Experiencia de Usuario (UX), el programador prestará especial atención a los estándares marcados por el W3C, la accesibilidad de la web/app/vídeo (configurando la descripción para personas invidentes, por ejemplo), o las directrices de Google para webmasters.

  • Perfiles audiovisuales: Director.
  • Perfiles UX: Front-end developer, encargado de desarrollar el producto digital (web/app/vídeo interactivo) según los estándares de programación, siguiendo la documentación proporcionada por el Estratega de Contenidos y el Diseñador UI; e Investigador UX, encargado de testear la usabilidad y experiencia de usuario mediante diferentes técnicas de evaluación, como la evaluación heurística.
Development
Desarrollo front-end | Ilya Pavlov

Todo en uno: soy filmmaker y necesito un software

No cabe duda de que para poder realizar un vídeo interactivo con la metodología DCU hace falta contar con muchos recursos, tanto a nivel humano como de producción. Sin embargo, ¿Puede crear un vídeo interactivo un freelance o un pequeño equipo de creación audiovisual? La respuesta es: SÍ.

Con el auge de las narrativas interactivas han aparecido varios programas pensados para filmmakers que quieran aventurarse en la producción de vídeos interactivos en HTML5. En este artículo voy a destacar 4: Playfilm, Klynt, Rapt Media y Wirewax.

Playfilm

PlayFilm

Surgida en Valencia, Playfilm propone un software de edición de vídeo interactivo en la nube, y no requiere conocimientos de programación. Permite producir vídeos interactivos y gamificarlos con asombrosa velocidad. Su exportación en HTML5, estándar de la web actual, se adapta a todos los dispositivos (es decir, es responsive). Además, es posible monitorizar y analizar cómo interactúa el usuario con nuestros contenidos.

Klynt

klynt

Klynt es el rey de los editores de interactivos multimedia para documentalistas, gracias a su storyboard. Consiste en un programa de escritorio que cuenta con una interfaz similar a los editores profesionales de vídeo, y exporta el resultado en código HTML5, adaptándose a cualquier dispositivo.

Además, en la actualidad han sacado un software para crear historias interactivas a 360º, pensado para Gear VR/Oculus y Google Cardboard, llamado Wonda VR.

Rapt Media

RaptMedia

Con una interfaz del storyboard similar a Klynt, pero en la nube como Playfilm, Rapt Media es uno de los líderes americanos en el campo de los vídeos interactivos. Destaca por ser muy customizable y enfocado al engagement de usuarios y a las conversiones.

Wirewax

Wirewax

Wirewax cuenta posiblemente con la tecnología para vídeo interactivo más potente del mercado. Su reconocimiento facial o de objetos permite etiquetar elementos del vídeo en movimiento con contenido extendido multimedia, de modo que persigue el elemento por el plano. Por contra, su elevado precio puede echar a muchos filmmakers o pequeñas productoras atrás.

--

--

Ruben Mir Ugolini
Blog de Interactius UX

Periodista Interactivo y Transmedia navegando por el universo UX. Viajando entre la infinidad de rumbos y la eternidad del tiempo. Sin límites ni fronteras.