use of color in a web app

5 Feb 2007 - 2:02pm
7 years ago
9 replies
639 reads
Allison Beckwith
2006

I work for a small development shop and we are currently working on a
web app whose primary users will be homeowners and interior
designers. Our client has hired a design company to develop the
company branding and visual design for the site. Our team has handled
everything else, including interaction design (though, none of us are
trained in this). I have run into some trouble regarding colors.

The primary colors on the design comps are red, grey, and black. The
designers have used red for a number of things:
* links (though some links are grey) - some underlined, some not -
also used to indicate an active tab
* highlighted text - You are logged in as allison (for example)
* background color for the mini-dashboard section in the persistent
navigation
* icons - sometimes next to links, sometimes not
* buttons

My concern is that red is often associated with active or visited
links, and error messages. It is this last one that concerns me the
most. I am worried that warnings and error messages (hopefully there
will be very few) will blend into the page unless we choose a
different color.

The examples that I have been sent to (to show me that people do, in
fact, use red links) are for content heavy sites, not highly
interactive sites. The general response I get from both the client
and the designers is (a) red is part of the brand, (2) the red links
don't bother *them*, and (3) they don't want to introduce additional
colors into the scheme.

Anyhow, I am just wondering if anyone has any thoughts on this. Can
red work in this situation? Am I being too picky? And the bigger
question seems to be, what are the best practices for choosing color
for a web app?

Thank you,

Allison

--
Allison Beckwith
Co-Founder & Creative Director

PLANET ARGON, LLC
Ruby on Rails Development, Consulting & Hosting

www.planetargon.com

+1 503 445 2457
+1 877 55 ARGON [toll free]
+1 815 642 4968 [fax]

Comments

5 Feb 2007 - 2:19pm
AlokJain
2006

On 2/5/07, Allison Beckwith <allison at planetargon.com> wrote:

> Anyhow, I am just wondering if anyone has any thoughts on this. Can
> red work in this situation? Am I being too picky? And the bigger
> question seems to be, what are the best practices for choosing color
> for a web app?

Allison,
I have seen implementations for red as link color without them being an
issue, but these for mainly the creative design company sites where a bold
applicaiton of color works. In a web applicaiton scenario I do not think
users would necessarily be confused just because it is red in color, but
there are two things to be looked at:

1. Why do you want to introduce red in all these places? Does it add value
in any other way?
2. With apps there is a good chance of number of links and icons etc
increasing over a period of time and a hot color like red would add to
visual noise and potentially distract users ..

--
Best Regards
Alok Jain
----------------------------------------------------------
http://www.iPrincipia.com

5 Feb 2007 - 2:21pm
Ari
2006

good questions.

there are two issues that should be considered:

1. how the color choices affect the user's ability to recognize the
options available to them
2. how the color choices are interpreted by the user - as you
correctly pointed out - red is a common danger color

regardless, the designers should come up with some consistent standards for
when and how they use colors and styles in links. it's bad practice to mix
underlines and non-underlined links as it is to change link colors since
both situations will confuse users.

On 2/5/07, Allison Beckwith <allison at planetargon.com> wrote:
>
> I work for a small development shop and we are currently working on a
> web app whose primary users will be homeowners and interior
> designers. Our client has hired a design company to develop the
> company branding and visual design for the site. Our team has handled
> everything else, including interaction design (though, none of us are
> trained in this). I have run into some trouble regarding colors.
>
> The primary colors on the design comps are red, grey, and black. The
> designers have used red for a number of things:
> * links (though some links are grey) - some underlined, some not -
> also used to indicate an active tab
> * highlighted text - You are logged in as allison (for example)
> * background color for the mini-dashboard section in the persistent
> navigation
> * icons - sometimes next to links, sometimes not
> * buttons
>
> My concern is that red is often associated with active or visited
> links, and error messages. It is this last one that concerns me the
> most. I am worried that warnings and error messages (hopefully there
> will be very few) will blend into the page unless we choose a
> different color.
>
> The examples that I have been sent to (to show me that people do, in
> fact, use red links) are for content heavy sites, not highly
> interactive sites. The general response I get from both the client
> and the designers is (a) red is part of the brand, (2) the red links
> don't bother *them*, and (3) they don't want to introduce additional
> colors into the scheme.
>
> Anyhow, I am just wondering if anyone has any thoughts on this. Can
> red work in this situation? Am I being too picky? And the bigger
> question seems to be, what are the best practices for choosing color
> for a web app?
>
> Thank you,
>
> Allison
>
>
> --
> Allison Beckwith
> Co-Founder & Creative Director
>
> PLANET ARGON, LLC
> Ruby on Rails Development, Consulting & Hosting
>
> www.planetargon.com
>
> +1 503 445 2457
> +1 877 55 ARGON [toll free]
> +1 815 642 4968 [fax]
>
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org
>

