Diseño atómico y elementos digitales

El término “página web” es una reminicencia del pasado académico de la web, y ha sido una metáfora útil para acercar a los usuarios finales a esta tecnología. Desde la perspectiva de diseño, es necesario de ir más allá de hacer páginas para comenzar a crear sistemas multiplataforma.

Con el tiempo, la Web ha evolucionado y ya no está confinada al escaparate de un navegador web en una PC, sino que ha dado el salto a una enorme cantidad de dispositivos diversos, desde dispositivos móviles como smartphones hasta televisiones inteligentes, todos con diferentes capacidades, tamaños de pantalla, formatos y métodos de interacción.

Algunos de los dispositivos con los que las personas navegan la web
Algunos de los dispositivos que las personas usan para navegar en la web.

En este multiverso tecnológico, los profesionistas que crean, diseñan y mantienen la web se benefician al utilizar métodos y mejores prácticas que ayuden a mantener la consistencia y la escalabilidad de sus proyectos. Un concepto que se usa con frecuencia en pláticas sobre diseño de experiencia de usuario es la modularidad. Es aquí donde entran los conceptos de Diseño Atómico.

La metodología de Diseño Atómico

Diseño Atómico (Atomic Design) es una metodología de diseño creada por Brad Frost enfocada en la reutilización acumulativa de elementos modulares sencillos para crear estructuras de información más complejas.

El Diseño Atómico no se trata de diseñar una sola instancia de una página web a la vez, sino que vistos desde un punto de vista más amplio, se usa para crear la base de sistemas más grandes. El Diseño Atómico ayuda a que el diseño interactivo pueda adaptarse rápidamente a diferentes dispositivos, y es compatible con procesos de diseño centrado en el usuario, ya que se puede implementar desde las etapas tempranas de diseño usando sketches y prototipos.

La metodología de Diseño Atómico  se compone de cinco capas que trabajan juntas para crear interfaces y sistemas:

Los elementos del Diseño Atómico

1. Átomos

En esta metodología, los átomos son los elementos básicos que se utilizan en la construcción de interfaces digitales que no pueden ser reducidos en componentes más simples sin perder su funcionalidad. Los átomos de una página web incluyen las etiquetas básicas de HTML como párrafos, campos de texto, botones y  etiquetas, así como elementos básicos de estilo como colores y tipografías.

Átomos en HTML
Átomos en HTML

La tabla periódica de elementos HTML de Josh Duck ilustra de manera muy clara como todos nuestros sitios web, web apps, mensajes de correo, intranets y cualquier cosa que se visualice con un navegador web están compuestos de los mismos elementos:

Tabla periódica de elementos HTML
Tabla periódica de elementos HTML

2. Moléculas

En el diseño de interfaces, las moléculas son grupos relativamente simples de elementos visuales que funcionan juntos como una unidad. Un ejemplo sería juntar un campo de texto, una etiqueta de formulario y un botón para crear la molécula de un formulario de búsqueda.

Molécula de búsqueda
Molécula de búsqueda

Cuando se combinan, estos átomos tienen un propósito nuevo: la etiqueta define la entrada del campo, y el botón envía la información del formulario para ejecutar una búsqueda. El resultado es un componente simple y reutilizable que puede ser incluirse en cualquier sistema que necesite la funcionalidad de búsqueda.

3. Organismos

Los organismos son componentes de UI relativamente más complejos compuestos por átomos, moleculas y otros organismos. Los organismos se integran para crear las diferentes secciones de una interfaz.

Si a nuestra molécula de búsqueda le agregamos algunos elementos más, podremos obtener el organismo del encabezado, un elemento común en muchas páginas web.

Organismo de Encabezado
Organismo de Encabezado

4. Plantillas

Las plantillas son objetos a nivel de página –noten como aquí abandonamos la metáfora de elementos químicos y regresamos a elementos editoriales– que utilizan componentes basados en átomos, moléculas u organismos en una distribución que hace tangible la estructura general de contenido.

Plantilla con contenedores
Plantilla con contenedores para contenido

Las plantillas organizan los componentes básicos y les agregan contexto para que la página funcione correctamente. Otra característica importante de las plantillas es que se enfocan en la estructura del contenido en lugar del contenido final de la página. Los sistemas dinámicos deben poder adaptarse a contenido dinámico que cambia todo el tiempo, y las plantillas proveen los mecanismos para definir las propiedades de los componentes que las integran, como el tamaño y alineación de sus imágenes o la longitud y estilo de sus encabezados y párrafos.

5. Páginas

Las páginas son instancias específicas de las plantillas que utilizan contenido real. Si tomamos la plantilla de la capa anterior y la llenamos contenido real en sus contenedores podremos ver el resultado final del proceso.

Página con contenido final
Página con contenido final

Ventajas de utilizar Diseño Atómico

Como mencionaba al principio, una de las principales ventajas de utilizar esta metodología es que está enfocada en la modularidad, lo que permite crear elementos simples que pueden reutilizarse constantemente en equipos de diseño y desarrollo de cualquier tamaño sin perder la consistencia del diseño final.

La modularidad del Diseño Atómico también habilita la transversalidad entre los componentes abstractos y concretos del diseño, lo que permite generar diferentes patrones de interfaz reutilizando los mismos elementos al reorganizar su arquitectura y crear nuevos contextos para ellos.

Modularidad y reutilización de elementos atómicos
Modularidad y reutilización de elementos atómicos

El Diseño Atómico es muy útil para crear un sistema de lenguaje de diseño (Design Language System o DLS) para crear prototipos y código más eficiente y que cualquier persona en el equipo de producción puede entender y utilizar para procesos de diseño y desarrollo más rápidos y productivos. Al final, el Diseño Atómico no es un proceso lineal, sino un modelo de pensamiento sobre el que se puede iterar para crear sistemas complejos partiendo de elementos sencillos.

Equipos de productos reales, como el de Airbnb se han beneficiado al implementar Diseño Atómico en sus procesos de diseño y desarrollo, integrándolo a las metodologías que ya utilizaban previamente.

