Algunas herramientas para el prototipado

Pizarra blanca y rotuladores

Si lo tenemos a mano resulta muy útil para dibujar sobre la marcha y aclarar conceptos e ideas. Con grupos de trabajo pequeños se pueden valorar rápidamente diferentes modelos de interacción, maquetas, etc. Por contra, requiere de cierto espacio físico y carece de las ventajas de los modelos "digitales".

Lápiz y papel

Es más manejable que la pizarra, su elaboración suele requerir poco esfuerzo obteniendo, como método de trabajo, muy buenas respuestas en las evaluaciones. Sigue siendo un formato "analógico" (no está digitalizado; no se puede enviar por correo sobre la marcha, hacer y deshacer, copiar y pegar…).

Herramientas de dibujo vectorial (Illustrator, Corel Draw, Freehand…)

Herramientas de dibujo basada en vectores. Rápido para dibujos sencillos, fácil de modificar, posibilidades de edición de texto, muchas formas y figuras predefinidas, flexible y exportable a otros formatos digitales.

HTML

Si se hace correctamente, en etapas tempranas del proyecto, se puede aprovechar parte del código para el producto final. Nos permite utilizar tantas características del código como deseemos; las páginas pueden enlazarse para crear la navegación, que las consultas a las posibles bases de datos sean funcionales (teniendo en cuenta la interacción, la validación de los datos, los mensajes de error, etc.), añadir estilos y la "capa gráfica" para lograr prototipos de alta definición… como desventajas; puede suponer mucho esfuerzo y tiempo que a lo mejor no se reutiliza, no suele ser un proceso rápido, tal vez requiera contar con mucho personal técnico: programadores, maquetadores, diseñadores… en ocasiones, la versión en pantalla no se puede pasar fácilmente a un formato de papel.

Herramientas de diseño y retoque fotográfico (Photoshop y similares)

Muy interesantes para valorar propuestas, bocetos de diseño y, en general, el aspecto gráfico del prototipo (colores y "sabores"). Es útil para realizar versiones estéticamente elaboradas y visualmente ricas. No es aconsejable para recrear la interacción puesto que la modificación es más costosa que con las herramientas de dibujo vectorial.

Herramientas para dibujar gráficos y diagramas de flujo (Microsoft Visio y OmniGraffle)

Son herramientas similares (Visio es algo más completo) pero una para la plataforma Windows y la otra para MacOS respectivamente. Ofrecen múltiples plantillas y formas específicos para el prototipado, muchos de ellos configurables y editables por el propio usuario. Son muy flexibles y fáciles de modificar, además, permiten añadir información útil a los diagramas, explicando la interacción, el flujo de datos, etc. Es posible añadir vínculos para simular la navegación entre pantallas, aunque, tal vez, para estos casos es mejor recurrir a prototipos en HTML.

Herramientas para presentaciones (Microsoft PowerPoint, Apple Keynote…)

Su uso fundamental no es el del prototipado, no obstante, permiten crear presentaciones con diapositivas que pueden simular diferentes situaciones, estados de la aplicación o interacciones. Las formas y figuras que incluyen son mucho más limitadas que las de Visio y OmniGraffle. Se pueden editar rápidamente y no necesitan demasiados conocimientos técnicos para su uso. Puede ser bastante tedioso para páginas complicadas (y largas) que no pueden mostrarse con una simple pantalla.

Herramientas específicas para el prototipado

Me gustaría destacar Axure y Denim. La primera es una aplicación comercial, específica para crear prototipos HTML y wireframes con cierta funcionalidad y con la capacidad para ser comentados (vean un ejemplo). Por su parte, Denim, es un curioso proyecto, multiplataforma y gratuito, de la Universidad de Washington. Como lo definen sus autores: "una herramienta informal para sitios Web y diseño de la interfaz de usuario en las etapas tempranas". Puede resultar interesante para hacer un prototipo rápido (a mano alzada sobre una tableta gráfica o similar) y añadirle "navegabilidad". Su uso es un poco enrevesado al principio, no obstante, no deja de ser un concepto muy curioso.

Pueden encontrar más información en Diagramming Tools (30 de diciembre de 2008: lástima, desde noviembre de 2007 parece que la página ha dejado de existir).

Actualización del 5 de ocubre de 2007: Adobe Labs está desarrollando una aplicación con el nombre en clave de Thermo (ahora Adobe Flash Catalyst), según su descripción, es un producto que facilitará a los diseñadores crear interfaces RIA que se pueden poner rápidamente en producción y desarrollo.

Actualización del 18 de diciembre de 2007: en la lista Cadius hacen algunas aportaciones interesantes:

• Simunication
• CanonSketch (para Mac)
• TaskSketch (para Mac). También existe un clon, en desarrrollo, para Windows: WINSketch
• Jumpchart
• GUI Design Studio
• Prototype Composer
• iRise Studio
• Kivio (para Linux)

Actualización del 26 de diciembre de 2007: La diagramación en la arquitectura de información, excelente artículo de Rodrigo Ronda León.

Actualización del 5 de marzo de 2008: Sergio Sánchez Mancha (Usolab) realiza una buena recopilación de enlaces sobre prototipos de papel.

Actualización del 2 de junio de 2008: el diseñador web Christian Watson nos habla de más herramientas en A Better Way to Create Information Architectures, Wireframes and Prototypes.

Actualización del 22 de julio de 2008: Olga Carreras explica con detalle qué son los wireframes.

Actualización del 31 de octubre de 2008: Prototyping with XHTML.

Actualización del 9 de marzo de 2009: Herramientas online para hacer prototipos.

Actualización del 1 de septiembre de 2009: Cameron Chapman publica en Smashing Magazine 35 Excellent Wireframing Resources.

Actualización del 27 de enero de 2010: otra completa recopilación en Gui Prototyping Tools.

El ejecutable, aún en desarrollo, pesa algo más de 15 Mb., se denomina Swift y presenta una aplicación con las opciones básicas de navegación.

Lo cierto es que, tras probarlo brevemente, no veo las páginas igual que en el Safari de mi Mac, supongo que será cuestión de revisarlo más a fondo, no obstante, ahí queda por si quieren experimentar.

Actualización: al parecer, Philippe Wittenbergh comenta en la lista de Web Standards Group, una posible causa de estas diferencias:

"el código del WebKit es mucho más reciente que el que utiliza Apple para las versiones finales de Safari; algunos errores están corregidos, aparecen otros nuevos…"

En cualquier caso, tampoco se aclara qué versión del WebKit utiliza la aplicación Swift, ni su correspondencia con el navegador de Apple. Habrá que seguir investigando.

Actualización del 27 de junio de 2007: sólo era cuestión de tiempo el que Apple sacara Safari para Windows, como ya hizo en su momento con QuickTime, así pues, la aplicación Get Swift! ya no tiene mucho sentido y parece que sus creadores han abandonado su desarrollo.