Light vs Dark UI Interface Design



It is fun that dark theme stock interface is much better than white one, so should designer join the dark side for a financial APP?

As we know when begin do design work for a project, it is essential to decide light or dark background for the first step.  Choosing appropriate color theme is important for product efficiency which also a key factor enhancing brand identity. For example, when designing stock interfaces for Jinfuzi Financial APP,  we make both dark and light background. The light theme is very clean and  could maintain consistency while dark theme is featured by high readability. On the ground of user context and product position, it is hard to make a decision.

There are several key point factors to consider about the issue.

1.Readability

“…most studies have shown that dark characters on a light background are superior to light characters on a dark background (when the refresh rate is fairly high). For example, Bauer and Cavonius (1980) found that participants were 26% more accurate in reading text when they read it with dark characters on a light background.”

Reference: Bauer, D., & Cavonius, C., R. (1980)

For those professional tools with high text content  concentration where people spend long time during the day

Indeed, readability is the vital goal of the product, especially for those interfaces full of meaningful symbols like text, numbers, pictograms and icons which should be noticed and recognized easily. For content-driven interfaces, such as Stock Trade App, Adobe Photoshop and Premiere, users always use them for many consecutive hours, dark themed interface is introduced on the ground it can release a lot of pain by screen vision syndrome. However it doesn’t mean that dark theme is superior  to light one.

TD Ameritrade trading platform screenshot; from: google.com

Honestly, light background is good choice for aesthetic and branding needs. While black text or lighting icon on white background has high contrast(so-called positive text), usually forcing users’ eyes to get it for the first glance. So we can’t imaging if we read newspaper using dark background,  we feel painful if we code, trade or design using white background for whole day. For those professional tools, like trading, coding or designing required deal with full information at the same time, as well as need high text content concentration. Make all information content really clean and readable is , so dark UI is the good  choice.

 

2. Contrast

Is it a better choice for higher contrast?  Look at this example:

Putting yellow text on black background is so high contrast, it is hard to read these interfaces, like warning or yield signs in high way.

According to basic color theory, different color combinations have different levels of contrast and performance. And black background provides good contrast with practically all the colors. It may seems the reason of designers are boldly try dark UI interfaces.

 

As you can see above, pure white on black is as bad as yellow on black. Though we had dark background , one more thing to mention is avoid having over-bright text or icons, such as tone down white text to a pale gray. Be sure using dark theme interface with proper contrast , it is helpful for simplifying heavy or complex content, especially dark background looks heavier and deeper,  it provides good opportunity for presenting graphic content such as stock price picture,  enhancing visual perception of this sort of layout elements.

 

3. Context

Color psychology is another thing to consider when deciding background color. Apart from the factor of readability and contrast ,  product interfaces also carry its own brand message. Dark background usually associated with elegance and mystery. Moreover dark theme also associated with fortune , power and luxury. This is maybe the reason why so many powerful brands build their visual identity around black-white color scheme with dark dominating.

CHANEL Website interface template, from: google.com

 

 

As design principle go, all design rules are to be taken a grain of salt.  Once we begin design interface, take some time to think about what the content is, and read up on the psychological ” meaning ” of various color, so we can appeal to our users.