Topic Archive: Color

Design can be Used for Good and Bad

Sholom Sandalow, Thursday, January 3, 2008 @ 4:49 pm

Every so often I'm rudely reminded that much of the information I get comes from a source who's goal is to sell rather than inform.  It is those times that I'm also reminded of the critical role that design plays in supporting the goals of the organization (wether they be to inform or to sell) by shaping user behavior.

Case in point.  I use Yahoo Finance to track my stock portfolio and stay financially abreast of the day.   I choose Yahoo over the many others out there because I'm used to it.  It has a simple interface and I know where everything is located.  It also has great tools, and it aggregates information from many many other sources in one place, which I find invaluable.  However I just recently noticed that Yahoo Finance is serving some text ads on the site now.  I wouldn't otherwise be too bothered by them, but they've been designed for the express purpose of looking like real (un-sponsored) content.  They're right up there on the right hand side of the page, occupying the top of one column in a three column layout.  The ad titles are just about the same color as the headlines and links on the rest of the site.  And while the other section titles are all orange and bold--designed to give structure to the page and let you know what section your in-- the only way you can tell that your reading ads is from the truly inconspicuous (light-grey on light blue, thin, all caps) 'Advertisement' header.  

This really infuriates me, especially because it's a finance site, and I can't help but notice the content of the ads.  For instance, right now I'm looking at the front page, from left to right I see a snapshot of the Dow's performance today, a headline saying 'Stocks mixed ahead of jobs report' and a couple of blurbs on 'Hottest China Stock' and '16 Hot Dividend Stocks'.  Now I'm sure you can guess which ones are ads.  And yet I can't help but see the ads and incorporate them into my understanding of the days financial news.  They were designed to be scanned, and that's exactly the kind of information I need to be able to filter out when I'm scanning a page like this.

The fact that these ads persist is a clear indication that Yahoo is concerned less about an informed public and more about using its real estate to extract as much equity as possible.

Powered by ScribeFire.

• Digg
• Reddit
• del.icio.us

Comments (0)

user experience design

Color for Developers, part 3

Charles Field, Monday, June 11, 2007 @ 3:24 pm

Through a glass badly

"This is not a pipe."  R. Magritte

You are reading this on screen. It is not what I expected.

One of the biggest problems for any on-screen designer is the weird backlit medium we fish swim in. This is true if you are creating interfaces for browsers or desktop applications.

By now you are asking why, why does he continue to torture us with these vague allusions and puzzling suppositions. Well it is just my sick idea of fun, really, but here is a simple test. Make a pdf of your favorite picture of a human. Put it on a flash drive and walk around to a few of your colleagues computers and compare the different displays. Extra points can be scored in two ways:

1] try a PC and any other platform, Mac, SGI, Treo

2] try laptop, lcd and CRT screens. If you can still find a CRT screen, they are fading into the dust of time or the junkyards of third world countries as we speak.

Of course you will find that the image of Britney Spears moments after the haircut discloses an array of skull colors limited only by the number of screens it is displayed on.

Individual hairs may or may not resolve, and the level of contrast will have a happy variety as well. This is where you work. Every one of your users sees this differently.

So great, isn't that a big mess, can we please just ignore it? Well no, that isn't really playing well with others. What we need is a basic strategy for accommodating this tragic reality.

There are commercial solutions to calibration available, or most Adobe programs ship with basic calibration tools. These will help... but only you. There is no way of knowing if your users ever did this, and we know that asking is not a scalable strategy.

Unless you are in a highly controlled situation, in an industry where there is a financial benefit directly tied to color fidelity, you can bet that no one really cares.

So what is the solution?

1] Design it a bit crude. Don't expect someone's screen to display a reliable difference between zero, 10 and 20 percent black, that is too subtle. Try 0, 15 and 30

2] Test it. Test it some more. Don't beat it to death, but it can definitely be too subtle.

There we go. In a few short blogs the secrets of your universe revealed. You have grasped the remote from my hand, grasshopper, do not watch Jerry Springer with the powerful tools you have been given.

• Digg
• Reddit
• del.icio.us

Comments (0)

user experience design

Color for Developers, part 2

Charles Field, Tuesday, June 5, 2007 @ 4:41 pm

Color in context

Many moons have swung by since our last talk, grasshopper, and by now you have had those tattoos revised and replaced more times than Angelina Jolie. I can only hope you have been as politically corrupt and personally shocking, really, she is a role model to so many.

Today we will talk about color and perception, then later we will do the sacrifice part... Right, let's start with Kasimir Malevich, who had strong opinions about color or the lack thereof and put his money, [or the people's money] where his brush was. Painted such fashion nuggets as "White on white" and "Black square". If you imagine what they look like in your mind, you will be darn close.

So what was on his mind? Why bother? There are a couple of reasons:

1] Cultural
He was a Supremacist in Russia in the early part of the last century and thought that painting couches and side-tables was hopelessly bourgeois.

2] Psychological
He wanted to defeat his own preconceptions and create something new; a kind of meta painting that was both free of objects and depicting pure emotion.

Well can color or it's absence do that? What strange and magical powers does it have? Vassily Kandinsky, one of Kasimirs drinking buddies, associated some very specific things with color - he claimed that certain colors elicited thoughts/memories/feelings of particular sounds and feelings and made them into a handy grid.

Most people make some basic and reliable associations with colors; black associates with night, death and designers clothing. Red means fire engines and radio flyer wagons. These are cultural associations, that effect how we perceive and interpret our world. A blue light on your dashboard is understood as a fairly passive status light. A yellow light, blinking rapidly, means the engine is probably about to seize.

When we use these colors in an interface, all of those associations are carried along with it. A complicating factor is the cultural context it is being read in. Many cultures have very different tolerances and preferences for color that western europeans; any short description of these differences will be reductive, but think of these references: Jamaican villages houses, Bollywood movies, Japanese packaging... Would those local tastes effect the design of an interface for those groups? I look forward to your comments. Leave a donation for the gods by the planter.

• Digg
• Reddit
• del.icio.us

Comments (1)

user experience design

Ambient Signifiers

Alice Toth, Tuesday, January 30, 2007 @ 10:48 pm

I recently came across Ross Howard’s essay on ambient signifiers, subtle design elements that give the user context.  They work at a more subconscious level than overt signifiers; yet, even without a conscious effort from the user, their constant presence affords an effective means of communication.

The author’s musings came from his experience with the Tokyo rail network.  Along with a station’s obvious and somewhat standard clues (signage, train colors, audio announcements, etc.), each station has its own chime melody. By remembering the chime for their final stop (which they’re exposed to while waiting for the train) along with the chime for the station before their final stop (which they can hear when the doors open), commuters can more or less ignore the passing landscape and still be cued into their surroundings. Ambient signifiers allow them to maintain a sense of where they are without having to actively seek it out.

Moving into the digital realm, consider when a browser changes the background color of the location field once the user is on a secure site. It’s a subtle change, but once the user associates it as an indicator of a secure site, a quick glance at the field will reinforce that they’re in the secure portion of a site.

The challenge is how to integrate this concept into your web design methodology. Overt signifiers, such as navigation, will always be necessary but perhaps we should also develop a vocabulary of ambient signifiers as reinforcement. A deepening of background colors to indicate sections a user visits often; a lightening of colors to indicate links to older items; differences in font size to show depth of a category, etc. Once you start thinking along these lines, you realize there are a number of ways to incorporate this concept into your design, aiding in the effective use of the site or web app.

• Digg
• Reddit
• del.icio.us

Comments (0)

user experience design

Color For Developers, V1

Charles Field, Wednesday, June 7, 2006 @ 4:17 pm

It is time to open the temple.
The secrets of the art ones can finally be spoken. Having gone to a school that was too expensive then and ridiculously so now, I am a fully qualified shaman of these mysteries. Line up to the left of the Hibachi and keep the coals smoldering.

The great truth is an anthem that has rung true from the beginnings of byzantine painting to the abstract impressionists:

Warm colors advance, cool colors recede.

That is the first axis. Hue, the amount of color & it’s context are primary definitions of what will be perceived in which order.

Sounds simple, doesn’t it? Like a little saying to remember a musical scale, it is easy to recall. It happens to be the basis of hundreds years of painting explorations, which influenced a couple of formal design philosophies - what some people call Swiss Modernism & the International Style.

The real connector here is a Mazdaznanian cultist employed by the Bauhaus - Johannes Ittens. In a nutshell, he liked to draw mandalas and label them. Now we call them color wheels. His codifications of color theory have been disseminated by Bauhaus students who became teachers, and their students, globally since 1919.

Historical theatrics aside - I am trying to pad this because it is really pretty straightforward - warmer colors dominate your attention. But wait, there’s more.

The other axis is a cognitive one that is more elemental than color - our perception of contrast.

The highest point of contrast becomes a focus point as well.

This is strictly about tone; the interplay of light and dark. Shape and scale work in a different way; context is more important here. A good example would be stars - not that bright or large, but you can’t help but notice them.

So imagine two sliders, one that goes from warm to cool colors, one from high to low contrast. High contrast and warm colors converge at one end of the slider, but cool high contrast areas can dominate perception if the context is controlled.

Additionally, the scale is relative. In a very pastel environment, we are still biologically compelled to compare & discern. We will look for the warmer tones & highest available contrast.

So there you have. Welcome to priesthood, those tattoos will heal in a just few weeks, and you’ll be ready for the piercing.

• Digg
• Reddit
• del.icio.us

Comments (4)

user experience design