Asignatura: Prototipado R4

Autor: Eduardo Simal Carretero

Enlace al prototipo interactivo: https://www.figma.com/proto/7GmWx69GdO9vsFpAbDhlcS/Prototipado-R4?node-id=4006-94&t=clOfzIJHNqhCY10K-1

1. Introducción y estrategia de diseño

Este último reto de la asignatura marca la culminación del proceso de diseño interactivo, evolucionando los wireframes del Reto 2 hacia un diseño viable de alta fidelidad. El objetivo principal ha sido replicar con exactitud los flujos de la web de Eventbrite en una experiencia realista y funcional, aplicando de forma estricta un UI Kit sistémico (colores de marca, tipografías, espaciados estructurados e iconografía) para evaluar y validar no solo la usabilidad, sino también el comportamiento ergonómico y la respuesta emocional de la persona usuarioa en un contexto real.

Estrategia de implementación

Para realizar el salto de baja a alta fidelidad, se optó por una estrategia de transposición directa y extensión de componentes. En lugar de diseñar las pantallas desde cero, se duplicó el el prototipo de baja fidelidad del Reto 2 y se sustituyeron los contenedores genéricos por instancias del UI Kit. Durante este proceso, el flujo se extendió mediante componentes avanzados (variantes y estados) y contenedores estructurados con Auto Layout, garantizando una respuesta predecible frente al crecimiento del contenido.

2. Planificación del Test de usabilidad e integración de IA

Un diseño interactivo solo es válido si se somete al juicio de posibles pèrsonas usuarias. Para este reto, se planteó un test de con 3 posibles personas usuarias reales utilizando dispositivos móviles nativos y aplicando la técnica de Think Aloud.

El guion del Test

A las personas participantes se las situó en una situación contextualizada: «Es fin de semana en Barcelona y buscas un plan cultural o gastronómico distinto» y se les asignaron dos tareas:

