Isral Duke, Designer

Designer.

UX Designer. Interation Designer. UI Designer. Graphic Designer.

Let There Be Light Mode and Dark Mode

Introduction

Dark themes are favored by users who prefer maximum control over the brightness on their screens. Dark mode’s fans claim that dark modes are easier on their eyes, especially in darker surroundings.

iOS 13 introduced dark mode in 2019, which followed dark mode for MacOS in 2018. May iOS app makers are quickly following suit, including Google and Microsoft, designing and coding dark modes into their apps.

Hand holding a phone with Google Maps running. Courtesy of 9to5 Google.
Hand holding a phone with Google Maps running. Courtesy of 9to5 Google.

The Analysis

I have not done any research on this matter, so I defer to Nielson Norman Group. For those of you who don’t know them, Nielson Normal Group (NN/G) are among the most respected user experience researchers in the computer technology industry.

Nielson Norman Group writes an article which presents their own analysis into whether dark mode is beneficial or not for users. They review academic literature on the subject as they haven’t done their own research.

The High Level Summary (tl;dr)

Which mode is better, light mode or dark mode? The answer depends on a few variables such as:

  • User’s eye condition (not necessarily age)
  • Light levels in the user’s surroundings
  • Long-term versus short-term effects
  • Text size

Light mode generally performed better in all kinds of tests, from reading long form to glanceable tasks. Users in the research referenced by NN/G were able to complete tasks more quickly and accurately using light modes. Despite this, there are hints that light mode’s benefits could come at long term costs to eye health.

However, for users with some kind of myopia or other vision-related conditions like cataracts, dark mode was better. For these users, dark mode reduced overall fuzziness in the interfaces because less light was scattered by their eye conditions.

The Action

Give your users a choice. Let them choose between light mode or dark mode in your app. But, don’t enable dark mode by default, enable the light mode by default.


Skills

Design

Affinity Designer Creative Cloud Figma Graphic Design Sketch App UI Design UX Design

Technical

Bootstrap 4 CSS Frontend Development Git HTML Statamic CMS VS Code

User-Centric

Content Modelling Content Writing Information Hierarchy User Training