--
----------------------------------------------------------------
http://www.flyingyogi.com

5 Feb 2007 - 2:33pm
Mark Bardsley
2006

Allison,

Salesforce.com doesn't have a bad design if you ask me:

http://www.salesforce.com/products/

I think they use the very colors you are concerned about (roll over right
hand navigation). The key to their design is the sparing use of red and its
use when appropriate.

Mark Bardsley
Senior Information Architect
Project Manager
The Lux Group, Inc.

-----Original Message-----
From: discuss-bounces at lists.interactiondesigners.com
[mailto:discuss-bounces at lists.interactiondesigners.com] On Behalf Of Ari
Feldman
Sent: Monday, February 05, 2007 11:21 AM
To: Allison Beckwith
Cc: discuss at ixda.org
Subject: Re: [IxDA Discuss] use of color in a web app

good questions.

there are two issues that should be considered:

1. how the color choices affect the user's ability to recognize the
options available to them
2. how the color choices are interpreted by the user - as you
correctly pointed out - red is a common danger color

regardless, the designers should come up with some consistent standards for
when and how they use colors and styles in links. it's bad practice to mix
underlines and non-underlined links as it is to change link colors since
both situations will confuse users.

On 2/5/07, Allison Beckwith <allison at planetargon.com> wrote:
>
> I work for a small development shop and we are currently working on a
> web app whose primary users will be homeowners and interior
> designers. Our client has hired a design company to develop the
> company branding and visual design for the site. Our team has handled
> everything else, including interaction design (though, none of us are
> trained in this). I have run into some trouble regarding colors.
>
> The primary colors on the design comps are red, grey, and black. The
> designers have used red for a number of things:
> * links (though some links are grey) - some underlined, some not -
> also used to indicate an active tab
> * highlighted text - You are logged in as allison (for example)
> * background color for the mini-dashboard section in the persistent
> navigation
> * icons - sometimes next to links, sometimes not
> * buttons
>
> My concern is that red is often associated with active or visited
> links, and error messages. It is this last one that concerns me the
> most. I am worried that warnings and error messages (hopefully there
> will be very few) will blend into the page unless we choose a
> different color.
>
> The examples that I have been sent to (to show me that people do, in
> fact, use red links) are for content heavy sites, not highly
> interactive sites. The general response I get from both the client
> and the designers is (a) red is part of the brand, (2) the red links
> don't bother *them*, and (3) they don't want to introduce additional
> colors into the scheme.
>
> Anyhow, I am just wondering if anyone has any thoughts on this. Can
> red work in this situation? Am I being too picky? And the bigger
> question seems to be, what are the best practices for choosing color
> for a web app?
>
> Thank you,
>
> Allison
>
>
> --
> Allison Beckwith
> Co-Founder & Creative Director
>
> PLANET ARGON, LLC
> Ruby on Rails Development, Consulting & Hosting
>
> www.planetargon.com
>
> +1 503 445 2457
> +1 877 55 ARGON [toll free]
> +1 815 642 4968 [fax]
>
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org
>

--
----------------------------------------------------------------
http://www.flyingyogi.com
________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... discuss at ixda.org
List Guidelines ............ http://listguide.ixda.org/
List Help .................. http://listhelp.ixda.org/
(Un)Subscription Options ... http://subscription-options.ixda.org/
Announcements List ......... http://subscribe-announce.ixda.org/
Questions .................. lists at ixda.org
Home ....................... http://ixda.org/
Resource Library ........... http://resources.ixda.org

5 Feb 2007 - 2:56pm
Allison Beckwith
2006

On Feb 5, 2007, at 11:19 AM, Alok Jain wrote:
1. Why do you want to introduce red in all these places? Does it add
value in any other way?
2. With apps there is a good chance of number of links and icons etc
increasing over a period of time and a hot color like red would add
to visual noise and potentially distract users ..

I think that the current design uses red simply as a accent, used on
the page in places to add color where there isn't (meaning, I can't
find any sort of pattern for when red is used and when it isn't). If
I were looking at the page as just a snapshot, I can see how the
color adds to the overall feeling and balance of color... but these
are not just static pages, they are part of a tool that is used, that
evolves, that must remain flexible. I am not sure how to communicate
this to the design team (who, I believe, has a background in print
design, not web/application design).