• Tarea 1 – Exploración: Encontrar y acceder a las categorías inferiores del menú (específicamente la negocios y comida y bebida.

• Tarea 2 – Búsqueda: Activar la barra de búsqueda general de la aplicación para localizar un evento específico.

El rol de la IA

La IA actuó como un asistente analítico y metodológico en dos fases clave:

1. Antes del test: Se utilizó para generar perfiles de posibles personas usuarias para el briefing

2. Después del test: Se volcaron las notas en bruto y las transcripciones de las sesiones de Think Aloud. La IA automatizó el procesamiento de datos, ayudando a agrupar los comentarios por patrones de afinidad y facilitando la síntesis de fricciones de forma ágil y objetiva.

3. Perfiles de persona usuaria

Para mapear correctamente el feedback del test, se definieron tres perfiles de posibles personas usuarias diferenciados que representan el espectro de la audiencia objetivo:

• Lucas (24 años – nativo digital): Usuario proactivo e impaciente. Utiliza el móvil de forma intuitiva y veloz. Busca inmediatez y penaliza las interfaces lentas o las transiciones redundantes.

• Marta (38 años – organizadora cultural): Usuaria promedio y metódica. Valora la optimización de su tiempo de trabajo. Necesita jerarquías visuales claras y una navegación segmentada por categorías claras.

• Sofía (52 años – no tecnológica): Usuaria cautelosa y sensible a los cambios bruscos en la interfaz. Necesita que la interfaz sea lógica y predecible, buen contraste visual y transiciones que mantengan el foco.

4. Resultados del Test, fricciones e iteración de diseño

El testeo desveló que ciertos elementos que parecían resueltos en el lienzo estático generaban fricción al interactuar en un entorno real. A continuación, se detallan las fricciones individuales detectadas y la propuesta de rediseño para solucionarlas:

Fricciones e iteraciones UX

5. Presentación del proyecto

En el siguiente vídeo con voz en off, se defiende la calidad de la solución final, mostrando el flujo de alta fidelidad en funcionamiento y justificando las decisiones de diseño basadas en los hallazgos del test de usabilidad.

6. Reflexión final y autoevaluación

El contraste de niveles de fidelidad: ventajas e inconvenientes

A lo largo de la asignatura, el paso por las microinteracciones, los UI Kits y los diferentes niveles de fidelidad ha transformado mi perspectiva como estudiante de diseño UX. Cada nivel de fidelidad cumple una función estratégica clara, con balances específicos de coste, tiempo (muy especialmente) y objetivos:

• Baja fidelidad (wireframes): Su mayor ventaja es la agilidad y el mínimo coste temporal, en comparación con la alta fidelidad. Permite centrar el desarrollo del diseño exclusivamente en la arquitectura de la información y la jerarquía de contenidos, eliminando retrasos relacionados con colores o tipografías. Su gran inconveniente es la abstracción; no permite validar la carga cognitiva real, el rendimiento de las animaciones o la ergonomía en un dispositivo físico.

• Alta fidelidad (prototipos animados): Su ventaja radica en el realismo total. Permite simular un producto final idéntico al desarrollo de la interfaz, lo que resulta imprescindible para testar la usabilidad real, descubrir problemas de diseño y evaluar microinteracciones (como el comportamiento de un scroll o el efecto de empuje de un menú). Su principal contrapartida es el alto coste de producción; realizar cambios estructurales en esta fase exige una inversión sustancial de tiempo, ya que requiere actualizar componentes, variantes y conexiones lógicas en el prototipo.

Introducción

En este reto he analizado distintos objetos cotidianos desde la perspectiva de la experiencia de usuario y los principios de diseño de Don Norman. El objetivo ha sido identificar problemas relacionados con las brechas de ejecución y evaluación, así como analizar cómo la disposición espacial de los controles puede facilitar o dificultar la comprensión de un sistema.

Para ello, he trabajado sobre dos casos: una vitrocerámica táctil moderna y una vitrocerámica con controles físicos cuya distribución resulta poco intuitiva.

Caso 1 — Brechas de ejecución y evaluación en una vitrocerámica táctil

En este primer caso analizo una vitrocerámica táctil moderna donde la interacción resulta poco intuitiva debido a la falta de claridad visual, el exceso de símbolos y la dificultad para relacionar cada control con su función correspondiente.

El análisis se centra en conceptos como affordance, feedback, modelo mental y brechas de ejecución y evaluación. También se incluye una propuesta de rediseño orientada a mejorar la claridad visual y reducir la carga cognitiva del usuario.

Modelo de vitrocerámica analizado

Propuesta de rediseño

Caso 2 — Topografía (Mapping) en una vitrocerámica con controles físicos

El segundo caso se centra en la relación espacial entre los controles y los elementos controlados. Aunque la vitrocerámica utiliza controles físicos tradicionales, la distribución de los mandos no refleja de forma natural la posición real de los fuegos.

Esto obliga al usuario a interpretar el sistema antes de interactuar con él. Por este motivo, se plantea una comparación visual entre la distribución actual y una propuesta de reorganización basada en un mapping más directo e intuitivo.

Distribución original de los controles

Propuesta de mejora

Enlace al proyecto en Figma

Puedes consultar el archivo completo del proyecto en el siguiente enlace:

Ver proyecto en Figma

Conclusión

Este reto me ha ayudado a desarrollar una mirada más crítica sobre objetos cotidianos que normalmente utilizamos de forma automática. Analizar estos casos desde la perspectiva de la experiencia de usuario me ha permitido entender mejor la importancia del feedback, el mapping y los modelos mentales en la creación de productos intuitivos.

También he comprobado cómo muchas interfaces aparentemente modernas o minimalistas pueden generar dificultades de uso cuando no comunican correctamente su funcionamiento al usuario.

Esta es mi entrega de la práctica 3.

https://www.figma.com/design/bS1ATjgX4AArmFdUE32D4r/R2_Eventbriet_Elena?node-id=253-12&t=C1soH1SxFnL10Hep-1

A través de este enlace se podrá acceder a figma

Buenos dias compañeros,

A continuación os quiero mostrar todo mi trabajo para este primer reto de la asignatura.

Para poder hacer este proyecto, he comenzado el proceso creando el UI Kit, definiendo primero los estilos de tipografía y la paleta de colores que iba a utilizar para replicar la interfaz de Eventbrite de la forma más fiel posible. A continuación, he ido construyendo los distintos componentes a partir de elementos más pequeños, como los iconos y sus diferentes estados, para hacer que el prototipo fuera interactivo y mantuviera una lógica consistente. Finalmente, he creado aquellos elementos más grandes que se repetían a lo largo de toda la experiencia, como las tarjetas de eventos, la barra de búsqueda o los distintos filtros. Trabajar de esta manera me ha permitido estructurar después toda la información dentro del prototipo de forma más rápida, ordenada y eficaz.

A continuación os adjunto el link para que podáis acceder a mi proyecto y un vídeo en el que muestro el flujo principal que he recreado.

El meu projecte: https://www.figma.com/design/VdvBEOrmvpO36JoPBzmpYN/R1-Prototipat?node-id=7-4&t=PvBd7zpa93Ti48fD-1