Fog Creek Software
Discussion Board




Do you folks use color in your applications?

These two screens have no color:
http://www.attcanada.net/~kallal.msn/test/gs1.gif
http://www.attcanada.net/~kallal.msn/test/bw.gif

This screen shot has color:
http://www.attcanada.net/~kallal.msn/test/color1.gif

(the above screen shots are from ms-access, but that is really moot point here).

I don’t use color in my applications. I use straight boring battle ship Grey.

For some reason, I don’t like color.

Question:

    Do you folks use color in your applications?
    Do you recommend color?

Albert D. Kallal
Edmonton, Alberta Canada
kallal@msn.com
http://www.attcanada.net/~kallal.msn

Albert D. Kallal
Tuesday, July 01, 2003

First impressions - the non-color screens look more professional. The color ones make me think "the developer wanted to show off" and instinctually I tend to trust the application less.

www.marktaw.com
Tuesday, July 01, 2003

Well put, Mark.

Nick
Tuesday, July 01, 2003

It is a lot hader to male an application look good using colors.

As a user, I like UI with color schemes only if they look real good. 

Color can make aplications friendlier and better looking, <but> I prefer not using color because it is a lot harder to build a UI that looks good using color than using the standard gray combinations.

As usability advocates say, changing color of standard UI elements acauses the user to change his mental frmework of understanding of how things work.

Developer who sucks at graphical design
Tuesday, July 01, 2003

One risk of using color is that around 7% of men (American men, anyway) have a hard time distinguishing red from green.

Larry Prince
Tuesday, July 01, 2003

The application i work on allows the user to setup a color scheme; an extension of the windows color themes (i.e since its a db front end you can highlight certain records based on some criteria, change color of focused controls, etc)

apw
Tuesday, July 01, 2003

Try changing the color scheme of your computer and looking at the program.

It looks like the default system color is being used for the button backgrounds but gray is explicit for the dialog background.

njkayaker
Tuesday, July 01, 2003

Use color with purpose.

Only use color when you want to draw the user's attention to something, such as invalid data entry or an error condition.  Limited use of color on a battleship gray UI will stand out much better.

Put in gratuitous color and graphics, and your users will eventually tune it out as visual noise, thereby reducing the overall effectiveness of color in your app.

In your color screen shot, I'd say the alternating white and gray grid lines was good, in that it aids in horizontal visual tracking across the grid.  The monochromatic nature of those two colors provides visual differentiation without drawing undo attention to the grid.

The red and green color and graphics for the group headers, however, seems superfluous.  For example, if you tried to use a red font to highlight high-priced parts, or parts not available, the red background in the "Cars" line would conflict with it visually and intuitively.

Just my $0.02…

Joe Paradise
Tuesday, July 01, 2003

I have to disagree with the consensus going on here so far. 

I think using color is a great idea for virtually any application as long as you keep in mind the color-blindness issue previously mentioned (which can easily dealt with) and, most-importantly, the color schemes should be chosen by someone who is an expert at such, someone who understands color theory, etc.  Allowing (most) programmers to decide the color scheme on their own will result in a hideous eye-sore.

Mister Fancypants
Tuesday, July 01, 2003

The problem is that most people find muted colors in a carefully designed scheme soothing.  It enhances the experience.

But most programmers use bright, vivid colors for everything.  I think it goes hand-in-hand with the traditional engineer pocket protector containing at least 3 colors of pen, plus a pencil.  ;)

And, of course, web pages need designers, but UIs don't always need one.

Flamebait Sr.
Tuesday, July 01, 2003

I agree with Joe. The rows are already indented in an obvious way, what purpose does the color serve? I keep looking at the headers and ignoring the content.

Also, the colors you chose aren't even related - shades of the same color would relate them better, though simply inverting them (white on black) or giving them a gray or darker gray works just as well.

www.marktaw.com
Tuesday, July 01, 2003

Two basic rules for using color:

1.  Avoid using color unless you know how to do it properly.

2.  If you're not sure whether you know how or not, then you don't.

Eric W. Sink
Tuesday, July 01, 2003

Don't forget to consider who the program is for. Is it an accounting app? Probably little to no color should be used. It is a greeting card generator for kids? Lots of color... but designed by a professional.

