The Logical Blog by IconLogic

eLearning: Creating Flat Design Images from PowerPoint's Clip Art

by AJ Walther  

 

Want to design something that looks fresh and modern? You may want to consider Flat Design. Flat design is an aesthetic that rids the design of any three dimensional attributes. Generally, drop shadows, gradients, outlines, and textures are avoided. When gradients are used, they subtly fade from one color to a slightly different hue of the same color. It is common to see a heavy reliance on icons and banners with close attention to the color palette and font choice.

Many of us are working with shoestring budgets while creating eLearning. This means we are often relegated to the world of free clip art for our eLearning images. Here are a few examples of how clip art images can be reimagined into flat design. For these examples I just used shapes without lines, gradients, or shadows to create new, flat images resembling the original clip art images.

  

The great thing about flat design is that with careful attention to detail, most anyone can produce their own form of attractive flat design. All of the redesigned clip art images above took very little time, effort, and PowerPoint technical expertise. But, want to know a secret? You could even take an existing clip art image and bend it into your own flat design creation without building anything from scratch. Let's look at an example.

1. Find a clip art image that you like, but that could use a bit of help.
     
2. With the image selected, press [ctrl] [shift] [g] on your keyboard twice to ungroup the image.
   
   Note: The first time you ungroup, you will be asked if you would like to convert the image to a drawing object. Click yes and then ungroup again.
   
    
3. Select and delete unwanted elements. Here, I deleted each of the black lines.
     
4. Working one shape at a time, right-click and select Edit Points to smooth each shape by editing its points. When possible, I like to get rid of as many points as possible and to set the majority of the remaining points as Smooth Points. For this particular image, I also adjusted the point of the tack to be pointier and extended the "metal" part so that the green section overlapped it.
   
      
   
   Note: New to editing points? Check out this quick tip here.
   
    
5. Apply your color scheme to the image by selecting each shape individually, right-clicking, and choosing Format Shape.
     
6. If you're going for more of a Jony Ive look (a la iPhone's OS), you can take this a bit further by adding a subtle gradient to the shapes.
     
7. Integrate the image into your design.
     

Need some more flat design inspiration? Check out the Flat UI Design site. 

Writing & Grammar: Responses to the Interruptions Challenge

by Jennie Ruby 

 

The answers that follow the guidelines set forth in my article from a few weeks ago are brought to you by Geri Moran.

1. It is very tedious, in my opinion, to type on a flat screen.
2. The blog--even after the extensive upgrade we purchased last quarter--was still slow to load on mobile devices.
3. The most widely accessible option, according to the magazine, is still the print version.
4. The company that provides the fastest downloads is still XYZ.
5. Norman, who arrived at the classroom before the computers were turned on, noticed the change in temperature right away.
6. A more extended listing (see Appendix B) has been compiled by XYZ Press.

Note that the representation of the long dash--the em dash--as two hyphens or as "space hyphen space" are only acceptable when the software you are using does not support the standard long dash character.

Other respondents had varying opinions on whether the interruptions should be marked with parentheses rather than commas. Here are some additional thoughts on that:

On number 3, the words "according to the magazine" are an independent comment on the entire sentence, and they indicate that the magazine is the source of the entire statement. You are not necessarily saying that you agree with the magazine's opinion. If you put those words inside parentheses, then you are making the assertion yourself, and merely citing the magazine as a supporting source.

On number 2, it is difficult for me to see how the information about an upgrade could be seen as totally parenthetical and placed in parentheses. It is not merely reference or support material. I think the person who wrote the sentence is expressing outrage, or at least disappointment, that the blog is still slow. The interruption carries a good bit of the point of the sentences, and thus needs emphasis, rather than de-emphasis.

To those readers still waiting for more on the who/whom issue, here is an update. Many respondents treated the exercise as a standard challenge rather than giving an opinion. Some said it is not an opinion, but a matter of following a well-established grammar rule. Others agree with me, that this rule is so often broken in spoken English, that following it in written English can result in awkward constructions. Once I untangle all the opinions and calibrate the right/wrong answers, I'll give a full report. In the mean time, more data is needed.

Here is the who/whom challenge again. Please answer each one, this time, by indicating the way you most often say it or hear it said, rather than the way you calculate is the right answer by analyzing whether the usage is nominative or objective (subject or verb). What I am trying to get at is whether actual everyday usage follows any logic. Give a try to punctuating the interruptions in the sentences below. Feel free to post your answers as comments below.