Elementos de diseño en Airbnb creados con Atomic Design
Elementos de diseño en Airbnb creados con Atomic Design

Brad Frost y Dave Olsen crearon un generador de elementos llamado Pattern Lab, basados en los principios de Diseño Atómico. Este generador está creado con el principio de “Móvil primero” (mobile first) con opciones para ajustar el tamaño de las páginas y de agregar comentarios a las secciones del sitio y a los bloques de construcción a nivel de código.

Pattern Lab, un generador de elementos para Atomic Design
Pattern Lab, un generador de elementos para Atomic Design

La versión original de Pattern Lab está escrita en PHP, pero ya hay dos versiones para NodeJS: una para Gulp y otra para Grunt. Recomiendo ampliamente jugar un poco con el demo en la herramienta para entender mejor cómo funciona una implementación real de Diseño Atómico.

* * *

Vale la pena recordar que la diversidad en los dispositivos con los que nuestros usuarios navegan la web o consumen información no se detendrá, sino que seguirá creciendo de manera acelerada, y posiblemente los modelos de diseño y desarrollo tradicionales no soportarán esa diversidad sin adaptarse a formas más ágiles de trabajo. Diseño Atómico es una metodología que  puede ayudarnos a crear sistemas e interfaces que se pueden adaptar a cualquier entorno.

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.

Lean UX, parte 2

Lean UX es, en esencia, una manera distinta de pensar, una nueva mentalidad para el diseño y desarrollo de productos. En esta segunda parte, se describen los pilares y principios de Lean UX.

Pilares

Lean UX se apoya en tres pilares clave: Design Thinking, metodologías de desarrollo ágil de software y Lean Startup.

1. Design Thinking

Innovación que se alimenta de […] la observación directa de lo que la gente quiere y necesita en sus vidas y lo que les gusta o disgusta de cómo se hacen los productos, cómo se empaquetan, cómo se ponen en el mercado, cómo se venden y cómo se les presta ayuda […]. Se trata de una disciplina que, utilizando la sensibilidad y los métodos de los diseñadores, satisface las necesidades del público con aquello que resulta tecnológicamente posible y que, gracias a una estrategia de negocio viable, puede convertirse en valor para los clientes y en oportunidades en el mercado.

Tim Brown, CEO de IDEO

Design Thinking es un pilar básico de Lean UX debido a que aporta una manera de trabajar que alienta la colaboración en el equipo, independientemente del rol que cada uno desempeñe, y que considera el producto desde una perspectiva holística y abarcadora.

Proceso Design Thinking.
Proceso Design Thinking.

2. Metodologías de desarrollo ágil de software

Estamos descubriendo formas mejores de desarrollar software tanto por nuestra propia experiencia como ayudando a terceros. A través de este trabajo hemos aprendido a valorar:

  • Individuos e interacciones sobre procesos y herramientas.
  • Software funcionando sobre documentación extensiva.
  • Colaboración con el cliente sobre negociación contractual.
  • Respuesta ante el cambio sobre seguir un plan.

Esto es, aunque valoramos los elementos de la derecha, valoramos más los de la izquierda”.

Manifiesto ágil

 

El segundo pilar de Lean UX son las metodologías de desarrollo ágil de software. Lean UX aplica en el diseño de productos los cuatro pilares del Manifiesto Ágil:

  • Individuos e interacciones sobre procesos y herramientas. La comunicación efectiva entre miembros del equipo debe prevalecer por encima de las restricciones propias de las herramientas, ya sea en los procesos o en la producción.
  • Software funcionando sobre documentación extensiva. Cuanto antes dispongamos de un producto que funcione, seremos capaces de encontrar la solución que mejor se adapta al mercado.
  • Colaboración con el cliente sobre negociación contractual. Si el equipo colabora con el cliente, se podrá crear un entendimiento común sobre el problema y las posibles soluciones.
  • Respuesta ante el cambio sobre seguir un plan. Fallar rápido. Fallar barato. El producto inicial no dará con la mejor solución posible, el objetivo es averiguar qué se ha hecho mal lo antes posible, ajustar y volver a probar.

3. Lean Startup

El método Lean Startup es un conjunto de prácticas pensadas para ayudar a los emprendedores a incrementar las probabilidades de crear una startup con éxito. No es una fórmula matemática infalible, sino una filosofía empresarial innovadora que ayuda a los emprendedores a escapar de las trampas del pensamiento empresarial tradicional.

Eric Ries
Lean Startup

 

Lean Startup utiliza un ciclo de retroalimentación (feedback) denominado “crear-medir-aprender” que minimiza el riesgo de los proyectos y consigue que el equipo pueda desarrollar software y aprender de él en muy poco tiempo.

Con este método, los equipos desarrollan lo antes posible un Producto Mínimo Viable (MVP, por sus siglas en inglés) para comenzar el proceso de aprendizaje cuanto antes.

Proceso Lean Startup.
Proceso Lean Startup.

Lean UX aplica de manera directa la filosofía de Lean Startup sobre aumentar la frecuencia de contacto con clientes reales, reducir el despilfarro y probar lo antes posible las ideas del equipo para evitar caer en suposiciones incorrectas sobre el mercado.

En Lean UX, cada diseño es una solución propuesta para el negocio -una hipótesis-, el objetivo es validar esa solución lo más eficientemente posible, utilizando para ello la retroalimentación de los clientes.

La validación de hipótesis en Lean UX sigue el siguiente proceso:

  1. Crear un MVP.
  2. Probar la hipótesis mostrando el MVP a clientes reales.
  3. Utilizar lo aprendido para modificar el MVP.
  4. Iterar.

De esta forma, Lean UX permite de forma más rápida sacar a la luz la verdadera naturaleza de los productos. La filosofía de Lean UX es otorgar más importancia a la creación de un entendimiento común de la experiencia del usuario del producto que se diseña que a la creación y entrega de documentación.

Principios

