Lean UX, parte 4

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.

En esta cuarta parte, se describe la fase de creación de un Producto Mínimo Viable que inicia con la ejecución de un Estudio de Diseño Colaborativo.

Lean UX, fase 2, creación de un MVP.
Lean UX, fase 2, creación de un MVP.

Estudio de Diseño Colaborativo

Lean UX es un proceso colaborativo al permitir que todos los miembros del equipo opinen y participen en el proyecto en sus etapas iniciales.

La colaboración es una de las formas más efectivas para que los equipos estén alineados con la directriz de diseño. La premisa básica es que mientras más conocimiento se comparte y se visualiza, menos necesidad habrá de documentar cada etapa del trabajo para poder avanzar a la siguiente.

Otro pilar en el que se sustenta el diseño colaborativo es la conversación, pues permite aportar conocimiento al proyecto y representa un catalizador en la integración y unión del equipo.

Una típica sesión de diseño colaborativo involucra la participación de todo el equipo ideando y bosquejando propuestas de solución, todas las ideas se presentan y comparten, generando discusión alrededor de ellas hasta llegar a un consenso común sobre la opción con más probabilidad de éxito.

Método: Estudio de diseño

Es una sesión informal donde todo el equipo se reúne para generar soluciones potenciales a un problema de diseño.  

¿Quiénes participan?

  • Todo el equipo. Todas las disciplinas involucradas.

Antes de empezar

  • Declaración de supuestos.

Ejecución

  • Definición del problema y sus restricciones.
  • Generación de ideas individuales (divergencia).
  • Presentación y discusión.
  • Iteración
  • Generación de ideas de equipo (convergencia)

Plantillas

  • Templates para sketching de navegadores, dispositivos móviles.

Descripción de pasos

Lean UX, Estudio de diseño
Estudio de diseño. Fuente imagen: https://paris-en.numa.co/var/sise/storage/ckeditor/images/DSCF5945(1).JPG

Definición del problema y restricciones

El tiempo estimado por iteración es de 15 a 30 minutos.

En este paso se revisa la declaración de supuestos, hipótesis, protopersonas y resultados a través de una discusión del equipo con el soporte visual de todo lo trabajado hasta ahora.

Generación de ideas individuales

El tiempo estimado por iteración es de 10 minutos.

Cada miembro del equipo trabaja de forma individual bosquejando ideas que puedan aportar a la solución. Lo ideal es tener un máximo de seis ideas por participante.

Presentación y críticas

El tiempo estimado por iteración es de 3 a 5 minutos por persona.

Cada participante tendrá un tiempo finito para presentar y argumentar su idea, a quién va dirigida (protopersona) y qué función resuelve (hipótesis). El resto del equipo debe realizar una crítica constructiva a la propuesta presentada.

Iteración y perfeccionamiento

El tiempo estimado por iteración es de 5 a 10 minutos.

Después de escuchar las propuestas y recibir críticas, todos los miembros del equipo deben volver a trabajar de forma individual, cada participante elegirá la opción más factible acorde a las críticas recibidas y realizará una nueva versión, tomando en consideración las observaciones del resto de sus compañeros.

Todos deben presentar nuevamente sus ideas.

Trabajo en equipo

El tiempo estimado es de 45 minutos.

El equipo debe ponerse de acuerdo en un solo concepto del producto. Es momento de la convergencia. La selección debe realizarse por consenso. Una vez elegida la idea, todos deben aportar en la definición de wireframes y user flows finales (si aplica). Es recomendable que esta actividad se realice en una pizarra o utilizando hojas de rotafolio para facilitar el trabajo colaborativo. El éxito del estudio de diseño radica en llegar a este punto bajo un entendimiento común del proyecto.

Los artefactos creados en el estudio de diseño son la base para la creación del Producto Mínimo Viable que se empleará para la creación del experimento que validará las hipótesis del equipo.

Producto Mínimo Viable

Lean UX, Minimum Viable Product.
Minimum Viable Product.

Lean UX utiliza ampliamente el concepto de Producto Mínimo Viable (MVP, por sus siglas en inglés).

Eric Ries, autor de Lean Startup, definió el término como:

“Un Producto Mínimo Viable es la versión de un nuevo producto que permite a un equipo obtener la máxima cantidad de aprendizaje validado sobre los clientes, con el menor esfuerzo posible”.

En Lean UX, un MVP es utilizado para la validación de hipótesis priorizadas a través de experimentos. El resultado de la experimentación indicará si la hipótesis es válida. Si la idea es correcta, debe perfeccionarse; si es errónea, debe abandonarse.

Tipos de MVP

Un MVP puede tener dos objetivos:

  • Obtener aprendizaje
  • Generar valor

Cuando se pretende validar una hipótesis y obtener feedback del mercado nos encontramos en el caso de un MVP para obtener aprendizaje. Si la creación del MVP involucra crear valor de negocio e incluso comenzar con la adopción de clientes, el objetivo es generar valor.

Respecto a su complejidad, un MVP puede ser tan simple como una simulación de funcionalidad (smoke test) hasta un nivel complejo a través de un prototipo de alta fidelidad.

