Cómo crear un diagrama de flujo del usuario

Imagina que tu sitio web es como una casa embrujada: necesitas saber exactamente cómo la están recorriendo tus visitantes, dónde están los puntos ciegos y cuándo hay que dejar salir a la horda de macabros payasos para que los visitantes griten con todas sus fuerzas. Si no hay sincronización ni coordinación, el desquiciado chico de la motosierra podría tratar de espantar en una habitación vacía y tu novia vampiro podría salir del ataúd justo después de que el grupo de chicas adolescentes se haya ido al pantano de los moluscos asesinos.

Del mismo modo, si no entiendes cómo se mueven los usuarios a través del flujo de tu sitio web, te perderás el pago. Pero entender a tus usuarios no resulta tan aterrador como parece: solo necesitas un diagrama de flujo del usuario. 

Descubre por qué los diagramas de flujo del usuario son tan importantes y cómo puedes crear uno para tu sitio web.

¿Qué es un flujo de usuario?

Con frecuencia escuchas el término “recorrido del usuario”, pero el flujo del usuario es algo distinto. 

En esto radica la diferencia:

• Flujo del usuario: este elemento visual incluye todas las interacciones que los usuarios deben tener en tu sitio. Los flujos del usuario capturan la lógica "detrás de escena" que permite lo que parece ser una experiencia simple (como iniciar sesión o renovar una suscripción). Mapear esa lógica visualmente ayuda a los equipos a ver condiciones, excepciones y caminos alternativos que son fáciles de omitir en una conversación.

• Recorrido del usuario: el flujo del usuario es solo una parte del recorrido del usuario. Este incluye todo el entorno de una compra, desde las influencias fuera de línea hasta los anuncios en línea. El flujo del usuario solo se centra en los visitantes una vez que llegan al sitio o aplicación. Una vez que han salido del sitio, los visitantes continúan su recorrido del usuario.

¿Por qué usar un diagrama de flujo del usuario?

Principalmente, son los equipos de producto y de UX quienes utilizan los diagramas de flujo del usuario para comprender el flujo de un sitio web o aplicación, después de haber analizado la experiencia del cliente y las necesidades del usuario. Para comprender mejor estas necesidades y la experiencia que deseas que tengan tus clientes, es importante elaborar un mapa y visualizarlas.

Los diagramas de flujo del usuario te ayudarán a esto:

• Evitar pasar por alto pasos importantes en el proceso.

• Tomar decisiones, reunir comentarios de las partes interesadas e iterar con baja fidelidad antes de invertir mucho tiempo en el diseño.

• Reducir los errores de desarrollo y la reelaboración, al proporcionar a los ingenieros una referencia compartida y fácil de seguir sobre cómo encaja cada parte de la experiencia.

• Identificar casos extremos y la complejidad oculta (por ejemplo, lógica condicional, estados de cuenta o comprobaciones de derechos) que de otro modo podrían estar dispersos en el conocimiento de varias personas.

• Acelerar la incorporación de nuevos miembros del equipo, al reemplazar el conocimiento institucional y las largas explicaciones con una única fuente visual de información.

La conclusión es que, si valoras tu tiempo y energía, dedicar algo de tiempo a crear un diagrama de flujo del usuario reducirá los obstáculos en el futuro. 

Por ejemplo, digamos que vendes software de seguimiento de presupuesto. Es probable que tus clientes sigan las etapas del modelo AIDA en el siguiente camino a través de tu sitio web:

• Concientización: el visitante llega a tu página de destino "para pagar tarjetas de crédito más rápido".

• Interés: el visitante recorre la página y ve un video testimonial sobre una pareja que pagó su deuda de tarjeta de crédito de $30 000 (no juzgues, los zapatos son caros).

• Deseo: el visitante hace clic en una página sobre el costo de tu software, imaginando lo lindo que será deshacerse de toda esa deuda.

• Acción: el visitante compra tu software.

Si no comprendes bien lo que tu visitante busca obtener en cada página de flujo del usuario, sentirá frustración y, en última instancia, saldrá de tu sitio. Cuando sabes lo que están haciendo tus usuarios, puedes centrar tus proyectos en maximizar su experiencia en tu sitio web.

