What effect would a grayscale color scheme have on UX?

Question

I am thinking of designing a website that will have no color other than black, gray, and white (including links).

Will the absence of colors such as blue, green, etc. affect the user experience of my design? If yes, how?

Answer 1

I am thinking of designing a website that will have no color other than black, gray, and white.

May I ask what the rationale is behind this decision? The reason I ask is because I don't think a pure B/G/W is suitable for most commercial designs, unless client's branding fits that scheme. So before you decide to go with this route, make sure your design decision is appropriate for what you're doing.

Having that said, B/W sites can be beautiful!

Due to the lack of colors, a few elements may lose their typical affordance. So you need to consider them when it comes to styling:

Text Links

With color links, you can get away with not having them underlined. With black links, you need to either underline them(although this may introduce readability issues in a big block of text, with heavy linking), or style them differently. A typical solution I've seen is giving links a faint gray background color, or dotted underline with light color.

Buttons

Most minimalist B/W sites have a "flat" interface. So your typical 3D bubbly buttons may not look right with the overall design. If you are to go with the flat look throughout, maybe use a "flat" drop shadow as well. This way, you maintain the design consistency, and achieve the affordance on the buttons.

Readability

Some artistic sites use white text on black background. This is OK since the copy are typically short, and are meant for scanning rather than for reading. The nature of those sites are more of a showcase of photography or other types of art work. However for sites that are text heavy, I'd avoid doing a dark theme. I learned the hard way. I had to pulled the design due to overwhelmingly negativity feedback.

Images

If the content is user generated (as in, out of your control) then you need to consider if they'll look right with the rest of the site design. But typically this isn't too big of an issue.

There are probably more issues however, that's all I can think of right now.

---

There are some techniques you can use when it comes to B/W designs:

White Space and grouping:

Not having colors to accentuate the hierarchy of the elements on the site, you need to resort to typographical treatments and use of white space. I recommend reading The Gestalt Principles.

White as a color

This is one of my favorite techniques to use. If you make the site or content area background gray or light gray, then you can use white as the accent color. This buys you one extra color. Also the subtle difference between white and a light gray also establishes layout strucuture as well.

Bold photo statement

Obviously you can do this with a colorful site too. With the minimalist design that typical comes with B/W sites photos get extra attention. They're typically the corner piece of the site, or a particular content article.

Gray has temperatures

#e8ecec #ecece8

Gray is a magical color. Its neutral tone can change like an illusion based on the surrounding colors. In the case of a pure B/W design, you still can affect the site's mood by choosing a warm or cold gray. Of course, this is technically cheating since it won't be on a pure gray scale.

Use patterns

Just because you're stuck with a few solid colors to play with doesn't mean the site has to be bare. You can use subtle geometric patterns to give the site more visual polish. Of course, use it appropriately so it's not distracting. http://www.squidfingers.com/patterns/ has some excellent geometric patterns that can be easily converted to gray scale.

---

Here are some pretty good sites that showcase B/W Minimalist designs. (not all designs are pure B/W though)

• http://www.mnimal.com
• http://minimalexhibit.com
• http://siteinspire.net/showcase/category/style/greyscale
• http://inspirationti.me/websites/black-and-white
• http://www.hongkiat.com/blog/showcase-of-beautiful-black-and-white-websites

Answer 2

I think there could be one problem: Without any color it's quite hard to make states of objects obvious enough (e.g. active vs. inactive or link vs. visited link). I don't say it's impossible - but you'll need a clever graphical design concept.

Would be great to see with what you come up with!

Answer 3

It can potentially make it much more simple and easy to navigate as long as it is designed correctly. Using color is a great way to direct attention but is not necessary. Great user interface designs should be able to stand on their own in black and white. That is the true test of a great design.

Edit: A simple but very clean and sleek looking site is Jin Yang's Blog

Also check out this large gallery of black and white only sites: Not saying that all of these have great UX design, but most are pretty good and don't look old or dated.

Answer 4

There has only been some scientific evidence of color effect, mostly it's cultural, economic, and social. So, in this respect, the answer to your question is to know your user.

