Not Just for Laughs: Putting Animated GIFs to Work for Technical Communication

Guest Author Daniel Foster

Daniel will be speaking on the topic of animated GIFs for technical communication at tcworld India 2018.

Visuals are a key element of technical communication, not only because they provide better comprehension and recall than text alone1 … but because they attract attention and interest2. Like it or not, customers have more choices than ever for finding help when using or learning about a product. If the official documentation is an intimidating (dare I say boring) wall of text, they are likely to dismiss it and look elsewhere.

While videos have become a bigger piece of the content pie for many technical communication teams, the added complexity of audio production and streaming video hosting can be a limiting factor in their use. One lightweight option worth adding to your multimedia toolbox is a technology that dates back to the dawn of the Digital Age.

What’s Old is New Again

Animated GIF, a media format first introduced by Compuserve in 1987 and later released into the public domain, was one of the first ways to capture and portray motion on the Internet. In the early days of the World Wide Web, it was nearly impossible to surf the web for more than a few minutes without seeing an animated “Under Construction” graphic or a flashing banner ad.  

Even as Flash and low-resolution video formats were introduced over time—eventually evolving into high definition streaming video—the humble animated GIF survived, earning it the nickname “cockroach of the Internet.”

Now thirty years later, the GIF is more popular than ever, providing us with an endlessly creative, visual language of celebration, empathy, and slapstick humor. Most messaging and social platforms support the format, and workplace communication platforms have followed suit. It’s a move that causes many of us to feel like:

celebration

GIFs at Work

Among corporate content developers, marketers have been quick to embrace the format as a way to add visual interest to emails and social posts. The widely-supported motion format is useful to grab the attention of viewers and tell a story… all within a compact space and file size. Technical marketers can tease new features or functionality in just a few frames. Emails like this are becoming an increasingly common sight in my inbox:

Now some technical communicators at startups and established software brands are beginning to pick up on the benefits of animated GIFs as well. Which means you’re starting to see online documentation that uses embedded GIFs as a media format alongside static image formats (e.g., JPG and PNG) and video formats (e.g., MP4).

Indeed, one of the most popular uses for GIFs in technical communication is to sprinkle them in to illustrate written documentation, as an alternative to a static image or video. The graphic below shows a pretty common structure that blends multiple media types in one article.

Tips for Using GIFs

What are animated GIFs best suited for when it comes to technical communication? The sweet spot for this format is showing a very brief series of steps or actions. GIFs are perfect for replacing or illustrating a rather unwieldy set of written instructions. Consider the following instructions for using special characters in Google Docs:

To include emoji, math notation, or other special characters in a document when you know the shape but not the name of the character, click Insert > Special Characters. In the area labeled “Draw a symbol here,” draw out the shape of the character you want to include. Click one of the search results at left to insert the character into your document.

Contrast that with the clarity and interest level of this animated GIF (especially when you put yourself in the shoes of someone who has little to no familiarity with the interface):

A good rule of thumb is to limit the amount of information contained in an animated GIF to 2-4 steps and 3-10 seconds. Much more, and it becomes hard for the viewer to follow along, given the lack of player controls like a pause button or scrub bar.

Image
Animated GIF
Video
1-2 steps 2-4 steps

3-10 seconds

Visuals only

5+ steps

10+ seconds

Visuals + narration

Table: When to use an animated GIF


Not a One-Trick Pony

GIFs are a rather versatile format, well suited to a number of common tasks within technical content and everyday office communication:

  • Showing before-and-after differences
  • Illustrating correct vs incorrect technique
  • Demonstrating cause and effect
  • Showing off a new feature in release notes
  • Reporting an elusive bug
  • Answering a co-worker’s question
  • Just having fun or celebrating a win with your team

Once you start using animated GIFs, you’ll find many more occasions when this simple, lightweight media format just makes sense.

Tips for GIF Creation and Sharing

The best tool is often the one you already have. A number of image editors like Adobe Photoshop and TechSmith Snagit have animated GIF creation capabilities built in. Video editors such as Adobe Premiere and TechSmith Camtasia do, as well. And you can also find a number of dedicated GIF creation tools like LICEcap and Giphy GIF Maker.

Most workflows, such as those in Snagit and LICEcap, begin with a video clip or screen recording and convert it to animated GIF format. Some, like Camtasia and Giphy GIF Maker, also let you begin with a series of images and cycle through them in the order and at the pace you desire.

When saving the GIF, you may want to tweak the settings a bit to achieve the right balance of file size and visual quality. A good rule of thumb is to keep the GIF to 2MB or less for quick loading, but a lot depends on the dimensions and amount of color and motion in the content.

It’s also a good idea to confirm that your content publishing platform supports animated GIFs. Most web-based platforms should support uploading and embedding animated GIFs just like any other image format. Some of the authoring platforms like Madcap Flare and Adobe Robohelp do not show the animation in the compose view but will animate in the preview and on the final HTML page.

Conclusion

Take advantage of animated GIF’s lightweight, easy-to-embed, auto-playing, looping format to help your customers be successful. Adding GIFs to your multimedia toolbox will give you another option for conveying useful information in a compelling, effective—and occasionally fun!—way.

 

About the Author:

Daniel FosterDaniel Foster has 15 years of software industry experience, much of it in marketing communications, content creation, and social media. Currently he heads up market and product strategy for TechSmith Snagit. Daniel will be speaking on the topic of animated GIFs for technical communication at tcworld India 2018. He never really gets tired of watching penguin GIFs.

@fosteronomo

 

Text Sources:

[1] See, for example, Levie, W.H. & Lentz, R. , “Effects of text illustrations: A review of research”, ECTJ, December 1982, Volume 30, Issue 4, pp 195–23  (http://link.springer.com/article/10.1007/BF02765184) and Medina, John J., Brain Rules, pp233-234 (http://brainrules.blogspot.ca/2009/12/worth-thousand-words.html)

[2] See, for example, “20 Ways to Share Color Knowledge” http://www.office.xerox.com/latest/COLFS-02UA.PDF and “The 2015 Video Marketing Cheat Sheet” https://animoto.com/blog/business/video-marketing-cheat-sheet-infographic

Picture Sources:

  • Excited Happy New Year Gif: here
  • Asana – Avoid the last-minute scramble Gif: here
  • Working with Custom Fields Screenshot: here

We liked this post about GIF so much, we get motivated to create an own one:

thank-you-gif

[Total: 2    Average: 5/5]

Spread the word. Share this post!

Leave A Reply

Your email address will not be published. Required fields are marked *

We hereby notify you that our website collects personal data from you using cookies. More Information