El mismo principio se aplica más allá de los flujos de marketing. Incluso los momentos simples del producto (como el inicio de sesión) pueden ocultar docenas de situaciones condicionales. Un diagrama de flujo del usuario aclara esas situaciones, para que el equipo pueda crearlas (o arreglarlas) intencionalmente en lugar de descubrirlas a través de errores y solicitudes de soporte técnico.

Cómo crear un diagrama de flujo del usuario

No empieces creando un diagrama de flujo del usuario basándote en conjeturas. En cambio, emplea datos para fundamentar tu proceso. Sigue estos pasos para recopilar la información necesaria y crear diagramas del flujo de usuario precisos.

1. Determina tu objetivo y los de tus usuarios.

No puedes dar indicaciones si no sabes cuál es el destino. Del mismo modo, no puedes crear un flujo del usuario hasta que no determines dónde quieres que lleguen tus usuarios y, lo que es aún más importante, qué es lo que realmente buscan en tu aplicación o sitio web.

Es probable que conozcas el objetivo de tu empresa, que podría ser convencer a los usuarios de que compren un producto, se suscriban a un boletín de noticias, descarguen un contenido restringido, etc., pero es posible que no esté tan claro lo que los usuarios esperan conseguir en tu sitio.

Si aún no lo hiciste, crea un mapa del recorrido del cliente para que tu empresa tenga una visión compartida de cómo debería ser la experiencia del cliente. Allí se visualiza cómo se siente un cliente en las diferentes etapas de su recorrido y con qué puntos de contacto podría encontrarse. Un software para la elaboración de mapas de recorrido del cliente revelará cómo los usuarios acceden a tu sitio web, qué hacen una vez dentro y qué hacen al abandonarlo.

Inserta una plantilla de mapa del recorrido del cliente con leyenda: esta plantilla gratuita de recorrido del cliente los ayudará a ti y a tu equipo a visualizar claramente el proceso de la experiencia de tus clientes con tu empresa. 

Si tu flujo admite un conjunto complejo de funciones, como inicio de sesión único (SSO), permisos corporativos o estados de subscripción, define también los criterios de éxito para esos escenarios desde el principio. De lo contrario, el camino ideal puede parecer perfecto, pero los casos extremos pueden afectar negativamente la experiencia.

2. Determina cómo los visitantes llegan a tu sitio web.

Si estás intentando mejorar un sitio web o una aplicación ya existente, analiza los datos. Google Analytics desglosará los porcentajes para cada uno de los siguientes métodos de entrada:

• Tráfico directo

• Búsqueda natural

• Publicidad pagada

• Redes sociales

• Sitios de referencia

• Correo electrónico

Analiza qué revelan estos diferentes puntos de acceso sobre tus usuarios y cómo puedes adaptar mejor la experiencia a sus necesidades. Estos puntos de acceso serán el punto de partida de tu diagrama de flujo del usuario.

3. Identifica qué información necesitan tus usuarios y cuándo la necesitan.

Ahora que tienes un punto de partida, piensa qué información necesita tu usuario y qué acciones debería realizar. Para convertir usuarios en clientes, debes proporcionarles la información adecuada en el momento preciso en que más la necesiten.

Cerciórate de hacerte preguntas al crear tu diagrama de flujo del usuario para comprender la perspectiva del cliente, por ejemplo: "¿Qué acción debería realizar en esta página si fuera mi cliente?", "¿Cómo navego por el proceso de pago?" y "Si yo fuera este cliente, ¿qué pensaría de este video testimonial?". Considera qué busca el cliente en una página en particular, qué emociones puede estar sintiendo y cuál es su mentalidad.

Si estás optimizando un sitio web actual, descubre lo que está funcionando ahora. En otras palabras, cuando las personas compran o realizan otras actividades, ¿qué caminos han recorrido en tu sitio? No te centres solo en la compra: pueden ser necesarias varias visitas a un sitio antes de que un cliente complete la compra. Sin embargo, si un visitante se suscribe a tu boletín o envía notificaciones por mensaje de texto a través de una ventana emergente, se considera un éxito.

Este es también el momento de pensar caminos menos comunes pero de gran impacto, como restablecimientos de contraseña, pruebas caducadas, pagos fallidos, fusiones de cuentas, errores de permisos y otras excepciones. Estos son los escenarios que suelen estar en la mente de las personas (o en notas dispersas) hasta que un diagrama los plasma en papel.

4. Diseña el flujo del usuario

