Using color to identify content, or types of action, or both?

3 Nov 2007 - 1:56pm
6 years ago
7 replies
1144 reads
Ben Hayes
2007

I'm working on a web app that has a brand color palette with 6 bright, bold
colors:

- very dark blue/black
- baby blue
- magenta/pink
- yellow
- orange
- lime green.

The app needs to have a young, vibrant feel to it and I've been thinking
about how to best use these colors.
One way is to use the colors to color-code types of action. Right now I have
the magenta to indicate 'action'. Green can mean 'save' or 'confirm' and
yellow or orange can be used for error messages.

But I'm also drawn to the idea of using the colors to identify types of
content within the app. So, for instance, user contributed opinions might be
orange; neutral, informational stuff might be light blue; stuff pulled from
other external sites might be yellow. That kind of thing.

I'm wondering if people have any experience or advice about how to approach
setting up design patterns using color. What are the good ways to manage the
potential conflicts between 'function color coding' and 'content color
coding'? Are there any good resources out there on this?

Another conflicting need, of course, is the need to make the page look nice
and balanced, and reflect the brand. Sticking to a strict functional color
scheme can make this difficult I think, because, for instance, many pages
may end up with very few of the colors and lack balance.

My usual approach is to use a much more conservative palette for most of the
screen real-estate (maybe light, de-saturated blues/greys) and use colors
sparingly. Then it becomes a little easier. But the bright, bold nature of
this brand means I'm being asked to have areas of solid, bright color on the
page, which seems tricky to me.

P.S. The IXDA beta website is definitely coming along - looks promising. One
usability gotcha right now is that, although you can reply to discussion
threads via the website, there doesn't appear to be any mechanism for
starting a new thread. Or at least I couldn't find it...

Comments

3 Nov 2007 - 9:07pm
Kel Smith
2007

Ben, are there any offline collateral or other materials you can
reference? Maybe a brochure or something to help you understand how
the bright colors could be utilized.

I tend to agree with your approach towards employing a more
conservative palette. Bold colors can be tricky to work with. You
might consider looking at some examples from this site to get a feel for how others approach similar challenges.
http://www.designmeltdown.com

Two things I would also think about, and these are very general
(since I don't know the specifics of your client/project). One:
color has different meanings in different cultures. For example, in
the US red means danger or warning; in China, it means good luck. If
your app is intended for international audiences, that's something
to consider.

Second: not sure if color blindness is an issue, but I always try to
be sensitive to that if I'm forced to use color to denote a section
or function. Vischeck is a pretty decent simulator.
http://www.vischeck.com

Not sure if I've been especially helpful here, but good luck.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://gamma.ixda.org/discuss?post=22134

3 Nov 2007 - 9:50pm
Ben Hayes
2007

Slightly confused here... I've had 3 replies to my post through
email, but on this page I have only completely different reply, that
I didn't receive through the email list... I suspect a bug?

Anyway, thanks for the replies.

Yes I'm definitely not planning to rely on color alone to convey any
information. It will all be supportive only. Things will also be
labelled with text (box headings, button labels, etc) and so on.

I guess I'm really more just grappling with how to use the color
palette. I sort of want to be consistent in using color. But since
these are bold colors, I'm a little concerned about doubling up
their usage. For example, using magenta to color error messages, as
well as a particular kind of content, seems like it might not make
for the clearest, most intuitive interface.

Perhaps I'm being a bit to logical and methodical about it. I guess
color is just one of many visual cues and it doesn't matter if there
are inconsistencies in this way.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://gamma.ixda.org/discuss?post=22134

3 Nov 2007 - 9:12pm
Daniel Yang
2007

Ben,

> I'm wondering if people have any experience or advice about how to
> approach
> setting up design patterns using color. What are the good ways to
> manage the
> potential conflicts between 'function color coding' and 'content color
> coding'? Are there any good resources out there on this?

I've tried using color to indicate types or sections before. The thing
to consider is that 7-10% of the male population is red-green color
blind, so that may be an issue. From the Universal Principles of
Design, "Do not use color as the only means to impart information
since a significant portion of the population has limited color
vision." Another thing I've noticed is that "average" people don't
notice color when it's used this way. Color tends to be more
subconscious and emotive so if you want people to consciously
understand your color-coding that might be another barrier. If you're
determined to use colors to convey categories, I would suggest using
color in conjunction with iconography or some other means of conveying
the same meaning just to be safe. If you are designing for designers
then color coding will probably work really well:)

-Dan

5 Nov 2007 - 5:44am
Caroline Jarrett
2007

From: "Kel Smith" <ksmith at lerningkerv.com>

