Interfaz de video interactivo

El Desafío

Crear una interfaz de reproductor de video móvil donde los usuarios puedan entender intuitivamente que al hacer swipe (horizontal y verticalmente), pueden descubrir más contenido relacionado.

Mi rol

Investigación Centrada en el Usuario, Interacción, Interfaces, Prototipado, Testeo

Cliente

Rhinobird

La Solución

Reproductor de videos con swipe horizontal para encontrar videos de la misma categoría, y horizontal para descubrir nuevas categorías de contenido.

Animación inicial que muestra que hay más videos "atrás".

Reproductor que señala la existencia de más contenido a través de barra continua horizontal e indicadores infinitos verticalmente.

El gesto swipe horizontal despliega inicialmente la flecha con un vistazo al próximo video.

La transición entre videos es líquida, para explicitar el gesto de "destapar" videos.

El Proceso

Rhinobird es una empresa de tecnología de videos basada en Boston EEUU y Santiago de Chile. Su fin es crear interfaces de videos inteligentes que permitan a los usuarios interactuar con ellas y descubrir más contenido.

Para el diseño del reproductor quise agregar pistas que permitieran una navegación por gestos intuitiva y veloz.

En la pantalla inicial, antes de presionar play, agregué una pequeña animación donde se ve el primer video tapando al siguiente, imitando el efecto de un mazo de cartas cerrandose. De esta forma el usuario puede intuir que viene un video por detrás. Para apoyar esta idea cambié el diseño del icono play regular por uno que dibuja estos elementos por detrás.

Una vez que el video se empieza a reproducir, junto con la barra de progreso, título de video y controles agregué dos barras indicadoras de que son slides. La razón por la que decidí hacer una barra como línea continua y la otra como cuadrados separados es porque el contenido que se descubre horizontalmente es contenido más relacionado que el vertical. Por ejemplo horizontalmente se pueden decubrir más canciones de un grupo musical, y verticalmente se pueden descubrir otros grupos musicales.

Luego de 3 segundos desaparece la información del video, junto con el filtro rosado, y solo se mantienen durante 3 segundos más las barras indicadoras de slides, para reforzar su presencia.

Para los gestos de swipe horizontal y vertical agregué una transición líquida, de manera que sea más explícito esta sensación de estar "destapando" el siguiente video.