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.