Bajo estas consideraciones, objetivo y complejidad, es posible clasificar los MVP bajo los siguientes tipos:

  • Entrevistas. Se realizan entrevistas y/o cuestionarios con clientes potenciales para validar las hipótesis relacionadas con los problemas de las personas. Es uno de los métodos más rápidos y baratos. Suelen realizarse en etapas tempranas del proyecto.
  • Prototipos. Se presenta a clientes potenciales una simulación del producto con el suficiente nivel de detalle para comprender la funcionalidad a validar. Dependiendo de su complejidad, existen prototipos de baja, media y alta fidelidad. Es el rostro más común de un MVP.
  • Descripción. Se capta la atención de clientes potenciales a través de la descripción e información general sobre el producto o servicio. Es común recurrir a un Landing Page, videos demostrativos, correos electrónicos, anuncios (Google Ad Words), creación de perfiles en redes sociales e incluso a sistemas de recaudación de fondos (crowdfunding).
  • Producto. Código funcionando. No es necesario el desarrollo completo, sólo aquella funcionalidad necesaria para la validación de hipótesis. Es el tipo de MVP que permite generar más valor de negocio.
  • Concierge MVP. Consiste en la simulación de un proceso o funcionalidad del producto de forma manual pero que aparente ser automática ante los clientes potenciales.

¿A quién va dirigido un MVP?

Un MVP debe ser presentado, prioritaria pero no exclusivamente, a early adopters.

De acuerdo a la curva de adopción de la innovación de Everett Rogers, existen 5 tipos de personas que tienen una reacción diferente ante las innovaciones en productos y servicios por lo que requieren estrategias diferentes para su adopción:

  • Innovators
  • Early adopters
  • Early majority
  • Late majority
  • Laggards
Lean UX. Curva de la adopción de la innovación de Everett Rogers.
Curva de la adopción de la innovación de Everett Rogers.

De acuerdo a este modelo, un early adopter es aquel tipo de consumidor que es el primero en adquirir un producto o servicio novedoso, mucho antes que ocurra un consumo en masa.

Por lo general son líderes de opinión, prueban nuevas ideas, pero lo hacen de una manera cuidadosa. Evalúan objetivamente si una innovación va a generar un verdadero beneficio y cuando están convencidos tienen una alta predisposición a adoptarlas.

Este tipo de personas, que representa el 13.5% de la organización o grupo social, inicia el proceso de difusión de las innovaciones hacia el interior del grupo, su nivel de creedibilidad es muy fuerte porque no tienen la pasión y “enamoramiento” de los innovators, por lo que  pueden hablar con mayor objetividad de los beneficios de la innovación.

Un early adopter identificará de mejor forma el valor en un MVP y “perdonará” las limitantes que pueda tener en cuanto a funcionalidades o nivel de detalle, es por esta razón que debe ser el tipo de cliente potencial que debe buscarse para la validación de hipótesis. Sin embargo, no hay que olvidar que la meta final del producto debe ser llegar a los early majority, si logra captar a ese público, el producto tendrá más probabilidades de éxito.

¿Cuánta calidad debe tener un MVP?

La filosofía Lean indica que debe eliminarse cualquier elemento, proceso o esfuerzo que no contribuya directamente al aprendizaje o validación que se esté buscando. Existe un principio que impera cuando hay que decidir sobre qué tan complejo o refinado debe ser un MVP, el principio KISS: Keep IT Simple, Stupid. Establece que la mayoría de sistemas funcionan mejor si se mantienen simples que si se hacen complejos; por ello, la simplicidad debe ser mantenida como un objetivo clave del MVP, y cualquier complejidad innecesaria debe ser evitada.

Keep it simple stupid.
Keep it simple stupid.

Esta perspectiva debe ser tomada con mesura. Lean UX no se opone a la creación de un MVP de alta calidad, siempre que contribuya de manera significativa al proceso de aprendizaje. Tampoco significa que los MVP deben ser siempre rústicos, sobre todo si representan un obstáculo en la validación y obtención de feedback.

¿Cuáles son los principales obstáculos en la creación de un MVP?

Los de siempre, tiempo, alcance y recursos. Pero además:

  • Aspectos legales y de patentes.
  • Miedo a la competencia.
  • Miedo al riesgo.
  • Miedo a la frustración.

La clave es perder miedo al fracaso y seguir la regla: falla rápido, falla barato.

Consideraciones para la creación de un MVP

La razón de ser de un MVP es la validación de hipótesis y el aprendizaje. Al comenzar la planeación de la construcción de un MVP se debe responder tres preguntas básicas:

  • ¿Existe una necesidad por parte de un usuario para la funcionalidad a implementar?
  • ¿Existe valor en la funcionalidad a implementar?
  • ¿Existe usabilidad en la funcionalidad a implementar?

La primera pregunta debe responderse a través de métodos tradicionales de investigación de usuarios. Si sólo existe esta pregunta, el tipo de MVP requerido seguramente será del tipo entrevista o descripción, es decir, buscar generar aprendizaje pero no valor en el producto.

La segunda y tercera pregunta involucran, en esencia, la creación de un MVP destinado a crear valor del producto en el mercado y observar cómo reaccionan los usuarios potenciales en el contexto real de uso. Bajo estas consideraciones, el tipo de MVP que permite responder estas preguntas son los prototipos, funcionalidades del producto con código funcionando e incluso un concierge MVP.

Para definir qué tipo de MVP es el más conveniente, también es recomendable responder las siguientes preguntas:

  • ¿Qué trato de aprender/validar?
  • ¿Cuál es la forma más rápida para obtener ese conocimiento?

Muchas veces, la respuesta a estas preguntas conducen a la creación de un prototipo.

Prototipos

Una de las formas más comunes de crear un MVP es a través de un prototipo, un modelo del producto final que simula su comportamiento con el objetivo de aprender del mercado y validar hipótesis.

De acuerdo a su complejidad, se clasifican en:

  • Prototipos de baja fidelidad
  • Prototipos de media fidelidad
  • Prototipos de alta fidelidad

Los prototipos de baja fidelidad permiten simular el producto de una manera rápida y barata, sacrificando fidelidad y nivel de detalle.

Un prototipo de baja fidelidad físico puede ser creado con insumos de bajo costo y fácil acceso, principalmente lápiz y papel.

