
Process for SUI GIF CreationĮven though a GIF may only last 10 seconds, it takes quite a bit of planning, as well as some extra time to create and produce if you want to make a quality image that communicates a task well with professional production quality. When I started seeing these GIF images, I knew they could be valuable for my clients. I've started seeing these appearing not only in help centers and in-product guides, but also in nurturing email campaigns when trying out a new tool. Though I recently completed TechSmith's Camtasia 2018 Certification, I've been making screencast tutorial videos since 2011. In other words, with a reduced cognitive load for learning the new task, the user gets some quick success. From a user perspective, it's much easier to see how to do a task in a glance rather than reading an article or even watching a video with narration and annotations. The simplified design is more forgiving to minor interface changes and additions, as it is already an abstract representation of the interface."Ī 10-15 second "video" or GIF takes this benefit a step further by illustrating the basics of a single task. According to TechSmith, "a simplified user interface graphic can often sustain multiple software versions.before needing further updates. I'm fascinated by the SUI GIF for the same reasons I love SUI static images. The in-product help provides structure and context for the task being demonstrated, and there is just a small amount of text with this moving image that explains how to assign a to-do. Here's an example from the Tips & Tricks in-product help for Dropbox Paper.

While I've seen some examples of SUI in images, I've noticed far more examples that take it a step further by adding action as animated GIFs.

Simplified user interface (SUI) images are a potential solution to one of the biggest challenges that technical communicators face - keeping content up-to-date in the face of frequent product updates.

To learn more about why and how to use Simplified User Interface images in your content strategy, you can read this article from TechSmith, one of many they have on using SUI. It might not look as awesome as you could do by mocking it up in Photoshop, but it gets the point across quickly and without any advanced graphics skills.
