- 1. Definicion del producto
- 2. Historias de usuario
- 3. Prototipo de baja fidelidad
- 4. Prototipo de alta fidelidad
- 5. Pruebas de usabilidad
- 6. Diseño final de proyecto
- 7. Pruebas unitarias
- 8. checklist
Esta página web le permitirá a los fans de Rick y Morty, conocer datos de sus personajes favoritos, logrando visualizar el total de personajes de la serie hasta el episodio 31, cada uno presentado en una tarjeta con su nombre, imagen, origen y ubicación , puedes filtrarlos por episodios, género y especies, ordenarlos de forma ascendente por el nombre con la opción sort A-Z, encontrar información sobre la cantidad de personajes que hay por tipo de género, especies y estado mostrados en tablas con la opción stats y resetear la página con la opción reset, por último en el footer incluimos los nombres de quienes desarrollaron el proyecto.
En este proyecto utilizamos la data de
-
Rick and Morty. Este set nos proporciona la lista de los personajes de la serie Rick and Morty.
- Investigación con seguidores de Rick and Morty Esto nos permitió tener un primer acercamiento de lo que querian nuestros usuarios de la página.
En un inicio se ideó la página web con un logo que cubra la parte superior central de la página y tres opciones de filtro, presentación de los personajes en tarjetas cada una con información como imagen, nombre, genero, especie, ubicación, estado y episodios, al hacer las pruebas vimos que no podíamos incluir toda la información ya que aumentaba el tamaño de la tarjeta, por lo cual se decidió en dejarlo solo como nombre, imagen, origen y ubicación; para los filtros decidimos tres opciones: por episodio, por especie y por estado, además en la parte superior dejamos el logo en la parte izquierda y aprovechamos el espacio para incluir las opciones de resetear, ordenar A-Z y estadística, esta última entrega tres tablas con la suma de personajes por género, estado y especies.
Para obtener una mejor imagen más clara de lo que esperábamos de nuestra página web utilizamos la herramienta Figma.
Realizamos pruebas de usabilidad con compañeras y usuarios en los cuales obtuvimos los siguientes resultados:
- Nos dieron recomendaciones sobre el prototipo que teniamos al inicio, el cual se modifica porque el fondo no se veía bien por lo saturada que se ve la imagen.
- Organizar los datos por nombre de personaje alfabéticamente hace que tenga mucho sentido la información.
- los elementos mas comunes como los filtros accesos directos a reset, sort a-z y stats se pueden encontrar fácilmente por el usuario.
- En la parte de stats podría quitarse los filtros, ya que puede darse a entender que se pueden usar para los resultados de la tabla que está en la parte de abajo.
- Se sugiere que el titulo de RICK AND MORTY sea mas vsible ya que no es entendible.
- Nos sugerieron organizar el tamaño de los filtros para que no se vieran tan grandes.
- Nos sugieren cambiar a un solo lenguaje.
IMPLEMENTACIÓN DE LA INTERFAZ DE USUARIO (HTML/CSS/JS) Cumplimos con los requerimientos minimos de la interfaz de usuario como: Mostrar la data en una interfaz:
- Card
- Tabla
Ser responsive, es decir, debe visualizarse sin problemas desde distintos tamaños de pantallas:
- móviles
- tablets
- desktops
Que la interfaz siga los fundamentos de visual design.
- Usa VanillaJS.
- Pasa linter (
npm run pretest) - Pasa tests (
npm test) - Pruebas unitarias cubren un mínimo del 70% de statements, functions y lines y branches.
- Incluye Definición del producto clara e informativa en
README.md. - Incluye historias de usuario en
README.md. - Incluye sketch de la solución (prototipo de baja fidelidad) en
README.md. - Incluye Diseño de la Interfaz de Usuario (prototipo de alta fidelidad)
en
README.md. - Incluye el listado de problemas que detectaste a través de tests de
usabilidad en el
README.md. - UI: Muestra lista y/o tabla con datos y/o indicadores.
- UI: Permite ordenar data por uno o más campos (asc y desc).
- UI: Permite filtrar data en base a una condición.
- UI: Es responsive.