Un prototipo de baja fidelidad digital puede ser creado a partir de wireframes integrando interacciones básicas por medio de un software especializado.

El uso de este tipo de prototipos se restringe a la obtención de feedback y validaciones de alto nivel, como el flujo de interacción del producto, etiquetas y taxonomías.

Los prototipos de media y alta fidelidad representan un nivel de detalle significativamente mayor que los prototipos de baja fidelidad gracias a su nivel de detalle en la interacción, diseño visual o simulación de la funcionalidad.

El fin esencial de un prototipo es mostrarlo a todos los interesados en el proyecto, tanto al equipo, stakeholders y sobre todo, clientes potenciales.

Para muchos equipos de trabajo, el enfoque habitual para desarrollar un MVP es un prototipo, ya que permite comenzar con el diseño visual y la implementación de código, sin embargo, no hay que perder de vista que no es el único instrumento en la validación de hipótesis.  

Pretotipos

Alberto Savoia, un destacado autor y experto en temas de innovación, acuñó este término en 2009 para hacer referencia a una etapa del proceso de desarrollo de un producto o servicio que se encuentra entre la idea original y un prototipo. Pretotipar es una forma de probar una idea de forma rápida y barata mediante la creación de versiones extremadamente simplificadas, simuladas o virtuales del producto para ayudar a validar la premisa “si construímos esto, lo utilizarán”.

La intención es no construir algo tangible, sino recurrir a otros instrumentos de simulación, “estar seguro de construir lo correcto antes de construirlo correctamente”.

Ejemplos de técnicas de pretotipos son:

  • Mechanical Turk: Similar al concepto de Concierge MVP, consiste en reemplazar maquinaria o procesos por acciones manuales.
  • Pinocchio: Versión inerte del producto.
  • Fake Door: Punto de entrada o conversión ficticia de un producto que no existe.
  • Pretend-to-own: Realizar el alquiler o pedir en préstamo un componente del producto o servicio y ofrecerlo a los usuarios sin anunciar que no se trata de algo propio.
  • Re-label: Colocar una etiqueta falsa a un producto existente con las características de la idea a desarrollar para observar la aceptación entre clientes potenciales.

Mientras los prototipos son una herramienta necesaria para responder a muchas preguntas sobre un producto, tales como:

  • ¿Puede construirse?
  • ¿Va a funcionar?
  • ¿Va a funcionar como se pretendía?
  • ¿Cuánto cuesta producirlo?
  • ¿Cómo lo van usar las personas?
  • ¿Para qué lo van a usar las personas?

Pretotipar, por el contrario, se centra en dar respuesta a una -muy básica pero importante- cuestión: ¿es esto lo que hay que construir? Una vez que la pregunta se responde de manera positiva, entonces tiene sentido pasar de pretotipar a prototipar.

***

En la quinta y penúltima entrega se describirá la tercera fase, ejecución de un experimento.

Lean UX, parte 3

Lean UX es, en esencia, una manera distinta de pensar, una nueva mentalidad para el diseño y desarrollo de productos. En esta tercera parte, se describe la primera fase del ciclo Lean UX.

Lean UX no comienza con requerimientos, sino con supuestos, a partir de supuestos, creamos y validamos hipótesis, y a partir de la validación de hipótesis, medimos si hemos conseguido los resultados esperados.

La declaración de hipótesis es el punto de partida de los proyectos Lean UX. Representa una forma de expresar los supuestos que tenemos del proyecto junto con el mecanismo de validación.  Una declaración de hipótesis está integrada por:

  • Supuestos: una declaración de alto nivel que se asume como cierta.
  • Hipótesis: descripciones detalladas de los supuestos orientadas hacia el producto y el mecanismo de experimentación para su validación.
  • Resultados: El dato o valor que permitirá la validación de la hipótesis.
  • Personajes (Proto-Personas): Modelo o arquetipo de las personas para las que suponemos está orientado el producto.
  • Funciones: Características del producto que suponemos conseguirán los resultados esperados.

Supuestos

Suponer algo sobre un producto al iniciar un proyecto no es, en esencia, algo malo. El problema es no hacer explícito un supuesto. Peor aún, pensar en los supuestos como un hecho comprobado.

Definir supuestos tiene las siguientes ventajas:

  • Permite que todo el equipo comience desde el mismo punto.
  • Facilita la conversación entre el equipo sobre cómo resolver el problema.
  • Genera divergencia en las posibles soluciones.

¿Cómo declaramos supuestos en Lean UX? Aquí la descripción del método.

Declaración de supuestos y priorización

Declaración de supuestos
Declaración de supuestos.

¿Quiénes participan?

Todo el equipo y todas las disciplinas involucradas.

Antes de empezar

  • Declarar el problema.
  • Recopilar información sobre el problema.

Ejecución

  • El equipo debe debatir sobre el problema y declarar supuestos.
  • Cada miembro del equipo puede responder las preguntas de la plantilla propuesta por Jeff Gothelf o crear una propia.
  • Representar gráficamente la discusión alrededor de los supuestos.
  • Generar una lista de supuestos.
  • Priorizar los supuestos a través de una matriz de priorización. Debemos responder la pregunta: ¿cuál supuesto debemos validar primero?

Plantillas

 

Matriz de priorización.
Matriz de priorización.

Declaración de hipótesis

Una vez que se defina la lista de supuestos priorizada, el siguiente paso es transformar cada declaración de supuesto en una declaración de hipótesis agregando el mecanismo de validación. Aquí la descripción del método.

¿Quiénes participan?

Todo el equipo y todas las disciplinas involucradas.

Antes de empezar

  • Declarar supuestos.

Ejecución

El formato típico de una declaración de hipótesis es:

Creemos que [declaración] es cierta.

Sabremos que lo hemos hecho [bien/mal] cuando contemos con el siguiente feedback del mercado:

