Definición del producto Historias de usuario Prototipo de alta y baja fidelidad Criterios minimos de aceptación
- Definición del producto El objetivo de la página web es permitirle a los usuarios de LOL visualizar la información acerca de los campeones y sus roles. Dánde en la página principal encontraran todos los campeones los cuales podran organizarlos alfabéticamente y en la sección de buscar se filtran por nombre y el resultado te traera la card de dicho campeon. También pueden interactuar con el boton de "Percentage of roles" para el fan de LOL que tenga curiosidad por saber cual es la cantidad total de cada Rol existente.
Todo el diseño fue pensado para que el usuario se sienta comodo al navegar en la pagina, se usaron colores semejantes al juego y su tipografia para que tenga armonia visual.
- Historias de Usuario
Historia #1: La primera historia de usuario tiene como publico objetivo las personas interesadas a comenzar a jugar LOL, y que deseen familiarizarse con los campeones y aprender a reconocerlos en pantalla. La visualizacion se realizará por medio de tarjetas que contengan el nombre, el titulo, la image, la descripción y características del campeón.
HU1="Yo como persona interesada en comenzar a jugar lol, quiero poder ver las imágenes nombres y blurbs de los personajes para aprender a reconocerlos en pantalla."
Historia #2: Esta historia se enfoca en aquellas usuarias que ya son jugadoras de LOL y que quieran visualizar los personajes que ya conocen alfabéticamente, ya sea A-Z o Z-A.
HU2="Yo como jugadora quiero ordenar los campeones de abajo hacia arriba mediante un botón que me permita ordenarlos alfabéticamente para no tener que hacer scroll hasta el final."
Historia #3: La historia numero 3, también se enfoca en una usuario que ya es jugadora. En este caso, la necesidad que tiene la usuaria es conocer las características especiales de un campeón específico, de manera que lo pueda buscar por su nombre en un recuadro de búsqueda.
HU3="Yo como jugadora de lol quiero poder buscar por nombre a los personajes para poder ver su nivel de defensa,ataque magia y dificultad y no tener que buscarlo manualmente."
Historia #4: La última historia de usuario creada, tiene como publico objetivo una persona aficionada al juego y sus personajes. Esta persona desea conocer el porcentaje de campeones que cumplen cierto rol en el juego y así conocer más sobre el universo de LOL.
HU4="Yo como fan de lol quiero saber el porcentaje de campeones en cada rol para conocer las estadísticas de los roles."
- Prototipos de alta y baja fidelidad + Producto final
HISTORIAS DE USUARIO 1,2 y 3 Para las tres primeras historias se realizó un solo prototipo ya que nuestro objetivo es que las necesidades de las primeras 3 usuarias fueran satisfechas en una sola página.
A continuación se muestran los prototipos de baja fidelidad a mano, se realizaron dos versiones:
Posteriormente se tomaron las mejores caracteristicas de cada una para crear un prototipo de baja fidelidad digital:
Al hacer el test de usabilidad de estas 3 primeras historias, se mencionó que la barra de busqueda se encontraba muy corta y que eso podia ser visualemnte incomodo para el usuario. Tambien se recomendó usar una paleta de colores oscura ya que las imagenes de los personajes resaltan.
Finalmente se creo el prototipo de alta fidelidad para las primeras 3 historias de usuario:
En el test de usabilidad para esta etapa se habló de hacer un menú desplegable para el responsive, también tener en cuenta que toda la data a manipular esta en inglés y por lo tanto todos los botones y extras de la página debe estar en inglés.
A continuación el prototipo para la versión responsive:
HISTORIA DE USUARIO 4: Para la historia de usuario 4, se creó un nuevo html que desplegara la información acordada. A continuación se muestran los prototipos de baja fidelidad a mano, se realizaron dos versiones:
Al hacer el test de usabilidad se habló de cambiar la imagen de la pagina principal para que no se viera repetitivo, y este fue el resultado del prototipo de alta fidelidad para la 4ta historia:
Responsive
Al realizar el test de usabilidad de las 4 historias se cambió:
- El despliegue de las tarjetas. Antes: abarcaba toda la pagina cada vez que se pasaba por encima de una tarjeta Ahora: Se hace una transformación de escala a 1.5, sin abarcar una gran parte de la pantalla.
- El boton de "sort" se movió debajo de los botones de "search" y "clear" para que el usuario pudiera tenerlo cerca. -Para el responsive el despliegue del menu hamburguesa se realizó en la parte superior de la imagen.
PRODUCTO FINAL HISTORIAS 1,2 y 3
Version escritorio
Responsive
PRODUCTO FINAL HISTORIA 4
Version escritorio
Responsive
- Criterios minimos de aceptación -Pruebas unitarias cubren más 70% de statements, functions, lines y branches. -Cumple con las 4 Historias de Usuario. -El código esta en el repositorio de GitHub. -El proyecto esta desplegado en GitHub Pages. -El README contiene una definición del producto e Historias de Usuario. -Incluye sketch de la solución (prototipo de baja fidelidad) -Incluye Diseño de la Interfaz de Usuario (prototipo de alta fidelidad) -Es responsive.