The dark and the light

Written on 11 July 2016 by Dan Wheeldon

One of the major decisions when embarking on the visual design of an application is whether the overall look-and-feel (theme) should be dark or light.

It could be that the decision has been mandated by the client’s brand guidelines (though those tend to be notoriously short on details for application design). If not, there are several aspects that can inform the decision.

Online research

A good starting point is an online research. Are there any research papers around the subject of usability and colour? Is there any consensus in the comments section accompanying relevant articles?

Though many of the studies available can be considered fairly old in internet-years (Hall & Hanna, Web Text-Background Color, 2009), or very old (Dr. Lauren Scharff and student Alyson Hill, 1996), the overall consensus is that while dark text on a white background seems to be the optimal setting for readability, the main aspect to consider is that there be sufficient contrast between the text and background (at Tobias & Tobias we follow the W3C guidelines to get at least an AA rating for accessibility, where possible).

Online commentary seems to support the point of view that personal preference has a lot to do with choosing one over the other. Where many prefer dark text on a light background, there are also those who prefer darker interfaces and find they suffer less eye strain from them.

How and where the interface is used

Another thing to consider is the environment that the interface is likely to be used in. While a light interface might work well for someone sitting in a well-lit office where the ambient lighting is bright, a dark interface may be better for people working in a darker environment. These days, some apps, such as Feedly, allow users to choose between dark and light themes. From my own perspective, the darker theme is far less harsh in the evening, due to noticeably less light emission from my tablet screen.

Being that screens generate light, you could use as an analogy that a light background with dark data is like viewing a dark object in a well-lit room. It might not be instantly findable, but one could happily stare at it all day. In contrast, a dark background with light data would be like viewing a light in a dark room. One would notice it very quickly, but wouldn’t want to stare at it for long.

Do users tend to stare at the data for a long time, or do they look away and have to re-find the data quickly? Research shows that a light background seems to be preferable for large bodies of text that users are likely to be staring at for long periods of time.

What about areas of updating data, where users would only be glancing at it and would need to spot any changes quickly? It could be argued that a darker background may help by bringing the data forward.

Asking your users

So what about our users? On two large projects — one a financial trading platform for a multinational bank, the other a global platform for a multinational insurance brokerage — we opened up this discussion to a wide group of internal users, rather than only consulting our immediate stakeholders.

The result of both experiments was fairly even, give or take 10%. One thing that became evident was that, while some people may have indicated a preference for dark interfaces and found light interfaces ‘dull’ or ‘boring’, many of those that preferred light interfaces stated that they “actively hated” dark interfaces.

Plusses and minuses

For the brokerage platform, the results were slightly in favour of dark interfaces, which was what we went with. The benefits of the dark are that it can be seen as sleek and futuristic, like something you would see in a sci-fi movie. It can make a bold statement, and was preferred, in both studies, mainly by men. On the downside (from a practical viewpoint), it can afford less scope for subtlety when it comes to a visual layering of data. This is shown most keenly with overlays and elements such as drop-down menus, where it is much trickier to make them stand out above the main interface. Making the data stand out is an easy task, but rendering two distinct background areas when dealing with ‘very dark grey’ and ‘not quite so dark grey’ can be tricky.

The benefits of light interfaces stem from the fact that it is what most people are used to from the likes of operating systems, MS Office, and email clients. One can subtly demarcate areas of the interface without resorting to sharp dividers that can overcrowd the presentation of data. The downside is that they can be less distinctive and that familiarity can breed contempt in some users.

Why not do both?

Providing both dark and light themes seems like a sensible compromise. And it can be a way of trying to please everyone.

Depending on the complexity of the interface, this can lead to a near doubling of the work needed to design and maintain the interface’s visual language. There may also need to be compromises made in order to support ease of code deployment and maintenance, which can lead to a less than optimal design in either theme.

Another downside of using both themes together is that you can be stuck with everything all parts of the interface being either totally dark or totally light, even though this might not be ideal for all parts of the interface.

Is there an alternative?

One thing we have been implementing for clients lately is mixing dark and light elements, using dark backgrounds for ‘glance-able’ data (pricing, timers, discrete values) and light backgrounds for areas that the user would spend longer looking at (data tables or large blocks of copy). This approach allowed us to tailor various areas of the interface to users’ needs, eliminating overhead when needing to maintain distinct libraries of elements.

Further reading

[Hero Image by Glenn Carstens-Peters on Unsplash]

About the Author

Dan Wheeldon

Dan Wheeldon

Lead Visual and Interaction Designer

Dan is a Visual & Interaction Designer with 19 years’ extensive knowledge and experience in concepting and visually realising applications and websites, for companies such as BNP Paribas, NatWest, Deutsche Bank, Barclays, First Capital Connect, Nickelodeon, MTV, Paramount Comedy, EMAP, Fidelity International, among others. He has a proven track record designing financial platforms and applications for various markets and asset classes, with a full understanding of both the brand and user needs.

More from the blog