Almost every e-learning course has at least one or two buttons. Often, buttons are a means of navigation (like the Next and Back buttons), or a way to reveal more information (like in a click-and-reveal interaction). With so many uses for buttons, I’d like to share a few best practices for button design that will help your learners have the best possible experience in your course.

Use Familiar Button Formatting

Make your buttons look like buttons. Often, buttons are rectangles with round or square edges. Sometimes they feature a drop shadow to add dimension. Most of the time they’re filled in with a bold color, but other times the only color is in the outline.

The key is to make them stand out from the rest of your design, so learners are drawn to them and instinctively know they’re clickable.

Here are a few examples of button styles:

 

Filled with Drop Shadow

Outlined with Drop Shadow

Filled Without Shadow

Outlined Without Shadow

 

True Square

 

 

 

 

 

Rounded Square

 

 

 

 

 

Oval

 

 

 

 

 

Does this mean you can’t create buttons with other shapes? Not exactly. It means you should favor standard button shapes. But in some instances, it might make sense to use another shape. For example, if you’re creating an animal-themed course, you might want to make paw print buttons. That’s totally fine! But if you use a nonstandard shape, then be sure to double down on other familiar button characteristics to ensure learners know they’re clickable: at a minimum, choose a bold color and add a drop shadow so your buttons stand out.

Label Buttons Clearly & Concisely

Button labels tell the learner what will happen when they click. Your labels should be both clear and concise—so their purpose is immediately obvious. Let’s compare the two buttons below:

Concise

Wordy

 

 

 

Though both buttons clearly state the button’s purpose, the one on the left is more concise—making it faster and easier for learners to figure out what it’s for. 

Use Recognizable Icons

A good way to help the learner quickly identify the function of a button is to use an icon. For example, a downward arrow for a Download button. 

Let’s look at an example:

Text Only

Text with Icon

 

 

 

The button on the left is perfectly fine, but do you see how adding the icon reinforces the text label and makes it even more obvious what the button does?

Some people also create icon-only buttons—without any text. If you decide to go that route, be sure to choose icons whose meanings are unambiguous. Otherwise, your learners could be left wondering what the buttons are for.

Even icons that seem obvious to you might not be to your learners. For example, let’s look at that download icon again on its own:

When it appeared next to the word Download, the meaning was clear. But now that it’s on its own, suddenly the meaning isn’t quite so obvious. It could mean Download, but it could easily also mean Down. To avoid confusion, it’s a good practice to always include text either on the button, below it, or when the user hovers over it.

Provide Feedback on Interaction

Have you ever noticed that when you hover over a button or a hyperlink, the pointer arrow becomes a little hand? This is a subtle cue indicating that the object is clickable. Other common visual cues include a change in color or shape, an animation, and the appearance of another icon, like a check mark.

If you’re building your course in Storyline 360, you can use the States feature to change the format of your buttons when learners hover, click, or drag them, for example. Learn more about how to do that here: Everything You Need to Know About States in Storyline 360.

Be Consistent

Learners expect consistency. Be sure to use a similar format for all the buttons in your course. Use the same shape, color, font, and size for all your buttons, regardless of their function. 

Buttons with the same function should appear in the same spot on every slide, not jump around from slide to slide. This ensures learners always know where to look and what to click on.

To ensure consistency, it’s a good idea to define these standards when you start designing your course and refer back to them as you’re designing your course.

In Sum

Remember: learners shouldn’t have to search for buttons or guess their functions. When they’re easy to spot, clearly labeled, and react the way learners expect, they’ll complement your awesome course content, rather than distract from it. 

Looking for more tips for designing courses that are easy to navigate and in line with learner needs? Check out these articles:

Do you have any best practices or examples of good button design? If so, please leave a comment below to share!

Want to try something you learned here, but don’t have Articulate 360? Start a free 60-day trial, and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning. If you have any questions, please share them in the comments.

12 Comments
Anne Goldenberger
Nicole Legault