On Feb 5, 2007, at 11:21 AM, Ari Feldman wrote:
there are two issues that should be considered:
how the color choices affect the user's ability to recognize the
options available to them
how the color choices are interpreted by the user - as you correctly
pointed out - red is a common danger color
regardless, the designers should come up with some consistent
standards for when and how they use colors and styles in links. it's
bad practice to mix underlines and non-underlined links as it is to
change link colors since both situations will confuse users.

Thank you for the feedback Ari, these are the types of questions I
have tried to bring up with the client and the designers.
Unfortunately, I am usually met with a "but it doesn't confuse *me*,"
or "how is it confusing for you?" How do I communicate that color is
not just part of the visual design, but also impacts usability? They
want proof, and I can't find anything specific (or recent enough).

On Feb 5, 2007, at 11:33 AM, Mark Bardsley wrote:
Salesforce.com doesn't have a bad design if you ask me:

Thanks Mark, I agree that salesforce.com has found a good balance.
The red is not overused. I signed up for a trial account to see how
the app itself looked. No red, except in a few spots: The * to
indicate a required field, error messages, and in the logo graphics.

On Feb 5, 2007, at 11:45 AM, Joanie McCollom wrote:
I have had the same problem and the same concern. One thing I did was
not
allow heavy use of red on functional pages where it might compete
with error
messages.

:-) This was going to be my next suggestion (as a compromise).

5 Feb 2007 - 3:05pm
Tracy Boyington
2007

Are they actually using color alone to convey information (i.e, you know
this is a link because it's red)? I thought that was a big accessibility
no-no.

~~~~~
Tracy Boyington tracy_boyington at okcareertech.org
Oklahoma Department of Career & Technology Education
Stillwater, OK http://www.okcareertech.org/cimc

>>> Allison Beckwith <allison at planetargon.com> 02/05/07 1:02 PM >>>

Anyhow, I am just wondering if anyone has any thoughts on this. Can
red work in this situation? Am I being too picky? And the bigger
question seems to be, what are the best practices for choosing color
for a web app?

5 Feb 2007 - 4:36pm
jbellis
2005

Allison,
Can red work? Sure in the right hands, but let's recap: you're a bunch of
folks doing Ix but untrained in it, being given a web design from a bunch of
print folks. And you think that advice on link colors is the missing
ingredient in this soup? I don't think so.

I looked on Red Envelope, and despite finding many UI transgressions,
couldn't get lucky and find a good model for red links, even with
Valentine's day approaching. I even tried to override the style sheet (to
see if it would color-code visited links) to no avail. Alas.

Anyway, you've probably spelled out one of perhaps five or ten central
struggles in Ix... aesthetics vs. web standards. (If you think the current
thread for 'best interaction designer' is long, let's hope they are too
distracted to read your post.) You are correct to identify the link color as
a problem particularly on an interactive site, but it is just a sampling of
what you're up against. I think that it is way down in the weeds and you
need to attempt to elevate the discussion to the authentic level of
concern... whether functionality in its many forms (known UI concepts,
accessibility, speed) and branding can play nice together on your project.
It won't be easy and you might be only the 10 millionth person to fail at
making the case, but you'll succeed or fail at the right goal. Arguing link
colors to a bunch of heathens is destined to get you stoned to death.

And when your untrained group yields good and bad Ixers, post the positive
indicators to that other thread.

Regards, www.jackbellis.com

----- Original Message -----
From: "Allison Beckwith" <allison at planetargon.com>

> > Anyhow, I am just wondering if anyone has any thoughts on this. Can
> > red work in this situation? Am I being too picky? And the bigger
> > question seems to be, what are the best practices for choosing color
> > for a web app?
>

5 Feb 2007 - 4:58pm
Allison Beckwith
2006

On Feb 5, 2007, at 1:36 PM, jackbellis.com wrote:

> Allison,
> Can red work? Sure in the right hands, but let's recap: you're a
> bunch of
> folks doing Ix but untrained in it, being given a web design from a
> bunch of
> print folks. And you think that advice on link colors is the missing
> ingredient in this soup? I don't think so.

:-) I don't think so either. It just happens to be the one thing
everyone is stuck on at the moment.

