Prácticas Diseño Interfaces de Usuario (Tema: .... )
Grupo: DIUx_AABB. Curso: 2024/25
Actualizado: xx/xx/2025
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:
- 👤 AA
- 👤 BB
Los equipos son de 2 personas. Identifícaros con el nombre del Grupo y los enlaces a los perfiles de GitHub de cada integrante
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
Cualquier título puede ser adaptado. Recuerda borrar estos comentarios del template en tu documento
Describe el plan en tu User Research (cómo se plantea la selección de usuarios). Borra esta línea cuando lo tengas.
Describe brevemente características de las aplicaciones que tiene asignadas tu grupo. Decidete por una y explica por qué se ha seleccionado. Borra esta línea cuando lo tengas.
Junto con la captura de pantalla de la ficha de la persona, haz una breve descripción de la misma. Recuerda que son dos. Los recursos de imagen deberán estar dentro de la carpeta P1/ Cuando termines, borra esta línea.
Describe el porqué de las dos experiencias de usuario contadas en el journey map. Por ejemplo, reflexiona si te parece que son habituales. Enlaza con los recursos journey que están en la carpeta P1/. Borra esta linea del template cuando termines.
El objetivo es revisar la usabilidad del competidor seleccionado. Usamos un checklist de verificación. Tras usarlo, subelo a la carpeta P1/ Ofrece aquí un parrafo para:
- Enlace al documento: (xls/pdf)
- URL y Valoración numérica obtenida:
- Comentario sobre la revisión: (puntos fuertes y débiles detectados)
Cualquier título puede ser adaptado. Recuerda borrar estos comentarios del template en tu documento
Comenta con un diagrama los aspectos más destacados a modo de conclusion de la práctica anterior. De qué carece la competencia?? Tu diagrama puede ser una figura subida a la carpeta P2/
| Interesante | Críticas |
|---|---|
| Preguntas | Nuevas ideas |
Explica el Problema y plantea una hipótesis. Es decir, explica aquí qué se plantea como "propuesta de valor" para un nuevo diseño de aplicación propio
Propuesta de valor, pero ahora en vez de un texto es un ScopeCanvas que has subido a P2/ y enlazado desde aqui. Tambien vale una imagen miniatura del recurso. No olvides que tu propuesta ya tiene un nombre corto y puedes actualizar la cabecera de este archivo
Definir "User Map" y "Task Flow" ... enlazar desde P2/ y describir brevemente
Identificar términos para diálogo con usuario (evita el spanglish) y la arquitectura de la información. Es muy apropiado un diagrama tipo sitemap y una tabla que se ampliaría para llevar asociado la columna iconos (tanto para la web como para una app).
| Término | Significado |
|---|---|
| Login | acceder a plataforma |
Plantear el diseño del layout para Web/movil (organización y simulación). Describa la herramienta usada
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
Publicar 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
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
