TechComm – Page 9 – 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 30, 2014

Writing & Grammar: Where Does the Apostrophe Go?

by Jennie Ruby

Perhaps you have seen a grocery store sign saying "Orange's." Or maybe you have chortled over some poor soul who spelled "mens' room" with the apostrophe on the wrong side, because men is plural, right? Let's see how many of us can put the apostrophes to rights. (You can post your answers as comments below.)

The black and tan puppy ran right into the childrens' room.
All three puppie's noses were white from the milk in the cereal bowl.
The kid's faces brightened as soon as they saw the puppies.
The cat guarded the kitten's from the rambunctious dogs.
The biggest dogs paw's were up on the table.
The children pulled the puppies and the momma dogs ears.
There was little doubt about the puppies affection.

Here are the answers for the challenge on punctuation with the word however. They are brought to you by Rita Martino. Special thanks to Michelle Duran for drawing my attention to the fact that meltwater should be all one word, rather than two separate words–even though Microsoft Word is red-underlining it right now. Webster's says it is one word, and that is good enough for me.

The tiny bird explored every crevice of the log; however, it did not seem to find any food.
Snow covered the ground within the woods; the road, however, was clear.
Beside the road, pools of meltwater had formed; however, the road was completely dry.
The bird flew down from a branch to forage in the clear space beside the road; the passing traffic, however,frightened it back.
The bird returned to the roadside, however, hoping to find a seed.
What it found when it returned, however, was something unexpected.
The roadside was sprinkled with breadcrumbs, and however you look at it, that bird's luck had finally turned.

Other winners are Kolja Fuchs, David Zimmerle, Karyn Highet, Anne Goldenberger, Chris Zimmel, Jiang Ping Fan, Ginny Supranowitz, and Sonia Verma.

The example where many lost out was number 7: the clause "however you look at it" is not parenthetical, and therefore should not be surrounded on both sides by commas. Instead, it is introductory to the second sentence. So no comma before however.

March 27, 2014

Localization: Training & Development in Costa Rica

by Jen Weaver

Take a few minutes over this morning's café con leche to learn about the beautiful country of Costa Rica. Let's explore some common cultural facts about Costa Ricans and their expectations when it comes to training and development.

Pop Quiz (no Googling the answer):

True or False? Costa Rica means "Rich Coast."
True or False? Costa Rica is the wealthiest country in Central America.

Quick Tips for Training & Development in Costa Rica¹:

Costa Ricans often refer to themselves as Ticos, a name based on their tendency to add tico to the end of words to imply fondness.
English is commonly spoken in business settings, but translating materials into Spanish is still the preference. Spanish is the official language, but a small percentage of people also speak Caribbean Creole English and a handful of local dialects.
As is common in many Latin American cultures, Costa Ricans interpret facts through feelings and may use their faith (86% are Catholic) as the foundation of truth.
More than citizens of many other countries, Costa Ricans believe in the value and equality of all people and emphasize the dignity of work independent of social class.
Many Costa Ricans exhibit a strong sense of group responsibility and favoritism toward family and close relationships.
Sociologists describe Costa Ricans as being high in uncertainty avoidance. They rely on strict rules to limit risk and avoid change and conflict when possible. To keep from losing face, Ticos may provide indirect answers rather than offer a less-than-preferable response.
Decisions are made by group consensus, so be sure to allow additional time for these discussions and deliberations.
Timelines and deadlines are seen as suggestions rather than hard dates, causing late payments to be a common occurrence. Be tolerant of and anticipate delays.

Pop Quiz Answers:

True.
False. Panama is the wealthiest nation in Central America.

References:

¹Morrison, Terri, & Conaway, Wayne A. (2006). Kiss, bow, or shake hands (2nd ed.). Avon: Adams Media.

***

Developing international training and development materials? Contact Jen at Carmazzi Global Solutions.

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 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 14, 2014

PowerPoint: Create Tables with Rounded Edges

by AJ Walther

You've created a PowerPoint slide with a table showing quarterly service subscriptions for your three regional divisions.

Microsoft PowerPoint: Slide with a standard table

You feel good about it, but when you show the higher ups they say, "That's great pal, but we want to take the company look in a more rounded direction. Go ahead and round out those corners." You of course say "No problem!" but when you get back into PowerPoint you realize that there is no option to round out the corners of a table.