In terms of visual attention, I would argue that having a monochromatic design will not affect UX. Salience is an important factor when considering a design. And there are many dimensions of salience. One of which you mentioned.

Color is three integrated dimensions: hue, value, and saturation. If you alter the value of black, it will produce a range of grays. The contrast created is a highly effective aspect of salience. Some others are white space, pattern, and size.

In fact, a range of hues can be used in a design, but they do nothing in comparison to a range of values for directing visual flow. Biologically, only 2 degrees of our entire visual field can detect hue. The remainder detects light, dark, and pattern.

Case in point, a user will quickly learn to not attend to a full sidebar of vivid, flashy colors. Anyone who was online during the dot-com boom is witness to that.

Answer 5

It will definitely affect the user experience. I wouldn't say affect in a bad way. But it will affect the experience in terms of look and feel. Maybe film noir or some puristic bauhaus touch? For example black and white photographs always suggest "I'm old". Depends what style you'll use those "colors". It will be for sure a challenge and you should share the result. :)

Try to be very coherent with designing active elements. For example links, buttons etc. As you don't use colors you need a visual language that works with black and white and still shouts to the user: "Hey, use me, I am active".

Answer 6

Actually, if your thinking of letting go of color in order to persue a more balanced interface and focus on the overall UX instead of just coloring things up, it might even be an improvement to your interface. For those arguing otherwise, they might benefit from reading some texts from the bauhaus, constructivism and related movements.

Color has become 'cheap' in modern print and mostly in web design, so this has driven designers to think that they cannot achieve the same (or maybe better) results using monochrome layouts. Truth be told, if you're talented enough, you won't need any colors to convey your message in a site's design. Colors may enhance the connotative message you're trying to deliver, but again -if the design is well though out- the colors will only act as enhancers and not affect the main message. This might also be the reason to consider hiring a real designer for your site. Design is not only about typefaces and layout. Any bloke that's seen enough sites/print and has a tiny bit of common sense can copy stuff from here and there. It usually takes a bit more of knowledge/insight to convey the same message with limitations such as a monochrome site.

On a different topic, you might want to notice that #e8ecec and #ecece8 (mentioned in one of the previous answers) are not actually shades of grey. To be true shades of grey, they would need to have the same values for each of the 3 basic web colors.

#ecece8 is a shade of blue, and #e8ecec is a shade of red. True greys would follow the #xxyyzz pattern, where xx == yy == zz.

Answer 7

Having no color definitely affect the user experience in many ways. Like what other designers mentioned, colors help to indicate the interface states as well as directing users attention to certain elements. In addition, colors also create the mood or feel of the site. Ex. I like the color blue and therefore I like sites that has a blue color scheme.

However, it is certainly possible to generate the experience mentioned with just black, white and grey. It will be great to see examples of that.

Time to explore around..

Answer 8

Black/White/Grey sounds good to me, however, you will possibly not get as many click throughs as you may need if the text links are not in the conventional blue colour, some people will not get it otherwise.

One way that you could test your concept is to put your monitor into grayscale mode. My Samsung supports this - your monitor may not have that menu setting, but it will give you an idea of what the web without colour looks like.

You could also have different stylesheets, to give IE users the blue links and Mac users (that already have a monochrome interface) the grey look.

Answer 9

I personally liked B&W (read: grayscale) with small sprinkles of pastels for highlights; because if your page is mostly grayscale it becomes much easier to attract attention to particular elements by putting those highlights in color. On the other hand, colorful highlight in a full color page or a B&W highlight in a full color page is much more easily missed.

Answer 10

In my desktop application, I use color coding for quickly identifying different types of data, Examples: All positive currency amounts are green, negatives are red with a negative symbol to the left of the amount, blinking red data are warnings, important data is bright yellow, dates are cyan, all the field captions are white, etc.

I also use a black background as "high contrast" in order to make it easier for users to quickly locate data, while giving their eyes more rest!

In the screen shot below, I even use color coding to represent precious metals such as gold and platinum.