TCS5 – Page 6 – The Logical Blog

April 1, 2014

eLearning: Determining the Best Size for Today’s Lessons

by Kevin Siegel

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:

If you'd like to learn more about project dimensions, this article on the TechSmith website is very helpful. While it's written specifically for Camtasia Studio projects, the information is also relevant for Storyline and Captivate developers.
If you're a Captivate developer, Rod Ward of Infosemantics.com suggests a project size of 995×627.
If you're a Storyline user, check out the Choosing a Story Size article on the E-Learning Heroes website.
Check out my YouTube video on project size and screen resolution.

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.

March 25, 2014

Adobe eLearning Community Formed Supporting Maryland, DC, and Virginia

IconLogic's Kevin Siegel has been named the manager of Adobe's new eLearning Community supporting eLearning developers living in or around DC, Virginia, and Maryland.

Kevin and the IconLogic team will be hosting regular meetings featuring tips and tricks on creating effective eLearning using such tools as Adobe Captivate and Adobe Presenter.

Join the group on LinkedIn to keep up to date on meetings and share your experiences with other developers.

More information.

March 25, 2014

Adobe Captivate: No More Empty TEBs

by Lori Smith

During my beginner Adobe Captivate class, I am often asked if it's possible to ensure that learners do not leave a Text Entry Box (TEB) blank. When working with a TEB, you can set specific correct values using the Validate Entry option in the General group on the properties panel.

Adobe Captivate: Validate Entry option

But what if you want to ensure that learners put something in the box, not a specific value? While there is no setting in Captivate to ensure that a TEB isn't left blank, using a little variable and some advanced action magic can make it happen.

Create User Variables