A partir de los pilares de Design Thinking, las metodologías ágiles de desarrollo y Lean Startup, Lean UX plantea sus propios principios, una serie de atributos que permite a los equipos trabajar de manera colaborativa y multifuncional para lograr el desarrollo de productos orientados a la experiencia del usuario. 

Jeff Gothelf define los principios de la siguiente forma:

1. Equipos multifuncionales

Lean UX necesita que el equipo se conforme con todas las disciplinas que intervienen en la creación de un producto, que colabore intensamente y de manera contínua, desde el primer día hasta el final.

2. Equipos pequeños, dedicados, coubicados

Es necesario limitar el tamaño de los equipos para lograr: comunicación, concentración y camaradería.

3. Progreso igual a resultados, no a entregas de documentación

Lean UX mide el progreso del proyecto según los resultados de negocio, no por la acumulación de documentación.  

4. Equipos centrados en los problemas

El equipo debe estar enfocado en resolver problemas y no limitarse a implementar funcionalidades de desarrollo.

5. Eliminación del despilfarro

En Lean UX, todo lo que no ayude a conseguir resultados, se considera un despilfarro y debe eliminarse del proceso de trabajo.

6. Lotes pequeños

El equipo sólo debe crear el diseño necesario para avanzar, evitando crear un gran volumen sin probar ni implementar.

7. Descubrimiento continuo

En Lean UX, los clientes del producto participan en el proceso de diseño y desarrollo con el objetivo de validar las ideas sobre el producto. La investigación de mercado con clientes reales debe realizarse de forma frecuente y regular, así como involucrar a todo el equipo.

8. Get out of the building

Las respuestas a los problemas están en el mercado, con los clientes reales, no en la oficina del equipo. Es mucho mejor averiguar que nuestras ideas de solución están equivocadas antes de dedicar tiempo y recursos a construir un producto que nadie quiere.

9. Entendimiento común

A medida que un equipo trabaja de forma conjunta, logrará un conocimiento colectivo y una comprensión profunda del producto y de los clientes.

10. Antimodelos: estrellas, gurús y ninjas

Lean UX privilegia una visión de equipo. Las estrellas, gurús, ninjas y expertos reducen la colaboración y frenan la cohesión del equipo.

11. Exteriorización del trabajo

Los equipos deben mostrar su trabajo de forma abierta, más allá de un monitor. El uso de pizarrones, tableros, notas adhesivas y demás anotaciones visibles es un común denominador en Lean UX para mostrar el trabajo a compañeros, colegas y clientes.

13. Hacer en lugar de analizar

Tiene más valor crear la primera versión de una idea que emplear horas de  discusión en una reunión debatiendo si vale la pena o no construirla.

14. Aprendizaje en lugar de crecimiento

Lean UX prioriza aprender sobre una idea y después buscar su crecimiento. Escalar una idea que no se ha probado es arriesgado.

15. Permiso para equivocarse

Los equipos en Lean UX necesitan experimentar con las ideas. La mayor parte de estas ideas, no funcionará. El equipo debe sentirse libre para equivocarse. Las grandes ideas siempre proceden de los riesgos.

16. Escapar de los negocios basados en entregables

El progreso de un proyecto depende de los resultados que se consiguen, no de los documentos que el equipo escriba.

***

Tener presente los pilares y principios de Lean UX nos obliga a no olvidar su esencia, la empatía hacia los usuarios (Design Thinking), el trabajo en equipo (métodos ágiles) y la experimentación como instrumento de validación (Lean Startup). Las técnicas particulares y las fases que comprenden el método en realidad son secundarias, o como dice El Principito, “lo esencial es invisible a los ojos”.

En la tercera parte de esta serie, describiré la primera fase del proceso de Lean UX: la declaración de supuestos y las técnicas que comprende.

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.

Lean UX, parte 1

Lean UX es, en esencia, una manera distinta de pensar, una nueva mentalidad para el diseño y desarrollo de productos. Involucra tres cosas fundamentales: un cambio de procesos, un cambio en la forma de enfrentar el trabajo de diseño y una transformación en la forma de gestionar los proyectos.

¿Por qué es necesario cambiar la forma en que se diseñan los productos?

Un poco de historia

En marzo de 2011, Jeff Gothelf, un reconocido diseñador de producto,  publicó Lean UX: Getting Out of the Deliverables en donde describe por primera vez el concepto Lean UX. Para Jeff, la manera en la que los diseñadores colaboran en el desarrollo de productos atraviesa una situación crítica, pasan más tiempo creando documentos en donde se especifica cómo debería ser el producto en lugar de crearlo.

Cuando los diseñadores trabajan con el paradigma de priorizar la creación de documentación exhaustiva y se combina con un entorno de desarrollo en cascada, el resultado es un consumo de tiempo perdido y la creación de una enorme cantidad de despilfarro (waste). Un despilfarro o residuo se define como cualquier cosa que termina no siendo realmente útil en el desarrollo de un producto.

Típicamente, el modelo en cascada para el desarrollo de software sigue las siguientes fases:

Modelo en cascada
Modelo en cascada

Bajo este escenario, las actividades de diseño generalmente involucran:

  • Esperar la definición de requisitos para contar con la aprobación de iniciar.
  • Leer la documentación de requisitos.
  • Elaborar mapas de sitio de alto nivel (sitemaps) y flujos de trabajo (workflows).
  • Llegar a un consenso y aprobación.
  • Desarrollar wireframes.
  • Presentar a las partes interesadas, conseguir consenso y aprobación.
  • Crear diseños visuales por cada wireframe.
  • Presentar a los interesados hasta obtener una aprobación final (después de repetidos ciclos de revisión).
  • Escribir las especificaciones, detallando cada pixel e interacción.
  • Realizar pruebas de usabilidad para futuras mejoras.
  • Revisar la fase de desarrollo, aprobar e iniciar la implementación.

Este camino deja muchas horas de despilfarro y muchos diseñadores frustrados a su paso porque al finalizar, el producto de software no corresponde a las necesidades reales de los clientes. La mayor mentira en el mundo del desarrollo de software es pensar que existirá una “Fase II” del proyecto para corregir todos los problemas que surgen en la primera entrega. La verdad es que la mayoría de las veces nunca existe una fase II.

