8

We've recently launched a redesign of a popular forum, and a lot of users are stating that the redesign is now too bright for them to read, which is obviously not good for a forum.

Here's a typical post and a screen shot of the site:

enter image description here

Large version

We deliberately made sure that we didn't deviate too much from the old site, for instance the white in the background is the same white as the old site, and we made the text darker. We did make the font black, and change it to open sans, but I would have expected this would have improved the experience of the site not dampened it? The only other thing that changed is the blue around the site, which I'm wondering is making the site feel brighter?

Are there any tips to make a site feel less bright or improve the legibility?

I've gone through these related questions:

And the one thing I have changed from that screen shot is to stop using pure black and use a softer shade instead.

Community
  • 1
Alan Hollis
  • 181
  • 4
  • 3
    I am curious to see an actual screenshot of what it looked like before. – Roger Attrill Jan 24 '15 at 13:01
  • 1
    this https://xenforo.com/community/ :) that's not the site in question but that's the stock theme we were using. – Alan Hollis Jan 24 '15 at 13:02
  • 1
    Welcome to the site, @Alan! Your first link was broken, so I've redirected it to what I thought you meant to point at. If you meant to point at some other article, feel free to fix it. +1 for a concrete, answerable, researched question. – Graham Herrli Jan 24 '15 at 17:30
  • Established online communities hate change. This isn't necessarily a sign that your design is any better/worse than before. It's more of a sign that the change process wasn't maybe managed as well as it could have been with the members of the site. – DA01 Jan 24 '15 at 19:25
  • 2
    The old theme was a tad bit gray (rgb(252, 252, 255)). Try darkening it to an off white... – Anonymous Penguin Jan 24 '15 at 21:09
  • Third choice: Let users select a classic theme in their preferences. You can't please everyone :) – Navin Jan 25 '15 at 06:25

4 Answers4

7

Contrary to the other answers in here, I'd say there's nothing particularly wrong about your site's color choices.

We spend all day looking at light backgrounds and dark text (MS Word, StackExhcange, lots of IDEs, etc.)

I have a hunch people aren't complaining about the colors on your site. They're complaining that you changed the design of their site. 'Their' site is the key factor here. Any succesful online community will include a large member population that feel that this is 'their' site. And this is justified. And no one likes it when someone comes and changes the design of your site.

My guess is that they're more upset about change--not what the change is specifically. In the future, be sure to manage change when you have a large online community. Make sure people are aware of what's coming. Open up beta access. Etc.

At this point, compromise. Lighten the text slightly and/or darken the background slightly. Make it feel like their complaints were heard and some change was made in response to them.

DA01
  • 41,799
  • 5
  • 81
  • 142
  • I think there might have been some of this, we were lucky in that our members really helped, and we were able to listen and iterate quickly on the things which the majority were saying needed fixing. :) It's been a good learning experience for me :) – Alan Hollis Jan 24 '15 at 20:51
6

What causes the issue is staring at a very bright background continuously. This causes the cells at your retina to get tired, which makes reading almost impossible.

There are two fixes:

  1. Avoid using large very bright backgrounds (duh!). Any large surface should be something other than bright white.
  2. Variation. The issue is not really caused by something being too bright. (As you said you used the same white.) It is caused by the users only looking at something with a bright background all the time. There should be darker surfaces people look at, so the eyes can rest. Large images, titles with colored backgrounds, sidebars... doesn't really matter what as long as it is something people spend time looking at, so that they do not spend all their time looking at something bright. Optimal for reading might be making the font very large, as that would give your retina lots of variation and proper average brightness, but it isn't really usually practical. You can also give the background subtle low contrast texture.
