Dark Learning? Why You Should Consider Adding A ‘Night Mode’ To Your LMS

944
LMS Dark Mode
Kazimir Malevich, Black Square, 1915, oil on linen, 79.5 x 79.5 cm, Tretyakov Gallery, Moscow.

The introduction of a “dark mode” on MoodleNet, Moodle LMS’ social network for educators, still in testing stage, reportedly became a team favorite. This has sparked the interest of more designers and educators regarding the benefits of dark interfaces on their apps.

WIRIS

They are not alone.

In recent time, most applications offer a dark mode. They are especially favored in cases where the user is in front of a screen for extended periods of time. Most code editors and IDEs offer dark modes, often as the default look. To Netflix, which has always offered a dark theme, popular apps have joined: YouTube, Twitter, Facebook Messenger. The list goes on. In upcoming versions of Android, a user will be able to set a dark mode for the whole system. All the apps featuring a dark version will display it, saving the user from switching them one by one.

It’s more than a question of appearance. Don’t get me wrong, aesthetic choices can be powerful arguments. But dark themes have several functional benefits, as we will list below.

Increased focus

This tops the list because it is the one that deserves most attention. To be clear, a dark theme does not automatically lead to higher focus. But if the designer follows the principles and good practices, many of the recommendations for dark themes are in line with a minimalist interface that reduces surrounding noise. In addition to the basic principles (see below), other recommended patterns can make the learning more effective by sustaining the momentum as much as possible:

  • Hide every “shiny” (slightly brighter) element from the field of vision if it’s not needed. This could mean a collapsible navigation menu, automatic delayed fading of unused elements, or “cinema mode,” ideal for video lessons.
  • Limit interruptions, mainly flashy notifications from distracting the user, especially as they enter a state of concentration. Many dark modes on interfaces are coupled with a “focus” or “no distraction” modes.
  • It’s worth pointing out that the success of reduced or hidden action places is highly correlated to the “user orientation” across the learning intervention. As long as the student understands the value of finishing their current activity, and knows when and how to go on to the next one, the absence of buttons ceases to be a concern or cause for anxiety. In other words: A more populated dashboard is not synonymous with the more important “sense of control.”
  • Finally, from a “smart personalization” standpoint, allowing the user to choose the darkness of their interface should only be the beginning of a design process that satisfy the needs of the digital learner. As AI becomes an unavoidable presence, two burning questions arise: How can a UI help make the best use of AI’s powers and features; and how can AI be put to use to enhance the design and delivery of personalized interfaces?

Another small benefit, but one I personally vouch for, is the ability to use a device in dark rooms, like auditoriums and cinemas, without disturbing others near me.

Reduced eyestrain

An often overlooked field very close to digital design and UX is “Visual ergonomics.” It is a multidisciplinary field with medical, psychological and physical elements, focused with “optimizing human well-being and overall system performance.” It is responsible, among other things, for the development of the ISO 9241 standard, revised just last year, generically titled “Ergonomics of Human System Interaction.” It addresses a broad set of issues, including everything related to vision, from digital interfaces to the construction, design and function of electronic displays.

As ergonomics must address issues and risks stemming from our relationship with habitual objects, visual ergonomics deals with the effects of prolonged screen time, among other modern occupational hazards on the eye. While a dark screen does not resolve deeper issues from physical devices, for example, it could help ameliorate some of them, including:

  • Flickering
  • Reflection
  • Blue light

A dark theme, especially if it involves a blue light filter, could be helpful not just to reduce optical strain, but also to limit the negative effects of screen time, including the learner’s sleep cycle and circadian rhythm, ability to focus, headaches, eye dryness and blurred vision. The latter two can lead to chronic issues, if left unattended.

High contrast helps accessibility

Or at the very least, it does not hinder it.

The current Web Content Accessility Guidelines, WCAG 2.0, provide two rules for contrast, which can help people who have low vision and photosensitivity, alone or in combination with other attributes. These, generally speaking, are easier to accomplish on a dark surface theme.

