Prácticas Diseño Interfaces de Usuario (Tema: .... )
- Guiones de prácticas
- Guía para crea tu Case Study
- Sala de la Fama DIU Hall of fame donde se pueden encontrar Case Study destacados de otros años.
Actualizado: 14/01/2026
Este documento es el esqueleto del Case Study que explica el proceso de desarrollo de las 5 prácticas de DIU. Aparte de subir cada entrega a PRADO, se debe actualizar y dar formato de informe final a este documento online. Elimine este tipo de texto / comentarios desde la práctica 1 conforme proceda a cada paso
Hay que Publicar de forma incremental "my Case Study" en Github... Es el momento de dejar este documento para que sea evaluado y calificado como parte de la práctica Documente bien la cabecera y asegurese que ha resumido los pasos realizados para el diseño de su producto
Grupo: DIU1_JMDA. Curso: 2025/26
Nombre del Proyecto:
Decida el nombre corto de su propuesta en la práctica 2
Descripción:
Describa la idea de su producto en la práctica 2
Logotipo:
Si diseña un logotipo para su producto en la práctica 3 pongalo aqui, a un tamaño adecuado. Si diseña un slogan añadalo aquí
Miembros y nombre del equipo:
- 👤 Jose María Martín
https://github.com/josemartin2912 - 👤 David López Giménez https://github.com/Garromo14
El establecimiento Shifu Ramen es un restaurante japonés especializado sobre todo en ramen y que combina la comida con la cultura del manga.
- Contexto:
Con este estudio, se pretende realizar un análisis del comportamiento del usuario en este tipo de páginas web de restauración ( sobre todo japonesa ) con el fin de hacer un diseño y desarrollo de la aplicación del restaurante.
- Objetivos de investigación:
Se pretende con este análisis que la aplicación cuente con una serie de características que optimicen la experiencia de usuario. Algunos de los más importantes son:
-
Facilidad para el usuario de acceder al menú en un tiempo razonable.
-
Accesibilidad para la gestión de reservas.
-
Analizar qué comportamiento tienen los nuevos usuarios para atraer más usuarios.
-
Experiencia del equipo / justificación
- Jose María Martín: "Como desarrollador, he trabajado en otros proyectos de restauración y frecuento páginas de anime, por lo que este proyecto me es muy interesante".
- David López: "Como Stakeholder, he estado en otros proyectos de restauración y quiero explotar el mercado del anime japonés."
- María Alonso: "Como empleada de otro sitio de ramen, observo que la gente quiere un espacio gastronómico de temática de anime para los fans de este género, pero que no sea demasiado cargante para posibles nuevos consumidores."
Se pretenden seleccionar técnicas no muy complejas en este estudio, pues en una página de restauración se espera que el usuario haga un uso rápido como encontrar el menú o gestionar una reserva:
-
Entrevistas: Método cualitativo y actitudinal.
-
A/B Testing + Eye tracking Método cuantitativo y de comportamiento.
-
A/B Testing + Test de usabilidad: Método cualitativo y de comportamiento (test de usabilidad) y cuantitativo y de comportamiento ( A/B Testing ).
ref: https://www.nngroup.com/articles/which-ux-research-methods/
Como se ha comentado previamente, distinguimos dos grupos de posibles usuarios, afines a la cultura del anime y personas ajenas a esta cultura. Se seleccionan 25 participantes para entrevistar, distribuidos en:
- 20 participantes interesados en el anime, de edad joven ( 16-35 años ).
- 5 participantes no interesados en esta cultura, de edad variable.
En cuánto a los métodos diferentes a las entrevistas, seleccionamos un subrgupo de estos 25 participantes, formado por 8 personas del primer subgrupo sumado a 2 personas del segundo grupo, concretamente 1 adulto y 1 persona de edad avanzada.
En los experimentos donde el usuario tenga contacto con la aplicación, algunos son:
- Navegar libremente por la interfaz y preguntar por opinión, sus objetivos, en qué ha tenido éxito, en qué ha fracasado... etc.
- Buscar el menú y observar 5 productos de diferente categoría ( p.e. bebidas, ramen, postres...).
- Encontrar el horario y localización del establecimiento.
- Realizar una reserva y comprobar que se ha realizado con éxito.
- Encontrar el contacto del restaurante y sus redes sociales.
- Análisis de competencia
- 2 Documentos "Personas" para conocer varios perfiles potenciales de usuarios.
- 2 "User Journey Map" para entender la interacción del usuario con la aplicación.
- Usability Report con mejoras de usabilidad.
Research Plan Completo (más detallado)
Shifu Ramen Granada es un establecimiento con una pagina web muy sencilla. Está diseñada para usarse como una carta on-line, ya que al abrir es lo primero que aparece; sin embargo, también dispone de funcionalidad para hacer otras cosas como una reserva o mirar las novedades en su blog.
Buga Ramen por otra parte tiene una pagina web más compleja y vistosa. Destaca por ofrecer más información sobre su historia y sus locales, con una gran galería de fotos. Por este enfoque más centrado en vender la experiencia, han dado a cambio otras funcionalidades como la posibilidad de reservar por teléfono.
Hemos decidido decantarnos por Shifu Ramen puesto que tiene un flujo de usuario más completo, permitiendo realizar reservas directamente desde la web. Además, tiene un enfoque más interactivo que la alternativa, con un blog en la propia web y con su presencia en las redes sociales que creemos que puede ser más interesante a la hora de realizar un análisis.
Andrés es un informático joven con una gran afición por el anime. Por esto, Andrés es un ejemplo claro del publico objetivo del restaurante.
Guillermo por otra parte es una persona que no tiene ningún interes en el restaurante, sin embargo le gusta probar comidas nuevas y está dispuesto a probar en Shifu Ramen.
Andrés tiene una experiencia bastante tipica en la que mira datos como los alérgenos y cuando tieme toda la información que necesita hace una reserva.
La experiencia de Guillermo ejemplifica como el uso de la web es muy parecido aunque no forme parte de su público objetivo y nos proporciona información sobre cómo se desenvuelve la página web con otros tipos de usuario.
Justificación Persona y Journey Map 1
Justificación Persona y Journey Map 2
Valoración final: 82/100 Al hacer el análisis de usabilidad comprobamos que se desenvuelve bastante bien en normas generales, aunque hay algunos puntos en los que flaquea. Por ejemplo, el hecho de que puedas acceder a una página de administrador protegida con contraseña desde la página principal es un error grande y debería arreglarse con urgencia. Además, al ser una página web sencilla y con poca interactividad, hay secciones que no se pueden calificar de forma completa.
Este proyecto tiene como objetivo el análisis de usabilidad del sitio web https://www.ramenshifu.com/ramen-shifu-granada/. Para ello, se han llevado a cabo las siguientes pruebas:
- Research Plan.
- Competitor Analysis.
- Documentos “Personas” y “User Journey Map”.
- Usability Review.
Estas pruebas tienen como objetivo describir un conjunto de prácticas y metodologías que aplicar a los usuarios del sitio web, describiendo a estos usuarios y las acciones potenciales a realizar y analizando la competencia con el objetivo de evaluar y mejorar la usabilidad de nuestra aplicación. Las pruebas han dado resultado a las siguientes conclusiones:
- El sitio cumple con lo esperado en una página web de restauración, es decir, un uso rápido y sencillo del usuario.
- La temática de anime está presente y no sobrecarga la experiencia de usuario.
- El menú está presente en la página principal y bien distribuido por categorías.
- Elementos como la dirección o el contacto son fáciles de encontrar en la cabecera.
- Los alérgenos no se encuentran a simple vista.
- El apartado reservas es claro y bien estructurado.
- Hay ciertas secuencias de navegación que conducen a páginas que parecen obsoletas.
En general, damos por satisfactoria la realización de la práctica. La comunicación del equipo ha sido buena y la carga de trabajo se ha repartido de forma equitativa. Además, se ha utilizado los recursos de forma homogénea como por ejemplo la misma plantilla de "Personas".
Cualquier título puede ser adaptado. Recuerda borrar estos comentarios del template en tu documento
En esta sección vamos a realizar un estudio de la experiencia del usuario con respecto a la temática de sabores con encanto en general y el sitio web Ramen Shifu en particular. Para ello utilizaremos las siguientes herramientas:
- Empathy Map: Este gráfico recoge el comportamiento del usuario con respecto a sitios de ramen de temática anime, además del comportamiento en nuestra web. Recoge lo que ve y escucha, lo que piensa, dice y hace y los obstáculos y motivaciones. Diferenciamos el comportamiento de dos tipos de usuarios de la práctica 1, Andrés el usuario informático y fan del anime y Guillermo, el hombre de gustos tradicionales.
- Feedback Capture Grid: En cuanto a este gráfico, recoge la experiencia de usuario con respecto a la web del sitio escogido en la práctica 1. Para ello se realiza una cuadrícula dividida en las secciones: cosas que funcionaron, cosas a mejorar, dudas y propuestas.
Una vez hecho el estudio del usuario con respecto a esta temática y nuestro sitio web, procedemos a hacer una propuesta de valor. Cabe resaltar que, al ser una página de restauración, se espera que el uso que haga el usuario de ella sea bastante rápido, ya que normalmente este tipo de webs se visitan para tareas que se esperan que sean lo más rápidas y sencillas como ver la carta, consultar localización o hacer una reserva. Consideramos que en general el sitio Ramen Shifu cumple con estas cosas bastante bien por lo que en lugar de hacer una propuesta que parta de cero, se opta por hacer un rediseño del sitio web, modificando algunos elementos que consideramos mejorables.
Teniendo en cuenta esto, realizamos la siguiente propuesta .....
Este Scope Canvas recoge las necesidades de los usuarios y plantea objetivos para cumplirlas con el proposito de mejorar la experiencia de usuario.
Por ejemplo, uno de los puntos más negativos de la pagina original es el formulario de registro que aparece cuando abres la web por primera vez. Tal y como hemos comentado antes, el objetivo principal de la página es poder hacer consultas rápidas, por lo que uno de nuestros objetivos más importantes será eliminar de este formulario y sustituirlo como una opción a la hora de reservar.
Pasado un tiempo, se puede medir el desempeño de los cambios realizados mediante ciertas metricas descritas en el Scope Canvas.
Pasamos ahora al análisis de tareas. Para ello, usaremos User Task Flows, que indicarán los pasos que deberán seguir los usuarios para completar ciertas tareas. Además, se plantea una Task Matrix, que es una matriz que indica el interés de un tipo de usuario en una tarea determinada. En cuánto a las tareas, como hemos comentado previamente, al ser una web de restauración se esperan que sean rápidas, sencillas y que no haya demasiadas. Es por esto que no salen diagramas de flujo muy largos ni con muchos elementos condicionales o repetitivos. Se han seleccionado las siguientes tareas:
Por último, para acabar con esta sección, exponemos la matriz de tareas.
| Tarea / Usuario | Cliente afín a la gastronomía asiática | Cliente de gustos tradicionales | Cliente con varias alergias |
|---|---|---|---|
| Ver la carta | Alta | Alta | Alta |
| Comprobar alérgenos | Media | Media | Alta |
| Hacer una reserva | Alta | Media | Media |
| Consultar localización y horarios | Media | Media | Media |
| Ver contacto | Baja | Media | Media |
| Recibir ofertas | Alta | Baja | media |
Como vemos, no existen demasiadas tareas en el sitio web y en la mayoría el interés de cada usuario suele ser parecido.
| Término | Significado |
|---|---|
| Carta | Menú del restaurante visible nada más entrar a la web. Cada item tiene descripción, imagen y está clasificado por alérgenos. |
| Online | Enlace a la opción de reserva mediante formulario web. |
| Telefonica | Enlace a la opción de reserva por telefono. |
| Noticias | Noticias sobre cambios relevantes al restaurante. |
| Ofertas | Ofertas de tiempo limitado por platos y tabernas. |
| Sobre Nosotros | Información sobre la historia de la cadena. |
| Nuestras Tabernas | Información sobre disponibilidad en distintas localidades. |
| Formulario | Gestión de reservas onlines. Seleccionas localidad, fecha y hora. |
| Ubicaciones | Ubicación con enlace a mapa de cada taberna. |
| Telefonos | Telefono de contacto de cada taberna. |
| Header | Menú con enlaces a todas las paginas relevantes. |
| Footer | Menú con enlaces a información secundaria (aviso legal, trabaja con nosotros, etc.) |
En esta sección, detallamos el layout para nuestra web. Primero, realizaremos unos bocetos a mano con el objetivo de tener una idea preliminar de nuestro diseño. Una vez realizado estos diseños, subiremos el nivel haciendo unos Wireframes en escala de grises y en formato 12 columnas de nuestra web utilizando figma:
Para los wireframes, hemos seguido las indicaciones del guión y hemos seleccinado la tipografía Luckiest Guy, que recuerda a las letras que podemos encontrar por ejemplo en cómics.
Comenzamos definiendo la página de inicio, que como hemos comentado, es la carta del restaurante. Esta página cuenta con la cabecera de opciones, un contenedor que muestra una oferta o noticia, unos botones llamados Cat que indican una categoría de plato y estarán enlazados con los platos de esa categoría, los propios platos ordenados por categoría, el mapa de Google Maps enlazado con la dirección en la cabecera y por último el footer con contacto y alguna otra opción.
En las siguientes páginas se gestiona todo el proceso de reserva.
Reservas es simplemente una página en la que se detallan las opciones de reserva y se enlaza a la página correspondiente según la opción elegida.
Reservas Online es una página con un formulario en el que se introducirán los detalles de la reserva (local de interés, fecha y hora, comensales y email) y se añadirá la opción mediante una checkbox de suscribirse a la Newsletter.
La página Tabernas es a la que se te dirige cuando seleccionas la opción de reserva telefónica. En esta página se mostrarán los detalles de cada taberna, incluidos número de teléfono (interactuable, para proceder a la reserva) y un mapa, también interactuable que dirigirá a un servicio como Google Maps.
Esta página representa una clásica newsletter para consultar ofertas y noticias. Esta newsletter estará disponible también via email a los clientes que realicen una reserva online y marquen la casilla de recibir ofertas.
Cualquier título puede ser adaptado. Recuerda borrar estos comentarios del template en tu documento
Diseño visual con una guía de estilos visual (moodboard) Incluir Logotipo. Todos los recursos estarán subidos a la carpeta P3/ Explique aqui la/s herramienta/s utilizada/s y el por qué de la resolución empleada. Reflexione ¿Se puede usar esta imagen como cabecera de Instagram, por ejemplo, o se necesitan otras?
Plantear el Landing Page del producto. Aplica estilos definidos en el moodboard
Estudio de Guidelines y explicación de los Patrones IU a usar Es decir, tras documentarse, muestre las deciones tomadas sobre Patrones IU a usar para la fase siguiente de prototipado.
Consiste en tener un Layout en acción. Un Mockup es un prototipo HTML que permite simular tareas con estilo de IU seleccionado. Muy útil para compartir con stakeholders
Breve descripción del caso asignado (llamado Caso-B) con enlace al repositorio Github Tabla y asignación de personas ficticias (o reales) a las pruebas. Exprese las ideas de posibles situaciones conflictivas de esa persona en las propuestas evaluadas. Mínimo 4 usuarios: asigne 2 al Caso A y 2 al caso B.
| Usuarios | Sexo/Edad | Ocupación | Exp.TIC | Personalidad | Plataforma | Caso |
|---|---|---|---|---|---|---|
| User1's name | H / 18 | Estudiante | Media | Introvertido | Web. | A |
| User2's name | H / 18 | Estudiante | Media | Timido | Web | A |
| User3's name | M / 35 | Abogado | Baja | Emocional | móvil | B |
| User4's name | H / 18 | Estudiante | Media | Racional | Web | B |
Planifique qué pruebas se van a desarrollar. ¿En qué consisten? ¿Se hará uso del checklist de la P1?
Como uno de los test para la prueba A/B testing, usaremos el Cuestionario SUS que permite valorar la satisfacción de cada usuario con el diseño utilizado (casos A o B). Para calcular la valoración numérica y la etiqueta linguistica resultante usamos la hoja de cálculo. Previamente conozca en qué consiste la escala SUS y cómo se interpretan sus resultados http://usabilitygeek.com/how-to-use-the-system-usability-scale-sus-to-evaluate-the-usability-of-your-website/) Para más información, consultar aquí sobre la metodología SUS Adjuntar en la carpeta P4/ el excel resultante y describa aquí la valoración personal de los resultados
Los resultados de un A/B testing con 3 pruebas y 2 casos o alternativas daría como resultado una tabla de 3 filas y 2 columnas, además de un resultado agregado global. Especifique con claridad el resultado: qué caso es más usable, A o B?
Indica cómo se diseña el experimento y se reclutan los usuarios. Explica la herramienta / uso de gazerecorder.com u otra similar. Aplíquese únicamente al caso B.
Cambiar esta img por una de vuestro experimento. El recurso deberá estar subido a la carpeta P4/
gazerecorder en versión de pruebas puede estar limitada a 3 usuarios para generar mapa de calor (crédito > 0 para que funcione)
Añadir report de usabilidad para práctica B (la de los compañeros) aportando resultados y valoración de cada debilidad de usabilidad. Enlazar aqui con el archivo subido a P4/ que indica qué equipo evalua a qué otro equipo.
Complementad el Case Study en su Paso 4 con una Valoración personal del equipo sobre esta tarea
Breve descripción de esta tarea. Las evidencias de este paso quedan subidas a P5/
Breve descripción de esta tarea. Las evidencias de este paso quedan subidas a P5/
Opinión FINAL del proceso de desarrollo de diseño siguiendo metodología UX y valoración (positiva /negativa) de los resultados obtenidos. ¿Qué se puede mejorar? Recuerda que este tipo de texto se debe eliminar del template que se os proporciona