One of the great things about Storyline 360 is you can create a fully custom experience for your learners—right down to the user interface (UI). But like they say: with great power comes great responsibility. And when it comes to UI design, it’s your responsibility as the designer to ensure it’s easy and intuitive to use for all learners.
If you haven’t read this article on UI design, I recommend doing that before you continue. When you’re done, come back here and dive into this detailed list of design standards to help you provide an optimal experience for your learners.
Are you ready? Here we go!
Color
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. |
Text
Do |
Don’t |
|
|
For more tips on ensuring your text is legible, check out these articles:
- 8 Questions to Ask When Choosing Fonts & Formatting Text
- 5 Formatting Tips for Creating Dyslexia-Friendly E-Learning
Images
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. |
Unsure if an image is decorative or informative? Ask yourself if the image includes information that helps the learner better understand the content. If so, then it’s an informative image. If not, then it’s likely a decorative image.
Buttons
Do |
Don’t |
|
|
Icons
Do |
Don’t |
|
|
Layout
Do |
Don’t |
|
|
Features
Do |
Don’t |
|
|
Wrap-Up
This isn’t an exhaustive list, just a few simple guidelines to keep in mind. Unfortunately, there’s no official UI handbook, because the best practices depend a lot on your specific situation. If you’re struggling with how to present something, do a quick search to see how other designers have approached it. If it feels intuitive to you, apply the same principles to your course.
If you’re looking for more tips on designing great learning experiences, here are some articles you’ll want to dig into:
- What Are UX and UI Design and How Do They Apply to E-Learning?
- How to Design a Better Learner Experience
Remember to follow us on Twitter and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning. If you have any comments about UI design and e-learning, please share them below.
Get practical, real‑world tips and insights from e-learning experts.