Category Archives: Thinking about Design

Color me Storyline

If you’re an Articulate groupie, you probably know that community manager David Anderson has been posting a weekly challenge for some time now. This week’s challenge: Top 10 Things Learners Need to Know About Storyline. David suggested we target any area of Storyline development. I decided to focus on various ways to adjust colors in Storyline…and it was tough stopping at 10!

Theme Colors

1  Theme Colors…

ThemeColors

…accessed from the Design tab on the ribbon, affect the colors that are used for Storyline elements such as shapes, text, and images. You can choose a built-in theme or create custom ones, which can be edited. Themes can be applied to one slide, matching slides, or all slides. Check out this Articulate Tutorial on Working with Theme Colors.

 

Coloring Shapes from the Menu

2  Shape Styles and Shape Fill Gradients

QuickStyles

When you click on a shape, you make it active, and the Drawing Tools Format bar appears. You can change colors quickly by clicking to drop down some quick styles, as indicated above.

Another color change you can make from the menu is adding gradients, as seen in the screen shot below.

FillGradients

It’s true that flat design has become more popular recently. Still, you may, at times, want to take advantage of  gradients. Access some nuanced gradients of the current color, with light and dark variations, by clicking the Shape Fill drop-down.

 

Coloring Shapes from the Format Fill Dialog Box

3  Preset Gradient Colors and REALLY Customizing Your Own Gradients

GradientFill_formatdialogbox

For more flexibility and control, right-click a shape and, from the shortcut menu, choose Format Shape. Then, select the Gradient Fill option button, as I’ve done above. You might want to try out the Preset colors…either accepting them “as is”, or modifying them a bit.

Notice how the color in the shape below changed when I removed stops 2, 3, and 5 from the preset Wheat color gradient.

Customize_Builtin_Gradient

And, by clicking the drop-down arrow by the Color Fill icon you can open the Colors dialog box and begin playing with the slider and other options to really pinpoint the perfect color.

Gradients_Pinpoint

There’s a bit about gradients at in this Fill Formatting tutorial.

 

Coloring the Question Slides and Feedback Layers

Quiz_Customized

Question Slide customization can feel a bit confusing, since the main part of the slide is controlled by the Slide Master, and the Feedback layers for the slide are controlled by the Feedback Master. So here’s an example.

4  Customizing Colors on Slide and Feedback Masters

The Question Title and background on the question slide above are based on the Slide Master Question layout. And, the Font Colors for the Incorrect and Correct layers come from the Feedback Master Correct and Incorrect layouts.

Slide_and_Feedback_Masters

Articulate has tutorials on Slide Masters and Feedback Masters.

 

Coloring the Player – So Many Options

5  Storyline’s Built-In Color Options

Don’t stop with just coloring the slides…you can also customize the colors for the Storyline player. Check out this Articulate Tutorial for information on switching players, customizing them, and saving those customizations.

6  The Articulate Storyline Player Colors Job Aid

I like to keep job aids handy, and this Storyline Player Colors job aid, available at the community downloads page, is one I periodically reach for.

PlayerColors_JobAid

7  Free Storyline and Studio Colorizer Tool

Super Hero James Kingsely has created a really cool free tool: the Articulate Storyline and Studio ’13 Colorizer. This tool automates the process of colorizing your player to match up with, say, company or story colors.

 

Picking up Colors

8  Pixie

Pixie, by Nattyware (free), was one of the first tools I learned about after joining the Articulate Heroes Community.  I can’t even tell you how many times I’ve used this tool to pick up colors from anywhere on the screen and apply them in my design. I’ve placed it on my Start menu for quick access – noted in the screen shot by the red rectangle.

PixieStartMenu

 

9  Built-In Storyline Color Picker Tool

Storyline_ColorPicker

Let’s say I wanted to change the option buttons in this story to match the green on this duck (above). The steps would be:

  1. Click on the option button and then click on the Radio Color drop-down
  2. Select More Radio Colors
  3. Click the Color Picker tool to make it active
  4. Hover the Color Picker Tool over the green part of the duck
  5. Click when you’ve found the desired color
  6. Click OK
    Really Easy!

10 David Anderson’s Color Toner Template

Last but not ever least, David Anderson created a very excellent Color Toner template, another tool that I turn to frequently during project development. Check out this blog post, which includes a quick how-to tutorial.

DA_ColorToner

 

11…Oh, Wait!

Only 10, David, REALLY??? 😉

Requiring that Learners Enter Information During eLearning: What Do You Think?

Why Ask Learners to Enter Information

One element of eLearning design is to engage Learners, and one way to do that is to have them “lean forward” in their seats.

