Blog Post

Articles
4 MIN READ

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

AllisonLaMotte's avatar
4 years ago

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

  • 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.

For more tips on ensuring your text is legible, check out these articles: 

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

  • 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.

Icons

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.

Layout

Do

Don’t

  • 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.

Features

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!

 

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:

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.

Published 4 years ago
Version 1.0
  • Accessibility is one major new ruleset to follow, so any of these tips can help that as well ;)
    • AllisonLaMotte's avatar
      AllisonLaMotte
      Staff
      Exactly! I tried to weave the accessibility-related tips in there :) That way it's just part of the normal design process.
  • @Allison

    Bonjour, je cherche à télécharger les commentaires qui sont sous chacune des diapos du projet de mon client. Pourriez-vous m'indiquer la procédure SVP ?

    Merci !
    • AllisonLaMotte's avatar
      AllisonLaMotte
      Staff
      Bonjour Emmanuelle,
      Si vous avez le fichier .story vous pouvez publier au format Word pour avoir les commentaires. Sinon, ce n'est pas possible.
      Bonne journée !