Diagramas de flujo

La de tiempo que uno se ahorra haciendo diagramas de flujo pero muchas veces saltamos a querer resolver las cosas al vuelo y terminamos perdiendo más tiempo del necesario.

DIAGRAMAS DE FLUJO.
Primer paso de nuestro diseño UX son los diagramas de flujo.
Pasamos los elementos de nuestro BRIEF a elementos tangibles.
El primer diagrama se llama SITEMAP Y es un mapa completo de nuestro sitio. Aquí definimos cuales son las secciones principales, las secciones secundarias y las paginas externas a nuestro sitio.
El siguiente es el USER FLOW. Estos nos permiten hacer un diagrama de todos los pasos que hace un usuario para completar una tarea. Con este flujo podemos saber cuántas pantallas o componentes tenemos para realizar una acción de usuario.
No hay un número definido de pantallas o componentes que vamos a diseñar para un trabajo en particular.

Lo importante es tener una guia visual para no empezar a codear sin objetivos claros.
Con los diagramas de flujo nos organizamos mucho mejor

Este video me ayudo a comprender mejor que son los User flows

Dibuje esta otra forma:

Y me pregunto si se pueden incluir varias rutas dentro de un mismo diagrama de flujo, como por ejemplo:

Resumen
Se deben traducir los objetivos (previamente establecidos en el brief) a requerimientos, de la siguiente manera:

1.- Dar a conocer sus productos = Menú y promociones.
2.- Aumentar la presencia en linea = Redes sociales.
3.- Hacer pedidos online = Pedidos.
4.- Dar a conocer su marca = Contacto y sucursales

Diagrama de flujo: Lo utilizas para ver el mapa de todas las secciones del sitio web junto con su categoría.
User flow: Es un diagrama general de los pasos que tiene que hacer un usuario (desde que llega a la pagina) para hacer una tarea.

Se puede profundizar un poco más acerca de los sitemaps en el curso de arquitectura de la información
https://platzi.com/clases/1354-arquitectura-informacion/13415-sitemap/

Dejos mis apuntes, espero les sirva 😃

Pueden revisar ese articulo que también nos brinda una muy buena información para hacer analisis de usabilidad.

Compilación de artículos de usabilidad

El problema es cuando el diagrama de flujo es demasiado grande, y a veces hasta te pierdes en él-. Es por eso que es bueno documentar todo.

Diagramas de Flujo
.
El primer paso del diseño UX son los diagramas de flujo, lo que hacemos es traducir nuestro brief a elementos tangibles
Ejemplo con el brief anterior del local de hamburguesas:
.

.
Existe un tipo de Diagrama de flujo llamado SITEMAP, este nos permite ver un mapa de todas las secciones de nuestro sitio web.
Ejemplo:
.

.
Los USERFLOW son diagramas un poco más complejos que muestran todos los pasos que tiene que hacer el usuario para completar una tarea. Es clave para saber cuantos páginas vamos a tener en total.
Ejemplo:
.

.
Notas:

• Siempre tener en cuenta la pantalla de error o confirmación
• No hay un número definido de flujos para armar nuestros diagramas

Sitemap
Un mapa del sitio es un diagrama jerárquico que permite visualizar la estructura de un sitio web. Se utiliza para definir la taxonomía del sitio agrupando los contenidos relacionados. Los mapas del sitio identifican la estructura del sitio y, hasta cierto punto, los tipos de páginas. Los mapas del sitio nos muestran qué va dónde y cómo están conectadas ciertas páginas.
User Flows
Los flujos de usuario detallados, o a veces llamados flujos de tareas, se sumergen en los detalles para entender todos los pasos y decisiones que un usuario necesita tomar para pasar por su idea, característica o producto. Esto nos ayuda a comprender realmente todas las pantallas y estados que hay que diseñar y tener en cuenta en el proceso.

Diagrama de flujo mostrado en el video.

En vez de diagrama de flujo A esto lo llamaría diagramas de usuario. Ya que aquí realizamos lo pasos que el cliente va a realizar dentro de nuestro software.

Aqui estan los diagramas de flujo de vada uno de los pasos, algunos se pueden optimizar muchisimo más, pero recuerden que son mucho mejor las pequeñas mejoras e iterativas a tener un producto final impecable.
1.Diagrama General.

2.Menú.

3.Detalles del pedido.

4.Ver Pedido.

5.Diligencia de datos.

6.Pago del pedido.

Bases como estas son las que definen la calidad del programador, un buen desarrollador piensa antes de actuar y los diagramas de flujo son las mejores formas de organizar el proceso a realizar.

Excelente clase!

En detalle del producto pondría otra condicional, por si el usuario no se decide por ese producto pueda regresar al menu.

Se podría crear otra condición donde al confirmar tu pedido se verifique la dirección del envío, si su zona esta disponible, que dependerá del negocio claro.

En esta pagina se muestra un poco mas sobre la nomenclatura de los diagramas de flujo y dejo un ejemplo de login https://www.smartdraw.com/flowchart/simbolos-de-diagramas-de-flujo.htm#:~:text=Los diagramas de flujo usan,símbolos de diagrama de flujo

Algunos sitios para crear diagrmas de flujo.
Zen Flowchart
https://www.zenflowchart.com
Lucidchart
https://lucid.app/pricing/lucidchart#/pricing

DIAGRAMAS DE FLUJO

En el desarrollo de nuestro diagrama de flujo es traducir los requerimientos de nuestro Brief a elementos tangibles.

		**Objetivo -------> Requerimientos**

- Dar a conocer sus Productos -------> Menú y promociones.

- Aumentar la presencia en línea -------> Apertura de Redes Sociales y promoción en ellas.

- Hacer pedidos online -------> Sección de pedidos para los usuarios

- Dar a conocer su marca -------> Contacto y sucursales

🤔 Los diagramas de flujo nos permitirán traducir los objetivos a elementos tangibles.

Los diagramas de flujo son importantes y una gran herramienta, nos ayudan a planear y estructurar la información y los objetivos de nuestro proyecto, nos ayuda a estructurar los pasos que se deben de seguir para complementar una tarea y nos facilita a la hora de hacer código.

Los diagramas de flujo son muy necesarios a la hora de crear una pagina web y es que con estos puedes tener mucha mas claridad de como va a funcionar tu pagina y minimizar errores

La clave para hacer un diagrama de flujo eficiente es que esté siempre centrado y pensando en la experiencia del usuario.

Un BPMN es un userflow?

Buenísimo no sabia que había un curso de diagrama de flujos…

Diagramas de flujo

• Traducir requerimientos del brief a elementos tangibles
  Otra opción son los user flow

Diagramas de flujo

En un diagrama de flujo convertimos los objetivos del Brief a elementos tangibles. Tomando el brief de nuestro proyecto tendríamos el siguiente diagrama de flujo.

Ejemplo del diagrama del mapa del sitio

Diagrama de usuario (User Flow)

Los diagramas de usuario nos permite ver de manera gráfica los pasos necesarios que tiene que hacer un usuario para que este pueda completar una determinada tarea. Esto nos sirve para poder ver la cantidad de componentes necesarios, aunque estos no estén visibles, como es el caso de las pantallas de error

Diagrama de usuarios

Diagrama de flujo

Encontré este software opensource para crear wireframes y mockups
https://pencil.evolus.vn/

Diagramas de flujo para tener orden en:

• Estructura de la página web
• Número de pasos del usuario al realizar alguna actividad

El ejemplo de USER FLOW se entendió, pero la lógica del ejemplo anda errorea y genera un mal UX, ¿Cómo el cliente va a pagar 2 veces? ¿Alguien más lo notó?

Interesante que saber que los diagramas de flujo se utilizan para muchas áreas, como la ingeniería, el diseño, arquitectura, etc. Prácticamente, en todos los procesos que se lleven a cabo se puede aplicar un diagrama de flujo.

Definir los diagramas de flujo del usuario es una de las tareas a realizar lo más pronto posible, ya que ayuda a definir la arquitectura de la información del sitio. Se recomienda encarecidamente iniciar esta definición antes de diseñar la interfaz visual.
Denle una revisada a este enlace vale la pena ahondar en el tema. https://formiux.com/que-es-un-user-flow/

Por medio de constuir un Diagrama de flujo y/o un User Flow donde se muestre los pasos que debe dar un usuario en una interfaz hasta adquirir nuestro producto o servicio, es como podemos sintetizar las actividades que tendremos que realizar en nuestro proyecto, y ello nos ahorrará mucho tiempo y recursos monetarios invertidos en el proceso de trabajo.

Diagrama de flujo site map
.

Diagrama de flujo user flow
.

.

DIAGRAMS DE FLUJO
.
El primer paso a ejecutar para desarrollar un diseño UX son los diagramas de flujo donde se traducen los requerimientos del Brief a elementos tangibles.
.

.
Diagrama de todas las secciones de la aplicación
.
Primarias.
Secundarias.
Externas.
.
.

.
Diagrama de usuario user flow
.
Pasos del usuario para completar una tarea.
Componentes.
pantallas.

Diferencia entre User Journey, User Flow y Task Flow

Los diagramas de flujo hacen la traduccion los requerimientos del brief a elementos tangibles.

Los diagramas de flujo, son las bases de la programación. ¡¡A hacer uso de los mismos!!

Primero tranformamos los objetivos a requerimientos.

