El producto está diseñado pensando en satisfacer las necesidades de nuestros usuarios (niños, jóvenes o adultos amantes del juego PokemonGo), quienes mediante una encuesta realizada por nosotras, se identifico que buscan información relevante sobre los Pokemones (nombre, número, descripción del pokemon, tipo y rareza) para identificarlos y tener datos importantes antes de jugar; clasificar a los Pokemones o Armar una mejor estrategia de batalla.
Los resultafos de la encuesta nos ayudaron a identificar al usuario y a filtrar información a usar en nuestro proyecto. Interpretamos a un usuario con tres necesidades y tres objetivos distintos. En base a la información procesada decidimos diseñar esta pagina donde el usuario encontrará la información que necesita de manera ordena y de fácil acceso.
Este usuario busca información general sobre pokemones, basicamente para conocerlos.
- Como: Jugador del juego PokemonGo.
- Quiero: Nombre, número y breve descripción.
- Para: Identificar a los pokemones y tener datos básicos antes de jugar.
- Pantalla de bienvenida
- Buscador por número y nombre de pokémon (muestra una tarjeta con imagen y descripción breve del pokemon buscado).
- Se muestra imágenes de pokemones por numero de orden.
- Botón "go home" que lleva a pantalla principal.
- Como: Jugador del juego PokemonGo.
- Quiero: Clasificar los pokemones (por tipo, orden alfabético, numérico y por rareza).
- Para: Armar una mejor estrategia de batalla y formar equipos.
- Botón desplegable con lista clasificada (tipo, numérico, nombre, y rareza).
- Botón "go home" que lleva a pantalla principal.
- La página web muestra el "quiero" de las historias de usuario.
- Usar la data considerando lo que el usuario especificó en el "Quiero".
- Respetar el prototipo final, de ser el caso mejorarlo.
- Aplicar UX.
- El código pasa los test (>70%).
- El código se realizó en duplas (realizar code-review, git colaborativo).
- Código está en el repositorio.
- Realizar test (demo), mínimo a tres personas, y aplicar mejoras de ser el caso.
Creación de nuestros prototipos:
-
Prototipo en papel
-
Prototipo final en Figma
5. Testeos de usabilidad: (describir la experiencia de el uso de la pagina en DEMO de tres compañeras)
-
Cuando se busca un pokemon por número, se debe digitar tres cifras, de lo contrario muestra a pokemones que coincidan con el número digitado. Para resolverlo, creamos alertas y placeholder, informando como se debe ingresar el número.
-
Los botones selectores, en la primera opción (que describía el llamado a la orden) no funcionaban correctamente, porque estaban habilitados y enviaban a una pantalla vacía al hacer clic. Para resolver el problema, en la etiqueta de la primera opción se adicionó el atributo "selected disabled".
-
Los colores aplicados fueron del agrado de los usuarios, porque son colores representativos del juego.
- Organización y planificación de tareas en Trello.
- Definición de objetivos por cada sprint.
- Elaboración de historias de usuario.
- Estudiar y aplicar conceptos de Desarrollo Front-end.
- Aprender a manejar comandos de Git colaborativo.
- Elaboración del Prototipo
- ELaboración de la estructura en HTML.
- Aplicar correctamente el uso del DOM.
- Manejo de Objetos de data
- Realizar en npm test para verificación del correcto uso del codigo.
- Implementar hacker edition.
- Describir proyecto en README.
- Diseñar la aplicación pensando y entendiendo al usuario.
- Crear prototipos para obtener feedback e iterar.
- Aplicar los principios de diseño visual (contraste, alineación, jerarquía).
- Planear y ejecutar tests de usabilidad.
- Uso de HTML semántico.
- Uso de selectores de CSS.
- Construir tu aplicación respetando el diseño realizado (maquetación).
- Uso de flexbox en CSS.
- Uso de selectores del DOM.
- Manejo de eventos del DOM.
- Manipulación dinámica del DOM (appendChild |createElement | createTextNode| innerHTML | textContent | etc.).
- Uso de condicionales (if-else | switch | operador ternario).
- Uso de bucles (for | for..in | for..of | while).
- Javascript [Uso de funciones (parámetros | argumentos | valor de retorno).]
- Javascript [Manipular arrays (filter | map | sort | reduce).
- Manipular objects (key | value).
- Uso de ES Modules (import | export).
- Diferenciar entre expression y statements.
- Diferenciar entre tipos de datos atómicos y estructurados.
- Testing [Testeo unitario.]
- Estrutura de código [Organizar y dividir el código en módulos (Modularización).
- Guia de estilo [Uso de identificadores descriptivos (Nomenclatura | Semántica).
- Guia de estilo [Uso de linter (ESLINT).
- Git, GitHub [Uso de comandos de git (add | commit | pull | status | push).
- Git, GitHub [Manejo de repositorios de GitHub (clone | fork | gh-pages).
- GitHub [Colaboración en Github (branches | pull requests | |tags).
- Usa VanillaJS.
- No hace uso de
this. - 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 un plan de acción de tus objetivos de aprendizaje prioritizado en
README.md(o otro archivo). - 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 link a Zeplin 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.