[feedback cualitativo].

[feedback cuantitativo].

La principal cualidad de esta representación es eliminar la subjetividad de la toma de decisiones y orientar al equipo a la obtención de feedback del mercado.

Resultados

Durante la declaración de hipótesis es importante definir qué resultados de alto nivel se espera obtener tras su validación e implementación. El equipo debe establecer cuáles son esos posibles resultados.

Método: brainstorming

¿Quiénes participan?

Todo el equipo y todas las disciplinas involucradas.

Antes de empezar

  • Declarar hipótesis.

Ejecución

Responder las siguientes preguntas:

  • ¿Qué resultados esperas obtener de las hipótesis a validar?
  • ¿Los resultados pueden dividirse en componentes más pequeños?
  • ¿Los componentes más pequeños pueden traducirse a un Indicador Clave de Rendimiento (KPI)?

Personas

Personas son arquetipos basados en patrones de comportamiento revelados durante el proceso de investigación de usuarios y se construyen con el propósito de ser una herramienta de comunicación durante el diseño del producto. Lean UX propone un método para la creación de estos personajes de una forma simplificada partiendo de…, adivinaron…, supuestos.

Método: Protopersonas

A partir de la declaración de supuestos, se construyen modelos que definen quién utilizará el producto y por qué. La representación es burda y esquemática, siendo esto lo deseable, a medida que aprendamos más sobre el producto y los usuarios, se va ajustando la definición de protopersonas.

Protopersonas.
Protopersonas.

¿Quiénes participan?

Todo el equipo y todas las disciplinas involucradas.

Antes de empezar

  • Declarar supuestos.

Ejecución

En una hoja de papel o rotafolio dividido en cuadrantes, colocar en el cuadrante superior derecho información demográfica básica, sólo aquella que pueda aportar valor para predecir un tipo concreto de comportamiento. Dotar de un nombre y un rostro a este personaje en el cuadrante superior izquierdo.

El cuadrante inferior izquierdo debe contener las necesidades y frustraciones de los usuarios relacionadas con el problema. El cuadrante inferior derecho contiene los supuestos sobre la soluciones para resolver sus necesidades.

Es recomendable definir a las protopersonas a través de una sesión de brainstorming, mientras más protopersonas se construyan, mejor. Las protopersonas también se validan. Eventualmente, una protopersona evolucionará a una persona (como un Pokémon).

Plantillas

Funciones

En este punto es necesario empezar a suponer cuáles serían las técnicas, funciones, productos y servicios que habrá que desarrollar para conseguir esos resultados. En Lean UX las funciones se construyen para satisfacer las necesidades de los usuarios, no al revés.

Método: brainstorming

En una sesión de brainstorming se definen las funciones que dirigirán el comportamiento de los usuarios en la dirección correcta.

¿Quiénes participan?

Todo el equipo y todas las disciplinas involucradas.

Antes de empezar

  • Declaración de hipótesis, resultados y protopersonas.

Ejecución

Escribir la mayor cantidad de ideas posibles y construir un tablero a partir de las ideas para visualizar todas las alternativas.

Con el material obtenido, es necesario organizar las funciones en hipótesis que puedan validarse. El resultado es una tabla de esta forma:

Crearemos Para Para lograr
[función] [personaje] [resultado]

Una vez construída la lista de hipótesis, iniciará la etapa de diseño.

***

En la cuarta parte de esta serie, describiré la segunda fase del ciclo Lean UX: la creación de un MVP.

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.

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.

“UX Nights me cambió la vida”

Desde su origen, UX Nights tuvo el objetivo de formar y consolidar una comunidad de profesionales en Experiencia de Usuario. Poco a poco hemos sido testigos de cómo la comunidad ha ido creciendo y madurando, pero en pocas ocasiones llegamos a conocer historias de vida, que son únicas y especiales.

Lizette Pradal UX/UI Designer
Lizette Pradal, UX/UI Designer

Queremos contar la historia de Lizette Pradal, una diseñadora de experiencia de usuario que platicándo con nosotros, nos dijo: “UX Nights me cambió la vida”.

Liz fue una de las veinte valientes que asistieron a UX Nights Vol. I, en septiembre de 2014, en las instalaciones de Archipiélago en la Cd. México. En esa primera edición de UX, pizzas y cervezas, se  escucharon las pláticas de Bibiana Nunes, Vero Traynor y Mauricio Angulo.

Parece que el destino ya estaba trazado desde esa primera noche, Liz asistió al evento junto con Ismael, su compañero de trabajo.

UX Nights Vol. I Desmitificando UX
UX Nights CDMX Vol. I – “Desmitificando UX”

Entusiasmados como muchos otros por la iniciativa, no dudaron en ofrecer las instalaciones de 5M2, la empresa en la que trabajaban, para realizar ahí las futuras ediciones de UX Nights. Mauricio, Bibi y compañía no dudaron en aceptar la oferta.

En esa época, Liz trabajaba diseñando interfaces, prototipos y diferentes herramientas para el equipo de ventas de 5M2 y otros clientes. Tenía un gran interés por conocer más sobre Experiencia de Usuario, así que empezó a asistir a UX Nights sin falta ¡con la facilidad de solo bajar las escaleras para llegar!

UX Nights en las oficinas de 5M2
UX Nights Vol. II en las oficinas de 5M2, con Víctor García, Adrián Kane y Adrián Solca.

En el Vol. V en CDMX sobre Prototipado, no pudo bajar las escaleras para escuchar las plática porque tenía que entregar un prototipo con urgencia. Justo mientras pensaba cómo podría grabar en video la interacción de su prototipo para compartirlo con el cliente, escuchó a lo lejos la plática de Gerardo BlancoLa habilidad de la adaptaciónGerardo contaba su experiencia trabajando con InVision, una herramienta de prototipado.