HeyCoolAid!
Tuesday, July 01, 2003

It must be just me, but I clicked on the links included by the OP, and found the "non-color" screens both hideous and amateurish-looking, when compared to the pleasant appearance of the "color" screen.  (Not that there aren't a few places where the color screen could use some tweaking.)

That doesn't mean I think the color one is easier to use, just that someone would be more likely to *buy* that program, because it looks better.

Phillip J. Eby
Tuesday, July 01, 2003

Actually, my objections to the color screencap aren't color related (although I'm not sure that the colors are the right ones, they're also not offensive). I strongly dislike purposeless icons and the drop-shadow on the text.

Agreed, too, that the B&W images didn't looking particularly good (not bad, but not good).

Brad Wilson (dotnetguy.techieswithcats.com)
Tuesday, July 01, 2003

Albert, you need to bring up the properties window, find the back color property, and enter '-2147483633' into it. :)

Martha
Tuesday, July 01, 2003

My biggest issue with the non-color screens is they scream "Windows 95" ("OLD!").

Of course, an application being "OLD" looking or actually old is no indication of its quality, so this is a superficial thing for me to judge it on, but I still do anyway.  And if I (as a programmer) make this snap judgement, I'm positive many users will as well.

Mister Fancypants
Tuesday, July 01, 2003

On a side note, bad use of color (ie, using Grey instead of the appropiate system color) is bad. Also, using white instead of the appropiate highlight color... I use the "Rainy Day" color schema in my Windows box, and I can tell a bad designed(*) app from a mile.

(*) An app can be a marvel of design, but this small details just screams "lazy/incompetent programmer!" to me.

Leonardo Herrera
Tuesday, July 01, 2003

What about using colour to distinguish different sections of an application - Microsoft Money does this very well so if the background is a pale green colour you know instantly that you are in the accounts section, but if it is orange you know you are in the Share Portfolio section.

This works well because when you are on the Money '"Home Page" you can see from the colour of the link heading what section of the program you are going to.

But saying that I do think the Red and Green rows in Alberts colour screen are not providing any real value to the user - but having said that, we do have a similar thing in our app just because the sales guys said it would look better.

Chris
Tuesday, July 01, 2003

Thanks for the comments folks

>>Two basic rules for using color:
1. Avoid using color unless you know how to do it properly.
2. If you're not sure whether you know how or not, then you don't.

I have to agree with this. I as rule don’t use color. Further, I find it takes effort and developer time to come up with colors. I mean, to spend resources and time to start using color is to me a real big decision.

And, yea I written software for years...but avoid color. I mean, in FoxPro/dos before windows I generally used blue/white, or the default light green that Fox used.

So, I just advoid the issue right now!

>>found the "non-color" screens both hideous and amateurish-looking

I don’t think the non color screens are poor due to no color. However, I can’t quite put my finger on it, but I am not really that happy with those screens either.

>>Agreed, too, that the B&W images didn't looking particularly good (not bad, but not good).

I am considering updating the look of those screens. I am open to suggestions. I did not think they were bad, but I also agree that “something” is wrong with them. They are not that good. (of course, “me” the developer NEVER thinks anything is bad!!!).

I open to suggestions on improving the look of those grey screens....

Albert D. Kallal
Edmonton, Alberta Canada
kallal@msn.com
http://www.attcanada.net/~kallal.msn

Albert D. Kallal
Tuesday, July 01, 2003

Well, the B&W screens look very Windows 3.1 - something about the buttons and icons and borders looks Win 3.1.

I'm sure more attention can be paid to the flow of the data being presented, but I'm too tired to look closely at it.

www.marktaw.com
Tuesday, July 01, 2003

I prefer the last screenshot (although not sure of some of the colors used or the context for choosing them).

Ledger paper has horizontal stripes for a reason: it is easy to trace along a horizontal lines.

