# Prototipos

> Un prototipo es una simulación interactiva de un producto final que se utiliza para probar y validar conceptos de diseño antes de su desarrollo. A diferencia de los mockups (que son estáticos), los prototipos son "clicables" y permiten a los usuarios experimentar el flujo de una aplicación.

*Tags: ux, artefacto, proceso, junior, semisenior*

---


> [!info] Definición Rápida
> Un prototipo es una simulación interactiva de un producto final que se utiliza para probar y validar conceptos de diseño antes de su desarrollo. A diferencia de los mockups (que son estáticos), los prototipos son "clicables" y permiten a los usuarios experimentar el flujo de una aplicación.


## ¿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.

1.  **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".
2.  **Crea las pantallas:** Necesitas tener listos los [Wireframes](/artefactos/wireframes/) o [Mockups](/artefactos/mockups/) de todas las pantallas que forman parte de ese flujo.
3.  **Conecta los elementos (Hotspots):** En tu herramienta de diseño, selecciona un elemento que deba ser interactivo (ej. un botón "Comprar ahora").
4.  **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").
5.  **Repite el proceso:** Continúa conectando todos los elementos interactivos necesarios para completar el flujo.
6.  **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](https://www.figma.com/):** La más popular. Permite diseñar y prototipar en la misma herramienta de forma muy fluida.
    - **[ProtoPie](https://www.protopie.io/):** Para prototipos de muy alta fidelidad con lógica compleja, variables y acceso a sensores del dispositivo.
    - **[Marvel App](https://marvelapp.com/):** Una opción sencilla y rápida para crear prototipos a partir de imágenes o bocetos.
- **Artículos y Guías:**
    - **[Prototyping 101](https://www.nngroup.com/articles/prototyping-101/)** - Nielsen Norman Group
    - **[A Guide to Prototyping in UX Design](https://careerfoundry.com/en/blog/ux-design/prototyping-guide/)** - CareerFoundry

---

Source: https://www.fernandoux.com/es/wiki/artefactos/prototipos/