Desde dejar su e-mail para recibir m√°s informaci√≥n de un servicio a acabar comprando un producto, el dise√Īo de una web debe tener siempre en el centro al usuario, de forma que sienta que el site le gu√≠a en cada acci√≥n que √©l debe desarrollar para lograr su objetivo.

Porque, por m√°s empe√Īo que pongamos en crear un dise√Īo atractivo de nada servir√° si esa web ha pasado por alto un concepto clave para mejorar los resultados de cualquier proceso de conversi√≥n web: la definici√≥n de los flujos de usuarios, conocidos en ingl√©s como user flow.

Como queremos que tus proyectos no solo se posicionen en Google sino que transformen las visitas en nuevos clientes, en este v√≠deo Mar√≠a S√°nchez ‚Äď especialista en CRO de Webpositer ‚Äď te explica al detalle por qu√© los diagramas de flujo mejoran la experiencia de usuario (UX) y c√≥mo puedes aplicarlos en el dise√Īo de tu sitio web.

¬ŅQu√© es user flow en dise√Īo UX?

Si deseas que un usuario act√ļe de cierto modo en tu web, sigue esta m√°xima: p√≥nselo f√°cil. La definici√≥n de los flujos de usuario en el dise√Īo de un site responde a esta necesidad.

Con el término user flow hacemos referencia al diagrama gráfico que representa todos los pasos que el usuario debe realizar hasta lograr el objetivo final planteado para esa página.

Para identificar cada parte de ese proceso, los flujos de usuarios emplean diversas figuras geométricas (cuadrados, rectángulos, círculos o rombos) con un significado definido previamente, conectadas por flechas y líneas que marcan la dirección y recorrido del flowchart desde el inicio al final.

Adem√°s, la lectura de cualquier user flow siempre es de izquierda a derecha y de arriba a abajo.

User flow ejemplo

Como puedes ver en el ejemplo que María expone en el vídeo sobre el proceso para loguearse en la aplicación de una entidad bancaria, las decisiones son representadas con formas geométricas diferentes:

  • Decisiones del sistema como mostrar la p√°gina para que el usuario se d√© de alta se simbolizan con un rect√°ngulo azul.
  • Decisiones del usuario como introducir sus datos de forma figuran con la representaci√≥n de un rombo.

Diferencias entre user flow y user journey

Tal vez cuando has comenzado a leer este art√≠culo has pensado: ¬ęYo conozco el concepto user journey pero esto de user flow… ¬Ņser√° lo mismo?¬Ľ.

Aunque con parecidos razonables, ambos términos están relacionados entre sí pero guardan importantes diferencias que debes conocer para aplicar cada concepto cuando corresponde.

Mientras el user flow

  • Muestra un recorrido espec√≠fico del usuario dentro de un proceso de conversi√≥n.
  • Est√° enfocado a un objetivo concreto, por ejemplo, conseguir que un usuario se registre en una aplicaci√≥n web.
  • Incluye acciones y decisiones en el proceso.

En el caso del user journey

  • El recorrido del proceso es m√°s amplio.
  • Cuenta con un enfoque estrat√©gico porque enlaza los puntos de decisi√≥n del usuario con todas las fases por las que atraviesa un usuario durante la conversi√≥n: concienciaci√≥n, compromiso, evaluaci√≥n, compra y post-compra.
  • Incluye touch-points o puntos de contacto que el usuario mantiene con la marca, desde la web a sus redes sociales, pasando por la visita a su tienda f√≠sica.

En este ejemplo de user journey extraído del blog de Alexa, se identifica en primer lugar el perfil del usuario (buyer persona), detallando información como datos demográficos, actividad profesional, decisión de compra, influencias, valores y retos.

user journey - vacio - blogalexa

Ya en la franja inferior, esta representación del user journey indica las acciones, miedos y dudas, así como los puntos de contacto existentes en cada una de las fases del proceso de conversión, que antes hemos detallado.

3 grandes motivos para usar diagramas de flujo de usuarios que mejoren el UX de tu web

Ya hemos avanzado al inicio de este art√≠culo que la definici√≥n del user flow da al usuario el protagonismo que merece dentro de cualquier proceso de dise√Īo web orientado a optimizar resultados.

Si vamos más allá, el diagrama de flujo permite detectar cada paso del proceso de un modo detallado, considerando todas las posibles acciones y decisiones que se pueden dar en ese escenario hasta conseguir que el usuario logre el propósito previsto para esa página.

Al mismo tiempo, cuando estudiamos ese recorrido, conseguimos detectar puntos de fricción (miedos, obstáculos o dudas), decisiones que el usuario debe tomar para continuar el proceso y que es importante identificarlas e incluirlas en el flowchart.

Todo ello ayuda a mejorar la experiencia de usuario del dise√Īo no solo de ese proceso espec√≠fico sino de esa p√°gina o landing page concreta para potenciar su capacidad de conversi√≥n.


