Dark UI vs Light UI: How to make the right choice?
A light UI may look as a safe bet always but, in some cases, dark UI can be the winner.
Source: uxdesign.cc
Some years ago, while we were revamping our company website design, our Design Head came up with a dark UI for the site. Our existing version had a light UI, so we were taken aback a little. The design looked good with grey as primary color and a nice shade of purple as the secondary. We all agreed that the design looks awesome.
But our Marketing team was not very happy with it on two counts-
- Readability, as our site was text heavy and a dark background could strain eyes of the readers
- It didn’t align with our branding as our brand colors were lighter
Finally the decision went to our CEO who gave the go ahead for the design. The Marketing team unwillingly complied.
And soon they were found to be correct.
Key website metrics like conversion rate, bounce rate etc., started dipping. The alarm bells rang and we had to soon return to a light UI.
Do dark UI work? Yes as thousands of websites, apps and games designed with a dark UI will testimony.
Is light UI the best choice? Not always.
As a designer, you must have faced this dilemma of whether to use a dark UI or light UI.
There is no clear answer to it. But there are a few considerations which can guide you in making the right choice between a dark UI and a light UI.
Considerations while choosing between a dark & light UI
- Who is your user?
Knowing your potential user and what they will want to get from your website is the first step in designing UI for your app or website. Adults would prefer a light UI that helps them intuitively use your product whereas the younger lot would prefer a dark background that is exciting and stylish. For kids, a light UI with a lot of fun and engaging elements will do the trick.
- What will your user do on the website?
Source: Problogger
Company websites, news websites, blogs etc., engage with the users through texts and videos. Users on such websites read a lot of text and if relevant watch an occasional video. But most of them will seek information through texts. They will spend a few minutes, may be 10–15 mins at max seeking information and move on. So you need to choose an UI which makes it easy for your users to read a lot of text without straining their eyes. Here a light UI works well. In a survey by problogger, 47% of the respondents preferred a light UI on a blog whereas only 10% preferred a dark UI.
But if you are designing for a website or a product where the user will spend a lot of time, say a few hours, reading text like a book or working like in a code editor- then a dark background with lighter text will be useful. The dark UI with light text will enhance readability and put less strain on their eyes making it easy to stay for long hours.
- When will your visitors use your app or website?
The time your app/website is used- day or night must also play a role in choosing your UI design. Netflix, Amazon etc., are watched mostly in the night at home. There, dark backgrounds work well on dark environments. It also gives users a real feel of the environment.
Similarly bright background works well for news websites, social media etc., who get most of their traffic in day time.
- Where do you want your user to focus?
There will be situations where you want your user to focus on a particular item say on a car and admire its design. In such situations a dark background will do well to create a distraction free environment, bring the design out and keep user attention on the car.
When to use dark UI?
- When there is little text to read and more images/videos to watch
- When there are very few elements in the design and are spaced well
- When you want to give your users the feel of a dark environment like in a movie
- When you want the core element of the page to stand out and gain prominence
- When you want to reduce eye strain and make it comfortable for users to stay long in your website
When to use light UI?
- When your website or app will be mostly used in daytime
- When your readers will be reading a lot of text
- When there are a lot of elements on the screens
- When you are using different color elements
Final Thoughts
Designing UI is creative. Let’s not rules bind it. But an awesome design should also help boost user experience and realize business objectives. It should help your users achieve their goal comfortably and quickly. So think about these considerations and find answers to the questions before choosing between a dark and light UI.
A light UI may look as a safe bet always but, in some cases, dark UI can be the winner. So choose wisely.
What are your rules while making a choice between a dark and light UI? Share your thoughts and experience on the subject in the comments section.
If you found this article useful, please share on social media to help others find it.
