I am taking the Girl Develop It course Intro to Game Development on Tuesday evenings. Yesterday, we talked about color in the graphics and how it can be used to convey various things to the user. Color has three aspects: hue, saturation and brightness. Hue is what we typically mean when we say “color”, e.g. a color is red or blue. With greater saturation, a color looks more “pure” and with decreased saturation, a color appears more washed-out. Brightness is measured in percentage from black (0) to white (100). In videogames, the features that the developer wants the user to understand are important, e.g. an information button, are bright. Objects such as jewels will be at 100% saturation, whereas the background will have low saturation. Another important measure is contrast: the difference in luminance (defined as the perceived brightness of a color), or actual color between elements. Objects in the background will be at a lower contrast than objects in the foreground. How do these principles carry over to web design?
Certain properties add depth to an otherwise boring design. The box-shadow property adds depth to e.g. a picture frame when applied along the x-axis and y-axis. Applying multiple box-shadows to the same element can create an outer glow effect that makes an element such as a button on a form, appear 3D. Text-shadow can do the same thing for words. However, while both of these features can add depth in a way that attracts the user’s attention, the 3D look can quickly become ugly. For example, if you apply too much blur with text-shadow, it makes the text very difficult to read. Similarly, using a busy background image to enliven your website will unfortunately make your text unreadable (something that I am still struggling with in my designs). But there are consistently positive ways that you can use color to communicate with the user. As with videogaming, a good general principle is to use bright colors sparingly, or risk overwhelming the user. Color is also useful for grouping items together, according to meaning and context. For instance, on my Pruning website, I clearly use different colors for different sections of content. In Psychology, there is a set of principles called Gestalt Laws of Grouping. The Gestalt Law of Similarity states that objects that physically resemble each other are seen as part of the same object. This is one reason why an external CSS stylesheet is so useful, because the developer can easily keep consistency in the styles that can be applied to all of their web pages. By using styling to clearly communicate context, the user knows that, for example, every time they see a dark blue, bold, Sans-serif font title, it links to a corresponding Wikipedia article.
The Neuroscience behind grouping items according to color is very interesting. Neuroscientists refer to a hypothetical neuron called a “grandmother cell” that only responds to a highly specific stimulus, like a picture of your grandmother. What started off as laboratory jargon and a joke, is now being taken more seriously in neuroscience journals. There is evidence that there are specialized regions of the cortex for specific stimuli and one of these is area V4, in the occipital cortex, which processes color. There are two schools of thought on sensory processing in the visual cortex. In one model, in addition to a color processing area, there are areas of the cortex which seem to be selectively attentive to motion and stereoscopic disparity. The model states that these areas all process each attribute of an object in parallel. The other school of thought suggests a more distributed area of activation, and refers to studies where lesions in cortical area V4 did not lead to a complete inability to see color. However, enough evidence supports the idea that area V4 plays some role in the analysis of color information and that there are corresponding areas of the brain that process certain shapes or motion. Our brain’s ability to focus on features such as color in our environment, gave us an adaptive advantage in being aware of danger in our surroundings. And as I discussed in my first blog post, this is one of our most powerful motivators. As web designers, we can use this to our advantage to use color to communicate context. For a good example of this, check out the CNN website which uses Gestalt Law to present different areas of subject matter on their website.
So, to recap:
- Don’t use too many bright colors together (or too many colors in general) and don’t go overboard with effects like box-shadow and text-shadow or background images. It will just make your website overwhelming and unreadable to the user.
- Do use color to group relevant content together. In the same way that we know that the Virgin America logo is dominantly red and the Yahoo logo is dominantly purple, we understand that color identifies things that go together.