Cómo crear flujos de usuario para comercio electrónico

Imagina que estás creando un nuevo sitio web para tu tienda en línea. Entra en un generador de páginas como WordPress y comienza a agregar secciones a las páginas, decidiendo que la barra de navegación debe estar centrada o que su clip Acerca de debe aparecer primero.

O tal vez ya tiene un sitio web y ha decidido que podría verse mejor, por lo que comienza a reubicar imágenes, texto y CTA.

De todos modos, ya se han cometido errores: en ambos casos, no hay una estrategia o un flujo de usuarios presente. El diseño se elige casualmente, salpicado como una auténtica pintura de Jackson Pollock.

Y sea fanático de Pollock o no, sus pinturas nunca tuvieron que navegar de una etapa del embudo a la siguiente.

En la nueva era de las compras en línea, tener un sitio web de comercio electrónico es fundamental: una aplicación, potencialmente beneficiosa.

Pero tener un sitio web hermoso no es suficiente de la misma manera que atraer mucho tráfico es un desperdicio a menos que convierta (es decir, compre sus productos). Necesita un sitio web diseñado para guiar a sus clientes potenciales por el camino de la conversión.

Un sitio web bien diseñado no comienza con la elección de su fuente y animación favoritas. Comienza con el mapeo de sus flujos de usuario.

¿Qué es un diagrama de flujo de usuario?

Los diagramas de flujo de usuario, también llamados diagramas de flujo de usuario, diagramas de flujo de tareas y diagramas de flujo de interfaz de usuario, muestran la ruta que sigue un usuario a través de su sitio web o aplicación para lograr un objetivo o una tarea. Al ilustrar los pasos que sigue un usuario para pasar de una página a la siguiente hasta que completa su tarea (como comprar un producto), obtiene una comprensión de cómo alentar la finalización de la tarea.

Diagrama de flujo de usuario de muestra de UX Collective.

El papel de los flujos de usuario en el diseño de UX

El diseño de la experiencia del usuario (diseño UX) se trata de crear diseños centrados en el usuario. Al poner a sus usuarios, también conocidos como clientes potenciales, en el centro de sus opciones de diseño, mejora su experiencia y aumenta las posibilidades de que naveguen hasta el final de la venta.

Los flujos de usuarios revelan cómo interactúan los usuarios con el diseño de su producto, teniendo en cuenta las acciones del usuario y la funcionalidad del producto requerida para crear una conversión.

Cree un diagrama de flujo de usuario antes de comenzar el proceso de diseño para informar las necesidades de su sitio web. Los estrategas, diseñadores y desarrolladores web usan flujos de UX para detectar deficiencias de productos y comprender el alcance de un proyecto, incluido el número de páginas, los componentes de cada uno y la arquitectura de la información de todo.

También puede crear flujos de usuarios posteriores al desarrollo del sitio web para detectar áreas de simplificación y mejora.

Ejemplo de diagrama de flujo de usuario de Creately.

Flujos de usuario de alto nivel frente a detallados

Los flujos de usuarios de alto nivel son rápidos y breves, creados para proporcionar una visión general rápida de una idea o proceso.

Los flujos de usuario detallados, o flujos de tareas, son más útiles, ya que detallan todos los pasos y decisiones involucrados en la realización de una tarea. Los diagramas de flujo detallados son lo que desea crear para informar el diseño y el contenido de su sitio web de comercio electrónico.

Algunos diferencian los flujos de usuarios de los flujos de tareas en que los flujos de usuarios enfatizan que los usuarios pueden completar una tarea de manera diferente en función de la persona y el punto de entrada.

Flujos de usuarios frente a viajes de usuarios

Los flujos de usuario son diferentes de los mapas de viaje del usuario que describen la experiencia de un usuario de un extremo a otro con un producto. Cuando los flujos se basan puramente en la acción, los recorridos de los usuarios tienen en cuenta factores como las emociones de los usuarios.

Los mapas de viaje del usuario y los mapas de viaje del cliente a veces se usan indistintamente, pero esto solo funciona cuando el usuario y el cliente son la misma persona, lo que no siempre es así. Por ejemplo, un empleador (el cliente) podría comprar una herramienta en línea para que la usen sus empleados (los usuarios).

Cómo construir diagramas de flujo de usuario

1. Decide el Propósito del Diagrama

Lo que incluya su diagrama de flujo de usuario dependerá de su objetivo y la tarea que está rastreando. Limite el número de objetivos o tareas por diagrama; trazar solo uno a la vez es lo mejor. Mirar más de uno puede complicar demasiado y abarrotar el diagrama, haciéndolo menos efectivo.

Asigne al flujo de usuario un título claro basado en su propósito para futuras referencias.

2. Comprenda a su usuario típico

