PoKéLiSt es un sitio en donde cualquier persona interesada en conocer el mundo de los Pokémon puede comenzar, ya que en este lugar se puede visualizar la información básica de cada uno (nombre, número, tipo, imagen) de forma clara, los fans de la serie de Pokémon pueden encontrar las listas de los Pokémon correspondientes a las dos primeras generaciones y filtrarlas de acuerdo a la rareza del Pokémon (normal, mítico, legendario). Además, para quienes son jugadores principiantes de Pokémon GO, se pueden ordenar los Pokémon por fuerza o energía, para ello se calcula el DPS y EPS de cada ataque rápido y se usa el promedio de ellos como medida de fuerza y energía de un Pokémon.
Yo como persona interesada en conocer a todos los Pokémon quisiera visualizar la lista completa de los Pokémon con sus nombres, número según la pokédex, foto y tipo. Para comenzar a conocerlos.
Se muestra de forma clara, atractiva, con estilo de letra legible e imágenes nítidas, el nombre, número según la pokédex, foto y tipo de todos los Pokémon.
| Telefóno | Computadora |
|---|---|
 |
 |
Yo como fan de la serie de Pokémon me gustaría que los Pokémon se muestren en tarjetas, donde el color de la tarjeta sea de acuerdo al tipo del Pokémon. Para diferenciar fácilmente los tipos que hay.
La información del Pokémon se muestra en una tarjeta cuyo color es alusivo de al menos un tipo del Pokémon que se muestra y permite ver la información claramente.
| Tipo | Tarjeta | Tipo | Tarjeta |
|---|---|---|---|
| Planta |  |
Agua |  |
| Fuego |  |
insecto |  |
Yo como usuario o jugador de Pokémon Go, quiero poder ordenar las tarjetas por nombre de Pokémon alfabéticamente de la A-Z y Z-A. Para ubicar al Pokémon cuando no recuerde el nombre.
En el menú Ordenar aparecen las opciones de "Por nombre de A-Z", "Por nombre de Z-A" y se ordena correctamente.
| Telefóno | Computadora |
|---|---|
 |
  |
Yo como fan de la serie de Pokémon Go quiero ver los Pokémon por rareza de cada una de las generaciones. Para recordar cuáles son los Pokémon míticos, legendarios y normales.
Se agregan dos menús, el primero es Generación donde el usuario seleccionará la generación que desea ver. El segundo menú es Mostrar, aquí aparecen las opciones de "Pokémon míticos", "Pokémon legendarios" y "Pokémon normales", se filtran correctamente después de seleccionar alguna generación.
| Generación | Mostrar |
|---|---|
 |
 |
Yo como entrenador principiante de Pokémon me gustaría ordenar los Pokémon al comparar los ataques rápidos. Para saber cuáles son los más fuertes y cuáles te dan más energía al momento de un combate.
En la tarjeta del cada Pokémon aparece la información que permite ordenar a los Pokémon de manera ascendente y descendente, de acuerdo al daño que causan en un ataque rápido y la energía que generan. Estas cantidades serán el DPS (promedio del daño por segundo de todos los ataques rápidos) y el EPS (el promedio de la energía por segundo de todos los ataques rápidos).
| EPS | DPS |
|---|---|
 |
 |
A continuación mostramos los prototipos de baja y alta fidelidad que se obtuvieron al hacer las historias de usuario.
En la parte del encabezado se mostrará el nombre y logotipo de la página, después en la barra de menú se mostrarán tres menús desplegables para poder seleccionar las generaciones, tipos de rareza y ordenar los datos mostrados como se solicita en cada una de las historias de usuarios. Todos los datos se representarán en forma de tarjetas como se representa en los prototipos para teléfono móvil y computadora:
| Telefóno | Computadora |
|---|---|
 |
 |
Al principio decidimos hacer un prototipo de alta fidelidad para dos tamaños de dispositivos (laptop y teléfono móvil), iniciamos con el de telefono, colocando una pantalla de bienvenida y en la siguiente las tarjetas de los pokémon, un menú hamburguesa en la parte superior izquierda de la pantalla con las opciones de filtrar, ordenar y mostrar segun las historias de usuario.
Después se realizó un prototipo de alta fidelidad para las tarjetas de los pokémon, decidimos solo hacer la representación de cuatro tipos ya que en total hay 18 pokémones. La paleta de color en que nos inspiramos para cada fondo de las tarjetas se encuentra en esta página.
Usamos las herramientas de figma para crear nuestra prueba de usabilidad del primer prototipo de alta que realizamos. Sin embargo nos llevamos casi un spring en realizar todo esto solo para móvil, por lo que decidimos comenzar a codear en base a lo que ya teníamos y alos comentarios que recibimos en la prueba de usabilidad. En el siguiente enlace se puede acceder para probar el prototipo, también se uncluye una imagen del mismo.
Se hizo el despliegue de la página, se puede accesar desde el siguiente link.
https://andyapg.github.io/DEV009-data-lovers/ https://kellpitt19.github.io/DEV009-data-lovers/
al probar el despliegue nos percatamos, que nos falto contemplar los criterios de diseño responsive para dispositivos con proporciones distintas de altura, además de que la paleta de color se aprecia de forma distinta en diferentes exploradores. En la siguiente tabla se muestran algunos ejemplos.
| Telefóno | Computadora |
|---|---|
| Samsumg S3 | Lenovo ideapad |
 |
 |
 |
 |