Saltar navegación
Contacto: (+34) 670 230 483

Usted está en: Inicio > Blog > Crear prototipos de Rich Internet Applications en Visio

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:

Imagen de fondo de los wireframes

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.

Imágen con los wireframes de los 7 primeros pasos de la interacción

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:

Imágen con los wireframes de los 2 últimos pasos de la interacción

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.



Comentarios (2)

carmencarmen dijo el 5 Jul 2007:

Por si te interesa este programa está muy muy muy bien: Axure

Peldi GuilizzoniPeldi Guilizzoni dijo el 23 Jul 2008:

Hi there. I wonder if you might be interested in a little wireframing tool I built? It's called Balsamiq Mockups: http://www.balsamiq.com/products/mockups/ - let me know if you'd like a license to evaluate it properly!



Últimos tweets de Usolab

  • Ups, parece que ahora mismo no podemos mostrar nuestros tweets.

Proyectos propios

Bankimia

Bankimia es un comparador de productos financieros.

Actualmente ofrece información sobre hipotecas, depósitos bancarios, cuentas y préstamos de 42 bancos y cajas.