[separator style_type=»double» top_margin=»» bottom_margin=»» sep_color=»#1e73be» border_size=»» icon=»fa-commenting-o» icon_circle=»» icon_circle_color=»#ffffff» width=»» alignment=»center» class=»» id=»»]

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.
[content_boxes settings_lvl=»child» layout=»icon-with-title» columns=»1″ icon_align=»left» title_size=»25px» title_color=»#1e73be» body_color=»#110902″ backgroundcolor=»#e8e8e8″ icon_circle=»» icon_circle_radius=»» iconcolor=»» circlecolor=»» circlebordercolor=»» circlebordersize=»» outercirclebordercolor=»» outercirclebordersize=»» icon_size=»» icon_hover_type=»» hover_accent_color=»» link_type=»» link_area=»» linktarget=»» animation_delay=»» animation_type=»0″ animation_direction=»left» animation_speed=»0.1″ margin_top=»» margin_bottom=»» class=»» id=»»][content_box title=»Toma nota de los puntos clave de este vídeo:» icon=»fa-hand-o-right» backgroundcolor=»#e8e8e8″ iconcolor=»#ffffff» circlecolor=»» circlebordercolor=»» circlebordersize=»» outercirclebordercolor=»» outercirclebordersize=»» iconrotate=»» iconspin=»no» image=»» image_width=»35″ image_height=»35″ link=»» linktext=»» linktarget=»_self» animation_type=»» animation_direction=»» animation_speed=»»]

  • Definición de user flow
  • User flow vs. user journey: principales diferencias
    • ¿Por qué un buen diseño UX necesita definir el flujo de usuarios para mejorar sus resultados?
    • Draw.io, herramienta para crear un user flow de forma rápida
    • ¿Qué es un wireflow?

[/content_box][/content_boxes]

¿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.

[enlaces_pie_post]
[related_post posts_ids=’21248,21553,16606′]