Site Map y User Flows: cartografías del UX

”Necesitamos tener una mentalidad centrada en el usuario e imaginar que el usuario y la interfaz están teniendo una conversación. A cada acción del usuario, el sistema responde con algo.”

Krisztina Szerovay - UX Knowledge Base Sketch

Teniendo una idea de quiénes son los que proveen soluciones en el espacio de nuestro desafío de diseño, es hora de ponernos los zapatos de un/a usuario/a por un rato. Para esto, te presentaremos dos métodos: Site Map y User Flows, que te permitirán navegar los sitios y apps de competidores y documentar tu interacción de una forma estructurada. ¡Ojos de usuario/a, herramientas de diseñador/a!

Site Maps

Desde que empezó a tener conciencia del entorno, la humanidad hace mapas. Hay algunos tallados en piedra, otros dibujados con apenas unas líneas sobre papiros o los más nuevos, hechos con ayuda de satélites. Lo que aquellos primeros mapas y nuestras aplicaciones en el celular tienen en común es que nos ayudan a ubicarnos en el espacio y a elegir qué caminos tomar -y cuáles evitar- para llegar a destino.

Con los sitios web pasa lo mismo. El Site Map es la herramienta que nos permite “mapear” y estructurar el contenido en “capas” de forma tal que los usuarios puedan encontrarlo. En palabras más técnicas del UX, el Site Map constituye la estructura de una interfaz. Es la primera representación gráfica de la arquitectura de información de un determinado producto digital (ya sea desktop o mobile). Nos sirve para definir la taxonomía o agrupación del contenido y permite darle una jerarquía determinada a cada uno de los elementos —en el mejor de los casos, el Site Map tendrá lógica y consistencia para los usuarios.

La clave de un Site Map efectivo es que cumpla su misión: mostrarnos la estructura general, la cantidad de pantallas que tiene un sitio o aplicación y la jerarquía que tienen los distintos elementos. Podemos resumirlo en tres puntos:

• Principales elementos de navegación y orden: menú principal, opciones adicionales en el header y footer.

• Jerarquización de los contenidos: cuál es la información principal, qué se incluye dentro de cada parte, cuáles son los niveles de profundidad.

• Etiquetas de las diferentes opciones: terminología para identificar los contenidos, tono del proyecto.

No hay una regla estricta sobre cómo se tendría que ver un Site Map ni cuánto detalle tenemos que agregarle. Hay varias maneras y decenas de herramientas para hacerlos. En esta instancia inicial, lo más conveniente es optar por la sencillez.

Un ejemplo efectivo de Site Map se ve así:

Fuente: UX Collective

Si bien los Site Maps son muy utilizados en las etapas de desarrollo de nuestro producto digital, los Site Maps pueden ser muy útiles para graficar la arquitectura de la información de los productos y servicios de la competencia. Son una buena herramienta para profundizar en el estudio comparativo que estás generando, ya que nos permiten ver las generalidades y particularidades de productos existentes y entender con mayor profundidad su valor agregado y potenciales ineficacias.

Los Site Map visualizan lo que aprendimos sobre cómo los usuarios navegan por el sitio, qué tipo de contenido necesitan para lograr sus objetivos y qué lenguaje usan para identificar elementos (ten en cuenta que en esta instancia de benchmarking nosotros mismos podemos “hacer de usuarios”).

Un punto no menor —y clave en el expertise de un diseñador UX—, es poder articular las necesidades de los usuarios con aquellos objetivos del negocio. Es decir, cómo estructurar la información, el flujo de la interacción para que los usuarios encuentren lo que necesitan, y “el negocio” pueda cumplir con sus objetivos. Cuando estés mapeando a productos de competidores o casos análogos, te servirá pensar “por qué el contenido está distribuido así y cómo eso se relaciona con los posibles objetivos de negocio” (aunque no los sepas a ciencia cierta, puedes intuirlos).

Productos con todo el (User) Flow

Si bien no hay una traducción literal al español que haga sentido, el User Flow es, nada más y nada menos, que un diagrama visual de flujo. Constituye una de las herramientas más poderosas que tenemos para identificar (y eventualmente diseñar) experiencias de alto impacto para los usuarios, ya que nos permiten:

• Entender los componentes de una determinada actividad / tarea / proceso y las relaciones que existen entre ellos.

• “Mapear el diálogo” entre una persona y un producto, sistema o servicio a través del tiempo.

• Comunicar lo que entendimos de forma uniforme, sistemática y sistémica.

• Identificar oportunidades sobre eficiencias y deficiencias, “dolores” (pain points), e incluso espacios en donde existen o podrían existir elementos “wow” que generan experiencias increíbles para los usuarios finales.¹

Un elemento crucial del User Flow que lo diferencia de otros diagramas de flujo (como el Task Flow o Customer Journey—a este último lo veremos más adelante), es que ilustra las motivaciones y pasos que un usuario ejecuta para conseguir un objetivo dentro de un sistema, los puntos de contacto, y todos los posibles caminos que pueda tomar para lograr ese mismo objetivo.

