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 : )
wila dice:
¿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… 😉