To clarify: We are a group of designers and developers, none of us
formally trained in ixd (though we try and soak up as much as we can,
whenever we can, because we are passionate about it). Our client
hired a graphic design firm (we were not included in the decision
making process), who seem to have little experience designing for the
web. I am trying my best to work with the group I have been given,
and to hopefully produce a great product in the end.

> Anyway, you've probably spelled out one of perhaps five or ten central
> struggles in Ix... aesthetics vs. web standards. (If you think the
> current
> thread for 'best interaction designer' is long, let's hope they are
> too
> distracted to read your post.) You are correct to identify the link
> color as
> a problem particularly on an interactive site, but it is just a
> sampling of
> what you're up against. I think that it is way down in the weeds
> and you
> need to attempt to elevate the discussion to the authentic level of
> concern... whether functionality in its many forms (known UI concepts,
> accessibility, speed) and branding can play nice together on your
> project.
> It won't be easy and you might be only the 10 millionth person to
> fail at
> making the case, but you'll succeed or fail at the right goal.
> Arguing link
> colors to a bunch of heathens is destined to get you stoned to death.

I have tried having this conversation with the client and with the
designers, but I seem to be hitting a wall. Either they just don't
get it, or I am doing a terrible job at explaining it. They have made
significant changes to the design based on my feedback, but for some
reason, they refuse to entertain the idea that color matters. You are
right though, the stones have already started flying.

> And when your untrained group yields good and bad Ixers, post the
> positive
> indicators to that other thread.

I would *love* to go back to school to study ixd (and related
fields)... if only I could find some time away from my company. :-P
This list has been great for finding resources to self-educate, and
that particular thread has given me some good goals.

>
> Regards, www.jackbellis.com
>
>
> ----- Original Message -----
> From: "Allison Beckwith" <allison at planetargon.com>
>
>>> Anyhow, I am just wondering if anyone has any thoughts on this. Can
>>> red work in this situation? Am I being too picky? And the bigger
>>> question seems to be, what are the best practices for choosing color
>>> for a web app?
>>
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org

5 Feb 2007 - 5:26pm
cfmdesigns
2004

>From: Allison Beckwith <allison at planetargon.com>
>
>My concern is that red is often associated with active or visited
>links, and error messages. It is this last one that concerns me the
>most. I am worried that warnings and error messages (hopefully there
>will be very few) will blend into the page unless we choose a
>different color.
>
>The examples that I have been sent to (to show me that people do, in
>fact, use red links) are for content heavy sites, not highly
>interactive sites. The general response I get from both the client
>and the designers is (a) red is part of the brand, (2) the red links
>don't bother *them*, and (3) they don't want to introduce additional
>colors into the scheme.

I've got no problem with using red for links and other purposes in general. It's something of a canard that red should always be avoided because it means "stop" or "danger"; it also signifies luck, life (blood), wealth (rubies), and many other things. It's definitely a "pay attention" color, but not necessarily in a bad way. You've expressed the concern and it has been dismissed with legitimate-enough reasons, so I would move on to making sure it is used correctly.

Item #1 would be that the red is used consistently. If some links are red, all links should be red (or at least all of that class/on that page/etc.)

Item #2 would be that the red not cause confusion. If you are concerned about the errors being less visible due to the use of red for links, find other ways to call them out. Boxes, iconography, font weight and font family changes, page layout, etc. For example, mark them with a red icon and ample white space above and below, but leave the text in black or gray; let the layout and the small, concentrated bit of red do the work and avoid anyone thinking it's linked text.

Item #3 would be that it is used sparingly. Red is an attention color, and if there is too much red, the attention gets focus nowhere. Links that roll over into red may be better than ones that are red all the time. Keep the red away from other text uses (such as emphasis) which might draw the attention to it improperly.

Item #4 would be that it is subdued where it has to appear. Perhaps there are shades of red that can be used which are less BRIGHT than #FF0000, stuff which won't glare but still supports the brand. I like brick shades myself: red without being RED!!!

Good luck. (See: luck=red!)

-- Jim

6 Feb 2007 - 10:52am
Josh Seiden
2003

My experience is that it is very difficult to make progress on color from a
principles-based perspective. But it is relatively easy to test. My
recommendation is to construct a small usability test to assess color usage.

JS

On 2/5/07, Allison Beckwith <allison at planetargon.com> wrote:
>
>
>
> > Arguing link
> > colors to a bunch of heathens is destined to get you stoned to death.
>
> I have tried having this conversation with the client and with the
> designers, but I seem to be hitting a wall. Either they just don't
> get it, or I am doing a terrible job at explaining it.

Syndicate content Get the feed