: Two things I would also think about, and these are very general
: (since I don't know the specifics of your client/project). One:
: color has different meanings in different cultures. For example, in
: the US red means danger or warning; in China, it means good luck. If
: your app is intended for international audiences, that's something
: to consider.

Hi Kel

Totally agree with your point about thinking about colourblindness.

And also definitely agree that it's worth thinking about the different
meanings of colours in different cultures. Particularly if our notion
of 'culture' is established by carefully researching the actual
audiences that the site (or whatever product) is aimed at.

Only, do be wary about the advice on colour that you see, especially
if it's sweepingly based on different countries having views on 'the
meaning' of colours.

For example:
http://webdesign.about.com/od/color/a/aa072604.htm
"in the East, white is the color of funerals while in the West white
is the color of Weddings".

Well, it is and it isn't. You should see the Chinese brides in Hong
Kong lining up in their white meringue frocks in the prettiest public
park to have their photos taken, just like they do right here in the
UK. Point being: white isn't only the colour of funerals in the East.
And white isn't only the colour of weddings in the West. And "the
East" and "the West" are rather crazily wide concepts. Where does 'the
West' start and end? Iceland? Mexico? Greece? Do all of those
countries react similarly? And what about (say) hip young web
designers compared to seniors in all of those countries?

A few years ago, there used to be a piece of advice on colour that was
widely circulated but based its advice for the UK on colour ideas
taken from the times of the Tudors: several centuries out of date.

Best,

Caroline Jarrett
caroline.jarrett at effortmark.co.uk
01525 370379

Effortmark Ltd
Usability - Forms - Content

5 Nov 2007 - 9:34am
Parth Upadhye
2007

I haven't done the following but I think it will be an exercise worth
doing: Create an Excel sheet and list your content assign colors as
you want next to it in a column. Do something similar with you action
items too. I don't know about you but while working in color, I do
get carried away. Even if I were to start with the SIX colors you
have listed. Then take this exercise further and match the two.
Working on a clear sheet away from Photoshop will probably help you
in the design process.

All the points in the earlier comments are valid. I recommend you
either use Strategy A [content] or Strategy B [actions]. Mixing the
two will be confusing if the color palette remains the same. If you
create a different palette of colors for actions, this confusion will
be mitigated.

Personally I love solid colored pages especially if they represent
something.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://gamma.ixda.org/discuss?post=22134

5 Nov 2007 - 9:54am
Monique Escamilla
2006

I'm designing a user interface that will incorporate 12 web-based
software applications for a workers compensation insurance company.

The users have the need to open / view multiple applications at once.
One solution to this need is to design the interface with two panes
(one on top of the other) with multiple tabs per pane. A persistent
left navigation menu eats up too much real estate on the interface,
so we're thinking of offering a drop-down menu in each pane.

Does anyone have examples of effective / elegant drop-down menus
where users can select multiple options at once??

Right now, our drop-down menu looks like a simple layer with multiple
check boxes indicating which applications can be opened.

Thanks!

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=22134

6 Nov 2007 - 7:51am
Rafa Lopez Callejon
2006

In my opinion, yellow doesn´t mean error for people. Maybe red does.
You can check an expert opinion in Leatrice Eiseman books

On Nov 3, 2007 7:56 PM, Ben Hayes <jackfruitdesign at gmail.com> wrote:
> I'm working on a web app that has a brand color palette with 6 bright, bold
> colors:
>
> - very dark blue/black
> - baby blue
> - magenta/pink
> - yellow
> - orange
> - lime green.
>
>
> The app needs to have a young, vibrant feel to it and I've been thinking
> about how to best use these colors.
> One way is to use the colors to color-code types of action. Right now I have
> the magenta to indicate 'action'. Green can mean 'save' or 'confirm' and
> yellow or orange can be used for error messages.
>
> But I'm also drawn to the idea of using the colors to identify types of
> content within the app. So, for instance, user contributed opinions might be
> orange; neutral, informational stuff might be light blue; stuff pulled from
> other external sites might be yellow. That kind of thing.
>
> I'm wondering if people have any experience or advice about how to approach
> setting up design patterns using color. What are the good ways to manage the
> potential conflicts between 'function color coding' and 'content color
> coding'? Are there any good resources out there on this?
>
> Another conflicting need, of course, is the need to make the page look nice
> and balanced, and reflect the brand. Sticking to a strict functional color
> scheme can make this difficult I think, because, for instance, many pages
> may end up with very few of the colors and lack balance.
>
>
> My usual approach is to use a much more conservative palette for most of the
> screen real-estate (maybe light, de-saturated blues/greys) and use colors
> sparingly. Then it becomes a little easier. But the bright, bold nature of
> this brand means I'm being asked to have areas of solid, bright color on the
> page, which seems tricky to me.
>
> P.S. The IXDA beta website is definitely coming along - looks promising. One
> usability gotcha right now is that, although you can reply to discussion
> threads via the website, there doesn't appear to be any mechanism for
> starting a new thread. Or at least I couldn't find it...
> ________________________________________________________________
> *Come to IxDA Interaction08 | Savannah*
> February 8-10, 2008 in Savannah, GA, USA
> Register today: http://interaction08.ixda.org/
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://gamma.ixda.org/unsubscribe
> List Guidelines ............ http://gamma.ixda.org/guidelines
> List Help .................. http://gamma.ixda.org/help
>

--
+++++++++++++++++++++++++++++++
Rafa López Callejón
lopezcallejon at gmail.com
http://www.libros-web.org
http://www.nativos-digitales.net
http://del.icio.us/rafalopez
+++++++++++++++++++++++++++++++

Syndicate content Get the feed