How to design technical flowcharts, explained by flowcharts
Flowcharts are more exciting than you might think. Stay with me here.
At their best, flowcharts clarify complex processes — but they can also add confusion to intricacy. If you don’t get each arrow, text box and color right, you could send developers in circles or cause writers to delete an entire project. These five strategies will help you get your flowcharts right every time.
A flowchart is worth a thousand words
At Contentful, we use flowcharts a lot. A flowchart is a diagram that represents a workflow or process. They often provided step-by-step instructions to solve a specific task. We’re a digital-first company building a new technology with plenty of processes to explain, both within our own teams and with our customers.
Flowcharts make these explanations easier, because they wrap everything up in a contained package and display it in a visual form. Following flowcharts ensures that no step is left out. And iterating on them helps us improve the very processes they represent.
To be successful, flowcharts need to accomplish five things: Demonstrate user experience, visualize relationships, include every step without any extras, speak to their audience and employ tried and true design principles.
Demonstrate user experience
Successful flowcharts indicate what the reader will do throughout the process and what they’ll need to consider. That means it’s important to pay attention to what tasks and questions are included in each step.
For this example, the reader will gather some very important information about the process of petting a goldfish. The user experience of petting a goldfish involves the potential of getting wet, their level of satisfaction and possibly interacting with a dog named Goldfish.
Visualize relationships
Don’t leave your readers confused about what goes with what. Emphasize the relationships between sections of a flowchart. Plenty of strategies can help accomplish this goal. Color coding, arrows, typeface, and frame style are just a few possibilities.
This example illustrates that the action items listed under “Yes” are related, and color coding differentiates between the “Yes” and “No” actions.
Include every step and eliminate any extras
Don’t leave anything out, and don’t add extras! The person using your flowchart will look to it for every answer, from beginning to end. Leaving out a step — as insignificant as it may seem — will cause problems.
Simplify your icons and keep them to a minimum. Icons and symbols that communicate the intangible actions or process are endlessly helpful; however, too many pictorial components can disrupt the flow and confuse users.
Remember your audience
You probably describe your projects differently depending on your conversation partners. You likely talk about details and jargon with an immediate team member — you already share a good deal of the same information so you can jump right into the nitty gritty. But, with someone unfamiliar with your project, you most likely use simple language and give context.
Make sure you do the same when you’re designing and writing the copy for your flowchart. Think of the flowchart as conversation between it and its user; they need to speak the same language to communicate!
Clarify with tried-and-true design principles
The appearance of flowcharts impact their clarity and ease of use. And while you might want to use the wingdings font from way back when — your users probably won’t appreciate as much as they should. Keep your typography and labels simple. Never use a symbol and a label if one or the other will suffice.
Get your color palette to work for you. Remember that flowcharts concern themselves with a very particular, focused process or system. They deserve the same restraint and focus when assigning them a color palette. Stick with the basics of color psychology: red means bad, green means go, and confetti means it’s time to party!
A flowchart that helps rather than hinders, explained
Sometimes technical flowcharts illustrate extremely complex systems. For example, this flowchart from our ebook Customizing Contentful: A Developer’s Guide explains how to implement blue-green deployment with Contentful. But I followed the five strategies illustrated in the simple flowcharts above, and managed to produce an accessible and impactful solution.
Our ebook explains to developers (the audience) the implementation process (every step!), including directions (user experience), arrows (visualize relationships) and colored boxes (tried and true design principles).
