Improving Documentation Readability: Dark UI vs Light UI

Readability is an obligatory feature for software documentation design. For any user documentation design, really. As you know, it is generally achieved by the font size, shape of letters, and contrast between text and the background. It can be either: dark on light, or light on dark. Both work. But, still, when the time comes to make that final decision, one always stops for a moment to wonder – which one should I go with?

We cannot but notice there are certain trends. Note that the trends described in this article suite both technical documentation and software UI designs.

Some UIs are lighter, others stick to the dark side (I bet you’ve anticipated the ‘dark side’ reference, it is quite unavoidable :)). Things rarely happen without a cause in this world – trends never do. Time to shed some light on the dark!

Vox Populi

We did a brief research of what people think about this – we analysed popular forum threads to listen to different opinions.

Turns out, when it comes to light and dark interfaces, it’s 50/50. As a rule, these preferences aren’t based on anything specific. People mostly just say things lik: ‘I like it light/dark because the text stands out more’. Yes, if the contrast between the background and the elements is preserved, than both options work great for usability.

There were also opinions stating that dark/light UIs are ‘more comfortable for eyes’.
And, here’s the weird part – people basically say the same things about two opposite color solutions. How so?

Why Do People Prefer Dark or Light UIs?

The answer is simple – it depends on when and where people read the texts, i.e. a brightly lit room requires a light background. A room with dimmed lights (or the device screen as the only light source) requires a darker one.

It kinda works like the light sensor in your smartphone when set to auto. It catches bright light and turns the brightness up and vice versa, so the display is more adjusted to the light, and the text on it becomes easier to read.

The choice of the UI largely depends on the habits of your users, on when they mostly use your products. The more the usage hours are bound to the 9-to-5 office routine, the better choice a lighter UI will be.

Going forward, we should mention that there are much more light UI’s as far as user guides are concerned. They are read in offices a lot.

Another thing to keep in mind here is that people can be used to a certain kind of a UI. Pay attention to the interfaces of your competitors, or tools that are also used by your target audience. If you see a trend there – analyse why it is the way it is, and take action.

What Else You Can Do

If you have enough resources, you should do both – the light and the dark versions.This is often a great UX solution. It makes your app more client-oriented in an instant. Small things like that never pass unnoticed. Even when they seem unimportant at first. UX designers are huge fans of tinkering the tiniest nuances – details matter here a lot.

Now, when you know that a lot depends on who and when uses your product, you will start noticing things about interfaces you’ve never thought of before. Let’s take Steam as an example of an interface for all the ‘nocturnal creatures’. Being one myself, I can say that I can’t personally imagine Steam in light shades. Just think about it – you come home from work, exhausted, you turn on your home PC to relax and play some peaceful game, like GTA. You open Steam and BAM! Your eyesight is temporarily lost due to it’s playful white-fucsia UI. Not good!

Another idea for you to consider – dark and light interfaces can be combined. Not by means of switching from one to another but literally combined within one UI. This is done for several reasons:

• it can help separate content logically and add visibility to design;
• different shades can be used where they best suited.

An example of the latter case would be a design of a template for API user documentation. Code historically tends to be light digits on a darker background. So, regular text will be black on white, and the code snippets will appear as light digits on a blackish background. You can check out a blog we did on online documentation design. It has the API user manual design example and some other useful documentation design tips.

Conclusion

We now can conclude that the UI choice depends mostly on the target audience habits and general industry trends. To find this all out, you can create surveys and/or study competitors.
Remember that the light or dark design is just part of the bigger picture – the UX. Follow our advice and combine it with other UX rules to greatly improve readability of your user manuals.

Happy Technical Writing!
ClickHelp Team