Dark User Interfaces. The Positive and Negative. Don’ts and Dos

Dark user interfaces can be visually striking, aesthetically pleasing, and beautiful. However, despite their many benefits, there are potential pitfalls that all designers should take into consideration before adopting such a design. These can include readability issues, contrast problems, and difficulty in navigating complex user interfaces. As such, it is important to weigh the pros and cons of dark user interfaces carefully before making a decision.

Dark user interfaces are dramatic, attractive, and beautiful. Designers should exercise caution if they chose to walk on the “dark side.”

One of the primary responsibilities of a designer is to craft the look and feel of a product, ensuring that the initial design is suitable for the product’s purpose, the intended environment, and the target audience. The selection of the colour scheme is a critical decision that will have a lasting impact and must be considered carefully; it all begins with the selection of the canvas, which is frequently a white backdrop.

Using a bright backdrop as a background for content is a valid choice for a variety of reasons. Contrast, text and readability, as well as the ability to accommodate a wide range of subtle colours, are all benefits of this option. In fact, multiple scientific studies have demonstrated that black text on a white background yields the highest readability. Additionally, when branding is a factor, corporate logos and colours may not be visible with a dark colour palette, making a bright backdrop a better option.

Most studies have demonstrated that dark text on a light background is more easily readable than light text on a dark background. A well-known research conducted by Bauer, D., Bonacker, M., and Cavonius, C. R. (1983) found that respondents experienced significantly higher levels of “visual fatigue” when reading bright text on a dark backdrop in comparison to reading dark letters on a light background.

It is a well-known expectation among consumers to encounter visual content that is composed of dark text displayed against a white background, accompanied by photographs. This is something that can be seen in various forms of print media, such as newspapers and magazines, which have been around for almost 350 years. Interestingly, the concept of dark text against a light background has been around for much longer, stretching back to the Palaeolithic era (35,000 years ago) when cave paintings of animals, often featuring a bright background, were created using charcoal or burned bones.

Despite the fact that light colours are often used to create a pleasant and inviting atmosphere, there are occasions when a darker colour palette is more appropriate. Such occasions may be driven by aesthetic motives, such as creating a sense of drama or evoking emotions, as well as incorporating branding or ensuring that visuals stand out. In these cases, digital product designers may opt for a darker colour scheme.

However, if a designer elects to pursue an unconventional aesthetic, they may face a range of potential challenges. Usability issues may arise due to a lack of scannability, readability, and contrast. It is essential to maintain a sufficient contrast between the text and its background. Additionally, the context in which the UI is viewed, as well as the device on which it is displayed, must be taken into consideration.

As technology continues to evolve, individuals are spending an increased amount of time looking at digital displays, often resulting in digital eye strain. This phenomenon can cause a range of symptoms, such as headaches, neck pain, blurred vision, and burning or stinging eyes, and can be attributed to prolonged exposure to bright light or excessive computer usage. To reduce the effects of digital eye fatigue, some user interfaces have been designed to be dark in colour. By doing so, it is hoped that individuals will be able to spend more time in front of their displays without experiencing the negative effects associated with digital eye strain.

Recent research has revealed that a large majority of Americans are spending considerable amounts of time on digital devices each day, with over 83% spending more than two hours daily. Unsurprisingly, this heightened usage has been linked to a corresponding rise in the occurrence of computer vision syndrome and ocular discomfort; 60.5% of those surveyed reported experiencing symptoms of digital eye strain. This phenomenon has been dubbed the ‘Digital Device Dilemma: Overexposed Eyes‘.

Business-to-business Software-as-a-Service (SaaS) goods and multimedia editing software are often used for extended periods of time. To reduce eye strain while maintaining visual clarity, many of these applications have been designed with a dark theme user interface. However, this approach necessitates a comprehensive, initial analysis of the design objectives.

The use of darker themes in gaming user interfaces is becoming increasingly common. By utilising a dark colour palette, game developers are able to create a more immersive environment for players, one that better reflects the settings of the game and the various game-play scenarios. Additionally, a black background can bring a sense of drama and mystery to the game, while also improving the contrast and visual hierarchy of the UI.

When Dark User Interfaces Work Well

Due to the fact that the majority of entertainment activities take place in the evening, at a distance of 6-10 feet, and in dimly lit rooms, it is no surprise that most user interfaces for Smart TVs, Game Consoles, and TV and Movie Apps are designed with dark themes. This type of design allows the screen to fit in with the surrounding environment, while also making the bright material, such as cover art and promotions, stand out clearly.

