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:

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

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: , , , ,

Comentarios: 2

Dejar un comentario »

 
  • [...] 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 [...]

     
     
     
  • wila

    ¿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… ;-)

     
     
     
  • Dejar un comentario
     
    Your gravatar
    Tu nombre