There may not be a direct way to insert a table with rounded edges, but there are two easy ways to get the job done. I'll cover one method this week and the second next week.

The first option is to edit the pieces of the table.

In PowerPoint, select your table so the thick gray table border is visible.
On your keyboard, press [ctrl] [x] to cut the table to the clipboard.
From the Ribbon, choose Home > Paste > Paste Special to open the Paste Special dialog box.
From the Paste As: area, select Picture (Windows Metafile) and click the OK button.
With the pasted table selected, press [ctrl] [shift] [g] on your keyboard twice to convert the picture to a drawing object and ungroup it.
Click outside of the table to de-select all of its pieces.
On your keyboard, hold down the [shift] key as you click the shapes making up each of the four corners of the table (and then release the [shift] key).
From the ribbon, choose Drawing Tools Format > Insert Shapes > Edit Shape > Change Shape and select the Round Single Corner Rectangle. (Hovering over each shape will reveal the tooltip with the shape's name.)

The top right cell is now nice and rounded, but the other three cells' shapes are facing the wrong direction. You'll fix that next.

Microsoft PowerPoint: Cells facing the wrong way.

Click the top left cell of your table and, from the ribbon, choose Home > Drawing > Arrange > Rotate > Flip Horizontal.
Click the bottom left cell of your table and, from the ribbon, choose Home > Drawing > Arrange > Rotate > Flip Vertical and then, with the same cell still selected, choose Home > Drawing > Arrange > Rotate > Flip Horizontal.
Click the bottom right cell of your table, and from the ribbon, choose Home > Drawing > Arrange > Rotate > Flip Vertical.
Drag over all of the table's pieces, and then, on your keyboard, press [ctrl] [g] to group the table back into one piece.

The benefit of going this route is that you can easily edit the text and colors on the table. The downsides are: 1) this method is a bit time consuming and 2) if you want those corners rounded more, it will take even more time to ensure that all of the corners are rounded the same. I'll cover a second method to get the job done next week, so check back then!

UPDATE: Click here for a second method for creating tables with rounded edges in PowerPoint.

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.

February 27, 2014

PowerPoint: Free Proportional Comparison Diagram Calculation Tool

by AJ Walther

While browsing Dave Paradi's PowerPoint Blog recently, I found how easy it is to create a Proportional Comparison Diagram (allowing viewers to compare numbers using shapes that are sized proportionally).

In the example below, I'm illustrating the large number of emails sent versus the small number of sales made. Using proportionally-sized shapes is a clean and visually appealing way to get my point across.

Pair numbers with shapes that are of proportional sizes

The tricky part may be doing the math to figure out the correct proportions for each descending shape. No worries, Dave has developed a tool to do the dirty work for you. Here's how it works:

In PowerPoint, use the drawing tools to insert your shapes, format them using your desired colors and set the Line color to No Line. Don't worry about the sizes, you'll handle that next. (For my example above, I drew four rectangles.)
Navigate to the Proportional Shape Comparison Diagram Calculation Tool.
Scroll down and in the Larger Value field, type the largest value you'd like to represent. (For my example above, that would be 8,456.)
In the Small Value field, type the second largest value you'd like to represent. (For my example above, that would be 5,627.)
In PowerPoint, right-click the shape that you would like to represent your largest value and choose Format Shape > Size. Copy and paste the dimensions from the Dimensions for Overlapping Rectangles area of the Proportional Shape Comparison Diagram Calculation Tool, including the "cm." (The dimensions appear in the calculation tool in cm, but PowerPoint will automatically convert the dimensions to inches for you when you paste them.)
Repeat step 5 for the shape you would like to represent your second largest value.
Repeat steps 4 and 5 for the remainder of the shapes.
Overlap you shapes. If you find that you would like all of your shapes to be a different size, you can save time by grouping all the shapes (select all of the shapes and press [ctrl] [g] on your keyboard). Resizing the group will keep the proportions the same for all of the shapes.

Pretty cool, eh?

Note: If my color scheme for the proportional comparison diagram above looks familiar, it's because I used the same colors in my Pictaculous article. Told ya having a pre-made color scheme would come in handy!

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.

***

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.