Cómo funcionan los proyectos
Cómo funcionan los proyectos en cascada

Los métodos tradicionales de desarrollo de productos se empeñan en definir organizaciones y equipos de trabajo lineales en un mundo sometido a un cambio constante, pretende crear silos aislados en un entorno donde se necesita colaboración continua e ininterrumpida.

Este es el paradigma que intenta romper Lean UX.

Inspirado por las teorías de Lean Startup, Design Thinking y del desarrollo ágil de software, Lean UX es la práctica de traer a la luz la verdadera naturaleza del trabajo de los diseñadores, de forma más rápida, con menos énfasis en las prestaciones (documentación) y una mayor concentración en la experiencia real que está siendo diseñada.

En Lean UX los documentos tradicionales de diseño (sitemaps, wireframes, workflows, etc.) se descartan o, al menos, se reducen a la cantidad mínima de información necesaria para empezar a trabajar en la implementación lo más pronto posible. Los ciclos largos de diseño detallado se evitan en favor de ciclos muy cortos e iterativos, de baja fidelidad, con retroalimentación temprana y frecuente procedente de todos los miembros del equipo de implementación. La colaboración con todo el equipo se vuelve fundamental para el éxito del producto.

En su concepción original, el proceso Lean UX se definió a través de las siguientes fases:

Proceso original Lean UX
Proceso original Lean UX

El planteamiento retomó muchos conceptos provenientes de las metodologías ágiles: en una fase inicial, el equipo comienza a dar sus puntos de vista sobre la dirección del diseño, así como su viabilidad.  A continuación se realizan cambios a la idea original, que incluso puede ser desechada en su totalidad para proponer una nueva idea.

La inversión inicial en su representación a través del dibujo es tan mínima que no hay ningún costo significativo para replantear por completo el sentido. Una vez que se ha acordado internamente una cierta dirección, un prototipo de baja fidelidad ayuda a validar la idea con clientes reales. El aprendizaje ayuda a perfeccionar la idea, y el ciclo se repite.

Lean UX se enfocó en las actividades de diseño, lo cual permitió incorporar su ejecución a prácticamente cualquier proceso o marco de trabajo de desarrollo de software.

Desde su aparición, Lean UX empezó a ser adoptado en gran cantidad de organizaciones. Dos años más tarde, en 2013, Jeff publica el libro Lean UX: Applying lean principles to improve user experience donde define el ciclo que conocemos actualmente:

Ciclo Lean UX
Ciclo Lean UX

El ciclo inicia con la declaración de supuestos sobre el proyecto para determinar las hipótesis, después es necesario determinar qué ideas sobre el producto son válidas y cuáles deben descartarse a través de un Producto Mínimo Viable, el cual debe permitir la ejecución de un experimento que permita generar investigación y obtener retroalimentación de clientes reales. El aprendizaje adquirido es utilizado en la siguiente iteración del ciclo.

Más allá del ciclo que lo define, Lean UX representa un viaje hacia una nueva forma de trabajar, quienes deseen iniciar este viaje deben estar dispuestos a romper paradigmas, un tema particularmente difícil para quienes están inmersos en métodos de trabajo rígidos y lineales, aquellos que siguen esperando la fase II.

Escapemos de los negocios basados en documentación y volvamos a concentrarnos en la tarea más urgente: hacer felices a nuestros clientes”, es el llamado que hace Jeff Gothelf en Lean UX.

En la segunda parte de esta serie, hablaré sobre los principios de Lean UX.

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.

Tendencias sobre User Experience para 2016, parte 2

User Experience, como campo profesional, enfrentará nuevos retos y oportunidades en el 2016. Dentro de las tendencias clave a nivel internacional están la cada vez mayor relevancia y especialización de los profesionales de UX en las empresas. En América Latina seguiremos esforzándonos por romper el mito, matar al unicornio y seguir creciendo a nuestro propio ritmo, un paso a la vez.

En la primera parte de este artículo escribí sobre los principales patrones de diseño de interacción y conceptos que se consolidarán en 2016 relacionados a la importancia de UX en el diseño web, que ha sido señalada como la tendencia más relevante para este año.

Toca el turno de analizar qué podemos esperar de User Experience como campo profesional en los escenarios internacionales y locales, hacia dónde se orientará su crecimiento y, más importante aún, cómo podemos contribuir y mejorar como profesionales en nuestro entorno diario.

UX como campo profesional en el 2016

Es un gran momento para ser UX Designer

Unicornio UX
El unicornio de UX – Fuente

User Experience no sólo se ha convertido en un diferenciador dentro de las organizaciones para el desarrollo de productos; sino en una necesidad.

Empresas de todas las formas y tamaños pronto tendrán al menos un profesional a cargo de la supervisión de la experiencia de usuario de sus productos y servicios”, proyectan en DESIGN CC.

Desde la perspectiva de Brian Lucid, profesor de Massey University, la contratación de los diseñadores e investigadores UX en las grandes y medianas empresas ha ido en aumento y se mantendrá a lo largo del 2016. Sin embargo, afirma que los profesionales más especializados seguirán siendo escasos. Las mejores oportunidades generarán selectividad, por los que los de mayor demanda serán atraídos hacia organizaciones líderes en diseño y hacia proyectos de gran impacto.

2016 será un gran momento para convertirse en UX Designer. De acuerdo con una lista publicada por Glassdoor, un sitio global de reclutamiento y búsqueda de empleo, UX Designer es uno de los diez mejores trabajos en el mundo. Las personas que laboran como UX Designers consideran que el balance vida-trabajo de su profesión es de 3.9 en una escala de 5.

Parte del balance del trabajo de un UX Designer tiene que ver, evidentemente, con el tema de la remuneración económica. No profundizaré mucho en el tema, pero si quieres saber cuánto gana un UX Designer alrededor del mundo, puedes consultar esta lista.

