Práctica individual: Diseño de una interfaz para IPM 2025/26

¡Hola! Esta práctica tiene un objetivo muy claro y emocionante: diseñar una interfaz gráfica de usuario (IGU) para una aplicación de la que te hablaremos más adelante.

Lo que necesitas saber

:warning: ¡Importantísimo! Si no te familiarizas con el contenido de este repositorio (el README, el enunciado, los roles, etc.), no podremos calificarte, y la puntuación será de cero. Tómate un tiempo para leerlo todo con calma.

:warning: Las fechas que verás para cada tarea son límites inamovibles. No hay posibilidad de entregar la práctica fuera de los plazos establecidos, así que organízate bien para no tener sorpresas.

Esta es una práctica individual que se divide en dos tareas principales, que realizarás en dos semanas consecutivas:

1. Tarea 1: Diseño (15/09/2025T00:00 - 21/09/2025T23:59)

   Durante esta primera semana, te centrarás en el diseño. El resultado que esperamos es un documento que describa tu propuesta de diseño.

2. Tarea 2: Revisión por pares (22/09/2025T00:00 - 28/09/2025T23:59)

   La siguiente semana, participarás en una fase de revisión por pares. Aquí, tendrás la oportunidad de revisar los diseños de tus compañeros y compañeras. El resultado esperado son tus informes de revisión.

Para entregar ambas tareas, subirás los resultados al espacio asignado a la asignatura en el campus virtual, en la tarea llamada 'Práctica individual'.

:warning: ¡Atención! No podrás realizar la segunda fase si no has completado la primera a tiempo. ¡Asegúrate de entregar tu diseño a la semana!

:warning: El trabajo que realices aquí será el punto de partida para tu primera práctica en grupo. ¡Todo esfuerzo cuenta!

La aplicación cuya interfaz que vas a diseñar

Vas a diseñar la interfaz para una aplicación con las siguientes características:

• Es una aplicación de escritorio, por lo tanto, la interfaz es una interfaz gráfica de escritorio.

• Se sitúa en el ámbito de las aplicaciones de uso personal.

• Cualquier persona puede usarla, ¡es muy versátil!

• Es una aplicación independiente, no forma parte de ningún sistema complejo.

• Su principal utilidad es automatizar el cálculo de gastos compartidos entre varias personas.

  Imagina, por ejemplo, un grupo de amigos que se van de viaje y comparten los gastos. La aplicación les permite anotar quién ha pagado qué y a quién le corresponde cada cantidad, y luego calcula cómo saldar las cuentas.

• Los casos de uso básicos son: registrar una aportación, registrar un gasto con los participantes y ver el balance final.

• Utiliza un servidor para guardar los datos.

• Es una aplicación mono-usuario. Esto significa que cada persona tiene su propia instalación independiente.

Tarea 1: ¡Manos a la obra con el diseño!

En esta primera fase, te centrarás en crear la interfaz de la aplicación y documentarla adecuadamente. Tu diseño debe tener dos partes principales: el diseño visual (estático) y el flujo de trabajo de la persona usuaria (dinámico).

Para comenzar tu diseño, sigue estos pasos:

1. Identifica a tus usuarios. Piensa en quiénes podrían estar interesados en usar esta aplicación. En principio, cualquier persona podría ser un usuario potencial.

2. Comprende el dominio. Sumérgete en el funcionamiento de la aplicación para entender bien el contexto.

3. Identifica los casos de uso. Define las tareas que el usuario podrá realizar. En esta práctica, no te preocupes por el control de accesos ni la autenticación.

4. Verifica la viabilidad. Asegúrate de que los casos de uso que has identificado son compatibles con la API que ofrece el servidor.

5. Crea la interfaz. Diseña una interfaz que cubra todos los casos de uso que has definido.

   • No olvides incluir elementos para gestionar posibles problemas de red, como tiempos de respuesta lentos o fallos en el servidor.

   • Recuerda que el diseño incluye tanto el aspecto visual como el flujo de trabajo del usuario.

6. Calcula la complejidad y genera casos de prueba.

Lamentablemente, no existe un lenguaje estandarizado para diseñar interfaces, a diferencia de los que usamos en diseño de software como UML o C4. Por ello, para esta práctica, debes seguir las definiciones que hemos visto en clase.

Diseño visual: la parte estática 🖼️

La parte estática de tu diseño muestra la composición de la interfaz, es decir, qué elementos contiene y cómo es su disposición.

Como vimos en clase, usaremos low-fidelity wireframes.