Who are you giving the scholarship to, after all?

1. Who is that young man in the cap and gown?
2. Who spilled the grape punch on the white carpet?
3. Who are we celebrating here--him or his parents?
4. Who do you think we should elect as the class president?
5. Who did the instructor select as the first to play a recital piece?
6. Who do we want for our soloist at the concert?
7. Who should they give the award to?
8. Who is the party for, anyway?
9. Who's your favorite nephew?

***

If you love Jennie's grammar articles, you'll love her classes. Check out some of Jennie's mini courses.

Technical Communications: Online Versus Paper

by Tony Self  

What is more effective, a print document or an online document? It wasn't all that long ago that print documents would definitely have been voted more effective, especially considering the poor quality of computer monitors and slow internet speeds. (Remember trying to pull up a document on a modem?)

Given the speed of today's internet and mobile device support, print documents are likely going the way of the dinosaur. Online documents have several advantages to their print counterparts. For instance, eBooks reflow to fit the user's device (think about how popular eBook readers such as the Amazon Kindle have become in just the past few years). Online documents are searchable, typically contain hyperlinks for easy navigation, often include videos and/or animations, and some even contain interactivity in the form of eLearning simulations created in Adobe Captivate or Articulate Storyline.

There are millions upon millions of print documents around the business world that would gain new life if they were online. The major challenge in moving from unstructured to structured documentation, or page layout to reflowing text, or paper to online, is the shift in mindset required. Simply put, many old design paradigms used for print documents don't fit in new media design.

There are many reasons for converting paper documents to online documents such as cost, efficiency of updating, document control, accessibility, and discoverability. Surprisingly, for the custodians of paper documents charged with managing the conversion, there is often a reluctance to embrace the migration from print to online. For those custodians, the paper version remains the primary document, and the online version is secondary. 

Even if the paper custodians agree to take the paper documents online, much time and effort is spent trying to imitate the paper design in the online design. For example, the paper documents are scanned and converted to PDF. While aPDF will work in an online world, a PDF is really just a digital replica of the paper document. While a PDF may open on a tablet or smartphone, it won't re-flow to fit the user's screen like an eBook.

If you're trying to convince the "powers that be" to make the move from print documentation to an online document, consider the following:

The text used in the print document may require a specific font and font size. When online content is displayed for the user, the user's device may have limited font capabilities. Even if the device is capable of displaying the font, if the user doesn't have that specific font installed on the device, the font displayed will be the browser's default. For instance, you have used Futura as the font for your content. If the user accesses your content via a web browser and does not have the Futura font on their computer, the browser will likely display Times New Roman instead.

Paragraphs may need to be indented by a specific amount. While setting up a specific indentation is easy in a print layout tool such as Adobe InDesign, the user's device may have limits to how indentations are displayed.

Headings may have to be sequentially numbered. While many print layout tools allow you to easily number paragraphs, those automatic numbers may not display properly online.

You may be required to include footnotes. While footnotes are easy to add to print documents, they're a problem online. Since there really isn't an end to a page online, where would the footnotes go?

Page numbers may no longer be valid. If your print document includes cross references (such as, "For more information, see page 11"), you could end up with a mess. If your print content is displayed as an eBook, the content that was on page 11 could now be located on page 22. If the text on the page tells the user to reference page 11, but the text is actually on page 22, you can imagine the trouble you'll have.

The graphics could be huge. In the print document, high resolution photos were used. They look great on paper. However, they're so big (in megabytes, not width or height), they'll take forever to download over the Internet if you leave them as-is. To use the images, you'll need to allow time to save the images as online versions (in jpeg or png format). When you do, the images will likely lose quality. Will they still look good?

If you do decide to migrate your print documents to the online world, off-the-shelf authoring tools such as Adobe RoboHelp and MadCap Flare will help make the process easy. Both tools allow you to quickly convert printed documentation (especially Word documents) into online documents. Both tools support cascading style sheets that handle fonts, colors, paragraph numbering, and indentation. And both tools allow you to create master pages complete with headers and footers. Nevertheless, there are limits to what any authoring tool can do when it comes to recreating the look and feel of a print document, so look into the limitations of each tool prior to moving forward. 

What's your take on print documents as compared to online documents? Is print doomed? Which medium do you think is more effective, print or online? What tool do you use to convert from print to online? Can you share instances/examples where you think print documents are more effective than online documents? Feel free to post your opinion as comments below.

Adobe Captivate 8: Geolocation

