- 1. Introducción
- 2. Prototipos de baja fidelidad
- 3. Prototipos de alta fidelidad
- 4. Historia de usuario 1
- 5. Historia de usuario 2
- 6. Historia de usuario 3
- 7. Historia de usuario 4
- 8. Historia de usuario 5
GhibliPedia es un sitio web de animaciones de Studio Ghibli, el cual es un estudio de animación japonés, conocido por sus largometrajes animados como Mi vecino Totoro, El viaje de Chihiro o El castillo ambulante, entre otros grandes éxitos. Las animaciones tienen gran acogida a nivel mundial y algunas han recibido varias nominaciones y premios. De todo este fandom nos dimos cuenta que hay un grupo que desea poder interactuar y ver la información de las animaciones y sus personajes. A raíz de ello se crea este sitio web para poder filtrar información y ver la filmografia de cada animación.
Entre la información más relevante están los directores y productores, año de estreno, rating, personajes, locaciones, vehiculos y algunos datos curiosos.
Yo como no-consumidor de anime:
QUIERO que la página me muestre las películas animadas más destacadas.
PARA que pueda darme una noción de la película animada que veré.
- El usuario puede acceder a los links de los films destacados.
- El usuario puede acceder a un botón que le muestre todos los films.
- El usuario puede ver de manera interactiva ver pasar los films destacados sin necesidad de apretar algo.
- El usuario puede acceder al botón de about.
- El código está en el repositorio.
- El código cumple con el prototipo acordado.
- El código ha sido hecho en pair-programming.
- La historia implementada ha sido testeada por 3 usuarios y se han incorporado las mejoras que se identificaron en el testeo de usabilidad.
- El código cumple con redirigir a los films destacados.
- El código fue implementado con animaciones.
- El código tiene una barra de navegación desplegable.
| Pregunta | % |
|---|---|
| Creo que me gustaria usar este sistema con frecuencia | 100% |
| Encontramos la página innecesariamente compleja | 0% |
| Encontré el sistema muy engorroso de usar | 0% |
| Me sentí a gusto y confiado usando el sistema | 90% |
| Creo que necesitaria el apoyo de un tecnico para poder utilizar este sistema | %0 |
| Descubri que las diversas funciones de este sistema estaban bien integradas | %80 |
| Creo que dentro de los elementos que muestra esta pantalla, hay algo fuera de lugar, porque no pertenece al sitio web Studio Ghibli | 0% |
| Creo que el logotipo del sitio web estásuficientemente destacado dentro de la(s) página(s)? | 50% |
| Se ofrece información de contacto y no me costó encontrarla en la página web | 100% |
| Me parecio adecuada la selección de contenidos presentes en el menú principal | 80% |
| Eché en falta otras áreas de información | 40% |
Escenario 1:
Nunca has visto una pelicula de anime y te recomendaron entrar al Studio ghibli para comenzar a adentrarte en ese mundo.
Tarea 1:
Barra de navegacion
Entiende y despliega adecuadamente la barra de navegación. 100%
Tarea 2:
Carrusel de imágenes
No encuentra un botón para regresar a las animaciones anteriores.
Solución : se proporcionó 3 botones para cada imágen dentro del carrusel deteniendo la animación.
tarea 3:
Films destacados
No encuentra los títulos de los films que aparecen.
Solución : se añadió el titulo al pie de la imagen del film.
Tarea 4:
Footer
Encuentra facilmente la información de contacto. 100%
Yo como fanatico de Studio Ghibli.
QUIERO un botón donde estén todas las animaciones y unos botones para filtrarlas.
PARA una vista panorámica de todas las animaciones y poder buscarlas según mis necesidades y ver que filmography visito.
- El usuario puede ver todas las animaciones solo clickeando un botón.
- El usuario puede acceder a unos botones para filtrar los films.
- El usuario puede ver el poster y el año de estreno de los films en la tarjeta.
- El usuario puede ver la descripción de los films al voltear la tarjeta.
- El usuario puede voltear la tarjeta en el estado responsivo cuantas veces quiera.
- El código está en el repositorio.
- El código cumple con el prototipo acordado.
- El código ha sido hecho al 60% en pair-programming. La historia implementada ha sido testeada por 3 usuarios y se han incorporado las mejoras que se identificaron en el testeo de usabilidad.
- El código cumple con mostrar los films de la data.
- El código filtra data y muestra los films según orden alfabetico.
- El código filtra data y muestra los films según su decada de estreno.
- El código filtra data y muestra los films según su rating.
- El código filtra data y muestra los films según su director.
- El código filtra data y muestra los films según el texto del input.
- El código fue implementado con animaciones.
- El codigo tiene una barra de navegación desplegable para los browser.
- El código tiene pruebas unitarias.
| Pregunta | % |
|---|---|
| Creo que me gustaria usar este sistema con frecuencia | 100% |
| Encontramos la página innecesariamente compleja | 0% |
| Encontré el sistema muy engorroso de usar | 0% |
| Me sentí a gusto y confiado usando el sistema | 100% |
| Creo que necesitaria el apoyo de un tecnico para poder utilizar este sistema | 0% |
| Descubri que las diversas funciones de este sistema estaban bien integradas | 70% |
| Creo que dentro de los elementos que muestra esta pantalla, hay algo fuera de lugar, porque no pertenece al sitio web Studio Ghibli | 0% |
| Creo que el logotipo del sitio web estásuficientemente destacado dentro de la(s) página(s) | 50% |
| Se ofrece información de contacto y no me costó encontrarla en la página web | 100% |
| Me pareció adecuada la selección de contenidos presentes en el menú principal | 100% |
| Eché en falta otras áreas de información | 80% |
| Me pareció accesible y fácil de buscar las filtraciones | 90% |
| Me pareció fácil de usar la barra de navegación | 70% |
| Las animaciones responden correctamente | 60% |
Escenario 1 Quieres escoger un film pero piensas que pueden ser muchos y necesitas filtrarlos para entresacar los que más te interesan.
Tarea 1:
Barra de navegación
No puede colapsar barra de navegación sin apretar la X. 70%
Solución : se agregó código javascript para que al apretar cualquier parte del documento exterior se colapse la barra de navegación.
Tarea 2:
Footer
Encuentra fácilmente la información de contacto. 100%
Tarea 3:
Mostrar tarjetas de films
Encuentra los films que quiere por filtrado. 100%
Tarea 4:
Animaciones de tarjetas films
No voltea en celular la tarjeta de vuelta cuando está en la parte trasera. 60%
Solución : se agregó código javascript para que al clickear en la tarjeta voltee a la cara posterior.
Tarea 5:
Lista desplegable del browser
Encuentra muy caotico los botones de busqueda. 80%
Solución : Ultilizar flexbox para alinear los botones.
Tarea 6:
Filtación de films
Filtra correctamente todas las opciones. 100%
Yo como fanatico de Studio Ghibli:
QUIERO a que al entrar en una animacion muestre una descripcion, director y año.
PARA ver si me animo a verla y saber quien la dirigió y poder decidir si veo una pelicula antigua o nueva.
- El usuario puede ver la filmografía en detalle despues de hacer click en el film escogido.
- El usuario puede ver el titulo del film.
- El usuario puede ver el director y productor del film.
- El usuario puede ver el poster y el año de estreno del film.
- El usuario puede ver la descripción del film.
- El código está en el repositorio.
- El código cumple con el prototipo acordado.
- El código ha sido hecho al 90% en pair-programming.
- La historia implementada ha sido testeada por 3 usuarios y se han incorporado las mejoras que se identificaron en el testeo de usabilidad.
- El código cumple con mostrar el titulo del film.
- El código cumple con mostrar el director y productor.
- El código cumple con mostrar el poster y año de estreno.
- El código fue implementado con animaciones.
- El código tiene pruebas unitarias.
| Pregunta | % |
|---|---|
| Creo que me gustaría usar este sistema con frecuencia | 100% |
| Encontramos la página innecesariamente compleja | 0% |
| Encontré el sistema muy engorroso de usar | 0% |
| Me sentí a gusto y confiado usando el sistema | 100% |
| Creo que necesitaría el apoyo de un técnico para poder utilizar este sistema | 0% |
| Descubrí que las diversas funciones de este sistema estaban bien integradas | 80% |
| Creo que dentro de los elementos que muestra esta pantalla, hay algo fuera de lugar, porque no pertenece al sitio web Studio Ghibli | 0% |
| Creo que el logotipo del sitio web estásuficientemente destacado dentro de la(s) página(s)? | 60% |
| Se ofrece información de contacto y no me costó encontrarla en la página web | 100% |
| Me pareció adecuada la selección de contenidos presentes en el menú principal | 100% |
| Eché en falta otras áreas de información | 50% |
| Las animaciones responden correctamente | 80% |
| Me parece lo suficientemente descriptivo para entender de que trata el film | 90% |
Escenario 1
Quieres ver la información total de un film que hayas escogido.
Tarea 1
Redirección al film escogido
Encuentra fácilmente el botón al hacer click para redireccionar al film escogido 90%
Tarea 2
Visualización de la información total del film Encuentra satisfactoriamente completa la información detallada 100%
tarea 3
footer
encuentra facilmente la información de contacto 100%
Yo como fanatico de Studio Ghibli:
QUIERO una sección donde estén todos los personajes y sus características.
PARA recordar como eran los personajes y curiosidad.
- El usuario puede ver los personajes en detalle después de hacer click en el botón characters.
- El usuario puede ver la imagen de cada personaje.
- El usuario puede ver sus caracteristicas.
- El código está en el repositorio.
- El código cumple con el prototipo acordado.
- El código ha sido hecho al 95% en pair-programming.
- La historia implementada ha sido testeada por 3 usuarios y se han incorporado las mejoras que se identificaron en el testeo de usabilidad.
- El código cumple con mostrar la foto de cada personaje.
- El código cumple con mostrar el nombre de cada personaje.
- El código cumple con mostrar las caracteristicas de cada personaje.
- El código tiene pruebas unitarias.
| Pregunta | % |
|---|---|
| Creo que me gustaría usar este sistema con frecuencia | 100% |
| Encontramos la página innecesariamente compleja | 0% |
| Encontré el sistema muy engorroso de usar | 0% |
| Me sentí a gusto y confiado usando el sistema | 100% |
| Creo que necesitaría el apoyo de un técnico para poder utilizar este sistema | 0% |
| Descubrí que las diversas funciones de este sistema estaban bien integradas | 90% |
| Creo que dentro de los elementos que muestra esta pantalla, hay algo fuera de lugar, porque no pertenece al sitio web Studio Ghibli | 0% |
| Creo que el logotipo del sitio web estásuficientemente destacado dentro de la(s) página(s)? | 60% |
| Se ofrece información de contacto y no me costó encontrarla en la página web | 100% |
| Me pareció adecuada la selección de contenidos presentes en el menú principal | 100% |
| Eché en falta otras áreas de información | 70% |
| Las animaciones responden correctamente | 90% |
| Me pareció completa la información de los personajes | 90% |
Escenario 1
Quieres ver la información detallada de cada personaje del film escogido.
Tarea 1
Botón characters
Encuentra fácilmente el botón para mostrar personajes 100%
Tarea 2
Visualización de la tarjeta del personaje
Encuentra ordenada y satisfactoriamente completa las caracteristicas del personaje 90%
Tarea 3
Footer
Yo como fanático de Studio Ghibli:
QUIERO poder ver las locaciones y vehiculos de las peliculas.
PARA poder internarme en ese mundo y saber detalles curiosos de los vehiculos que me gustaron.
- El usuario puede ver las locaciones y vehiculos en detalle después de hacer click en el botón locations y en el botón vehicles.
- El usuario puede ver la imagen de cada locación y vehiculo.
- El código está en el repositorio.
- El código cumple con el prototipo acordado.
- El código ha sido hecho al 97% en pair-programming.
- La historia implementada ha sido testeada por 3 usuarios y se han incorporado las mejoras que se identificaron en el testeo de usabilidad.
- El código cumple con mostrar la foto de cada locación y vehículo.
- El código cumple con mostrar la descripción de vehiculo.
- El código tiene pruebas unitarias.
- Encuentra facilmente la información de contacto.
| Pregunta | % |
|---|---|
| Creo que me gustaría usar este sistema con frecuencia | 100% |
| Encontramos la página innecesariamente compleja | 0% |
| Encontré el sistema muy engorroso de usar | 0% |
| Me sentí a gusto y confiado usando el sistema | 100% |
| Creo que necesitaría el apoyo de un técnico para poder utilizar este sistema | 0% |
| Descubrí que las diversas funciones de este sistema estaban bien integradas | 80% |
| Creo que dentro de los elementos que muestra esta pantalla, hay algo fuera de lugar, porque no pertenece al sitio web Studio Ghibli | 0% |
| Creo que el logotipo del sitio web estásuficientemente destacado dentro de la(s) página(s)? | 60% |
| Se ofrece información de contacto y no me costó encontrarla en la página web | 100% |
| Me pareció adecuada la selección de contenidos presentes en el menú principal | 100% |
| Eché en falta otras áreas de información | 80% |
| Me pareció completa la información de las locaciones | 60% |
| Me pareció completa la información de los vehículos | 50% |
Escenario 1
Quieres ver la información detallada de locación y vehículo del film escogido
Tarea 1
Botón locations
Encuentra fácilmente el botón para mostrar locaciones 100%
Tarea 2
Botón vehicles
Encuentra fácilmente el botón para mostrar vehículos 100%
Tarea 3
Visualización de la tarjeta de locaciones
Encuentra ordenada y satisfactoriamente completa las caracteristicas de la locación 70%
Tarea 4
Visualización de la tarjeta de vehiculos
Encuentra ordenada y satisfactoriamente completa las caracteristicas de los vehiculos 70%
Tarea 3
Footer
Encuentra facilmente la información de contacto 100%