Minimum or ‘AA’ Contrast (1.4.3)

  • Text and images must achieve a 4.5:1 contrast ratio. This means that the important content must be 4.5 times brighter than the surface it is on.
  • With large images, icons and text in headings or titles, a 3:1 ratio is acceptable.
  • Logos or supporting or decorative text that can be considered optional to the experience have no requirements.

Enhanced or ‘AAA’ Contrast (1.4.6)

  • Text and images must achieve a 7:1 contrast ratio.
  • Large images and text must have a 4.5:1 contrast ratio.
  • Logos or supporting or decorative text that can be considered optional to the experience have no requirements.

It might save battery

Devices with OLED screens have the ability to turn off sections of the screen if they are not emitting any light. For mobile devices, screens are always among the main sources of battery use. So every turned off pixel matters.

It looks cools

A dark theme can make an application look “dramatic” or “elegant.” And if that is a criteria that makes a user choose your app or stay connected longer, what’s not to love?

If you are thinking about implementing dark modes in your learning, consider the following

Start with the basic principles

There are 4 basic properties of dark themes for designers, that would also make a theme compliant with WACG:

  • Contrast v. Saturation. Text and icons must stand out from the dark surfaces of the screen, up to a point. Excessive brightness on the small icons can be detrimental. Desaturated colors are an accessibility plus, and they reduce eye strain.
  • Depth. On a dark surface, brightness is related to importance. This apply to elements, but to surfaces as well. Designers can group elements by increasing the brightness of its surface slightly.
  • “Blackspace” (dark whitespace). Whitespace is the actual term designers use when referring to areas of the surface without content, buttons or action fields. To keep the screen as dark as possible, dark whitespace is key to group elements and provide a sense of hierarchy.
  • Outlining. When adding icons or buttons, try to maintain the surface dark as much as possible. A straightforward way to do it is by adding outlined icons, with only minor colored filling is necessary.

Revise your design kit (Also, have a design kit)

A design kit, color palette, corporate image guidebook, or any place that provides guidance about the colors and patterns that your website follows, would help you consider the changes you need to make to build a dark theme that is visually appealing, compliant with accessibility standards, and that remains a strong advocate of your brand.

Test against your actual learners

Many, if not all of the benefits highlighted above are variable and content-specific. If your user case involve only desktop computers, or really old, non-OLED screens, then the energy savings attributes should actually matter and can be dismissed in the evaluation process. Understand the people you are serving.

This is not only valid a priori. If you are able to follow a cohort of learners across interface changes and extended use, you will be able to validate many of the benefits empirically. This especially critical if you can verify non-digital effects, especially the medical type (eye and muscle strain, sleep quality, etc.).

Dark status on the LMS

Instructure Canvas: There is an idea

The “Ideas” section in the Canvas LMS community pages includes a “Dark Theme” proposal, which little over a year after creation has accrued 122 votes. It does not appear among the 100 most voted, many of which boast thousands of votes. But the idea is still open.

Totara: It’s possible

A “customer story” featuring Moodle and Totara partner HowToMoodle mentions that for visual effects company MPC a dark mode theme was built. The theme is optional, so people on editing rooms as well as regularly lit offices can access training. No details on the availability of the theme are offered.

Moodle: ‘Space’ Premium Theme

The only Moodle theme we came across (that was not last updated less than 4 years ago) mentioning a dark mode is “Space,” a responsive design that is already compatible with Moodle 3.7. The feature, however, is listed as “upcoming.” Non-dark demo here (access credentials here)

More resources


eThink LogoOur coverage on Outcomes in LMS and Learning Systems is supported by eThink Education, a Certified Moodle Partner and Platinum Totara Partner that provides a fully-managed LMS experience including implementation, integration, cloud-hosting, and management services. To learn more about eThink, visit ethinkeducation.com.