How to Create Step-By-Step Instructions Using Visuals

There are some tutorials that require more than text to be understood by readers. By creating step-by-step instructions using visuals, you can key readers into details that may otherwise not have been communicated. Those visuals could be still images or screenshots, animated GIFs, comparison charts, or videos. On top of helping readers understand your content, visuals also break up the monotony of a large amount of text.

In the last year, I’ve been working as a technical writer for Joyent writing instructions and creating videos geared towards users of all skill levels. This requires precision — people rely on me to create step-by-step instructions and guides for a technical task. If I miss a step or assume that readers already know a piece of information, they may walk away frustrated and never come back to our content. On the other hand, if I’m too detailed the content could feel excessive and rambling, as well as require more frequent updates. No pressure.

Finding the places where an image can replace some of those overly precise details saves me time and energy. Plus, readers walk away knowing what they’re expecting to see which hopefully makes their life easier. Whenever possible follow some key writing advice: show, don’t tell (so essential it has its own Wikipedia page).

You don’t need to be a technical writer to benefit from precise process parlance. Keep reading for strategies to prepare instructions and add visuals to any document.

Before you start visualizing, consider your audience

Before producing any content, you should know who you’re producing it for and what their expectations are. Although it’s impossible to anticipate each reader’s individual needs, the rules you establish influence the tone of your content and can help you make decisions later down the line when creating your process outline.

Consider the following:

Are my readers already experts? Have they done this process before, if not exactly then in similar circumstances?

Are my readers internal or external? If my readers are within the same company, what language do we share that will help better explain the process?

What mood will they be coming to my content with? Am I creating this content for someone who is in a rush to get something done, or is this for a more casual learner who is just hoping to further their education on a topic?

What is most important to my readers? What is least important?

How do my readers prefer to learn? Do I know if a blog post is more successful than a video? Is there any analytical data to support these claims?

Are my readers native English speakers? If I use an idiom, will it hinder their ability to learn how to complete the process?

No matter what you’re creating, you’re always creating it with a reader on the other end. The better you know your reader and produce content with them in mind, the more likely they’ll keep coming back for more content.

Outline the process with only as many details as necessary

One way to prepare a process or tutorial for any medium is to start with a two-column table. The first column will contain each individual step that the reader needs to take to complete a task. Those steps can be as small and precise as “submit your application” or as large and unspecific as “complete the remainder of the form.”

The second column will be your visual process column. At first, this may not include any actual visuals at all, but a description of what the visuals will be. If you’re creating a written document, you don’t need to have a matching visual for every step in column one. If you’ll be creating a screencast, every box should have a note about the type of visual to be included. There should be little to no empty screen time in a video.

An example of this table is below under “Example Outline,” but first you have to know more about the types of visual aids.

Types of visuals and when to use them

Every process can benefit from different types of visuals. The medium will change depending on its purpose.

Still images – this is the perfect medium when trying to visualize a physical product, be it a person or specific object like a type of pan. These can be stock photographs or photos you’ve taken.

Screenshot – a still image of your screen is great when talking about products that are seen on your computer, such as a website or another piece of software. They’re super easy to take and edit, especially thanks to Snagit.

GIF – animated images are perfect for explaining short processes (under 8 seconds) which may not be as easily articulated.

Chart – bar charts, pie charts, line charts, so many types of charts! A chart is the best choice when talking about and comparing a set of numbers.

Video – the ultimate visual, a video is great for explaining a process. How to make a great technical video is an art form which can certainly be helped by this process but requires much more planning. (Lucky for you, I learned a lot from TechSmith, and they have a lot more to say on the subject).

Feel free to use a mix of mediums with your writing. Each will meet different needs for different steps.

Example outline

Recipes are one of the best examples of a process that often requires precision in which visuals can make a huge difference. Let’s say I want to outline the instructions for making a cake:

STEPS

VISUALS

