eLearning: Determining the Best Size for Today’s Lessons

by Kevin Siegel Follow us on Twitter View our profile on LinkedIn View our videos on YouTube

When developing eLearning lessons using any of the top development tools (Adobe Captivate, Articulate Storyline, or TechSmith Camtasia Studio), you need to take the size of your learner's device into account. If you make your eLearning lesson too large (I'm talking width and height, not how many megabytes the lesson might be), learners with small displays may have to scroll to see your content. If your published lesson has the ability to scale to fit the learners display, your content could scale down so small that your content will become unusable.

While you can create a project at one size and resize it smaller later, it's not an ideal workflow. Resizing a project once you've started will likely result in shifting of screen objects that require additional editing on your end. For that reason, it's best to pick a width and height that will work for the widest possible range of devices right from the start.

Several years ago, the typical desktop computer display resolution was 800×600 pixels. If you developed eLearning content for a screen resolution that low, a project size of 640×480 was recommended. A few years later, 1024×768 was the standard screen resolution, resulting in typical eLearning lessons sized to 800×600. According to w3schools.com, the standard desktop screen resolution today is 1366×768 and it's trending higher. (You'll find that available resolutions vary from system to system. For instance, I use an HP 22 inch display that doesn't support 1366×768. Instead, my closest options are 1360×768 and 1376×812.)

Because screen resolutions are higher than ever, developers are seeking an optimal viewing experience for learners. But what's the ideal size for an eLearning lesson? Unfortunately, there isn't a cookie-cutter answer. The size of the lesson you create depends largely on your customer. What is the typical device you expect your learner to be using? How big is its screen? Is the device typically used vertically (portrait) or horizontally (landscape)? What is its typical resolution?

If you are creating content for learners using standard desktop computers (Windows or Mac), a project size of 800×600 still works well. However, if you plan to post your content to YouTube, stay away from 800×600. At that size, your lesson won't look quite right when viewed on YouTube (you will likely see black bars on one or both sides of the video, and the video might look distorted during playback).

What's the Relationship Between Project Size and Screen Resolution?

Let's say that you create a project that is sized to 800×600. I view your lesson on a 17-inch monitor with a resolution of 1024×768. In this scenario, your lesson is going to look fine on my monitor. But what if I have a large screen (a 27-inch monitor for instance), and I'm using a high resolution? Your lesson is going to have a lot of white space to the left and right. Will that white space make the lesson look silly? Who's to say?

It's a delicate balancing act between the size of the capture area and an ideal screen resolution. When I create YouTube videos, I set my eLearning tool's capture size to 1024×568 and my screen resolution to 1440×900. While I could go higher with my screen resolution and capture more of the screen, the captured screen text at a higher screen resolution is small and hard to read. When I upload videos to YouTube, the already small text gets worse because YouTube makes my videos smaller.

More information on sizing eLearning projects:  

I'd love to hear from you. What is the best project size you've come up with? (Please post your comments below. Let me know who your target end-user is and the eLearning development tool you use.)

***

Looking for instructor-led training on the top eLearning tools? We offer live, online training on Adobe Captivate, Articulate Storyline, Adobe Presenter, and TechSmith Camtasia Studio. We can also bring the same great training onsite to your facility. Interested? Contact us for details.

eLearning: Playbar or No Playbar? Let the Debate Begin

by Kevin Siegel Follow us on Twitter View our profile on LinkedIn View our videos on YouTube

I was teaching Adobe Captivate recently when a student asked a few questions about the value of a playbar that fueled an interesting and heated, discussion (some folks love playbars, others hate them). Here are the questions that got the debate rolling:

  • Is the playbar necessary? 
  • If a playbar is included, how can you encourage learners to interact with screen objects instead of skipping them using the playbar navigation controls?
  • Where is the best place to position the playbar (top, bottom, left, or right of the lesson)?

All of the top eLearning development tools (Articulate Storyline, Articulate Presenter, Adobe Captivate, Adobe Presenter, and TechSmith Camtasia Studio) allow you to control the appearance of the playbar. In addition, each of the tools can accomplish the suggestions outlined below. In some instances, the option I discuss isn't easy to find in a particular tool. If you have trouble locating the playbar options, feel free to contact me.

Is the Playbar Necessary?

Should you include a playbar in your eLearning lessons? In my opinion, absolutely! If you've created a video like those commonly posted on YouTube or Lynda.com, there isn't any interactivity. The only way learners can navigate through a video is via the Play, Rewind, and Pause tools found on a typical playbar. While a video's playbar doesn't offer much in the way of learner engagement, at least it's something. In my experience, videos without playbars are ineffective. The lack of a playbar can be disconcerting if not flat-out annoying. 

How Can You Encourage Interaction With Screen Objects?

If your eLearning lesson is interactive (perhaps it's a software simulation with a quiz, or a soft skills lesson with buttons for navigation), the learner who navigates via the playbar instead of the interactive slide objects can derail the lesson. For example, you've created a button on a slide that, when clicked, reports a score to your Learning Management System (LMS). If the learner clicks the forward button on the playbar, not the interactive button on the slide, no score is reported to the LMS. As far as the LMS is concerned, the learner skipped the slide.

How can you encourage the learner to interact with the slide objects and not simply race through the lesson by clicking the forward button on the playbar? 

  • Add an animation in combination with an interactive slide object.
      In one of my projects, I inserted an arrow animation that pointed to the buttons on the first several slides (not all of them, since I was worried about the animation being a distraction). While short and sweet, the animation was enough of a visual cue that very few people missed the opportunity to click the buttons.
  • Hide the playbar for the entire lesson by default, but have it automatically appear when the learner mouses over the screen.
  • Hide the playbar on any slides where clicking an interactive object is critical.

Playbars and Quizzes…

If you've included a quiz in your lesson, most of the eLearning development tools require the learner to answer the question and submit before it is recorded and graded. If the learner answers a question correctly but clicks the forward button on the playbar instead of a Submit button on the slide, the LMS will likely treat the question as unanswered. In this instance, the learner will not get credit, even though the question was answered correctly. 

In this scenario, you can set up your lesson so that the playbar will disappear when the learner is taking the quiz but reappear on non-quiz slides. Most eLearning development tools offer a "hide playbar during the quiz" feature. (For example, in Adobe Captivate, it's a simple check box found on the Quiz Preferences dialog box.)

What Is The Best Screen Position for the Playbar?

If you elect to include the playbar, where is the best place to position it? The most common location for the playbar is below the video or simulation. In my experience, this position works the best since the majority of your learners are conditioned to look there first. The biggest problem with the bottom-position occurs when the video is very tall. In this case, many of your learners won't know there's a playbar at all since they'd need to scroll down. In this scenario, positioning the playbar at the top of the lesson would be ideal.

I'd love to hear if you think playbars belong in eLearning or not. I'd also like to know where you place them and how you encourage users to avoid the playbar when screen interactivity is critical. Please post your comments below.

***

Looking for instructor-led training on the top eLearning tools? We offer live, online training on Adobe Captivate, Articulate Storyline, Adobe Presenter, and TechSmith Camtasia Studio. We can also bring the same great training onsite to your facility. Interested? Contact us for details.