Aunque la ebullición y consolidación del campo profesional de UX está ocurriendo en muchas latitudes, en nuestro contexto este escenario parece más una falacia que una realidad tangible. Como buenos UX Designers, vayamos a las métricas y datos duros para conocer un poco más el contexto de nuestra industria.

Estado de la industria de UX durante el 2015 y tendencias para 2016

UserTesting realizó a finales del año pasado una encuesta para conocer el estado de la industria de UX. Los resultados fueron dados a conocer recientemente y estás son las cifras más importantes:

  • Existe una ligera tendencia de género, 55% de los profesionales de UX son mujeres y 44% son hombres (sí, oficialmente existe un 1% de UXers que se clasifica como “indeterminado”).
  • Cerca del 40% de los profesionales de UX se encuentran en el rango de edad de 26 a 34 años, seguidos de quienes se encuentran entre los 34 y 45 años con cerca del 30%. Los millenials somos la banda en UX.
  • Más del 50% cuenta con estudios de nivel licenciatura e incluso un grado de maestría o doctorado.
  • A la pregunta: ¿cuál es la función de tu trabajo?Los encuestados respondieron:
    1. UX
    2. Diseño de producto
    3. Marketing
    4. Ingeniería
    5. Ventas
  • 56.4% desempeñan su actividad laboral dentro de una empresa, mientras que el 20.27% son consultores independientes o freelancers.
Gráfica rol de UX Designers
Rol de los profesionales de UX dentro de las organizaciones. Fuente: Industry Survey Report 2015, User Testing.
  • Las 5 principales industrias en donde se desenvuelven los profesionales de UX son:
  1. Marketing
  2. Educación
  3. Servicios tecnológicos orientados al consumo
  4. Servicios tecnológicos orientados a negocios
  5. Salud e industria farmacéutica
  • A la pregunta: ¿qué equipo en tu empresa valora más la investigación de usuarios? Los encuestados respondieron:
  1. No estoy seguro (en serio, es la respuesta número uno)
  2. UX
  3. Producto
  4. Marketing
  5. Ingeniería
  • De acuerdo con los encuestados, las 5 tendencias online que más impactarán a la disciplina de UX en los próximos 5 años serán:
  1. Interacción multi-dispositivo
  2. Tecnología wearable
  3. Diseño UX global
  4. Experiencias omnicanal
  5. Interfaces touch
Gráfica tendencias previstas por UX Designers en 2016
Tendencias online que más impactarán en los próximos 5 años. Fuente: Industry Survey Report 2015, User Testing.
  • 7.56% afirma que su compañía invierte un presupuesto mensual de $1,000 a $5,000 USD en UX. Sin embargo, el 32.34% admite que no existe un presupuesto fijo para UX en sus organizaciones.
  • Las 5 técnicas y métodos de UX más practicados son:
    1. Pruebas de usabilidad (No es que UserTesting nos quiera vender nada, obviamente)
    2. Estudios de campo
    3. Focus group
    4. Entrevistas
    5. Encuestas
Gráfica métodos realizados por UX Designers
Técnicas y métodos más practicados por profesionales en UX. Fuente: Industry Survey Report 2015, User Testing.
  • 51.36% de las empresas no cuenta con un equipo dedicado a investigación de usuarios.
  • Cerca del 40% de las empresas sólo cuenta con equipos de 2 a 5 personas en su organización dedicadas a temas de UX. Cerca del 20% cuenta todavía con equipos de una sola persona (el mítico unicornio de UX).

UserTesting prevé una clara tendencia de expansión de los equipos dedicados a hacer investigación UX en las empresas, contando cada vez con mejores presupuestos y recursos.

“En los próximos años, las empresas deberán invertir más en la creación de productos y experiencias basadas en la retroalimentación continua de sus clientes, por lo que la experiencia del usuario se convertirá en una responsabilidad compartida entre todos los equipos de una organización”.

El rol de UX en la industria del diseño durante 2015

Otro estudio revelador fue el realizado por la editorial O´Reilly, también a finales de 2015. Aunque la encuesta realizada no estuvo orientada exclusivamente a diseñadores UX sino que también se incluyeron diseñadores de otras disciplinas, gerentes y directores de empresas, justo por esa circunstancia sus resultados muestran la relevancia de UX en la industria del diseño en general.

Veamos las cifras más interesantes:

  • 22% del total de diseñadores encuestados indicaron que el título de su puesto de trabajo se relaciona con UX/UI, siendo la tendencia más alta. Esto significa que cada vez más diseñadores, gráficos o industriales han orientado su actividad profesional hacia UX, aunque el término “UI” podría señalar que tienen una mayor relación con actividades de diseño de interfaces o de diseño de interacción.
    UX no es UI, lo repetiremos hasta el cansancio.
  • 90% de los diseñadores trabajan bajo el esquema de una metodología ágil. Aquí un dato impactante: los diseñadores que no están familiarizados con ningún proceso, perciben en promedio un sueldo 30% inferior en comparación con aquellos que trabajan acorde a una metodología en sus empresas.
Gráfica metodologías de UX Designers
Metodologías más implementadas entre diseñadores. Fuente: 2016 Design Salary Survey Report, O´Reilly.
  • Las 5 actividades que más realizan los diseñadores en sus empresas son:
    1. Diseño de interfaz de usuario
    2. Wireframes
    3. Sketching
    4. Prototyping
    5. Presentación a cliente

Aunque indudablemente es una tendencia positiva, celebraría más si actividades como arquitectura de información, pruebas de usabilidad o investigación de usuarios tuvieran igual relevancia, pero como dijo Cerati, ahí vamos.

Gráfica actividades ux designer
Actividades más recurrentes  entre diseñadores. Fuente: 2016 Design Salary Survey Report, O´Reilly.
  • Dentro de las herramientas más utilizadas por los diseñadores, se encuentran varias orientadas hacia actividades UX, compitiendo directamente con gigantes de la industria como Illustrator, Photoshop y compañía:
    • Google Analytics
    • HTML/CSS
    • Sketch (casi a la par que Illustrator)
    • InVision
    • Axure
    • Balsamiq
    • Pixate
    • Marvel
    • Flinto
    • Proto.io
    • UX Pin
    • User Testing
    • User Zoom
    • Morae
    • UsabilityTools
    • Usability Hub
    • Usabilla

