Filmaton es una nueva aplicación que tiene como objetivo principal entregar información específica sobre cualquier película que el usuario o usuaria quiera ver, pudiendo escogerla según el tiempo disponible que tenga, el género que más le guste o encontrar a las mejor calificadas.
La planificación comienza reconociendo en conjunto la API de OMDB, la que contiene infinita información de películas y series.
El squad decidió trabajar en base a historias de usuario, complementadas con dailys y retrospectivas diarias.
Fué fundamental identificar de qué forma los usuarios podrían aprovechar dicha información de manera atractiva y amigable, por lo que la segunda gran tarea fué dar con nuestro usuario tipo.
Para reconocer al usuario se realizó una encuesta que obtuvo como resultado las siguientes respuestas:
- La encuesta tuvo un alcance de 57 personas
- Rango de edad de nuestros usuarios: el 71,4% tienen entre 22-35 años.
- El 98.2% disfruta de ver películas en casa.
- Las 57 personas encuestadas utilizan la plataforma Netflix.
- Los principales intereses del usuario para escoger una película son: el reparto (77,2%), el género (84,2%), y la reseña(56,1%).
- El 69,4% del total identifica como problema lo difícil que es escoger una película que les guste, mientras que el 24,6% se aqueja de no tener el tiempo suficiente para verlas.
- El feedback general respecto a qué esperan de una aplicación como esta apunta a: accesibilidad, simpleza, diversidad.
-Diagrama de flujo
Una vez reconocido el usuario, comienza el proceso creativo compuesto en primer lugar po un diagrama de flujo que grafica el flujo que debería tener la aplicación, considerando cambios de interfaces y filtración de información.
- Prototipo de baja fidelidad
A partir del diagrama de flujo y el reconocimiento del usuario, y por medio de lápiz y papel, se creó un boceto con las diferentes interfaces y usos que se proponen para la app web.
- A la izquierda se muestra la página principal y a la derecha se muestra la página de búsqueda, luego de presionar el botón de "COMENZAR".
- A la izquierda se muestra desplegado el select por género y a la derecha se despliega una ficha modal con la información de alguna película que seleccionó el usuario, luego de presionar su imagen.
A partir de la construcción del User Persona es posible profundizar en las necesidades de dos usuarias específicas.
Se consideran los siguientes elementos para optimizar el uso de la página:
- Saber cuáles son sus características, intereses, y gustos
- Cómo definen su personalidad, en cuanto a objetivos y metas.
- Cuáles son sus aplicaciones favoritas y que espera de ellas.
El propósito es identificar las percepciones que tienen los usuarios respecto a los colores que serán ocupados por la aplicación. Pensando en los usuarios (identificados a partir de la encuesta abierta y la utilización del user persona) e inspirado distinas aplicaciones que tratan de películas o temas relacionados al cine, la elección fue la siguiente:
Colores base
- Negro: se relaciona con la sofisticación, el valor y lo atemporal. Generalmente se asocia a aplicaciones que en las que se puedan ver películas, pues simula el estar en el cine, pero desde el hogar y en cualquier momento del día.
Colores de contraste
-
Amarillo: calidez, positividad, estímulos, luz. En este caso fue escogido para contrastar con el negro, simulando la tenue luz del cine.
-
Blanco: simpleza absoluta.
¿Cuál es la necesidad de nuestro usuario?
Las distintas historias de usuario (HU) describen las necesidades de los usuarios, buscando cubrirlas a partir de los criterios de aceptación (CA) que se desarrollan en cada una de ellas.
- HU1: Yo como fanático de las películas quiero ocupar esta aplicación desde mi computador para poder escoger una película desde mi hogar.
CA: Crear esqueleto de HTML, definiendo las pantallas de la app y sus funcionalidades.
- HU2: Yo como fanático de las películas quiero poder ver todas las películas para elegir entre todas las que existen.
CA: Cuando el usuario acceda a la pantalla para realizar la búsqueda, esta debe mostrar todas las películas.
- HU3: Yo como fanático de las películas quiero filtrar las películas de género "drama" para poder escoger la que más me guste.
CA: La página debe mostrar un selector que filtre las películas de acuerdo a lo que busque el usuario; en este caso que encuentre las de género “drama” según la necesidad que el usuario/a tenga en un momento específico. Este criterio nos sirve para realizar la filtración de todos los géneros.
- HU4:Yo como fanático de las películas quiero filtrar las películas que duren más de 2 horas para escoger una y poder verla durante las 2h 30m que tengo libre.
CA: La página debe tener un selector que permita filtrar aquellas películas que cumplan con la duración de más de 2h, según la disponibilidad horaria que tenga el usuario en un momento específico. Este criterio nos sirve para realizar la filtración por 1h y +, 2h y +, 3h y +.
- HU5: Yo como fanático de las películas quiero filtrar las películas que estén mejor calificadas para escoger una que tenga buena crítica de especialistas.
CA: La página debe tener un selector que permita filtrar aquellas películas que tengan buena evaluación. Este criterio nos sirve para realizar la filtración por
- HU7: Yo como fanático de las películas quiero poder ver la ficha de una película para conocer la reseña y principales características de ella.
CA: La página debe mostrar una ficha con las características de la película que el usuario seleccione. La ficha debe tener una imagen representativa e información del director, año, reparto, etc.
- Inspiración de distintas páginas
Se rescataron diferentes elementos de páginas para la creación de Filmaton. En este caso sirvió la identificación de colores, distribución del espacio, uso del menú y tarjetas.
- Prototipo de alta fidelidad
Se crea utilizando la plataforma Figma, luego de reconocer al usuario y definir los colores, el tipo de información (a partir de la problemática) y su distribución a desplegarse en la app web.
- Testeo Usabilidad
A partir de ello, se testeó a 5 usuarios con distintos intereses por las películas, quienes orientaron a mejorar la app por medio de feedback.
- La tarea a realizar fue:
- Encontrar las películas de género "drama" y ver la descripción de alguna.
- Ver la ficha de "Forrest Gump"
- Lograr buscar por el tiempo disponible
- Volver a la página de inicio
Los videos del testeo de alta fidelidad se encuentran aquí.
- Dificultades identificadas a partir del prototipo de alta fidelidad:
- El prototipo de alta fidelidad genera confusión para hacer el cambio de buscar por "género" a buscar por "tiempo disponible"
- Cuesta identificar el logo como un botón que permite volver a la página de inicio.
- La letra se muestra muy grande
- Mejoras identificadas a partir del prototipo de alta fidelidad:
- Es posible cambiar de búsqueda al escoger otro select diferente al escogido en un principio.
- El logo debe indicar que permite llegar a la página de inicio.
- Modificación del font-size para que sea de mejor agrado para el usuario.
Ejecución del interfaz de usuario HTML, CSS, JS
- HTML para mostrar la página al usuario y unir los script de JavaScript y links de CSS, y el framework Materialize
- Uso de HTML dinámico desde el main.js
- Manejo del DOM desde main.js
- Desarrollo de funciones de filtrado desde data.js
- Uso de la data de películas a partir de
- Manejo de estilos CSS para la página de escritorio.
- Trabajo colaborativo mediante el uso de Git y GitHub
- Deploy con gh-pages de la aplicación Filmaton
Trabajamos de forma colaborativa, cada una aportó en las distintas implicancias que tuvo el proyecto.
Josefin Ferrada estuvo a cargo del código, la lógica del proyecto, construcción de funciones y el manejo de la data.
Tatiana Castro estuvo a cargo del manejo del DOM, utilización del framework Materialize, y complementó el trabajo de Josefin en cuanto a la funcionalidad y filtrado.
Fabiola Tapia estuvo a cargo del manejo del DOM, creación de interfaces, uso de Materialize y la aplicación de estilos con CSS.
Constanza Urbina (quien escribe) estuvo a cargo del trabajo investigativo para dar con las necesidades de un usuario específico, dando apoyo en el manejo del DOM, uso de Materialize y CSS.
El squad estuvo trabajando muy de cerca y dándose apoyo constantemente, sobre todo en momentos en los que costó avanzar.
El resultado del trabajo se encuentra aquí
- Filtrar por el tiempo que dura la película fue uno de los objetivos que se propusieron para llevar a cabo este proyecto, por lo que queda pendiente para una próxima entrega.
- Lograr que la aplicación sea 100% responsive (con sus respectivos test y mejoras a partir del feedback de los usuarios).
- Realizar testeos de la aplicación real.
- Acceder a filtros más específicos como la banda sonora de cada película o tráiler.
- Mostrar reseñas más atractivas.
- Realizar una evaluación heurística completa para mejorar la app.
- Tatiana Castro
- Josefin Ferrada
- Fabiola Tapia
- Constanza Urbina
8° Generación de Laboratoria.
Marzo, 2019.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent