A√ļn no tienes acceso a esta clase

Crea una cuenta y contin√ļa viendo este curso

Diagramas de flujo

8/22
Recursos

Aportes 87

Preguntas 4

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi√≥n.

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

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.

Dibuje esta otra forma:

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

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/

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.

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

Diagrama de flujo mostrado en el video.

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.

Dejos mis apuntes, espero les sirva ūüėÉ


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.

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.

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

Un BPMN es un userflow?

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

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 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.

Diagramas de flujo

  • Traducir requerimientos del brief a elementos tangibles
    Otra opción son los user 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.

Un ejemplo de problema de UX con el que me topo frecuentemente en Platzi es que al cargar un curso, el foco no está en el video (contenido principal). Esto me ocasiona que con el teclado no pueda regresar el video o detener la reproducción, por lo que tengo que hacer un esfuerzo adicional y dar clic dentro del video para hacer lo antes mencionado.

Definir para cada objetivo los requerimientos, por ejemplo:

objetivo: aumentar presencia en línea -> Redes sociales activas

Se puede realizar un flujo o arquitectura de proceso que simule el objetivo de la p√°gina web en este caso. Esto con el objetivo de poder desagregar los diferentes componentes en cada una de las p√°ginas.