Un wireframe es una representación estática y de baja fidelidad de tu producto, una especie de esqueleto básico para que diseñadores y desarrolladores se guíen. Un wireframe de baja fidelidad es la primera representación visual de una idea. Su objetivo es asegurar que los desarrolladores y clientes entiendan claramente las funcionalidades y el diseño que el software debe soportar. Los wireframes son rápidos, baratos y fáciles de crear. Pueden ser tan básicos como un simple boceto a lápiz y papel.

Nota: Algunos autores usan el término wireframe a secas, mientras que otros prefieren el término low-fidelity wireframe para esta definición. Para diferenciarlo de un mid-fidelity wireframe, usaremos un criterio sencillo: si no se puede dibujar a mano de forma razonable, es de fidelidad media.

La siguiente imagen te da una idea de cómo se ven los wireframes low, medium y high fidelity para una misma interfaz.

Las siguientes imágenes te dan una idea de cómo se ven los wireframes de varias pantallas y cómo se complementan con anotaciones para que sean más fáciles de entender.

:warning: No olvides que nuestra aplicación hace peticiones a un servidor. Tu diseño debe tener en cuenta que estas peticiones pueden fallar o tener latencias. ¡Incluye elementos para manejar estas situaciones!

Flujos de trabajo: la parte dinámica 🚦

La parte dinámica de tu diseño muestra cómo interactúa la persona usuaria con la interfaz para completar las tareas de la aplicación.

De nuevo, aquí tampoco hay un estándar oficial. Encontrarás diagramas como user journey, user flow, task flow, state diagram, etc. La terminología varía, así que no te preocupes si ves nombres distintos.

Aquí tienes un ejemplo de un user journey que no implica software:

journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me

Para esta parte, puedes elegir el tipo de diagrama y las anotaciones que mejor se adapten a tu diseño. Además, deberás crear un diagrama de flujo usando el lenguaje mermaid. Aquí tienes un ejemplo, primero la descripción en el lenguaje mermaid:

flowchart TD
    A[Homepage] -->|Click Login| B(Login Modal)
    A -->|Click Sign up| C(Registration Page)
    C -->|Click back| A
    B -->|Enter valid username and password| D[Login Button]
    B -->|Enter incorrect details| B
    B -->|Close Modal| A
    D -->|Click Login| E[Logged in lobby]
    C -->|Enter valid details| F[Submit Button]
    C -->|Enter incorrect details| C
    F -->|Click Submit| E
    E --> G[Logout Button] -->|Click Logout| A

Y a continuación el diagrama resultante:

flowchart TD
    A[Homepage] -->|Click Login| B(Login Modal)
    A -->|Click Sign up| C(Registration Page)
    C -->|Click back| A
    B -->|Enter valid username and password| D[Login Button]
    B -->|Enter incorrect details| B
    B -->|Close Modal| A
    D -->|Click Login| E[Logged in lobby]
    C -->|Enter valid details| F[Submit Button]
    C -->|Enter incorrect details| C
    F -->|Click Submit| E
    E --> G[Logout Button] -->|Click Logout| A

Información adicional para tu diseño

No te olvides de complementar tu diseño con lo siguiente:

• Medida de la complejidad de la interfaz: Calcula esta complejidad como la complejidad ciclomática del diagrama de flujo.

• Casos de prueba de la interfaz: No es necesario que detalles los pasos de cada caso, pero decide en cada caso si es relevante hacerlo.

Esta parte puede ser un poco tediosa y no requiere un gran esfuerzo de razonamiento, pero es una excelente tarea para aprovechar las capacidades de la inteligencia artificial. Aquí tienes un ejemplo de cómo usar una IA generativa. Si decides usar una herramienta de IA, solo tienes que incluir en la documentación el nombre de la herramienta y los prompts que utilizaste.

---

Tarea 2: ¡A revisar los diseños de tus compañeros! 🧑‍💻

En esta segunda fase, revisarás los diseños que la plataforma del campus virtual te asignará automáticamente.

:warning: Como ya te comentamos, no podrás realizar esta tarea si no has entregado la primera a tiempo. ¡Recuérdalo!

Para que esta fase funcione de maravilla, hay una regla de oro que debes seguir sin excepción:

• Tus comentarios deben ser exclusivamente sugerencias para corregir y/o mejorar el diseño. No se permiten críticas negativas. ¡Sé constructivo y empático! 🤝

El objetivo es que tus aportaciones sean reales y concretas. Un simple "me gusta" o "todo está bien" no es suficiente. ¡Sé detallista y aporta valor a la revisión!