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

Show the Call to Action

The labels that you put on your button are very important. They tell the learner what will happen if the button is clicked. It’s important to give your buttons clear and descriptive labels that don’t leave any room for guessing. It’s also best to label them with a short and concise call to action, instead of a long, text-heavy sentence. Additionally, including an icon on your button (such as a home graphic, or an arrow pointing forward) may help the learner quickly understand the function of the button.

img2.png

Apply Common Button Characteristics

One visual cue that lets us know when a button is, indeed, a button is a small shape (often rectangular) with a drop shadow and a 3-D or bevelled look. Such visual cues actually make the shape look more “click-able,” which subconsciously tells our brains that we have, in fact, encountered a button.

img1.png

Use States

Have you ever noticed that when you hover over a button or a hyperlink, the pointer arrow becomes a little hand? This is another subtle cue indicating that the item in question should be clicked. It’s also a good reason to use Hover and Selected states when you design buttons.

img3.png

Be Consistent

Learners expect to see easily identifiable buttons in consistent locations throughout the course. So design them with the same look and feel, and group common buttons together so learners don’t expend energy trying to figure them out each time. If you’re using rectangular buttons consistently, keep it up all the way through—switching suddenly to round buttons can confuse learners.

Remember: learners shouldn’t have to look for buttons, or guess their functions. When they’re easy to see and clearly labeled, they’ll complement your awesome course content, rather than distract from it. Do you have any best practices or examples of good button design? If so, please leave a comment below to share!

You can always sign up for a fully functional, free 30-day trial of Articulate software. And don’t forget to post your questions and comments in the forums! We’re here to help. For more e-learning tips, examples, and downloads, follow us on Twitter.

12 Comments
Anne Goldenberger
Nicole Legault