1. Gather all of the ingredients to ensure nothing is missing. If an ingredient is missing, acquire that ingredient before continuing.

Picture of assembled ingredients

2. Preheat the oven to 350 degrees Fahrenheit.

3. Grease and flour a 9 x 9 inch square cake pan.

4. In a medium bowl, cream together the sugar and butter.

GIF of creaming process

5. Crack the eggs into the bowl one at a time, stirring to incorporate.

6. Stir in the vanilla.

7. Sift the flour and baking powder in the bowl and mix until just incorporated. There may be clumps or streaks of flour left.

GIF of sifting or photo of finished stirred product pre-milk

8. Stir in the milk until the batter is completely smooth.

Photo of finished batter (possible side by side with picture for step 7)

9. Pour or spoon batter into the prepared cake pan.

10. Bake for 30 to 40 minutes in the preheated oven.The cake is done when golden brown on top. The top should spring back to the touch.

Photo of finished cake

If every step had an image, that would be a bit… gratuitous.

Choose your visuals

The images I’ve selected are helpful in articulating mini processes within a larger process. In particular, the picture in step 7 of the mix stirred so far is a crucial piece of visual evidence. Having baked a number of cakes with this instruction, the difference between just right and over-mixed… I wish I always had a picture. There could be an instruction manual written just on the intricacies of how long to mix — every other page would have to be an image.

After outlining what visuals you need, you have to collect the goods. For this example, it would be best to take pictures of your process baking a cake. For other processes, you may not need to take custom photos. There are a variety of free and premium stock photography websites which have videos, GIFs, and still photos to be used at your discretion.

Testing with your target audience

No piece of writing is complete until it has been read by someone in your target audience and given a seal of approval. Their input will demonstrate where you missed a step in your process or where more visuals are needed.

The easiest way to go about this (without the large resources of a usability team) is to ask a few people from your key demographic to read your content and try to follow the process exactly as written. Jakob Nielsen is often quoted saying that five is the best number of people to catch the most number of issues.

Unmoderated testing

Unmoderated testing is perfect for smaller projects with limited resources — or just when you need results fast. There are a number of tools you can use for more precise results, but if you’re just looking for feedback on a smaller process, you may be able to get away with just sending the document to your testers with a set of questions you want answered.

Ask your testers to take notes whenever they have questions, see something that may be missing, hit roadblocks in the process, or wish they had more detailed instructions. Hopefully they’ll be able to finish the task before giving you feedback.

Moderated testing

The biggest benefit of moderated testing is that you can actually watch your tester perform the process and see where they are confused instead of relying on them to note that confusion for you. It’s even better if you record the session so that you don’t have to rely exclusively on the notes you take during this session.

Ask questions along the way. For example:

Did you understand what task you were being asked to perform? Did that task make sense?

What would have made this process easier to complete?

If there was a visual with a step, did the visual help you understand what to do?

Do you wish there had been more visuals?

Wrapping up

You now know why you should add visuals to step-by-step instructions and have an arsenal of tools to help you successfully create step-by-step instructions with the help of visual aids. Practice makes perfect. Your first attempt at adding images to a process may not be perfect, but with some user testing to guide your editing process, you’ll be on your way to helping your users understand how to complete a task.

Do you have another method of figuring out when to add visual aids to instructions? Share your tips in the comments below!

About the Author

Alexandra is the Documentation Editor at Joyent, where she takes complicated technical content and makes it friendly for the average human being. She’s been a marketing manager, a web developer, and once upon a time she was the social media intern at TechSmith. She believes in the power of a strong women in tech community. Follow her on twitter for technical strategies and thoughts on women’s rights at @heyawhite.

Editor’s Note: This post was originally published in November 2017 and has been updated for accuracy and comprehensiveness.

Our Products

Change the way you work

TechSmith's suite of screen recording and video editing tools lets you make great content and collaborate with anyone. Communicate clearly, show what you know, and easily access your content wherever you are.