La creciente proliferación de herramientas orientadas a UX parece estar canalizando nuestros esfuerzos como profesionales a incrementar, cada vez más, habilidades técnicas en software especializado, pero quizá dejando de lado lo más intrínseco: observar a las personas para desarrollar empatía. Es un foco de alerta que no hay que desestimar.

En conclusión, la tendencia es clara, diseñadores de todos los perfiles tienen, cada vez más, una participación protagónica en User Experience. Para muchos puede parecer bastante lógico e irrelevante, o sea, ¿todos en UX somos diseñadores, no?

Hay que recordar que apenas hace algunos unos años disciplinas como Interacción Humano-Computadora, Usabilidad o Arquitectura de Información eran ejercidas principalmente por profesionales provenientes de ciencias de la computación, ingeniería e informática. Poco a poco, otros perfiles se han ido sumando, de acuerdo con un reporte de Nielsen Norman Group, actualmente los profesionales con mayor presencia en UX han surgido de carreras como diseño (11%), psicología (9%) y comunicación (9%), dejando atrás a ciencias de la computación con 7%. 

El estado de UX en América Latina

El escenario descrito hasta ahora refleja, en realidad, sólo una parte del contexto. La encuesta de UserTesting tiene una participación abrumadora de profesionales de UX provenientes de Estados Unidos (64.83%) y lo mismo ocurre con el ejercicio realizado por O´Reilly con 79%. La participación de UX Designers de América Latina representó, en promedio, menos del 2%.

¿Qué pasará en México y otros países latinoamericanos durante 2016 en materia de UX? Una respuesta alentadora proviene de Rich Gunther, presidente de User Experience Professionals Association (UXPA):

“Creo que UX continuará su expansión y madurez en América Latina. El mismo patrón de comportamiento que vimos en Asia hace 10 años, está ocurriendo en lugares como Argentina y México”.

Para Gunther, la representación de organizaciones como UXPA o capítulos locales de Interaction Design Association (IxDA) en países de América Latina, así como la celebración de eventos (como Interaction South America) o la publicación de revistas digitales especializadas en UX en español (como UXPA Magazine), son un indicador positivo.

Otras voces de líderes de la industria de UX en América Latina, como Luis Carlos Aceves, Jorge Barahona, Paulo Saavedra, entre otros, confían en que los mercados de la región maduren y evolucionen hacia modelos que prioricen el diseño como servicio, tal como ocurre en muchas compañías globales. Para lograr este objetivo, apuntan, es importante consolidar una comunidad regional que pueda acabar con los silos de profesionales que encontramos actualmente, así como romper barreras culturales para lograr la evolución de nuestra industria local.

A pesar de las señales alentadoras, la realidad parece tajante: en América Latina estamos al menos 10 años rezagados en materia de User Experience. Lo que hoy discutimos y alentamos en México, Argentina o Brasil, es ya un tema del pasado en Estados Unidos y varios países de Europa.

Para Santiago Bustelo y el equipo de Kambrica, en los últimos 15 años se sentó la base de la industria de UX, desde señalar qué es la usabilidad y accesabilidad, por qué es importante y cómo llevarlas a cabo, hasta la integración de User Experience en metodologías ágiles. Todo esto representa una discusión superada, una lección aprendida.

Durante los próximos 15 años, la parafernalia girará en torno a cómo la tecnología y los negocios generarán cada vez mayores órdenes de complejidad y abstracción, abriendo nuevos campos y desafíos a resolver en materia de User Experience, llevando el campo profesional a un nivel más estratégico y de gestión.

Si la línea del tiempo trazada por Kambrica es asertiva -que creo que lo es- la proyección del rezago en materia de UX en América Latina parece bastante cierta también. ¿Cuántos de nosotros no seguimos desmitificando en nuestras organizaciones qué es la usabilidad, evangelizando sobre la importancia de la investigación de usuarios, esforzándonos por ir más allá de sólo la creación de wireframes y prototipos?

Por supuesto, no es posible generalizar la situación hacia todos los ámbitos, organizaciones y profesionales, pero claramente es un común denominador.

El reto es evidente: es necesario llevar la discusión y la ejecución de UX en nuestro entorno a un nivel superior y acortar distancias, lo más pronto posible, respecto al contexto internacional. No es un tema inviable, hoy más que nunca la tecnología nos permite contar con el conocimiento y herramientas necesarias, sólo debemos convertirnos en un agente del cambio, de nosotros mismos y de nuestras organizaciones.

10 lecciones aprendidas por UX Designers para implementar en 2016

Como conclusión a este largo, largo artículo (¡gracias por llegar hasta aquí!), quiero compartirles los 10 consejos que los UX Designers, entrevistados por NN Group en su reporte User Experience Careers les darían a quienes enfrentan su primer año de vida como profesionales de esta industria.

Lo que ellos vivieron hace algunos años seguramente serán los retos a los que se enfrentarán muchos UX Designers de América Latina en 2016, no está de más tomarlos en cuenta:

¿Cuál es el mejor tipo de empresa y las tareas más representativas que las personas que inician actividad profesional deben buscar?

      • “Es importante conseguir un primer trabajo en el que tengas oportunidad de hacer la mayor cantidad de actividades UX”.
      • “Es mejor estar en un lugar donde la usabilidad tiene ya cierto reconocimiento, presupuesto y apoyo para la gestión”.
      • “Busca trabajar donde tengas la oportunidad de marcar una diferencia. Tienes que encontrar empresas que tengan procesos viables y roles UX definidos, para que puedas ser más eficaz”.

