Design Standards to Follow When Creating a Custom UI in Storyline 360

Do

Don’t

Choose background, button, and text colors that contrast sufficiently with one another. Learn more about contrast ratios and how to measure them in this article: Contrast Considerations for Accessible E-Learning. 

Don’t use color alone to convey information. Doing so will make it difficult or impossible for people with color vision deficiency to understand your content. Instead of simply highlighting an answer in red when it’s incorrect, include visual and textual messages that convey it’s incorrect as well. For example, a red X along with the word Incorrect would be ideal.

Do

Don’t

• Limit yourself to 2-3 fonts:
• 1 for headings
• 1 for body
• 1 for calls to action (buttons)
• Choose fonts that work in multiple languages if you plan to translate your course. Check the font information to make sure.
• Use size 12 font or higher for all on-screen text to ensure readability.

• Don’t choose fancy, hard-to-read fonts. 
• Don’t center or justify your text. This makes it harder to read.
• Don’t underline text unless it’s a hyperlink.

Do

Don’t

Add alternative (alt) text to informative images so that screenreader users get the same information as sighted learners. 

Don’t add alternative (alt) text to decorative images. This just adds noise for screenreader users.

Do

Don’t

• Use rectangular (with round or square edges) shapes for buttons. It can be helpful to add a drop shadow to make them look clickable. If you prefer flat design, make sure your buttons stand out in other ways, for example, using a bold color. For more tips on designing buttons, check out this article: Tips for Designing Buttons That Scream “Click Me!”
• Make buttons a minimum of 44 pixels x 44 pixels. This ensures they’re easily clickable by most learners. See the WCAG 2.5.5 guideline for more information.
• Ensure all buttons have a contrast ratio of at least 3:1 to both the background and anything next to them. Learn more about contrast ratios and how to measure them in this article: Contrast Considerations for Accessible E-Learning. 
• Add states to buttons so they respond (by changing colors or format) when hovered over or clicked. 
• Ensure the focus order of your buttons (and other on-screen objects) makes sense.
• Use radio buttons for quizzes with only one correct answer.
• Use checkboxes for quizzes with multiple correct answers.

• Limit the number of options for quizzes to avoid cognitive overload.

• Don’t make disabled buttons gray. Instead, try making them translucent. Find out why here: Why You Shouldn’t Gray Out Disabled Buttons.

Do

Don’t

• Use icons that are clearly recognizable. For example, a house icon for the home page.
• Accompany icons with a label (below or on hover) for increased clarity.

• Don’t use ambiguous icons. If no easily identifiable icon exists, use words instead of or in addition to your icon.

Do

Don’t

• Use white space effectively. Learn how here: 3 Tips for Using White Space in Your E-Learning Designs.
• Put the exit button in the upper right corner.

• If designing for mobile, put the most frequently used buttons near the bottom. That way learners can easily access them with their thumbs when holding their phone with one hand.

• Don’t cram too much text on a slide. This can be overwhelming to learners. Instead, stick to one idea per slide. Here’s an article that will help you streamline your slides: 5 Ways to Avoid Overloading Your Slides.

Do

Don’t

• Provide help features like instructions and a glossary.

• Don’t skip over help features. You might think your course navigation is super-clear or that your learners already know all the terms in your course, but chances are you’ll have at least a few learners who will benefit from some extra help—so build it into your course!