Designing Buttons for Interactivity

Click and reveals are the bread and butter of interactive content for any elearning. Any time you’re designing something for your learner to click on, keep these design principles in mind to make the most effective and engaging experience for your learner.

Consistency

Make sure your buttons are consistent with your chosen look and feel, and also with each other. You want your learner to quickly understand what is clickable, and what might be a text box or some other graphical element. If you confuse them with different button designs on each page or objects that look too similar to the buttons, it will interrupt the flow of the content when your learner has to hunt down the right object to click on.

Using images

Sometimes your buttons may contain text or icons, and sometimes both. All of these can give your learner clues as to what to expect when they click on it. For instance, arrows on a button can indicate which direction they should look for the next content, or images on the button can reinforce the points they are about to read.

Feedback states

Feedback states are particularly important in letting your learner know what objects are clickable, and whether or not they have already been clicked on if there are multiple buttons on the screen. At a minimum, your buttons should have a hover state and a visited state. Make sure to design these states to be distinctive from each other.

Personally, I like to invert the colours of the text and the background on a hover state, which gives it the most visual contrast. E.g. if the button’s normal state is white text on a dark background colour, the hover state will be dark coloured text on a white background with a coloured border. Visited states are usually a grayed out version of the normal button, unless the button has a disabled state. Then I usually use the grayed out button for the disabled state and a different design for the visited state.

For more on how to design great interactions for your elearning, contact us at pathwaystrainingandelearning.ca.