by Kevin Siegel   

You can create an eLearning lesson that changes dependent upon where your learners are physically located. For instance, you can create a Captivate project for learners who live in the United States or Australia. While much of the course content is relevant to both Americans and Australians, thanks to Captivate's geolocation feature, learners in both countries will see unique, location-specific, information while taking the same course.

The first step to adding geolocation features to a project is creating the project as you normally would. In the example that follows, I've created a project for learners in Asia and the United States. (I created the project as a branching scenario... the first half of the project was for learners in the United States, the second half was for learners in Asia.)

 

Once you've created the project for both audiences, adding the geolocation features is very easy. First, choose Window > Mobile Palette to open the Mobile Palette dialog box.

 

 

 

Select Geolocation and then click the OK button.

 

Next, you'll need the Latitude and Longitude of the locations you'll use in your project. As I mentioned above, my two locations are Asia and the US. While determining Latitude and Longitude might sound difficult, I simply asked Google the following: "what is the lat and long for the united states?" The answer, rounded to whole numbers, was 38 and 77. 

 

 

I repeated the same question for Asia (and ended up with aLatitude and Longitude of 48 and 86).

 

Now that you've got the Latitudes and Longitudes figured out, you'll need to create one variable for each location (via Project > Variables). When creating each variable, select Geolocation and you'll have access to a Lat, Long, and Accfields. The Acc value is based on how close you want the learner to be to the latitude and longitude location; it is based on meters. Think about the meters surrounding the area like a large circle. When building your course, consider starting with 1,000,000 meters, which will allow anyone within range to still be able to access the course.

 

 

The final step (besides publishing) is to create an Advanced Action (via Project > Advanced Action) and attach it to a Filmstrip slide.

 

Set the Action Type to Conditional actions and name the action GeoLocation.

 

 

 

Double-click the first column under the IF Statement, click the word variable, and select cpInfoGeoLocation.

 

 

 

 

Note: The CpInfoGeoLocation variable ships with Adobe Captivate 8.

 

To the right of "is equal to," click the word variable  from the drop-down, choose one of your location variables you created earlier.

 

Under Actions, double-click in the first column and chooseJump to Slide. From the next menu, select the slide in your project where you want your learner to end up.  I selected the Asian branch in my project (I called it Asia Scenario). 

 

 

 

At the bottom of the dialog box, click Else. Under Actions, double-click the first column and choose Jump to Slide. In the next column, choose your other location (in my case, it was the other branch I called US Scenario). Save the action (as an Action) and then close the dialog box.

 

 

Attach the GeoLocation Advanced Action to the first slide by selecting the slide on the Filmstrip. On the Properties Inspector, select the Actions tab. From the On Enter drop-down menu, choose Execute Advanced Actions and select the GeoLocation action as the Script.

 

 

 

Publish your lesson and post it to your web server or LMS like you would we any Captivate eLearning lesson. When users in Asia access the lesson, the GeoLocation script will automatically display the Asian content (and vice versa for US-based learners). In a word, that's awesome!

***

Looking for instructor-led training on Adobe Captivate? Check out our live, online, instructor-led Captivate classes.

Adobe Captivate 8: Changing the Size of Responsive Layouts

by Kevin Siegel   

As far as I'm concerned, the hottest new feature you'll find in Adobe Captivate 8 is the ability to create responsive eLearning. As I taught you a few weeks ago, by choosing File > New > Responsive Project, you can basically create and work on multiple screen sizes (called break points) in one project. When you publish the responsive project, the learner will automatically be served the break point appropriate for the device they're using.

 

If you've spent any time creating Responsive Projects, you've probably noticed that there are three breakpoints in the project by default: Primary (set to a width of 1024 pixels), Tablet (set to a width of 768 pixels), and Mobile (set to a width of 360 pixels). The default breakpoints are based on typical sizes of a laptop (Primary), iPad (Tablet), and iPhone (Mobile). However, you can easily adjust the size of the breakpoints. 

 

To begin, open the CloudAir_SoftSkills Sample.cptx sample project that ships with Captivate 8. (On the right side of the Captivate 8 Welcome screen, click the Sample Projects/Tutorials icon.)

 

 

 

The project is responsive. Notice the colored ribbon at the top of the canvas; this is a breakpoint within Captivate (a breakpoint is the point at which the layout changes size to accommodate a different screen size).

 

 

To change the width of a layout, select one of the three breakpoints and drag either slide to change the width.

 

 

