{"id":15372,"date":"2020-12-15T17:18:28","date_gmt":"2020-12-15T15:18:28","guid":{"rendered":"http:\/\/design-toolkit.recursos.uoc.edu\/diagrama-de-flux\/"},"modified":"2021-02-09T12:20:57","modified_gmt":"2021-02-09T10:20:57","slug":"diagrama-de-flujo","status":"publish","type":"post","link":"http:\/\/design-toolkit-test.uoc.edu\/es\/diagrama-de-flujo\/","title":{"rendered":"Diagrama de flujo"},"content":{"rendered":"<h2>\u00bfQu\u00e9 es?<\/h2>\n<p class=\"normal\" style=\"text-align: justify;\">Un diagrama de flujo es un m\u00e9todo que describe con una secuencia l\u00f3gica de pasos ordenados una tarea concreta. Es un m\u00e9todo que nos permite tener una representaci\u00f3n gr\u00e1fica de la navegaci\u00f3n de una app o una web. Por ejemplo, en el diagrama de flujo de completar un proceso de compra, los pasos ser\u00edan: seleccionar los productos, a\u00f1adirlos a la cesta, seleccionar pagar, modo de pago y realizar el pago.<\/p>\n<p class=\"normal\" style=\"text-align: justify;\">Este tipo de herramientas permite al dise\u00f1ador sintetizar y analizar las diferentes interacciones del usuario con nuestra aplicaci\u00f3n o servicio. Bien trabajada es una muy buena herramienta para comunicar las interacciones entre el equipo de trabajo de un proyecto, como por ejemplo entre los dise\u00f1adores y\/o desarrolladores.<\/p>\n<h2>Materiales<\/h2>\n<p class=\"normal\">Es necesario tener definidas las funcionalidades del sistema.<\/p>\n<h2>Otras denominaciones<\/h2>\n<p>En ingl\u00e9s se conoce como <em>flow diagrams <\/em>o <em>flowcharts<\/em>.<\/p>\n<h2>\u00bfCu\u00e1ndo?<\/h2>\n<p class=\"normal\">Los diagramas de flujo se utilizan normalmente para sintetizar diferentes propuestas de interacci\u00f3n del usuario con el producto o servicio. Es perfecto para utilizar durante la conceptualizaci\u00f3n del proyecto.<\/p>\n<h2>\u00bfC\u00f3mo?<\/h2>\n<p>Lo primero que hemos de hacer es definir la tarea que queremos representar gr\u00e1ficamente. Una vez tenemos clara la tarea, debemos hacer una descripci\u00f3n secuencial de los pasos que tenemos que seguir para cumplir el objetivo. Preferentemente por escrito.<\/p>\n<p>Imaginemos que hemos ido al supermercado y queremos pagar con nuestra tarjeta de cr\u00e9dito <em>contactless<\/em>:<\/p>\n<ol>\n<li>Acercamos la tarjeta al terminal.<\/li>\n<li>Una vez en la pantalla de PIN, introducimos nuestro pin.<\/li>\n<li>Si el pin es correcto, el pago se efect\u00faa.<\/li>\n<li>Si el pin no es correcto, lo volvemos a introducir.<\/li>\n<li>Si ponemos tres veces mal el pin, el terminal no aceptar\u00e1 la transacci\u00f3n.<\/li>\n<\/ol>\n<p>Una vez tenemos los pasos descritos, podemos hacer la representaci\u00f3n gr\u00e1fica de estos:<\/p>\n<div id=\"attachment_2214\" style=\"width: 475px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-2214\" loading=\"lazy\" class=\"my-image wp-image-2214 \" src=\"\/wp-content\/uploads\/2020\/12\/diagramaflux.jpg\" alt=\"\" width=\"465\" height=\"451\" \/><p id=\"caption-attachment-2214\" class=\"wp-caption-text\">Fuente: elaboraci\u00f3n propia.<\/p><\/div>\n<p class=\"normal\">Los diagramas de flujo suelen tener un punto de inicio y un punto para marcar el fin, pero se pueden adaptar para mostrar procesos c\u00edclicos.<\/p>\n<h2>Ventajas<\/h2>\n<ul>\n<li>Es una muy buena herramienta para descomponer problemas grandes en problemas peque\u00f1os.<\/li>\n<li>Permite comprender el proceso que hay que seguir.<\/li>\n<li>Permite identificar posibles errores antes del desarrollo final de producto o servicio.<\/li>\n<\/ul>\n<h2>Inconvenientes<\/h2>\n<ul>\n<li>Si se trabaja a bajo nivel, entrando en mucho detalle en las acciones pueden generarse diagramas de flujo de dif\u00edcil comprensi\u00f3n.<\/li>\n<\/ul>\n<h2>Gu\u00edas<\/h2>\n<p>Este contenido se ampl\u00eda a trav\u00e9s de la siguiente gu\u00eda: \u201c<a href=\"http:\/\/design-toolkit-test.uoc.edu\/es\/guia\/diagrama-de-flujo\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gu\u00eda Diagrama de flujo<\/a>\u201d.<\/p>\n<h2>Referencias<\/h2>\n<p><strong>Hanington, B.; Martin, B. <\/strong>(2012). <em>Universal methods of design: 100 ways to research complex problems, develop innovative ideas, and design effective solutions<\/em>. Rockport Publishers.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00bfQu\u00e9 es? Un diagrama de flujo es un m\u00e9todo que describe con una secuencia l\u00f3gica de pasos ordenados una tarea concreta. Es un m\u00e9todo que nos permite tener una representaci\u00f3n gr\u00e1fica de la navegaci\u00f3n de una app o una web. Por ejemplo, en el diagrama de flujo de completar un proceso de compra, los pasos [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":18105,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[21],"tags":[],"_links":{"self":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/15372\/"}],"collection":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/"}],"about":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/types\/post\/"}],"author":[{"embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/users\/4\/"}],"replies":[{"embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/comments\/?post=15372"}],"version-history":[{"count":8,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/15372\/revisions\/"}],"predecessor-version":[{"id":17901,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/15372\/revisions\/17901\/"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/media\/18105\/"}],"wp:attachment":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/media\/?parent=15372"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/categories\/?post=15372"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/tags\/?post=15372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}