8

Is there any data or research on whether or not background patterns have an impact on the user experience of a website as opposed to using a basic (flat/solid) color like white or a light-grey?

Improve this question
7
  • could you be more specific? do you mean a pattern as opposed to a white background?
    – Midas
    Apr 19, 2016 at 13:10
  • @Midas Yes, sorry. I've edited the question.
    – MJB
    Apr 19, 2016 at 13:11
  • this is quite broad at the moment. do you mean the whole web page background?
    – Dave Haigh
    Apr 19, 2016 at 13:20
  • It will also vary quite wildy depending on if it is a simple texture or a fullpage image, if it is a bank/eCommerce site or a portfolio, etc. However, I do not have the research for the answer.
    – DasBeasto
    Apr 19, 2016 at 13:32
  • As others have said, probably hard to find real data on this. However, for what it's worth, there are examples of patterned backgrounds that work well, as well as ones that make everything harder to figure out. I can only recommend this one: userstyles.org/styles/35345/stackoverflow-dark - use it with the default background pattern. Text is directly on it for the OP but there is a flat color background for answers. Personally, this is the theme I use for stackexchange and I think it's an excellent example of a non-flat background that works with text.
    – mechalynx
    Apr 19, 2016 at 17:12

3 Answers 3

Reset to default
8

I'll just quickly point out three points:

It'll look less clean.

I mean this both figuratively and literally. Anytime you add more visual information to something it becomes more cluttered. This is why with very data-dense interfaces people often choose for flat design; it alleviates the business a bit. Secondly, some patterns can actually make it look as though you have some smudges on the screen.

Colorblindness:

Having subtle-ish patterns can help distinguish areas for people with colorblindness.

Here's a very fabricated example: enter image description here Most people will see the difference between red and green just fine, but these specific shades look exactly the same to deuteranopes:

enter image description here

But as you see, a subtle pattern will help them distinguish the two a bit. Of course you shouldn't rely on just pattern, make sure the hues are somewhat discernible, have brightness contrast etcetera... but this here is just to show the effect a pattern has.

Scrolling:

If you have a background pattern it becomes more clear which elements are moving and which are still. For very minimal/empty sites this can be beneficial, to give users a more 'grounded' feeling.

But there can also be downsides. For example, Smashing Magazine uses a very small tiling background image, only 100x100px, which generates a sort of pulsating effect.

Improve this answer
3
  • Thanks for the in depth answer, it helps making a decision!
    – MJB
    Apr 19, 2016 at 14:41
  • Yeah, a contrived example, but I can still see a difference between the top and bottom of your image. Maybe if my monitor and settings were perfectly calibrated, it would blend better. Imperfect calibration/metamerism can also be alleviated with things with a less-clear definition, a la Ishihara tests.
    – Nick T
    Apr 19, 2016 at 19:30
  • @NickT Congratulations on being able to see that marginal difference. -applauds- Many people wouldn't, so it's close enough to make my point. It certainly won't pass WCAG. I had to predict what color it would end up as when selecting my red color, and I wasn't going to spend half an hour on a quick mockup.
    – PixelSnader
    Apr 19, 2016 at 19:44
2

You're probably not going to find data on this, because it's not the kind of things that publishable studies are usually focused on. If you're really lucky, some hyper-productive UXer will have turned some test data into blog post, but even then, the sample size will probably be small.

This is a case where you have to make decisions based on the application of general principles.

This Smashing Magazine article on the Whys and Hows of Textures in Web Design provides an excellent overview of some principles of textures and refers to them as

a simple and effective way to add depth to a website

The take away is that, when used effectively, texture is a very useful tool for manipulating a user's attention, but care should be taken so as not to overdo it.

As is so often the case in design, less is more.

Improve this answer
0

the aim should be to help to user focus on the content or features on the website, not distract them. the background should take a very low priority in the user cognitive load, like the name "background"

Improve this answer
1
  • Even though this might somewhat true, it´s not as simple as that. A background can most definitely have a purpose, and enrich the user experience if done right.
    – MJB
    Apr 20, 2016 at 7:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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