Why Flowcharts are important in UX Design

Flowcharts are as the word itself describes, a chart that describes a flow! You don’t say! A flow is simply the set of steps that a user has to do in order to achieve his goal. For instance, in the flow chart above describes the sets of steps that a user has to take in order to troubleshoot a device and each step defines an action that is taken and the effects that that action has.

Flowcharts are really important for a design process because our final product success is given on how well we modeled the flow to meet the needs of our users, without forgetting about the business model. Flowcharts are also a good way how the system will work to developers so that confusion is brought to minimum. In fact the lack of interaction with wireframes, or low fidelity prototypes can lead to misinterpretation, and flowcharts make sure to address this keeping the focus on a polished and usable product.

How do you design efficient flows?

When designing a flow, we need to think about who will use the system. We need to define:

• Personas: define is your target audience, who you are designing for.
• Business objectives: define what you want the user to do within your domain, what is it that the product offers?
• Entry points: how the users get to the product e.g. web search or tap on icon on your tablet.

Now, let’s assume we are dealing with a simple blogging website. We could assume there are at least 2 kinds of users (for simplicity): the blogger, and the reader. These 2 personas will have obviously different flows.

• The reader lands on the home page, clicks on latest updates, navigates through content and clicks “read”.
• The blogger opens his bookmarks, selects the website, log in to the website, accesses the blogger panel, inserts title, inserts text and images, posts.

But how do we make sure that the flow is efficient? It’s important not to skip steps. As being a flow, each step is important for what happens next, and could not happen without the step that preceeds it. Having a general picture of what the software needs doing is important as well as determining each and every step clearly and all its links to the following steps. If you miss something, you can mess up the whole system. Getting confused is very easy, because one step might have different outcomes and go to completely different states. For instance, creating a new post will require the user to log in. If the user is not logged in then it needs to be redirected to the log in page, so go few steps back into the flow. If instead the user is already registered, go to the content, which means go further in the flow.

There’s loads of softwares that can help you do this, you can find examples of free tools such as draw.io from google, or more professional and sophisticated tools such as Axure. But don’t forget that the focus is to create a flow that insures a great interaction and a great user experience.