Crear prototipos de Rich Internet Applications en Visio

Escrito por Marc Sanmartí el 8 Jun 2007

Una de las tareas que habitualmente realizamos en todos los proyectos de rediseño es crear los wireframes de las páginas más significativas del nuevo sitio. Los wireframes son útiles porque permiten representar de forma poco costosa cómo será el sitio en el que se está trabajando, y simular su navegación.

Por ejemplo, si estuviéramos definiendo la parte pública de una entidad bancaria, crearíamos un wireframe para representar la página de inicio, otro wireframe para representar una página de segundo nivel, etc. y las uniríamos mediante enlaces. Sin embargo, cada vez es más habitual encontrar Rich Internet Aplications (RIA) en los sitios web. Por ejemplo Google finance permite consultar la evolución de los principales índices de bolsa, Genworth Financial posee una calculadora de cálculo de pensiones, etc.

Para representar estas aplicaciones la relación “1 página web equivale a 1 wireframe” ya no está tan clara. Frecuentemente es más importante mostrar cómo cambia su comportamiento en el tiempo en lugar de tener una imagen congelada.

Investigando por la red como afrontan este problema otras empresas, he llegado a un magnífico artículo de Bill Scott titulado “Storyboarding Rich Internet Applications with Visio”. En el nos cuenta cómo, utilizando capas y macros en Visio, es posible hacer prototipos este tipo de aplicaciones y nos ofrece una librería que ha desarrollado para este propósito. Al final del post también nos comenta que generar un video con su comportamiento en el tiempo puede ser útil para transmitir más claramente cómo es la interacción con la web, y sin la necesidad de recorrer al documento en Visio.

La verdad es que, aunque el artículo es estupendo, trabajar con macros y capas lo encuentro complicado. Así que he intentado recrear una funcionalidad RIA con la librería que utilizo habitualmente. La tarea que he escogido es la de borrar una nota asociada a una foto. A continuación muestro un video de cómo se realiza esta tarea en una conocida web.

Para ello, como comenta Bill Scott, he descompuesto la interacción en sus distintos elementos:

1. Situación inicial
2. Aparece el cursor
3. El cursor se sitúa sobre la foto
4. El cursor se sitúa sobre la nota
5. Se pulsa sobre la nota.
6. Se sitúa el cursor sobre el botón borrar
7. Se pulsa el botón borrar
8. Desaparece el mensaje “borrando nota”
9. Se sitúa el cursor sobre la foto nuevamente

Y he creado para cada uno de ellos un wireframe. Como los elementos de la situación inicial se repiten a lo largo de los 7 primeros eventos, he creado un fondo de pantalla con esta imagen:

Después, utilizando esta imagen como fondo he creado una hoja para cada uno de los primeros 7 eventos. Para que las imágenes fueran más fáciles de entender, he añadido un título y comentarios cuando lo he creído necesario.

Para las últimas dos situaciones he creado un fondo ligeramente diferente al anterior. En el pie de la foto se comenta que no hay notas asociadas a la foto.

Los wireframes que faltan son los siguientes:

Por último, para clarificar el proceso he creado un vídeo de la interacción, procurando que hubiera tiempo suficiente entre imagen e imagen para leer el comentario. El resultado ha sido el que aparece en el siguiente video (que ha perdido calidad al subirlo al YouTube):

Todavía no he tenido oportunidad de representar las RIA en un proyecto utilizando esta metodología, pero me parece útil. Si alguien tiene experiencia en ello o ve como se podría mejorar le agradecería que me lo comentara, para tenerlo presente cuando me encuentre en un caso real.

• Inicio
• Servicios
• Publicaciones
• Clientes
• Sobre Usolab
• Blog
• Contacto

El blog de Usolab está bajo una licencia de Creative Commons.

• Privacidad
• Información legal