Gerardo Blanco en el Vol. V Prototipado
Gerardo Blanco en el Vol. V Prototipado

Liz le envió un tweet a Gerardo para pedirle ayuda con el prototipo en el que estaba trabajando. Poco tiempo después, Gerardo la contactó para invitarla a incorporarse a Globant, una de las organizaciones más importantes a nivel internacional en servicios de tecnología enfocada en el desarrollo de soluciones de software y donde él trabajaba.

Ella no lo pensó demasiado y decidió a emprender un nuevo reto laboral, sin saber que se encontraría con uno de los retos más grandes de su carrera profesional: al mes de ingresar a Globant la enviaron a trabajar en un proyecto piloto a Santiago de Chile para una aerolínea utilizando metodologías ágiles.

Durante tres meses, Liz estuvo en una capacitación intensiva sobre cómo trabajar de manera ágil, y también pudo poner en práctica todo lo que había visto de manera teórica en los eventos de UX Nights.

Programación en pares, equipo ágil y SCRUM Board

Liz aprendió mucho sobre esta metodología, trabajó en pares todos los días diseñando, planeando, programando servicios, implementando front-end, creando prototipos y aplicando pruebas de usuarios, entre otras tareas.

Descubrió, junto con el resto de sus compañeros, que no hay equipos de desarrollo y equipos de UX y que el trabajo en conjunto es lo más importante para lograr un producto exitoso.

Trabajo remoto desde Globant México
Trabajo remoto desde Globant México

Actualmente ella trabaja de forma remota desde la Cd. de México y viaja constantemente a Santiago. Para ella, cada día ha sido un reto y una oportunidad para crecer profesionalmente.

Liz agradece a todas aquellas personas que de manera desinteresada han compartido su conocimiento y experiencia, mes a mes, en los eventos de UX Nights.

Su futuro es prometedor y quiere seguir aprendiendo, especializarse en la integración de UX en metodologías ágiles, viajar y seguir transformando la empresa en la que trabaja.

Nos reencontramos con ella en el evento Web Analytics Wednesday de la Ciudad de México en febrero de 2016. Su historia es realmente fantástica y refleja la misión de UX Nights.

* * *

No podíamos dejar de pasar la oportunidad de compartir su historia porque como diseñadores de experiencia de usuario, nuestra primera tarea es sentir empatía por nuestros usuarios; y nuestros usuarios, son todos los que forman parte de la comunidad.

Muchas gracias a Liz por permitirnos contar su historia y esperamos que pronto nos comparta sus nuevos logros.

Así como esta historia, no dudamos que haya más; queremos conocerlas y compartirlas con todos. Contáctanos y cuéntanos tu historia.

Atajos mentales para el usuario

Cuando realicen una actividad y saben que van a partir de supuestos, háganse algunas de las siguientes preguntas:

  • ¿Qué quieren de ti tus usuarios? Es decir, pregúntate si planteaste correctamente las tareas que ellos realizarán.
  • ¿Qué se te está diciendo tu usuario? Aquí me refiero a que no hay que menospreciar lo que el usuario dice. Los comentarios que tu usuario pueden tener información que sea relevante para mostrar la información que sea.
  • ¿Cuánto tiempo toman las interacciones del usuario? La interacción del usuario con los elementos de la interfaz puede llegar a ser tediosa si no se plantea bien para el formato que está diseñada.
  • ¿Cuáles son los detalles importantes? Lo sencillo a la vista del usuario se hace transparente e invisible en su interacción con los contenidos.
  • ¿Estamos respetando el deseo del usuario de estar el tiempo suficiente y necesario mientras interactúa con los contenidos que se les muestra?

Las reacciones del usuario en el proceso de evaluación.

Las observaciones anecdóticas ofrecen una visión naturalista de la vida de los participantes en una evaluación. Los psicólogos sociales han demostrado que los estados anímicos influyen sobre las percepciones que las personas tienen de sí mismas y de los demás.

Desde la década de 1970, los investigadores contemplaban las emociones con cierta sospecha y las consideraban como fuentes de “ruido caliente” para el procesamiento informático de información, que sin ellas sería exclusivamente racional.

En la década de 1990, los investigadores contemplan las emociones con el debido respeto por sus potentes y previsibles efectos en tareas tan diversas como la memoria episódica. Los psicólogos cognitivos se preguntaban ¿cómo categorizan las personas su experiencia perceptual para “saber” –con seguridad y sin esfuerzo- si un objeto va con otro?

Niedenthal y Halberstandt desarrollan una idea interesante de que los objetos perceptuales también pueden coexistir como categorías, porque tienden a evocar una reacción emocional en el perceptor.

Técnicas y/o herramientas

La realización de un registro anecdótico contextual se utiliza a manera de sondeo para:

  • Describir y saber implementar las fases y subfases en el diseño, desarrollo, producción, evaluación e implementación de materiales, producto y/o servicios.
  • Conocer y valorar las etapas básicas para la producción.
  • Contemplar los elementos para la producción de material, para elaborar una guía didáctica para orientar en el uso del producto.
  • Valorar la importancia del trabajo en colaboración multidisciplinario para el diseño, desarrollo de material.

Marco VanHout distingue 3 etapas importantes en el diseño basado en emociones:

  1. Comprender la emoción
  2. Medir la emoción
  3. Diseñar para la emoción

En la segunda parte de este artículo revisaremos la evaluación de las emociones con la pregunta ¿es suficiente sólo observar al usuario? Y observar puede incluir enfocarnos en sus rasgos, expresiones faciales y corporales.

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.

El valor de UX

