Home > UI Design and Prototyping > Black or white UI design? our UI design survey reveals all
Black or White UI. Which is better for user interface design? Find out the results of our survey on UI design!

Black or White UI. Which is better for user interface design? Find out the results of our survey on UI design!

Black interface? White interface? The visual difference is as clear as night or day. But for UI designers, knowing when to opt for a black-dominant interface and when to go with white UI can be tricky.

Usability, branding, user experience and cognition can all have an impact on whether UI designers go light or dark. Plus don’t forget those secondary factors, such as the acculturation of your web/app users and how experienced they are using digital interfaces.

At Justinmind, we’re ever curious about the best user interface design ideas out there right now. So to get to the bottom of the black versus white UI design debate we went to the fount of all knowledge – our users. We ran a user interface design survey to find out what Justinmind designers and UXers thought about black and white UIs.

Our responses came from a wide variety of web and design professionals including UI designers, UX designers, UI/UX designers, Graphic Designers, Solution Architects, Web Developers and Engineers, Growth Hackers, Consultants, Analysts, Web Project Managers and UX Experts. Thanks, you’re all awesome ūüôā

So now that the results are¬†in, let’s take a look at the responses and what this means for UI trends this coming year.


Download Justinmind and prototype light and dark UIs fast

DOWNLOAD FREE


What’s the most important aspect of a UI?

 

User Interface aspects: survey results

  • Intuitive design: 48%
  • Clarity: 24%
  • Consistency: 16%
  • Aesthetically pleasing design: 8%
  • Responsive design: 4%

 

What about UI design color?

At work, 49% of you preferred 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 you preferred a black UI, another 32% preferred a white UI, 16% opted for other colors,¬†another 16% didn’t have a preference, and 4% of you opted for a¬†UI where you could customize the color yourself.

When is black UI design the right UI design?

From our survey we can see that more than 10% of Justinminders prefer a black UI in the office. Why is that? Probably because of the sheer hours we spend screen-staring in the office. According to Product Designer Constantina Maltezou, the longer you spend reading or writing on screen the more tiring black text on a white background becomes. Hence programmers’ overwhelming preference for black UIs.

“Optimal legibility requires black text on white background (so-called positive text). White text on a black background (negative text) is almost as good.” Jakob Nielsen

If you’re designing an interface in which users will have to do lots of reading, color text on a black background is almost as readable as the inverse, more traditionally found on blogs.¬†Almost. That almost is important. Visual display studies¬†show that light text on a dark background causes 26% more reading errors. If you don’t have tons of text and know users are going to be interacting with your interface design for protracted periods, consider trying a black UI to reduce eye strain, try the black UI.

Of course it’s not all about legibility. App and web interfaces need to present myriad types of content, not just text. Black UIs provide great opportunities for letting graphic content shine. Photos, charts, ads etc can benefit from the depth of a black UI background. Check out these examples from Web Design Ledger.

Wondering how a black UI might play out on mobile apps?

When to go for a white UI design

White UI design is often the default option for webpages and web apps. We also saw in our survey that, out of the office, Justinmind users were even steven between black and white UIs.

As we touched on above, white UIs win the day when it comes to readability in text-heavy apps and websites. That’s why products whose main aim is to get you reading and keep you reading – from the Kindle to the The New York Times app – use the classic white UI.

White UIs can also increase accessibility for visually impaired users, or older users who may feel befuddled by something as out-there as a black UI.

More on designing UIs for older users.

White UI also has a powerful psychological pull, invoking thoughts of cleanliness, modernity and efficiency. But watch out for those cultural stumbling blocks – whereas white means purity in Western culture it symbolises mourning and sadness in East Asia.

Intuitive design - UI survey results


Download Justinmind today and build UI the way you want!

DOWNLOAD FREE


 

Black or white UIs on apps

These days, we expect the compatibility of our¬†websites and apps to reach across our multitude of¬†screens and devices‚ÄĒand this is simply going to continue into 2016. In response to this, UX and UI designers need to be thinking ‘mobile-first’¬†when choosing between black or white UIs.

First, let’s state the obvious. There’s less space on a mobile app than on a desktop. That’s important because, for users, mobile apps can easily feel clautrophbic. So much information in one tiny place! Adding a black UI into the mix can cause feelings of visual suffocation. Make sure to respect the visual hierarchy of UI elements and spend time getting color contrast exactly right.

Black and white UI design in Justinmind

While general rules apply, users may have personal preferences either for black or white UIs. That’s why Justinmind offers users the chance to switch between interface styles!¬†Change your UI theme color by going to File > Preferences and changing the UI mode from Dark to Light.

And what better way to test this out than at the prototyping stage of the game? If you haven’t already, download Justinmind and start creating¬†beautiful, thoughtful and usable¬†UIs today!download-justinmind-prototyping-tool-banner-1

Emily is Marketing Content Editor at Justinmind

Add comment

Your email address will not be published. Required fields are marked *

Download Free