Young woman looking at computer screenTyping novel information, rather than clicking among a variety of choices or passively reading and viewing information, is one way to achieve this.

What Kind of Information

The kinds of information Learners are asked to enter can vary. Let’s take a look at a couple.

Demographics

Often, we welcome Learners to a course and ask them to type in their first names. Once this information has been entered it is stored by the eLearning system. This allows us to design a more personalized experience by dynamically displaying Learner names periodically throughout the course.

If Learners’ first and last names are captured, these can be used at the end of the course to produce a personalized document of completion.

Of course, there can be other kinds of demographic information that are specific to a particular course.

Reflection

Requiring that Learners reflect on information is another way to encourage engagement. The reflection could be very simple: “Which of the individuals in the previous scenario demonstrated the best marketing skills?”

Reflective questions can also be more challenging: “Why do you think Anna demonstrated the best marketing skills?”

These more challenging questions require higher level thinking skills and help to keep Learners mentally stimulated during the course. Learners are creating novel constructs to apply the information they’ve been learning. This can help them process and retain the information.

Setting up Text Entries in Articulate® Storyline

One method for enabling Learners to enter text in Articulate® Storyline is by using Text Entries. I recently created two screencasts that describe how to do this.

This video describes how to use an additional layer to pause the slide so Learners can enter their data.

This screencast explains how to pause the slide using a hidden prompt on the base layer.

What types of situations have called for Learners to enter text in your eLearning courses?

Customize Articulate® Storyline Quiz Tutorial

I promised to create a screencast to supplement the post earlier this month on creating a custom quiz in Storyline. So, here it is.

Your comments are welcome!

Articulate® Custom Quizzes – Not just for QuizMaker – Yes! Storyline!

Image of Storyline Quiz with Custom Feedback

Storyline Quiz with Custom Feedback

It has, once again, been forever since I’ve posted. I was inspired by this August 20th Word of Mouth Blog post by Mike Taylor: The Secret to Stunning Custom Quizzes: Slide View

Customizing quizzes is, of course, a great idea. Mike’s post and the linked examples encompass Articulate® Quizmaker® quizzes. They looked like they were also doable in Articulate® Storyline®, and I decided to give this one, Growth Chart, a try. And then I thought, why not share it?

So, here’s what I did. Beware, there are a LOT of steps here. I tried to capture many of them with screen shots. If you’re really interested in customizing quizzes and quiz feedback in Articulate® Storyline®, this could be for you. Otherwise, maybe not so much!

Oh, and here’s a demo: And a link to the Storyline file: Not sure how long it will be out there — but it’s there at the moment (September 4, 2013).

Create the Chart

The Chart

Image of PowerPoint hart

First, I created the chart in Microsoft® Powerpoint®. The image above shows what it looked like.

 

Import the Chart

import from new slide

Next, the chart was imported. It can be imported either into a new file, as shown in the screenshot above, by starting Storyline and then selecting Import PowerPoint from the startup screen

or –

– into an existing file while working in Storyline, as shown in the image below. This is done by 1) indicating that you want to create a new slide, 2) selecting Import, and 3) clicking PowerPoint.importnew

 

Set up the Slide

The goal is to set this up as a multiple choice quiz, where Learners will answer the question by choosing the correct month on the chart.

instructions

First, I inserted a text box at the bottom of the slide, providing instructions for the Learner, as seen above.

 

Insert and Name the Option Buttons

Slide image with option buttons

Looking at the image above, you can see what I did next.

  • I inserted option buttons over the data points on the chart. Option buttons, sometimes called radio buttons, are inserted by selecting the Insert tab, clicking the Button drop-down on the Interactive Objects groups, and choosing one of the Radio Buttons.
    These option buttons will become the multiple choice buttons.
  • It’s always a good idea to name items on the timeline. I used the names of the months that correspond to where the option buttons fall on the timeline.

 

Create Custom Feedback Master

Mike’s example had custom feedback, so I decided to do the same for my quiz.

feedback master

  • The image above illustrates what my next steps were:
  • Accessed the Feedback Master by selecting the View tab and clicking the Feedback Master button.
  • Duplicated the original master, by right-clicking on the master and selecting Duplicate Slide Master from the shortcut menu.
  • Preserved the original master by again right-clicking and selecting Preserve Master. I did this because I didn’t want to lose the original master. Don’t forget, there could be other quizzes in a project that wouldn’t work with this custom design.

 

Modify Custom Feedback Master

image of custom master described in contentNow it was time to modify the new Custom Master. First I clicked on this master to make it active, as seen above.

