Project Comet, ¿la “primera solución todo-en-uno para diseñadores UX”?

El pasado 5 de octubre se llevó a cabo MAX, la conferencia creativa de Adobe. El evento tuvo una especial relevancia para el mundo de User Experience por la presentación, adelantada, de “Project Comet”, que Adobe describió como “la primera solución todo-en-uno para diseñadores UX”.

Les presento una rápida revisión por las principales características de Project Comet y la inevitable comparativa con otras soluciones de software orientadas a prototipado.

Aunque también pienso… ¿en serio Adobe? “¿la primera solución?” “¿Todo-en-uno?” “¿Para diseñadores UX?” Juzguen ustedes mismos.

Project Comet

La presentación de Project Comet tuvo lugar durante la conferencia inaugural de Adobe MAX. Sarah Hunt (@sarahwhatsup), senior product manager del proyecto, subió al escenario para mostrar ante los más de 7 mil asistentes al futuro nuevo integrante de la familia Adobe.

Adobe MAX

Sarah comentó que Project Comet contará con herramientas para wireframing y diseño de interfaces, en el modo “Design”, y permitirá crear prototipos, es decir, añadir interacciones, animaciones y gestos a las interfaces en el modo “Prototype”. Adicionalmente, será posible realizar una vista previa en tiempo real de la interfaz, directamente en dispositivos móviles.

Otra característica relevante es la posibilidad de compartir los prototipos con miembros del equipo o con stakeholders y permitir que realicen comentarios directamente sobre las interfaces.

Como es de esperarse, Project Comet promete trabajar de manera integrada con otros programas de la familia Creative Cloud de Adobe, como Photoshop e Illustrator, y optimizar el flujo de trabajo entre edición de imágenes y vectores con el desarrollo de interfaces y prototipos; Project Comet contará incluso con herramientas de dibujo vectorial.

Project Comet luce más o menos así en el modo “Design”:

Adobe Project Comet en modo "Design"
Adobe Project Comet en modo “Design”

Cada interfaz o artboard podrá diseñarse a partir de imágenes y objetos vectoriales, será posible crear tantos artboards como interfaces o dispositivos sean necesarios en el proyecto .

En el modo “Prototype”, podrá añadirse interacción y gestos a los elementos de cada artboard para definir los flujos de interacción.

Adobe Project Comet en modo "Prototyping"
Adobe Project Comet en modo “Prototype”

Para visualizar el prototipo en un dispositivo móvil, basta conectarlo y activar en Projet Comet la opción de “Preview”.

Adobe Project Comet en modo "Preview"
Adobe Project Comet en modo “Preview”

Fue todo durante la presentación. Se anunció que Project Comet estará disponible en 2016. Pueden ver el video completo de la conferencia inaugural aquí.

Haciendo un juicio crítico, Project Comet se queda corto en su promesa de ser una “solución todo-en-uno para diseñadores UX”. Por lo visto durante la presentación, Project Comet está dirigido a diseñadores de interfaz y de interacción responsables de la apariencia o look & feel de sitios web y apps que deben visualizarse en múltiples dispositivos, pero no cuenta con herramientas específicas para actividades como user research ó user testing, críticas en el ejercicio profesional de UX.

El principal atractivo con el que contará Project Comet para posicionarse en el mercado será sin duda la integración que ofrezca con Illustrator y Photoshop para optimizar el flujo de trabajo en el diseño de interfaces.

Project Comet librará una batalla complicada porque, afortunadamente y desde hace mucho, existe una cantidad considerable de herramientas relacionadas con actividades de UX, como wireframing, prototyping, user testing ó user research. ¿Cuál de ellas es la mejor herramienta de software para UX? La respuesta es, como siempre, depende.

El mercado de herramientas de software para prototyping

La competencia directa de Comet la representa un amplio abanico de herramientas que existen hoy día relacionadas con la creación de prototipos. La lista es larga: Axure, Briefs, Flinto, Fluid, Form, Indigo Studio, InVision, Justinmind, Marvel, Origami, Pixate, Proto.io y UXPin, por mencionar sólo algunas. Cada herramienta ofrece características distintas y decidir cuál de ellas preferir, no es nada sencillo.

Cooper.com ofrece un excelente recurso para comparar las diferentes soluciones para prototyping a través de una tabla dinámica en la que se muestran las principales características de cada software, es posible personalizar la tabla dependiendo del criterio de ordenación que se elija. Pueden consultar este recurso aquí.

comparativatools

Si pensamos en la sencillez con la que podemos aprender a utilizar una herramienta, Flinto o InVision son una excelente opción. Proto.io o UXPin son las herramientas con mayor curva de aprendizaje.

