Herramientas para la Arquitectura de Información

Sabias palabras las de Txuma :)

Yo, a todo esto, hago mis pinitos con Powerpoint (es que con Paint no puedo tener capas). Jejeje

¿Y qué me dices del curso ese de HTML 5?
;)

Tras terminar el curso de HTML5 de FrontDays nos hemos quedado charlando y hemos comentado este tema. Cada uno utiliza herramientas muy diversas, pero al final hemos llegado a una conclusión 'a la gallega': Todo depende.

Hay proyectos en los que unos wireframes básicos pintados con cualquier herramienta son suficientes (donde pone 'herramienta' se incluye también papel y boli). Hay otros que por su nivel de interacción necesitan ir un poco más allá. Para esos nos puede servir el software específico para prototipar: Omnigraffle, Axure, Balsamiq, etc. etc. Y hay otros en los que es necesario tocar algo muy cercano al nivel de interacción final. Para esos sí nos parece adecuado preparar prototipos en HTML.

Ea!

Esa era mi herramienta favorita hasta que conocí Axure (sin presionar :)).

Otro pero:
Aunque el fin del prototipo es mostrar interacción y elementos de interfaz, y no ser el producto final (así que es un pero a medias) el resultado de Axure no es reutilizable, como una maqueta en HTML o un prototipo hecho en Fireworks que de lo-fi a hi-fi y a línea gráfica... puede evolucionar.

Casi me habéis convencido... los próximos prototipos en Fireworks (como siempre) :P

Fallo en Matrix, procedemos a repararlo

Yo tendría que resucitar mi neurona prototipadora, pero hasta donde me quedé, creo que HTML y JS es complicado, y Visio limitado e ¡incómodo!

Para mí, la mejor es Axure, y lo digo por (sin comisiones) la intuitividad y la comodidad en el manejo de la herramienta (se aprende en un pis pas y permite colocar, ordenar, alinear y cambiar cómodamente), y por las funcionalidades que tiene, ya que permite:

• Incluir interacción bastante compleja, sin ser HTML
  
• Ver exactamente cómo va a quedar en la pantalla, sin ser una herramienta de diseño -nada de Visio con sus tipografías y líneas suavizadas
  
• Crear patrones de elementos y exportarlas e importarlas para usar en todos los documentos
  
• Incluir anotaciones y exportar a Word, como documento de definición de interacción
  
• Exportar a HTML con interacción, como maqueta interactiva
  

Los peros:

• Los documentos en el formato de Axure, .rp, pesan mucho
  
• No es un formato tan extendido como Visio, que casi todo el mundo puede verlo
  

<al margen: ¿por que las listas salen con este formato de texto grande?>

Yo me apunto a Omnigraffle (y Visio en PC, mal que me pese). Con algunos stencils apañados el resultado es claro y rápido.

En cuanto a que no se aprovecha nada... es fácil crearse unas plantillas con la retícula adecuada y en píxeles, con lo que el prototipo sirve de base para el diseñador (importándola a photoshop o illustrator) como para el maquetador, que ya tiene los tamaños exactos para ir montando la estructura en el CSS.

Es cierto que todo depende del nivel de interacción al que quieras llegar, pero en mi opinión los test de usuario forman parte de un segundo nivel que va más allá del prototipado y requiere cierta funcionalidad. Ahí si tiene sentido hacer un prototipo en HTML pero puede ser la auténtica base de la web, no le veo sentido a que sea de usar y tirar.

Pues ya contarás qué tal, y si eso nos hacemos una sesión conjunta de descubrimiento de Omnigrffle vs otras herramientas, a ver qué sale ...

Pues no lo tengo muy claro, posiblemente por desconocimiento de la herramienta (nunca he conseguido acostumbrarme a omnigraffle).

Es que yo pienso que HTML+CSS+JS no es un esfuerzo tan notable. Con las herramientas adecuadas (las que comentaba antes: Nanoc + Blueprint + Ixedit) tengo la sensación de que puedes hacer prototipos de forma muy rápida. Pero ojo, que esto es una impresión; lo mismo me pongo a probarlo y efectivamente descubro que es matar moscas a cañonazos.

Txuma ¿no crees que con las bibliotecas de componentes y lo fácil que es añadir navegaciones/interacciones a una presentación de onmigraffle con eso sería suficiente? Es que lo de HTML+CSS+JS para prototipar siempre me ha parecido un esfuerzo bastante notable.

(me he hecho la picha un lío con los quotes, así que lo he resuelto en plan chapucero a manubrio)

------------------------------------------------------------------
DamagedGoods dijo: En general, la elaboración de prototipos más avanzados como el que comentas (HTML, comportamiento dinámico) a nosotros se nos va de costes.
------------------------------------------------------------------

Eso es fundamental, por eso comentaba que lo primero es probar y evaluar el coste/beneficio.

------------------------------------------------------------------
DamagedGoods dijo: Cuanto más fiel sea el prototipo al funcionamiento y aspecto final, más va a creer el cliente que ES el producto final y menos va a aceptar errores en el mismo.
------------------------------------------------------------------

Es que yo creo que en cierto modo por ahí van los tiros. No es el producto final a nivel gráfico, pero sí trata de acercarse al producto final a nivel funcional. Pensad por ejemplo en una app. web (x ej. una red social). Tener la funcionalidad desarrollada nos permitiría hacer test con usuarios antes de iniciar la fase de producción

------------------------------------------------------------------
DamagedGoods dijo: Si maquetas "rápido y mal" y metes el JS con IxEdit, es un esfuerzo no aprovechable: vas a tener que repetirlo casi todo.
------------------------------------------------------------------