I knew the custom response placeholder rectangle was going to be in my way, as was the horizontal line, so I selected these and moved them offstage – that is, off the slide. Then I closed the Feedback Master.

 

Create the Quiz

To convert this into a multiple choice-type quiz, I clicked the Insert tab and then the Convert to Freeform button, and I double-clicked on the Pick One question type.

Image of Pick One dialog box

I selected the 6 choices in the Pick One dialog box, and indicated that March is the correct choice.

 

Customize the Correct and Incorrect Feedback

Remember, I’d decided that the correct and incorrect responses would be custom responses, rather than the default feedback. This next section describes the customizations I made to the Correct and Incorrect feedback layers.

For Both Correct & Incorrect Feedback Layers – Choose Design

Image showing selection of custom feedback master

In each of the layers, I right-clicked on the slide, and from the shortcut menu selected the custom design, as illustrated by the orangey shade in the image above.

 

For  Both Correct & Incorrect Feedback Layers – Customization

Image of changes to layers as described in content

Look at the screenshot above and note the modifications for both the correct and incorrect layers.

Timeline:

  • Default feedback text for the layer is hidden.
  • The instructional text box on the base layer is hidden

Slide Layer

  • Although it’s difficult to tell from this screen shot, the continue button has been moved down lower than its default position.
  • My plan, when the layers displayed, was to have a “selected option button” appear on the correct choice: March. I needed to simulate this, so I created a “fake” option button by grouping 2 shapes from the Insert shapes pane. I used a donut shape and an oval to create a button that looks like the Pick One button style I’m using for the quiz. I sized it so that it’s a bit larger than the default buttons.
  • Next, I placed the button over the position for the March option button on both layers.

 

For the Correct Feedback Layer

Image of customization to Correct Layer as described in content

As you see above, for custom feedback, I inserted a text box that says, “Yes, the greatest amount of growth occurred in March.” This text box and the “fake” option button are animated to fade in.

Animations are set by clicking on an object, then clicking the Animations tab, and choosing the desired animation and speed.

 

For the Incorrect Feedback Layer

Image of incorrect layer as described in contentThere are 5 potentially incorrect answers, so, I created 5 corresponding feedback textboxes. Because their initial states are set to hidden, they are difficult to see in this screenshot, so I’ve placed numbers close to each one to make it easier for you to see in this blog post (these numbers are not part of the quiz). For example, the number 1 is below the “You chose January” feedback.

Setting an object’s state to hidden is done by clicking the object, then selecting the States tab, and changing the initial state to hidden.

The text boxes are animated to fade in when triggered. For example, the trigger for the feedback if the Learner selects January is:

– Change the state of the “You chose January” text box on the incorrect layer to normal
– WHEN the timeline starts
– IF the January option button on the Pick One (base layer)
– is equal to selected

For information on triggers, check out this E-Learning Heroes tutorial: Working with States, Triggers, and Layers.

Note the additional feedback text box that fades in and says: “Actually, the greatest amount of growth occurred in March.”

 

One More Note on the Incorrect Layer

Screen shot of modifications to the incorrect layer as described in the content

This time, I’ve set the animation for the “fake” option button to grow. This provides a visual cue to Learners, making it easier to distinguish between their incorrect response and the correct one.

I’ve set both the “fake” button and the feedback on the timeline to occur at 1.25 seconds.

Finally, I’ve placed the continue button at 3 seconds on the timeline and set its animation as a Fade in.

Like I said, there’s a LOT to do. I hope to create a screencast to go along with this at some point. In the meantime, hope y’all find this helpful.

Dodge Bullet Issues in Articulate® Storyline®

  Bullets aren’t looked upon particularly favorably nowadays as an eLearning element, but as someone said to me recently, “Sometimes you just need bullets!”

If you use Articulate® Storyline® to create your eLearning, as I do, you may have sometimes felt a bit frustrated when changing font type size on bulleted text. A common occurrence is for the last bullet in the list to stubbornly maintain the old type size.

In this video I describe a discovery I made that forces that last bullet – or any bullet that isn’t “behaving” –  to conform. The “key” step is at around 59 seconds, where I suggest you use your mouse to “select” at the end of the line containing the bullet that’s not conforming. It’s difficult to see what I mean, because Storyline doesn’t highlight that area and there’s not a whole lot to select. So, here’s a screenshot that may help. The yellow highlight indicates the little spot, right after the bulleted text, where you drag your mouse before adjusting the bullet size.

Screen shot with highlight and arrow showing where to select at end of bulleted line

In addition, I think I’ve found a way to avoid the problem altogether. Intrigued? Check out the video. And, if you do give these tips a try, I’d love to know if they work for you.

