Try   HackMD

+

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

¿Cómo crear un User Flow?

Learning Goals

  • Producir y presentar User Flows

¿Cómo crear un User Flow?

Primero que nada, siempre construye un flujo con el usuario en mente. Conocer las motivaciones y necesidades de tus usuarios, te ayudará a crear mejores User Flows.

Antes de comenzar a elaborar el flujo, debes saber:

  • Para que usuarios/personas estás creando el flujo
  • Qué historias de usuario o tareas estás documentando en el User Flow
  • De dónde vienen los usuarios y cómo llegan a este flujo (puntos de entrada)
  • Dónde comienza el flujo. Por ejemplo, ¿es una landing, una pantalla de registro, una página principal?

El primer flujo

Una forma rápida en la que puedes comenzar a explorar diferentes flujos es creando un simple bosquejo del contorno del flujo. Antes de hacer los bocetos o los prototipos, puedes incluso escribir una lista de los trazos del flujo. Esto te permitirá explorar la parte más importante de tu aplicación: el contenido.

La construcción de flujos alrededor del contenido te da una idea más acertada del número de páginas, pantallas y elementos requeridos para completar una tarea/

Este es un ejemplo de bosquejo del contorno de un User Flow:

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Por ejemplo:

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Este método fue creado por Ryan Singer, un especialista en producto digital y está explocado con más detalle (en inglés) aquí.

Diagramas de Flujo

Los diagramas de flujo constituyen el siguiente nivel para crear User Flows. Una vez que tienes el boceto o el listado, puedes utilizarlo para crear un gráfico que visualmente describa cómo el usuario se mueve a través de la aplicación y cómo la aplicación responde a las interacciones con el usuario.

Símbolos de un Diagrama de Flujo

Los diagramas de flujo utilizan formas especiales para representar diferentes tipos de acciones o pasos en un proceso.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  • Las líneas y flechas muestran la secuencia de pasos y las relaciones entre ellos
  • Los rombos representan puntos de decisión, pueden ser del usuario o del sistema
    • Ejemplo: Registrarse o Identificarse? Pagar compra o Seguir comprando? El usuario es válido o no existe?
  • Puedes incluir una leyenda que explique qué representa cada símbolo o color que utilices

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Los Stakeholders (Grupos de Interés) pueden no estar familiarizados con estos símbolos. Como verás en los ejemplos siguientes, diferentes diseñadores, empresas y grupos de trabajo utilizarán formas distintas. Incluir la leyenda para explicar cómo muestras tu trabajo es una buena práctica.

Más cerca del prototipo

Una vez que tienes el Diagrama de Flujo, puedes utilizarlo para crear un mapa con las páginas de tu aplicación y elaborar un boceto de baja fidelidad para cada página en tu flijo. Estas pantallas te ayudarán a llevar tus ideas a la realidad con más detalle en su estructura.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Este diagrama te puede servir principalmente para dos cosas:

  1. Evaluar con otros miembros del equipo o grupos de interés que has entendido el proceso o que has elaborado uno que ayuda al usuario a completar sus objetivos en la aplicación
  2. Te sirve de guía para comenzar a diseñar las pantallas. Al final del proceso, el prototipo mostrara el User Flow que diseñaste con solo palabras

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Prueba tus User Flows

La mejor manera de saber si un User Flow tiene sentido es probándolo.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Cuando estés diseñándolos es importante preguntar algunas cosas en conversaciones con usuarios y grupos de interés:

  • ¿Qué intenta lograr el usuario?
  • ¿Qué es importante para el usuario y qué le dará confianza para continuar el proceso?
  • ¿Qué información adicional necesitará el usuario para completar la tarea?
  • ¿Cuáles son las posibles dudas o barreras que pueda tener el usuario para completar la tarea?

Estas respuestas te ayudarán a definir qué le falta o le sobra a tu User Flow.

Recursos Adicionales en Inglés