M4.356 - Prototipado - Aula 2

Pública

Reto 4: Evolución del Prototipado de Alta Fidelidad y Evaluación de Usabilidad

1. Introducción y enfoque del Reto 4

Este artículo recoge el proceso de transición desde la estructura conceptual del Reto 2 hacia un prototipo interactivo de alta fidelidad. El objetivo principal ha sido materializar las decisiones previas en una solución visual y funcionalmente realista, validando su eficacia mediante una evaluación con usuarios reales.

2. Proceso de Construcción sistémica y desafíos técnicos

La fase de diseño visual comenzó con una exploración mediante Figma Make, una herramienta de IA que utilicé como catalizador en la fase inicial del Espacio de la Solución. El propósito fue visualizar la viabilidad estética de mis ideas iniciales sin la necesidad de dibujar cada elemento desde cero, optimizando los tiempos de conceptualización.

De la Automatización al Control del UI Kit

Una vez establecida la dirección visual, el verdadero valor metodológico residió en la construcción del UI Kit propio. La maquetación de pantallas resultó ágil y eficiente gracias a la aplicación estricta de Auto-layout y la creación de variantes de componentes. Sin embargo, la sofisticación del prototipo desveló importantes retos interactivos:

• Simulación de campos de texto: reutilizar componentes para recrear funciones complejas (como simular que el usuario está escribiendo) requirió una lógica de estados avanzada.

• Gestión de Superposiciones (Overlays): elementos dinámicos como la selección de horarios generaron conflictos en el motor de renderizado de Figma, solapando capas de texto (Time vs. Horarios). Se iteró la solución mediante microinteracciones (Hover para limpiar texto y Click para desplegar horarios), un parche técnico que evidenció las limitaciones de las herramientas de prototipado frente al desarrollo real. Esta fue una de las mayores fricciones destacadas en los test de guerrilla

• Higiene y nomenclatura del archivo: Descubrí de manera empírica que el motor de Smart Animate de Figma penaliza el desorden. Modificar el nombre de las capas de texto de forma inconsistente provocaba comportamientos erráticos. La pulcritud y el orden metódico en la jerarquía de capas se revelaron como un requisito indispensable para la fidelidad de la experiencia. Figma me obligó a volverme mucho más ordenada.

• La dependencia de componentes de la Comunidad:  Te ahorra mucho tiempo apoyarte en recursos ya creados por la comunidad pero en mi caso también me llevó mucho tiempo poder utilizarlos de manera útil. Al no haber sido creado desde cero, carecía de la flexibilidad necesaria para incrustar interacciones críticas (como la selección dinámica del día). Esto limitó la libertad del diseño interactivo y demostró que en elementos nucleares de la UX, la artesanía propia supera a la conveniencia de terceros. Al final conseguí que al hacer click se seleccionara el día pero si volvemos a hacer click no se deseleccionaba.

3. Fase de Evaluación: Test de Guerrilla e Iteración

Para evaluar la solución, ejecuté un test de guerrilla empleando la técnica de Pensamiento Manifiesto (Think Aloud). Sin embargo, el análisis retrospectivo revela un sesgo metodológico en el timing: la prueba se introdujo de manera prematura.

Reflexión Crítica (Sesgo de Fidelidad): Siguiendo los principios de Travis & Hodgson, «el usuario no piensa como nosotros». Al presentar un prototipo que aún arrastraba «gazapos» interactivos y visuales, la atención y la carga cognitiva de los participantes se desvió hacia la detección de errores de la interfaz (QA) en lugar de evaluar el flujo de navegación, la arquitectura de la información o la usabilidad del servicio. Los hallazgos se contaminaron por el acabado técnico.

A pesar de este ruido, la identificación de estas fricciones permitió realizar una iteración de limpieza para corregir inconsistencias y asegurar que la versión final del prototipo mitigara estos puntos de dolor técnicos antes de su entrega definitiva. Así que una vez hecho el primer test, corregí muchos errores y lancé el segundo con mucho más éxito que el anterior.

4. Declaración de Uso de Inteligencia Artificial (IA)

En cumplimiento con los criterios de integridad académica de la Universitat Oberta de Catalunya (UOC), se detalla el uso ético y complementario de herramientas de IA generativa durante este reto:

1. Figma Make (Generativa Visual): Utilizada en la fase de ideación temprana para generar pantallas de referencia rápidas y testear la paleta visual e ideas macro de distribución de componentes. Las estructuras resultantes no se copiaron directamente, sino que sirvieron de base de inspiración para la creación del UI Kit normativo posterior.

2. Gemini:  Se emplearon herramientas de IA conversacional mediante prompts específicos orientados a:

   • Prompting de estructuración: Solicitar la ordenación y síntesis de las notas en bruto tomadas durante los test de guerrilla.

   • Filtrado: Ayudar a categorizar los comentarios de los usuarios entre «errores técnicos del prototipo» y «problemas reales de usabilidad».

   • Revisión: Todas las sugerencias de la IA fueron editadas críticamente, contrastadas con los objetivos del proyecto y adaptadas para asegurar que reflejaran fielmente mi proceso de aprendizaje humano y la realidad de los datos cualitativos obtenidos.

5. Entregables

• Enlace al Prototipo Interactivo en Figma

• Enlace al vídeo