Trusted answers to developer questions

What are user flows and how are they created?

Get Started With Machine Learning

Learn the fundamentals of Machine Learning with this free course. Future-proof your career by adding ML skills to your toolkit — or prepare to land a job in AI or Data Science.

User flows are the visual representation of the many ways a user can navigate a website. They are represented as flow charts that start with the user entering the website and ending with a final action or outcome that the user aimed for. It allows designers to design better as they see how users are navigating through the interface.

User flows are beneficial in:

  • Creating a new interface: User flows help with designing the interface in a way that is easily understandable by users and leads them to perform actions like purchasing a product, etc.

  • Improving an old interface: User flows help reveal what is favorable and what is not. Therefore, they can direct what needs to be changed and give possible direction regarding how to change.

  • Communicating product to others: User flows help in understanding the map and flow of the interface.

Types of user flow charts

User flow charts are diagrams that show the path taken by the user when they use a product. There are different types of user flow charts, and they are as follows:

  • Task flows: These charts include the flow of users performing a specific task and not navigating through the entire interface. They are useful when individual tasks are being analyzed.
Figure 1 Task Flow
  • Wire flows: These charts help to convey the elements on the screen.
Figure 2: Wire Flow (Source: Career Foundry)
  • User flows: These charts emphasize how the user interacts with the product. A user might not take the path that designers imagined to perform a specific action.
Figure 3: User Flow (Source: Career Foundry)

User flow elements

User flow elements are parts of the user flow diagram that describe different states such as decision, input, etc. Different user flow elements are shown below:

Figure 4: User flow elements

Practices to design better user flow diagrams

  1. Have a descriptive name that conveys the meaning, e.g., navigation from categories page to sign out.

  2. Have one goal per flow so that the objective is clear.

  3. Have one directional flow so that navigation is clearly conveyed.

  4. Have a legend key to describe that diamonds represent decisions, rectangles represent text, etc.

  5. Clearly label all the screens, actions, and decisions.

  6. Decide an entry point so the one-directional flow can be clearly established.

User flows are used in the initial stages of the design process after the research is completed. They reveal how the user will interact and the paths they will take. Thus, user flows influence the layout of the website.

RELATED TAGS

hci
ux
design

CONTRIBUTOR

Sheza Naveed
Copyright ©2024 Educative, Inc. All rights reserved
Did you find this helpful?