Archivo de la categoría "Interaccion"

Sobre los nombres

Monday, 17 de August de 2009

Hace años. a las personas que trabajan en el desarrollo de interfaz se les llamaba “diseñadores de interfaz”.

Años mas tarde este nombre de “diseñador de interfaz” se tuvo que cambiar por que resultaba excesivamente general para definir los nuevos trabajos trabajos, mucho más especializados, ya que diseñador de interfaz define tanto al desarrollador como al diseñador gráfico.

Así surgieron los nuevos nombres profesionales:

  • Diseñador de interacción: que es la gente implicada en el diseño de todos los aspectos de interacción del producto.
  • Usabilistas/Consultor de usabilidad: la gente que analiza los productos en base a principios y métodos de usabilidad.
  • Desarrollador web/Diseñador web: la gente que plasma el diseño del layout en una estructura de código al pixel.
  • Arquitecto de la información: la gente que conceptuliza las estructuras del site.
  • Diseñadores de experiencia de usuario: la gente  que  pueden llevar a cabo estudios de campo para desarrollar el diseño de productos.

Algunas veces estos nombres se usan como sinomimos, cuando no lo son. Este es un problema importante para para la profesión por que

Obstaculiza el desarrollo de conocimientos, penaliza a rango de sueldo y dificulta la creación de perfiles profesionales especializados.


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:

    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.

      HCI social o Computer Supported Cooperative Work (CSCW)

      Wednesday, 2 de July de 2008

        Entre mediados de 1980 y principios de 1990 surge una nueva disciplina entre el HCI y las ciencias que se centran en el estudio de las relaciones que se generan mediante el trabajo colaborativo en los entornos tecnologicos.

        Esta disciplina se llama Computer Supported Cooperative Work (CSCW), y se centra en el estudio de las relaciones entre los sistemas de software, las tecnologías de la información y las tareas que las personas tratan de hacer con ello.
        Por lo que podemos decir que el CSCW estudia los entornos colaborativos y las relaciones que se generan en ellos (¿redes sociales?) desde un doble enfoque, que hace que hablemos de sistemas basados en ejes temporales (si ocurren al mismo tiempo/ o a distinto tiempo) y ejes espaciales (si los agentes se encuentran en el mismo lugar/ o en distintos lugares) a esta representación se le llama CSCW Matrix y representa la combinación de estos dos elementos.
        Uno de los principios más interesantes de CSCW es el Mapping Social Navigation, que se define como:

        Comillas 2.0 navigation towards a cluster of people or navigation because other people have looked at somethingComillas 2.0

        El concepto CSCW parece estar vinculado con muchas cosas interesantes, y nos permite hablar de un enfoque que resulta similar al HCI Social, con ciertas connotaciones de estrategia de diseño.

        bullet.gif Referencias:

        Referencias y bibliográfia Hci

        Tuesday, 3 de July de 2007

          Se acaba el cole y llega el verano …
          A continuación mi lista de lecturas recomendadas para el verano y con la que no debería tener ningún problema para superar las “citas de septiembre

          No me hagas pensar
          Steven Krug
          Pearson Educación S.A. Madrid 2001
          Isbn: 84-205-3252-5

          Si solo puedes acceder a un libro, este es tu candidato, accesible a todos los niveles, muy fácil de leer, repleto de ejemplo que ayudan a recordar y asociar ideas, con sufriente profundidad como para que tengas claro de que va la usabilidad y puedas ejercerla.

          Es una joya.

          Icono para nota Si te ha gustado “No me hagas pensar” quizás te pueda interesar Psicología de los Objetos Cotidianos de Donald A. Norman y Angustia Informativa de Richard Saul Wurman.

          Diseño Grafico, Creatividad y Comunicación
          Fernando R. Contreras y Cesar San Nicolas Romera
          Blur Ediciones S.L. Madrid 2001
          Isbn: 84-607-3554-0

          Un libro genial que logra contextualizar las tareas del día a día, tanto a nivel histórico, aclarando de donde venimos, como funcional.
          Una buena referencia si tienes que comunicarte con otros miembros del equipo a la hora de ejecutar un interfaz de usuario.

          Icono para nota Si te ha gustado “Diseño Grafico, Creatividad y Comunicación” quizás te pueda interesar La interaccion del color de Josef Albers, Diseño maquetación y composición de David Dabner y Sistemas reticulares de Kimberly Elam.

          About FACE 2.0 The essential of interaction design
          Alan Cooper y Robert Reimann
          Wiley Publishing Inc Indianapolis 2003
          Isbn: 0-7645-2641-3

          Hay una versión 3.0 recientita que promete. Es una referencia básica a la hora de acercarse al diseño de interfaz, y que para mi forma parte del triunvirato de referencia oficial ( junto a Information Architecture & Designing Web Usability)
          Pero también es la referencia más densa de las tres.

          Icono para nota Si te ha gustado “About FACE 2.0” quizás te pueda interesar Universal Principles of Design de William Lidwell y Designing for interaction de Dan Saffer.
          Listado Referencias Bibliograficas Hci version PdfLogo Documento PDF

          Coja uno, es Gratis :)

          Elementos estructurales: pie de página

          Wednesday, 30 de May de 2007

            El pie de pagina es uno de los principales elemento de una web, pero que por colocarse al final de un site, en muchas ocasiones, no se valora debidamente.

            Seria difícil aceptar la adición de elementos en una cabecera, pero no se suele ser tan escrupuloso con la acumulación de elementos en los pies.

            Seguramente, por que se contempla el diseño del site de forma vertical bidimensional (el pie no se ve sin scroll) y no en tres dimensiones ( el pie se ve en todas las páginas), ya que el pie, al ser un elemento estructural influye en la navegación constante, y es similar en numero de referencias totales en el site a la cabecera.

            Funcionalmente, el pie, indica el final de los contenidos en página, aunque hay ejemplos que limitan esta función (uso del fooder tipo scipt.aculo.us) subordinando el convencionalismo de cierre al alarde técnico.

            El pie debe procurar integrarse dentro del diseño y del estilo del site, y no servir como solución express o álbum de pegatinas.

            Cuidando los pies se logran diseños más redondos.

            Dando cabida a ciertos aspectos administrativos del site que nos interesa destacar (derechos/avisos/comercial), redundando información (contacto/accesibilidad),y/o regenerando la navegación (inicio/ir a …)

            Estoy pensando en pies.

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