Una comprensión de sus usuarios ayudará a informar la navegación del flujo de tareas que funciona mejor y el contenido que se incluirá en cada página.

Realice una investigación de usuarios para recopilar los datos de sus usuarios:

• Metas
• Motivaciones
• Características deseadas
• Nivel de experiencia/conocimiento
• Barreras

Estos factores pueden cambiar para diferentes segmentos de audiencia y etapas a lo largo del proceso de compra, pero los usará para determinar qué sucede en cada página web, cómo diseñar cada página y dónde vincular.

Los objetivos del usuario y del negocio deben alinearse para que pueda diseñar flujos de sitios web de comercio electrónico que cumplan con ambos.

Estudiar los flujos de su competencia también puede proporcionar información.

3. Crear una clave de flujo de tareas

No existen reglas estrictas sobre el aspecto que debe tener su diagrama de flujo de tareas, siempre que sea coherente y proporcione una clave para los colores y formas utilizados para que otros puedan entenderlo.

Los símbolos de flujo de usuario comunes incluyen:

Otras formas que se usan a veces incluyen triángulos, paralelogramos inclinados y formas discontinuas (en lugar de contornos sólidos). Puede ser tan específico como desee, cambiando formas para elementos adicionales como tareas del sistema, elementos de entrada o selecciones/clics.

Cualquier color utilizado debe contribuir al significado y la legibilidad de su diagrama de flujo de usuario. Considere cómo el color puede ayudar a agrupar artículos, identificar elementos y revelar patrones.

Otros tipos de diagramas de flujo de usuario

Dado que los diagramas de flujo de usuarios son exclusivos de su sitio web, no todos siguen la práctica común de usar formas y colores.

Otro estilo de flujo de usuarios se basa en los diagramas de estado utilizados en informática. Los diagramas de estado varían en apariencia, pero puede escribirlos como una serie de fracciones con flechas que guían el flujo del proceso de comercio electrónico. Las fracciones incluyen lo que el usuario ve sobre la línea de fracción y lo que hace debajo de ella, así:

También hay flujos de usuarios modelados a partir de mapas del sitio. Además de las acciones realizadas, presentan cada página web involucrada en el flujo de usuarios con una lista de todas las secciones y subsecciones en esas páginas. Luego, las flechas o líneas muestran qué secciones de la página y CTA llevan a los usuarios al siguiente paso en el flujo.

Flujo de usuario de muestra de Salinthip Kaewkerd en Behance.

4. Resuma su diagrama de flujo de usuario

Con su formato decidido, puede comenzar a mapear sus flujos de tareas. Comience con el punto de entrada elegido para su diagrama particular y enumere todos los pasos entre el punto de entrada y la finalización de la tarea.

Los puntos de entrada pueden ser cualquier fuente que lleve a un usuario a su sitio web, incluidos anuncios, redes sociales, resultados de búsqueda orgánicos, enlaces externos, campañas de correo electrónico y más. Las aplicaciones tienden a tener menos puntos de entrada que los sitios web.

Los pasos que siguen (la esencia del diagrama de flujo de la interfaz de usuario) dependerán de la tarea que haya elegido mapear. Pueden incluir elementos como formularios de inicio de sesión y registro, exploración de productos, procesos de pago o incorporación. Considere cómo llega el usuario a cada página, todas las acciones que puede realizar en ella y adónde van desde esa página para avanzar hacia su objetivo.

El paso final en su flujo de usuario no debe ser la acción del usuario que completa la tarea, sino la funcionalidad que confirma la finalización para el usuario.

Si está actualizando un sitio web de comercio electrónico actual, puede usar los informes de flujo de comportamiento de Google Analytics para obtener información sobre el origen de sus usuarios, cómo navegan por su sitio web y hacia dónde salen.

A medida que mapea su flujo de usuarios, notará que hay varias rutas que un usuario puede tomar para completar una tarea. Ramas o nodos se romperán en estos puntos para continuar mapeando las rutas principales.

Al crear diagramas de flujo, puede aumentar la legibilidad al limitar la cantidad de direcciones en las que se mueven. Si termina con flechas que apuntan en todas direcciones, su diagrama comienza a parecerse más a un laberinto. Hay muchas herramientas de flujo de usuario disponibles para crear diagramas funcionales.

5. Reduzca sus flujos

Una vez que haya creado su diagrama de flujo de usuario, es hora de sacar las tijeras. Este paso implica tres modificaciones importantes:

1. Eliminar información que no es esencial para visualizar el flujo
2. Mover detalles fuera de la navegación pura del usuario a un mapa de viaje
3. Identificar pasos que son redundantes o innecesarios

