{"id":25448,"date":"2021-12-24T16:20:42","date_gmt":"2021-12-24T05:20:42","guid":{"rendered":"https:\/\/creately.com\/blog\/?p=25448"},"modified":"2021-12-24T16:20:45","modified_gmt":"2021-12-24T05:20:45","slug":"como-fazer-um-diagrama-de-fluxo-do-usuario","status":"publish","type":"post","link":"https:\/\/creately.com\/blog\/pt\/diagrama\/como-fazer-um-diagrama-de-fluxo-do-usuario\/","title":{"rendered":"Como fazer um diagrama de fluxo do usu\u00e1rio"},"content":{"rendered":"<div id=\"bsf_rt_marker\"><\/div>\n<p>Os diagramas de fluxo do usu\u00e1rio s\u00e3o indispens\u00e1veis para dominar a experi\u00eancia do usu\u00e1rio. Eles permitem que voc\u00ea entenda como os usu\u00e1rios interagem com seu aplicativo ou site, os passos que eles tomam para completar uma tarefa ou alcan\u00e7ar um objetivo em seu site. Isto ir\u00e1 ajud\u00e1-lo a criar uma experi\u00eancia superior para o utilizador e a satisfazer as suas necessidades de forma mais eficiente.<\/p>\n\n\n\n<p>Neste guia, vamos dar uma olhada no papel importante que os diagramas de fluxo do usu\u00e1rio desempenham no design UX, como fazer um diagrama de fluxo do usu\u00e1rio, e as melhores pr\u00e1ticas que voc\u00ea deve ter em mente. Temos tamb\u00e9m alguns modelos pr\u00e1ticos que voc\u00ea pode usar durante todo o processo de desenho do seu fluxo dos usu\u00e1rios.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>O que \u00e9 um Diagrama de Fluxo do Usu\u00e1rio<\/strong><\/h3>\n\n\n\n<p>Um fluxo de usu\u00e1rios pode ser interpretado de muitas maneiras. Pode ser considerado como uma vis\u00e3o geral que descreve onde os utilizadores podem navegar no seu produto. Tamb\u00e9m pode significar a qualidade real e a experi\u00eancia do caminho que os usu\u00e1rios percorrem para realizar uma tarefa.<\/p>\n\n\n\n<p>Ou pode significar a seq\u00fc\u00eancia real de passos que o usu\u00e1rio d\u00e1 para completar uma tarefa. <a href=\"https:\/\/creately.com\/lp\/flowchart-software\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Fluxogramas (abre num novo separador)\"><\/a> Os fluxogramas podem ser \u00fateis na visualiza\u00e7\u00e3o destas rotas que os utilizadores utilizam quando utilizam a sua solu\u00e7\u00e3o (ou seja, website ou aplica\u00e7\u00e3o). <\/p>\n\n\n\n<p>Tais ferramentas, que ajudam a rastrear visualmente as etapas de intera\u00e7\u00e3o entre as a\u00e7\u00f5es do usu\u00e1rio e as interfaces do programa, s\u00e3o chamadas <a href=\"https:\/\/creately.com\/pt\/lp\/fabricante-de-fluxo-de-usuario\">fluxograma do <\/a><em><a href=\"https:\/\/creately.com\/pt\/lp\/fabricante-de-fluxo-de-usuario\">usu\u00e1rio<\/a><\/em> ou mapas de fluxo de usu\u00e1rios.<\/p>\n\n\n\n<p>Eles ajudam a definir o caminho l\u00f3gico que um usu\u00e1rio deve seguir ao interagir com o sistema, e retratam as rela\u00e7\u00f5es entre a funcionalidade do sistema, as poss\u00edveis a\u00e7\u00f5es do usu\u00e1rio e as consequ\u00eancias associadas.<\/p>\n\n\n\n<p>Os diagramas de fluxo do usu\u00e1rio podem ter diferentes visuais com base no est\u00e1gio do processo de design em que voc\u00ea se encontra. Se voc\u00ea j\u00e1 tem os<a href=\"https:\/\/creately.com\/diagram-type\/templates\/wireframes\"> wireframes<\/a> para seu aplicativo ou website, voc\u00ea pode us\u00e1-los para criar o seu fluxograma. Esses<a href=\"https:\/\/creately.com\/pt\/lp\/criar-wireframe-do-site-online\"> fluxogramas de estrutura met\u00e1lica<\/a> s\u00e3o chamados de Wireflows.<\/p>\n\n\n\n<p>Os diagramas de fluxo do usu\u00e1rio tamb\u00e9m s\u00e3o referidos como <em>fluxos de intera\u00e7\u00e3o,<a href=\"https:\/\/creately.com\/pt\/lp\/diagrama-de-atividades\">fluxos de atividade<\/a>, fluxos de interface do usu\u00e1rio, fluxos de navega\u00e7\u00e3o ou diagramas de <\/em><a href=\"https:\/\/creately.com\/diagram\/example\/itfmy6g71\/Task%20Flow%20Chart\"><em>fluxo de tarefas<\/em><\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Os s\u00edmbolos do diagrama de fluxo do usu\u00e1rio s\u00e3o os seguintes<\/strong><\/h4>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"943\" height=\"681\" src=\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2020\/02\/User-Flow-Diagram-Symbols.png\" alt=\"S\u00edmbolos do Diagrama de Fluxo do Usu\u00e1rio\" class=\"wp-image-17612\" srcset=\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2020\/02\/User-Flow-Diagram-Symbols.png 943w, https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2020\/02\/User-Flow-Diagram-Symbols-300x217.png 300w\" sizes=\"auto, (max-width: 943px) 100vw, 943px\" \/><figcaption> S\u00edmbolos do Diagrama de Fluxo do Usu\u00e1rio<\/figcaption><\/figure>\n\n\n\n<p>Consulte este recurso para entender mais<a href=\"https:\/\/creately.com\/diagram-type\/objects\/flowchart\"> s\u00edmbolos de fluxograma<\/a> que podem ser \u00fateis ao criar diagramas de fluxo do usu\u00e1rio.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Import\u00e2ncia de um diagrama de fluxo do usu\u00e1rio<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>Os diagramas de fluxo de usu\u00e1rios s\u00e3o \u00fateis quando voc\u00ea quer entender seus designs com base nos objetivos de seus usu\u00e1rios.<\/li><li>Eles podem ser usados para comunicar o fluxo pretendido de usu\u00e1rios enquanto eles navegam atrav\u00e9s das p\u00e1ginas de seu site ou atrav\u00e9s das a\u00e7\u00f5es em seu aplicativo<\/li><li>Engenheiros, designers e arquitetos podem us\u00e1-los para entender as complexidades, objetivos e caminhos do projeto de um sistema, bem como identificar brechas, depend\u00eancias e defici\u00eancias no mesmo.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Como fazer um diagrama de fluxo do usu\u00e1rio<\/strong><\/h3>\n\n\n\n<p>Sem mais delongas, vamos discutir como fazer um diagrama de fluxo do usu\u00e1rio.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Passo 1: Compreenda a Jornada do Cliente<\/strong><\/h4>\n\n\n\n<p>Um fluxo de usu\u00e1rios \u00e9 baseado no que o usu\u00e1rio faz &#8211; portanto, compreender quem s\u00e3o, suas motiva\u00e7\u00f5es, necessidades e comportamento \u00e9 crucial para fazer um diagrama de fluxo de usu\u00e1rios eficaz.<\/p>\n\n\n\n<p>Pode parecer um passo adicional, mas conduzir uma<a href=\"https:\/\/creately.com\/blog\/diagrams\/visual-user-research-methods\/\"> pesquisa de usu\u00e1rio<\/a> adequada e projetar perfis de usu\u00e1rio o ajudar\u00e1 a criar fluxos de usu\u00e1rios mais suaves.<\/p>\n\n\n\n<p>J\u00e1 abordamos como criar perfis\/personas de usu\u00e1rio em um post anterior, consulte-o para aprender<a href=\"https:\/\/creately.com\/blog\/diagrams\/how-to-create-a-buyer-persona\/\"> como criar um perfil de comprador<\/a> em alguns passos simples. Ou se voc\u00ea j\u00e1 est\u00e1 familiarizado com o processo, aqui est\u00e1 um modelo para come\u00e7ar.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/creately.com\/demo-start?tempId=mtebvz0Jluh\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"752\" src=\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2020\/02\/Customer-Profile-Template-1024x752.png\" alt=\"Template de Persona do Usu\u00e1rio \" class=\"wp-image-17613\" srcset=\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2020\/02\/Customer-Profile-Template-1024x752.png 1024w, https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2020\/02\/Customer-Profile-Template-300x220.png 300w, https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2020\/02\/Customer-Profile-Template.png 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption> Modelo de Perfil\/Persona do Usu\u00e1rio (Clique no modelo para edit\u00e1-lo online) <\/figcaption><\/figure>\n\n\n\n<p>Uma vez criado o perfil do cliente, voc\u00ea est\u00e1 um passo mais pr\u00f3ximo de entender a sua jornada de usu\u00e1rio.<\/p>\n\n\n\n<p>Voc\u00ea pode usar um mapa de jornada do cliente aqui para analisar corretamente o que seus clientes fazem, sentem e esperam quando est\u00e3o interagindo com seu neg\u00f3cio (ou seja, visitando seu site), os v\u00e1rios pontos de contato e pontos de dor.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/creately.com\/demo-start?tempId=zB7yanBaRcs\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"574\" src=\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2020\/02\/Customer-Journey-Map-1024x574.png\" alt=\"\" class=\"wp-image-17614\" srcset=\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2020\/02\/Customer-Journey-Map-1024x574.png 1024w, https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2020\/02\/Customer-Journey-Map-300x168.png 300w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Tamb\u00e9m cobrimos o processo de<a href=\"https:\/\/creately.com\/blog\/diagrams\/what-is-a-customer-journey-map\/\"> cria\u00e7\u00e3o de um mapa de jornada do cliente<\/a> em 6 passos simples. Confira-o.<\/p>\n\n\n\n<p>O resto da etapa de cria\u00e7\u00e3o de um fluxo de usu\u00e1rios ser\u00e1 mais f\u00e1cil uma vez que voc\u00ea conhe\u00e7a a jornada do seu usu\u00e1rio.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Identifique os seus objetivos e as metas do seu usu\u00e1rio<\/strong><\/h4>\n\n\n\n<p>O pr\u00f3ximo passo \u00e9 ter uma ideia dos objetivos do seu neg\u00f3cio, bem como dos seus usu\u00e1rios.<\/p>\n\n\n\n<p>Voc\u00ea j\u00e1 deve estar ciente dos objetivos do seu neg\u00f3cio; por exemplo, aumentar a convers\u00e3o no seu website, impulsionar a venda do seu produto, etc. Geralmente \u00e9 o resultado final das a\u00e7\u00f5es que voc\u00ea quer que seus usu\u00e1rios tomem.<\/p>\n\n\n\n<p>Por outro lado, os objetivos de seus usu\u00e1rios incluem os desejos e necessidades que eles querem satisfazer. E usu\u00e1rios diferentes tamb\u00e9m podem ter objetivos variados em mente. \u00c9 aqui que os perfis de usu\u00e1rio e os mapas de viagem do cliente que voc\u00ea criou anteriormente o ajudar\u00e3o a descobrir o que eles s\u00e3o.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Identifique de onde v\u00eam os seus usu\u00e1rios<\/strong><\/h4>\n\n\n\n<p>Se voc\u00ea est\u00e1 projetando um site, voc\u00ea pode querer saber de onde seus clientes est\u00e3o vindo ou, em outras palavras, quais s\u00e3o os pontos de entrada. Estes normalmente incluem,<\/p>\n\n\n\n<ul class=\"wp-block-list\">null<li>Tr\u00e1fego direto<\/li><li>Pesquisa org\u00e2nica<\/li><li>Redes sociais<\/li><li>Publicidade paga<\/li><li>Email<\/li><li>Sites de refer\u00eancia<\/li><li>Imprensa ou not\u00edcias<\/li><\/ul>\n\n\n\n<p>Voc\u00ea pode usar a an\u00e1lise do Google para obter as porcentagens para esses pontos de entrada. Eles tamb\u00e9m podem indicar comportamentos diferentes de usu\u00e1rios.<\/p>\n\n\n\n<p>Por exemplo, um visitante direto pesquisaria o nome da sua marca, enquanto um visitante de pesquisa org\u00e2nica pesquisaria primeiro no Google o produto que pretende antes de o descobrir como um vendedor adequado.<\/p>\n\n\n\n<p>E \u00e9 importante mapear esses diferentes fluxos de usu\u00e1rios com base nos diferentes pontos de entrada. \u00c9 a chave para desenvolver uma melhor experi\u00eancia para os usu\u00e1rios.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Identifique a Informa\u00e7\u00e3o que o Visitante Necessita<\/strong><\/h4>\n\n\n\n<p>Para projetar o melhor fluxo de usu\u00e1rios poss\u00edvel, voc\u00ea precisa entrar no lugar dos seus clientes.<\/p>\n\n\n\n<p>Isto significa compreender de cor quais s\u00e3o as suas necessidades e motiva\u00e7\u00f5es. Por isso voc\u00ea precisa saber que problemas eles t\u00eam, suas d\u00favidas, hesita\u00e7\u00f5es, que perguntas eles t\u00eam sobre o produto, e que respostas eles buscam.<\/p>\n\n\n\n<p>Uma vez que voc\u00ea j\u00e1 criou o seu comprador persona e o mapa de viagem, este passo \u00e9 mais f\u00e1cil de completar.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Visualize seus fluxos de usu\u00e1rios<\/strong><\/h4>\n\n\n\n<p>A esta altura voc\u00ea j\u00e1 est\u00e1 ciente dos usu\u00e1rios para os quais est\u00e1 criando o fluxo de utilizadores, quais s\u00e3o os seus objetivos e de onde eles v\u00eam. O pr\u00f3ximo passo \u00e9 criar o fluxo do usu\u00e1rio.<\/p>\n\n\n\n<p>Pense no que os seus utilizadores fazem antes e depois de visitarem uma p\u00e1gina em particular no seu website. O que eles v\u00eaem, que medidas tomam para alcan\u00e7ar o seu objetivo. Isto ir\u00e1 ajud\u00e1-lo a identificar as p\u00e1ginas que precisa criar, que informa\u00e7\u00f5es\/conte\u00fados precisa fornecer e como devem estar ligados entre si.<\/p>\n\n\n\n<p>Preste aten\u00e7\u00e3o ao in\u00edcio e ao fim de cada tarefa. Isto pode mudar com base no objetivo de diferentes usu\u00e1rios.<\/p>\n\n\n\n<p>Uma vez filtrada a informa\u00e7\u00e3o necess\u00e1ria, visualize-a com um diagrama de fluxo do usu\u00e1rio.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/creately.com\/demo-start?tempId=jk245xpy4\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2020\/02\/User-Flow-Diagram-1024x1024.png\" alt=\"Diagrama de fluxo do usu\u00e1rio \" class=\"wp-image-17615\" srcset=\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2020\/02\/User-Flow-Diagram-1024x1024.png 1024w, https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2020\/02\/User-Flow-Diagram-150x150.png 150w, https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2020\/02\/User-Flow-Diagram-300x300.png 300w, https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2020\/02\/User-Flow-Diagram-80x80.png 80w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption> Diagrama de fluxo do usu\u00e1rio (Clique no modelo para edit\u00e1-lo online)<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Prot\u00f3tipo do seu fluxo<\/strong><\/h4>\n\n\n\n<p>Voc\u00ea pode usar prot\u00f3tipos de baixa fidelidade <a href=\"https:\/\/creately.com\/pt\/lp\/criar-wireframe-do-site-online\">(wireframes ou maquetes UI<\/a>) para testar o fluxo de usu\u00e1rios delineado na etapa anterior. O prot\u00f3tipo ajuda a adicionar mais detalhes ao fluxo e ajuda a entender o fluxo entre as a\u00e7\u00f5es do usu\u00e1rio e o conte\u00fado.<\/p>\n\n\n\n<p>Tamb\u00e9m o ajudar\u00e1 a validar que o seu produto foi concebido de acordo com os seus objetivos e os dos seus utilizadores.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Reveja, refine e teste<\/strong><\/h4>\n\n\n\n<p>Voc\u00ea pode compartilhar seus diagramas de fluxo de usu\u00e1rios com as partes interessadas e discutir onde os ajustes precisam ser feitos.<\/p>\n\n\n\n<p>E assim que um prot\u00f3tipo de alta fidelidade estiver pronto, voc\u00ea tamb\u00e9m pode test\u00e1-lo com usu\u00e1rios reais.<\/p>\n\n\n\n<p>Desta forma voc\u00ea pode coletar dados sobre cada etapa do fluxo de usu\u00e1rios e entender como seus usu\u00e1rios navegam pelo seu produto. Voc\u00ea pode ent\u00e3o identificar \u00e1reas para melhorias e aplicar solu\u00e7\u00f5es antes do lan\u00e7amento do produto final.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Melhores pr\u00e1ticas para se ter em mente<\/strong><\/h3>\n\n\n\n<p>Siga as melhores pr\u00e1ticas abaixo para garantir que os diagramas de fluxo de usu\u00e1rios que voc\u00ea criar sejam realmente eficazes para ajud\u00e1-lo.<\/p>\n\n\n\n<ul class=\"wp-block-list\">null<li>Sempre d\u00ea ao seu diagrama de fluxo de usu\u00e1rios um nome que descreva o seu prop\u00f3sito. Isto ajudar\u00e1 quem se referir a ela a compreender a sua base.<\/li><li>Mantenha-se fiel a uma dire\u00e7\u00e3o ao desenhar o fluxograma. Como o gr\u00e1fico mapeia uma hist\u00f3ria, isso ajuda a l\u00ea-lo e compreend\u00ea-lo melhor.<\/li><li>Limite o n\u00famero de pontos de decis\u00e3o para que n\u00e3o haja confus\u00f5es e seja menos complicado.<\/li><li>Certifique-se de que o objetivo do diagrama de fluxo do usu\u00e1rio cobre uma \u00fanica tarefa ou um \u00fanico objetivo do seu usu\u00e1rio. Se o fluxo do usu\u00e1rio cobrir apenas metade da tarefa ou mapear os passos para cobrir mais de um objetivo do usu\u00e1rio, ele n\u00e3o servir\u00e1 ao seu prop\u00f3sito.<\/li><li>Certifique-se de apenas adicionar as informa\u00e7\u00f5es necess\u00e1rias e evitar qualquer outro detalhe que n\u00e3o ajude a descrever o fluxo e as a\u00e7\u00f5es do usu\u00e1rio.<\/li><li>Use uma ferramenta de fluxograma digital como o<a href=\"https:\/\/creately.com\/tour\/\"> Creately<\/a>, para acelerar o processo. Al\u00e9m disso, isso permitir\u00e1 que voc\u00ea obtenha a contribui\u00e7\u00e3o de outros e mantenha seu trabalho salvo em um s\u00f3 lugar e na nuvem, o que lhe permitir\u00e1 referi-lo e trabalhar nele de qualquer lugar. Al\u00e9m disso, ele o ajudar\u00e1 a economizar espa\u00e7o com sua infinita \u00e1rea de tela; caso contr\u00e1rio, poder\u00e1 ocupar v\u00e1rias paredes da sua sala de confer\u00eancias!<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Modelos de diagramas de fluxo do usu\u00e1rio<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/creately.com\/demo-start?tempId=s4RR1stVpyd\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2020\/02\/User-Registration-Flow-Diagram-1024x768.png\" alt=\"Diagrama de fluxo de registro do usu\u00e1rio\" class=\"wp-image-17616\" srcset=\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2020\/02\/User-Registration-Flow-Diagram-1024x768.png 1024w, https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2020\/02\/User-Registration-Flow-Diagram-300x225.png 300w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption> Diagrama de fluxo de registro do usu\u00e1rio (Clique no modelo para edit\u00e1-lo online) <\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/creately.com\/demo-start?tempId=Ll5ZyNO6uTe\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"341\" src=\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2020\/02\/Flow-Diagram-Example-1024x341.png\" alt=\"Exemplo de diagrama de fluxo \" class=\"wp-image-17617\" srcset=\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2020\/02\/Flow-Diagram-Example-1024x341.png 1024w, https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2020\/02\/Flow-Diagram-Example-300x100.png 300w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption> Exemplo de diagrama de fluxo (Clique no modelo para edit\u00e1-lo online)<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/creately.com\/demo-start?tempId=jk245xpy9\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"983\" height=\"1024\" src=\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2020\/02\/User-Flow-Wireframe-classic-983x1024.png\" alt=\"Fluxo de fios do utilizador\" class=\"wp-image-17618\" srcset=\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2020\/02\/User-Flow-Wireframe-classic-983x1024.png 983w, https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2020\/02\/User-Flow-Wireframe-classic-288x300.png 288w\" sizes=\"auto, (max-width: 983px) 100vw, 983px\" \/><\/a><figcaption> Modelo de Wireflow (Clique no modelo para edit\u00e1-lo online) <\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Pronto para fazer o seu pr\u00f3prio diagrama de fluxo de usu\u00e1rios?<\/strong><\/h3>\n\n\n\n<p>Os fluxos de usu\u00e1rios s\u00e3o uma ferramenta poderosa no kit de ferramentas de um designer. Eles tornam mais f\u00e1cil para os designers verem o quadro geral &#8211; que p\u00e1ginas eles precisam criar e como eles devem ser conectados. N\u00f3s cobrimos praticamente tudo o que voc\u00ea precisa saber para fazer um<a href=\"https:\/\/creately.com\/pt\/lp\/fabricante-de-fluxo-de-usuario\"> diagrama de fluxo de usu\u00e1rios<\/a> &#8211; incluindo modelos que voc\u00ea pode usar para come\u00e7ar imediatamente.<\/p>\n\n\n\n<p>Agora gostar\u00edamos de saber, qual a sua opini\u00e3o sobre os diagramas de fluxo de usu\u00e1rios? Digite na se\u00e7\u00e3o de coment\u00e1rios abaixo.\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Os diagramas de fluxo do usu\u00e1rio s\u00e3o indispens\u00e1veis para dominar a experi\u00eancia do usu\u00e1rio. Eles permitem que voc\u00ea entenda como os usu\u00e1rios interagem com seu aplicativo ou site, os passos que eles tomam para completar uma tarefa ou alcan\u00e7ar um&#8230;<span class=\"continue-reading\"> <a href=\"https:\/\/creately.com\/blog\/pt\/diagrama\/como-fazer-um-diagrama-de-fluxo-do-usuario\/\">Read More<\/a><\/span><\/p>\n","protected":false},"author":38,"featured_media":17625,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3274],"tags":[5864,5865,5868,5867,5866,5869],"class_list":["post-25448","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diagrama","tag-como-fazer-um-diagrama-de-fluxo-do-usuario","tag-diagramas-de-fluxo-do-usuario","tag-fluxo-de-ux","tag-fluxos-de-usuarios","tag-mapas-de-fluxo-do-usuario","tag-o-que-e-um-fluxo-de-usuario"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Como fazer um diagrama de fluxo do usu\u00e1rio | Creately<\/title>\n<meta name=\"description\" content=\"Como fazer um diagrama de fluxo do usu\u00e1rio; aqui est\u00e1 o guia para iniciantes de diagramas de fluxo do usu\u00e1rio, explicando a defini\u00e7\u00e3o, etapas, melhores pr\u00e1ticas e modelos.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/creately.com\/blog\/pt\/diagrama\/como-fazer-um-diagrama-de-fluxo-do-usuario\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como fazer um diagrama de fluxo do usu\u00e1rio | Creately\" \/>\n<meta property=\"og:description\" content=\"Como fazer um diagrama de fluxo do usu\u00e1rio; aqui est\u00e1 o guia para iniciantes de diagramas de fluxo do usu\u00e1rio, explicando a defini\u00e7\u00e3o, etapas, melhores pr\u00e1ticas e modelos.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/creately.com\/blog\/pt\/diagrama\/como-fazer-um-diagrama-de-fluxo-do-usuario\/\" \/>\n<meta property=\"og:site_name\" content=\"Creately Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/creately\" \/>\n<meta property=\"article:published_time\" content=\"2021-12-24T05:20:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-24T05:20:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2020\/02\/What-is-a-User-Flow.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1554\" \/>\n\t<meta property=\"og:image:height\" content=\"686\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Lalindri Amunugama\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Lalindri Amunugama\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/creately.com\/blog\/pt\/diagrama\/como-fazer-um-diagrama-de-fluxo-do-usuario\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/creately.com\/blog\/pt\/diagrama\/como-fazer-um-diagrama-de-fluxo-do-usuario\/\"},\"author\":{\"name\":\"Lalindri Amunugama\",\"@id\":\"https:\/\/creately.com\/blog\/#\/schema\/person\/cb4a421a55aa8a851260d92193524f26\"},\"headline\":\"Como fazer um diagrama de fluxo do usu\u00e1rio\",\"datePublished\":\"2021-12-24T05:20:42+00:00\",\"dateModified\":\"2021-12-24T05:20:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/creately.com\/blog\/pt\/diagrama\/como-fazer-um-diagrama-de-fluxo-do-usuario\/\"},\"wordCount\":1953,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/creately.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/creately.com\/blog\/pt\/diagrama\/como-fazer-um-diagrama-de-fluxo-do-usuario\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2020\/02\/What-is-a-User-Flow.png\",\"keywords\":[\"como fazer um diagrama de fluxo do usu\u00e1rio\",\"diagramas de fluxo do usu\u00e1rio\",\"Fluxo de UX\",\"fluxos de usu\u00e1rios\",\"mapas de fluxo do usu\u00e1rio\",\"o que \u00e9 um fluxo de usu\u00e1rio\"],\"articleSection\":[\"diagrama\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/creately.com\/blog\/pt\/diagrama\/como-fazer-um-diagrama-de-fluxo-do-usuario\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/creately.com\/blog\/pt\/diagrama\/como-fazer-um-diagrama-de-fluxo-do-usuario\/\",\"url\":\"https:\/\/creately.com\/blog\/pt\/diagrama\/como-fazer-um-diagrama-de-fluxo-do-usuario\/\",\"name\":\"Como fazer um diagrama de fluxo do usu\u00e1rio | Creately\",\"isPartOf\":{\"@id\":\"https:\/\/creately.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/creately.com\/blog\/pt\/diagrama\/como-fazer-um-diagrama-de-fluxo-do-usuario\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/creately.com\/blog\/pt\/diagrama\/como-fazer-um-diagrama-de-fluxo-do-usuario\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2020\/02\/What-is-a-User-Flow.png\",\"datePublished\":\"2021-12-24T05:20:42+00:00\",\"dateModified\":\"2021-12-24T05:20:45+00:00\",\"description\":\"Como fazer um diagrama de fluxo do usu\u00e1rio; aqui est\u00e1 o guia para iniciantes de diagramas de fluxo do usu\u00e1rio, explicando a defini\u00e7\u00e3o, etapas, melhores pr\u00e1ticas e modelos.\",\"breadcrumb\":{\"@id\":\"https:\/\/creately.com\/blog\/pt\/diagrama\/como-fazer-um-diagrama-de-fluxo-do-usuario\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/creately.com\/blog\/pt\/diagrama\/como-fazer-um-diagrama-de-fluxo-do-usuario\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/creately.com\/blog\/pt\/diagrama\/como-fazer-um-diagrama-de-fluxo-do-usuario\/#primaryimage\",\"url\":\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2020\/02\/What-is-a-User-Flow.png\",\"contentUrl\":\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2020\/02\/What-is-a-User-Flow.png\",\"width\":1554,\"height\":686},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/creately.com\/blog\/pt\/diagrama\/como-fazer-um-diagrama-de-fluxo-do-usuario\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/creately.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Como fazer um diagrama de fluxo do usu\u00e1rio\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/creately.com\/blog\/#website\",\"url\":\"https:\/\/creately.com\/blog\/\",\"name\":\"Creately Blog\",\"description\":\"Latest Product Updates and Tips on Working Visually\",\"publisher\":{\"@id\":\"https:\/\/creately.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/creately.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/creately.com\/blog\/#organization\",\"name\":\"Creately\",\"url\":\"https:\/\/creately.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/creately.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2023\/01\/creately-logo-symbol.png\",\"contentUrl\":\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2023\/01\/creately-logo-symbol.png\",\"width\":430,\"height\":237,\"caption\":\"Creately\"},\"image\":{\"@id\":\"https:\/\/creately.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/creately\",\"https:\/\/x.com\/creately\",\"https:\/\/www.instagram.com\/creately_app\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/creately.com\/blog\/#\/schema\/person\/cb4a421a55aa8a851260d92193524f26\",\"name\":\"Lalindri Amunugama\",\"url\":\"https:\/\/creately.com\/blog\/author\/lalindri\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Como fazer um diagrama de fluxo do usu\u00e1rio | Creately","description":"Como fazer um diagrama de fluxo do usu\u00e1rio; aqui est\u00e1 o guia para iniciantes de diagramas de fluxo do usu\u00e1rio, explicando a defini\u00e7\u00e3o, etapas, melhores pr\u00e1ticas e modelos.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/creately.com\/blog\/pt\/diagrama\/como-fazer-um-diagrama-de-fluxo-do-usuario\/","og_locale":"en_US","og_type":"article","og_title":"Como fazer um diagrama de fluxo do usu\u00e1rio | Creately","og_description":"Como fazer um diagrama de fluxo do usu\u00e1rio; aqui est\u00e1 o guia para iniciantes de diagramas de fluxo do usu\u00e1rio, explicando a defini\u00e7\u00e3o, etapas, melhores pr\u00e1ticas e modelos.","og_url":"https:\/\/creately.com\/blog\/pt\/diagrama\/como-fazer-um-diagrama-de-fluxo-do-usuario\/","og_site_name":"Creately Blog","article_publisher":"https:\/\/www.facebook.com\/creately","article_published_time":"2021-12-24T05:20:42+00:00","article_modified_time":"2021-12-24T05:20:45+00:00","og_image":[{"width":1554,"height":686,"url":"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2020\/02\/What-is-a-User-Flow.png","type":"image\/png"}],"author":"Lalindri Amunugama","twitter_misc":{"Written by":"Lalindri Amunugama","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/creately.com\/blog\/pt\/diagrama\/como-fazer-um-diagrama-de-fluxo-do-usuario\/#article","isPartOf":{"@id":"https:\/\/creately.com\/blog\/pt\/diagrama\/como-fazer-um-diagrama-de-fluxo-do-usuario\/"},"author":{"name":"Lalindri Amunugama","@id":"https:\/\/creately.com\/blog\/#\/schema\/person\/cb4a421a55aa8a851260d92193524f26"},"headline":"Como fazer um diagrama de fluxo do usu\u00e1rio","datePublished":"2021-12-24T05:20:42+00:00","dateModified":"2021-12-24T05:20:45+00:00","mainEntityOfPage":{"@id":"https:\/\/creately.com\/blog\/pt\/diagrama\/como-fazer-um-diagrama-de-fluxo-do-usuario\/"},"wordCount":1953,"commentCount":0,"publisher":{"@id":"https:\/\/creately.com\/blog\/#organization"},"image":{"@id":"https:\/\/creately.com\/blog\/pt\/diagrama\/como-fazer-um-diagrama-de-fluxo-do-usuario\/#primaryimage"},"thumbnailUrl":"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2020\/02\/What-is-a-User-Flow.png","keywords":["como fazer um diagrama de fluxo do usu\u00e1rio","diagramas de fluxo do usu\u00e1rio","Fluxo de UX","fluxos de usu\u00e1rios","mapas de fluxo do usu\u00e1rio","o que \u00e9 um fluxo de usu\u00e1rio"],"articleSection":["diagrama"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/creately.com\/blog\/pt\/diagrama\/como-fazer-um-diagrama-de-fluxo-do-usuario\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/creately.com\/blog\/pt\/diagrama\/como-fazer-um-diagrama-de-fluxo-do-usuario\/","url":"https:\/\/creately.com\/blog\/pt\/diagrama\/como-fazer-um-diagrama-de-fluxo-do-usuario\/","name":"Como fazer um diagrama de fluxo do usu\u00e1rio | Creately","isPartOf":{"@id":"https:\/\/creately.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/creately.com\/blog\/pt\/diagrama\/como-fazer-um-diagrama-de-fluxo-do-usuario\/#primaryimage"},"image":{"@id":"https:\/\/creately.com\/blog\/pt\/diagrama\/como-fazer-um-diagrama-de-fluxo-do-usuario\/#primaryimage"},"thumbnailUrl":"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2020\/02\/What-is-a-User-Flow.png","datePublished":"2021-12-24T05:20:42+00:00","dateModified":"2021-12-24T05:20:45+00:00","description":"Como fazer um diagrama de fluxo do usu\u00e1rio; aqui est\u00e1 o guia para iniciantes de diagramas de fluxo do usu\u00e1rio, explicando a defini\u00e7\u00e3o, etapas, melhores pr\u00e1ticas e modelos.","breadcrumb":{"@id":"https:\/\/creately.com\/blog\/pt\/diagrama\/como-fazer-um-diagrama-de-fluxo-do-usuario\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/creately.com\/blog\/pt\/diagrama\/como-fazer-um-diagrama-de-fluxo-do-usuario\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/creately.com\/blog\/pt\/diagrama\/como-fazer-um-diagrama-de-fluxo-do-usuario\/#primaryimage","url":"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2020\/02\/What-is-a-User-Flow.png","contentUrl":"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2020\/02\/What-is-a-User-Flow.png","width":1554,"height":686},{"@type":"BreadcrumbList","@id":"https:\/\/creately.com\/blog\/pt\/diagrama\/como-fazer-um-diagrama-de-fluxo-do-usuario\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/creately.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Como fazer um diagrama de fluxo do usu\u00e1rio"}]},{"@type":"WebSite","@id":"https:\/\/creately.com\/blog\/#website","url":"https:\/\/creately.com\/blog\/","name":"Creately Blog","description":"Latest Product Updates and Tips on Working Visually","publisher":{"@id":"https:\/\/creately.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/creately.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/creately.com\/blog\/#organization","name":"Creately","url":"https:\/\/creately.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/creately.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2023\/01\/creately-logo-symbol.png","contentUrl":"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2023\/01\/creately-logo-symbol.png","width":430,"height":237,"caption":"Creately"},"image":{"@id":"https:\/\/creately.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/creately","https:\/\/x.com\/creately","https:\/\/www.instagram.com\/creately_app\/"]},{"@type":"Person","@id":"https:\/\/creately.com\/blog\/#\/schema\/person\/cb4a421a55aa8a851260d92193524f26","name":"Lalindri Amunugama","url":"https:\/\/creately.com\/blog\/author\/lalindri\/"}]}},"_links":{"self":[{"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/posts\/25448","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/users\/38"}],"replies":[{"embeddable":true,"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/comments?post=25448"}],"version-history":[{"count":2,"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/posts\/25448\/revisions"}],"predecessor-version":[{"id":26008,"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/posts\/25448\/revisions\/26008"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/media\/17625"}],"wp:attachment":[{"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/media?parent=25448"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/categories?post=25448"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/tags?post=25448"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}