Con eso realizamos un mapa que muestre el recorrido de nuestra aplicación.

Si alguien como yo tambien Se animo a generar diagramas de flujo les recomiendo Creately, muy facil de usar e igual a los ejemplos de la profesora

Creately

Diagrama de Flujo que hice para la pagina web:

Diagrama de flujo que hice para el proceso de pedir/ordenar comida:

Espero les sirva, si tienen alguna sugerencia diganmela 😃
App que use para hacerlos

En un diagrama de flujo lo importante es tener claro el flujo de pantallas que vamos a diseñar.

Un diagrama de flujo es un diagrama que describe un proceso, sistema o algoritmo informático.
Los diagramas de flujo emplean rectángulos, óvalos, diamantes y otras numerosas figuras para definir el tipo de paso, junto con flechas conectoras que establecen el flujo y la secuencia.

6 elementos del brief:
Visión general del proyecto y antecedentes.
Público objetivo.
Revisión de la categoría y competencia.
Descripción y alcance del proyecto.
Objetivos comerciales.
Estrategia de diseño.

El término user experience (a menudo abreviado como UX) se refiere a cómo se siente una persona al interactuar con un sistema. Este sistema puede ser una página web, una aplicación, un programa… en general, cualquier forma de interacción entre personas y máquinas.

User Flow

Site Map --> Diagrama de flujo básico

Siempre va a hacer de suma importancia plantear de manera correcta la solucion que vamos a emplear. eso ahorra mucho tiempo.

User Flow

Diagrama de Flujo

se ve mucho más organizado y más claro ver cuantas pantallas vas a necesitar crear.

Esto del diagramas de flujo aplicado a la web, nunca lo habia visto. esto me ahorra tiempo a la hora de crear mis proyectos

8. Diagramas de Flujo:

Traducir los requerimientos del brief en elementos tangibles. Es bastante útil hacer un mapa del sitio (sitemap).

Un diagrama de usuario más complejo es el user flow (flujo de usuario), que son los pasos que hace el usuario para realizar una acción, en este caso la del paso a paso de compra.

-Diagramas de flujo

Traducimos los objetivos de nuestro brief a contenido tangible
Estos diagramas se parecen a un árbol donde tenemos al padre (pagina o componente)
y a sus hijos (lo que va dentro)

Hay otro tipos de diagramas que son un poco más complejos que 
son los users floous nos permite crear un diagrama general de todos
los pasos que tiene que hacer un usuario para completar una 
tarea con esto pordemos contar facilmente cuantos components
tenemos. Estos van a ser nuestra guia para crear los wireframes

De esta manera uno se puede evitar muchos dolores de cabeza, ya con esto se tiene una guía de lo que se quiere lograr.

Quizás me equivoque, pero no puedo evitar hacer paralelismos con conceptos de Marketing

Brief es como un Plan de Marketing compacto para que los diseñadores y desarrolladores tengan un contexto antes de arrancar el proyecto.
User Flow es similar al viaje del consumidor, son las etapas por las que debe pasar el usuario dentro de la página Web para completar el pedido

Es muy útil la manera de esquematizar nuestras paginas relacionándolas a los objetivos y a los requerimientos necesarios para lograrlos

Buena recomendación para dejar de perder tiempo a la hora de maquetar.

Un diagrama de flujo es un diagrama que describe un proceso, sistema o algoritmo informático. Se usan ampliamente en numerosos campos para documentar, estudiar, planificar, mejorar y comunicar procesos que suelen ser complejos en diagramas claros y fáciles de comprender. Los diagramas de flujo emplean rectángulos, óvalos, diamantes y otras numerosas figuras para definir el tipo de paso, junto con flechas conectoras que establecen el flujo y la secuencia.

Algunas vez han escuchado el refrán “Despacio porque voy deprisa”, cada clase de este curso hace que ese refrán resuene en mi cabeza y ahora lo entiendo más que nunca. Se hace todo este proceso de diseño para evitar trabas más adelante y que el desarrollo de los proyectos sea más fluído.

Es imortante hacer la página de errores ya que a veces no la solemos tomar en cuenta como parte de la totalidad de la aplicación.

**Flujos de Usuario
En la etapa de diseño es muy importante tomar en cuenta los flujos de usuario para centrarnos en lo que el usuario necesita hacer y cómo integrarlo de la manera más eficiente y efectiva posible. Así podremos lograr una mejor experiencia de usuario, ya que lo coloca en el centro del proceso de diseño.

Los flujos de usuario (User Flow) son la ruta que sigue un usuario tipo en un sitio web o aplicación para completar una tarea. El flujo de usuario comprende desde el punto de su entrada sumando el conjunto de pasos que ejecuta hasta que completa la tarea con un resultado exitoso.

Mis apuntes sobre 29064-diagramas-de-flujo

