Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

A designer on my project has proposed something that uses both light and dark backgrounds within the same context (basic mockups below).

A short background for the app:

  • It is a platform on which you can place apps
  • It will be very dense and data heavy
  • Apps will respond to changes in other apps they are grouped with
  • It is designed to be a flexible platform where apps can be added to a group/view.
  • There is a wide variety of tasks performed by the apps including detailed forms, tables, charts, profiles etc.

The rationale for the light and dark is that:

  • Dark areas are 'primary'. They are the prominent bits of information and will often control the other apps.
  • Dark areas are preferred for charts and diagrams. Light areas for forms and text.

Though I think this has merit, my concerns are:

  • Using both light and dark elements risks visual coherence
  • The contrast between the segments / apps will create visual perception issues
  • Users will be confused and the rationale will be lost on them

Main question: Could using light and dark backgrounds within the same application lead to visual perception issues? Claims backed by research preferred.

Below are some hastily created mockups (I can't share actual details as its top secret).

Sample 1

Sample 2

share|improve this question
    
You want to be careful you don't trigger any Gestalt Affects: graphicdesign.spokanefalls.edu/tutorials/process/… –  PhillipW Dec 20 '12 at 21:53

3 Answers 3

Using dark and light themes together can work, but it depends on what you are trying to achieve. From what you have described, I think the design choice for your situation would hurt the overall UX.

When dark and light themes are used together, it is to de-emphasise the dark areas and emphasise light areas. Light always draws our attention faster than dark, and so the attention of your customers is going to be drawn away from where you want it. It would be an improvement if you used the light areas for the main areas and dark for the secondary.

Overall though, there would have to be a very good reason to mix the two as it brings more problems that is solves when you're talking about mixing content.

share|improve this answer
    
Can you see a scenario where the dark area draws attention first? –  Jay Dec 27 '12 at 15:34
    
In the examples above, my eyes were drawn immediately to the dark areas, then the secondary light areas. I believe attention is drawn to unique areas of a page rather than brighter areas. E.g. in your answer, the text that one's eyes are drawn towards is the bolded text, which appears darker than the rest of the text. –  Vincent McNabb Apr 17 '13 at 6:40
    
@VincentMcNabb You are correct. But all things being equal, lighter draws more attention than darker. –  JohnGB Apr 17 '13 at 8:10
    
@JohnGB Yes, that is correct. –  Vincent McNabb Apr 18 '13 at 0:35

For an usability point of view, I think this extreme contrast will be counter productive.

More concerning though seems to me that in your mock-ups the black parts seem to work either as big features (1st mock-up) or additional information / sidebar (2nd mock-up). If you have a signal element of any type it should remain the same in functionalty accross the whole application.

Furthermore, stark black and white contrast is very challenging to read, even if the contrast of the text on the respective background is soft, the hard distinctions between different elements will distract the eye. You could consider using a highligh color instead of going all stark black and white.

share|improve this answer
    
The 'signal element' will not be the same and that is part of the point. Sometimes it might be data that summarises a category and can be used to navigate, other times it will be a chart, other times it might be a list of tickets or clients. –  Jay Dec 21 '12 at 10:01
    
@Jay that is problematic, to say the least. The color (if we may call black a color here) helps the user memorize UI element function and contents. Mixing it up might create a challenging experience, but that has not that much too do with your topic's question whether or not the black/white choice might affect the user experience positively, as it is rather a content or flow decision. –  kontur Dec 21 '12 at 11:13
    
On the contrary, I think that is certainly one of the effects that needs to be considered –  Jay Dec 21 '12 at 11:27

Using darker or highly saturated blocks of colour on a page can define, or alter, the visual hierarchy of where user’s eyes will be drawn to look.

My concern with using multiple highly contrasted backgrounds together is that by using a dark background, contrasting with white, the most important information could possibly be overlooked in order to view whatever the eyes get drawn towards (the content that sits in the darker areas).

Also, depending on the weight and colour of the elements in other areas of the layout, this could also increase the user’s cognitive load if there is a struggle for hierarchy, or not a logical information/design flow vertically down the page.

If the proposed design goes ahead, it would be wise to conduct some common sense UCD practices such as colour contrast analysis and usability testing of a prototype, to see if users actually find the application easy to use.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.