What’s the best UI design? Dark or light UI? Take a look at how UI colors affect site conversion and the user experience
Color is a major influencer of user interface design. Hues and shades, tints and tone, contrast, shadow, saturation, intensity, exposure, chiaroscuro – the list goes on. But what do they all have in common? Each has an impact on how users perceive your user interface.
Color in user interface design runs much deeper than simple aesthetics. Choosing between a dark or light UI, for instance, affects not only the attractiveness of your web and mobile designs but also level of usability. Clever use of UI colors can help communicate a brand’s message, convey a website’s structure and improve object recognition for better user engagement. Kissmetrics shows us that color increases brand recognition by 80% and that 93% of web users place visual appearance, including color, above all other factors when browsing online.
The problem is that there is no one-size-fits-all when it comes to UI colors, as we’ll see. Some web users require light-themed user interfaces whilst others prefer dark UIs. How you spend your time online directly impacts how we interact with digital UIs and we all have different expectations. With so many variables, is there even a standard? That’s what we’ll explore today.
Light vs. dark user interface design
Color theory in UI design matters. Thinking about lightness and darkness matters.
“Although my reasoning told me that color was unimportant, my emotional reaction told me otherwise.” Don Norman on affect and design
As with artwork, color can change the mood of a UI because it directly impacts the user’s emotions. We associate cool colors with stillness and serenity, but also sorrow. Warm colors often spark creativity or feelings of happiness. And what about keeping things simple? Black, white and elegant. Choices, choices.
Dark or light UI?
When it comes to using color in your user interface design, some web users prefer light-themed designs because dark text on light backgrounds are less strain on the eye in terms of readability. Take this post, for example, that you’re either reading on your desktop or mobile device. If the UI were dark with light text, by the time you finished reading, you’d be pretty tired.
Black text (Hex value #000000), or charcoal gray (#333333) on a light background provides maximal value contrast, according to Stack Exchange, and therefore optical readability for extended periods of reading. Hurray for WordPress’ light-themed UI then!
Having said that, there are users who opt for dark UIs. For instance, code editors and visual designers prefer dark themes because they simplify complex interfaces. The contrast level of light text on a dark background makes for minimal eye strain over an extended period of time (5 hours or more).
According to a recent survey that Justinmind performed with UI, Web and UX Designers:
- At work, 49% of web users prefer a black UI, 37% preferred a white UI, 8% opted for other colors, and 6% didn’t have a preference.
- Outside of the office, 32% of users prefer a black UI, another 32% preferred a white UI, 16% opted for other colors, another 16% didn’t have a preference, and 4% opted for a UI where they could customize the color themselves.
Choosing the right color combination can be a tough call. Keeping everyone happy isn’t easy, and there is no standard, no easy way out. Luckily, there are techniques to help guide you towards the best UI design for your users.
What aspects of user interface design should affect your color choice?
With so many colors to choose from, how do you go about picking and choosing the right one? The colors you choose will affect how users engage with your UI. The best UI designs follow a set of UI design principles in order to select an appropriate color scheme. These principles include:
- Clarity – the user should be able to clearly see all the UI elements. Color contrast helps to distinguish between elements and highlight important components. Contrasting both hue and value between the background and UI elements such as Call to Action buttons can strengthen legibility and navigation.
As Tubikstudio has it: “One of the ways to check it [check for clarity] is widely used “blur effect” when you look at the screen or page in the blurred mode and check if everything vital is easily and quickly observed.”
- Flexibility – design a UI that looks good in all situations and all environments. Classic light-on-dark or dark-on-light UIs will never go out of style.
- Familiarity – your UI elements should be recognizable to make your brand memorable. The use of color should be familiar and consistent so pick hues that users relate to (by testing them out) and when in doubt, refer to the Golden (6:3:1) rule.
- Accessibility – in order to reach as many people as possible, background and element color should serve the users’ needs – including those who have trouble with certain shades.
Stack Exchange’s advice on the best background to place behind text is to “use solid, contrasting colors, and avoid the use of textures and patterns, which can make letterforms difficult to distinguish or even illegible”.
- Responsiveness – UI colors should enhance intuitive interaction with the user on any device. When testing your UI design, test it on both desktop and mobile devices to reveal problems with the visual design.
The user-centered approach to choosing your UI colors
According to the responses in our survey, these are the most important aspects of a UI:
- Intuitive design: 48%
- Clarity: 24%
- Consistency: 16%
- Aesthetically pleasing design: 8%
- Responsive design: 4%
Intuitive user interface design is a must. Good UI designers seek to understand human behavior and devise solutions to make their lives easier and better. But no matter what you’re looking to achieve in UI design, the most important thing is to do it for the user.
So to UI colors. The best way to advocate for your users is to user test. You need to know what their goals are in order to motivate them to use your product. Start by performing user research, analyze your target audience, and research the competition. This data will determine what kinds of content drives your product so that you can design accordingly.
Prototyping your best UI design yet
The next step is to get designing your user interface. Start by creating a low-fidelity wireframe or sketch out some ideas. These only need to define the more basic layout, navigation and components of your UI. With a basic mockup completed, the next step is to add some color.
With the data from your user research, you’ll know what your users expect in terms of light and dark themes, color schemes and other color aspects. Create a mid-to-high fidelity prototype to visualize your content.
Then, perform another round of testing and iterate off of your findings. Test out your UI color assumptions with real users to observe what they need and want from your UI.
Tip: with Justinmind prototyping tool, use SVG vectors in your prototype for full control over color!
Dark or light UI: the takeaway
Color has a psychological impact on the way we perceive and interact with all user interfaces. The right color variation between the background and foreground elements will either make or break your user interface design.
There’s no right or wrong choice when it comes to light and dark UIs. Just remember to keep your users in the loop – with a strong prototyping and testing tool like Justinmind – to ensure that your use of color matches their expectations.