- 1. Introducción
- 2. Definición del Producto
- 3. Objetivos
- 4. Tipo de Usuario
- 5. Prototipos
- 6. Test de Usabilidad
- 7. Vista Producto Terminado
PoKeData GO es una aplicación que permite a los entrenadores PoKémon acceder a distintos tipos de información sobre sus Pokémon.
PoKeData GO es una aplicación que esta dirigida a los entrenadores PoKémon, los cuales ya tienen conocimientos del juego, aquí pueden conocer toda la información de los Pokémon de la región Kanto. El usuario podrá acceder a distintos datos, como filtros ya sea por tipo de PoKémon, debilidad, entre otras.
El objetivo de esta aplicación, es que el usuario pueda conocer todos los datos de interés sobre su Pokémon de una forma accesible y sencilla.
Esta aplicación esta creada para entrenadores PoKémon, los cuales ya tienen experiencia y conocimientos en el juego.
Historia de usuario n°1.
Yo Como: Usuario de Internet.
Quiero: breve presentación de la página.
Para: identificar de que trata la página y si me sirve o no.
Definición de Terminado:
- El código está en el repositorio remoto.
- El código pasa el mínimo porcentaje de test aceptado.
- La historia implementada fue testeada por mínimo 2 usuarios.
- Se realizaron las mejoras detectadas en el testeo de usabilidad.
Criterios de aceptación:
- Nombre o logo de la página.
- Imagen referencial.
- Breve presentación que explique de que trata la página web.
Historia de usuario n°2
Yo Como: Jugador de Pokémon Go.
Quiero: un botón de tipos de Pokémon.
Para:poder filtrar por el tipo de Pokémon que me interese y ver su respectiva información.
Definición de Terminado:
- El código está en el repositorio remoto.
- El código pasa el mínimo porcentaje de test aceptado.
- La historia implementada fue testeada por mínimo 2 usuarios.
- Se realizaron las mejoras detectadas en el testeo de usabilidad.
- Cumple con los criterios de aceptación.
Criterios de aceptación:
- Botón tipo de Pokémon.
- Que despliegue los tipos de Pokémon existentes.
- Que permita seleccionar un tipo de Pokémon en específico.
- Que muestre todos los Pokémon del tipo seleccionado por el usuario.
Historia de usuario n°3.
Yo Como: jugador de Pokémon Go.
Quiero: un botón de ordenar por.
Para: poder filtrar alfabéticamente mis Pokémon.
Definición de Terminado:
- El código está en el repositorio remoto.
- El código pasa el mínimo porcentaje de test aceptado.
- La historia implementada fue testeada por mínimo 2 usuarios.
- Se realizaron las mejoras detectadas en el testeo de usabilidad.
- Cumple con los criterios de aceptación.
Criterios de aceptación:
- Crear botón de nombre ordenar por.
- Que se despliegue la opción de ordenar de A-Z o Z-A.
- Que se muestren todos los Pokémon ordenados alfabéticamente.
Historia de usuario n°4.
Yo Como: jugador de Pokémon Go.
Quiero: tener un buscador.
Para: buscar directamente el Pokémon que me interesa y revisar su información.
Definición de Terminado:
- El código está en el repositorio remoto.
- El código pasa el mínimo porcentaje de test aceptado.
- La historia implementada fue testeada por mínimo 2 usuarios.
- Se realizaron las mejoras detectadas en el testeo de usabilidad.
- Cumple con los criterios de aceptación.
Criterios de aceptación:
- Input tipo texto de búsqueda.
- Agregar evento al input con Enter en el teclado.
- Que muestre el Pokémon ingresado en el input.
Historia de usuario n°5.
Yo Como: jugador de Pokémon Go.
Quiero: un botón de debilidades contra un tipo específico de Pokémon.
Para: poder filtrar por el tipo de debilidad que requiero investigar y determinar que Pokémon escoger para una batalla.
Definición de Terminado:
- El código está en el repositorio remoto.
- El código pasa el mínimo porcentaje de test aceptado.
- La historia implementada fue testeada por mínimo 2 usuarios.
- Se realizaron las mejoras detectadas en el testeo de usabilidad.
- Cumple con los criterios de aceptación.
Criterios de aceptación:
- Botón de nombre debilidades contra.
- Que se desplieguen los tipos de debilidades escogidas por el usuario.
- Que el usuario pueda seleccionar una debilidad.
Historia de usuario n°6.
Yo Como: jugador de Pokémon Go.
Quiero: saber las características de mi Pokémon.
Para: poder tomar decisiones en cuanto a mis Pokémon actuales o los que deseo conseguir.
Definición de Terminado:
- El código está en el repositorio remoto.
- El código pasa el mínimo porcentaje de test aceptado.
- La historia implementada fue testeada por mínimo 2 usuarios.
- Se realizaron las mejoras detectadas en el testeo de usabilidad.
- Cumple con los criterios de aceptación.
Criterios de aceptación:
- Modal que despliegue la información del Pokémon que el usuario elija.
- Agregar altura y peso a la tarjeta de información.
- Agregar debilidades del Pokémon seleccionado por el usuario.
- Agregar tipo de Pokemon.
- Agregar evolución del Pokémon.
- Agregar número y tipo de caramelos para poder evolucionar al Pokémon.
Diagrama de Flujo 💻 🖨️
Para comenzar armamos un diagrama de flujo para saber como queríamos que funcionara nuestra pagina web, y así comenzar el trabajo en el prototipo.
Prototipo Papel✏️🖍️
Prototipo baja fidelidad InVision
https://elianahidalgo820622.invisionapp.com/public/share/S813ZOAQDP#/screens
Prototipo Figma 1
Prototipo Figma 2
Nuestro segundo prototipo de alta fidelidad fue modificado según el feedback que recibimos en los testeos con los usuarios y lo que nos dijo Allison coach de UX.
Prototipo Figma 3 Final
https://www.figma.com/proto/tZcEPUiQNuc9UhXDsbbBJc/2do-PokeData-GO?node-id=0%3A1&scaling=min-zoom
Link a Zeplin
1.Usuario: Eladio Varela.
https://www.loom.com/share/b8efcb0d553d4b3d9067f63c87702dc3
Feedback:
- El usuario nos dijo que la imagen del header estaba pixelada.
- Los botones de filtro no son de un color llamativo al igual que la información que se despliega del el, de hecho son bastantes oscuros.
- En el ID de los Pokémon se ven los números desordenados, por el tipo de Fuente.
- El idioma de la información debería unificarse, todo en español o todo en inglés.
- Confusión al momento de dirigirse a la página principal o al home.
- Cuantos resultados por página se debían mostrar en el buscador.
- Los filtros escogidos para que el usuario interactúe están bien escogidos.
- La forma de presentación de las tarjetas de información de los Pokémon es atractiva.
2.Usuario: Alfredo Cayama.
https://www.loom.com/share/61c3a686ef8849f191e3bf13685e8049
Feedback:
- Imagen del header debe mejorarse ya que no es llamativa, esta pixelada y la pantalla pierde continuidad.
- El logotipo se encuentra cortado.
- La imagen tiene un fondo blanco que no se ve bien.
- Botones y despliegue no le gusta el color, no parece acorde a la identidad gráfica.
- Las flechas de los botones no tiene relevancia.
- Aclarar los fondos de las tarjetas de los Pokémon.
- Los filtros escogidos para que el usuario interactúe están bien escogidos.
- La forma de presentación de las tarjetas de información de los Pokémon es atractiva.
1.Usuario: Alfredo Cayama.
https://www.loom.com/share/c687c7f2948e4ec6a28e72b96bcae03d
Feedback:
- Sugirió agregar en el botón de ordenar por, que ordene por número de ID.
- Diagramar la información de otra manera para que tenga mejor legibilidad, colocar el número en un lado y el nombre en otro, tener toda la información del modal en una columna, para que se vea más ordenado.
- Visualmente la página es llamativa las imágenes son coherentes y de buena calidad.
- La información de la página es la que se necesita, va directo al grano, no tiene información que es innecesaria.
- El footer de redes sociales fue bastante acertado y va con la actualidad, ya que la mayoría de las personas usa redes sociales hoy en día.
- La distribución de la barra de menú es acertada.
- Mejoro la opacidad del modal, ya que se puede leer claramente la información y esta resalta.
- En general la página es amigable e intuitiva, directa y fácil de usar para conseguir la información necesaria.
2.Usuario: Eladio Varela.
https://www.loom.com/share/f8ce5e7d64f94115b4546cae608ec4bd
Feedback:
- Sugirió colocar los títulos dentro del modal en negrita, como evolución, peso, altura, etc., para poder diferenciar los títulos del contenido.
- Agregar un botón de inicio para regresar a la página principal.
- Poder ver la transición entre vistas.
- Las imágenes se ven nítidas, mejoraron bastante en comparación al primer prototipo.
- Fue acertado agregar las redes sociales en el footer.
- La distribución de la barra de menú es acertada, se ve bien en general.
- En general los cambios entre el primer prototipo y el segundo, son bastantes grandes, fueron drásticos y para mejor.
https://t.maze.design/11202779
Finalmente según el feedback que nos estregaron los testeos de usabilidad, llegamos a la vista final de nuestra pagina web.
https://elihidalgo.github.io/SCL013-data-lovers/src/index.html
