How to design technical flowcharts, explained by flowcharts

Flowchart Contentful
Published
October 14, 2020
Category

Insights

Topics
Frontend

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

Flowchart asking if you want to learn something new. Option "Yes" leads to "read on" as well. Option "No" leading to the question "want to confirm your biases?" which leads to the answer "Read on."


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

Flowchart explaining how to pet a goldfish. Asks if you like getting wet. Option yes leads to answer "fina a dog named Golfish." Option "no" leads to "place hand into tank" then "pet fish" then the question "are you satisfied" if answer is "yes", loop back to "Place hand into tank". If answer is no, go to option "Find a dog named Golfish."


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

Flowchart asking "Are these two things related?" If answer is "No" then you get result "Differenciate their visual treatment". If answer is "yes" then result is "Group them" then "Give them the same visua ltreatment."


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

A flowchart starting with "how to illustrate a process" leading to "Don't leave anything out" finishing with "don't add 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

A flochart asking "Will my golfish understand this?". If answer is "yes" result is "Great." If answer is "No" result is the questions "Do they need to?" If the answer to this is "No" the result is "Great". If answer to the question is "Yes" the result is "simplify and revise" then loop back to the first question.


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

Flowchart asking "Does your flowchart have arrows?" Option "Yes" leads to result "Good." Option "No" leads to result "Add them", then loops back to the initial question.


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

A complex flowchart from the Contentful eBook "Customizing Contentful: A developers guide" depicting how to implement blue green deployment with Contentful


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).

Topics
Frontend
About the author

Don't miss the latest

Get updates in your inbox
Discover how to build better digital experiences with Contentful.
add-circle arrow-right remove style-two-pin-marker subtract-circle remove