See, I told you it was easy. Now for the height. 

 

The option to adjust a layout's height is disabled by default so that you don't accidentally change it. Each layout's default height provides space for Captivate's playbar. If you are not going to use a playbar in the published lesson, you should adjust the height accordingly.

 

To begin, it's a good idea to change your magnification to 75% (View > Magnification). If you are too close to the canvas, you will not be able to see the new height you are about to set. I've found that 75% is almost always the perfect magnification for me, but you may need to fiddle around a bit to find the prefect magnification for your display.

 

In the upper right of the canvas, select View Device Height. 

 

 

 

From the bottom of the canvas, drag the Height Adjuster (the yellow rectangle in the image below) up or down to change the device Height.

 

 

Note: The shortest you can make any device is 100 pixels; the tallest you can make any device is 1,000 pixels.

***

Looking for instructor-led training on Adobe Captivate? Check out our live, online, instructor-led Captivate classes.

Writing & Grammar: Pardon the Interruption

by Jennie Ruby 

 

You can interrupt a sentence four different ways--with dashes, parentheses, commas, or no punctuation at all.

Dashes actually emphasize the interruption, like this:

One of the best things about the previous two versions--the versions before the company was taken over by XYX, Inc.--was the user interface.

Parentheses de-emphasize the interruption:

The correspondence between the codes (see Table 2) is nearly one-to-one.

Commas indicate an interruption that is not essential to the meaning of the sentence:

 The new interface, we all agree, is much easier to use.

Interruptions with no punctuation are essential to the meaning of the sentence:

The function that has been changed the most is the video editor.

Challenge

Give a try to punctuating the interruptions in the sentences below.  When ready, post your answers as comments.

1. It is very tedious in my opinion to type on a flat screen.
2. The blog even after the extensive upgrade we purchased last quarter was still slow to load on mobile devices.
3. The most widely accessible option according to the magazine is still the print version.
4. The company that provides the fastest downloads is still XYZ.
5. Norman who arrived at the classroom before the computers were turned on noticed the change in temperature right away.
6. A more extended listing (see Appendix B) has been compiled by XYZ Press.

***

If you love Jennie's grammar articles, you'll love her classes. Check out some of Jennie's mini courses.

Adobe Captivate: Removing Popups from Video Demos

by Kevin Siegel   

I'm continuing to enjoy developing eLearning using the new Adobe Captivate 8. And the more I use this updated version, the more I find subtle improvements and new features. Take video demos for instance. I use the video demo recording mode frequently (it's the mode I use for the videos I upload to YouTube).

While recording a recent video, I noticed a new tab on the Video Effects Inspector: Popup.

It just so happened that I had recorded a video and had inadvertently captured a yellow tooltip (shown in the image below). I figured this would be the perfect opportunity to test the Cleanup button on the Popup tab.

On the Timeline, I positioned the playhead at the part of the video where the popup first appeared.

On the Video Effects Inspector, I selected the Popup tab
and clicked the Cleanup button.

On the slide, I drew a rectangle around the popup.

 

 

Note: When you try this at home, don't worry if your rectangle doesn't completely cover the popup. If your rectangle is too large or small at first, you can resize it using the resizing handles at any time. You can also drag the rectangle via its borders to move it to a different location on the video.

 

Once I drew the popup area on the video, a Popup object was added to the Timeline. I stretched the right edge of the Popup object to the amount of time I wanted it to remain onscreen on the slide; then I clicked the word Cleanup on the video.

 

 

  

And just like that, the area within the popup rectangle I drew was removed from the video.

 

 

***

Looking for instructor-led training on Adobe Captivate? Check out our live, online, instructor-led Captivate classes.

eLearning: Voiceover Audio That Will Keep the Learner's Attention

by Jennie Ruby 

How can you use your voiceover script to keep the learner's attention within an eLearning lesson? Here are the two most important factors: Make it proportional and make it conversational.

Make the Voiceover Proportional to the Action

In a recent informal test at a conference for instructional designers, the audience started waving and yelling "Stop! Stop!" after less than two sentences of voiceover text was read for one PowerPoint slide. Now granted, that second sentence was a doozy, weighing in at more than 47 words, but still. Two sentences? How short is our typical learner's attention span these days, after all? Probably much shorter than you think. 

The learners we address with our eLearning projects are bombarded with information, often in the form of movies, videos, and television. Scenes change in modern movies approximately every minute and a half. But in a movie, even during that short time, something is continually moving on the screen.

