Wednesday, May 17, 2006

SnTT: A Splash of Color

When designing a user interface, never underestimate the power of color. Color can do so much in an application...convey the state of a document, guide the user's path through a form, delineate one section from another and so on. Good use of color can turn a drab and boring interface into one that is interesting and fun to use. With all good things, it's also easy to over do it, so here are a couple of quick rules to keep in mind before we get to some examples:

1) Use related colors from a given palette. Certain colors flow together and compliment each other while others completely clash. I've listed a couple of handy tools for choosing a palette for your application at the bottom of this post. There are many others that you can find with a quick internet search.

2) Don't put every element in a different color! :-) This should go without saying, but an application that looks like it limped out of an explosion in a crayon factory probably doesn't score very well in a usability test. Color should be used for maximum effect, but too much will just distract the user.

3) Don't be afraid of white. Repeat after me...whitespace is good! Whitespace should be used to logically separate design elements. An uncluttered design is a happy design.

OK...enough of that...on with the code! Today's tip explores the use of color in views, specifically the use of color columns.

Color columns are an often under-utilized feature that can provide great benefits to your users. Unlike many Notes help documents (which can be quite good), several of my designer friends have found the help for this feature a little lacking. I agree, so I'll try to distill it down to the basics. If you use the feature in your mail file to display memos from different recipients in different colors, then you've seen color columns in action. That's just one example...let's take a look at another.

Remember our Kwik-E-Mart database? Apu has decided to do a little upgrade to his views. At a glance, he'd like to be able to see what kind of Squishees are being ordered. To do this, he adds a color column to the view and the value of this column is based on the Squishee flavor. Once he makes this change, Blinky Blue Squishees are displayed in a pleasing shade of azul, Apulicious are in yellow and so on. Here's what Apu's view looks like after the change.

Kind of cool, eh? So, is this just a superfluous feature? Definitely not. Maybe this example is a little contrived, but think about an actual production application. What if you have a sales database in which your sales force is recording wins and losses. Often, we use column icons to flag documents in a case like this. By using color columns, we can make losses really stand out by coloring the row red. Those guys at Lotus are pretty smart too. Did you know that a row can actually have multiple colors. In the sales example, perhaps your view has a column for each month. Using multiple color columns can allow you to denote the success of the salesperson for each month (see example below). This is getting powerful!

Color columns are really not difficult to design. Here's the abbreviated version for how to create them.

1. Add a new column to your view. If you want the whole row to be the same color, add this column at the very front. Otherwise, place the column in the location in which you want the color to start.

2. Select the column property "Use value as color". You usually will also mark the column as hidden.

3. Use a field from your document as the column value or create your formula. In either case, your column should evaluate to a number list. The list should consist of 6 numbers. The first three represent the RGB value for the background color and the second three represent the text color. In the Kwik-E-Mart example, Apu made Blinky Blue show up in blue by setting the column to 224 : 241 : 255 : 0 : 0 : 0.

That's all there is to it. I recommend computing the values for the various colors you will use on the documents themselves, since it keeps the views nice and light.

In the sales example, there are separate fields for the color of each month (computed based on sales target) and then these field values are used for their respective color columns. The columns in this view are not hidden, since they are being used as the main display feature. If we wanted to display the sales figures along with the color, we would add the columns to hold the sales figures and then hide the actual color columns. You then would get a result similar to this:

Aside: You can figure out the RGB values in a variety of ways. Most graphics programs allow you to grab a color and then display the RGB representation. For Notes developers, one easy way is to use the color picker from Notes itself. When you select a color, Notes displays the RGB value for you.

Another powerful use of color columns is as a flagging mechanism initiated by the users. In one application I built, the process owner had to occasionally alert others of the status of certain inventory items (if stock was too low, hot sellers, etc.). One of the findings that came out of our initial usability test was that users didn't want e-mail notifications flying back and forth. The solution we came up with was to allow the owner to mark documents by modifying the color column. The main view now has an action that the owner can trigger. The owner selects the document in question, clicks the action button and chooses the status. The view immediately reflects the change and users can see the new document status at a glance.

The code for this can be really's an example:

REM {Set the colors we are going to use};
colRed := 255:225:220:0:0:0;
colBlue := 224:241:255:0:0:0;
colGreen := 224:255:223:0:0:0;
colYellow := 255:255:208:0:0:0;

REM {Setup the list to display to the user};
List := "Red" : "Blue" : "Green" : "Yellow";

REM {Prompt the user for their selection and save it in the Choice variable};
@Set("Choice"; @Prompt([OKCANCELLIST]; "Hey Dude..."; "Please pick your color"; ""; List));

REM {Concatenate the prefix with the choice to get the variable for the selected color};
Selection := "col" + Choice;

REM {Set the field by evaluating the variable name, which will set the field to the
appropriate number list};
@SetField("num_ViewColor"; @Eval(Selection))

As you can see, color as used here can convey important information to the user at a glance. Often, the user will not have to resort to opening the document. When implemented correctly, this can be a great usability feature, since it saves time and is very easy to understand. If you've not used color columns before, I hope that you'll consider possible scenarios where they might come in handy and add them to your usability toolkit.


Color Palette References:

Base your palette on an image
Select your core color and play with a wide variety of options

Technorati tags:

No comments: