Dualidad web y elementos de la experiencia de usuario.

Esta publicación es un híbrido de resumen, explicación y traducción del capítulo 2 del libro “Elementos de la Experiencia de Usuario”, escrito por Jesse James Garrett. Lo preparé como material de estudio para los alumnos de 2do año de la carrera de comunicación de la Universidad Austral. Lo publico en Medium porque creo que a cualquier persona del ámbito que hable español le puede servir como repaso general de conceptos :)


Marvin Meyer’s picture. Took it from Unsplash.com

Vamos a repasar algo de la historia de la web para ir a los inicios de la experiencia de usuario y entender los elementos que la componen. Las personas que forman parte de equipos de desarrollo de productos digitales centrado en los usuarios trabajan con estos componentes durante el proceso.

La experiencia de usuario tiene mucho de anticipación futurística.

¿Por qué?

Porque el diseño de Experiencia de Usuario se trata, en gran parte, de tener el control sobre las acciones que un usuario podrá realizar en y con una interfaz. Y también de las consecuencias de la interacción a la que dará lugar. Si lo podemos prever, idear de antemano, testear de antemano, lo podemos controlar y mejorar.

Se trata de asegurar que cada aspecto de la experiencia de usuario con el producto digital responda a la intención explícita del equipo que lo diseñó, desarrolló y lanzó al mercado.

¿Cómo se ve la página web/app/pantalla? ¿Cómo se comporta? ¿Qué nos deja hacer y qué no?

Tim Berners Lee creó la WWW como una manera de distribuir papers académicos entre científicos y universitarios que se encontraban en distintos lugares. Y sabía, desde un principio, que el potencial que tenía la Web iba más allá de esa distribución. Pero pocos podían imaginarlo de antemano. La web tuvo que ir evolucionando junto con la tecnología disponible antes de llegar a la web que conocemos hoy, de la que nadie discute acerca del poder de cambio y revolución al que dio lugar.

Cuando la web nació todo tenía que ver con el hipertexto. Las personas podían crear documentos y podían linkear esos documentos con otros.

Al principio, quienes llegaban a la web llegaban buscando un medio de publicación. De a poco se le sumaron nuevas funcionalidades que se tradujeron, en la práctica, en nuevas capacidades.

La web es algo más que una plataforma de publicación, distribución y recuperación de documentos de hipertexto.

En la web podemos hacer un montón de cosas.

Se trata de un espacio de interacción antes que de un repositorio de documentos que podemos consultar. Responde al estímulo de los usuarios de una forma que tiene bastantes aspectos en común con las aplicaciones tradicionales de escritorio.

Esto se dio gracias a la evolución de la web (de la “versión” 1.0 a la 2.0) en la que las páginas pasaron de ser estáticas a ser dinámicas: muchos sitios web pasaron a construirse sobre bases de datos que evolucionan constantemente. Hoy estamos en la web 4.0, superando o profundizando las innovaciones de la “web semántica” (3.0).

Se empezó a hablar de la experiencia de usuario y, entre los profesionales del ámbito, se encontraron dos grupos de personas que hablaban dos lenguajes distintos:

  1. Algunos veían los problemas de la experiencia en las páginas web como problemas de aplicación del campo del diseño. La solución venía por el lado tradicional de diseño de software y aplicaciones de escritorio.
  2. Otros veían esos mismos problemas web en términos de distribución y recuperación de la información. La solución a los problemas se enfocaba desde el mundo tradicional de la publicación, los medios y las ciencias de la información.

Si en el desarrollo de estos productos digitales los implicados no podían ponerse de acuerdo, el progreso en términos de resolución de problemas era muy lento. Tomar una decisión no era tan fácil.

A la hora de categorizar sitios web, se podía hablar tanto desde la perspectiva de una aplicación de software o desde la de un espacio de hipertextualidad.

Para mirar the big picture había que considerar a esos enfoques de una forma que no los hiciera excluyentes. Un producto digital, hoy, es tanto una interfaz de software como un sistema de hipertexto. Un producto digital podría ser un híbrido entre esas dos concepciones y en esa hibridación se concibe la dualidad particular de la web.

Brooke Cagle’s picture. Took it from Unsplash.com

Dentro de la experiencia de usuario hay diversos elementos y campos sobre los que se toman decisiones. Y lo que decidamos en cada uno de ellos condicionará la experiencia final.

¿Cómo se toman esas decisiones?

  1. Plano estratégico
  2. Plano del alcance
  3. Plano estructural
  4. Plano esqueleto
  5. Plano superficial

Desde la estrategia hasta la estructura y el diseño visual concreto de lo que se verá y lo que pasará en pantalla, todo forma parte de un proceso que se construye de abajo hacia arriba, constituyendo un sistema de capas que se afectan entre sí.

La decisión tomada en el paso 5 depende de las decisiones tomadas en el 4. Si en el punto 5, en la capa superficial, tomamos una dirección distinta a la que se viene siguiendo, es muy probable que haya que revisar todas las capas cual efecto dominó. Porque en el punto 5 deberíamos responder a lo que se decidió en la capa del esqueleto, y ella responde a la 3, la 3 responde a la 2 y el alcance (2) responde a la estrategia (primera capa).

Jesse James Garrett’s UX layers model.

Si nos paramos del lado del hipertexto nos vamos a concentrar en todos los aspectos relacionados a la información. ¿Qué información ofrezco y qué representa para los usuarios? ¿Qué tan “lejos” tendrá el usuario esta información? ¿Por dónde lo hago pasar antes? ¿Por qué necesita saber esto y por qué se lo digo de esta forma y no de otra? Siguiendo el ejemplo de WhatsApp, un usuario puede saber cuándo fue la última vez que los demás se conectaron o cuándo en una conversación “le clavaron el visto”, puede saber quiénes son sus contactos por nombre de usuario y ver sus fotos de perfil además del número de celular.

Del lado del software, en cambio, lo que nos va a interesar en concreto es la tarea que podemos realizar. Lo que podemos, efectivamente, hacer. Mandar una nota de voz de manera instantánea para saludar a mi grupo de amigos que viven en la ciudad donde crecí. O desactivar la opción que me permite ver cuándo los demás se conectaron por última vez, si me clavan el visto o si yo a ellos. O cambiar mi foto de WhatsApp una vez por día o ni siquiera tener foto. Del lado del software respondemos a la pregunta: ¿Qué pueden hacer los usuarios en y con la app?.


¿Cómo encajan todos los elementos para crear una experiencia de usuario que contemple la dualidad?

Jesse James Garrett propuso un modelo de 5 capas en las que podemos diferenciar los elementos de la experiencia de usuario:

Jesse James Garrett’s UX layers model: “The elements of user experience”.

1. Estrategia

¿Por qué estamos creando este producto?¿Qué problemas resuelve y qué necesidades satisface?¿Qué valor aporta, quién lo necesita? ¿Alguien lo desea? ¿Por qué?

Este punto está lleno de preguntas. Acá no solo definimos lo que como creadores queremos obtener con el producto sino también las necesidades y deseos del usuario y los objetivos del negocio que girarán entorno al producto.

Esta estrategia entra en juego tanto en los espacios hipertextuales como en los productos de software.

2. Alcance

Define los requerimientos funcionales y de contenido.

Del lado del software, la estrategia se traduce en alcance a través de las especificaciones funcionales: una descripción detallada sobre el “set de herramientas” del producto que debe incluirse sí o sí para satisfacer las necesidades del usuario.
Del lado de la información, el alcance toma la forma de los requerimientos del contenido: una descripción detallada de la variedad de elementos de contenido que se requieren para el desarrollo del producto.

Este ejemplo puede ilustrar mejor la diferencia entre una y otra: mientras que la especificación funcional puede ser tener un reproductor de video, el requerimiento de contenido será qué video o qué conjunto de videos se va a reproducir.

3. Estructura

Dadas las especificaciones funcionales, la estructura del software determinará cómo el usuario interactúa con ella y cómo responderá el software a los comportamientos del usuario durante esa interacción.

Algunos criterios para hacer un buen diseño de interacción:

  • comunica al usuario cuándo puede interactuar y cómo
  • ayuda al usuario a cumplir sus objetivos / satisfacer su necesidad / resolver un problema
  • respeta el derecho del usuario a saber en qué punto de la interacción se encuentra, qué es lo que está pasando y qué va pasar en el siguiente paso que dé.
  • Previene al usuario de errores. Le avisa, por ejemplo, que está por borrar algo y le pide que confirme si realmente lo quiere hacer.

Según los requerimientos de contenido, la estructura definirá la navegación a partir de la Arquitectura de la Información: cómo se distribuirán y organizarán los contenidos en el espacio de la información para facilitar el entendimiento del usuario.

Algunos criterios para construir una buena arquitectura de la información:

  • Actúa como traductora del sistema. Facilita el entendimiento y la movilidad entre la información presentada.
  • Organiza, prioriza y categoriza la información equilibrando las necesidades del usuario y los objetivos del negocio.
  • Es flexible frente al incremento de la información.
  • Es apropiada para la persona para la que está destinada.

4. Esqueleto

Esta capa contiene 3 elementos:

De ambos lados (tanto software como hipertexto) tratará el Diseño de la Información: cómo será su presentación de manera que el usuario la entienda fácilmente. El objetivo es lograr claridad.

Del lado del software, esta capa también incluye el Diseño de la Interfaz. Se diseñan los elementos de la interfaz para facilitar al usuario la interacción con ellos. Garantiza el sentido de la interacción usuario-funcionalidad.

Del lado del hipertexto, el esqueleto contempla el Diseño de la Navegación. Qué set de elementos permitirán al usuario “navegar” o moverse por los diferentes niveles de información dados (arquitectura de la información). Un ejemplo es la composición de un menú de navegación.

5. Superficie

Nos encontremos de un lado o del otro, la capa del diseño visual siempre será tenida en cuenta. Es la capa más concreta del desarrollo del producto y la preocupación por ella es compartida: cómo se ve el producto terminado. Acá es donde se van a poner en juego las decisiones que tomamos en todas las capas anteriores. Esta capa da pie al diseño de la percepción o sensorial. En esta capa un usuario puede hacer rápidamente un juicio de valor sobre si le gusta o no lo que está viendo, independientemente del grado de interacción que haya tenido con el producto.


Muy pocos productos digitales se ubican exclusivamente de un lado u otro. Como dijimos más arriba, suelen ser un híbrido entre ambas vertientes.

No es necesario tener en el equipo a un miembro especialista en cada una de las áreas; en cambio, lo que sí tenes que asegurar es que haya alguien responsable que piense en cada una de esas cuestiones.

La estrategia es el fundamento de toda experiencia de usuario. Si empezamos incorrectamente desde abajo, o si arrancamos desde arriba, los problemas se van a ver reflejados muy rápidamente en toda la concepción del producto y la experiencia que ofrece.

La descomposición de los elementos responde a la necesidad de estudiarlos y entenderlos por separado pero solo para saber cómo juegan en conjunto. Se trata de conocer lo que estamos tratando para poder tomar las mejores decisiones en los momentos adecuados.