Te interesa: 

Todos los elementos imprescindibles para el dise√Īo de landing pages efectivas

Recuerda: también puedes leer el post aquí.


¬ŅQu√© necesitas para definir un user flow?

Un consejo: antes de lanzarte a coger l√°piz y papel para trazar ese primer boceto del diagrama de flujo, te recomendamos que dediques tiempo a pensar en las necesidades de tus usuarios.

Así será más fácil que el proceso las satisfaga desde el inicio hasta el final.

¬ŅYa has dado este paso? Ahora s√≠ presta atenci√≥n a las claves que Mar√≠a aporta para detallar a la perfecci√≥n un flujo de usuarios adaptado a las necesidades de ese proyecto.

1 ‚Äď Define a tu usuario

Identifica al mil√≠metro el perfil del potencial cliente o usuario que va a realizar ese proceso dise√Īado previamente.

2 ‚Äď Determina los puntos de entrada

En la creación de un user flow para UX debes establecer desde dónde va a entrar ese usuario para recorrer todo el proceso.

En este punto, ten presente tanto el canal desde el que llegue el usuario como el dispositivo utilizado para desarrollar este itinerario.

3 ‚Äď Detalla los objetivos

Piensa cuál es el propósito que buscas con ese proceso para que cada una de las decisiones e interacciones ayuden a su consecución final.

Utiliza Google Analytics para definir usuarios, puntos de entrada y objetivos de tu user flow

Desde el panel de Audiencia de Google Analytics puedes realizar un perfil aproximado de los usuarios que est√°n llegando a esa p√°gina.

Darás con datos sobre la edad, sexo, idioma, ubicación, así como si se trata de usuarios recurrentes o nuevos y qué dispositivos utilizan para visitar la web, entre otros aspectos.

user-flow-analytics

Además, desde Adquisición puedes conocer los canales por los que tu web recibe tráfico.

Para ver definido el user flow de nuestra web de un modo más gráfico, accede desde Audiencia a la opción Flujo de Usuarios.

flujo-usuarios-analytics

Podr√°s a√Īadir segmentos SEO para hacerlo m√°s espec√≠fico y as√≠ identificar las p√°ginas que est√°n visitando los usuarios con el perfil que has definido.

google-analytics-definir-user-flow

C√≥mo dise√Īar un diagrama de flujo f√°cil y r√°pido

Ya te avisamos que para crear un user flow t√ļ solito no has de ser un as del dise√Īo. Hay herramientas online que te facilitan al m√°ximo este trabajo. Eso s√≠, lo importante es que definas bien ese flowchart antes de empezar a darle forma gr√°fica.

María te recomienda la herramienta Draw.io, con la que podrás simbolizar ese proceso con diferentes formas geométricas sobre un lienzo, conectándolas con flechas y líneas.

Además de dar color a cada figura en función de la acción a destacar, podrás incluir texto en su interior para especificar al máximo los pasos del user flow.

crear-user-flow

Y ahora que ya conoces los diagramas de flujo, ¬Ņsabes qu√© es un wireflow?

Cuando pulimos al máximo la representación gráfica del user flow no solo explicando los pasos de todo el proceso, sino que el diagrama muestra bocetos de cada una de las fases para un resultado visual más atractivo y esclarecedor estamos ante lo que se conoce como wireflow.

Con herramientas como Wireflow.co puedes comenzar a realizar estos avanzados diagramas.

El uso habitual de los wireflows se da en aplicaciones m√≥viles donde es m√°s sencillo visualizar los pasos mostrando los mismos dise√Īos que ver√° el usuario que con representaciones geom√©tricas m√°s abstractas.

En este ejemplo, el wireflow comienza con una lista de m√ļsica que el usuario debe a√Īadir, ense√Īando cada una de las acciones que este debe realizar y c√≥mo actuar√≠a la aplicaci√≥n.

wireflow

Asimismo, este diagrama de flujo tambi√©n identifica las decisiones que ha de tomar el usuario, al tiempo que ense√Īa qu√© informaci√≥n aportar√° la app seg√ļn las dos posibles acciones que el usuario puede realizar: a√Īadir o borrar esa lista de m√ļsica.

¬ŅListo para multiplicar la efectividad y conversi√≥n de tus p√°ginas con un dise√Īo pensado para mejorar la experiencia del usuario?

Aplica todos estos conocimientos sobre cómo crear un user flow en tu proyecto y ampliarás las posibilidades de dar a tus usuarios lo que desean en cada página.

¬°TENEMOS MUCHO M√ĀS SEO QUE ENSE√ĎARTE!

Tenemos la formación SEO más completa. Aprende de los mejores y transforma tu pasión en una profesión.

Do you SEO?

T√ö
NO ERES
JUAN PALOMO

¬ŅNecesitas que un equipo profesional y simp√°tico te ayude a ganar la batalla en Internet?

¡Aquí nos tienes!