About the non-color screens:
- Why are some headings in grids not shaded at all
- Too many fonts. Limit yourself to a maximum 2 fonts if you are not sure (read basic typography rules, with all due respect, that part makes the app look less professional. It reminds me (although far less extreme) of DTP publications where the author has to use way too many different fonts and font sizes.  Also what happens if they change the Windows font settings?

S. Tanna
Tuesday, July 01, 2003

Think I have to go against the flow here and say that upon initial scan, the color pic was dramatically easier to read.  Part of that is the indentation and general layout though, the color's just sort of there to draw attention to the headings.

Jeremy Statz
Wednesday, July 02, 2003

I prefer the color one, very much so. More than the color it is the fonts, layout and whitespace that make it look a lot more practical to work with.
Even if you drop the color (but do keep the horzontal grey/white alterations) I suspect a big "thank you" from the users will be forthcoming.
Realy sorry but it has to be said: The first two screens look very much like pixel by pixel ports from the Commodore 64 days.

Just me (Sir to you)
Wednesday, July 02, 2003

Nope. We have a support guy here who uses the HiContrast colour schemes (Because he's legally blind) and it's vital for him to get this right.
We have a few exceptions (Red for negative usually), but in general we stick with system colours.

Peter Ibbotson
Wednesday, July 02, 2003

* bw.gif:

The column labels are horribly misplaced. Move them down 2 or 3 pixels and get the horizontal positioning right.

The "Remain" column's data should be right-aligned, not left-aligned.

The column headings are things like "ToName". It would almost certainly be a win to change the first five to: "From", "To", "City", "Hotel", "Tour".

Instead of the boxy thing labelled "Search Options", unclutter the layout a bit. Move the radio buttons down so that their labels have the same baseline as the text over to their left; and put "Search ..." on the line above, same baseline as the text to *its* left, left-aligned with the left-hand edge of the leftmost radio button. (Possibly one pixel left or right of that. Try each option and see which one looks right.)

The title bar says "Tour Search". You don't need to say it again in the window. Taking that away frees up the space to make the "Downhill Riders ..." thing left-aligned.

Align the right-hand edges of your visual elements: the date and time, the horizontal rule, the right-hand edge of the scrollbar, the door icon. And the right-hand edge of the group box, if you keep that; or the right-hand edge of the label on the rightmost group button, if not.

And the left-hand edges, too. Preferably move the left-hand edge of the grid in to line up with the left-hand edge of the text. Make sure all your left-aligned text is left-aligned to the same margin.

Speaking of which, that door icon is taking up a lot of space. Not only the space it occupies itself, but all the space to its left. Surely there must be a better way? If it means "Exit", then why not just use the close box in the title bar? If it must stay, then please give it a textual label too.

This isn't really pure greyscale, of course, because those spectacle icons have cyan lenses. :-) Something's not quite right about their vertical placement, by the way.

If you can inset the text in the grid cells by one pixel on each side, it will be easier to read and nicer to look at. If vertical space is at a premium, at least do this horizontally.

Can you make the internal rules in the grid less obtrusive? You really don't need 3-d effects here. Why not nice muted thin grey lines?

You will be amazed how much better it looks if you do all this.

* color1.gif:

Much nicer to look at, at first glance, than the two greyscale ones. It's mostly not the colour that's responsible, though.

Notice how everything has a bit of room to breathe: there's a bit of whitespace in the grid cells, for instance. (A pixel more of horizontal padding in the "Price" column would do it no harm at all, though.) And the grid itself isn't jammed up against the left-hand edge of the window.

Notice also that the left-hand edge of the grid lines up with the leftmost checkboxes.

The use of colour is helpful too, mostly for purely aesthetic reasons but also because it (fairly subtly) directs attention to the structure of the tree.

The alternating colours for the rows of the grid help to make sure the eye doesn't wander onto the wrong row. (They could do with being slightly subtler, I think, but that's mostly a matter of taste.) It also helps that the grid lines aren't too blatant.

It's not perfect: as I say, it wants a bit more padding in the "price" column, and the greyscale-gradient effect on the headings is ugly, and the row numbers should be right-aligned instead of centred. But it's pretty good.

Gareth McCaughan
Wednesday, July 02, 2003

As a rule, we ship our apps "out of the box" with the standard grey (no color).

On the other hand, most apps we write have user-configurable options whereby the user can make the decision to change colors/fonts/bitmaps/sizes and whatnot to customize the application to their preference.

Sgt. Sausage
Wednesday, July 02, 2003

Just wanted to put in a quick note.  Color-blindness is a real issue  (speaking from personal experience).

Red-green color blindness doesn't mean you can't tell red from green as a previous poster stated.  It means you can't tell blue from purple, yellow from green, pink from gray, and dark red from black.  (All especially true in any type of low light situation).

I recommend you avoid any type of GUI situation where you are trying to signal the app is in a certain state solely by use of color. 

Oddly, there's little commercial software out there that bothers me.  But don't get me started about the overuse of color-coded maps in newspapers or magazines. :-)