¿Cuál es el valor del Diseño de Experiencia de Usuario? Esta pregunta que ha resonado desde la incepción de esta disciplina y que todavía no tiene una respuesta concreta, en parte por su naturaleza intangible.

Ponerle precio a UX no es fácil porque ésta no nació como un producto, de un modelo de negocio o una necesidad de mercado. Es la misma razón por la que no hay una licenciatura en diseño de experiencia de usuario. UX nació como una metodología de trabajo que tiene tantas maneras de implementarse como hay perfiles de usuarios.

Además, el perfil tan diverso de la gente que trabaja en la industria, los diferentes niveles de experiencia y la diversidad de entregables hace aún más compleja una valoración objetiva. El valor de UX, citando una de las respuestas más frecuentes, depende.

Mi experiencia profesional como publicista me ha vuelto sensible a la “venta” de la experiencia, y puedo afirmar que UX no es el único bien que tiene un problema de “asignación de valor”.

Las experiencias son para vivirlas

El problema se origina de su falta de tangibilidad. Una experiencia debe, como su nombre lo dice, ser experimentada: la experiencia no pesa, no está hecha de materiales físicos y la mayoría de los entregables que creamos los diseñadores de UX, como resultados de encuestas o análisis de casos, no existen físicamente y se materializan hasta que se documentan y se le ponen palabras algo que, por definición, se debe sentir.

Hablando de intangiblidad, hay muchas marcas ahí afuera que comercializan un bien intangible, aunque parezca que venden productos físicos. Starbucks, por ejemplo, es una de las empresas más disruptivas del último siglo, en buena parte porque aprendió a comercializar una experiencia.

El producto que Starbucks vende no es el café, sino la experiencia en el consumo de café que está controlada en cada detalle: el arreglo de las tiendas, escribir tu nombre en el vaso, el diseño del menú, las máquinas que usan, cómo capacitan a su personal, y otros factores. Su suma ha provocado que sus clientes asignaran el valor de una taza de café de Starbucks al doble de lo que estarían dispuestos a pagar por ella en otra cafetería.

Nike y Under Armour tamibién funcionan como ejemplo: estas marcas no venden ropa deportiva, venden un estilo de vida que es la suma de los detalles que genera una experiencia para sus clientes. Una persona que compra Nike sabe que no solo está comprando la tela y el pegamento del que están hechos sus zapatos deportivos, sino también la tecnología y la marca, cuya materialización de algo intangible es un producto que se puede sostener en la mano.

UX como producto, es intangible. Es una idea, un concepto o una metodología. La idea equivocada de que Diseño de Experiencia es un sinónimo de Diseño de Interfaz tiene su origen en que el diseño gráfico tiene un entregable “tangible” y es algo con lo que se puede interactuar.

Para muchos es más simple mencionar que cualquiera que sea el entregable ya trae la parte de UX de manera implícita sabiendo además que técnicamente esto es muy difícil de comprobar. Tal vez a Disney se le da muy bien el diseño de UX porque ellos lo que venden siempre se ha considerado intangible: Magia.

La subjetividad del valor

La otra parte que hay considerar además de la intangibilidad de la experiencia es su valor subjetivo. Una sección en el cerebro humano está diseñada para asignarle valor a las cosas. La palabra valor se puede traducir a muchas cosas: atención, tiempo o dinero. ¿Cómo se asigna ese valor?

Lo asignamos comparando la nueva experiencia con  nuestras experiencias previas -que en ocasiones puede no ser experiencias personales, sino que pueden haberse experimentado a través de otra persona-. A veces la experiencia no tiene un punto de comparación para las personas a las que se la intentamos vender, y por lo el primer contacto es fundamental para definir un estándar de valor.

He escrito antes sobre la importancia de entender a la persona a la que le estamos vendiendo tanto como al usuario de lo que vayamos a desarrollar, porque tenemos que entender las motivaciones y experiencias previas de ambos para definir cuál es el ‘valor’ para cada persona. ¿El cliente valora la innovación? ¿O quiere ser el mejor de su industria? La mayoría de los clientes valora la rentabilidad, que es un concepto fácil de entender y explicar: “te cuesta 10 y te regresa 20, entonces tiene un retorno de 100%“.

El factor más importante a recordar es el famoso lema que Mauricio Angulo no me deja olvidar: “Nunca es culpa del usuario”. Si los clientes no valoran el trabajo de UX no es su culpa, somos nosotros los que hemos fallado en mostrar su valor. Así como StarbucksNike trascendieron el producto físico y educaron al consumidor a valorar la experiencia que les proporcionaban, nosotros como UX Designers tenemos el reto de ir más allá de las entrevistas y los análisis para mostrarle a los clientes que el verdadero valor es lo que UX puede hacer para mejorar sus negocios por medio de una experiencia centrada en las necesidades de sus usuarios.

Nike le pregunta a sus clientes ¿cuánto vale para ti la tecnología aplicada al deporte?Starbucks les pregunta ¿cuánto vale para ti la experiencia de tomar café? El trabajo de un Diseñador de UX es siempre preguntarle a sus clientes ¿cuánto vale para ti mejorar tu negocio pensando en las necesidades de tu consumidor?

Tendencias sobre User Experience para 2016

Inicia el 2016, y como en cada comienzo de año, las tendencias, deseos y pronósticos empiezan a emerger en todos los ámbitos y contextos; y la disciplina de User Experience no se escapa de los vaticinios y las predicciones sobre su futuro.

Aquí una revisión y análisis de las publicaciones más relevantes y aventuradas sobre qué podemos esperar durante el 2016 en materia de User Experience:

15 visiones y tendencias sobre User Experience para el 2016

Algunos de los principales líderes de la industria de UX, empresas, revistas y publicaciones digitales especializadas han listado desde finales de 2015 y en lo que va de 2016 las tendencias clave que visualizan para este año.

