The dark side of UI! Advantage of dark background

• Dark Side of UI. Benefits of Dark Background
• The Nuggets translation Project
• Translator: yangzj1992
• Proofreader: David Lin, Ruixi

Choosing whether or not to use dark tones in a user interface background remains a highly controversial issue. There is no doubt that the question is practical: choosing the right background plays a crucial role in the efficacy of all products, as it can be a key factor in improving or destroying the layout and functionality of a design solution. Today, our article will be devoted to discussing the benefits and drawbacks of using dark backgrounds in UI design, so let’s head to the dark side of UI.

In our previous posts we have looked at some of the factors that can influence the choice of a common color scheme and a basic background color, as well as some of the key points to consider in this process. This time we’ll focus more on the pros and cons of dark web and mobile apps. Our hands-on experience in creating and testing different user interfaces in Tubik Studio confirms that dark backgrounds can be a powerful and engaging solution that provides a positive user experience. So, of course, let’s start talking about when, where and how to make the most of it.

Visual perception of dark colors

A long time ago, there was a public poll in 2009, and ProBlogger has published some interesting opinions based on it. Readers were asked which color of blog background they preferred. Almost half of the readers answered that they preferred a bright background – which is reasonable for a traditional text-driven blog, and which is superior to other options in terms of readability. However, 10 percent of respondents said they preferred a dark background, and more than a third said the choice should depend on the nature and content of the blog. Designers cannot ignore such a large proportion of users when looking for design solutions. In addition, in the case of digital products with less text-driven content, such as websites or applications, the percentage of people with this view should increase. This is a good example of how user research and surveys should be an important part of the design process. Knowing what users want, or at least what they’re comfortable with, can push the limits of traditional vision to the extreme.

Scientific research provided by Richard H. Hall and Patrick Hanna on this issue highlights key points in visual perception of background color and effect. After analyzing previous experiments by different researchers on the effectiveness and readability of web pages. The authors conclude: “They found that positive contrast (i.e. black text on a white background) was associated with a better effect and, in conjunction with the previously mentioned research, demonstrated that the greater the contrast between color combinations, the better the effect.” So with proper design and testing, dark backgrounds can be just as good as light ones in other ways, especially when it comes to contrast and readability of layout elements. From a user testing perspective, this study contains a lot of interesting and useful information based on different color combinations and effects. Therefore, it is highly recommended for designers.

Readability

Jacob Nielsen, one of the great masters of USER experience design, once said: “When using high-contrast color text and backgrounds, the optimal legibility scenario requires black text with a white background (so-called forward text), and white text with a black background (reverse text) is almost as good. Although this is the same in contrast as forward text, the inverted color scheme can confuse people slightly and slow down their reading speed slightly. Legibility is significantly affected by the color scheme, such as text that is slightly lighter than plain black, especially if the background color is slightly darker than plain white.”

Indeed, readability is an important indicator of product performance and it’s not just for text. It goes beyond the limits of text and means that all meaningful symbols, including letters, numbers, hieroglyphs and pictures, should be noticed and easily recognized in the interface. Therefore, designers choosing dark backgrounds should be prepared to go further and test fonts, ICONS, and images on different devices.

Best web and application design practices, such as the best Black Sites collection on Awwwards, show a number of excellent design solutions that use dark backgrounds as a base color scheme, none at the expense of readability. To avoid the problem of low readability, it is important to remember during the design process:

• A dark background absorbs some of the light from other elements, so there should be enough space or air between the elements.
• Line lengths make blocks of text more readable and understandable to users;
• The spatial design of line spacing, as well as the length of lines of text, can have a significant impact on readability, especially in dark backgrounds, so paragraph size, spacing, and line spacing need to be carefully considered.
• Dark doesn’t always mean black, so it makes sense to spend some time testing different types of dark backgrounds and colors in each particular case.
• Shadows, gradients, and halos all affect readability;
• Sans serif fonts are usually sharper, whereas serif fonts look more elegant, and applying this factor in practice improves readability.

Contrast aspect

Webdesign.about.com presents an interesting presentation to consider in terms of visual perception with a table. The table shows the level of contrast and effect between different color combinations and provides an interesting fact: the black part of the table is the only color that provides a good contrast effect for almost all colors. So experiment carefully in every particular case of the design interface, and this factor can be one of the reasons to try using a dark background.

In terms of readability, contrast can be one of the factors that makes content more recognizable and clear.

Tip about contrast and readability of this kind of information in an early before the survey has said: “in the dark background, make sure you’re not contain quite bright font: use a soft white to pale gray font, or use the monotony of color to a minimum to reduce the huge contrast and glare; this principle also applies when doing slides: Use at least 5% grayscale to reduce the brightness of the glare. Interestingly, this will still be viewed as white. Similarly, bold fonts make them big enough that the text doesn’t feel like it’s being swallowed up by a dark background. This and other experiments offer different types of color palations that can provide efficient, natural content for web pages and app pages.

Another thing is that dark backgrounds tend to be somewhat heavier and provide more depth for graphic content such as pictures, photos, illustrations, posters and advertisements. Good composition and adherence to visual hierarchy can significantly enhance the visual perception of such layout elements. This factor makes dark backgrounds more efficient and attractive when the interface is based on more graphic material than text.

Affective perception

Color psychology also needs to be considered in the selection of background color, which is not only included in the effective range of presentation, but also includes the information carrier borne by the content itself. Dark colors are often associated with elegance and mystery. In addition, black is often associated with elegance, etiquette, prestige and power. This may be why many powerful brands use black and white themes, dark colors to dominate and bright colors to convey the message, and use such schemes to build visual presentation. Interface design can provide additional support in this respect for other design solutions and for product presentations in general.

Advantage of a dark background

Based on the above points, we can conclude that applying dark backgrounds to the user interface can provide the following practical benefits, including:

• Style and elegance
• The mystery
• The appearance of luxury and grandeur
• You can use a wide range of contrasts
• Support visual level of presentation
• Reflect the depth of the content
• Visual appeal.

Considering the point

Dark backgrounds, on the other hand, require thorough attention and analysis of the tiniest details, which can get blurred in the layout if they are not rendered in the right way. Therefore, we should consider:

• User research, practical investigation, theoretical research and experimental data are very important data resources for target users, whose needs are the basis for selecting effective and attractive design solutions.
• Competition research Market research of close competitors can understand designs already used by other competitors in the market, and this factor can influence the choice of original design to make the product more obvious.
• User testing of dark backgrounds is fragile in terms of readability and readability, so it should be done rigorously on all types of devices and resolutions.
• Environmental factors analysis of the product that will be used by the target user under typical conditions can provide additional reasons for choosing or opposing a dark background.
• The large number of content elements and blocks needed on a screen or web page to influence the decisions of the surrounding background: a dark background that leaves too little space between the elements can cause visual difficulties.
• The nature of the content A dark background provides a better presentation for a graphical element based interface than a large block of text.

Recommended reading

• The Impact of Web Page Text-Background Color Combinations on Readability, Retention, Aesthetics, and Behavioral Intention
• Visual Perception: An Introduction
• Art and Visual Perception: A Psychology of the Creative Eye
• Colour Choices on Web Pages: Contrast vs Readability
• The Dos and Don ‘ts of Dark Web Design