Cómo hacer prototipos interactivos
Si nos atenemos a una definición formal de qué son los prototipos, “la representación mediante diagramas de la estructura, el funcionamiento y el comportamiento de objetos o procesos” (NoSoloUsabilidad), nos encontramos con que la mayoría de las veces no se cumple más que la representación de la estructura, olvidándonos del funcionamiento y del comportamiento.
Este “olvido”, normalmente, se debe principalmente a dos motivos, el primero suele ser causado por el propio diseñador (entenderemos diseñador por la persona encargada de la generación de wireframes) habituado a representar únicamente la estructura. El segundo motivo sería más propio del medio, el papel, en el que se presentan los entregables, ya que resulta complejo representar interacción en algo plano y estático.
¿Qué podemos hacer para representar el funcionamiento y el comportamiento?
Vamos a tratar de dar un poco de luz y unas pequeñas pautas que pueden servirnos en nuestro día a día, aunque la mejor solución siempre es la imaginación de cada uno.
Solución 1: Usar patrones
Un patrón es un modelo que sirve de muestra para sacar otra cosa igual (RAE). Un patrón siempre, o casi siempre, mantiene el mismo funcionamiento y comportamiento, y puede servirnos para entender de manera general qué interacción va a haber con el usuario.
Aunque no representará de manera específica y formal el funcionamiento exacto en un caso concreto, puede ser una guía útil, un punto de partida.
Podemos encontrar patrones en:
- UI Patterns: con definición del problema que resuelve y cuándo usarlos.
- Welie patterns: igual pero con muchos más patrones, más completo.
- MockupsToGo (patrones para la herramienta Balsamiq Mockups)
- Wiki Designing Social Interfaces: Wiki con patrones de interfaces Sociales
Solución 2: Representar la interacción
A través de:
- Iconos gestuales o que representen acción (flecha ratón, doble click, mouseover,…)
- Símbolos: números, anotaciones,comentarios
- Transiciones: Cambios de estado, flujo de interacción
¿Cómo? Con stencils
- Touchscreen Stencils: representan gestos táctiles
- Konigi Stencils: contienen muchos iconos de anotaciones
Solución 3: Crear prototipos interactivos
Los prototipos interactivos están entre un prototipo plano en papel y una maqueta dinámica en HTML y, a veces, pueden generarse desde prototipos planos sin mucho esfuerzo por parte del diseñador y cuentan con la ventaja de que pueden usarse como entregables.
Por ejemplo, para Microsoft Visio tenemos VisDynamica, un addon que nos genera páginas web interactivas desde nuestro prototipo. Y también contamos con la posibilidad de generar PDF’s dinamicos desde la propia herramienta.
También podemos crear un prototipo interactivo con PowerPoint 2007 y un toolkit, o incluso desde Excel. Aunque ambos estén quizás más enfocados a realizar test de usuarios sobre prototipos de manera ágil que a terminar como entregables para el cliente.
Otras soluciones
Existen otras soluciones para representar e incluso crear la interacción en nuestros prototipos, como puede ser el prototipado en papel, pero se trataba con este artículo de intentar representar la interacción en nuestros entregables, y a según que clientes parece dificil entregarles un boceto hecho con boli y post-its.
A parte de todo lo ya dicho, siempre nos queda nuestra propia imaginación : )
¿Quieres leer más? Esto seguro que te interesará
Tags: arquitectura de información, entregables, interaccion, prototipado, Usabilidad y Arquitectura de la información







[...] de publicar en el blog de UX de Bikolabs un post sobre cómo representar la interacción en prototipos entregables. Esta basado en una pequeña charla que di en la última reunión del equipo de [...]
¿Has probado la herramienta http://www.bubbl.us para diagramas de navegación? Al principio es un poco extraña de manejo, pero cuando te acostumbras, está bastante bien. La vamos a usar en una de mis clases…