When information is paired with a visual, people remember 65% of what they read even three days later. When you’re designing a website, keep in mind that there are certain processes that translate better as a visual.
On an average day, consumers are overwhelmed by data. News feeds pop up on our smart phones, there are ads on social media, more ads on the radio, print, billboards and television. It is difficult to come up with something that stands out from the crowd and grabs the viewer’s interest.
One way to get your message out is by creating visualizations of key data so those particular facts stand out. This also gives the reader’s eyes a break from lines and lines and lines of text.
When it comes to showing a process on the web, visuals can move your reader from A to B and make key points clearer. There are some rules of thumb you can follow that will make your process representation shine.
1. Show the Circle
Some processes start on step one, circle around, and restart on one again. You can show a simple circular relationship in processes by doing a Venn style diagram.
Usabilla takes the web design process and breaks it down via a visual embedded in the description. Showing the process in a circle explains how everything connects. The reader starts with Phase # 1 and moves around the circle.
2. The Background Matters
For some processes, it makes sense to add a background that represents the process you are trying to show. If you are mapping a course, or encouraging the creation of something, show that thing in the background and then create your visual data on top of it.
A good example of this type of data visualization can be found in the graphic Pike’s Peak Process. This page explains the process of climbing Pike’s Peak and shows the map set on top of a visual of the mountain. The benefit of this is that the reader can picture himself or herself climbing up the mountain while reading about the process of doing so.
3. Make the Steps Visual
You can represent a process that goes from Step 1 to Step 2 and so on by making a graphic that shows the process.
Take a look at APG Exhibits’ ordering process page. They clearly show you the steps in a green capsule to the left with a step number inside. This draws the eye of the reader and makes it clear which step he or she is on. You can incorporate this method into designs of processes that have steps. The benefit for the end user is that he or she will move smoothly through the process without confusion about what to do next.
4. Use an Infographic
An infographic presents images that show the reader as well as text, statistics, and graphs. This is a powerful way to communicate with your reader. In today’s busy world, some people will look at an infographic over an article because it is a quick way to digest information.
One example of an excellent infographic can be found at Bit Rebels. This infographic shows the process of what happens when traffic comes to a standstill. By using cars stopped on a road, it becomes clear immediately what the information is about. Facts are placed to either side explaining the process of a traffic jam.
The benefits of using an infographic are numerous. Not only will your readers easily understand complex ideas, but others may share your infographic (be sure to put your website address and/or business name at the bottom). This can create more buzz for your website.
5. Show Convergence with Intersecting Circles
Do parts of the process overlap and converge? You can show this by overlapping circles of different colors. This clearly shows the site visitor which parts overlap and what happens when they do. The colors and overlaps are just an excellent visual reminder of the text you are sharing.
A good example of intersecting circles can be found at Push. The circles are animated and swing in to converge on a portion of each. In the center is the letter “C” which stands for consumer. As the site visitor scrolls down, she will see that C=Consumer and an explanation of what they do for the consumer. The process continues as you scroll down and the different converging concepts are explained in more detail.
This method works well to grab the consumer’s attention. Once you have the user’s attention, you can go into greater detail.
6. Image in Center, Explanation Circling
Another option is to place a graphic in the center that represents the process and then text explaining the process around the border of the graphic. This works well if you use a header explaining the step in the process and then a few short lines of text for additional detail.
A good example of this technique can be found on designer Deda’s website. She offers a graphic of her process that shows the stages of the process clearly.
7. Chronological Order
Another option is to show the steps to the process in a chronological order from the top of the page down. This works well for things such as recipes, DIY instructions and processes that have very clear steps that are followed one after the other and don’t necessarily overlap.
A good example of this type of process shown as visual data can be found at Fix in their description of how to make a candle. There are actually several visuals on the page, from how to choose the type of wax to actually making the candle. The images illustrate what the user needs to do and the text offers more detail. The benefit of this type of explanation is that people who don’t like to read the directions might still know what to do.
Showing a visual representation of a process offers many advantages. How you choose to show the reader depends upon the process being presented and your viewing audience. These seven tips will get you started, but be open to trying different types of visual data to make your point.
Author:
Lexie Lu is a designer and writer. She loves researching trends in the web and graphic design industry. She writes weekly on Design Roast and can be followed on Twitter @lexieludesigner.