On many kinds of eLearning products, there may be nothing moving at all, as a still slide rests on the screen or a still screenshot sits waiting for the next interaction. So with absolutely no motion on screen, how long can the audio drone on?

At the conference, the elapsed time was less than 12 seconds before the audience became impatient.

To some extent, the type of lesson will determine how much voiceover is proportional to each action. On a software demo video, a lack of action for as little as 7 seconds can have the learner shaking the mouse to see if the video is still running-even if the audio voiceover is continuing. During compliance training, on the other hand, the learner may expect relatively longer voiceover descriptions and recitations of rules.

But that doesn't mean learners will like it. Consider aiming to have something move on the screen, illustrate the point, or change in some way about every two sentences. You can achieve the right proportions by either adding visual elements or shortening the voiceover script.

Use Plain Language and a Conversational Writing Style

The writing style of your voiceover text will greatly affect how "listenable" it is. Long, academic-sounding, repetitive sentences will have your learner eager to move on quicker than short, plain-language sentences.

Test yourself: try reading each of the following paragraphs. Which one makes you want to stop reading sooner?

Example A: The capability for the creation of user-defined functions has been instituted with the current version. This capability is not entirely new but was previously available via pass-through to and from a custom module, which is a function of most programming languages. However, these modules did not allow this functionality to be embedded directly within another function, and this inherent limitation was a source of frustration to users.

Example B. In previous versions of the program, you could create a custom function, but only within an entire custom module. Now, you can embed your own custom functions directly inside another function. This means there are now countless ways you can use custom functions within your own applications.

With little change in the technical terminology and content, Example B will seem easier to focus on for most learners. The best writing style for a voiceover uses shorter sentences, addresses the learner directly, uses plain language when possible, and uses active rather than passive voice.

Instead of "The capability for the creation of user-defined functions has been instituted..."

Try this: "Now, you can create your own user-defined functions."

Instead of "This was previously available via pass-through..."

Try this: "Before, you had to pass your custom functions through a..."

Instead of "These modules did not allow this functionality"

Try this: "You can now do x"

Remember that the voiceover for a lesson is written for a voice. Make that voice conversational rather than academic in style. Make it proportional to the amount of action on screen and you'll keep your learners clicking painlessly through the lesson while remaining focused.

***

If you love Jennie's grammar articles, you'll love her classes. Check out some of Jennie's mini courses.

Adobe Captivate: Record Simulations Using Smart Shapes Instead of Text Captions

by Kevin Siegel   

 

Text Captions have been available in Adobe Captivate since before Captivate was Captivate (think RoboDemo). While there's nothing terribly wrong with Text Captions, you're a bit limited when it comes to editing the way they look.

Take the Text Caption shown below for example. The arrow in the upper left of the caption is known as a callout.

  

You can control a few attributes of the callout (you can use the Properties Inspector to select from a list of pre-determined positions and you can elect not to show the callout). But if you want to fully adjust the callout (perhaps move it a bit to the left or right, or make the callout a bit longer), you're out of luck.

Many Captivate developers, tired of the limitations of standard Text Captions, have forsaken Text Captions altogether for Smart Shapes. In the image below, I'm using a Rectangle Smart Shape. The shape looks much like a Standard Text Caption. I can control its appearance via Object Styles. However, check out how I am able to drag the shape's callout by dragging the yellow square. You can't do that with a Text Caption.

Because Text Captions are really bitmap images, I'm not able to fully control how the captions look unless I edit the bitmaps using an image editing program. With Smart Shapes, you can control just about every aspect of the way the shape looks by combining options found on the Properties Inspector with Object Styles.

While there is much to love about Smart Shapes, a perceived downside to Smart Shapes is that you can't use them to automatically get captions when recording a Software Simulation. You'll be happy to learn that you can, in fact, use Smart Shapes instead of Text Captions during the recording process.

Display Captivate's Preferences (Windows users, choose Edit > Preferences; Mac users, choose Adobe Captivate > Preferences). Choose a recording mode and, from the Captions area, select Use Smart Shapes instead of Captions.

 

At that point, you'll be able to select the Smart Shape Type you'd like to use during the recording process.

 

 

Click the OK button to close the Preferences dialog box and you're done. The next time you record a Software Simulation, the project will automatically contain Smart Shapes instead of Text Captions.

***

Looking for instructor-led training on Adobe Captivate? Check out our live, online, instructor-led Captivate classes.