{"id":117418,"date":"2022-02-24T11:07:06","date_gmt":"2022-02-24T14:07:06","guid":{"rendered":"https:\/\/fluency.io\/br\/blog\/?p=661"},"modified":"2023-07-26T16:12:11","modified_gmt":"2023-07-26T19:12:11","slug":"guia-fluxogramas-ux","status":"publish","type":"post","link":"https:\/\/homolog.fluency.io\/br\/blog\/guia-fluxogramas-ux\/","title":{"rendered":"Fluxogramas de UX: conhe\u00e7a os principais e suas aplica\u00e7\u00f5es"},"content":{"rendered":"\n<p>Para quem tem pressa: <strong>fluxogramas s\u00e3o esquemas visuais para ilustrar o funcionamento de um sistema,<\/strong> como o UX, em que o usu\u00e1rio transita pelas etapas de uma tarefa. S\u00e3o ferramentas que auxiliam o <a href=\"https:\/\/fluency.io\/br\/blog\/guia-ux-designer\/\" data-type=\"post\" data-id=\"3673\" target=\"_blank\" rel=\"noreferrer noopener\">profissional de UX<\/a> na documenta\u00e7\u00e3o do projeto.<\/p>\n\n\n\n<p>Muito complicado? Vamos simplificar!<\/p>\n\n\n\n<p>Ok, o projeto j\u00e1 est\u00e1 em andamento. Ap\u00f3s as etapas de pesquisa e explora\u00e7\u00e3o, voc\u00ea compilou as descobertas e criou personas que servir\u00e3o de base para o que ser\u00e1 projetado.<\/p>\n\n\n\n<p>Com o que foi descoberto e solicitado pelos entrevistados, \u00e9 irresist\u00edvel a tenta\u00e7\u00e3o de desenhar telas, <em>mockups<\/em>, microintera\u00e7\u00f5es e anima\u00e7\u00f5es. E mesmo que isso seja \u00fatil nas etapas futuras do projeto, n\u00e3o preencher\u00e1 as lacunas de planejamento da solu\u00e7\u00e3o totalmente.<\/p>\n\n\n\n<p>Como a solu\u00e7\u00e3o se encaixa no dia a dia do usu\u00e1rio? Em que situa\u00e7\u00f5es vai interagir ou recorrer a ela? Quais tarefas o usu\u00e1rio precisa cumprir e o n\u00edvel de complexidade delas? Que etapas s\u00e3o necess\u00e1rias? Quais as condi\u00e7\u00f5es ideais para o sucesso? Como reduzir a complexidade?<\/p>\n\n\n\n<p>Para poupar recursos e esfor\u00e7os desnecess\u00e1rios, <strong>\u00e9 fundamental preencher essas lacunas, mantendo o usu\u00e1rio no centro do planejamento<\/strong>.&nbsp; Confira como responder a essas perguntas usando alguns dos principais fluxogramas de UX.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"user-journey-map-mapa-de-jornada-do-usuario\"><strong><em>User Journey Map<\/em><\/strong><strong> (Mapa de Jornada do Usu\u00e1rio)<\/strong><\/h2>\n\n\n\n<p>Foca nos pontos de intera\u00e7\u00e3o de um usu\u00e1rio com uma marca ou servi\u00e7o durante a jornada, para atingir determinado objetivo. Indica motiva\u00e7\u00f5es, obst\u00e1culos, pontos de dor e de satisfa\u00e7\u00e3o em cada fase.<\/p>\n\n\n\n<p>\u00c9, portanto, direcionado a mapear a experi\u00eancia do usu\u00e1rio, sem detalhar especifica\u00e7\u00f5es do sistema. Exibe tamb\u00e9m etapas n\u00e3o restritas ao sistema&nbsp; desenvolvido, como as que antecedem o primeiro contato com a marca.<\/p>\n\n\n\n<p>Por exemplo, um usu\u00e1rio da Amazon gostaria de comprar um livro. Antes de acessar o site e chegar \u00e0 tela do produto, executou v\u00e1rias a\u00e7\u00f5es:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>sentiu a necessidade inicial para comprar o livro;<\/li><li>leu resenhas e cr\u00edticas;<\/li><li>pesquisou em uma ou mais lojas ou sites, usando, provavelmente, o smartphone;<\/li><li>comparou pre\u00e7os e condi\u00e7\u00f5es de pagamento e entrega.<\/li><\/ul>\n\n\n\n<p>Tomada uma decis\u00e3o, acessou o site da Amazon para encontrar novamente o livro, adicion\u00e1-lo ao carrinho e concluir a compra.<\/p>\n\n\n\n<p>Depois, recebeu a confirma\u00e7\u00e3o do pedido, acompanhou a entrega pelo site e recebeu o produto embalado.<\/p>\n\n\n\n<p>Ao mapear a jornada do usu\u00e1rio, <strong>voc\u00ea identifica as motiva\u00e7\u00f5es para iniciar cada etapa, as frustra\u00e7\u00f5es e os obst\u00e1culos, bem como pontos prop\u00edcios<\/strong> para trazer surpresas positivas \u00e0 experi\u00eancia dele.<\/p>\n\n\n\n<p>A partir daqui, o uso do mapa depende dos objetivos do projeto ou das descobertas feitas. Poderiam ser:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>melhorias nas etapas de pesquisa pelo produto, otimizando mecanismos de busca, an\u00fancios, taxonomia do site, filtros, entre outros;<\/li><li>melhorias de usabilidade na p\u00e1gina do produto;<\/li><li>revis\u00e3o da comunica\u00e7\u00e3o no site, e-mail e notifica\u00e7\u00f5es para fornecer transpar\u00eancia durante a entrega da mercadoria;<\/li><li>lan\u00e7amento de uma nova funcionalidade para suprir uma demanda espec\u00edfica da jornada.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"user-flow-fluxograma-do-usuario\"><strong><em>User Flow<\/em><\/strong><strong> (Fluxograma do Usu\u00e1rio)<\/strong><\/h2>\n\n\n\n<p>O Fluxograma do Usu\u00e1rio ou <em>User Flow<\/em> (como vou tratar daqui para frente) \u00e9 diferente do Mapa de Jornada do Usu\u00e1rio. Isso porque n\u00e3o apenas explica as etapas para cumprir uma ou mais tarefas em um sistema definido, mas tamb\u00e9m exibe em detalhes o modelo de navega\u00e7\u00e3o, a rela\u00e7\u00e3o entre as telas percorridas, os inputs do usu\u00e1rio, as condi\u00e7\u00f5es para seguir e os resultados obtidos.<\/p>\n\n\n\n<p>\u00c9 \u00fatil principalmente <strong>nas etapas de Arquitetura de Informa\u00e7\u00e3o e Design de Intera\u00e7\u00e3o em um projeto de UX<\/strong>, quando h\u00e1 defini\u00e7\u00f5es mais detalhadas dos seguintes itens:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>necessidades dos usu\u00e1rios;<\/li><li>objetivos de neg\u00f3cios;<\/li><li>especifica\u00e7\u00f5es funcionais<\/li><li>requisitos de conte\u00fado.<\/li><\/ul>\n\n\n\n<p>Dessa forma, normalmente \u00e9 projetado ap\u00f3s as fases de explora\u00e7\u00e3o e descoberta, ou seja, depois do Mapa de Jornada do Usu\u00e1rio. L\u00f3gico, isso pode variar de projeto para projeto. Tamb\u00e9m pode ser utilizado para comunica\u00e7\u00e3o com <em><a href=\"https:\/\/fluency.io\/br\/blog\/gestao-stakeholders\/\" data-type=\"post\" data-id=\"2939\" target=\"_blank\" rel=\"noreferrer noopener\">stakeholders<\/a> <\/em>e desenvolvedores.<\/p>\n\n\n\n<p>Importante refor\u00e7ar que o Fluxograma do Usu\u00e1rio n\u00e3o se trata de um Sitemap (mapa est\u00e1tico com a rela\u00e7\u00e3o hier\u00e1rquica entre telas de um sistema ou site).<\/p>\n\n\n\n<p>Existem diferentes tipos de Fluxograma do Usu\u00e1rio, variando em n\u00edvel de detalhamento visual e estrutural.<\/p>\n\n\n\n<p>Jesse James Garrett (autor de Elementos da Experi\u00eancia do Usu\u00e1rio) criou um vocabul\u00e1rio visual para facilitar e padronizar a documenta\u00e7\u00e3o de fluxogramas de UX. Ele deixou claro o que s\u00e3o no sistema itens, como p\u00e1ginas, condi\u00e7\u00f5es, tarefas, &nbsp;elementos comuns, pontos de continuidade etc.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"http:\/\/jjg.net\/ia\/visvocab\/\" target=\"_blank\" rel=\"noreferrer noopener\">A visual vocabulary for describing information architecture and interaction design<\/a><\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/medium.com\/gobee\/vocabul%C3%A1rio-visual-c4f8b5aefe1e\" target=\"_blank\" rel=\"noreferrer noopener\">Vocabul\u00e1rio Visual &#8211; Um resumo para consulta e refer\u00eancia<\/a><\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"http:\/\/archive.iainstitute.org\/pt\/translations\/000332.html\" target=\"_blank\" rel=\"noreferrer noopener\">Um Vocabul\u00e1rio Visual para AI e Design de Intera\u00e7\u00e3o<\/a><\/li><\/ul>\n\n\n\n<p>Por esse vocabul\u00e1rio, <strong>\u00e9 poss\u00edvel desenhar sistemas complexos e quebr\u00e1-los em partes menores<\/strong>, de acordo com as tarefas realizadas pelo usu\u00e1rio.<\/p>\n\n\n\n<p>\u00c9 uma documenta\u00e7\u00e3o mais robusta, por\u00e9m mais \u201cortodoxa\u201d e t\u00e9cnica, menos apelativa visualmente e requer uma certa curva de aprendizado ou uso de legendas para ser compreendida pelos clientes e os desenvolvedores.<\/p>\n\n\n\n<p>Na minha avalia\u00e7\u00e3o, tende a cair em desuso, dando espa\u00e7o para outras formas de documenta\u00e7\u00e3o, consultadas com mais frequ\u00eancia (como <em>wireframes<\/em> comentados e prot\u00f3tipos).<\/p>\n\n\n\n<p>Pessoalmente, utilizo esse fluxograma no in\u00edcio do projeto (mas com menos detalhes), como ferramenta para me guiar com rela\u00e7\u00e3o ao que precisa ser desenhado e a quest\u00f5es que precisam ser respondidas.<\/p>\n\n\n\n<p>\u00c9 um processo de idas e vindas entre desenhar <em>wireframes<\/em>, consultar e adaptar <em>User Flows<\/em>, at\u00e9 que os evoluo para as duas varia\u00e7\u00f5es mais comuns: <em>Wireflows <\/em>e <em>Interaction Flows<\/em>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"wireflows\"><strong>Wireflows<\/strong><\/h2>\n\n\n\n<p>Ao mesmo tempo em que o <em>User Flow<\/em> \u00e9 bastante detalhado em condi\u00e7\u00f5es, decis\u00f5es, idas e vindas e erros, ele \u00e9 muito abstrato na camada visual, pois n\u00e3o exibe nem relaciona os &#8220;n\u00f3s&#8221; do fluxograma \u00e0s telas a que se referem.<\/p>\n\n\n\n<p>Conforme proposto pela Nielsen Norman Group (<a href=\"https:\/\/www.nngroup.com\/articles\/wireflows\/\">https:\/\/www.nngroup.com\/articles\/wireflows\/<\/a>), uma alternativa a isso s\u00e3o &#8220;<em>Wireflows<\/em>&#8220;, que consistem em uma combina\u00e7\u00e3o de <em>wireframes <\/em>com <em>User Flows<\/em>.<\/p>\n\n\n\n<p>Nesse caso, \u00e9 poss\u00edvel <strong>acessar os benef\u00edcios do <\/strong><strong><em>User Flow<\/em><\/strong><strong>, mas com as refer\u00eancias visuais de que carece.<\/strong> Em vez de mostrar ret\u00e2ngulos, s\u00e3o exibidos telas e modais que comp\u00f5em a solu\u00e7\u00e3o para aquela tarefa.<\/p>\n\n\n\n<p>Deixam de expor linhas conectadas a quadrados e tri\u00e2ngulos, para exibir a conex\u00e3o entre um determinado bot\u00e3o pressionado e a tela aberta em consequ\u00eancia disso.<\/p>\n\n\n\n<p>Al\u00e9m de serem mais precisos e f\u00e1ceis de ler, <em>Wireflows<\/em> s\u00e3o utilizados em sess\u00e3o de planejamento em conjunto, em que se pode colaborar com outras pessoas para desenhar o fluxo do usu\u00e1rio pelas telas do sistema.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"interaction-flows\"><strong>Interaction Flows<\/strong><\/h2>\n\n\n\n<p>Se <em>Wireflows <\/em>s\u00e3o <em>User Flows<\/em> detalhados, <em>Interaction Flows<\/em> s\u00e3o o pr\u00f3ximo n\u00edvel.<\/p>\n\n\n\n<p>Os diferenciais dos <em>Interaction Flows<\/em> (ou <em>IX Flows<\/em>) s\u00e3o principalmente a camada extra de informa\u00e7\u00f5es que exibem:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>anota\u00e7\u00f5es;<\/li><li>descri\u00e7\u00f5es;<\/li><li>gestos b\u00e1sicos de intera\u00e7\u00e3o (rolagem, dois toques, <em>swipe <\/em>etc.).<\/li><\/ul>\n\n\n\n<p><strong>\u00c9 comum ver <\/strong><strong><em>Interaction Flows<\/em><\/strong><strong> criados com o layout final<\/strong>, e n\u00e3o com <em>Wireframes<\/em>. Tudo depende da finalidade do documento.<\/p>\n\n\n\n<p>Por exemplo, em etapas preliminares de defini\u00e7\u00e3o de Design de Interface e Design de Navega\u00e7\u00e3o, n\u00e3o faz sentido exibir o layout final, pois esse n\u00e3o \u00e9 o foco. J\u00e1 para uma documenta\u00e7\u00e3o para desenvolvedores, apresentar o layout final pode ser \u00fatil.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"bonus-sitemap-mapa-do-site\"><strong>B\u00f4nus: <\/strong><strong><em>Sitemap <\/em><\/strong><strong>(Mapa do Site)<\/strong><\/h2>\n\n\n\n<p>Como j\u00e1 expliquei, o<em> Sitemap<\/em> n\u00e3o pode ser classificado como fluxograma, porque n\u00e3o exibe um fluxo de informa\u00e7\u00f5es ou tarefas, e sim as rela\u00e7\u00f5es hier\u00e1rquicas entre as principais telas ou p\u00e1ginas de um sistema, site ou aplicativo.<\/p>\n\n\n\n<p><strong>A<\/strong><strong> ferramenta de UX \u00e9 utilizad<\/strong><strong>a<\/strong><strong> principalmente nas tarefas de Arquitetura de Informa\u00e7\u00e3o<\/strong>, pois fornece uma vis\u00e3o clara e ampla das principais \u00e1reas do sistema planejado. \u00c9 usada para defini\u00e7\u00e3o de taxonomia por agrupamento de conte\u00fado relacionado.<\/p>\n\n\n\n<p><em>Sitemap<\/em>s organizam o conte\u00fado de um sistema, mas n\u00e3o exibem a forma como usu\u00e1rios interagem com ele ou realizam as tarefas por esse recurso. \u00c9, portanto, uma ferramenta relacionada ao planejamento, \u00e0 estrutura\u00e7\u00e3o e \u00e0 defini\u00e7\u00e3o de conte\u00fado.<\/p>\n\n\n\n<p>O <em>Sitemap<\/em> pode ser exibido no sistema pela hierarquia de menus para acesso a p\u00e1ginas de conte\u00fado ou de produto. Assim, ajuda o usu\u00e1rio a iniciar a navega\u00e7\u00e3o ou a encontrar um item espec\u00edfico ao utilizar a solu\u00e7\u00e3o.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusao-e-recomendacoes\"><strong>Conclus\u00e3o e recomenda\u00e7\u00f5es<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Fluxogramas de UX s\u00e3o documenta\u00e7\u00f5es criadas pelo respons\u00e1vel pelo planejamento da <a href=\"https:\/\/fluency.io\/br\/blog\/user-experience\/\" data-type=\"post\" data-id=\"2959\" target=\"_blank\" rel=\"noreferrer noopener\">\u00e1rea de UX<\/a>.<\/li><li>S\u00e3o \u00fateis em diversas etapas de um projeto.<\/li><li>N\u00e3o s\u00e3o documenta\u00e7\u00f5es est\u00e1ticas: podem evoluir conforme o andamento do projeto.<\/li><li>No caso de <em>User Flows,<\/em> a principal fun\u00e7\u00e3o \u00e9 ilustrar o caminho percorrido pelo usu\u00e1rio ao realizar uma tarefa em um sistema.<\/li><li>Essas documenta\u00e7\u00f5es precisam ser utilizadas. Caso n\u00e3o forem compreens\u00edveis ou nem trouxerem as informa\u00e7\u00f5es necess\u00e1rias, caem em desuso e resultam em esfor\u00e7o desperdi\u00e7ado.<\/li><li>Cuide para que sejam exibidas somente as informa\u00e7\u00f5es necess\u00e1rias.<\/li><li>Procure focar na tarefa principal por fluxograma, de modo a simplificar o desenho e a legibilidade.<\/li><\/ul>\n\n\n\n<p>Agora, voc\u00ea j\u00e1 conhece os principais fluxogramas de UX. Que tal us\u00e1-los em seu pr\u00f3ximo projeto?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"desenvolva-a-sua-carreira-em-ux\"><strong>Desenvolva a sua carreira em UX&nbsp;<\/strong><\/h2>\n\n\n\n<p>A Awari \u00e9 uma <strong>plataforma completa<\/strong> com mentorias individuais, cursos com aulas ao vivo e suporte de carreira.<\/p>\n\n\n\n<p>Conhe\u00e7a nossa <a rel=\"noreferrer noopener\" href=\"https:\/\/fluency.io\/br\/blog\/trilha-de-design\/\" target=\"_blank\">trilha de Design<\/a> e confira os nossos<a href=\"https:\/\/fluency.io\/br\/blog\/curso\/product-management\/\"> <\/a><a href=\"https:\/\/fluency.io\/br\/blog\/curso\/ux-design\/\" data-type=\"page\" data-id=\"5566\">cursos de UX<\/a> e <a href=\"https:\/\/fluency.io\/br\/blog\/curso\/ui-design\/\" data-type=\"page\" data-id=\"5574\" target=\"_blank\" rel=\"noreferrer noopener\">UI Design<\/a> com jornada personalizada e materiais complementares desenvolvidos por especialistas no mercado.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>descubra o que s\u00e3o e veja como utilizar User Flows, Wireflows, Interaction Flows e Sitemaps<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":[186],"meta":{"inline_featured_image":false,"footnotes":""},"categories":[229],"tags":[],"trilha":[],"class_list":["post-117418","post","type-post","status-publish","format-standard","hentry","category-skills","format-artigos"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Fluxogramas de UX: conhe\u00e7a os principais e suas aplica\u00e7\u00f5es - Fluency.io Brasil<\/title>\n<meta name=\"description\" content=\"descubra o que s\u00e3o e veja como utilizar User Flows, Wireflows, Interaction Flows e Sitemaps...\" \/>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Fluxogramas de UX: conhe\u00e7a os principais e suas aplica\u00e7\u00f5es - Fluency.io Brasil\" \/>\n<meta property=\"og:description\" content=\"descubra o que s\u00e3o e veja como utilizar User Flows, Wireflows, Interaction Flows e Sitemaps...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/homolog.fluency.io\/br\/blog\/guia-fluxogramas-ux\/\" \/>\n<meta property=\"og:site_name\" content=\"Fluency.io Brasil\" \/>\n<meta property=\"article:published_time\" content=\"2022-02-24T14:07:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-26T19:12:11+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"kaue\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/homolog.fluency.io\\\/br\\\/blog\\\/guia-fluxogramas-ux\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/homolog.fluency.io\\\/br\\\/blog\\\/guia-fluxogramas-ux\\\/\"},\"author\":{\"name\":\"kaue\",\"@id\":\"https:\\\/\\\/homolog.fluency.io\\\/br\\\/#\\\/schema\\\/person\\\/7b3b2b50ba17b7f2ad0cce0a40bfa00a\"},\"headline\":\"Fluxogramas de UX: conhe\u00e7a os principais e suas aplica\u00e7\u00f5es\",\"datePublished\":\"2022-02-24T14:07:06+00:00\",\"dateModified\":\"2023-07-26T19:12:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/homolog.fluency.io\\\/br\\\/blog\\\/guia-fluxogramas-ux\\\/\"},\"wordCount\":1643,\"commentCount\":0,\"articleSection\":[\"Skills\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/homolog.fluency.io\\\/br\\\/blog\\\/guia-fluxogramas-ux\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/homolog.fluency.io\\\/br\\\/blog\\\/guia-fluxogramas-ux\\\/\",\"url\":\"https:\\\/\\\/homolog.fluency.io\\\/br\\\/blog\\\/guia-fluxogramas-ux\\\/\",\"name\":\"Fluxogramas de UX: conhe\u00e7a os principais e suas aplica\u00e7\u00f5es - Fluency.io Brasil\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/homolog.fluency.io\\\/br\\\/#website\"},\"datePublished\":\"2022-02-24T14:07:06+00:00\",\"dateModified\":\"2023-07-26T19:12:11+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/homolog.fluency.io\\\/br\\\/#\\\/schema\\\/person\\\/7b3b2b50ba17b7f2ad0cce0a40bfa00a\"},\"description\":\"descubra o que s\u00e3o e veja como utilizar User Flows, Wireflows, Interaction Flows e Sitemaps...\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/homolog.fluency.io\\\/br\\\/blog\\\/guia-fluxogramas-ux\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/homolog.fluency.io\\\/br\\\/blog\\\/guia-fluxogramas-ux\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/homolog.fluency.io\\\/br\\\/blog\\\/guia-fluxogramas-ux\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\\\/\\\/homolog.fluency.io\\\/br\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Fluxogramas de UX: conhe\u00e7a os principais e suas aplica\u00e7\u00f5es\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/homolog.fluency.io\\\/br\\\/#website\",\"url\":\"https:\\\/\\\/homolog.fluency.io\\\/br\\\/\",\"name\":\"Fluency.io Brasil\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/homolog.fluency.io\\\/br\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/homolog.fluency.io\\\/br\\\/#\\\/schema\\\/person\\\/7b3b2b50ba17b7f2ad0cce0a40bfa00a\",\"name\":\"kaue\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g\",\"caption\":\"kaue\"},\"url\":\"https:\\\/\\\/homolog.fluency.io\\\/br\\\/author\\\/kaue\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Fluxogramas de UX: conhe\u00e7a os principais e suas aplica\u00e7\u00f5es - Fluency.io Brasil","description":"descubra o que s\u00e3o e veja como utilizar User Flows, Wireflows, Interaction Flows e Sitemaps...","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"pt_BR","og_type":"article","og_title":"Fluxogramas de UX: conhe\u00e7a os principais e suas aplica\u00e7\u00f5es - Fluency.io Brasil","og_description":"descubra o que s\u00e3o e veja como utilizar User Flows, Wireflows, Interaction Flows e Sitemaps...","og_url":"https:\/\/homolog.fluency.io\/br\/blog\/guia-fluxogramas-ux\/","og_site_name":"Fluency.io Brasil","article_published_time":"2022-02-24T14:07:06+00:00","article_modified_time":"2023-07-26T19:12:11+00:00","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"kaue","Est. tempo de leitura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/homolog.fluency.io\/br\/blog\/guia-fluxogramas-ux\/#article","isPartOf":{"@id":"https:\/\/homolog.fluency.io\/br\/blog\/guia-fluxogramas-ux\/"},"author":{"name":"kaue","@id":"https:\/\/homolog.fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a"},"headline":"Fluxogramas de UX: conhe\u00e7a os principais e suas aplica\u00e7\u00f5es","datePublished":"2022-02-24T14:07:06+00:00","dateModified":"2023-07-26T19:12:11+00:00","mainEntityOfPage":{"@id":"https:\/\/homolog.fluency.io\/br\/blog\/guia-fluxogramas-ux\/"},"wordCount":1643,"commentCount":0,"articleSection":["Skills"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/homolog.fluency.io\/br\/blog\/guia-fluxogramas-ux\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/homolog.fluency.io\/br\/blog\/guia-fluxogramas-ux\/","url":"https:\/\/homolog.fluency.io\/br\/blog\/guia-fluxogramas-ux\/","name":"Fluxogramas de UX: conhe\u00e7a os principais e suas aplica\u00e7\u00f5es - Fluency.io Brasil","isPartOf":{"@id":"https:\/\/homolog.fluency.io\/br\/#website"},"datePublished":"2022-02-24T14:07:06+00:00","dateModified":"2023-07-26T19:12:11+00:00","author":{"@id":"https:\/\/homolog.fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a"},"description":"descubra o que s\u00e3o e veja como utilizar User Flows, Wireflows, Interaction Flows e Sitemaps...","breadcrumb":{"@id":"https:\/\/homolog.fluency.io\/br\/blog\/guia-fluxogramas-ux\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/homolog.fluency.io\/br\/blog\/guia-fluxogramas-ux\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/homolog.fluency.io\/br\/blog\/guia-fluxogramas-ux\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/homolog.fluency.io\/br\/"},{"@type":"ListItem","position":2,"name":"Fluxogramas de UX: conhe\u00e7a os principais e suas aplica\u00e7\u00f5es"}]},{"@type":"WebSite","@id":"https:\/\/homolog.fluency.io\/br\/#website","url":"https:\/\/homolog.fluency.io\/br\/","name":"Fluency.io Brasil","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/homolog.fluency.io\/br\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/homolog.fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a","name":"kaue","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g","caption":"kaue"},"url":"https:\/\/homolog.fluency.io\/br\/author\/kaue\/"}]}},"_links":{"self":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/posts\/117418","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/comments?post=117418"}],"version-history":[{"count":0,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/posts\/117418\/revisions"}],"wp:attachment":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/media?parent=117418"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/categories?post=117418"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/tags?post=117418"},{"taxonomy":"format","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/format?post=117418"},{"taxonomy":"trilha","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/trilha?post=117418"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}