UX methodology: Flowchart

A flowchart allows us to visualize the steps that a system or user follows to perform a series of tasks

Flowchart

A flow chart is a type of diagram that allows us to visualize, with the help of boxes and arrows, the steps that a system or user follows to perform a series of tasks. In this article I will explain when to use it and how to create it with Omnigraffle, as well as propose some alternative methodologies.

When a flowchart becomes useful

During a focused project with User Centered Design (DCU) we can apply the flow diagrams in different phases.

Analysis
In the initial phase, a flow diagram displays the general workflow. This can be subjected to a heuristic analysis to identify improvement potentials.
We can also compare the workflow of different tools or competing systems in the form of flowcharts (benchmarking).

Conceptualization
During the ideation phase, the preparation of a new workflow can be defined as a flowchart.

Prototyping
During the iterative creation of a new workflow, this can be visualized in the form of a flowchart.

Development and documentation
Flow diagrams are originally a development tool for documenting algorithms and functionalities. If we have used the flowchart as a methodology during the project, it is logical to use it as a form of documentation.

Creation of a flowchart

The flowcharts have a common language that identifies and unifies them. It is necessary to use it for a correct interpretation. Basically, a flowchart is composed of geometric abstractions that represent actions connected by flowlines with arrows. The two main types of actions constitute the activities, properly speaking, and those that imply a decision of the actor:

• The activities are represented as rectangular boxes with a linear process (arrow of entry and exit).
• Decisions are represented as a rhombus with an incoming arrow and two exit arrows.
  You can imagine the flow diagram as a stream of water or electricity where there is a process that reaches a final point or returns to a previous point.

Flow diagrams develop from left to right and top to bottom. It is important to avoid crossing lines and use the blank space to group blocks and lines visually (as explained by Josep Maria Blanco in an article on Gestalt laws).

Before starting to make the flowchart digitally, it is advisable to plan on paper.

• What are the main tasks of the user / system?
• What are the logical entities that are created / modified?
• In which phases is the process divided?

Once you have identified the broad processes and the objects, it’s time to think about the workflow. What decisions does the user make when interacting with the system? Keep in mind that each decision divides the flow in two.

Flowchart with Omnigraffle

To digitize the flow diagram we will use Omnigraffle. Below I will detail some practical tips to expedite its development with this tool (only available for Mac).

Average point of connection
The arrows in the flow diagrams leave the middle point of the boxes. To enable the midpoints in Omnigraffle we must select the rectangles. In the side column (Inspectors) select the “Properties” tab. Select “8 magnets” in the drop-down menu.
If we create new rectangles by duplicating a previous one, the previous properties will be inherited (shortcut Alt + Drag & Drop).

Lines
The arrows in the flow diagrams are orthogonal. Once selected, it is configured in the inspectors in the Line section.

If we double click on the line we are adding an intermediate point to have more control of its trajectory.

If we click with the Alt key we can enter a line label. This option is especially important for decisions that fork in YES and NO. This line label can be moved along the line.

Favorite figure styles

To optimize the performance of more complex flowcharts, “favorite figure styles” can be used. First we select an object and with the right mouse button we open the menu to select your option “Add to favorite figure styles”.

Once we have a “Favorite figure style” the style appears in the drop-down menu, to the left of the tools in the upper toolbar.

We can also use the “brush of styles” tool, by double clicking to paste the style of an object to others, selecting it with the mouse

Similar Methodologies

There are methodologies similar to the flow diagrams that will be more appropriate depending on the objective. For example, if we want a methodology to empathize with the user and its context, it will be more advisable to use a Journey map or Storyboard.

• Sitemap: The sitemap, or content map, hierarchically organizes a list of web pages, regardless of the user’s flow. If the sitemap is interactive it can be used as orientation and user navigation.
• Journey map: The journey map shows the processes of interaction with a system from a more holistic perspective. From the moment the user has a problem, he learns the solution and tries a new system. It is about integrating the context and social factors that intervene in the user experience.
• Storyboard: The storyboard represents a way to visualize a journey map with drawings and narrations to generate empathy with the user.

Note: This article was first published by interactius (spanish version).