Clase 7 – User flow, Sitemap y Wireflow

wireframe

Los user flows, sitemaps y wireflows son entregables de arquitectura de información que representan en forma abstracta y genérica la navegación y contenidos del sitio web o app.

El objetivo de estos es organizar la información, garantizando la usabilidad de la navegación en los sistemas. El uso de cada uno de ellos corresponde a la etapa en la que se encuentre el proyecto y si el proyecto corresponde a un sitio web o una app.

Sitemaps (mapa o árbol del sitio)

l entregable por excelencia de arquitectura de información. Tanto así que al mismo mapa se le dice “arquitectura de información del sitio”. El sitemap es una representación visual de las páginas que tiene un sitio web y explica:

  • La cantidad de páginas que tiene un sitio web.
  • Las dependencias y jerarquías que las páginas tienen entre sí.
  • Los niveles de profundidad de los contenidos del sitio.
  • El rol que tendrá la página en el sitio web.

¿Cuándo usar? Cuando debamos diseñar la arquitectura de un sitio web.

User flows

El user flow presenta un nivel de complejidad mayor al del mapa del sitio. Mientras que un mapa del sitio simplemente enumera el orden y las dependencias entre páginas de un sitio web, el flujo de usuario nos muestra además la secuencia lógica de la interacción del sitio definiendo las distintas posibilidades de interacción del usuario y del sistema.

La primera gran referencia para realizar flujos de usuario es el vocabulario visual de JJ Garret, que nos da todas las pautas para poder diseñar correctamente la interacción de una aplicación.

¿Cuándo usar? Cuando debamos diseñar el comportamiento de los usuarios a lo largo de una aplicación.

Los diagramas de flujo se utilizan para planificar, documentar, estudiar ideas y comunicar. Los procesos complejos se representan como diagramas claros y simples. Todos los participantes del proyecto pueden entender el mensaje.

Un flujo de usuario simple y sensato puede aumentar drásticamente las tasas de conversión (es más rápido llegar al objetivo), mientras que un flujo difícil de navegar obstaculizará seriamente el crecimiento.

Las figuras más utilizadas para diseñar user flows son las siguientes 

Terminador.
El óvalo significa el principio o el final. Por eso también se llama «terminador». Comience y termine su diagrama de flujo con esta forma.

Página.
El rectángulo es una página. Es la forma más utilizada.

Conectores.
La flecha indica direcciones. Conecta las partes del diagrama y ayuda a contar la historia completa: exposición, clímax y resolución.

Decisión.
El Diamante significa una decisión. Puede ser binaria, triple o cuádruple, cada conector nuevo será un escenario del usuario distinto.

Recomendaciones para la creación de user flows

  • Simplicidad. Mientras menos líneas tenga un user flow, mejor. Así es más fácil de leer.
  • Consistencia. Representa los elementos del flujo con las mismas figuras, manteniendo el tamaño, color y el alineado.
  • Estándar. No crear nuevas figuras para hacer los diagramas. Lo más recomendable es usar el estandar de JJ Garret o UML si se trabaja con ingeniería.
  • Tamaño. Si el diagrama se vuelve gigante, es mejor dividirlo en partes, insertando enlaces entre los diagramas.
  • Claridad. Nunca deben cruzarse los conectores de dirección, llevarán a confusión.
  • Color. Se recomienda usar colores semánticos para resaltar la lógica del flujo.

Wireflows

Dado que user flows y sitemaps son muy abstractos para la mayoría de la gente, se han llegado a nuevas formas de mostrar el flujo y el contenido del sitio: Los wireflows.

Como su nombre lo indica es un híbrido que tienen un componente de wireframe y otro de flujo lo que los hace muy indicados para mostrar en forma lógica las interacciones permitiendo analizarlas, a diferencia de los prototipos que más bien nos permiten probar la app.

Recomendaciones para la creación de wireflows

  • Agregar puntos de inicio y cierre, al igual que en los user flows.
  • Elegir un elemento de la interfaz para señalar desde donde se dispara la navegación (botones, opciones de menú, elementos contextuales).
  • En general, mantener las buenas prácticas de la creación de user flows.

Problemas usuales en la creación de los flujos

  • “En algún momento me perdí y ya no sé como seguir”. Si el flujo es demasiado complejo, se recomienda eliminar líneas. Muchas veces aparecen flujos recursivos (sobretodo en el login). Si hay una página duplicada, probablemente debe conectarse con la primera.
  • El home como punto de inicio. El home es una página del sitio web o app por lo que debe ser representada como tal. El punto de inicio solamente marca que por ahí empieza el flujo (no en todos los casos es el home).
  • “Tengo el home afuera y el home de adentro”. Puede renombrarse como Home público y Home privado.
  • Las líneas están cruzadas. Se debe evitar superponer conectores ya que dificulta la lectura del flujo.
  • Mezclar  user flows con mapas del sitio. Mantener la consistencia mejora la claridad del entregable.

Créditos: Soledad Moris (profesora Bootcamp Diseño UX/UI Talento Para Chile)

Conclusión

Enlaces relacionados

Herramientas

Demos