In the last post, I discussed simplified user interface (SUI) images as 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. 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.
Here's an example from the Tips & Tricks in-product help for Dropbox Paper. The in-product help provides structure and context for the task being demonstrated (I realize the GIF doesn't make as much sense here), and there is just a small amount of text with this moving image that explains how to assign a to-do.
I'm fascinated by the SUI GIF for the same reasons I love SUI static images. According to TechSmith, "a simplified user interface graphic can often sustain multiple software versions...before needing further updates. The simplified design is more forgiving to minor interface changes and additions, as it is already an abstract representation of the interface."
A 10-15 second "video" or GIF takes this benefit a step further by illustrating the basics of a single task. 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. In other words, with a reduced cognitive load for learning the new task, the user gets some quick success.
Though I recently completed TechSmith's Camtasia 2018 Certification, I've been making screencast tutorial videos since 2011. 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.
Process for SUI GIF Creation
Even 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.
In order to get clear on the process for developing something like this in Camtasia, I borrowed a sample from Unito, which is a tool that I'm testing for automating Trello cards from one board to another (that's not all it does). Reverse-engineering to build this image from one I already had is a little different from building a GIF from scratch, but it will serve the purpose for defining the process.
Here's the overall process for designing and developing an animated GIF:
We all know a picture is worth a thousand words. In documentation and customer education, a clear image can make or break how well end users understand the accompanying text.
The problem in customer education for technical products is that frequent product updates can render some or all of your educational images out-of-date.
I've been fascinated for some time with one solution to this problem: the simplified user interface (SUI). Here's an example from Outlook's "Coming Soon" in-product guidance.
So what's the big deal? The SUI image takes a bit more time to prepare than a screen shot.
But that extra time pays off big with two main benefits.
For example, in the following image, I was able to easily and quickly simulate the Outlook environment by using a real Outlook environment and then masking the information for the purposes of this educational content.
And honestly, this is a quick and dirty example that's not nearly as visually appealing as the above Outlook example.
If you are localizing your educational content, you already know how complex that can make your project. Using SUI images means you could potentially use the same images across content in multiple languages.
The good news is that SnagIt 2019 by TechSmith has a new feature that automatically simplifies your image. Just grab your screen shot and SnagIt does almost everything else.
Here's a demonstration using that same "real" screen shot from Outlook.
Ok, maybe the image is still not perfect in under 5 seconds. But those colored rectangles can be styled or removed individually, and it's easy to add your own if you can't find the right balance using the Auto Simplify feature. (Tip - use the Detail slider to change how SnagIt interprets what needs to be simplified in the image.)
With just a little more time and customization, here's that same image.
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.
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.
Camtasia Certification™ Process
For certification, you have the option to go through 10 separate courses and their quizzes - all related to various aspects of screencasting. You can also skip all that and just take the certification test without going through the courses.
I opted for the video courses - just in case I might pick up a few new tricks. The courses include some 15 hours of video content. Thank goodness for watching at double-speed. The narrator does get a bit long-winded at times, and not being a beginner, I didn't need to dwell on every explanation. Overall, the certification courses were very helpful and on point (and I did learn a few new tricks).
The course author's process is much like my own. We'll take a quick look at each of the courses, which walk through the process of creating a screencast.
Preparing to Create Screencasts
No matter which tool you use for screen recordings, you'll want to prepare accordingly - not only with a script and storyboard, but by making sure the environment you plan to record is ready. Turn off notifications and clear your computer desktop of clutter.
Recording Audio and Narration
While Camtasia does offer voice narration tools, like the course author, I find it more efficient to do the bulk of my narration recording outside Camtasia in Audacity. Camtasia's audio editing tools are passable. The one thing in this area that I learned the hard way is that Camtasia does better with WAV files rather than MP3 (as of mid 2018).
Recording Your Screencasts
When you start a new recording in Camtasia, you have the option to control what you capture with this toolbar. You set your area, as well as controlling whether to include the webcam and audio. I find it much more straightforward to leave the camera and audio off (unless you need to record system audio). But recording audio as you go through the recording process has its merits for some situations.
There are some handy menu settings you can use before you start recording, including:
One of the tricks I picked up in the certification course is this option "Restore cursor location after pause". It means that if you pause the recording, move your mouse in the process of whatever you do during the pause, Camtasia will restore the mouse position when you resume recording. I wish I'd known about this time-saving trick sooner!
Once you finish recording, the editing environment allows you to use a number of tools to edit the recording - along with other types of media - into a final video. This course/part of the process focuses on cutting and trimming the screen recordings and/or audio or other media. The timeline helps you understand when a particular item begins to show and when it ends. This course also explains how to manipulate items on the canvas.
This course of the certification process is the longest at 3 hours 12 minutes. Part of the reason is that the author chose a really long sample video (about 10 minutes) for the example and practice. Maybe for version 2.0 of the course, they'll use a shorter example.
Visual effects include things like annotations, scale, opacity, rotation and position of your media.
There are six different types of annotation tools. Between the captions, lines and shapes, you are only limited by your imagination (and time you want to spend) to create everything from a speech bubble to a scene with multiple moving shapes - such as a truck driving across the screen. Note that you won't get sophisticated animation possibilities like you could in an animation tool, but annotations are great for conveying conceptual information and adding visual interest. The blur, highlight, and sketch motion tools are great for enhancing screen recordings. And you can easily show that you are pressing a key in your video by adding keystroke callouts. Just select the type and press the keys you want to show.
This course is super short - these items are generally used in conjunction with editing and animating items in the video.
Animating and Moving Elements
We could play with these tools all day, especially the transitions, behaviors and animations. Suffice to say, there are lots of possibilities. What's important to remember is that you can do more than one change with each animation and you can layer multiple behaviors on objects or text to achieve a different effect. Plan some time to design your animations, because this can get time-consuming, depending on what you want to accomplish.
No matter how great the audio is from an external source, you may find the need to add an extra pause or otherwise manipulate the audio. It's a super-short course in the certification process.
Captioning Your Videos
I haven't done much with captioning yet (but I probably should). Now I know exactly how to add closed captions or create an SRT file to upload for YouTube.
Effects, Quizzes and Interactivity
Transitions and cursor effects offer more options for editing and enhancing your videos.
I've avoided quizzes and interactivity in videos until now. Many of my clients host their videos on You Tube (where these features aren't available), but when the video is hosted on a website, adding interactive elements like quizzes, a table of contents, and interactive hotspots are really great ways to add engagement.
Producing and Hosting Your Videos
The last course in the process is of course discussing the options for sharing your videos.
Now, you've completed all of the courses, and passed each of their quizzes with at least 80% (it's easy to retake a quiz - I did have to retake one because I'm no longer a Mac user and I skimmed over that part). You can now request your certification, which doesn't take long. And you can get the correct settings to use to add it to your LinkedIn Profile.
Camtasia for Customer Education
Camtasia is my tool of choice for creating screencasting videos, although sometimes I use it in conjunction with other tools. And screencasting videos are my favorite form of customer education. They are short, practical, and thanks to Camtasia's updated tools, full of possibilities.
If you'd like to watch my sample video from which the opening image for this post was derived, you can find it here: http://bit.ly/2xKGu24. I'm not the world's best narrator, but it gets the job done.
The Camtasia Certification courses are only available if you have a Camtasia 2018 maintenance plan. Find out more at TechSmith's site. You can take courses in their new TechSmith Academy (that don't lead to certification) for free.
I've read, listened, followed, and learned quite a bit since then, improving my skills and tracking down "the right" kind of projects. There is a Customer Education revolution about to explode. But the idea of customer education is far from universally accepted.
Part of a technology company's success is created through providing top-notch educational content for customers and potential customers. Rob Castadenda, founder of CEO and ServiceRocket, said at the Business of Customer Education track at Gainsight Pulse in May 2017 - "Customer education is a proactive way to help customers be successful with your products from the start." A recent job posting by Box explains the current customer education revolution so well: "The emergence of the Customer Education field is the result of the pervasiveness of SaaS businesses and their need to prove their products' value to customers. The old Learning & Development parameters are no longer sufficient to drive product adoption."
The right content (delivered live or online) can bolster a customer's successful onboarding and engagement with the product, so customers can get maximum value from your product. That also means expansions or referrals, as well as the renewals a subscription-based company needs to thrive.
But it may be hard to find the right person who can create this content, especially in a way to leverage similar content for different purposes or stages along the customer journey.
In an ideal world, you've got your Customer Education role(s) reporting under Customer Success, and Customer Success in constant communication and alignment with other areas of the company that use customer-facing educational materials, like Sales and Marketing. You'd have a repository of knowledge and content ideas shared across the company, such as in Evernote Business shared notebooks, which could quickly and easily be re-purposed for different needs with a single-source mindset.
But we don't live in an ideal world.
I've been monitoring the types of jobs that incorporate customer education since I put that stake in the ground for my own career, and am amazed at the inconsistency in what I find in this exploding discipline. Recently, over a period of two weeks, I identified 29 different titles (for 35 different current job postings available on LinkedIn, both entry-level and leadership levels) that included developing customer education content as most of or a significant portion of the job responsibilities. These range from the more obvious "Customer Education Specialist" role to various sales, success, and product-related titles. Some companies graft titles from the learning and development world, like instructional designer, but I suspect those are more mature companies with the need for specialized roles. Other companies seem to create their own titles that incorporate the shared responsibilities and blended roles required in a fast-paced tech company.
It's a wonder that tech companies find the content development skills they need in potential hires, and that people with those skills find the companies who need them.
Julia Borgini had a great article to help with identifying what companies should look for in the person who develops the content for the customer education building the foundation of customer success. She calls the role "Learning Designer." To summarize, her top recommended skills and competences are:
Julia closes by saying it may be difficult to find one person who demonstrates all of these skills (though, to toot my own horn a little, I know it's possible). Make sure to evaluate your goals to determine what kind of content you need for where you are in your company journey.
Adam Avramescu says "I like to say 'we are all educators' when it comes to making customers successful." But he believes that Customer Education is the in title that will stick as time goes on - be it Customer Education Content Developer or Director of Customer Education - and that some existing L&D titles like instructional designer will stick around as specialty roles.
If you haven't already, make Customer Education a part of your organization's plans for obtaining, onboarding and retaining customers with the content to help your users succeed.