Wednesday, November 28, 2012

Call to Action Items in eLearning

By Joseph Suarez

Add that item to your cart? Download a 30-day trial demo? Sign up for our monthly newsletter? Anytime we are called to act on the web, we are being asked to make a decision whether or not to fulfill the intended goal of the site owner. Web designers refer to such an attempt as a “call to action,” a sales and marketing term referring to any prompt or trigger leading toward a sale. But don’t let the salesmen approach deceive you, as they could also easily benefit eLearning professionals as well.

When designed correctly, the call to action stands out from the rest of the page to help draw the user in. is a great example of a well-designed call to action landing page. The main call to action is to download Dropbox, which is backed up by the call to watch a video.

However, if a page is designed without intention, the call can be lost in page clutter. Calls to action often come in the form of a button or link, as the user is typically asked to take action on a separate page such as checking out on an e-commerce site or filling out a form to sign up for a newsletter. Sometimes however, as is often the case in eLearning, the call is to interact with a single page with no other goal than to absorb information. As an example of this, take a look at the site shown below.


A subtle call to action statement invites us to “meet the team.” When we click on any portrait, we are shown an overlay with that person’s bio plus the option to cycle to other team members. This creates a beautifully simple yet effective call to action statement, leading to an interactive experience. Note how it was only implied to click or tap each portrait, and not redundantly stated.

The call to action in this example is made distinct by its location in the center of the page. Whether just plain-text instructions or links and buttons, calls to action work best when they’re visually distinctive from the rest of the surrounding content through the following contrasting techniques:
  • Size
  • Color
  • Placement
  • Animation effect (subtle)
For eLearning development, a good practice is to decide up front which contrasting method(s) will be used and then apply consistently. If nothing else, try using a nice contrasting color for call to action text (visually distinct from hyperlink text). 

An appropriate call to action better ensures the learner won’t be left wondering what to do next. If there is some interaction to complete before clicking the Next button, that call should be clearly established. Consider also indicating when the Next button is safe to click. The default Articulate course player does this nicely by subtly flashing the next button when each slide is complete.

Technically, any button or link used in eLearning could be considered a call to action. Sometimes they are almost impossible to miss, like a button to submit an answer in a knowledge check. Often however, sections of eLearning content become crowded for space and messages can be missed. In these cases, it may be beneficial to take some cues from web design trends and apply some calls to action that are difficult to miss.

What types of calls to action have you seen or used?

1 comment:

  1. There are some great points made in this piece. I think all too often people neglect to put real thought behind the design and placement of their call to action links.


Thank you for your comments.