Comparativa de aplicaciones de prototipado de nueva generación (wireframing tools)

    Logo de Investigacion HCI

    La técnica del prototipado aplicado al desarrollo de productos web tiene muchas utilidades y aplicaciones, ya que permite que se pueda verificar los requerimientos del producto antes de que se inicie su desarrollo. Permite fijar presentaciones en las que se puede solicitar la aprobación de la maqueta del producto a los interlocutores del cliente o del equipo de desarrollo, así como: especificar el contenido, planificar las fases del desarrollo o detectar errores de diseño antes de iniciar el proceso de producción.

    Esta técnica se puede realizar con distintas herramientas, desde un papel y un bolígrafo a programas informáticos especializados para ello.

    Periódicamente desde las listas profesionales se retoma el debate sobre la conveniencia o no conveniencia de una herramienta frente a otra. Este artículo no pretende zanjar estos debates, solo establecer una compartida respecto a  las herramientas actuales dedicadas a generar prototipos interactivos.

    Las herramientas que he seleccionado para analizar son: Axure, Balsamiq, FlairBuilder, Iplotz, Irise, Justinmind y SmatDraw.

    He seleccionado esta lista en base a dos criterios, uno, todas son herramientas especializadas en diagramas, que además estado viendo citadas con más frecuencia en listas especializadas en UX, revistas, twiters o blogs y dos, son a las que he tenido acceso y un mínimo de experiencia superior a una semana.

    Axure RP Pro 5.5

    http://www.axure.com

    Es una herramienta muy interesante, resulta un tanto compleja ya que se basa en la  siguiente idea “define elementos” que luego puedes reutilizar en las tareas de prototipado. Esta forma de trabajo hace que resulte un poco menos intuitiva que el resto de herramientas evaluadas ya que implica una planificación previa del trabajo. Como contrapartida permite automatizar la mayoría de las tareas, ya que si se cumplimentan toda la información durante el proceso de prototipado, el documento funcional se puede generar automáticamente (más o menos).

    Otro aspecto interesante es que integra un modulo de control de versiones que permite distribuir tareas y gestionar proyectos dentro de un equipo.

    Si la finalidad de tus prototipos es realizar una maqueta operativa de la solución, (por ejemplo, test previo al desarrollo del código) Axure también es una buena opción para lograrlo, resulta complejo resolver interacciones que implican más de tres cambios en la misma interacción.
    De momento solo disponible para windows, aunque se rumorea que próximamente habrá version para mac. Existen librerías muy interesantes para  Axure, además de las que puedes crear tu mismo para tus necesidades, además de una activa comunidad y muchos tutoriales para aprender. La versión de evaluación dura 30 días y la licencia para un puesto cuesta 589 USD.

    Balsamiq Mockups for Desktop 1.6.1

    http://www.balsamiq.com

    Es la next big thing del wireframing, con una historia detrás que hace que automáticamente nos caiga bien, ingeniero que se va de una gran corporación a lograr sus sueño.

    Tiene un marcado estilo gráfico que le da a los prototipos un aspecto muy “a mano” y parece estar muy orientada a la conceptulización de pantallas más que a pruebas funcionales.
    Existen librerías de elementos de interfaz, pero su integración con la herramienta resultan un poco toscos, aunque existen elementos para prácticamente cualquier necesidad.

    Para usos centralizados, la herramienta parece que se integra fácilmente en un wiki, con lo que los proyectos se puedes realizar y seguir desde ahí.

    Además Balsamiq  tiene un montón de guiños simpáticos, como “i need inspiration”, aunque también te puede sacar de quicio si no has licenciado tu copia.

    No me gusta que los elementos  de interfaz no se puedan customizar a tus necesidades.
    Si la finalidad de tus prototipos es definir pantallas de una forma rápida y visualmente potente, Balsamiq es una buena opción.

    Esta herramienta corre sobre AIR y tiene dos versiones, una en entorno web y otra para escritorio. Se comercializa en dos modos de uso, uno gratuito que presenta ciertas limitaciones, y otro licenciado a 75 USD.

    FlairBuilder Desktop

    http://www.flairbuilder.com

    Es una herramienta de escritorio que corre sobre AIR, aunque tiene una demo online que te permite testarla sin tenerte que descargar nada.

    Los elementos de interfaz visualmente me han resultado un poco flojos, y echo  en falta un titulo de los elementos, o una vista en la que  se muestre elemento y titulo, por que la iconografía seleccionada no resulta clara.

    Tiene una funcionalidad que debería ser obligatoria para todas las herramientas, captar pantallazos directamente. Además integra los players de los principales portales de vídeo, y eso siempre queda resulton en la maqueta.

    Esta herramienta es una de las candidatas a herramienta de rápido prototipado, y esta emparentada con Balsamiq e Iplotz, aunque es un pelin más cara.

    Además, esta herramienta parece ser el resultado de desarrollo heroico, por lo que tiene un merito especial.
    Su precio, 95 USD.

    Iplotz 1.5

    http://iplotz.com

    Esta herramienta  funciona en web y es una mezcla en Axure y Balsamiq. Tiene un estilo gráfico “a mano” similar a Balsamiq, y una disposición de controles y una lógica similar a Axure.

    Es la herramienta que más orientada esta a la conceptulizacion de las páginas y gestión de las tareas y trabajo centralizado, ya que permite tanto desarrollar el prototipado como gestionar asignar tiempos a las tareas.
    La sensación que me deja es la de querer ser una herramienta “seria-simpática”.

    Si tu tarea de prototipado tiene mucho de gestión, eres el responsable de un equipo y requieres un seguimiento de tiempos muy ajustados, Iplotz es tu herramienta.

    Tiene aspectos muy interesantes, como la publicación del prototipo en url y el servicio de almacenaje de proyectos. Problemas, es restringida respecto a los elementos que forman los componentes, la versión de prueba te permite solamente 1 proyecto de 5 paginas, por 15 USD. tienes un mes de herramienta con 1 GB de almacenamiento e ilimitados proyectos y paginas. También hay versión de escritorio por 75 USD.

    iRise Professional Edition

    http://www.irise.com

    Es una herramienta de alto alcance, ya que no solo esta especializada en prototipos, sino a toda la batería de tareas afines. Ya que esta especializada para detallar requisitos, escenarios, workflows, y definición funcional.  Los prototipos que genera están orientados a maquetas navegables y a presentaciones. A favor tiene que resulta sumamente completa, y que si trabajas en proyectos grandes con un alto número de perfiles distintos puede resultar muy útil emplear iRise  como marco de trabajo, la funcionalidad de control de modificaciones sencillamente te hará una persona más feliz. En contra, que obliga a un estilo gráfico limitado, que aunque resulta elegante, es parco, no se pueden usar librerías de elementos  y los elementos de interfaz no se pueden customizar.

    Tiene una lógica de publicación que permite lanzar los prototipos como documento html, lo que puede ser muy útil para generar maquetas sin tener que tirar una sola línea de código.

    El trial dura 30 días, pero te tienes que registrar y la empresa hace seguimiento de quien ha solicitado una prueba para recoger tu feedback, y el precio para la licencia es de 6.995 USD.

    Justinmind Prototyper 2.5

    http://www.justinmind.com

    Son los candidatos españoles, es una herramienta de escritorio con versión para las plataformas Win y Mac. Presenta unas características muy similares a Irise. Esta herramienta permite orientar al diseño de pantallas, al diseño de diagramas funcionales y a la documentación de contenidos y requisitos.

    Las opciones de elementos que permiten los diagramas resultan limitadas, pero se pueden utilizar librerías, aunque no he logrado localizar librerías de terceros y las que facilita el fabricante al ser descargadas e instaladas dan algún problema.

    Es muy interesante la funcionalidad que permite documentar cambios sobre la página del prototipo (odio esos correo en lo que se habla de algo sin decir donde esta). En contra, si se lo quieres enviar a un cliente, tu cliente debe instalarse un programa de visualización.

    La versión licenciada para un puesto cuesta 690 USD.

    ProtoShare

    http://www.protoshare.com

    La herramienta es web y el trial se debe vincular a un número de una tarjeta bancaria, yo solicite una prueba y me la facilitaron sin necesidad de detallar mis datos bancarios.

    La herramienta es interesante, y tiene algunas opciones novedosas como la gestión de las prácticas SEO de contenidos desde la maqueta del prototipado y tiene un estilo grafico para los iconos del interfaz muy chulos.

    Es la alternativa a Axure, ya que esta muy próxima en funcionalidades y prestaciones, aunque es muy superior respecto a las maquetas que genera, permitiendo vincular directamente la maqueta al track de GA. En contra, la herramienta tiene unas reacciones un poco lentas.

    La web esta repleta de testimoniales un poco exagerados. La herramienta es un poco compleja, aunque si trabajas en entornos deslocalizado con ciclos de validación largos puede ser interesante.
    La licencia individual cuesta 29 USD al mes con un 1Gb. de almacenaje, 2 licencias, 5 proyectos activos de cómo máximo 100 paginas  y 20 proyectos archivados.

    SmartDraw 2009

    http://www.smartdraw.com

    Es una herramienta apabullante ya que no es una herramienta específicamente para el prototipado, sino de diagramación. Antes de empezar la evaluación ya me habían advertido que jugaba en otra liga. Aunque tiene dos templates especializados en diseño de software y diseño de paginas web.
    La herramienta es de escritorio, y no permite integrar librerías.
    La licencia de un año cuesta 197 USD.


    Grafico comparativo de herramientas de prototipado

    Click en la imagen para ampliar.

    ¿Quien se ha quedado fuera de esta evaluación y  también son opciones interesantes?

    Wireframesketcher

    http://wireframesketcher.com

    Tiene muy buena pinta, corre sobre eclipse, tiene un tutorial paso a paso de instalación y los resultados parecen muy “oldschool”. Rápida limpia y sencilla. Pero no encaja en la evaluación por que  tiene cualidades distintas a las otras herramientas analizadas. Las licencias de 1 a 4 puestos 75 USD, pero si quieres evaluar la herramienta, tienes un proyecto open-souce o trabajas para una ONG  te facilitan una licencia.

    Pencil project

    http://www.evolus.vn/Pencil/Home.html

    Plugin para Firefox, parece muy sencillo si lo que necesitas es modelar pantallas sin complicarte la vida mucho, es gratuito.

    Conclusiones:

    #1 Me sorprende la cantidad de herramientas que aunque afirman estar diseñadas para el desarrollo de software no incluyen elementos básicos del desarrollo web, como es una ventana de navegador. Cierto que muchos de estos programas están definidos para generar prototipos navegables,  y que en el peor de los casos me puedo hacer un .gif con el marco del navegador, pero no costaba nada incluir la ventana como elemento, esto permite por ejemplo distribuir los prototipos en papel. Ademas que algunas herramienta no me permitan  usar librerías de elementos, es otra cosa que no me gusta.

    #2 Cuando todas las herramientas se han desarrollado siguiendo los mismos “goal” de diseño, parece razonable que se logren herramientas muy similares. Asi, parece haber dos enfoques claros, las herramientas “cool” basadas en AIR, que son rápidas, fáciles y resultonas y las “súper” herramientas que son entornos en si misma y permiten definir requisitos, flujos, documento funcional, protos, hacer mockups navegables, que permiten hacerlo todo, pero su curva de aprendizaje es más pronunciada.

    #3 Creo que en las herramientas testadas hay dos enfoques claramente definidos, los orientados a obtener html sin mucho lió y los orientados a definir casos de  uso, y me da la sensación de que unos se me quedan pequeños algunas veces y otros me viene muy grandes otras, no me logro decidir por una herramienta, y al final estas cosas se solucionan por  el precio.

    #4 Hay poco análisis sobre las herramientas que empleamos o podemos emplear en nuestro desarrollo profesional, esto no ayuda a que mejoremos como profesión, si tienes experiencias u opiniones sobre las herramientas aquí citadas, apunta y dispara.

    bullet.gif Referencias:

    Actualización:

    10 comentarios sobre “Comparativa de aplicaciones de prototipado de nueva generación (wireframing tools)”

    1. Francisco Javier Cantais dijo:

      De las herramientas que mencionas he usado el bolígrafo y papel (lápiz, más frecuentemente que bolígrafo) y Pencil Project.

      La primera es la que más me gusta, tiene una curva de aprendizaje prácticamente nula, no requiere instalación y la puedes usar en cualquier parte. Además facilita el trabajo colaborativo en tiempo real y puedes implicar al cliente en el prototipado.

      La segunda la instalé con ilusión pero me ha dejado un poco frío. Es gratis, fácil de instalar y de usar, pero me ha dado algunos problemas de “cuelgue” o de mal funcionamiento espontáneo que me han hecho desecharla finalmente. Salvo para pintar controles de formulario, que lo hace rápido y bonito, PowerPoint la supera ampliamente como herramienta de prototipado… lo cual es muy triste.

    2. Eusebio Reyero dijo:

      @ Francisco Javier tienes mucha razón, es difícil superar al lápiz para el “rapid prototyping“, pero dejar que prototipe el cliente es terreno peligroso…

      Como alternativa a Pencil te recomiendo probar alguna de las herramientas en Air como FlairBuilder o Balsamiq, y si quieres seguir con Powerpoint mírate este kit de elementos.

    3. Xavier Renom dijo:

      Muy buen trabajo.

      Sólo una aclaración: Justinmind Prototyper sí genera documentación y proporciona un esquema de Microsoft Word para realizar plantillas que permiten personalizar la documentación generada.

      Por desgracia esta funcionalidad sólo está disponible para Windows.

    4. Eusebio Reyero dijo:

      @ Xavier Muchas gracias por la aclaración.

    5. rono dijo:

      Hola!
      A ver 1º decir que estoy un poco pez en estos asuntos jeje. Yo lo que queria es crear una pagina web para mi tienda de decoracion. He estado mirando y aqui en bilbao hay un sitio de desarrollo web que parece que esta bastante bien. Que os parece?? creeis que es una buena opcion??
      Muchas gracias por vuestras respuestas!

    6. Eusebio Reyero dijo:

      @ rono. Hola rono, la temática de wwff no encaja del todo con lo que preguntas y no se que decirte sobre la conveniencia de proveedores. Quizás seria interesante proponer tu pregunta en foros o listas especializados en desarrollo. Un saludo y suerte con tu proyecto.

    7. boton dijo:

      Lo primero, genial el articulo!!

      Yo como @FJ Cantais soy muy de papel y la única herramienta de las que comentas que probé es ProtoShare. La verdad es que me gustó mucho, pero está muy enfocada a que los prototipos los toque todo el mundo.

      Sigo con muchas ganas de probar Axure y ver los html navegables que genera (lo único que me echa para atrás es que no tengan versión para mac).

    8. Eusebio Reyero dijo:

      @ boton. Gracias, muy de acuerdo contigo, ademas ProtoShare, a nivel de generar html, es de las herramientas testadas la que me ha parecido más interesante, el problema esta en como entienden que se debe distribuir un trial lo cual dificulta un poco el debate. Axure es una herramienta muy interesante y tiene un montón de widget que hacen mucho más sencillo hacer prototipos interactivos, aunque como dices no es para mac. De todos modos la mayor deficiencia, para mi, esta en que hay un vació entre prototipos y test en las herramientas, que es donde creo que tiene una mayor utilidad los mockup para diseño de interacción.

    9. Twitter Trackbacks for Comparativa de aplicaciones de prototipado de nueva generación (wireframing tools) | Will Web For Food [thespacer.net] on Topsy.com dijo:

      […] Comparativa de aplicaciones de prototipado de nueva generación (wireframing tools) | Will Web For F… wwff.thespacer.net/blog/comparativa-de-aplicaciones-de-prototipado-de-nueva-generacion – view page – cached La técnica del prototipado aplicado al desarrollo de productos web tiene muchas utilidades y aplicaciones, ya que permite que se pueda verificar los requerimientos del producto antes de que se inicie su desarrollo., La técnica del prototipado aplicado al desarrollo de productos web tiene muchas utilidades y aplicaciones, ya que permite que se pueda verificar los — From the page […]

    10. Gina dijo:

      I love your post.
      Thnx 4 the work.

    Deje un comentario

    Creative Commons License
    Esta obra está bajo una licencia de Creative Commons.