Not sure what a user flow is? We\u2019ve put together a good introduction here: What Are User Flows In UX Design?<\/a><\/p>\n Ready to learn how to create your own user flows? Let\u2019s get started.<\/p>\n To design the best possible user flow, you have to have the best possible understanding of your user<\/a>. Understanding the user\u2019s needs and motivations allows you to make informed choices when determining how to get users into that flow-like state when interacting with your product. Here are some questions to ask yourself when getting to know your user:<\/p>\n Consider all the ways your user could potentially navigate through the site or app so you can identify key pathways<\/strong>. These pathways are generally those that are the most simple and direct. Anticipate the initial information that may be needed, like the input of an email or username versus just a phone number. Think of questions like, \u201cIs this feature absolutely necessary?\u201d. Identifying these key pathways will make creating your user flow a breeze.<\/p>\n To understand how to create a user flow, like most things in design, it\u2019s best to start off with a first draft or outline. Start by writing down a basic flow like a mind map. Each box you draw should represent a step in a user action. It can be helpful to outline and breakdown your flow chart into three main stages: an entry point<\/strong>, steps to completion<\/strong>, and the final step in completing a task<\/strong> or the final interaction.<\/p>\n Entry points are the means by which a user accesses the product initially. Websites can have many points of entry, while apps often have limited and distinct entry points. Websites are usually visited by a google search or clicking on product ads and shared hyperlinks. Applications, on the other hand, are most commonly entered from the app store or the downloaded version on a user\u2019s phone. However, points of entry for an application can also be an article, links, or advertisements.<\/p>\n This is the meat of the flow chart. This stage usually consists of a login or signup screens, onboarding, a home screen, and any screens needed to navigate a task to completion. Remember to keep it simple<\/a>, making sure each step is vital to the task. Your first draft doesn\u2019t have to explore every facet of your platform. For instance, an entire step-by-step outline of password recovery isn\u2019t crucial at this time. Stick to the steps needed for your user to achieve their ultimate goal.<\/p>\n The final interaction is the final screen the user will see when they accomplish the desired task. What screen pops up last to inform them that the task is complete? An example of a final interaction for purchasing an item could be a confirmation screen to inform you that your order has been received. Another example of a final interaction is when completing signing up for an account. Is it best for your product to end with immediate access to the homepage, or would the login page be a better last step?<\/p>\n Designers use various shapes and colors to represent a unique set of elements within the interface. Each shape is an interaction or possible interaction and gives the reader more information about what is happening in a particular step. Some shapes are flexible and can be used for multiple actions, like using circles to represent entry\/exit points or a connection to a different webpage or screen. Adding a key or legend to your user flow can help your colleagues and clients to better interpret and grasp your diagram. Below, we break down some of the most common shapes used within the industry and when to use them.<\/p>\n The rectangle is arguably the most common shape used in user flows. They usually represent a page or display screen. Unlike circles, there is no action to be taken. Rectangles are best used when depicting things like a homepage, onboarding screen, confirmation page, etc.<\/p>\n This is probably the most important part of the user flow as the lines with arrows tie everything together and determine the flow through the chart. Lines with arrows take the reader through the chart from shape to shape, top to bottom, or left to right.<\/p>\n The circle is used mostly for displaying an action. They show a task that must be completed or steps that must be taken. Use a circle when you want to represent a process, task, or operation. To help determine if you are using a circle properly, check how it is being labeled. Circles are almost always labeled with a verb like \u201cSelect Item\u201d or \u201cSend Order\u201d.<\/p>\n Commonly termed a \u201cdecision diamond\u201d, this shape always asks a question. While other shapes may be interchanged for different purposes, the diamond is consistently used to show when a decision needs to be made. The possible answers to the question being asked are represented by the lines extending out of the diamond and determine which path to follow. For instance, you might ask questions like \u201cDo you have an account?\u201d or \u201cIs this correct?\u201d with yes and no arrows extending from each.<\/p>\n It\u2019s important to remember that there is no set rule or guideline for how to create a user flow, and one person\u2019s flow chart may look different from the next. As long as you are consistent with your shapes and the reader can follow and understand the flow, you should have a successful user flow.<\/p>\n The same principles you follow when designing an interface can and should be applied when designing a UX flowchart. Here are our top three must-apply UI design principles<\/a>.<\/p>\n Labels are the reader\u2019s lifeline when going through the user flow. The most important label is the flowchart\u2019s title. Try to use a title that describes exactly what the user flow represents. If you\u2019re not sure if your title is clear, get a colleague to read it over. If they can\u2019t tell you what the flowchart is for, you may want to redo it. Additionally, avoid using all capital letters within labels as this has been shown to decrease readability.<\/p>\n The main purpose of color in a UX flowchart should be to help the reader identify and group resources as well as highlight important user actions. Colors are best used as a coding system rather than for styling.<\/p>\n Keeping your visual structure consistent can help ensure that your user flow is easy to follow and isn\u2019t misleading. For instance, shapes and line elements should always be used for the same purpose and accompanied by a key or legend.<\/p>\n Additionally, consider how you use the real estate of your design. Position elements on the screen logically and consistently for an uncluttered design. Most design tools (including Justinmind<\/a>) have rulers and grids to help you align the elements on the screen.<\/p>\n And that’s the long and short of how to create a user flow. In UX, a user flow is a great way to put yourself in the user\u2019s shoes and ensure that your product prioritizes their needs. User flows are also important from a strategic standpoint and are commonly used in UX audits<\/a>. Making a flowchart at the beginning of the design process<\/a> can reduce the risk of misunderstanding about design specifications and the need for rework. User flows are often provided with your deliverables to the design team or your client to provide a visual representation of how the product will flow.<\/p>\n When it comes to mastering user experience, there\u2019s absolutely no substitute for practice. Designing effective flows takes time and repetition. Practice making user flows of existing websites or applications to refine your UX skills. If you need a place to start, there are many free user flow templates<\/a> online.<\/p>\n Want to learn more about the UX design process? Check out the following articles:<\/p>\n User flows are one of the most useful yet misunderstood tools in the UX industry. Learn how to create a user flow in this clear step-by-step guide.<\/p>\n","protected":false},"author":57,"featured_media":496,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_lmt_disableupdate":"yes","_lmt_disable":"","footnotes":""},"categories":[2],"tags":[],"acf":{"homepage_category_featured":false},"modified_by":"Matthew Deery","_links":{"self":[{"href":"https:\/\/careerfoundry.com\/en\/wp-json\/wp\/v2\/posts\/5227"}],"collection":[{"href":"https:\/\/careerfoundry.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerfoundry.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerfoundry.com\/en\/wp-json\/wp\/v2\/users\/57"}],"replies":[{"embeddable":true,"href":"https:\/\/careerfoundry.com\/en\/wp-json\/wp\/v2\/comments?post=5227"}],"version-history":[{"count":1,"href":"https:\/\/careerfoundry.com\/en\/wp-json\/wp\/v2\/posts\/5227\/revisions"}],"predecessor-version":[{"id":31888,"href":"https:\/\/careerfoundry.com\/en\/wp-json\/wp\/v2\/posts\/5227\/revisions\/31888"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerfoundry.com\/en\/wp-json\/wp\/v2\/media\/496"}],"wp:attachment":[{"href":"https:\/\/careerfoundry.com\/en\/wp-json\/wp\/v2\/media?parent=5227"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerfoundry.com\/en\/wp-json\/wp\/v2\/categories?post=5227"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerfoundry.com\/en\/wp-json\/wp\/v2\/tags?post=5227"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"graphic](\"http:\/\/careerfoundry.com\/en\/wp-content\/uploads\/2019\/11\/User_Flow-scaled.jpg\" "\\"\\"")
<\/p>\n1. Understand your user<\/h2>\n
\n
2. How to create a user flow outline<\/h2>\n
1. Entry point<\/h3>\n
![\"illustration](\"http:\/\/careerfoundry.com\/en\/wp-content\/uploads\/2019\/11\/user-flow-pic1.jpg\" "\\"\\"")
<\/p>\n2. Steps to completion<\/h3>\n
![\"illustration](\"http:\/\/careerfoundry.com\/en\/wp-content\/uploads\/2019\/11\/user-flow-pic2.jpg\" "\\"\\"")
<\/p>\n3. The final interaction<\/h3>\n
![\"illustration](\"http:\/\/careerfoundry.com\/en\/wp-content\/uploads\/2019\/11\/user-flow-Pic3.jpg\" "\\"\\"")
<\/p>\n3. Define the elements of your user flow<\/h2>\n
Rectangle<\/h3>\n
![\"illustration](\"http:\/\/careerfoundry.com\/en\/wp-content\/uploads\/2019\/11\/user-flow-Pic4.jpg\" "\\"\\"")
<\/p>\nLines with arrows<\/h3>\n
Circle<\/h3>\n
![\"illustration](\"http:\/\/careerfoundry.com\/en\/wp-content\/uploads\/2019\/11\/user-flow-Pic5.jpg\" "\\"\\"")
<\/p>\nDiamonds<\/h3>\n
![\"illustration](\"http:\/\/careerfoundry.com\/en\/wp-content\/uploads\/2019\/11\/user-flow-Pic6.jpg\" "\\"\\"")
<\/p>\n4. Refine your outline<\/h2>\n
Make labels meaningful<\/h3>\n
![\"illustration](\"http:\/\/careerfoundry.com\/en\/wp-content\/uploads\/2019\/11\/user-flow-Pic7.jpg\" "\\"\\"")
<\/p>\nChoose colors wisely<\/h3>\n
![\"illustration](\"http:\/\/careerfoundry.com\/en\/wp-content\/uploads\/2019\/11\/user-flow-Pic8.jpg\" "\\"\\"")
<\/p>\nBe consistent with the visual structure<\/h3>\n
![\"illustration](\"http:\/\/careerfoundry.com\/en\/wp-content\/uploads\/2019\/11\/user-flow-Pic9.jpg\" "\\"\\"")
<\/p>\n5. Creating a user flow: What happens next?<\/h2>\n
\n