En cuanto a la fidelidad obtenida en un prototipo respecto a un producto real, Origami es una de las mejores alternativas, Justinmind o Pixate también ofrecen buenas características. HotGloo es una opción que no ofrece alto rendimiento respecto a fidelidad, pues se centra más en la creación de wireframes.

Cuando trabajamos en equipos multidisciplinarios o distribuidos en diferentes espacios físicos, o colaboramos de manera cercana con clientes y stakeholders, por lo que requerimos compartir nuestros prototipos para obtener feedback constante, definitívamente InVision es una de las mejores opciones. En este rubro, Origami no sería muy buena opción. Justinmind y Axure, por ejemplo, cuentan con un área para comentarios en la misma URL del prototipo, pero por alguna e inexplicable razón, muy pocas personas escriben ahí sus comentarios, al menos es mi experiencia.

Un caracterìstica clave para que una herramienta de prototyping realmente pueda ser llamada herramienta UX es contar con la capacidad de realizar user testing. Bajo este criterio, nuevamente InVision tiene una buena valoración, aunque Solidify se lleva el primer lugar según el análisis de Cooper y no es para menos, pues permite crear test en diferentes dispositivos, tanto de manera remota como de manera presencial, genera reportes y permite compartir la documentación con el equipo. Quizá su principal desventaja es la limitada cantidad de opciones para la creación de interfaces e interacciones. UXPin, la renombrada plataforma de diseño UX a quien le debemos tan buenos e-books, ha incorporado recientemente opciones de testing, aunque aún se encuentra en fase experimental.

Si pensamos en diseño exclusivamente para dispositivos móviles, quien se lleva las palmas es Justinmind, pues cuenta con interacciones específicas para mobile, desde taps, swipes y otros gestos touch; además, permite visualizar los prototipos directamente en un dispositivo. Las peores opciones son HotGloo y Briefs, pues no cuentan con características de este tipo.

Otro criterio importante para elegir una herramienta de prototyping es la versatilidad de sus widgets o elementos dinámicos. Indigo Studio obtiene la mejor valoración gracias a opciones como los screenparts, que permiten reusar partes de una interfaz en otra, así como la gran personalización en sus bibliotecas de widgets.

Aunque no se incluyen en el comparativo de Cooper, es súmamente importante considerar el uso de variables y condicionales para incrementar las posibilidades de interacción. Justinmind es quien podría tener las mejores prestaciones en ese sentido, los datamaster son verdaderas variables que permiten crear concatenaciones de cadenas de texto, operaciones lógicas y aritméticas, carga dinámica de datos, entre otras características.

Finalmente, hay una característica muy particular que sólo una herramienta ha sabido implementar y aprovechar: la documentación. UXPin permite mantener archivos de wireframes, mockups y prototipos junto con documentación UX, desde un Model Business Canvas, Personas, User Journey, listas de requerimientos, guías de estilo o cualquier otro tipo de archivo.

Cuando utilizamos otras herramientas de prototipado, generalmente optamos por soluciones como Trello o Google Drive para llevar el control de archivos de documentación.

Conclusiones

Ante tantas herramientas existentes, vuelta al mismo punto, ¿cuál es la mejor opción para crear prototipos? Bill Buxton, en su libro Sketching User Experience, responde así:

Un prototipo es un prototipo, independientemente de la tecnología que sea usada para implementarlo e independiente también de su relativa fidelidad con el producto real.

No perdamos el foco de identificar que el verdadero sentido de un prototipo es la validación de conceptos de diseño para aprender y mejorar de manera iterativa la solución del producto a desarrollar a través de la retroalimentación con el equipo, usuarios reales, clientes y stakeholders. De nada sirve emplear una herramienta sofisticada de prototyping si no validamos ni compartimos nuestro trabajo, “get out of the building!” como indica el principio de Lean Startup.

Diseñar la interfaz es centrarnos en el qué, pero la construcción de un prototipo ayuda a definir el cómo, el cuándo, dónde y el por qué del uso del producto.

Una última reflexión, Marc Rettig en un artículo llamado Prototyping for Tiny Fingers comenta:

Con paper prototyping (el proceso de construir prototipos con lápiz y papel), los diseñadores de interfaz pasan 95% de su tiempo pensando en el diseño y sólo el 5% en los mecanismos de la herramienta. Las herramientas de prototipado basadas en software, no importa lo bien ejecutadas que estén, revierten esta relación.

Privilegiemos siempre el proceso de diseño por encima de la herramienta de software, que al final es sólo eso: una herramienta.

Bienvenido Project Comet y bienvenidas todas las demás herramientas también.

Diseñador de Experiencia de Usuario. Scrum Master Certified. Fotógrafo. Ha participado en proyectos vinculados a HCI, usabilidad y UX en el ámbito académico, empresarial y gobierno desde 2007. Es parte del equipo de UX Nights.

Validación de sitios para móviles

