User Flow

¿Qué es?

Captura de pantalla 2015-03-01 a las 12.45.33 p.m.El User Flow es un principio básico de usabilidad, el cual representa gráficamente el recorrido que aplica el usuario en los sitios web. La idea es visualizar cómo el usuario busca el sitio, se mueve en él, cuánto tiempo se demora y cómo realiza cada tarea hasta llegar al final de los objetivos que quiere cumplir él o el mismo sitio.

¿Para qué se usa?

El User Flow es usado para ayudar a garantizar un excelente sitio, logrando ser claro, intuitivo y usable. La idea es mostrarle al usuario las interacciones que pueden realizar en el sitio web. Ayuda a visualizar la estructura del sitio web, también sirve para mostrarle al usuario la trayectoria de sus compras en páginas comerciales.

Se debe tener en cuenta diferentes estilos de interacción, diseños de recorridos y aplicaciones. La idea es que exista ayudas para que el usuario navegue sin perderse, y que pueda devolverse en cualquier momento.

El User Flow se diseñe pensando en cumplir tanto los objetivos de la empresa dueña del sitio, como los del usuario, y que en ambas partes obtengan lo que buscan satisfactoriamente.

¿Cuándo se realiza?

Lo ideal es realizarlo en el proceso de creación de un sitio web, y ya después se representa visualmente. Esto permite que el diseñador y desarrollador puedan definir más fácil las interacciones básicas que se van a implementar. Comenzar a realizar una página sin un buen esquema de User Flow va a traer grandes problemáticas, las cuales se van a ir reflejando a largo y corto plazo.

¿Qué herramientas se pueden usar?

  • Diagrama de flujo:

    Es la representación gráfica más usada y conocida para crear User Flow. Se basa en describir cada etapa del proceso por medio de símbolos gráficos, entre ellas están las flechas que indican la dirección. Su objetivo principal es mostrar la secuencia de navegación del usuario.

Captura de pantalla 2015-03-01 a las 1.07.00 p.m.

  • Diagramas de flujo apilados:

    Es la unión de varios diagramas de flujo que tiene como fin empezar con un diagrama de flujo (que será el más importante), y de este llegar a otro, de forma consecutiva, uniendo varios diagramas. La idea es que tengan alguna relación y se lleven de forma consecuente.

Captura de pantalla 2015-03-01 a las 1.17.24 p.m.

  • Diagramas de estado:Se basan en las opciones que escoge el usuario, creando una conversación en cada paso que elija. Aparte de mostrar los pasos de la navegación, da en detalle las acciones de la pantalla. El punto a favor de manejar este tipo de diagramas es que facilita la explicación a un colega o cliente.

Captura de pantalla 2015-03-01 a las 1.52.52 p.m.

Captura de pantalla 2015-03-01 a las 1.53.03 p.m.

Aspectos importantes para realizar un User Flow:

  • Los clientes no llegan a una página sin un medio o fuente de comunicación, por eso es importante trazar cómo llegan al sitio. Y crear estrategias de posibles entradas, algunos son:

-Búsqueda orgánica: se realiza por Google con ayuda de una o varias palabras claves.
-Publicidad pagada: son por medio de banners o algunos avisos virtuales que quizá estén en otras páginas.
-Medios sociales: publicaciones que realizan amigos de Facebook o Twitter u otro sitio social.
-Correo electrónico: enlaces enviados por otros o por la misma empresa.
-Pulse o noticias: menciones que realizan en diferentes noticias o algún blog.
-Enlace directo: es cuando un usuario ya conocedor del sitio se sabe el URL de memoria o tiene presente la ruta de entrada.

  • Para diseñar un buen User Flow es importante comprender a el usuario y saber sus motivaciones, y es importante responder ciertas preguntas como:

-¿Por qué necesita el sitio web?
-¿Qué necesidades o deseos tiene?
-¿Cuáles son sus problemas?
-¿Qué acciones debe realizar?

  • Se debe tener en cuenta qué información y de que tipo necesita el usuario para entender y mejorar su navegación. Al igual, se debe saber como manejarla, se recomienda manejar un “movimiento hacia abajo de embudo”, diagramar de una forma en que se optimice el contenido de cada pantalla mostrando un recorrido hasta la información deseada.

Ejemplos:

3n42U

diagrama-estados

speakerrate-highlevelflow

Bibliografía:

 

 

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s