A juicio personal, las mejores publicaciones que puedes consultar, en orden de calidad de contenido, son:

  1. UX Design 2015 & 2016UX Pin
  2. Web Design Book of Trends 2015-2016UX Pin
  3. Mobile Design Book Book of TrendsUX Pin
  4. The state of UX in 2015 / 2016Fabricio Teixeira y Caio Braga de UXDESIGN.CC
  5. The Top UX Predictions for 2016UX Magazine
  6. UX Predictions for 2016 from yours truly and 6 UX gurusCraig Tomlin de Useful Usability
  7. Tendencias UX 2016 a… 2030!Kambrica
  8. UX Design trends for 2016 Risto Lähdesmäki de InVision
  9. User Experience, Talent and Analytics among CIO Priorities for 2016CIO Journal
  10. 10 Web design trends you can expect to see in 2016TNW News
  11. What to Expect in 2016: Predictions from Top CreativesAmanda Aszman de How Design
  12. 16 Web & Graphic Design Trends To Watch In 2016Ernesto Olivares
  13. The Year in DesignJeffrey Zeldman
  14. 10 UX Trends and Predictions for 2016 Luca Longo de Design Excellent
  15. 6 tendencias de diseño web 2016 Enrique Xacur de Qualium

UX Pin presentó en diciembre de 2015 una trilogía de e-books con una recopilación sobre tendencias en materia de UX, diseño web y diseño para dispositivos móviles. InVision es otra empresa que también se ha especializado en la creación de contenido sobre UX, y ha aportado una lista de tendencias corta, pero bastante asertiva.

UX Magazine alzó la mano como revista digital para aportar su propia visión; y el recolector de links UXDESIGN.CC se lleva una mención especial por The state of UX in 2015 / 2016, una lectura obligada.

En español, la lista es mínima pero vale la pena destacar el aporte y análisis hecho por la consultora argentina Kambrica liderada por Santiago Bustelo. Como siempre, abundan las  traducciones literales al español de contenidos en inglés sin ningún aporte o visión propia, lo que definitivamente no contribuye al crecimiento de UX como disciplina en Hispanoamérica.

La importancia de UX para 2016 no sólo fue vaticinada por los adoctrinados en el culto, sino también por otros sectores como el de negocios y el de marketing, además de amigos cercanos como el diseño gráfico y el desarrollo web. En palabras de El Quijote, “es señal de que vamos avanzando”.

Se pueden encontrar coincidencias y controversias al analizar tantas y tan diversas perspectivas, pero desmenucemos lo más valioso y tropicalicemos la discusión:

Tendencias

La relevancia de UX en el diseño web

UX en diseño web

UX será parte esencial del diseño web y no sólo un valor agregado. Fuente imagen: UX Design 2015 & 2016UX Pin

Para UX Pin, esta es la tendencia más importante para el 2016: desde que la web trascendió más allá de las pantallas de escritorio y arribó a dispositivos móviles, wearables y en Internet of Things ya no sólo hablamos de “diseño de páginas web” en un sentido estético, sino desde uno de usabilidad y diseño de experiencias. En los últimos años algunas tendencias de diseño web han emergido y todo parece apuntar que prevalecerán en este año.

La tendencia de parecer lo mismo

Every fucking website

Casi todos coinciden en señalar que hoy en día muchos sitios web lucen exactamente igual. El vaso puede verse medio lleno o medio vacío, pero en un sentido positivo podemos hablar de la consolidación de un lenguaje visual estable y de un conjunto sólido de patrones de interacción que se han afianzado en el mundo digital como Flat Design o Material Design, tal como lo proyectan en DESIGN CC.

En un sentido mucho más crítico, Travis Gertz opina en Design Machines: How to Survive the Digital Apocalypse que el problema no radica sólo en la adopción masiva de tendencias flat, sino en la caótica demanda de diseñar cada vez más y mejores interfaces que obliga (¿o excusa?) a los diseñadores a adoptar convenciones de interfaz que “faciliten” la funcionalidad de un producto digital.

La enorme proliferación de recursos, plantillas y frameworks para el diseño web parece aminorar el esfuerzo técnico para la creación de sitios web, sacrificando originalidad y creatividad por rapidez.

“La tecnología web nunca ha sido tan poderosa y asequible como lo es hoy”, así que “¿por qué reinventar la rueda?”
– Every Website Looks the Same and that’s OK.

El factor clave en este dilema se encuentra justo en User Experience. “No hay mucho dónde innovar en el diseño de interfaz de usuario, así que tienes que buscar otra manera de sobresalir”, sugiere Enrique Xacur desde Qualium. La mejor forma de hacerlo es creando experiencias memorables y no sólo interfaces estéticas con efecto parallax e imágenes de shutterstock: “UI es el vehículo, pero UX el conductor” nos dicen en UXPin.

En mi opinión, el mejor camino será encontrar un punto de equilibrio, adoptar interfaces y patrones de interacción comunes para problemas simples pero construir, a partir de un conocimiento profundo de las necesidades y metas de los usuarios, patrones y conceptos innovadores para solucionar problemas complejos. Depende.

Siempre pregúntate: “¿qué es lo que los usuarios necesitan para que estés intentando solucionarlo con un nuevo patrón de interacción?”  y podrás dilucidar la mejor respuesta.

Frameworks y patrones de interacción avanzados

Material Design