Los dispositivos móviles, y en particular los smartphones, están dominando la web. Hoy más que nunca es muy importante asegurarnos que nuestros sitios web sean compatibles con estos dispositivos.

En los últimos años hemos visto un cambios importante en las preferencias de navegación de los usuarios de la web, donde se nota una tendencia de migración clara de los equipos de escritorio –workstations, laptops, etc.– hace los equipos móviles, y no parece que vaya a cambiar pronto.

En el estudio de AMIPCI en 2015 sobre hábitos de usuarios en México, el único segmento que registró crecimiento en su uso fue precisamente el de los smartphones, y creció a costillas de los dispositivos de escritorio para colocarse en un 58% de preferencia de los mexicanos al navegar la web:

AMICPI dispositivos de conexion
A nivel mundial también es notable la preferencia de compra de los usuarios finales de dispositivos móviles (smartphones y tabletas) contra los equipos de escritorio, en una razón de casi 3 a 1:

PCs vs smartphones

Desde la perspectiva de experiencia de usuario, es importante revisar que nuestros sitios web estén construidos de forma que puedan verse y navegarse desde dispositivos móviles de manera sencilla y natural. Debemos tener en cuenta que el ecosistema móvil es mucho más diverso que el de las PCs al hablar de tamaño y resolución de pantalla, ancho de banda, capacidad de procesamiento, navegadores web y muchos otros factores.Les comparto algunas herramientas que les pueden servir para validar sus sitios móviles, al menos para comenzar a revisarlos:

Validador para sitios móviles de W3C

W3C Mobile Validator
W3C Mobile Validator

El Worldwide Web Consourtium o W3C es el organismo mundial que crea y mantiene los estándares técnicos de la web. Para ayudar a las personas que crean sitios web creó este validador de páginas web basado en la recomendación de MobileOk que revisa la estructura del código de una página y entrega un reporte donde indica el grado de cumplimiento de estándares en su codificación, el impacto de cada error y guías sobre cómo arreglarlo.

Lo encuentras en: http://validator.w3.org/mobile

Mobile friendly de Google Webmasters

Google Mobile Friendly Tool
Google Mobile Friendly Tool

En abril de 2015 Google anunció que el hecho de que un sitio web no se vea correctamente en dispositivos móviles comenzará a afectar su posicionamiento en los resultados orgánicos (no pagados) de su buscador, en caso que necesitaramos una razón de peso para optimizar y actualizar nuestros sitios web.

Para ayudar a los webmasters, Google agregó una herramienta de validación más cualitativa que la de W3C, que conecta la página validada con una granja de render de móviles de Google para entregar un resultado más enfocado en cómo ve la página el buscador y cómo la vería un usuario en su móvil. También tiene mucha documentación sobre cómo optimizar sitios web para móviles.

Lo encuentras en: https://www.google.com/webmasters/tools/mobile-friendly/

Responsinator

Responsinator
Responsinator

Esta herramienta sirve para simular cómo se vería una página web en diferentes dispositivos con diferentes tamaños, resoluciones y orientaciones. Aunque no es una manera definitiva de revisar el diseño de una página web, es una forma simple y sencilla de probar como se ajusta el diseño de un sitio a móviles si no tienes un teléfono de cada modelo a la mano para probar.

Lo encuentras en: http://www.responsinator.com

Test de velocidad de Rackspace

Prueba de velocidad de carga de Rackspace
Prueba de velocidad de carga de Rackspace

La velocidad cuenta mucho al navegar en un móvil. De acuerdo a Rackspace, actualmente un usuario tiene un rango de tolerancia entre 3 y 5 segundos para que un sitio móvil se visualice en su dispositivo antes de abandonarlo. La velocidad de carga de un sitio tiene que ver con muchos factores que van desde el ancho de banda en el servidor, la latencia de carga, el tiempo de renderizado y la carga del servidor, entre otros.

Rackspace creó una prueba de velocidad para sitios web en el que analiza varios componentes que afectan el tiempo de carga de un sitio y recomendaciones para mejorarla.

La encuentras en: http://www.rackspace.co.uk/ecommerce-hosting/page-speed-checker

* * *

Por supuesto, estas herramientas solo cubren una parte del análisis que se debe hacer a un sitio móvil y están enfocadas a la implementación técnica, no a la perspectiva del usuario, pero nos dan un punto de partida para poder analizar y mejorar de manera cuantitativa varios aspectos que sí afectan la experiencia de navegación de un usuario final.

Consultor en experiencia de usuario, developer, conferencista, escritor y emprendedor. Trabaja en Tesseract Space, es Google Expert en UX/UI, Microsoft Regional Director y co-fundador de UX Nights.

Creación de wireframes