Control Consistency in Image Design

You know about CRAP, right? Good elearning design incorporates these elements: Contrast, Repetition, Alignment, and Proximity.

Did you know that Microsoft® can actually give you a hand here – with the repetition part? Consistency, or repetition in styles, is an important “eLement of eLearning.” And styles isn’t just about fonts and headings, it’s also about images.

Recently there was a discussion in the Articulate® Community Forums about finding and using style numbers at the Microsoft® Office Clip Art and Media site. These style numbers can help you choose images with a consistent design style. Watch this video to find out how.

Note: Microsoft and Office are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries.

Fonts in eLearning

illustration of a blue pencil with letter A in uppercase and lowercase

Before you read any further – or if you’d rather not read – check out my 3-minute instructional video on Fonts in eLearning, where you can also learn a bit about using fonts in Microsoft® PowerPoint®.

There’s a LOT of information on the use of fonts as an eLearning element. I don’t know about you, but sometimes I’m overwhelmed by how much there is to know about fonts and typography. That’s probably because I’m not a graphic designer. So, if you’re looking for detailed information about typography design, feel free to move on to another post, like this one, which I discovered via a Mike Taylor tweet (@tmiket).

My goal is to provide some broad guidance on the use of fonts in eLearning design. To that end, I’m going to provide an example from Microsoft®. Many people disparage using their fonts in eLearning. One argument is that they’re overused. Since I haven’t done any research, I can’t confirm or refute that. But I can say that I find many of their combinations,  like the one in this screenshot,engaging and pleasing to my eye.
Image of PowerPoint Slide with text

Headings vs. Body Text

The slide in this screenshot (above) was created using the Newsprint design and font theme in PowerPoint®. The heading uses the Impact typeface, 49 points. Body text is in Times New Roman, 24 points. You can find this theme, and many more, by clicking the Design tab; change Fonts by clicking the Fonts drop-down arrow.

This theme adheres to the overall approach that most people agree upon: use one font for the headlines and another for the body text. In this case, the body font is a serif font; that is, there are little lines at the top and bottom of each character that purportedly help guide a reader’s eye. The headline font is sans serif, minus the “guiding lines.”

Serif or Sans and How Many Fonts?
By the way, there are many articles recommending that ONLY sans serif fonts be used for eLearning because they are easier to read in digital format than serif fonts. Ah, and now you’re beginning to see the complexities around this topic!

Typically, you should use no more than two fonts. Contrast can be achieved, as it’s done here, by changing scale and style. The body text is smaller; the heading text is larger and bolder.

More Resources
Check out Articulate® David Anderson’s (@elearning) Screenr (instructional video) on using scale, style, and color to create emphasis in eLearning content. And the eLearning coach (@elearningcoach) has an informative blog entitled What font should I use?

You can of course move beyond the fonts provided by Microsoft®. Do a web search and you’ll find gazillions (well, almost) of fonts, both free and for a fee.

Pencil Image courtesy of Arvind Balaraman/ FreeDigitalPhotos.net

Note: Microsoft and PowerPoint are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries.

Tooltips: Just in time eLearning eLements

Many “eLements of eLearning” are so subtle that we don’t even recognize them as such. Tooltips are a good example of that. As we move our mouse over image of what a tooltip might look likean element on a screen, more information about that item appears in a box. It might look something like this

When we move the mouse away from the item, the tooltip disappears.

In this way, a tooltip is a kind of “just-in-time” eLearning element. We need more information at a particular moment in time, get the information we need, and move on.

Tooltips can be used in a variety of ways, and I was recently inspired by a few discussions in the Articulate® community forums to think about how they might be used in an association’s organizational chart. The instructional video I’ve embedded here shows how to create a tooltip in Storyline®, since the community member specifically asked about that product. But tooltips can be created in a variety of products and applied in many different ways.

 

Magnification Graphic Tip for PowerPoint®

Microsoft® PowerPoint® is used a lot in eLearning. Some people love it, others, well, not so much. But that’s not for today’s post :-). Since it IS used a lot, it’s certainly one of the elements of eLearning.

A while back I was reading a blog by the eLearning Coach (@elearning coach) where she provided a great tip on creating a magnification graphic. She merged two photos, a zoomed out photo that showed “the big picture” of a catheter, and a zoomed in one showing the catheter tip. She suggested the photo editing she’d done might be doable in PowerPoint®, so I decided to give it a try. Sure enough, it worked like a charm. Watch the video at the top of this post to see how it’s done.

Oh, and if you’re interested in her original post, you can find it here.

Note: Microsoft and PowerPoint are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries.