We wanted to talk about some ideas that we’ve taken from Google on how to present elearning video content. And to share them in case you are also involved in e-learning, and you wanted to copy these ideas as well.
In this podcast episode, we examine one of Google’s videos from its UX Design course. These courses are on YouTube, so it’s possible to view them without having to sign up to a course.
Link to the video: Intro to UX (User Experience)
Transcript
Introduction
This is the Cherryleaf Podcast.
Hello and welcome to the Cherryleaf podcast. In this episode, I wanted to talk about some ideas that we’ve taken from Google on how to present elearning video content. And to share them in case you are also involved in e-learning, and you wanted to copy these ideas as well.
If you don’t know, one of the services that Cherryleaf provides is training courses. A lot of them are elearning courses around technical communication.
We’ve just finished rerecording the foundation course that we offer in technical writing. And we’re just about to start recording a new course.
Why change what we do?
Why have we decided to change the way in which we present our elearning courses?
Let me explain.
The previous videos that we provided with the foundation course were recorded in 720P high definition, without subtitles, instead with a transcript.
We felt it was time to move up to full high definition 1080P and to add subtitles to the videos themselves.
We also needed to update some of the content to reflect current practises in 2023 and improve a couple of areas. About 5% of the content that needed changing.
Another reason was that, although we actually get really good feedback from delegates, there was a comment from one delegate saying they felt we could improve the presentation format.
About the presentation formats
With e-learning, there’s always a balance.
There’s the price that you want to charge people for the course. And then there’s the cost and time it takes to create the content. A cost benefit decision.
If you look at different elearning courses, you’ll see a number of different ways in which the content is presented.
At the basic level, you might see a course presentation that is a video of slides and an audio narration about them. It’s very quick and cheap to produce a course like that. But from a user perspective, it’s not particularly engaging.
Moving up from that, another option is to add some animations to go along with the slides. Typically, there’s still an audio narration to go with that. This is the type of format that you often see with internal training courses.
The next level up is to include a video of a presenter. The presenter presents, and the screen switches to images of slides and animations. Sometimes, you see the presenter and the slides on the screen at the same time. That’s another format that’s often used with internal company elearning training.
A less common approach for commercial training course, is what you might call the walkthrough or “Let’s play” videos. This is the type of video that you might see on YouTube where somebody walks you through a software game. In these types of videos, the presenter often is superimposed in the lower corner of the screen.
The fifth approach you might have seen is closest to what TV shows look like. In this group, I’d include the videos you see on YouTube made by people who are travelling the world and recording their adventures. We’d also put Google’s course presentations into this category.
Our approach at Cherryleaf has been to have a video of a presenter, with a plain white background that we create using a green screen effect. Slides appear on the screen next to the presenter at different times during the module. Sometimes, there’s videos of software applications and images that take over the whole screen.
We want to change this so it’s closer to that fifth format used by Google, so our videos are even more engaging. We use Camtasia to edit and produce the videos, and we plan to continue using that application. It’s a popular tool with technical communicators and it’s very affordable.
About the Google course videos
Let me explain what these Google training videos are about, why they exist and where you’ll find them.
A few years ago, Google launched something called Grow with Google and with that the Google Career Certificates. According to Google, Google career certificates can help people prepare for a career in high growth fields such as data analytics, UX design, and project management in under six months, without them needing to have any prior experience.
The Grow with Google website states:
You’ll get professional training designed by Google, and you’ll have the opportunity to connect with top employers that are currently hiring.
So why have Google done this?
There are certain careers where there are skills shortages. Google wants to offer a path to those careers that is an alternative to taking a Bachelors or Masters degree. Google and a number of other companies recognise these certificates and will consider students who have taken that course when they are recruiting for these roles.
The training videos for these courses are on YouTube, so it’s possible to view them without having to sign up to a course.
About the video
In this podcast episode, we’re going to examine one of the videos from Google’s UX design certificate course. We’ll provide a link to this module in the show notes, so you can view it yourself.
We’re going to look at the video to identify the visual techniques Google has used to keep viewers engaged. We’ll explain how you can use the same techniques, even if you don’t have Google’s budget. We’ll also talk about the techniques we used when we recorded the new videos for our foundation course, and the ones that we didn’t.
I’m going to start by playing 45 seconds from the beginning of the video called “Intro to UX user experience”:
Welcome to your first course. Anyone interested in UX design can complete this course because you don’t need any previous experience in design and you don’t need a college degree in this first video, we’ll cover the goals of the course and the history of UX design. UX designers help make technology easier to understand and more enjoyable to use. So when did the study of user experience or UX begin? Let’s learn some quick history to get us up to speed.
So let me describe the visual part of this video.
There’s a presenter, slightly to the right of the middle of the screen. You see him from the waist up. He’s wearing a plain blue T-shirt. You get the impression that he’s somebody who works as a UX designer at Google. He doesn’t look like he’s a model or an actor.
In front of him is a laptop there’s a “Grow with Google” sticker on it. In the left-hand half of the screen there’s a large monitor with the Google “G” logo displaying on the screen. Behind him and the screen is a room. It looks like it might be a cafeteria, or it might even be somebody’s home. You can see some pattern on the wall. There are some ceiling lights. There’s part of a sofa and some cushions in the background.
Your first thought might be that’s a scene that is relatively straightforward to copy.
However, it can be quite tricky to do, because you need a big room to pull off this look successfully. And you need an empty room. You don’t want people walking around in the background or making noise.
You can hire a suitable room for a day, if you have the budget to do so.
One approach you see in some YouTube videos is that people record the video in their living room or bedroom. In the background, they’ve strung up some LED lights, or they’ve got some soft lighting to give some depth to the shot.
One option we considered was to record using a green screen, like we do already, and then add a background image of an office as a special effect. Another option would be to add a soft-focus video of an office instead of an image, so there was some subtle movement in the background.
This is a similar effect to what you sometimes see on Teams or Zoom calls. However, if you’ve been in a meeting and have seen people using those sorts of backgrounds, you’ll know that you have to get the lighting right for that effect to work well. Otherwise, people’s heads can look a little bit fuzzy.
We’ve decided, for the moment, to stick with plain backgrounds. We believe there are other techniques we can use to keep the viewer engaged.
We have had problems getting the green screen effect to work well. The room we use is small, and we sometimes have what’s called green spill on the presenter’s face. A green shadow. We’ll be doing the next recordings in Brighton rather than our Surrey location, so that might resolve that issue.
About the audio
Although we can only see him from the waist up, it’s clear that he’s standing, and that’s quite a good way to have some energy in the way in which you present. And that leads us on nicely to talking about the audio element.
You might have noticed there was some introductory music that was playing in the background, and that’s called a music bed. That’s relatively straightforward to add if you wanted to have that. There are sites that provide royalty-free music that you can use in your videos. Some include music that’s available free of charge, others for just a few pounds.
One for example is a website called melody loops.
If you’re hosting your videos on YouTube, YouTube also has a few royalty-free audio tracks that you can include in your videos.
The problem with using a music bed is that it makes it difficult for people who are hard-of-hearing to understand the speaker.
For that reason, we don’t use music beds on our videos, we don’t plan to in the future.
We’re not going to copy Google in that instance.
Something else on the audio. The audio quality of a recording is really important. We use radio microphones so that the microphone is close to the presenter. There wasn’t a microphone visible in the Google videos, so they might be using a boom microphone located above the speaker.
Using a teleprompter
Let’s talk about some of the things which are not so noticeable in the way in which it’s presented.
The way that the presenter is speaking is very fluid, and he comes across as very knowledgeable. If you look at his eyes, what you’ll see is that they’re darting slightly to the left and slightly to the right. That’s a giveaway that he is reading from a teleprompter.
A teleprompter displays a script on a screen of glass or perspex in front of a camera. The angle of the glass is set so that the camera can’t see the text, so it doesn’t appear on the recording. The presenter is able to read the script as they are presenting. They can use a pointer or a keyboard to stop and start the teleprompter. It means, as is the case in this video, the presenter speaks in a smooth and fluent way.
We already use a teleprompter when we’re recording the videos.
As well as making the presentation more fluid, it also makes it easier to re-record sections. You have a script, and so you can go back and say exactly the same words that you said before.
There are a number of teleprompter apps for tablets and smartphones that are very affordable. You can download a Word document that you’ve created with your script onto the Teleprompter app, and then play it. You can use a remote control or a keyboard to stop and start the text as it scrolls through the document.
You can get low-cost teleprompters on places like Amazon and eBay for about £40 or £50. They generally comprise a tray, a piece of perspex, and a cloth.
Alternatively, you can just put a tablet or a mobile phone a little bit below your camera and use the teleprompter that way.
Creating close ups
Google also uses a technique that you see in a lot of YouTube videos. That is, they don’t have single static camera shots of just the presenter. Because people can get bored with that.
In the Google video, the image changes in some way roughly every 30 seconds or so.
For example, after 20 seconds, there’s a close up of the presenter. He takes up much more of the screen. He looks larger. And that close up appears for just 4 seconds before it goes back to the normal wider shot. This video uses three types of close up. There’s a wide shot, a close up of the speaker, and a really close up shot where part of his head is out of frame.
We decided to copy this technique and use close ups in the new videos. We tried out a number of techniques for doing it.
One is to use the software that is used often by gamers when they are doing the videos on YouTube There’s a free application called OBS. In it, you can set up scenes. You can control essentially which camera is appearing on the screen and what level of zoom is appearing at the same time. So you can set up a number of scenes. For example, a standard shot, close up shots, and you can then use keyboard shortcuts to switch between those different views.
We found that, unless you were sitting down close to your keyboard, you needed somebody on the keyboard to do that switching for you.
But that’s one approach.
Another approach that gamers use is they have foot pedals instead of the keyboard. They can push on the left pedal, the middle pedal or the right pedal to switch between scenes.
We found it was tricky to control that as you’re presenting.
We found the easiest way was to record the video in a normal way and then to use Camtasia to do all the zooming in and zooming outs when we were editing the recording. Camtasia has a few zoom effects that can be added to a recording.
You can set that up and where you feel the video needs to change and be made more engaging, you can just drag on that special effect onto your timeline, and zoom in to the presenter. Then after a little while you can zoom back out to the normal view.
We found that relatively straightforward to do.
Using the Ken Burns effect
Let’s play a bit more of the presentation.
The phrase user experience was first coined in the 1990s by cognitive psychologist Don Norman as technology use expanded and evolved.
And let me describe the video.
As they’re talking about Don Norman, the presenter is replaced by a still image of Don Norman that takes up all of the screen. You can’t see the presenter.
And what’s happening is as that image is slowly getting bigger and larger as the presenter is talking.
This is known as the Ken Burns effect, where you’ve got a static image, but you keep people interested by making it move in a slightly subtle way.
We hadn’t used that technique much in the past.
So we decided to use it more often in the recordings for the foundation course.
And we’ll probably use it in the new course that we’re developing.
And again, it’s something you can do in Camtasia. There’s a couple of ways of doing it. There’s a function called scale up. You can use that to scale an image on the screen. There’s also something called the custom transition, and this enables you to scale and move an image more gradually.
The Ken Burns effect is really nice, in that it can make static images quite engaging.
About the slides
Google also uses slides to present important information. The slides are very plain. It’s just sentences in blue on a plain white background or bulleted lists, again in blue.
I mentioned there was a large monitor next to the presenter, there in the screenshot. But the slide isn’t appearing on the monitor. It’s taking up the whole of the screen. You can no longer see the presenter. All that you can see is that slide. And that image is on the screen for about 6 seconds with the presenter talking about over the slide.
Where there are slides that contain bullet points, each bullet point appears gradually when the presenter starts to talk about that point.
It’s fairly easy to import slides from a PowerPoint or Keynote presentation into a video editing tool like Camtasia. The most common way to do it is by going into PowerPoint and exporting your slides as individual images.
You can then import those images, those PNG or JPEG files into your project in Camtasia or a similar tool. And then you can drag them onto the timeline to appear where you want them. You can set their size, so they take up the full screen or appear alongside the presenter.
So that’s relatively straightforward.
What we haven’t done in the past is get the items in a bulleted list to appear gradually, one by one. In fact, we don’t use bullets in our slides. We tend to have just a few sentences on each slide.
We looked at how we could do it in the future. The most likely way is to again use another of Camtasia’s animation features. There’s an effect where an image can appear from the top first and slowly lower down. So this can make the bullet points can appear one by one.
You could also write the text in Camtasia or another video editing tools and use their position on the timeline to control when they appear. But that’s a lot of work.
So those are a couple of options for doing that.
Using animations
Let me play a bit more of the course before I describe the next technique they use.
Things all the way to ancient China, where the practise of Feng shui began. Practitioners believe that the arrangement of a physical space, like how furniture is positioned in a room, could bring someone luck or improve their health and happiness.
While they’re talking about the principle of Feng shui, they’ve cut away from the presenter.
What the viewer sees now is a simple animation. An animated image, a scene I should say.
The first animation is of a person sitting in a room on a sofa reading a book about feng shui. The picture on the wall is askew and there’s a pair of socks draped over the sofa. There’s a tipped over mug on the coffee table, and basically the room’s a mess. The image of the man moves, with his hand and the book moving to indicate he’s reading the book.
Then there’s a new animation on the screen. In this scene, the man is sitting on the sofa and now in the room is nice and tidy. The socks have gone. The books are on the table, in neat pile. The picture is straight and the man smiling. So Google is using animation to add some humour to the course.
We have in the past steered away from animation.
We’re not graphics designers, we’re not animators.
But we decided to introduce some animations into the foundation course.
So how can you do that if you’re not an animator?
Some photo stock image sites also have what are called character constructor images. They are flat 2D cartoon-style images of a character in various views, face emotions, poses and gestures.
You could import them into Camtasia and use the animation features in Camtasia to move the images around the screen. It’s a bit fiddly to do that.
Another way is to import the images into PowerPoint. PowerPoint has some nice animation features that can be used to make images to appear like they are moving. One feature is a morph feature that can make one image change or morph into another. We mention this on our images training course, by the way.
There are apps designed for creating animations, such as Adobe Character Animator.
But we created them another way.
We used something called Lottie files.
Lottie files are a bit like SVG files, that is scalable vector graphic files. You can edit the text file to change how the animation looks. Like SVG files, they are scalable. You can create Lottie files from scratch, or you can download files from stock image sites. Some of these files are available for free or for a small fee. Just a few pennies. Depending on the licence, you can edit and amend the files to suit your need.
Now I suspect with Google they have the ability to call upon a professional animator to develop the graphics for them. It may be in-house, it may be an agency that they use.
But we’ve used animations sparingly.
For our courses, we’ve found that videos of documents and websites where we can highlight specific features work better for our content. More on that later.
Moving between sections
The video continues with the video switching between close ups, slides, slides with bullet points, and animations roughly every 20 seconds or so.
Google has divided up the course into a number of chapters or sections.
That introductory section lasts about 2 1/2 minutes, and let me play how it ends.
What you’ll notice is that the audio bed we heard at the start had faded out and then you start to hear a new audio bed coming in. This music marks the end of the introduction.
And finally, you’ll begin to build your professional presence online, including starting your portfolio to help keep track of what you’re learning. You’ll take practise quizzes and complete peer reviews and self review. You’ll get plenty of chances to go over the materials and practise at the end of the week. You’ll wrap up the course with a graded assessment to show what you know, so let’s start at the beginning and learn the basics of user experience design. The user experience…
Using music to mark the chapters within a course is quite a nice idea.
The next section in the module gets into the details of UX writing.
There is also a slide transition to mark that this is a new section.
Using a second camera angle
The course carries on using those visual techniques for about 5 and a half minutes and then Google throws in something new.
You see the presenter’s profile from the side, at about 30 degrees.
Again, this is to keep the viewer’s attention during the video.
So how can we do this?
One method is to use a second camera that records the presentation alongside the main camera. You then import that footage into the editing application and insert it at the relevant points.
And most people do have access to a second camera. That’s because you could use a smartphone to capture the presenter from the side. You can get good quality video from a smartphone as long as you have good lighting.
And there are apps that you can use that will make your smartphone turn into a webcam. But we found the Wi-Fi connection between the laptop and the smartphone does result in quite a bit of lag in the recording, with the audio getting a bit out of kilter.
Another approach is to move your camera and re-record the sections where you want to have that second angle.
Unfortunately, we were defeated by another problem and that was the room that we use is comparatively small. It’s not as big as this room that Google is using. And it was quite difficult to crop the video without seeing the lights and the other paraphernalia in the room.
The monitor gets used!
After 16 minutes, the monitor that’s been there for the whole of the video, that hasn’t displayed anything, that has just been a black screen with just the G logo, comes into use.
What they display on that is of rough pencil drawing of a wireframe image. Now we don’t have a monitor in our presentation in our format. We have the capabilities of doing that type of thing. And we use it in some of the videos. We have stuff illustrated as if it were on a laptop or on a computer monitor.
One of the nice features within Camtasia is that’s a special effect that it has called device frame.
And so you can take an image, drag on this device frame special effect.
And what happens is that image looks like it’s appearing on a laptop screen or a monitor.
We have used it in certain situations, but not at the same time as the presenter being on the screen.
Showing an application
17 minutes in, the presenter starts to talk about an example, which is a Google Doc and some of the menu options that are available within Google Docs. Let me play you that bit of video.
For example, when you click the file menu on a word processing application. Like Google Docs, you expect certain options like new or print to appear in the drop- down menu.
As it talks about the File, New and Print commands, those are highlighted.
And again, we can do that with the annotations feature within Camtasia. In fact, it’s something we’ve been doing for years.
We could record an application and then use the highlighter annotations feature to add a yellow, green or orange background to an area of the screen. But we use a different style. We tend to prefer the spotlight feature to emphasise a particular area of the screen.
Using B roll
The visual changes in the visuals to keep the viewer’s attention works very well. I don’t know if there’s any science behind it, or what is the ideal period between scenes, but Google seems to be changing the view every 30 seconds or so.
We’ve followed that method in the new foundation course recordings, and we’ll do the same on the new course that’s in development. I mentioned earlier that we only use cartoon animations sparingly, so we needed something else to use instead.
Google probably doesn’t want to use anything that wasn’t created by them. But we have the option to use or license full motion video content from others.
We’ve included what’s called B-roll footage as a way of illustrating key points during the course. B-roll is basically supplemental or alternative footage that’s intercut with the main shot. You see this a lot on YouTube. They’ll be talking about something, and it will switch from the person talking about it to a video of the thing that they’re talking about. If they’re talking about a car going very fast, the video might cut to a clip of the car speeding down the road. In travel vlogs, you might see lots of aerial shots taken from a drone camera.
We created some b-roll ourselves, but most of it came from stock footage sites.
About the other modules in the course
The other modules in Google’s UX training course follow a broadly similar format.
However, there are some differences.
They’ve used a green screen in some of the other videos. That might be because they weren’t able to use the location of the first video, or the presenter was in a different location. They’ve replaced the green screen with a patterned background of blue, purple and white.
In most of the clips, they positioned the presenters right in the middle of the screen, rather than slightly to the right. I don’t think that works as well. Again, they might have had some restrictions as to where they could record the videos.
And they used another method for displaying bullet points. In that case, the information appeared overlaid over the image, to the left of the presenter. That brings a bit of inconsistency into the course that I don’t think helps the viewer.
Outside of those minor criticisms, Google is setting a standard for us and others to aim for.
Summary
So those are all the main presentation features that we spotted Google using in that course.
I hope this audio description of a video made sense. And, if you are involved in creating any learning material, that it gives you some pointers as to ways in which that information can be presented.
Pretty much all of it doable without needing to spend too much time or money. Assuming you already have the basic equipment needed for creating elearning content.
The result should be a course with a nice professional look to it.
As I mentioned some features can be challenging to achieve. The second screen shot, that side angle was surprisingly difficult to get right. Using lots of animations. If we chose to do that, then we’d need to improve our skills in that area.
If you’re interested in our training courses, then you can go to the cherryleaf.com website and you’ll find information on the courses there.
If you’d like to contact us, if you have got more questions about this, then you can e-mail us at info@cherryleaf.com.
Thanks for listening.
Leave a Reply