Data Lovers

Índice

• 1. Preámbulo
• 2. Definición del producto
  • 2.1. Historias de Usuario
  • 2.2. Diseño de la Interfaz de Usuario
• 3. Consideraciones generales
• 4. Conclusiones

---

1. Preámbulo

Según Forbes, el 90% de la data que existe hoy ha sido creada durante los últimos dos años. Cada día generamos 2.5 millones de terabytes de datos, una cifra sin precedentes.

No obstante, los datos por sí mismos son de poca utilidad. Para que esas grandes cantidades de datos se conviertan en información fácil de leer para los usuarios, necesitamos entender y procesar estos datos. Una manera simple de hacerlo es creando interfaces y visualizaciones.

En la siguiente imagen, podemos ver cómo con la data que se ve en la parte izquierda se puede construir una interfaz amigable y entendible por los usuarios, al lado derecho.

2. Definición del producto

Para este proyecto se diseñó y elaboró una interfaz web que permite visualizar un conjunto de datos y, a su vez, manipularlos mediante la opción de filtrado, ordenar y encontrar un cálculo agregado.

La temática trabajada para el desarrollo de este proyecto corresponde a los largometrajes del estudio de animación japonesa Studio Ghibli, conocido por películas como ‘Mi vecino Totoro’, ‘El viaje de Chihiro’ o ‘El castillo ambulante’, entre otros grandes éxitos.

Para empezar, se implementó un formulario virtual como herramienta de investigación, el cual fue diligenciado por doce personas con rango de edades entre los 21 y 52 años.

En base al conocimiento obtenido del usuario, se trabajaron las siguientes preguntas:

• ¿Quiénes son los principales usuarios del producto? // Personas de 20 a 55 años interesadas en el anime o animación japonesa.

• ¿Cuáles son los objetivos de estos usuarios en relación con el producto? // Contar con un espacio en la web que reúna diferente información de interés de las animaciones y películas de Studio Ghibli.

• ¿Cuáles son los datos más relevantes que quieren ver en la interfaz y por qué? // Según los resultados de la investigación, la mayoría de los usuarios coinciden en desear conocer los nombres, la descripción y los personajes de todas las películas de Studio Ghibli.

• ¿Cuándo utilizan o utilizarían el producto? // Según los resultados de la investigación, los usuarios harían uso de la página web para revisar, decidir y elegir qué película ver, sea en solitario o en compañía de familiares o amigos; así mismo han comentado que la página web les sería útil para conocer la temática o sinopsis de cada película, para conocer las fechas de estreno y saber si es apta o no para ver en familia o con niños.

---

2.1. Historias de Usuario

Como resultado del proceso de investigación se obtuvieron las siguientes Historias de Usuario:

☆ Historia de Usuario 1: El usuario desea ver los nombres de todas las películas de Studio Ghibli hasta el año 2019.

• Criterios de aceptación:
  • El usuario debe poder visualizar imágenes de cada película, expuestas u organizadas como una tabla o grilla.
  • El usuario debe poder ver el título de cada película al pasar el mouse sobre la imagen respectiva.
  • El usuario desea que sea responsive (apto para pc y smartphone).
  • El usuario debe poder hacer clic en cada imagen para poder acceder a la información de la película.
• Definición de terminado:
  • Hemos hecho pruebas de usabilidad con al menos 2 usuarios.
  • Todo el código está subido a la rama principal del repositorio.
  • Hemos publicado la historia en GitHub Pages

☆ Historia de usuario 2: El usuario desea acceder a la descripción de todas las películas.

• Criterios de aceptación:
  • Una vez el usuario haya hecho clic en la imagen de la película, podrá acceder a la información de la misma.
  • El usuario debe poder encontrar el nombre de la película como título y el texto descriptivo a un lado de una imagen de referencia.
  • El usuario debe poder navegar en esta sección a través de la rueda de desplazamiento del mouse (scroll wheel)
  • El usuario desea que sea responsive (apto para pc y smartphone).
• Definición de terminado:
  • Hemos hecho pruebas de usabilidad con al menos 2 usuarios.
  • Todo el código está subido a la rama principal del repositorio.
  • Hemos publicado la historia en GitHub Pages

☆ Historia de usuario 3: El usuario desea identificar la fecha de lanzamiento de todas las películas.

• Criterios de aceptación:
  • El usuario debe poder encontrar la fecha de lanzamiento de cada película seguido de la descripción de la misma.
  • El usuario desea que sea responsive (apto para pc y smartphone).
• Definición de terminado:
  • Hemos hecho pruebas de usabilidad con al menos 2 usuarios.
  • Todo el código está subido a la rama principal del repositorio.
  • Hemos publicado la historia en GitHub Pages

☆ Historia de usuario 4: El usuario desea visualizar los personajes principales de todas las películas.

