CREACIÓN DE UN

CARDSORTING Y LOS
MOCKUP-BOSQUEJOS DE
LA APLICACIÓN
Metodologías emergentes para la web

22 DE FEBRERO DE 2022

Equipo 8
Gonzalo Rey Hernández Saucedo 19011366
Ana Gabriela Ruiz Hernández 19011451
Carlos Sánchez Cortes 19011456

M.C. NAVA ARTEAGA CONCEPCIÓN

1. Nombres:
 Gonzalo Rey Hernández Saucedo
 Ana Gabriela Ruiz Hernández
 Carlos Sánchez Cortes

2. Nombre del Proyecto:

Pearlhorizon

3. Objetivo General:
Diseñar una aplicación web para ver y realizar reseñas de videojuegos, asi como poder
visualizar las noticias más relevantes y próximos lanzamientos utilizando el diseño
centrado en el usuario.

4. Objetivos específicos:
 Recopilar los requisitos de los diferentes tipos de archivos, asi como las diferentes
calidades de descarga.
 Clasificar los requisitos.
 Definir los requerimientos funcionales de la nube.
 Definir los requerimientos no funcionales de la nube.
 Crear un card sorting para definir la estructura de navegación.
 Diseñar interfaces utilizando patrones de diseño web.

5. Descripción detallada de la aplicación Web:

En la aplicación web se podrán ver y realizar reseñas de videojuegos ordenados en los
mejor calificados, los peor calificados, los más recientes, por género, etc.
Asi pues, tambien se podrán visualizar las noticias relacionadas más recientes a los
videojuegos, así como los trailers y adelantos de aquellos que están próximos a salir.

6. LISTA DE REQUISITOS FUNCIONALES Y NO

FUNCIONALES
 Requisitos funcionales:
 Actor Administrador
1. Iniciar sesión
2. Agregar reseñas
3. Agregar imágenes
4. Modificar reseñas
5. Eliminar reseñas
6. Agregar noticias
7. Modificar noticias
 8. Eliminar noticias
9. Cerrar sesión

 Actor Cliente
1. Registrarse
2. Iniciar sesión
3. Agregar comentario
4. Modificar comentario
5. Eliminar comentario
6. Consultar comentario
7. Dar me gusta a las imágenes
8. Agregar reseña
9. Modificar reseña
10. Consultar reseña
11. Eliminar reseña
12. Visualizar lista de publicaciones
13. Cerrar sesión
 Requisitos no funcionales:
 Los datos de los usuarios a almacenar son: Nombre de usuario,
contraseña, correo electrónico, Nombre, Edad, País.
 Los datos del administrador son: contraseña, nombre de usuario.
 El acceso a los datos debe ser de forma segura.
 El fondo y color de letra podrá ser diferente para cada usuario
(personalizable).
 El cliente puede seleccionar su imagen de perfil
 El tiempo de carga no tiene que superar los 3 segundos de respuesta en la
aplicación web.
 El sistema debe tener una disponibilidad del 99,99% de las veces en que el
cliente intente acceder.
 El sistema no revelara otros datos personales del cliente distintos a
nombres de usuario y foto de perfil.
 La interfaz de usuario deberá hacer uso de los recursos disponibles en
cuanta accesibilidad y usabilidad.
 El sistema debe funcionar en todos los navegadores web modernos.
 7. NECESIDADES DE REQUERIMEINTOS DE
PATRONES DE DISEÑO CENTRADAS EN EL
USUARIO
Administrador
NECESIDAD/REQUERIMIENTO CONTEXTO DE USO A PATRONES DE INTERFAZ DE
OCUPAR USUARIO PROPUESTO
El administrador debe iniciar Inicio de sesión Login
sesión
El administrador debe poder Visualización de las Categorización
visualizar de manera noticias/reseñas
ordenada las noticias y las
reseñas
El administrador debe poder Calificar los juegos Puntuar Contenido
calificar el juego al que va a
reseñar
El administrador debe poder Crear, Eliminar y modificar Formulario, Undo, Autosave,
crear, modificar y eliminar las noticias drag and drop, Wiki
noticias
El administrador debe poder Crear, Eliminar y modificar Formulario, Undo, Autosave,
crear, modificar y eliminar las reseñas drag and drop, Wiki
reseñas

Cliente
NECESIDAD/REQUERIMIENTO
El usuario debe registrarse
El usuario debe iniciar sesión
El usuario debe poder Buscar
las cosas de su interés
El usuario debe poder
visualizar de manera
ordenada las noticias y las
reseñas
El usuario debe poder
comentar acerca de las
noticias que pasan
El usuario debe poder
calificar el juego al que va a
reseñar
Visualizar de manera
llamativa y cómoda la lista de
videojuegos ya reseñados
El usuario debe poder crear,
CONTEXTO DE USO A
OCUPAR
Registro
Inicio de sesión
Buscar noticias/reseñas
Visualización de las
noticias/reseñas
Comentar en las noticias
Calificar los juegos
Visualizar los juegos ya
reseñados
Crear, Eliminar y modificar
PATRONES DE INTERFAZ DE
USUARIO PROPUESTO
Formulario
Login
Búsqueda, Filtros de
búsqueda
Categorización
Divulgación progresiva
Puntuar Contenido
Galería
Formulario, Undo, Autosave,
 modificar y eliminar sus reseñas drag and drop, Wiki
reseñas

8. PROPUESTA DE LAS CATEGORIAS Y TARJETAS

POR ACTOR
Administrador
Categorías: Tarjetas:

 Sesión 1. Iniciar sesión

 Reseñas 2. Agregar reseñas
 Noticias 3. Agregar imágenes
 Administración 4. Modificar reseñas
5. Eliminar reseñas
6. Agregar noticias
7. Modificar noticias
8. Eliminar noticias
Cliente 9. Cerrar sesión

Categorías: Tarjetas:
 Sesión 1. Registrarse
 Reseñas 2. Iniciar sesión
 Noticias 3. Agregar comentario
 Visualización 4. Modificar comentario
5. Eliminar comentario
6. Consultar comentario
7. Dar me gusta a las imágenes
8. Agregar reseña
9. Modificar reseña
10. Consultar reseña
11. Eliminar reseña
12. Visualizar lista de publicaciones
13. Cerrar sesión

9. Lanzamiento del Card Sorting

Card sorting Administrador:
https://c75j8717.optimalworkshop.com/optimalsort/3415x561
 Card sorting Cliente:
https://323e03hj.optimalworkshop.com/optimalsort/h23qdjo0

10. Resultados del Card Sorting

Card sorting Administrador:
Card Sorting Cliente:
11. Diseño Makup
Como se puede observar el patrón de usabilidad
y accesibilidad usado en este diseño es el

Como se puede observar el patrón de usabilidad

y accesibilidad usado en este diseño es el

Como se puede observar el patrón de usabilidad

Como se puede observar el patrón de usabilidad
y accesibilidad usado en este diseño es el

Como se puede observar el patrón de usabilidad

y accesibilidad usado en este diseño es el

Como se puede observar el patrón de usabilidad

y accesibilidad usado en este diseño es el
Como se puede observar el patrón de usabilidad
y accesibilidad usado en este diseño es el

Como se puede observar el patrón de usabilidad

y accesibilidad usado en este diseño es el