Prototipos

¿Qué son los Prototipos?

Si un mockup es la maqueta a color de una casa, un prototipo es una visita guiada virtual por esa maqueta. Permite abrir puertas, encender luces y moverse entre habitaciones para entender cómo se siente vivir en ella.

Un prototipo simula la interacción del usuario con la interfaz. Su fidelidad puede variar enormemente:

Prototipo de baja fidelidad (en papel): Puede ser tan simple como una serie de bocetos en papel que un “computador humano” va cambiando a medida que el usuario “hace clic” en los botones dibujados.
Prototipo de media fidelidad (clicable): Generalmente se crea a partir de wireframes digitales, conectando las pantallas para simular la navegación básica.
Prototipo de alta fidelidad (interactivo): Creado a partir de mockups, este tipo de prototipo se ve y se siente muy similar al producto final, incluyendo transiciones, animaciones y microinteracciones.

¿Por qué son importantes?

Validan el diseño con usuarios reales: Son la herramienta principal para las [[Pruebas de Usabilidad]]. Permiten observar cómo los usuarios interactúan con el diseño antes de escribir una sola línea de código.
Ahorran costos de desarrollo: Descubrir que un flujo es confuso en la fase de prototipado es 100 veces más barato de arreglar que cuando el producto ya está programado.
Mejoran la comunicación: Un prototipo interactivo comunica una idea de diseño de forma mucho más clara y efectiva que un documento estático. Permite a los stakeholders “sentir” la experiencia.
Permiten iterar rápidamente: Se pueden crear y modificar en cuestión de horas o días, lo que facilita la exploración de múltiples soluciones de diseño.

¿Cómo se hacen?

El proceso casi siempre se realiza en herramientas de diseño como Figma, Sketch o Adobe XD.

Define el alcance: ¿Qué quieres probar con este prototipo? No es necesario hacerlo interactivo todo. Enfócate en el flujo de usuario clave que necesitas validar. Ejemplo: “Probar el proceso de checkout desde el carrito hasta la confirmación de compra”.
Crea las pantallas: Necesitas tener listos los Wireframes o Mockups de todas las pantallas que forman parte de ese flujo.
Conecta los elementos (Hotspots): En tu herramienta de diseño, selecciona un elemento que deba ser interactivo (ej. un botón “Comprar ahora”).
Define la interacción y el destino: Arrastra un conector desde ese elemento hasta la pantalla de destino. Define el tipo de interacción (ej. “Al hacer clic”) y la transición (ej. “Instantáneo”, “Deslizar hacia la izquierda”).
Repite el proceso: Continúa conectando todos los elementos interactivos necesarios para completar el flujo.
Prueba el prototipo: Antes de mostrarlo a nadie, haz clic en él tú mismo para asegurarte de que todas las conexiones funcionan como esperas.

Consejos de Mentor

Prototipa con un propósito: Siempre ten claro qué pregunta de investigación quieres responder con tu prototipo. Esto te ayudará a no perder tiempo haciendo interactivo todo el diseño.
La fidelidad adecuada para el momento adecuado: Usa prototipos de baja fidelidad en las primeras etapas para validar conceptos amplios. Usa los de alta fidelidad más tarde para probar detalles de la interfaz y la usabilidad.
No busques la perfección: Un prototipo no es el producto final. Está bien si algunas cosas no funcionan o si hay callejones sin salida, siempre y cuando puedas probar lo que necesitas.
Guía al usuario, pero no demasiado: Durante una prueba, si el usuario se atasca, puedes decirle “Imagina que esta parte funciona y te lleva aquí”. El objetivo es obtener feedback sobre el flujo principal.

Recursos y Herramientas

Herramientas de Prototipado:
- Figma: La más popular. Permite diseñar y prototipar en la misma herramienta de forma muy fluida.
- ProtoPie: Para prototipos de muy alta fidelidad con lógica compleja, variables y acceso a sensores del dispositivo.
- Marvel App: Una opción sencilla y rápida para crear prototipos a partir de imágenes o bocetos.
Artículos y Guías:
- Prototyping 101 - Nielsen Norman Group
- A Guide to Prototyping in UX Design - CareerFoundry