Dark UI: Tips on using Dark UI

There are good reasons for choosing a bright background. Contrast, text, and readability and the ability to work with a wide range of subtle colours are some of them. Branding may also influence the decision of using dark themes because company logos and colours will not work with a dark colour palette. In this article i will alight some tips on when to use dark theme as well as the do’s and don's.
Nevertheless, when a project warrants it, today’s digital product designers may choose to work with a dark colour scheme for a variety of reasons. As suggested above, it’s often an aesthetic choice meant to convey drama and elicit an emotion — something unexpected — or perhaps a designer wants to fuse the design with branding or make certain that visual content stands out.

However, if a designer chooses to cross over to the “dark side,” they will be faced with a number of challenges. All kinds of usability issues come into play — mostly related to scannability, readability, and contrast. The main aspect to consider is sufficient contrast between text and background. The context (use case) and the environment must also be considered, as well as the device on which the UI is likely to be viewed.
Some dark UIs are designed to minimize “digital eye strain.” With an increase in digital technology, we stare at screens for most of the day. Digital eye strainis a common condition that affects millions of people on a daily basis. Caused by everything from excessive computer use to regular exposure to bright light, it can cause headaches, neck pain, blurred vision, and burning/stinging eyes.
There are even such things as Computer Vision Syndrome (CVS) and “ocular discomfort.” According to a study, over 83 percent of Americans use digital devices for more than two hours per day, with 60.5 percent reporting that they experience symptoms of digital eye strain. (Eyes Overexposed: Digital Device Dilemma.)

When Dark UIs Work Well
The majority of entertainment-related UIs (Smart TVs, Game Consoles, and TV and Movie Apps) tend to have dark-themed UI designs — for good reason. Most entertainment-related activities occur in the evening, are viewed from a distance of 6–10 feet, and are watched in dimly lit rooms — in other words, the screen matches the environment. Additionally, colorful content (e.g., cover art and promos), stands out dramatically on dark-themed UIs.

The aim is to match the context of the activity: “It’s getting dark, I’m relaxing, and I want to watch some TV.” Similar to thousands of tiny light bulbs, digital screens put out light wherever a bright pixel is present; hence, a bright UI would light up the room — an undesirable effect considering the activity. In this scenario, the UI design is trying to match the context: the device, content, activity, and environment.
In the right context, environment, application, and use, black-background UIs make sense. Always consider the context that the interface is likely to be used in. But it goes further than that — the choice to go with it should depend on content and context: what, when, where, and on what device.
- To create a sense of intrigue and mystery
- To help focus and guide the user’s attention with minimal distractions
- To support visual hierarchy and information architecture
- To achieve a strong, dramatic look for striking visuals
- To project a feeling of style and elegance, luxury, and prestige
Dark UIs should only be used with sparse, minimal text, and “chunked” information with a strong emphasis on visuals — light on text. If text is used, it should be in high contrast to the dark background — preferably pure white or another strong color (not dark grey) on a black background.
When Dark UIs Don’t Work Well
As indicated earlier in the article, dark-themed UIs are a bad choice for text-heavy and data-heavy content, or a when using a variety of content types (text, images, video, data tables, dropdowns, fields, etc.). The general consensus in the design community is that dark UIs are a huge challenge to design for unless you are dealing with simple content and just a sprinkling of text here and there.
The challenge is trying to maintain sufficient contrast, which impacts the overarching challenge: readability, which is connected to usability, which impacts UX. Generally, all colours work on a white background, whereas on a dark background the useful range of colours is dramatically reduced.
In, conclusion i would like to highlight do’s and don’ts of using dark ui theme
When it’s OK to use dark UIs:
- When a branding color scheme warrants it
- When the design is sparse and minimalist with only a few content types
- When it is appropriate for the context and use, such as nighttime entertainment apps
- To reduce eye strain, such as analytics pages that are used for long periods of time
- To elicit an emotion — for example, a feeling of intrigue and mystery
- To create a striking, dramatic look
- To create a sense of luxury and prestige
- To support visual hierarchy
When it’s best to stay away from dark UIs:
- When there is a lot of text (reading on a dark background is difficult)
- When there is a lot of mixed content on the screen
- In the case of B2B applications with lots of forms, components, and widgets
- When the design calls for a wide range of colours
Dark theme should be approached with care. Deeper, more thorough research and analysis is recommended before making such a potentially precarious decision that is fraught with pitfalls. Once a designer goes down that path, it’s very difficult to turn back. Designers would be well-advised to consider all aspects — the good and the bad, the dos and don’ts, before jumping in with both feet.
Ref: UX Design CC
