Creación de Diagramas de Flujo para Diseño de Aplicaciones

Clase 8 de 22Curso de Diseño para Developers

Resumen

¿Qué son los diagramas de flujo en el diseño VX?

Los diagramas de flujo en el diseño VX son herramientas esenciales que nos permiten visualizar y estructurar la interacción del usuario con una aplicación o sitio web. A partir de un brief, traducimos los requerimientos en componentes tangibles que reflejan los objetivos principales del proyecto. En el ejemplo siguiente, un objetivo era dar a conocer los productos, y este se traduce en una sección de menú y promociones. Otro objetivo era incrementar la presencia en línea, lo cual se aborda mediante una activación de redes sociales y la inclusión de un componente de redes sociales en la página.

¿Cómo se estructuran los diagramas de flujo?

Menú y promociones

Una de las secciones primordiales del diagrama de flujo es el menú, que incluye categorías como:

  • Hamburguesas
  • Bebidas
  • Acompañamientos
  • Postres

Pedidos en línea

Esta sección permite al usuario seleccionar productos y avanzar en el proceso de compra, incluyendo:

  • Resumen del pedido
  • Datos de envío
  • Mensaje de confirmación

Contacto y sucursales

Aquí el usuario puede encontrar información de contacto importante, como:

  • Teléfono
  • Dirección
  • Sucursales

Páginas externas

Dentro del sitemap, también se consideran enlaces a páginas externas como:

  • Instagram
  • TikTok
  • Facebook
  • Plataforma de pagos

¿Cuál es la utilidad de los flujos de usuarios?

Los flujos de usuarios, o user flows, son diagramas más complejos que detallan los pasos necesarios para completar tareas específicas dentro de una aplicación o sitio web. Por ejemplo, en un flujo diseñado para un usuario que completa un pedido en línea, este flujo podría seguir estos pasos:

  1. Inicio en la página principal.
  2. Navegación a la sección de menú.
  3. Consulta del detalle de producto.
  4. Adición del producto al pedido.
  5. Visualización del resumen del pedido.
  6. Proceso de pago y envío de datos.

Si los datos son correctos, el usuario accede a una plataforma de pagos y recibe una confirmación. En caso contrario, el flujo incluye pantallas de error para corregir datos antes de intentar nuevamente.

¿Por qué es importante crear diagramas de flujo?

Claridad y organización: Facilitan la identificación de componentes y pantallas necesarias, como el inicio, el detalle de producto o mensajes de error y confirmación que podrían olvidarse durante el diseño.

Inventario de pantallas: Permiten contar cuántas pantallas o componentes necesitamos diseñar para lograr una experiencia de usuario completa y fluida.

Guía para wireframes: Sirven como base para desarrollar wireframes, proporcionando una estructura clara y detallada del proyecto.

Flexibilidad: Puedes crear tantos flujos como consideres necesarios, para adaptar mejor el diseño a los objetivos del cliente.

La creación de diagramas de flujo es un paso fundamental y estratégico en el diseño VX, ya que determina la arquitectura y funcionalidad de la aplicación. Además, es una herramienta invaluable para ahorrar tiempo y recursos al prever las necesidades de diseño desde la concepción del proyecto.