Tampoco de los wireframes 'gráficos' se aprovecha nada para la fase de producción :). Insisto: depende del proyecto y del coste/beneficio en cada caso.

En el fondo, detrás de esta idea se esconde la sospecha de que se pueden hacer prototipos en HTML tan rápido como con una herramienta gráfica (siempre bajo la premisa de que queremos que muestren cómo va a ser la interacción del usuario; no me vale esto para una web pequeña en la que los wireframes muestran "aquí va la foto, aquí el menú, aquí el texto" y poco más). Si tardamos lo mismo, o incluso un poco más, yo creo que puede tener muchos beneficios hacerlos en HTML. Ya os iré contando.

salu2();

Me parece que tiene muchas posibilidades, Txuma, pero nosotros por lo general no hacemos prototipos "duros". Por lo general buscamos validación sobre los wireframes, donde detallamos las interacciones y despliegues de capas pero sin llegar a implementarlos.

En general, la elaboración de prototipos más avanzados como el que comentas (HTML, comportamiento dinámico) a nosotros se nos va de costes. Hay que tener en cuena además dos cosas:
- Cuanto más fiel sea el prototipo al funcionamiento y aspecto final, más va a creer el cliente que ES el producto final y menos va a aceptar errores en el mismo.
- Si maquetas "rápido y mal" y metes el JS con IxEdit, es un esfuerzo no aprovechable: vas a tener que repetirlo casi todo.

Por supuesto, depende del cliente. Hay algunos que son incapaces de entender los wireframes, por lo que es necesario ir hacia un prototipo más fiel. Pero intentaría validar todo lo posible sobre soportes menos costosos de elaborar y modificar.

Resucito el post

Llevo algunos días dándole vueltas a la mejor metodología para preparar prototipos. Hay muchas herramientas en el mercado (están saliendo como setas), pero ninguna acaba de convencerme del todo.

Me parece que depende mucho de la complejidad del proyecto. En los más simples posiblemente con una herramienta de edición gráfica sea suficiente (illustrator, fireworks, omnigraffle, wadus, wadus...). La chicha viene cuando ya estamos hablando de algo más complejo, con un grado de interacción mucho mayor. Para estos casos creo que voy a levantar una lanza en favor del HTML: prototipos que integren una funcionalidad cercana a la final (ojo, hablamos de dummies, no de una maquetación hecha con todo mimo y detalle).

Así que os resumo el modus operandi que quiero probar en los próximos días:

Fase de prototipado 'blando'
* Primero, lapices y papel (en concreto estos papeles). Es una fase casi más personal, para plasmar ideas: layouts, módulos de la aplicación, etc. Yo soy de los que piensa mejor con un papel y un boli.
* Si tenemos que presentar esos wireframes a un cliente, cualquier herramienta gráfica que permita ponerlos un poco más decentes (en alguna ocasión he llegado a presentar un taco de folios con pintarrajos a boli.... ¡¡¡ y les gustaron mucho !!!)

Fase de prototipado 'duro' (prototipos con funcionalidad)
Es aquí donde entran en juego los prototipos en HTML. Para hacerlo lo más rápido posible, yo me planteo hacerlo con los siguiente elementos:
* Nanoc para todo lo que es la creación de páginas
* Una colección de snippets para los elementos más comunes
* Un frameworks CSS para maquetar a toda velocidad (como son prototipos, la calidad del código no me importa mucho)
* IxEdit para añadir funcionalidad a esas maquetas

Ya os digo que es algo que quiero probar, sobre todo para analizar tiempos y coste/beneficio. Pero a priori me parece que puede aportar muchas ventajas. ¿Cómo lo veis?

yo tb uso visio

Yo uso Visio en el trabajo, y en casa estoy jugando con Omnigraffle. Me gusta en algunas cosas, en otras sinceramente soy mucho más rápido en Visio (será por la costumbre).

Axure no lo he probando a fondo, pero no me convenció mucho. Lo que tengo ganas de probar es el nuevo fireworks, por la facilidad de pasar luego a diseño y maquetación un prototipo.

Verdaderamente supone un reto al plantearse cómo 'wireframear'...

Hola, yo suelo utilizar Axure o Visio dependiendo del proyecto. Pero ultimamente me he encontrado frente a la necesidad de prototipar en papel y me lo estoy pasando de muerte...
Es porque estamos diseñando para Surface la mesa táctil de Microsoft. Lo cuento más en detalle aquí.
Espero que sea de utilidad.

El problema de los bocetos a mano es la edición. "Cámbiame este copy", "vamos a mover esto aquí"... a los tres cambios tienes la página hecha un asco y tienes que repetirla. Y además, tus compañeros no pueden editar la foto del wireframe para hacer cambios.

Pero para las fases iniciales y la conceptualización está claro que el papel y lápiz es la herramienta.

Desde hace 10 años uso una hoja de papel en blanco y un lápiz. Ultimamente le pongo post-it. Hasta el momento no encuentro nada que sea mas rápido que hacer bosquejos a mano. Y para compartirlos les tomo foto con mi celular, camara o webcam y los mando por mail.

Yo uso Visio. Apedreadme.

No sé, las otras que he utilizado no acaban de convencerme demasiado. En la empresa probamos Axure, Balsamiq y algo más, pero nos daba pereza cambiar. En su momento intentamos introducir ciertos elementos de navegación e interacción dinámica en los wireframes con Axure, pero se perdía muchísimo tiempo y las opciones eran muy limitadas. Como dices, lo importante no es la herramienta.

Eso sí, lo más divertido con diferencia es el paper prototyping: llevar las pantallas y controles recortados al cliente y simular que eres el sistema y reaccionas a sus operaciones, desplegando y moviendo capas y elementos.