Choose Project > Variables and create a new variable. Do not fill in the default value. (I named my variable empty.

Note: This would be a great variable to put in all your templates!
Create another variable to store the TEB data. (I named mine UserData.)
Attach the UserData variable to the TEB (using the General group on the TEB's Properties panel).
Create a Text Caption on your slide that tells the user they need to fill in the data. Name the caption error and deselect the Visible in output option.

Create a Conditional Advanced Action

This advanced action will compare the UserData to the empty variable. If the UserData is empty, show the error message and jump back to the beginning of the slide to allow for another try. If the UserData is not empty, Go to Next Slide.

(Note: To make this action generic so it will work with any slide, do not hard code the slide it needs to jump to. Instead, determine which slide you are on and jump to it as needed. You will do this using an additional user variable named thisSlide, and two system variables, cpInfoCurrentSlide and cpCmndGotoSlide.)

Adobe Captivate: Advanced Action

Adobe Captivate: Advanced Action 2

The last step is to assign the advanced action to Execute when the learner clicks the Submit button. You can do this via the Properties of the selected TEB (on the Action group).

Adobe Captivate: Execute the Advanced Action

And there you have it. No more tearing your hair out trying to force a learner to enter information into a TEB instead of just skipping over it.

Got other Captivate challenges? Send them to me and maybe you'll see your problem solved in a future article.

***

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.

March 18, 2014

“Adobe RoboHelp HTML 11: The Essentials” Workbook Now Available on the Kindle

I'm pleased to report that my newest book, "Adobe RoboHelp HTML 11: The Essentials" has gone to the printer. While the hard copy version of the book won't be available for a week or so, the Kindle version is available now from Amazon.com.

During the activities presented in this workbook, you will create RoboHelp projects from scratch and add such best-in-class features as TOCs, Indexes, Glossaries, images, links, DHTML effects, eLearning videos and much more. You'll also learn how to use the hot new Responsive HTML5 output to create content for any device, anywhere.

More information.

March 18, 2014

eLearning: Playbar or No Playbar? Let the Debate Begin

by Kevin Siegel

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.

***

March 12, 2014

Adobe FrameMaker 12: Single Source to Responsive HTML5 and ePub

by Kevin Siegel

Adobe's new FrameMaker 12 allows you to quickly generate Responsive HTML5 and ePubs. If these features sound familiar, they should… you'll find both in Adobe RoboHelp 11. Now that FrameMaker has these output options,you can take content that was traditionally confined to print or PDF, and deliver it to users over the web.

Your customers can use Responsive HTML5 or ePub content via desktop computers, mobile devices… just about anything. And you don't have to take the variety of screen sizes users might use into account. If the user is viewing your content on a desktop, they will automatically see an appropriate arrangement of the screen components; if they view your content on an iPhone or Android phone, they will see the components resized and rearranged in a layout to best suit the smaller display size.

Generate Responsive HTML5

Create or open a single FrameMaker document or a book file.
Choose File > Publish to open the Publish pod.
On the Publish pod, right-click Responsive HTML5 and choose Edit Settings to open the Publish Settings dialog box.
Click the Gallery button to open the New Screen Layout dialog box.
Select a Theme and click the OK button. (You will be presented with a series of options that allow you to quickly customize many components that make up the original design. What I really like about this area is that the Adobe engineers have labelled everything so you know what each area controls.)
When you're finished customizing the Theme, click theSave button to return to the Publish Settings dialog box.
Click the Save and Close button to close the Publish Settings dialog box.
To generate the layout, return to the Publish pod, right-click Responsive HTML5 and choose Generate.

In the first image below, you can see the chapter structure in my FrameMaker book file. In the second image, you can see how that structure appears in my web browser thanks to Responsive HTML5.

Generate an ePub

On the Publish pod, right-click ePub and choose Edit Settings.
On the Meta Information tab, fill in the information as necessary.
Click the Save and Close button.
To generate the Pub, return to the Publish pod, right-click ePub, and choose Generate.

In the image below, you can see how my FrameMaker book looks when viewed with an ePub reader (I'm using Adobe's free Digital Editions).

All in all, this is some pretty awesome stuff. Keep in mind that you will only need Adobe FrameMaker 12 to generate these layouts. I mentioned at the outset that Responsive HTML5 and ePub layouts were once the domain of Adobe RoboHelp. However, with FrameMaker 12, you don't need RoboHelp or any of the other tools that make up the Adobe Technical Communication Suite. Once you've created the FrameMaker content, you can output content for any audience, no matter the end-user device used to view your content.

If you would like to see a demonstration of the FrameMaker single sourcing workflow, click here to see a video I created on the IconLogic YouTube channel.

***

Looking for training on Adobe FrameMaker? We offer multiple live, online FrameMaker classes each month. We can also bring the same great training onsite to your facility. Interested? Contact us for details.

March 4, 2014

Adobe FrameMaker and Captivate: Merging Multimedia With Print PDFs

by Kevin Siegel

There's no trick to creating a PDF these days. Simply open a document and, if you've got Adobe Acrobat on your computer, choose Adobe PDF when you print.

Creating a PDF that will engage your reader is another story. One way to engage the reader, besides stellar content, is to add images. Of course, there's no trick to adding images either… and everyone's doing it.

If you really want to make a splash when it comes to PDFs, you've got to engage the reader like never before… and interactive eLearning is the way to go.

In the image below, I've created a FrameMaker document. You can see there's nothing particularly special about the text (beyond the promise of an Adobe Captivate simulation).

After clicking where I wanted the simulation to appear, I chose File > Import > File and opened a SWF I had published earlier using Adobe Captivate. Just like when importing a graphic, I was met with the Imported Graphic Scaling dialog box. I selected 150 dpi to make the imported Captivate simulation a bit smaller in my FrameMaker document.

After clicking the Set button, the Captivate simulation appeared in my FrameMaker document as a large box.

I wanted the simulation positioned below the text, and I didn't want it to be cropped. I right-clicked the frame and selected Anchored Frame.

I changed the Anchoring Position to Below Current Line, changed the Alignment to Right, and removed the check mark from Cropped. Then I clicked Edit Frame.

And that was all there was to it. I created a PDF by choosing File > Save as PDF. Upon opening the PDF, the simulation appeared immediately after being clicked. And I was delighted to see that the simulation remained as interactive from within the PDF as it was when accessed via a web server.

Even better, when I found an error in the Captivate simulation, I was able to return to the FrameMaker document, right-click the imported SWF, and chose Edit With Adobe Captivate.

The source Captivate project opened pretty quickly in Adobe Captivate. I fixed the error and exited Captivate, at which point the project was republished and the SWF contained in FrameMaker automatically updated.

After re-saving as a PDF and opening the PDF with Adobe Reader, I was pleasantly surprised to see that the Captivate simulation had been updated.

If you would like to see a demonstration of the Captivate-to-FrameMaker-to-PDF workflow, click here to see a video I created on the IconLogic YouTube channel.

***

Looking for training on Adobe Captivate? We offer multiple live, online Adobe Captivate classes each month including Introduction to Adobe Captivate and Advanced Adobe Captivate. Need the training in-person? We can also bring the same great training onsite to your facility. Interested? Contact us for details.

February 25, 2014

Adobe Captivate: There’s a Widget for That

by Kevin Siegel

You've probably heard the phrase "There's an app for that." It basically means that if you want to extend the functionality of your mobile device, you should visit the device's App store and Search. Chances are you'll find an application, often free, that will do whatever it is you need.

Captivate is an awesome eLearning development tool, and it's loaded with functionality. However, Adobe simply cannot anticipate every scenario, every use-case you'll find for the program. And that's where widgets come in.

Widgets extend Captivate's functionality beyond bounds. Looking for an email icon? There's a widget for that. Need an animated button? There's a widget for that. How about a Print button? Volume controls? Slide numbers? Widget, widget, and more widgets.

While widgets are used in Captivate projects to improve the eLearning content, the widgets themselves aren't created by Adobe Captivate. In fact, widgets can only be created by developers using Adobe Flash. To use a widget, you do not need to know a thing about Adobe Flash, nor do you need Flash installed on your computer. In fact, Captivate ships with several free widgets. To insert a widget, choose Window > Widget.

Adobe Captivate: Widget Panel

Select the widget you would like to use and click the Insert link. Once inserted, you can configure the widget using the Widget Properties dialog box.

Adobe Captivate: Widget Properties

While simple to use, you won't get very far with widgets if the pesky Widgets panel mentioned above is missing its widgets (something I've see more than a few times when I teach my Advanced Captivate class).

If the Widget panel is missing some (or all) of the free widgets that come with Captivate, click the Change Path tool at the bottom of the Widget panel.

Change Path command

Navigate to the location of the Widgets that were installed along with the Captivate software (typically this is <Adobe Captivate program folder>\Gallery\Widgets).

If your widgets are still not appearing on the Widgets panel, try clicking the Refresh tool at the bottom of the Widgets panel.

Refresh command

If you are looking for additional widgets beyond what you'll find on the Widget panel, check out the Adobe Captivate Widgets page. You will also find some useful widgets on Rod Ward's Infosemantics website.

***

February 20, 2014

Adobe Captivate: Partial Question Slide Scores

by Kevin Siegel

One of the problems with a multiple choice question you've added to a Captivate quiz is the all or nothing aspect of the question. It is possible to setup some questions that allow for multiple correct answers. It would be nice if you could award partial credit should the learner select some, but not all, of the correct answers.

Say hello to the Partial Score feature available in Adobe Captivate 6 and 7.

In the two images below, I have inserted a Multiple Choice question into my project. From the General group of the Quiz Properties panel, I set the number of Answers to 4.

Adobe Captivate 6: Number of answers set to 4.

Adobe Captivate 6: Multiple choice question

From the General group of the Quiz Properties panel, I next selected Multiple Answers. Then, on the slide, I selected two of the answers as correct answers.

Adobe Captivate 6: Multiple answers option

Adobe Captivate 6: Multiple answers selected

To allow a learner to get partial credit, I accessed the General group on the Quiz Properties panel and then selected Partial Score.

The final step in allowing for partial scores is the trickiest. You need to determine how many points each correct answer is worth. Having selected Partial Score on the Quiz Properties panel, one would assume that an option would magically appear near Partial Score that would allow for specific scores to be assigned to each answer. That's not how it works at all. First, you need to select one of the correct answers. Then, on the Properties panel (not the Quiz Properties panel), expand the Advanced Answer Option group. Then you need to assign a point value to the selected answer.

Adobe Captivate 6: Advanced Answer Option

You would repeat this step for each correct answer (the total points assigned to each answer cannot be greater than the point value assigned to the question).

In the question slide that I used for this example, the question was worth 10 points. I assigned 5 points to each correct answer. If a learner selected one of the two correct answers, they would be awarded 5 points out of the possible 10.

***

February 12, 2014

Adobe Captivate: Confirmation Messages

by Kevin Siegel

Adobe Captivate likes to confirm your actions… a lot. Attempting to delete a slide object? Captivate will prompt you to confirm the action. Deleting audio? Confirm it. Removing something from the Timeline? Confirm it.

Confirm it! Confirm it!!

I can confirm that the frequent confirmation requests can make me a little nuts. In the image below, I'm attempting to delete an unwanted slide from my Filmstrip. And… confirm… confirm.

While it's simple enough to click the silly OK button to confirm an action, I'd had enough, selected Don't ask me this again and then clicked the OK button.

From that point forward, I wasn't prompted to confirm my action whenever I deleted a slide. Awesome!

At some point I dropped a pen on my keyboard. The pen hit the [delete] key. I didn't think anything of it until a few days later when I realized a slide had been deleted from the project. What? I hadn't deleted it… I swear. But then I remembered the dropped pen. Since I told Captivate not to bother me, Captivate hadn't. The slide was good and gone… awesome! If only Captivate argued with me when I disabled that not-so-annoying confirmation message. Oh to be annoyed!

While I'm not a fan of the Confirmation Messages, I think you'll agree that turning them off can be a mistake. If you've already disabled them (via the Don't ask me this again check box), here is how you get all of the Confirmation Messages back.

Display Captivate's Preferences (Edit menu if you're using Windows; Adobe Captivate menu if you're using a Mac). From the General Settings category, click the Confirmation Messages button.

The Confirmation Messages dialog box opens. Anything without a check mark has been deactivated. All you need to do is select the confirmation message you want back and click the OK button.

If you would like to see a video demonstration of restoring Captivate's confirmation messages, check out the video I created on the IconLogic YouTube channel.

Note: You can reset all of the confirmation messages at once (and reset all of Captivate's Preferences in the bargain), you can use the Reset Preferences utility that I've written about previously.

***