Introduction
Buttons are kind of the unsung heroes of eLearning courses. They’re critically important, but instructional designers often don’t put as much thought into their design as we should.
The way the buttons are designed and used in your eLearning courses can contribute to whether learners are successful or confused, as well as whether they’re even able to access the content. In this post, I’ll share 7 inclusive design tips for buttons in eLearning courses.
1. Make sure buttons look like buttons.
One of the most common sources of confusion I’ve seen when observing user testing of eLearning courses is not being able to distinguish between selectable and non-selectable elements. For example, some courses include selectable graphics, or images with hotspots, which the learner can select to bring up more information. However, without clear styles, it can be hard to tell these apart from static graphics that don’t do anything.
Here are some ways you can make it clear that an item is selectable:
- Shape: Buttons are usually rectangular or pill shaped.
- Style: Adding different states (hover, selected, visited) can provide a visual cue to learners that an item is selectable. These states are usually distinguishable through shadows or color changes (more on that later). Be aware that button styles change over the years. For example, beveled shapes were all the rage in the early 2000s but look dated now.
- Consistency: Use the same shape for buttons throughout a course, unless there are clear reasons for using different shapes. For example, a “Play” button is (logically) a different shape than a “Replay” button.
- Labels: Use text to describe the button’s function such as “Submit” or “Continue.”
- Icons: If you want to make non-button items selectable, it can be helpful to add an icon that’s used consistently whenever a graphic is selectable.
2. Don't style links as buttons.
Buttons and links have different purposes. Buttons represent actions. Examples are a “Submit” button or buttons that show or hide content in accordion interactions.
Links, on the other hand, take the user somewhere else. Examples are hyperlinks to internet sites or links in a menu.
Why does it matter whether you use a button or a link? For one thing, it’s a matter of setting clear expectations. In addition, confusing the two can create accessibility issues.
Screen readers treat links and buttons differently. Both can be accessed on the keyboard by pressing the Return key, but buttons can also be activated with the spacebar. More importantly, screen reader users can skip to a list of all the links on a page, but not buttons.
3. Place the buttons where they make sense.
In a previous post about use of color, I wrote about how I used to accidentally hang up on a colleague when he’d call me using Microsoft Teams. Besides the fact that the red “decline” button was more visually prominent than the two blue buttons, the placement of the button at the bottom right also probably had a lot to do with why I’d invariably click on it instead of the blue “answer” button.
In Western cultures, we read from top to bottom, left to right. This causes us to look at content in a “Z” pattern (called the Gutenberg Rule), starting from the primary optical area at the top left, across to the right, then down to the bottom left and finally, across to the bottom right area. The Gutenberg Rule is one of several eye tracking patterns researchers have found, and people tend to use it in two situations:
- When they’re intent on reading the content
- When the content is short (like a popup or dialog window)
For this reason, most designers place call-to-action buttons at the bottom right when the content is short—because it’s the “terminal area”—or the last place our eyes go to, particularly for short content.
When a user is trying to find information quickly, especially when the content is longer, they scan the page using an “F” pattern. For this reason, the most important information should appear at the top and left side of the page. On content-heavy pages, buttons should be left-aligned under the text.
If you think about how the Storyline interface is designed, it makes sense that the menu is on the left, and resources and other interface buttons are at the top right.
Users are accustomed to finding navigation buttons at the bottom right of most eLearning courses, so even if you’re using custom navigation, I recommend keeping the placement consistent.
4. Be color conscious.
When designing your buttons, make sure users with color blindness can read the text and that they can see the difference between various states.
There are several free color contrast checkers and color blindness simulators you can use to make sure your color choices are accessible. My favorites are listed in the resources at the end of this post.
When you’re designing button states, if the only difference between the states is that the color changes, some users may not be able to tell when the state changes. For example, I’m currently working on rebranding my company, and I’m using pink and green as the main colors on the new website (coming soon!). After I established the design and tested it with a color blindness simulator, I realized that for some users, the color change would be undetectable. I then changed the hover states to a very dark gray so the value difference would be obvious.
5. Be aware that size does matter.
For buttons anyway, there is such a thing as too small. Small buttons, especially those that are close together, can lead to fat-fingering mistakes on mobile devices. Research suggests that the best size for buttons is between 42 and 72 pixels.
Keep this in mind when linking words as well. Rather than linking a single word, try to make your text links long enough so they’re easy to select. And remember that some users may not have use of their fingers—or may not have fingers—so larger buttons and links will be more accessible to them.
6. Make it clear what the button does.
Users like to know what’s going to happen when they select a button. (They’re quirky like that.) When we use vague button labels, we create confusion.
I’ve been guilty of sprinkling “Learn More” buttons throughout a course (and my website). Those buttons don’t give a learner enough context to know what to expect. Learn more about what? Besides, because “learn more” isn’t inviting the user to take an action but instead simply directing them to another layer or slide, it should probably be a link instead of a button.
If you use custom images as buttons, be sure they have descriptive alt text that identify their purpose. (And remember tip number 1: make them look like buttons!)
7. Help the learner avoid preventable mistakes.
If an accidental button click could have negative consequences—such as submitting a test or exiting without saving—provide a warning message or other means for the learner to confirm their choice or cancel the action.
Another example from my own experience is adding a caution popup (as shown below) if the user selects the Next button without viewing popup information. This was my proposed solution after a client suggested locking down navigation (which I never advise). The popups advised the learner that they hadn’t viewed all the content and asked if they wanted to proceed to the next screen anyway. This solution prevented users from missing content if they overlooked a selectable object but still allowed them to move freely throughout the course.
Summary
To recap, here are my seven inclusive design tips for buttons in eLearning courses:
- Make sure buttons look like buttons.
- Don’t style links as buttons.
- Place they buttons where they make sense.
- Be color conscious.
- Be aware that size does matter.
- Make it clear what the button does.
- Help the learner avoid preventable mistakes.
Resources for Learning More
Color Contrast Tools
- WebAIM Contrast Checker
- Colour Contrast Analyser (app)
- Colorblindly Color Blindness Simulator (Chrome extension)