Los wireframes son herramientas muy importantes en el proceso de creación centrada en el usuario. Con las herramientas adecuadas se pueden crear fácil y rápidamente.

Ya he escrito respecto del proceso de arquitectura de un proyecto digital sobre la producción de mapas mentales y flujos de usuario; el siguiente paso en el proceso de diseño centrado en el usuario corresponde a los wireframes, que nos ayudan a definir cuáles serán los elementos en la interfaz y en los sistemas de navegación, así como la forma en que trabajarán juntos.

Wireframe en papel
Wireframe en papel

Los wireframes no son parte del proceso de diseño visual, por lo que no incluiremos en este proceso la definición de colores, gráficos o la tipografía a utilizar en el diseño final.

Wireframe low-fi con Balsamiq
Wireframe low-fi con Balsamiq

Se pueden construir dos tipos de wireframes: los de baja calidad y los de alta calidad. Los wireframes low-fi son esquemas donde sólo vamos a colocar cuadros abstractos con una etiqueta simple que explique su rol en la maqueta. Los wireframes low-fi pueden crearse usando sólo lápiz y papel, en un pizarrón o con una herramienta que no aporte mucho detalle como Balsamiq Mockups.

Los wireframes high-fi son aproximaciones más complejas y detalladas donde todas las opciones de navegación, como las opciones para aceptar términos o condiciones, o para recuperar una contraseña sí están presentes. Los wireframes high-fi pueden servir incluso para desarrollar un prototipo interactivo.

Una buena herramienta para desarrollar wireframes detallados es Axure RT, aunque aplicaciones como Adobe Illustrator también son muy recurridas por su flexibilidad.

Wireframes high-fi en Axure
Wireframe high-fi en Axure

La ventaja de herramientas como Axure o Balsamiq es que fueron creadas desde el principio para crear wireframes de manera muy sencilla, basando su interfaz en un modelo de interacción de arrastrar-y-soltar (drag and drop).

Axure incluye además herramientas de personalización e interacción poderosas donde un  wireframe simple puede llegar a verse y a funcionar casi como el producto final con poco esfuerzo, porque los archivos del wireframe se exportan como HTML, lo que permite realizar trucos muy interesantes mediante CSS y JavaScript sin necesidad de tener escribir código desde cero.

En futuros artículos escribiré más a fondo sobre Axure como herramienta de prototipado, desde sus funciones más básicas hasta algunos trucos para conseguir prototipos interactivos avanzados.

UX Specialist en Foo Studio. Creador de geekoteca.com. Fan de LEGO

Flujos de usuario

En la planeación de un sistema es normal que necesitemos conocer los pasos que tomará un usuario al usarlo, especialmente si es un proyecto cuyo diseño está centrado en el usuario.

En algunos casos, como el de un sitio web informativo, es probable que no exista un solo camino. En otros casos, como el de un sitio de e-commerce, sí es necesario identificar los pasos que el usuario tomará. Una técnica de UX que sirve para esto es determinar los flujos del usuario, también conocidos como user journeys.

Aunque parezca evidente, es bueno recordar que estos flujos siempre deben de estar orientados a la perspectiva del usuario mientras usa el producto y no al revés. Otras razones para crear estos flujos incluyen que:

  • Ayudan a comprender el comportamiento del usuario, e incluso a descubrir caminos que no se hayan detectado antes.
  • Materializan frente al cliente las interacciones de los usuarios con sus productos.
  • Agilizan el proceso de creación de wireframes y de diseño de interfaces visuales.

Para crear un flujo de usuario las suposiciones que tengamos de nuestro usuarios no son suficientes: debemos conocer a nuestros usuarios y entender el contexto en el que van a interactuar con nuestro sistema (desde una PC de escritorio, desde su móvil dentro de su automóvil, con o sin audífonos, etc). También debemos conocer los objetivos del usuario al usar el producto, así como sus motivaciones.

Flujo para App de Pozole
No hay que confundir el flujo de usuario con el mapa mental. Aunque ambos instrumentos son complementarios, el mapa nos ayuda a conocer los elementos que tendrá el sistema y un flujo de cómo los usuarios interacción con él.

OmnigraffleHay varias herramientas que pueden ser útiles: Omnigraffle es de las herramientas líderes para la creación de diagramas para flujos de usuarios. Está disponible para Mac OS y iOS y tiene todas las funcionalidades necesarias para crear flujos y más, al grado de que hay quienes la utilizan para crear wireframes.

Axure RT- Herramientas de flujoOtra herramienta que recomiendo para crear flujos de usuarios, aunque está más enfocada a la creación de wireframes y prototipos, es Axure RT. Tiene una funcionalidad poco conocida para crear flujos de usuarios y vincularlos con los wireframes conforme se van trazando.

UX Specialist en Foo Studio. Creador de geekoteca.com. Fan de LEGO