Este último paso es menos para visualizar el flujo de navegación y más para el usuario cuya experiencia está mejorando. Cuantas más decisiones y acciones tenga que tomar un usuario para completar una tarea, es menos probable que lo haga. Simplifique su flujo de usuarios tanto como pueda para aumentar las posibilidades de conversión.

6. Etiqueta con intención

Etiquete todos los elementos de su diagrama de flujo de usuario con claridad. Debe quedar claro a qué se refiere cada forma, página, sección o acción. Evite usar taquigrafía si resta valor al significado. Cuando termine, haga que algunos compañeros de trabajo revisen sus flujos de usuario para ver si pueden interpretarlos.

Optimice sus flujos de usuario con datos

Al crear un nuevo sitio web o probar nuevos diseños o contenido, considere examinar los flujos de usuarios de la vida real y compararlos con sus expectativas, como se muestra en su diagrama de flujo. Si surgen discrepancias, puede usarlas para corregir su diagrama de flujo o editar la propia interfaz de usuario para guiar a los usuarios de la manera que planeó. Varios métodos de investigación de UX prueban los flujos de usuarios, incluidas las pruebas de usabilidad, el análisis de tareas y las pruebas de árboles.

También puede usar datos de Google Analytics o investigar para ver dónde puede optimizar su flujo de usuarios para aumentar las ventas. Al crear sitios web de comercio electrónico, los flujos de usuarios se vinculan con el embudo de ventas de comercio electrónico. Es natural que los usuarios abandonen cuanto más avanzan en el embudo (de ahí la forma del embudo), pero los puntos de abandono drásticos indican áreas de mejora.

Y, a menudo, las mejoras significan optimizar su flujo de usuarios, ya sea haciendo que la navegación sea más natural, editando el diseño o agregando una copia direccional.

Las caídas en el flujo también pueden deberse a elecciones comerciales: un aumento en las tasas de rebote después de que los compradores potenciales vean el costo del envío indica que las tarifas de envío altas probablemente sean el problema.

Analice los pasos relacionados con las tasas de rebote y formule una hipótesis sobre cuál puede ser el problema (y la solución). Realice pruebas A/B de sus soluciones hasta que disminuyan los abandonos y más usuarios pasen al siguiente paso.

Diferenciar el flujo de su sitio web de comercio electrónico

Los diagramas de flujo de comercio electrónico tienden a seguir un patrón similar: descubrir una página externamente, ingresar a la página, mirar productos, agregar productos al carrito, pagar, recibir confirmación.

Si bien estos son todos los pasos involucrados en el comercio electrónico por naturaleza, vale la pena considerar su propuesta de valor única y su audiencia al diseñar flujos de usuarios.

¿Puedes ofrecer más? ¿Pueden sus usuarios beneficiarse de características adicionales?

Algunas tiendas de comercio electrónico mezclan los viajes de los usuarios y los flujos de tareas al incluir cuestionarios de personalización o funciones de prueba. El artista virtual de Sephora, por ejemplo, permite a los usuarios simular cómo se vería el maquillaje antes de comprarlo desde casa.

Otro lugar para diferenciarse en el comercio electrónico que a menudo se olvida cuando se diseñan flujos de usuarios es la poscompra. Confirmar la compra de un cliente nunca es el final del viaje del cliente. Ahora tienen que rastrear su paquete, esperar ansiosamente su llegada, desempaquetarlo con entusiasmo y posiblemente devolverlo. Vale la pena considerar cómo podría mejorar la experiencia del usuario con el envío, las páginas de agradecimiento y las ventas adicionales.

Al crear flujos para sitios web y aplicaciones de comercio electrónico, tenga en cuenta todas las etapas del embudo de comercio electrónico:

• Consideración
• Evaluación
• Compra
• Compra posterior

Impulse las ventas con flujos de UX eficientes

La experiencia del usuario es más que un bonito diseño que los usuarios disfrutan mirando. Está diseñando la arquitectura de la información y el contenido que guía a los clientes potenciales a través del viaje de comercio electrónico hacia la conversión.

Se trata de crear un sitio web o una aplicación que un usuario pueda navegar con facilidad, pasar de una etapa a la siguiente, encontrar el producto que está buscando y hacer clic en el CTA correcto cuando llegue el momento.

Abarrotar demasiados pasos entre su punto de entrada y el punto de venta significa pedirles que hagan más trabajo; muy pocos pasos pueden no ser suficientes para resolver sus dudas, lo que significa pedirles que asuman un mayor riesgo. A nadie le gusta el trabajo ni el riesgo al comprar por Internet.

Mapear un flujo de usuarios eficiente para cada una de las tareas en su sitio web es una forma efectiva de detectar los puntos de fricción del consumidor, para que pueda diseñar un producto digital que brinde una mejor experiencia de usuario y, en consecuencia, impulse las ventas.