¿Qué fue lo que más te ayudó en tu primer año?

    • “Hacer muchos proyectos y actividades diferentes”.
    • “Buscar un mentor, ver a otros con más experiencia cómo realizaban su trabajo, preguntar todo lo posible, aprender”.
    • “Estar en una comunidad de apoyo, en un grupo que valore UX”.
    • “Buscar capacitación formal en disciplinas UX”.
    • “Leer”.
    • “Realizar pruebas de usabilidad – hablar con los usuarios y argumentar a partir de datos”.
    • “Documentar el trabajo para crear un portafolio y buscar mejores oportunidades”.

Espero que estos consejos te ayuden a mejorar como profesional y contribuir así al crecimiento de nuestra industria. Tómalo como un reto en este nuevo año. ¿Cuántas de estas acciones estás realizando y en cuántas no has invertido suficientes esfuerzos?

En la tercera y última parte de este artículo hablaré sobre las tendencias tecnológicas más allá del mundo web y de dispositivos móviles. Trataré de exponer qué podemos esperar de Big Data, Internet of Things, wearables, Cloud Computing, Software as a Service y ese conjunto de soluciones en busca de un problema.

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.

Lenguajes para prototipado: Jade

El diseño de experiencia de usuario es, por necesidad, una labor colaborativa y multidisciplinaria. Si decimos que ‘todos somos diseñadores’, ¿por qué no todos podemos también aportar código?

Un equipo que realiza diseño centrado en el usuario debe de contar entre sus miembros con al menos un diseñador que materialize la parte visual del proyecto y un programador que realice la ejecución técnica.

Aunque todavía hay empresas que continúan en la búsqueda del mítico Unicornio de UXuna rara criatura, mitad diseñador y mitad programador-, para la mayoría de los equipos de UX uno de los principales retos es lograr que sus miembros puedan trabajar y comunicarse de una manera coherente.

En el caso de la relaProgramando en HTMLción del dúo diseñador / programador, uno de sus principales problemas es la capacidad de cada uno de generar código útil para producción, y es un problema porque la mayor parte de esa responsabilidad normalmente cae en el programador, que debe lidear con la complejidad de volver tangible una visión de diseño que surge de bocetos en papel, dibujos en un programa de diseño o en el mejor caso, de un prototipo cuyo código no es reutilizable.

Éste es en parte, un problema creado en parte por la formación de los diseñadores a los que les hacen creer que escribir código es algo complejo y en parte por la falta de herramientas correctas para diseñar código usable. Hay una larga lista de programas de diseño WYSIWYG (What you see is what you get – Lo que ves es lo que obtienes) que ofuscan el código para que el diseñador no lo vea, pero que al final producen código poco eficiente y complejo que el diseñador que lo hizo no puede entender y que para integrarlo a un producto real requiere retoques del programador que deberá darle mantenimiento en lo sucesivo.

Lo que ves es lo que quieres decir

Una buena práctica de desarrollo es la separación en capas de los componentes de presentación, contenido y lógica para asignar responsables a cada una y después integrarlos; así la actualización de una capa por mantenimiento no obliga a las otras a cambiar a menos que cambien los requerimientos del proyecto.

El desarrollo para web en el navegador está diseñado de esta manera, dejando el contenido a HTML, la presentación de CSS y la lógica de la aplicación a Javascript. Idealmente la generación de HTML y CSS debería ser lo suficientemente sencilla para el diseñador de manera que pudiera enfocarse en qué está haciendo, y no en cómo lo está haciendo.

Estructura de una página web con HTML, CSS y Javascript en archivos separados
Estructura de una página web con HTML, CSS y Javascript en archivos separados

Para lograr eso es necesario dejar los generadores de código visuales WYSIWYG por el modelo WYSIWYM (What you see is what you mean – Lo que ves es lo que quieres decir). En este modelo el diseñador se encarga de introducir el contenido de forma estructurada siguiendo su valor semántico en lugar de indicar su formato de representación final.

Jade – un lenguaje sencillo para plantillas web

Logo de JadeUna herramienta que puede servir justo a este propósito es Jade, un sistema para generación de plantillas HTML hecho para trabajar con NodeJS y que puede usarse como lenguaje para prototipado.

Jade utiliza un metalenguaje -casi mecanografía- basado en la notación de HTML que ha sido simplificado para ser breve, consciso y fácil de recordar.

Este es un ejemplo de una página web escrita en Jade:

doctype html
html(lang="es")
  head
    title Jade
  body
    h1 Jade - sistema de plantillas para Node
    #container.col
      if youAreUsingJade
        p ¡Gracias por usar Jade!
      else
        p Deberías usar Jade
      p.
        Jade es un lenguaje de plantillas práctico y simple 
        enfocado en tener buen desempeño y características poderosas.

que genera el siguiente código HTML:

<!DOCTYPE html>
<html lang="es">
  <head>
    <title>Jade</title>
  </head>
  <body>
    <h1>Jade - sistema de plantillas para Node</h1>
    <div id="container" class="col">
      <p>¡Gracias por usar Jade!</p>
      <p>
        Jade es un lenguaje de plantillas práctico y simple enfocado en tener un buen desempeño y características poderosas.
      </p>
    </div>
  </body>
</html>

Es así de simple.

Jade se encarga de generar código HTML bien formado. En un ejemplo para generar una lista numerada escribimos:

ol
 li Elemento A
 li Elemento B
 li Elemento C

que genera en HTML:

<ol>
      <li>Elemento A</li>
      <li>Elemento B</li>
      <li>Elemento C</li>
</ol>

Jade también pueden utilizar variables y condicionales de Javascript para generar código HTML según su configuración:

var user = { description: 'Usuario frecuente' }
var authorised = false
#user
 if user.description
   h2 Descripción
   p.description= user.description
 else if authorised
   h2 Descripción
   p.description.
     El usuario no tiene descripción, ¿por qué no añades una?
   else
     h1 Description
     p.description El usuario no tiene descripción

en HTML:

<div id="user">
     <h2>Description</h2>
     <div class="description">Usuario frecuente</div>
</div>

Existe documentación sobre cómo escribir en Jade, y en general se puede comenzar a utilizar en poco tiempo. No es necesario tener un servidor, se puede instalar de manera local en un equipo de desarrollo / diseño, y tanto NodeJS como Jade son gratuitos.