Ahora que conoces a tu público, sus motivaciones y los caminos habituales que siguen para realizar diversas acciones, puedes empezar a crear un diagrama de flujo del usuario. Elige un espacio de trabajo visual, como Lucidchart, donde puedas arrastrar y soltar figuras fácilmente en el camino del usuario y anotar oportunidades para encantar e informar a tus clientes.

Comienza con figuras que indiquen los puntos de entrada, como naturales o pagados. Incluso puedes usar figuras de wireframe de baja fidelidad en lugar de solo figuras geométricas para dar una idea de cómo debería verse el sitio o la aplicación y dónde deben estar tus llamadas a la acción.

A continuación, determina cuál será la página de aterrizaje y qué decisiones tendrá que tomar tu cliente sobre ella. Agrega más figuras y puntos de decisión hasta que se complete el flujo.

Busca lograr completitud sin complejidad innecesaria. Incluye todos los detalles necesarios para que tu público tome decisiones informadas, pero evita la información superflua que dificulte la búsqueda. El nivel de detalle que proporciones debe depender completamente de las partes interesadas.

• Visiones generales: es posible que los ejecutivos solo necesiten una visión general del recorrido del usuario para comprender la lógica del negocio.

• Especificaciones técnicas: los ingenieros suelen requerir información muy específica, como las condiciones del sistema, las consultas o los puntos de contacto de la API.

Integrar wireframes en los flujos del usuario ayuda a conectar la interfaz de usuario con la lógica del sistema subyacente, facilitando la validación de que cada pantalla sea compatible con el siguiente paso. En muchos casos, una serie de wireframes puede implicar el código necesario y reducir la necesidad de extensas descripciones escritas.

Sin embargo, prioriza la eficiencia sobre la documentación exhaustiva. Si tu equipo comparte un vocabulario estándar para los componentes, nombrar el patrón puede ser más efectivo que incluir todas las imágenes. Ajusta el nivel de detalle visual para que el diagrama siga siendo un recurso útil y no una carga. Y recuerda: tu diagrama del flujo de usuario puede cambiar con el tiempo a medida que tu público evoluciona y sus motivaciones para navegar por tu sitio cambian.

5. Reúne comentarios, finaliza y comparte

Si estás creando un nuevo sitio o aplicación, comparte tu diagrama de flujo del usuario con otras partes interesadas para recopilar comentarios y realizar ajustes. Este elemento visual es especialmente poderoso en este caso, porque las partes interesadas pueden comprender la experiencia que estás proponiendo de un vistazo.

Una vez que hayas terminado el diagrama de flujo del usuario, compártelo con los diseñadores de UX, los desarrolladores web, los ingenieros de software y otros miembros del equipo para brindar contexto antes de que comiencen a crear o diseñar tu sitio web o aplicación.

Es fácil obtener comentarios sobre partes específicas de un diagrama al diseñar flujos del usuario en Lucidchart. Simplemente deja notas adhesivas o etiqueta para tus compañeros de trabajo en los comentarios para colaborar en tiempo real o de forma asíncrona. 

Además, Lucidchart sirve como fuente única de información desde el inicio de un proyecto hasta el lanzamiento del código. Si tu equipo emplea software de seguimiento de proyectos (como Jira y Confluence) o herramientas para compartir conocimientos, considera integrar el diagrama de Lucidchart en dichas herramientas para que esté siempre a mano junto con las solicitudes de soporte técnico y la documentación. Gracias a la sincronización bidireccional, cada vez que actualices tus diagramas en Lucidchart, se actualizarán automáticamente dondequiera que estén integrados, de modo que los equipos siempre trabajan con la información más reciente. 

Ejemplos de diagramas de flujo del usuario

Inspírate en estos ejemplos de diagramas del flujo de usuario. Estos ejemplos incluyen wireflows, que combinan figuras de wireframe con figuras estándar de diagrama de flujo para que puedas visualizar cómo debería ser tu sitio web o aplicación y cómo los usuarios deberían navegar allí.

Con tu diagrama terminado, tendrás un recorrido del usuario más concreto que puede servir de base para las prácticas de la empresa de aquí en adelante. Comprenderás mejor a tus clientes y podrás brindarles un recorrido exitoso no solo a través de tu sitio web o aplicación, sino también a través de todo el ciclo de vida en el que experimenten tu producto y empresa.