Archivo de la categoría "Estrategia de diseño"

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

Wednesday, 13 de May de 2009

    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:

    Metodologías de diseño

    Thursday, 15 de January de 2009

      Ante un nuevo proyecto se pueden adoptar distintas formas de aproximación. A esto se le llama metodologías del diseño.

      Estas metodologías se pueden emplear de forma unitaria o combinándolas entre si, para obtener un nuevo enfoque.
      Se debe tener en cuenta que también influye el ámbito de aplicación, y las disciplinas implicadas en el proceso del proyecto.

      A continuación un listado de las principales metodologías de diseño :

      • Diseño Axiomático, cuando se emplean axiomas para tomar decisiones. Este enfoque se basa principalmente en las necesidades funcionales del cliente.
      • Diseño Orientado al Uso, cuando el diseño se centra en las tareas asociadas al uso y sus objetivos. Este enfoque penaliza la usabilidad, ya que incrementa la curva de aprendizaje, pero logra solventar problemas complejos o de alta criticidad.
      • Diseño Centrado en el Usuario (UCD User Center Design) que es la metodología de diseño  más habitual en el mundo del HCI. Este enfoque coloca  todas las necesidades, deseos y limitaciones del usuario como núcleo del proceso de diseño. Por lo cual esta metodología conlleva por definición investigación y análisis del usuario. Así mismo implica que el proyecto debe ser faseados para garantizar los resultados. Dentro del UCD hay metodologías especificas , como son KES (Kansei Engineering System) o  QFD (Quality Function Deployment).
      • Enfoque Ascendente, que consiste en partir de un elemento o de las características individuales de los elementos para desarrollar la totalidad del producto. Este es el método empleado por Google en sus adds de productos.
      • Enfoque descendente, consistente en generar el producto desconociendo los elementos que lo configuran, esta técnica se emplea para desarrollar por ejemplo templates  web.
      • Pensamiento de diseño (Thinking design) es una metodología de resolución de problemas, y de detección y descubrimiento de nuevas oportunidades, se basa en un profundo conocimiento antropologico, en el intercambios de ideas entre equipos multidiciplinares y en los test. La gente de IDEO trabaja con este método.

      Algunos principios que pueden resultar de ayuda a la hora de tomar decisiones son:

      • Navaja de Ockham, consiste en eliminar los elementos innecesarios del diseño con el fin de obtener productos lo más sencillos posibles, de modo que se reduce la posibilidad de que existan incoherencias.
      • Principio KISS (Keep It Short and Simple  o Keep it simple,stupid) se emplea cuando la sencillez es un objetivo del diseño. El principio Kiss no es en si mismo una metodología sino una estrategia de diseño y sigue el reduccionismo metodológico de Ockham.
      • Timtowtdi, (There is more than one way to do it) hace referencia a que existen múltiples soluciones a un problema, es un principio muy popular en programación.

      Aunque en ocasiones la imposición metodología forma parte del núcleo de la técnica, como en el caso del zen de Python.

      bullet.gifReferencias:

      Modelo de interacción

      Wednesday, 7 de January de 2009

        Un modelo de interacción define el principio mediante el cual se diseña la interacción en el interfaz.
        Este modelo es un enfoque holístico de las acciones y funcionalidades de la herramienta, por lo que indica de forma general como se diseñan los comportamientos del sistema frente a las distintas acciones.

        Su finalidad es dotar de coherencia y continuidad a toda la solución, ya que un interfaz que presenta modelos de interacción cambiantes a lo largo de su empleo desorienta y hace que el usuario la perciba como más compleja, con lo que ello implica.
        Al ser un modelo teórico, este debe ser validado con la audiencia tipo de la herramienta, para lo que se puede emplear el modelado definido para el diseño de personajes y escenarios, sobre el que se puede llevar a cabo una prueba de contraste.
        El modelo de interacción forma parte de los elementos de diseño de interfaz que se recogen dentro del documento de definición de diseño (DDD).
        El modelo de interacción una vez estandarizado para la solución se convierte en un patrón de diseño.

        Una buena definición de un modelo de interacción es lo que se encuentras detrás de algunos de los productos más exitosos.

        Karl T. Ulrich and Steven D. Eppinger say:

        Monday, 22 de December de 2008

          Comillas 2.0 Early (alpha) prototypes are usually built with production-intent parts, parts with the same geometry and material properties as intended for the production version of the product but not necessarily fabricated with the actual processes to be used in production. Alpha prototypes are tested to determine whether the product will work as designed and whether the product satisfies the key customer needs. Later (beta) prototypes are usually built parts supplies by the intended production processes but may not be assembled using the final assembly process. Beta prototypes are extensively evaluated internally and are also typically tested by customers in their own use environment. The goal for the beta prototypes is usually to answer questions about performance and reliability in order to identify necessary engineering change for the final product. Comillas 2.0

          en Product design and development

          Personajes y Escenario. Introducción a la metodologia

          Tuesday, 11 de November de 2008

            Logo de Investigacion HCI

            Personajes y escenarios es una técnica de diseño de producto.
            Que se inscribe dentro del marco metodológico del Diseño Centrado en el Usuario (UCD). Y es una de las técnicas tradiciones de la usabilidad.

            Su origen se los debemos a Alan Cooper durante los años 80.
            La finalidad de esta técnica es contextualizar el diseño de tu proyecto con tu audiencia.

            ¿Qué son Personajes?

            Son una abstracción que se realiza sobre un arquetipo de usuarios, basados en el análisis de las motivaciones de personas reales, que nos permiten identificar las principales necesidades e nuestros USUARIO.

            ¿Qué NO son Personajes?

            • No son análisis de mercado.
            • No son definiciones de audiencias.
            • No son invenciones.
            • No son usuarios.

            ¿Qué son Escenarios?

            Es una narración de “un caso de uso” en el que se establece la relación entre la motivación del usuario y las posibilidades en las que se emplea el ARTEFACTO.

            ¿Qué No son Escenarios?

            • No son optimización de análisis de tareas.
            • No es un task flow.

            Beneficios de desarrollar con Personajes y Escenarios.

            • Nos permite asentar el proyecto al entender las necesidades de los usuarios, simplificando las decisiones de diseño del producto.
            • Establecer empatía con el entre el abstracto “USUARIO” y nosotros , nos permite trabajar para obtener un fin.
            • Luchar contra los hippos (Highest Paid Person’s Opinion in the room) y mantener el rumbo del proyecto.
            • Jerarquizar y fasear los alcances del proyecto.
            • Establecer ciclos de vida del producto y mejoras.
            • Diseñar productos de éxito.
            • Incrementar el ROI.

            ¿Cómo se hacen Personajes y Escenarios?

            El diseño de pesonajes y escenarios se compone de 3 pasos:

            1. Análisis

            Debemos obtener datos de los usuarios, por lo que podemos emplear alguna de las siguiente tecnicas, (o varias, no son excluyentes)

            • Entrevista en profundidad con las personas que conocen al usuario (Vendedor,/ Att, Cliente / Equipo Marketing…).
            • Encuestar a los usuarios.
            • Métricas Web.
            • Analizar análisis de mercado.
            • Y si todo lo anterior falla puedes preguntar a amigos y conocidos.

            2. Segmentación

            Identifiquemos las cualidades principales de los arquetipos mediante agrupaciones de :

            • Datos Socio demográficos, como edad, tipo de trabajo, familia, genero.
            • Día típico.
            • Motivación de uso.
            • Éxitos.
            • Frenos y Factores de frustración.
            • Habilidades y grados de desarrollo.
            • Tiempo de uso y frecuencia.

            3. Modelado

            Con los arquetipos agrupados construimos nuestros personajes y definimos su escenario de uso., a continuación jerarquizamos para crear los Personajes Principales , Personajes Secundarios y No Personajes

            • Personaje Principal: Son para lo que vamos a diseñar, y representan nuestro objetivo, cada producto tiene un único Personaje principal.
            • Personajes Secundarios: Dan cabida a las necesidades que el personaje principal no ha podido satisfacer, pero que resulta importante tener en cuenta para el desarrollo del producto.
            • No personajes: son los que no serian usuarios del producto y para los que no diseñamos.

            bullet.gif Referencias:

            Actualización:

            Wireframing

            Tuesday, 23 de September de 2008

              Más allá del debate en torno a la herramienta que se emplea para llevar a cabo el prototipado, entendiendo este, como el proceso de concreción, que permite dotar al proyecto web de un armazón que permita ser acometido, existe un análisis de la metodología, que afecta al  enfoque de las tareas implicadas en el desarrollo web. En este contexto el prototipado cobra una gran importancia
              Actualmente este concepto se está definiendo en el mercado anglosajón con el nombre de wireframing.
              El wireframing es el proceso que permite:

              • Abaratar costes del proyecto
              • Reducir el riesgo de desarrollo

              Estas dos características hacen que el wireframing sea un estado mucho más evolucionado que lo que tradicionalmente, (todo lo tradicional que puede ser una disciplina con poco más de veinte años de vida) ha sido el prototipado, centrado en clarificar las estructuras y relaciones del interfaz. Ya que posee ciertas características holísticas del proyecto. Y permite entroncar el hci con las tareas de gestión.

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