Jade puede ser una herramienta útil para prototipar y generar código para prototipos funcionales usando como guía los bocetos y prototipos en papel, los archivos de Jade son compactos, fáciles de leer por humanos y es muy sencillo editarlos y compartirlos.

Lo mejor es que el HTML generado por Jade puede integrarse después al código en producción con poco esfuerzo, ya que su salida es de alta calidad y es compatible con otras librerías y frameworks que se usan en desarrollo web como Bootstrap, JQuery o AngularJS entre otros.

¿Es esto suficiente para habilitar a los diseñadores a escribir código? Tal vez no, pero es un buen acercamiento a resolver el problema y una buena idea para prototipar rápidamente con código para que todos los miembros de un equipo y no solo los desarrolladores puedan aportar código útil a un proyecto.

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.

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.

Diseño de UX en la vida real

Todas las cosas con las que tenemos contacto a diario fueron diseñadas por alguien: tu escritorio, tu estufa, la cerradura de la puerta de tu casa, la botella de agua que compras en la tienda y  los sistemas que usan los bancos, las aerolíneas y el gobierno.

Cuando me ha tocado revisar portafolios de diseñadores de UX generalmente me encuentro con muchos elementos básicos: una app del clima, un formato de “tarjeta de perfil”, rediseños estéticos de Facebook o Twitter y por supuesto algunas páginas web que cumplen con el “esquema estándar”. Sí, ese del que ya he hablado antes.

Every fucking website

En un mundo en dónde hay tantas cosas que requieren Diseño de Experiencia de Usuario, ¿por qué nos conformamos con las mismas referencias que hacen todos los demás?

Por ejemplo, en este caso de la agencia Pentagram en 2013, ellos buscaron rediseñar algo que los ciudadanos de Nueva York utilizan todos los días pero que nadie se detiene a considerar si su implementación es la más correcta: los señalamientos de estacionamiento.

Estacionamientos NY
Los señalamientos de estacionamientos en Nueva York, antes y después de un rediseño.

En 2015 dí con una nota similar donde hablaban del rediseño de los señalamientos de estacionamiento, pero en Los Ángeles. Este es uno de los casos que más me ha gustado, no solo porque el nuevo diseño es más funcional que el propuesto para Nueva York, sino porque además son “a prueba del futuro”:  los nuevos letreros incluyen un ‘beacon’ que vía Bluetooth transmite información a los autos inteligentes que pronto estarán disponibles en el mercado.

Estacionamientos en LA
Rediseño de los señalamientos de estacionamiento para la ciudad de Los Ángeles, para hacerlos más claros, accesible e inteligentes.

The Design of Everyday ThingsEsto, por supuesto, no es un concepto innovador en UX. Don Norman (de Nielsen Norman, institución líder en investigación de usuarios) escribió en 1988 un libro llamado “El diseño de los objetos cotidianos (The Design of Everyday Things)” en el que escribe sobre la enorme cantidad de objetos con los que interactuamos cotidianamente y cómo no nos detenemos a pensar que tan “usables” son.

Este libro, por cierto, es considerado un libro básico dentro del area de Diseño de Experiencia de Usuario, junto con “Emotional Design, también de Don Norman y “No me hagas pensar” de Steve Krug. Se los dejo de tarea.

Nuestra tarea como Diseñadores de Experiencia de Usuario va más allá de pensar en apps y en rediseños estéticos de plataformas que ya existen; los conocimientos involucrados en el proceso de Diseño de UX pueden ir mucho más allá, empezando por lo que nosotros elegimos “mejorar” como hobby o para demostrar nuestro talento y experiencia en esta área profesional.

Creo que a la industria creativa le faltan más diseñadores que tengan un portafolio o ‘book‘ que muestre cómo han decidido rediseñar una cerradura o una cartera y que demuestren un enfoque en todo lo que los UXers hacemos: entrevistar usuarios, observar patrones, simplificar, reducir la fricción entre el usuario y su objetivo a cumplir, plantear propuestas de estructura y diseño, y que termine aportando una solución diferente y nueva; que resuelva un problema de los cientos (o miles) de problemas de diseño a los que los usuarios nos enfrentamos todos los días.

Hablando de negocios, estoy consciente de que en ‘La Vida Real ’ los clientes no tienen considerados todos los puntos en los que sus usuarios interactúan con su producto. En la industria de la mercadotecnia y la publicidad , éste es un mal muy común porque por lo general tenemos que lidiar con el producto, sea como sea (usable, útil, diferente, o ninguno de los anteriores) y en el mejor de los casos con clientes que saben que su producto o servicio tiene un problema, pero ese problema “no le toca a marketing”. De cualquier manera tenemos la responsabilidad de detectar y monitorear todo lo que el usuario siente, piensa y quiere lograr; informarle al cliente y basar nuestras decisiones en ellos. Debemos trabajar en conjunto con nuestro cliente para encontrar una solución que puede o no resolverse en una interfaz virtual.

Tal vez tus usuarios necesitan interactuar con un humano para ciertas tareas (como BBVA que implementó video conferencias en sus cajeros automáticos), tal vez los usuarios no quieren gastar 15 mil pesos cada año (como descubrió la categoría de Smartphones este año). Tal vez la gente está utilizando el producto de una manera que quién lo diseñó no tenía en mente (Como Justin.TV que se transformó en Twitch.TV, especializado en video juegos). Todos estos son problemas que no se resuelven por medio de una interfaz en una app y sin embargo, todos estos son problemas que un Diseñador de Experiencia de Usuario es capaz de detectar, monitorear y mejorar.

Experiencia de Usuario es más que pantallas, dispositivos y páginas: UX está en todo lo que nos rodea, desde la ropa interior hasta el software especializado. Todos esos productos necesitan diseñadores expertos y versátiles que puedan entender las necesidades y el contexto de sus usuarios y que sean representantes del interés por un mundo más usable y accesible.

Trabaja como Planner en SCLBITS. Es curador de UX Mexico y parte del equipo de UX Nights.