Algunos de los patrones de interacción y conceptos visuales más espectaculares que harán que nuestros sitios web se vean como los demás en 2016 -siendo probablemente lo deseable- son:

  • Material Design. Presentado por Google en 2014, Material Design se ha posicionado como un nuevo lenguaje de diseño y no sólo como una extensión de Flat Design. El objetivo de Material Design es sintetizar los principios del buen diseño a través de la innovación y la tecnología. Tendencias como el movimiento, animación y el diseño de elementos en capas cobraron protagonismo en el 2015 y continuarán durante 2016.
  • Flat Design. En constante evolución, Flat Design mantendrá una profunda influencia en la cultura del diseño web. El minimalismo de formas y el protagonismo de la tipografía marcarán la pauta. “90% del contenido web es texto. El otro 90% es espacio en blanco”.
  • Menús y sistemas de navegación “inteligentes”. Algunos elementos específicos son derivaciones de las tendencias de Material Design y Flat Design: los menús y los sistemas navegación invisibles que emergieron como tendencia en 2015 continuarán proliferando en 2016, pero más allá del icono hamburguesa, que seguirá presente pero con nuevas formas. El argumento que favorece este patrón es la creencia de que los usuarios no deben ser distraídos de lo que es  importante en una interacción individual. Como usuarios de Internet hemos aprendido que incluso si no podemos verlo en todo momento, la experiencia previa nos dice que existe un menú de navegación en cada página web, pero como todo en la vida también existen detractores. Lo que no dudo es que en 2016 seguiremos explorando alternativas y nuevas formas de presentar la navegación de nuestros sitios web, y especialmente en los móviles.
  • Scrolling hacia los extremos. El scroll infinito será muy utilizado para mantener todo el contenido en una sola pantalla. Es como en los viejos tiempos de 800 x 600, pero ahora con 4K. Las nuevas reglas para el scrolling dan cabida a ambas tendencias y el scroll infinito favorece la rapidez en la navegación y parece motivar la interacción, siempre que el contenido se ajuste a las expectativas de los usuarios. Los aspectos negativos que encontramos incluyen la velocidad de carga lenta, problemas de SEO, dificultad para implementar un footer o la necesidad de recurrir a ese incómodo elemento de una “flecha hacia arriba” para regresar a la parte superior del contenido. Como alternativa, una tendencia será infinite modular scrolling: scrolls individuales para módulos independientes dentro de un mismo contenido web.
  • Diseño modular. Sistemas modulares inteligentes (como The Grid), retículas de construcción a partir de frameworks (como Boostrap), patrones de tarjetas (tan visto en Pinterest) o el sistema de diseño atómico (como Pattern Lab) cobrarán un notorio protagonismo en el 2016 de la mano de Material Design. El diseño modular es un enfoque en teoría del diseño que parte de la deconstrucción de un todo en sus partes para identificar lo esencial. El diseño modular aplicado a desarrollo web permite construir interfaces estandarizadas que facilitan el crecimiento. El tema es complejo y muy interesante. Hay dos lecturas recomendadas sobre esto: The Language of Modular Design de A List Apart y Modular Design for Rapid Advances de Interaction Design Foundation.
  • Animaciones. Se diseñarán bajo los lineamientos de Material Design: sutiles, con lo esencial, imperceptibles a la vista pero dirigidas a atacar al corazón y las emociones de los usuarios. UX Pin hace una interesante clasificación de las tendencias en animación web: loading animations, menús y sistemas de navegación, acciones hover, slideshows, elementos para fijar la atención, scrolling, movimiento de la página (sí, como parallax, pero ¡no es solo parallax!) y fondos animados. Los que sobrevivimos a la época de los intros en Flash sabemos que existe una delgada línea entre la sutileza y la exageración en el uso de la animación para web. En Material Design, la animación “describe relaciones de espacio, funcionalidad e intención, llevadas con belleza y fluidez”. Mantengámoslo así.
  • Microinteracciones. Una acción a la vez, sin distracciones; un momento específico con su propio tiempo y espacio. El concepto de microinteracciones se ha popularizado gracias a las apps y a dispositivos como Google Glass y Apple Watch, y claramente será una tendencia web en 2016. Una microinteracción es un momento que gira entorno a una única acción para llevar a cabo una sola tarea en el producto. Las microinteracciones nacieron en el mundo móvil, llevadas a wearables y por inercia lógica también estarán en sitios web. En una proyección a futuro, las microinteracciones pueden representar el siguiente gran paso en la evolución de la interacción humano-computadora: interacción sin interfaz, llevar el Anticipatory Design al límite. Si quieres profundizar en el tema, te recomiendo MICROINTERACTIONS: Designing with Details de Dan Saffer.

Estas son las principales tendencias que llevarán la batuta en materia de patrones de interacción en el mundo web durante el 2016.

* * *

Identificar una tendencia, en cualquier aspecto, es un esfuerzo relativamente complejo; en ciencias sociales, una teoría que explica cómo anticipar el futuro indica que primero es necesario identificar las tendencias (trends) que surgen entre la gente común para así integrar las mega-tendencias (megatrends), entendidas como fenómenos socioculturales plasmados por valores globales. Esta teoría fue propuesta por John Naisbitt en Megatrends: Ten New Directions Transforming Our Lives, y es una de las muchas maneras que existen para satisfacer la insana costumbre del ser humano de pretender vaticinar el futuro.

Adoptando el modelo de Naisbitt, pero llevado a nuestro escenario, es posible identificar a Material Design y Flat Design como las mega-tendencias actuales. Por otra parte, entre las tendencias individuales hay muchos patrones y conceptos relacionados con la forma, el color, la tipografía, las animaciones, las interacciones y los sistemas de navegación.

Una tendencia que puede evolucionar y convertirse en la próxima mega-tendencia es la de microinteracciones, y tal vez sea el futuro que nos depara para 2017, pero quedémonos en 2016 que bastante camino falta por recorrer aún.

En la segunda parte de este artículo analizaré los deseos y pronósticos de UX como disciplina y el rol del profesional de UX en las organizaciones.

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.