Hay un libro clásico y fundamental para hacer productos digitales: “No me hagas pensar”, de Steve Krug. Es un libro que conviene tener siempre a mano. En este caso, lo interesante es cómo plantea el User Flow de una web como análoga a un lugar físico. Lo hace con el ejemplo de una persona que intenta comprar una motosierra en una tienda física.

Al entrar, el usuario se encuentra con escenarios y caminos diferentes. Incluso puede empezar su viaje por distintos lugares, aunque la tarea –comprar la motosierra- es siempre la misma.

Fuente: “No me hagas pensar”, Steve Krug. 2006, 2da edición, pág. 53.

Este ejemplo, si bien muy ilustrativo, no respeta una norma (casi universal) para elaborar diagramas de proceso, en donde las siguientes figuras son clave:

Las tres claves para diseñar un User Flow efectivo

Antes de comenzar a armar un User Flow, lo más importante que tenemos que tener en cuenta es para qué estamos usando la herramienta y, en definitiva, qué nivel de detalle necesitamos. Los User Flows pueden ser representativos (poco detalle) o exhaustivos (alto nivel de detalle), según lo que necesitemos:

• ¿Es para explorar / analizar productos y sistemas existentes?

• ¿Es para validar alguna hipótesis?

• ¿Es para diseñar un producto propio digital?

• ¿Es para mejorar un producto existente?

Una vez definido esto, debemos tener en cuenta las siguientes tres claves que propone el diseñador de interacción Robert Sens:

1) Comienza con objetivos (tanto de usuarios como de negocios).

Es fundamental que tengas en claro qué acciones pretende hacer un usuario (tú mismo incluso) y qué acciones permite hacer el producto que estés estudiando. A esas acciones las vamos a llamar features. Una feature puede ser, por ejemplo, "grabar un audio" y la manera de representarla en la interfaz podría ser un botón con forma de micrófono.

En una aplicación para comprar perfumes podríamos tener features para realizar una pregunta, buscar una fragancia particular, hacer una compra, etc.

Recuerda que articular necesidades y objetivos de personas y entidades es uno de los principales desafíos que cualquier diseñador UX enfrenta.

2) Considera al usuario y sus modelos mentales.

Los modelos mentales de los usuarios son concepciones generales que dirigen actos y que se construyen con la experiencia de cada persona. Son los filtros a través de los que percibimos la realidad.

Aurora Harley, de Norman Nielsen Group, lo define así:

“Los usuarios suelen tener una idea en la cabeza de dónde se encuentra el buscador, el menú de navegación u otros elementos del producto digital. O lo que va a ocurrir si pulsan en un determinado enlace o botón. Esas ideas o expectativas preconcebidas son lo que llamamos modelo mental”.

Cuando diseñamos el User Flow, tenemos que tener muy en cuenta esos modelos mentales. Eso nos permitirá que el usuario pueda entrar "en flow" rápidamente y aumente la probabilidad de que logre su objetivo. El siguiente diagrama ilustra un ejemplo sencillo y casi cotidiano:

productos que ya existen, los User Flows nos van a ayudar a determinar qué funciona, qué no y qué áreas necesitan mejoras. Algunas preguntas guía:

• ¿Hay puntos en los que los usuarios se atascan? ¿Por qué ocurre eso?

• ¿Qué podemos hacer para solucionarlo?

• ¿Tiene sentido el patrón de las pantallas?

• ¿Si un usuario toma una determinada acción, lo lleva a un lugar que éste esperaría que lo lleve?

3) La comunicación y visualización es clave.

Haz los flujos fáciles de entender de un vistazo. Como buena práctica, es mejor sobre comunicar a que falte información.

El mapeo efectivo del movimiento dentro de una interfaz ayuda a ver qué opciones tiene el usuario en cada página y si las rutas disponibles lo ayudan a realizar una tarea de manera eficiente y sin perder tiempo.

Los flujos de usuario también dan una visión general de cómo la interfaz está diseñada, brindan un paso a paso de lo que el usuario verá y hará; y ayuda al equipo de diseño a visualizar cómo los usuarios se moverán por el producto, y, a su vez, garantiza que todos estén en la misma sintonía.

Vamos cerrando este proceso

Al igual que el Site Map, puede ser muy útil elaborar los User Flow de los productos sobre los que hacemos Benchmarking. Es muy interesante descubrir cómo diseñaron la arquitectura de la información y qué caminos ofrecen. ¿Qué podemos aprender de ellos? ¿Qué cosas hicieron bien y donde detectamos una oportunidad para hacerlo mejor? Usar ambas herramientas te ayudarán a ver el contexto con perspectivas nuevas.

Más adelante, cuando estemos diseñando nuestro propio producto (y su User Flow), trataremos de lograr que los usuarios naveguen por nuestro sitio y aplicación con naturalidad: que puedan elegir sus propios caminos y no se encuentren con callejones sin salida o queden atrapados/as en un loop del que no puedan salir.

Si el Site Map es la cartografía, el User Flow será la brújula de nuestro producto. Una brújula moderna: el “cómo llegar” de nuestro GPS, que hace que sea fácil llegar a esas direcciones que antes teníamos que aprender de memoria.