The aim of this UI design is to ensure that it is suited to the given context of the activity, which is “It’s becoming dark, I’m resting, and I want to watch some TV.” Digital displays such as screens comprising of hundreds of small light bulbs, emit light when a bright pixel is present; this would create a brilliant UI, however it is not a desired consequence in the current activity. Therefore, this UI design has been developed to ensure that it is tailored to the needs of the device, content, activity and environment.

When considering whether to use a black-background user interface, it is essential to take into account the context in which it will be used. This includes the setting, application, and usage, as well as the type of content and the device on which the interface will be employed. Careful examination of these factors should be undertaken prior to making the decision to use a black-background user interface, in order to ensure that it is the most suitable option available.

  • To produce a bold, dramatic appearance for eye-catching images
  • To exude a sense of flair and elegance, richness and grandeur
  • To generate a feeling of mystery and intrigue
  • To assist in focusing and directing the user’s attention while minimising distractions
  • To assist with visual hierarchy and information architecture

Dark user interfaces (UIs) should be used sparingly and primarily to draw attention to visuals or design elements, rather than text-heavy content. When text is used, it should be minimal and presented in a manner that stands out against the dark background, such as by using a bright colour like pure white or a similar shade. This will ensure that the text is legible and still allows the UI to emphasise aesthetics and focus on the visuals.

When Dark User Interfaces Don’t Work

It has already been mentioned in the essay that dark user interfaces (UIs) are not an ideal choice for text-heavy and data-heavy content, or when various types of content, such as text, images, video, data tables, dropdowns and fields, are used. Generally, in the design world, it is thought that dark UIs are hard to design for, unless the content is minimal and there is only a small amount of text.

The issue of maintaining appropriate contrast is of great importance, as it has a direct influence on readability and consequently usability and user experience. When a white background is used, all colours are suitable, however this is not the case when a dark background is chosen, as the spectrum of usable colours is significantly reduced.

An example of why it is important to consider carefully before implementing a dark-themed UI is demonstrated in a B2B SaaS project I was working on. The CEO was adamant that a dark-themed UI was essential to make the company stand out, and he wanted this theme to be consistent across the entire platform. However, after multiple meetings and with the support of the design and product management teams, we were able to persuade the CEO against this idea, thus avoiding a potentially disastrous choice.

The platform incorporated a standard selection of User Interface (UI) components typically used in Software as a Service (SaaS) applications, such as forms, widgets, dropdowns, pictograms, and icons, in addition to text and numerical data presented in tables. Despite attempts to ensure adequate contrast and a unified colour scheme, navigating and organising the layout, as well as its functionality, presented a significant challenge. To put it succinctly, the complexity of this task would have been insurmountable in a dark-themed UI.

Depending on the application’s requirements, a combination of bright and dark user interfaces may have been the more suitable choice. For example, settings pages with widgets, forms, and data tables may have been designed with a light background, while analytics pages with charts could have been constructed with a darker colour palette.

The Dos and Don’ts of Using Dark User Interfaces

Ultimately, the decision to utilise a dark user interface should be approached cautiously. Designers should not make this choice for merely aesthetic reasons, such as following a trend, striving to stand out, or replicating the design of someone else. Rather, a designer must consider the specific context, content (contrast and readability), device, and use case, as well as being able to provide a sound justification for their choice. It is an intricate balancing act, as there are numerous potential benefits, but also numerous potential risks.

When it’s OK to utilise dark UIs:

  • When the branding colour scheme calls for it
  • When the design is simple and sparse, with just a few content kinds
  • When the circumstances and usage call for it, such as evening entertainment applications
  • To prevent eye strain, such as when using analytics sites for extended periods of time
  • To generate an emotion, such as a sense of interest and mystery
  • To achieve a stunning, dramatic appearance
  • to create a feeling of wealth and status
  • To help with visual hierarchy

When it’s advisable to avoid dark user interfaces:

  • When there is a large amount of text (reading on a dark background is difficult)
  • When the screen has a lot of jumbled content
  • In the case of B2B applications that have a large number of forms, components, and widgets
  • When the design requires a variety of hues

Crossing over to the “evil side” should be approached with extreme caution. Before making a potentially risky decision, it is recommended that more extensive research and evaluation be conducted. Once a designer embarks on this path, it can be difficult to return to the original course. Therefore, before taking the plunge, it is wise to consider all aspects, both positive and negative, as well as the potential pitfalls.

Join the Top 1% of Remote Developers and Designers

Works connects the top 1% of remote developers and designers with the leading brands and startups around the world. We focus on sophisticated, challenging tier-one projects which require highly skilled talent and problem solvers.
seasoned project manager reviewing remote software engineer's progress on software development project, hired from Works blog.join_marketplace.your_wayexperienced remote UI / UX designer working remotely at home while working on UI / UX & product design projects on Works blog.join_marketplace.freelance_jobs