Ville Niemi
  • 309
  • 1
  • 5
  • I really like the subtle texture idea, I might well give that a go. Also as you state I think the site is "cleaner" now than it was, and because we have less dark patches that could be causing fatigue, another thing to investigate. Thank you :) – Alan Hollis Jan 24 '15 at 14:33
  • 1
    Do you have citations for this ("cells in your retina getting tired")? It goes against most everything modern GUIs provide (we spend most of our day staring at bright backgrounds with dark text) – DA01 Jan 24 '15 at 19:26
  • 2
    Aren't we looking at a white background with dark text right now as we read your answer? – Dane Jan 24 '15 at 21:01
  • Actually, this text is #333 gray, which lessens the contrast. Hmm. – Dane Jan 24 '15 at 21:09
  • @Dane Just to be clear, the issue is not with "black text on white background", the issue is with the ratio of time spent looking at white versus looking at something not white. The cells get depleted of calcium (and enriched in sodium), that prevents release of glutamate, and eyes see "blinding bright". You look at something darker, sodium channels open, a bit later the calcium channels open, and bit later glutamate is released. Balance is restored. More time you spent getting depleted on calcium, less responsive your eyes get on small dark shapes and harder it is to read fast. – Ville Niemi Jan 24 '15 at 21:32
  • @DA01 See above and for a citation, I must admit I totally forget what this is called and can't find it (it is one of those days... my google-fu has abandoned me), but you can read on Visual phototransduction to see the fundamental issue, which is that the cells work with ion flows that are supposed to balance out, but won't if one type of stimulus dominates. I probably should rewrite my answer as both you and Dane seemed to misunderstand my point to mean that black-on-white by itself is an issue. – Ville Niemi Jan 24 '15 at 21:38
  • 2
    In fact, it is not about contrast or even brightness. It is too much white, which contains all colors and stimulates all photoreceptors, all the time. – Ville Niemi Jan 24 '15 at 21:43
  • 1
    @VilleNiemi It's all very interesting science, but I don't know that it really fits the context of the question. Again, this isn't something out of the ordinary. Most modern GUI's have rather bright backgrounds and rather dark text--not to mention that most printed content is exactly the same. – DA01 Jan 25 '15 at 01:59
  • @DA01 It isn't an issue to have black on white, as long as we spend more time looking at the darker parts. If you look at the design, people reading the text would be mostly seeing the white background all the time, the text does not cover enough area and there is nothing else to really break it. Comparing to stackexchange (also near black on white), it is obvious this site has lot less white on the part people focus on. Also, Rogers explanation might be better for the Twitter part tbh. I am just focussed on the people seeing it too bright part. And that is due to large expanses of white. – Ville Niemi Jan 25 '15 at 09:51
  • @DA01 Actually, looking at just how low the text per area ratio of the site is, maybe using a larger font would be a good suggestion to make? //EDIT Also, paper doesn't glow, it uses reflected light and isn't usually that bright, our eyes just automatically compensate for based on ambient light so we know it is white even if it really looks grey or even pink due to lighting. So this issue really can't happen with paper, just with media that can be brighter than ambient light. – Ville Niemi Jan 25 '15 at 09:54
  • @VilleNiemi I get what you are saying, but it's not unique to the layout of that particular site. Lots of sites--not to mention things like MS Word--are laid out that way so it'd be extremely odd that this particular issue of sodium channels and ions is the cause of people not liking this particular site. – DA01 Jan 25 '15 at 18:05
  • @DA01 The layout is one part of it, but the more important part is the usage pattern. Something used for typing will typically have user take breaks from staring. And if the screencap is typical the text to background ratio of the site was lower than normal. The same was actually true of their previous style, but it had slightly more varied backgrounds. Am I really only one who has been specifically told not to use white backgrounds for websites because people will complain? – Ville Niemi Jan 25 '15 at 18:32
  • @VilleNiemi lots of websites use white backgrounds. That's why I'm skeptical here. Not that you are incorrect, but it's odd that if this were the reason people were complaining about the OP's site, then they'd be complaining about hundreds and thousands of sites on the internet--not just the OPs. This is an interesting general answer about white backgrounds in general--but doesn't seem to address the specific issues the OP is having (given that it's a common thing). – DA01 Jan 25 '15 at 20:04
  • Let us continue this discussion in chat. – DA01 Jan 25 '15 at 20:04
3

It looks like you have improved the UI that it is actually more readable now than before. You have changed from serif font to sans-serif which increases readability on screens. The factors that effect readability are the following:

  • Choosing a legible font

  • With legible font size

  • Sufficient contrast

  • The right length of lines

  • Distinct sections

Reference: Impact of Fonts and Readability on Conversion

But maybe your complaining users expected something else. Maybe they want the ability to change the UI themself using diffent themes on the site which, if you are signed in, can be managed under a settings menu. There are a lot to chose from when it comes to readability and color schemes. It doesn't have to be black on white. The following is a colorful example (even if I wouldn't chose them) of black text on colorful backgrounds that all passes contast ratio in order to be readable.

enter image description here

Ref: Black Text on Colors that just pass at several contrast ratios

More examples are found in Google's GMail app theme settings

enter image description here

That's just a few ideas that comes to mind. Another way would be to simply ask your users in a survey what they think of your brand new design, and what they feel are missing...

Community
  • 1
Benny Skogberg
  • 54,996
  • 22
  • 140
  • 241
  • This is a great answer :) Thank you! I think we should do a poll, we've certainly had a lot of discussion take place about the redesign which helped us get to where we are now. – Alan Hollis Jan 24 '15 at 13:51
  • @AlanHollis Your Welcome! It's never wrong to ask your users :-) – Benny Skogberg Jan 24 '15 at 14:48
2

I think what could be happening is that combined with the change from serif to san-serif and the use of quite a black font on a virtually white background is causing a ghosting contrast problem especially when moving on to sites with quite a light font.

The sans-serif font results overall in more ink on the page because the strokes are a constant width, so the 'squint' effect is of a very dark grey. These examples are as a guide, but here's the sort of squint effect you might see (on the left):

enter image description here

Meanwhile, the serif font results overall in less ink on the page because there's thin strokes in the detail and so the 'squint' effect is of a mid to dark grey.

enter image description here

When you read text which is quite dark and it's against a very light background, when you look away at another light area, you see a set of ghost lines - something like this:

enter image description here

Now Twitter has an even lighter font, although it is sans serif, so the overall squint effect might be like this:

enter image description here

Now - notice that Twitter has a different line spacing to your forum.

So if someone reads your site for a while and then switches to Twitter

  • a) They're already getting eye strain from the high contrast
  • b) The ghost effect is greater
  • c) The line spacing is different
  • d) The font colour on Twitter is lighter

The result is that many factors are falling into place for there to be a rather nasty interference pattern which takes some time for the eye to adjust to whilst the ghost effect fades away.

enter image description here

Depending on where you look, the interference pattern may be reduced or compounded, resulting in a kind of swimming effect making it hard to focus on some areas.

Hard to say this is definitely the problem, but there's a good chance this is at least not helping the situation!

See @BennySkogbergs answer for the rest of the story :)

Roger Attrill
  • 71,049
  • 15
  • 151
  • 246