Colors, their schemes, and contrasting arrangements play an important role in increasing, or depressing, the Desirability of a product. Colors play an important role in invoking emotions, conveying themes, and guiding messaging.
Quick-UX provides for the rapid, simple and quantifiable assessment of a product’s User Experience (UX). In answering the question of Desirability, "Do I want it?" the sub-category of Color Scheme plays an important role.
For Example: Midwest SCUBA
Midwest SCUBA Center presents both an interesting first impression and simultaneously great example of a Poor Color Scheme.
The most prominent colors on this page are blue, white, and red.
This product starts off well enough with its selection of colors in the header, with a high contrasting, easy to read, blue on white, Color Scheme to present the center’s name, explanation, and some contact information.
But, then the product’s Color Scheme goes off the deep end. The colors of red, white, and blue, in the manner fashioned, do not, pluck the heartstrings of patriotism, but may cause one to be concerned with other matters of that organ.
Not only does the secondary color of the page, red, not mesh with the theme of swimming, and not only is it often used in association with alerts and warnings, but when a user is presented with the overt imagery of red in water, that user may be first inclined to think of Jaws. Learning SCUBA may be sufficiently nerve wracking without this unnecessary association.
Associating the instructor and their lessons with the red in the water is not the messaging a SCUBA school wants to convey.
The blinding color scheme is so bad and distracting that it actually hides other somewhat more legible sections of the product. A grey button, that somewhat more legible component towards the bottom of the view, presents the bold option to ‘Continue’ for those daring enough to dip more than a toe in these waters. And, for those adventurous souls, they will discover another set of pages and menus.
Unfortunately, the bulk of the content on this page, with yellow on blues , is also very difficult to make out.
Should Do
For all of the colorful problems that this product presents its users, the solutions can be simple to implement.
- Overall, the high water graphic that is being used as the background will cause color matching problems with many color schemes. Replacing this image with a single color or making sure that no text is ever presented directly on top of the water image, but always has a high-contrasting, simple background to play off of would be a good start.
- On the initial view, the user would be better served through the elimination of the strong, attention grabbing red, and implementation of high contrast color pairs like white on blue or black on white.
- On the secondary view, as red did not play well with blue, neither does yellow. Here too, the user will benefit from experiencing higher contrasting text; but, my preference remains eliminating or masking the water imagery and shifting to a more eye friendly font color, black or white or blue (of course paired with a contrasting background).
Quick & Useful
The variables Aesthetics, Layout, Color Scheme, and Typography represent the Usefulness category of Quick-UX for the evaluated product. When looking at an entire product, the question “Do I want to use it?” represents only 1 of the 3 core components (Usability, Usefulness, Desirability) of a Quick-UX evaluation – a rapid way to obtain concrete and comparable means by which to assess a single product or compare its strengths and weaknesses to other products.
Over the next few weeks I will be various good, as well as bad, real-world examples of use of Color and Contrast in online products and websites …
Poor Color Scheme
Fair Color Scheme (Cluttered)
Fair Color Scheme (Mismatched Color)
Good Color Scheme (First Example)
Good Color Scheme (Second Example)
Subscribe now (click here) to make sure you don’t miss any part of this series exploring the Desirability and Color Scheme components of Quick-UX, the quick and easy method of generating quantifiable and comparable metrics representing the understanding of the overall User Experience of a product, as well as other insightful posts from The Product Guy.
Enjoy!
Jeremy Horn
The Product Guy
| Add to Social Bookmarks: |  |
 |
 |
 |
 |
 |
The Product Guy 
Quite simply.. the creator of this website is neither a designer nor a programmer. My guess – The owner of the Scuba outfit found a family member or friend to quickly post some info..
You get what you pay for.. and in this case, he got a real “dive” of a site!
: )
LikeLike
This is not a problem of color scheme, though it may be argued that it is not the best scheme they could have come up with. No, it’s simply a problem of bad design. You don’t put a busy and highly-annoyingly-patterned dark background on a page you want people to read. Regardless of the effective color of that background, it will make the site hard to read. Do I want to read the site in red text? Not really, but I CAN read it if the pattern didn’t make me sea sick.
LikeLike
This IS an example of poor color choice. It has to do with how the eye perceives colour. Colours from the opposite ends of the colour spectrum should not be put together. The eye gets confused trying to focus between the long focal length of the red and the short focal length of the blue. This results in blurry text that is hard to read and causes acutal physical stress in your users which is something designers should try to avoid.
LikeLike
I agree with Krish, the resulting design problems are not inherent to the color selection, but instead are due to the application of the colors. Certainly, chromostereopsis is an issue on the depicted page, but this phenomenon can simply be negated by removing the red text from the dominant blue field – and say by placing the text over a white field, as done with “The Product Guy” blog (Drupal’s Garland theme). Similar color schemes to Midwest SCUBA have been used successfully on other sites. In this case, it’s not just about the colors you choose, it’s how you use them.
LikeLike
Yes, exactly Tom. The colour choice of red text on blue background is bad. Don’t do it. Highly saturated colours are also fine used in moderation for emphasis to draw the eye. When they are used over a large area, people don’t know where to look. All in all, this site is full of bad colour choices.
LikeLike
To continue, website usability research shows that users first focus on images of people, then on saturated colours. So when saturated colours are used over a large area people don’t know where to look on the page – this isn’t good. This is not my opinion, but the results of a ton of practical research that has been done on usability.
Just because other sites have used this colour scheme and people are able to use those sites, no matter how painful it is, doesn’t make the use of colour on this website OK. It isn’t.
LikeLike
It is not just the color, as mentioned above, but the poor use (or not used depending on your perspective) of white-space. As a user I am constantly moving around the screen and the use of the busy background is not useful. Imagine the site on a wide screen monitor.
LikeLike