En el diagrama de flujo, se traducen los objetivos en requerimientos.

Los “user flows”, nos permite hacer un diagrama general de todo lo que debe hacer un usuario para completar una tarea.

¡Excelente la clase!

User flow

Estamos de acuerdo a que los diagramas de flujo son super importantes, pero espero que se profundice un poco más en el diseño
porque veo que hasta ahora vamos a brochazos gruesos.

En esta aplicación pueden realizar los diagramas fácilmente. además tiene muchas otras cosas.
https://online.visual-paradigm.com/

Sáquenme de una duda, en el diagrama de flujo presentado por la profesora, en la sección de pedidos no viene siendo lo mismo que la de pagos, que se encuentra en la sección de páginas externas ??

Diagramas de flujo
Traduciremos nuestros objetivos a elementos tangibles.
User flow: diagramas de flujo mas complejos. Nos permite hacer un diagrama general de todos los pasos que tiene que hacer un usuario para realizar una tarea.

Muy claro el diagrama de flujo

Yo siempre tuve a los diagramas de flujo como el segundo diagrama que mostro. El primero yo lo conocía como Mapa de navegación

El Diagrama de flujo y ese tipo de diagramas sirve para planear la lógica y recorridos que hará el usuario.

En el Curso de pensamineto lógico hay un modulo específicamente de diagramas de flujo.

Sitemap

User flow

Teniendo un diagrama de flujo de usuario nos ayuda mucho a tener mas claro lo que debemos hacer ( elementos tangibles ) y considerar todos los caminos que podemos tener en la interacción con el usuario.

otra cosa que se pondría es si hay disponibilidad del producto, puede ser que el producto elegido no este en ese momento y te de la opcion de decirte que no hay…

Los diagramas es la forma visual de cómo cumpliremos los objetivos el cliente. Esto nos permitirá visualizar como un usuario accederá y utilizará la página o app que estemos diseñando.

Los diagramas son parte importante de cualquier proyecto ya que nos ayuda a tener una idea para empezar a crear el wireframe de nuestro sitio web.

Es verdad es muy importante crear primero el mapa de lo que queremos en caso del design, para no perder nada dentro del objetivo y así no dejar huecos.

Muy buena practica!

El diagrama de flujo, es muy útil al inicio puede ser algo lioso si no tienes un objetivo por eso es muy importante los pasos anteriores a este.

Gracias platzi!!!

Muy buena clase, yo uso la herramienta Bizagi Modeler para realizar los flujo

Esto me recuerda una vez que hice un pedido a una pizzería por una app y fue enredado. Al final el repartidor me dijo que con ese pago si hubiera entrado por no se que parte de la app en vez de obtener 1 pizza pudiera haber conseguido 4 pizzas. Ese día me comí la pizza super triste. conclusión nunca mas volví hacer pedidos en esa pizzería.

Es muy importante hacer el diagrama de flujo así no te olvidaras de nada ,todo sera preciso y finalizaremos con un buen trabajo.

Para hacer diagramas de flujo traducimos los requerimientos de nuestro brief a elementos tangibles o módulos de la aplicación.
Entre los diagramas que podemos crear hay dos tipos:
Site map: Permite identificar todas las secciones del sitio que se van a desarrollar.
User flow: Permite visualizar todos los pasos que un usuario debe realizar para completar una tarea así también identificamos pantallas o componentes.

Me cuesta trabajo hacer los sitempas

Me ayudó mucho tomar el curso de bases de datos (básico), para los diagramas.

muchas veces se subestima este paso tan importante.

Muchas gracias por el ejemplo del diagrama de flujo.

¿Creen que un site map es un tipo de diagrama de flujo?

Yo tengo entendido que son dos cosas similares pero diferentes. El site map esta enfocado en la arquitectura de información y el diagrama de flujo esta mas enfocado en como interactúa esa arquitectura con el usuario.

¿Que opinan ustedes?

Wireframe: guía visual que representa la estructura de un sitio web.
diagrama de flujo: representación gráfica de un algoritmo o proceso.

Recomendaciones

• Diseñar las pantallas de “error”
  • En ocasiones no se toma en cuenta como parte la totalidad de la aplicación
• No hay un número definido para hacer diagramas de flujo
• Es importante que podamos tener claro el inventario de pantallas que vamos a diseñar

• Diagramas de flujo: Empieza con la traducción de los objetivos del Brief a elementos tangibles. Con esto podemos construir la estructura de la plataforma.

• Con los User Flow creamos un diagrama general de los pasos que tiene que seguir un usuario para completar una tarea. Sirve para contabilizar el numero de pantallas a diseñar.

Creo que este es uno de los cursos que la mayoría suelen pasar por alto y no son conscientes de la importancia que pueden tener.