5 ms·
User Motivation Determines the Best Color Scheme for Your Website
- shasta 14y agoAuthor: Search for "pleasuraigh".
- yuchi 14y agoThe article was pretty, but too many typos in it to count... EDIT to --> too
- tommikaikkonen 14y agoAuthor here, thank's for pointing that out. I just put my blog online yesterday morning, and this was an article that I had written back in the summer in HTML markup. Seems like there were some conversion errors to Markdown that I didn't notice. Erroneous: Research shows that consumers with a utilitarian motivation find a low-arousal environment more pleasuraigh-arousal one. Fixed: Research shows that consumers with a utilitarian motivation find a low-arousal environment more pleasurable than a high-arousal one.
- aristus 14y agoUtter bullshit. The original background color of websites was #c0c0c0, the same default color grey used in desktop apps. It was a big to-do, switching that default. The reason most sites are blue is because the human eye is better able to distinguish shades of blue. Also, a significant % of people are red/green colorblind.
- chewxy 14y agoI think blue is also a colour that inspires trust across cultures, which is why blue is so prevalent
- eru 14y ago> The reason most sites are blue is because the human eye is better able to distinguish shades of blue. Than what other shades? I thought humans were good at shades of green? Anyway, do you have any sources?
- 0x0 14y ago16bit RGB graphics modes allocate an extra bit to the green channel, so I think you're right: http://en.wikipedia.org/wiki/List_of_monochrome_and_RGB_palettes#16-bit_RGB http://en.wikipedia.org/wiki/List_of_monochrome_and_RGB_pale...
- tzs 14y ago> The reason most sites are blue is because the human eye is better able to distinguish shades of blue. Huh? It's shades of yellow/green that we are best able to distinguish. We're not good at blue.
- HCIdivision17 14y agoYup. Mind, color is _really_ complicated. The math to calculate color spaces is completely non-obvious, the eye's reactions to colors is subtle, and the brain seems to interpret colors in interesting ways. (I remember at work, we needed to figure out why a thing was getting _more_ red as we shifted it into the blue spectrum... turns out that's why they call it ultraviolet.) I'll refer to a cool demonstration of this in action: http://news.ycombinator.com/item?id=1891753 http://news.ycombinator.com/item?id=1891753 It's not scientific, but it's certainly telling. TL;DR: Green is the color we see well.
- olgeni 14y ago> Why the Web is White "And what happens if the Twitter mob finds out..."
- cool-RR 14y agoIt makes me incredibly sad that people are willing to stare straight ahead at a fucking lightbulb (a.k.a. sites with a white background) and destroy their vision.
- yuchi 14y agoThere's a lot to discuss here. I personally cannot read through light-on-dark digital designs. After a few lines everything blurs. With dark-on-light on the opposite I can read for hours. Most probably is due to a non-optimal screen both at home and work-place, but I suffer from the same issue even on 2010 iMacs. But the most pleasant scheme for me (I mean, my eyes) is light-gray-on-dark-gray.
- chewxy 14y agoIt's the contrast between the text/content and the background that affects your comfort though. There was an article about how you should never use black for your text on a white bg[0]. I think the points there are rather salient. In fact the W3C has a good calculator for colour contrast [1], which I think is a good guide for calculating colour contrast when designing sites [0]http://ianstormtaylor.com/design-tip-never-use-black/ http://ianstormtaylor.com/design-tip-never-use-black/ [1]http://www.w3.org/TR/WCAG20/#contrast-ratiodef http://www.w3.org/TR/WCAG20/#contrast-ratiodef
- kyberias 14y agoI think there are no points in [0] what so ever to support the claim than one should not use black (#000). The author does not argue at all. All he does is present a photo he has taken which does not have black pixels. What the hell is that supposed to prove?
- yuchi 14y agoI should redirect you to the interesting discussion happened on Ian's article here on HN. About eye stress.. that's another story. Could anyone here point us to a scientific paper out there?
- nviennot 14y agoOne must take in consideration the environment of their users. Try to look at a white screen while being in dark place. It hurts.
- chewxy 14y agoI believe that is more the function of brightness and contrast than colour. I mean, other than really dark colours, any colour with high brightness hurts in a dark environment
- eru 14y agoUse redshift or flu.x or so.
- StavrosK 14y agoI use redshift religiously. Hint: install it during the day. Not having it will hurt after a few days.
- DustinCalim 14y agoI don't agree with Hedonism being the driving force behind dark websites. I prefer dark(and spend all day coding with a dark background) because it's easier on my eyes... The idea behind skeuomorphism in webpages mimicking paper has proven itself when the print industry attempted to carry their print practices over to the web and failed. The internet is still very young; I think what we will find over time as more and more people spend more and more time on computers is a departure from paperesque websites to a more functional design that is dark and physiologically friendly(easy on your eyes). Interestingly enough, the website in the link looks awesome using the Hacker Vision Chrome extension I use which is designed to do just that - it applies a dark theme to all websites so the bright white backgrounds don't destroy your eyes. Download Hacker Vision at: https://chrome.google.com/webstore/detail/hacker-vision/fommidcneendjonelhhhkmoekeicedej https://chrome.google.com/webstore/detail/hacker-vision/fomm...
- Frozenlock 14y agoWorks better than other alternatives I've tried! Thank you so much!
- shousper 14y agoThis seems very unnatural. Step outside on a sunny day and tell me we're not built (as a species) to function optimally in bright light. I'd even go so far as to say that several hundred thousand years of evolution would back me up. Otherwise, why can't we see perfectly in the dark? EDIT: typo.
- bcoates 14y agoIt's not so much that most of our field of vision should be light or dark as that we have a bias for light=detail/important, dark=background/unimportant. This has a slightly perverse effect when a computer monitor is placed in a real environment; looking around my environment (sitting in my cubicle at work) my laptop draws my attention like little else because it's so damn bright. Maybe websites bias towards light backgrounds because it discourages users from getting up and doing something other than browsing.
- 14y ago
- iota 14y agoThe fight against "default" white seems analogous to Ian Storm Taylor's recommendation to never use black (http://ianstormtaylor.com/design-tip-never-use-black/ http://ianstormtaylor.com/design-tip-never-use-black/). I prefer off white (e.g., #f9fafc) because of the same reason I like text color set at #333 — it looks softer, but still almost imperceptibly different from #fff/#000's traditional "paper and ink" aesthetic. http://www.colorcodehex.com/f9fafc/ http://www.colorcodehex.com/f9fafc/ http://www.colorcodehex.com/333333/ http://www.colorcodehex.com/333333/
- bravura 14y agoI believe in using a black background for talk slides. Example: http://new.livestream.com/gigaom/gigaomroadmap/videos/5794034 http://new.livestream.com/gigaom/gigaomroadmap/videos/579403... I would prefer dark gray from an aesthetic perspective. But the reason I choose black is simple: Often, the LCD projector is not pointed straight at the backdrop or maximized correctly. If your slide background is not black, there is a perceptible margin, and your slide area is shaped like a trapezoid, not a rectangle. Using a black slide background minimizes this margin, and makes it look like your slides correctly fill the backdrop. Just my two cents. I'm curious if people feel strongly against this approach.
- statusgraph 14y agoWhite on black is very hard to see in a brightly lit room. Many programming talks like that color scheme and it just doesn't work with crappy projectors.
- MrScruff 14y agoI force all sites to display as something like #E0 on #28. I find it far easier on my eyes. I use a Firefox extension that lets me switch back to the original scheme with a shortcut for the few sites that don't function when you override the colours.
- lucian1900 14y agoBecause of the historical accident of paper being white and ink being dark. The human eye is somewhat better at reading light-on-dark, but most people aren't used to it.
- StavrosK 14y agoI get weird lines after reading light-on-dark for a while.
- chewxy 14y agoI think it's been overly stated in this thread, but it would appear that the majority of the problems with dark-on-white are the brightness, contrast and luminosity of the designs. W3C apparently knew this was a problem and had provided an algorithm to measure relative contrast/luminosity, which is good to play around and test with: http://www.w3.org/TR/WCAG20/#contrast-ratiodef http://www.w3.org/TR/WCAG20/#contrast-ratiodef
- majormajor 14y agoBut there's also the historical accident of early computers primarily using light-on-dark displays (I always found amber-on-black mode less harsh on the eyes than green-on-black, personally—but just don't get me started on white-on-blue, bah!), which we then moved away from in favor of dark on light. (If I had to guess the reason for that historical accident, I'd think it had to do with "white" not being a particularly uniform color on a lot of older CRTs, but one with varying hue and intensity in different regions.) I find light on dark hard to read, even in low light. If I'm reading on my phone at night and use light-on-dark, the text looks blurrier to me than if I change it to dark-on-light (where "light" is a shade of gray that isn't harsh in a dark room). (I wonder if dark ink on white paper took off over white ink/paint/whatever on dark paper because most people found it more readable. Anyone know about the history of paper/inks/paints?)
- hollerith 14y ago>If I had to guess the reason for that historical accident, I'd think it had to do with "white" not being a particularly uniform color on a lot of older CRTs, but one with varying hue and intensity in different regions. also, the earlier monitors flickered more than later ones, and the flicker was more troublesome when the default/background color was light.
- kintamanimatt 14y agoI wonder if these color schemes are chosen primarily because it's what's traditional and expected; we don't like to surprise our users/customers as it may induce negative feelings, including a lack of trust. For example, we expect a fashion website to look different to a web app, and when something is discordant with our preconceived notions we trust it less. I think that typically designers intuitively go for a less-surprising aesthetic rather than an atypical one whose aesthetic induces a degree of trust-eroding cognitive dissonance. The one utilitarian site I can think of that breaks the author's pattern is Wufoo; bold colors, utilitarian purpose. They seem to be quite successful too. Having said that, a single counterexample doesn't diminish the validity of the author's central thesis, but it might just be one notch in the larger key.
- chewxy 14y agoI don't disagree that designers choose a less threatening aesthetics that incorporates familiarity. Pandering to the lowest common denominator eventually leads to the most familiar of features - GOOG is just a box and two buttons, for example. I would also argue that the Formerly-Known-As-MetroUI pattern is also rather utilitarian. It was designed to have a low information density, but highly relevant information - that is to say, show less, but show higher quality information. Too bad people have constantly misused those great ideas in patterns tho