[GET CERTIFIED IN PRODUCT DESIGN (UX & UI)]<\/p>\n Enrol now in our Product Design Programme<\/span>\n <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n There are three types of user flows in UX: task flows, user flows or user workflows, and wireflows. While the rules that divide these aren\u2019t hard and fast, there are some things that make them differ.<\/p>\n For example, a search box is used similarly by all users. So you might make a very simple task flow to demonstrate how to use a search box to find a pancake recipe.<\/p>\n Via everything is design(ed)<\/a><\/p>\n For example, if you want to donate to a charity, you\u2019ll take a common path but you\u2019ll make several decisions along the way, such as whether you donate food, money, or clothing. As a result, the user flow of donating to a charity is a lot more complex than that of a task flow. Wireflows are especially appropriate for mobile screens, as can be seen in the example below. In this instance, the task is to use an app to discover new music.<\/p>\n Via nngroup.com<\/a><\/p>\n Here\u2019s how to create a user workflow in four steps:<\/p>\n First, you must identify what you want in your user workflow and why. Make sure you define the scope so the project stays manageable and still meets business objectives.<\/p>\n For this step, you will create user personas to understand what user\u2019s goals are and the tasks they need to tackle to complete those goals. This should be specific to one or more users you know will use the product.<\/p>\n Map out the entire user workflow from the entry point to the final action and each action and decision point along the way. You\u2019ll use circles, squares, and diamonds to represent specific processes and arrows to convey the user\u2019s path through the product and any points at which they may get something wrong.<\/p>\n For example, a rectangle represents a user action, like typing a message or logging in. Similarly, a diamond means a decision is being made, like composing a new message or launching a search, and is followed by \u201cYes\u201d and \u201cNo\u201d arrow on different sides of the diamond. Finally, a circle represents the user\u2019s entry and exit point in the workflow, such as the screen where they start their search or login.<\/p>\n After you\u2019ve created your user workflow, test it with real users by having them go through the steps you specified. Collect feedback and make changes so that your workflow best matches the experience of actual users.<\/p>\n [GET CERTIFIED IN UX]<\/p>\n Take our Professional Diploma in UX Design course<\/span>\n <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n When you create user workflows, you want to make sure you create a document that will be easy for the whole team to follow. Here are some best practices that can help you do that:<\/p>\n There are many tools that can help you create user workflows. Here are some of our favourites:<\/p>\n Overflow<\/strong>: Overflow<\/a> creates interactive user flows which bring the user\u2019s journey to life. Overflow\u2019s playable user flows make it easier to highlight specific parts of the user\u2019s path through the product. Prices start at $14.95 per month or $179.40 per year.<\/p>\n Mockflow<\/strong>: Mockflow<\/a> lets you build user flows in minutes by dragging and dropping shapes and connecting them with interactive lines. It\u2019s easy to use and supports real-time collaboration.Pricing varies between a free basic plan to monthly paid Wireframe Pro and Product Design plans.<\/p>\n Lucidchart<\/strong>: Lucidchart<\/a> lets you sketch out and share your user workflows. It can be used to brainstorm, collaborate, and define your project\u2019s flows in real time. Pricing starts at $7.95 per month.<\/p>\n Miro<\/strong>: Miro<\/a> provides everything you need to remotely collaborate to create a great user workflow. It also integrates with Google Suite, Slack, Dropbox, and more. There is a free version but paid plans start at $8 per user per month.<\/p>\n Key takeaways<\/strong><\/p>\n If you\u2019d like to learn more about UX, consider our Professional Diploma in UX Design<\/a>. It\u2019s university credit-rated and will teach you everything you need to have a great career in UX design. And if you\u2019d like to learn more about UX design, check out these posts: What is design thinking?<\/a> and What is the UX design process?<\/a><\/p>\n","protected":false},"excerpt":{"rendered":" This article will provide an overview of user flows including what they are, how to design them, and the difference between user journey maps and user flows.<\/p>\n","protected":false},"author":35,"featured_media":11418,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[279],"tags":[],"class_list":["post-11427","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux-explained"],"_links":{"self":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/11427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/users\/35"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/comments?post=11427"}],"version-history":[{"count":10,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/11427\/revisions"}],"predecessor-version":[{"id":11522,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/11427\/revisions\/11522"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media\/11418"}],"wp:attachment":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media?parent=11427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/categories?post=11427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/tags?post=11427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}The 3 main types of user flows in UX<\/h3>\n
\n
<\/p>\n
\n
![\"a](\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2024\/12\/Screenshot-2024-12-27-at-18.32.13.png\" "\\"\\"")
Via <\/a>Perxels<\/a><\/p>\n\n
![\"Screenshot](\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2024\/12\/Screenshot-2024-12-27-at-18.29.32.png\" "\\"\\"")
<\/p>\nHow to design user flows: a step-by-step guide<\/h3>\n
\n
Define the scope<\/h4>\n<\/li>\n<\/ol>\n
\n
Define user goals and tasks<\/h4>\n<\/li>\n<\/ol>\n
\n
Design the user workflow<\/h4>\n<\/li>\n<\/ol>\n
\n
Validate the workflow through user testing<\/h4>\n<\/li>\n<\/ol>\n
4 best practices to help you master the design of user flows<\/h3>\n
\n
\n
\n
\n
The best user flow tools<\/h3>\n
\n
Learn more about UX design<\/h3>\n