Will
Wednesday, July 02, 2003

Thanks Gareth


I can’t disagree with any of your comments. (gee, maybe I should hire you!). Your suggestions are practical.

That “old” screens is 4 years old. (and it looks it).

I also have been exposed to the book “looking good in print”. A few others had commented about using too many fonts.

A few notes:
    The “large” “Tour Search” text label was put there since during phone support, or support emails users did not realize what the name of the form was (The help key now shows the internal form name anyway). Thus, those large letters leave no doubt as to what the name of the form is. However, adding more fonts of a different size to a form is almost ALWAYS bad.

I mean, a LOT of web sites have a large label, or title in the upper left, or center. (Microsoft, Yahoo etc).

I just tried your suggestion to remove that large label, and lined up a few things.

A few minutes later, the results are a very nice improvement:

http://www.attcanada.net/~kallal.msn/test/bw2.gif

As for the “exit” box in the lower left?.  The X close is available in most forms, but I also placed the big exit box. Users go for the big exit box FAR MORE often then little X. The problem with the little X is it is a VERY small target.

In fact, the ESC key gets you out of the form, and users use that MORE then the big exit. That being the case, I could argue to remove the Exit button in the lower right, since user prefer the Esc key anyway. I am a bit fond of that big exit target..but I don’t care about my fondness anymore! I did try and pick a bad screen. However, what REALLY surprised me was general lack of alignment for fields and labels. I seen that screen for 4 years, and never even noticed.

It is time for me to clean up that stuff. A lot of the application was rushed, and it shows...

Anyway, Thanks to all, and Especially to Gareth.

I also might try some color bands. If I do that, then I find that removing the grid lines COMPLETE makes it look a lot better.

I am going to re-do a lot of those screens, but I will work on a base “look” that I like. I might even adopt the new windows XP “blue” type screens. That means, the options and stuff goes to the “left” side in a large vertical bar, and then the grid etc is put on the right side.

Also, office XP is adopting large bar on the right side. So, I might adopt that look also.

The look and feel of the new stuff is also making current stuff look older. I am running word 2003 beta, and the icons etc are MUCH nicer then the old office.

I think the open source movement also now has some work to do. The "bar" just keeps getting higher here.

Albert D. Kallal
Edmonton, Alberta Canada
kallal@msn.com
http://www.attcanada.net/~kallal.msn

Albert D. Kallal
Thursday, July 03, 2003

The UI is what the users use. So it stands to reason that most of their issues will be with the UI. Making the UI pleasant is a HUGE boost to the apparent usability of the apps from the user's point of view; good polish makes a good impression.

Keep up the good work!

Brad Wilson (dotnetguy.techieswithcats.com)
Thursday, July 03, 2003

Just on the colour blindness thing, an eye-test technician recently told me I was technically colour blind, but I've never had any difficulty telling red from green or any of the other common problems.  It does run in my mother's family so I'm not too surprised, but I'd never had any idea.  I only mention it here because I think it could have a bearing on the 7% figure quoted quite often - does that include people like me or is it only people who are colourblind enough for it to affect them?

John
Friday, July 04, 2003

Quick and simple. Take the Ishihara test:

http://www.toledo-bend.com/colorblind/Ishihara.html

Brad Wilson (dotnetguy.techieswithcats.com)
Friday, July 04, 2003

Are you writing a utility or an application?

If the former (that is to say something which will be used rarely by the same person so many web pages would come into that field) you will want to have everything stand out more - bolder colours, larger icons.

If the latter (that is a program that will be used almost daily) then you want to use a much more muted approach.

The standard system colours have been chosen for the latter and thus can appear boring. But as the user can jazz them up if he wants to that shouldn't be your problem.

Stephen Jones
Sunday, July 06, 2003

*  Recent Topics

*  Fog Creek Home