• Criterios de aceptación:
  • Mediante el scrolling, el usuario debe poder encontrar los personajes principales de cada película organizados uno al lado del otro y con sus respectivos nombres en la parte inferior.
  • El usuario debe poder encontrar un texto corto que describa al personaje principal.
  • El usuario desea que sea responsive (apto para pc y smartphone).
• Definición de terminado:
  • Hemos hecho pruebas de usabilidad con al menos 2 usuarios.
  • Todo el código está subido a la rama principal del repositorio.
  • Hemos publicado la historia en GitHub Pages

☆ Historia de usuario 5: El usuario desea conocer los directores y productores de todas las películas.

• Criterios de aceptación:
  • Mediante el scrolling, el usuario debe poder encontrar los directores y productores de cada película organizados uno al lado del otro y con sus respectivos nombres en la parte inferior.
  • El usuario desea que sea responsive (apto para pc y smartphone).
• Definición de terminado:
  • Hemos hecho pruebas de usabilidad con al menos 2 usuarios.
  • Todo el código está subido a la rama principal del repositorio.
  • Hemos publicado la historia en GitHub Pages

☆ Historia de usuario 6: El usuario desea encontrar datos curiosos de todas las películas.

• Criterios de aceptación:
  • Mediante el scrolling, el usuario debe poder encontrar datos curiosos de la película.
  • El usuario desea que sea responsive (apto para pc y smartphone).
• Definición de terminado:
  • Hemos hecho pruebas de usabilidad con al menos 2 usuarios.
  • Todo el código está subido a la rama principal del repositorio.
  • Hemos publicado la historia en GitHub Pages

---

2.2. Diseño de la Interfaz de Usuario

Prototipo de baja fidelidad

Una vez definidas las Historias de Usuario, se elaboró el prototipo de baja fidelidad como primer paso en el diseño de la interfaz del usuario:

Prototipo de alta fidelidad

Lo siguiente fue diseñar la Interfaz de Usuario mediante la herramienta de diseño visual Figma. Este diseño representa el ideal de la solución propuesta y sigue los fundamentos de visual design.

3. Consideraciones generales

• Durante el desarrollo del proyecto se implementaron tests de usabilidad con distintos usuarios, y pruebas unitarias para las funciones encargadas de procesar, filtrar y ordenar la data, así como calcular estadísticas. Las pruebas unitarias dan una cobertura de más del 70% de statements (sentencias), functions (funciones), lines (líneas), y branches (ramas) del archivo <src/data.js>.

• La lógica del presente proyecto está implementada completamente en JavaScript (ES6), HTML y CSS. En ningún momento se usaron librerías o frameworks.

• El archivo src/index.html muestra la interfaz inicial de la página web; también se trabajaron diferentes archivos html para visualizar la data de todas las películas.

• El archivo src/main.js contiene todo el código correspondiente a la interacción con el DOM: operaciones como creación de nodos, registro de manejadores de eventos (event listeners o event handlers), entre otros.

• El archivo src/data.js contiene todas las funciones que corresponden a obtener, procesar y manipular datos, estas funciones son puras e independientes del DOM y serán usadas después desde el archivo src/main.js al cargar la página y cada vez que el usuario interactúe (click, filtrado, ordenado, ...).

• El archivo src/data contiene los datos de las diferentes fuentes, y dentro de cada carpeta dos archivos: uno con la extensión .js y otro con la extensión .json.

• El archivo test/data.spec.js contiene las pruebas unitarias de las funciones implementadas en el archivo data.js.

• Para el desarrollo de este proyecto se trabajó en JavaScript, incluyendo conceptos como variables, condicionales, funciones, arreglos, objetos, así como eventos y manipulación del DOM, se trabajó con el uso de ESLINT, HTML, CSS y con control de versiones Git y GitHub.

4. Conclusiones

Se diseñó y construyó una interfaz web donde se puede visualizar la data trabajada por medio de tarjetas/cards y páginas secundarias.

Se diseñó y construyó una interfaz web que permite al usuario interactuar para obtener la información que necesita a través de una barra de búsqueda y un listado que ordena y filtra.

Se diseñó y construyó una interfaz web responsive: puede visualizarse sin problemas desde distintos tamaños de pantallas: móviles, tablets y desktops.

Se diseñó y construyó una interfaz web que responde a cada una de las necesidades de los usuarios, necesidades identificadas durante el proceso de investigación.

Se diseñó y construyó una interfaz web centrada en el usuario siguiendo los principios básicos de diseño visual creando prototipos de alta fidelidad.

---

Herramienta utilizada durante el desarrollo del proyecto para la planeación y consecución de los objetivos: Trello

**Link del proyecto Data Lovers** : https://laurilugo.github.io/DEV007-data-lovers/src/index.html