Friday, July 20, 2007

Branding The Action Bar

When you are designing a Lotus Notes client application and are using action bars with your forms and views, you should take care to format the action bar so that it becomes a harmonious part of your design. That is, make sure you use colors and borders that complement the layout of your UI rather than compete with it. If you normally just leave the default settings (especially "System" gray), then I'm definitely talking to you. ;-)

Nathan and I have talked a lot about color palettes, complementary colors and stuff like that in the past, so I'm not going to say anymore about that here. However, I did want to present an idea that might be interesting to you in certain cases.

Sometimes, it is desirable to create a certain "brand" for an application. Perhaps it is a CRM suite or some other application that you want to make a little unique. One way you can accomplish this in a fairly easy and unobtrusive way is to use the real estate of the action bar to display a logo, picture, etc. Here's an example...

A Close Up

Now that's just a quick example I threw together to demonstrate the idea. Normally, I'd use a more subtle color and graphic. Here's an shot from a real application, in this case my modified document library template.

Another Close Up

Adding this image to the action bar is very easy. Probably most of you know that in the Action Bar properties, you can specify an image resource that will be used for the background of the action bar. If you want to align the image along the right edge as I have done here, there are a few requirements:

1. Make sure that the graphics that you place within the image are in the last 1/3 of the total image width.

2. Select "Center Based Tiling" as the Repeat option.

3. Adjust the height of your action bar as necessary.

OK...that first requirement is strange, but it works.

As soon as you overlap 33% of the width, it leads to undesirable behavior like that shown below.

If you want the color of the action bar to show through, make it a transparent graphic. Here's the same example as before, with a transparent image and the background color of the action bar set to a light purple (yeah it's ugly ;-).

If the image is the correct size, then you can re-size the Notes client window and the image will stay right aligned as you do so. It might take a little playing around with at first, but if you follow the three rules above, this can be a neat little trick to add to your client UI design bag.

Have Fun!

P.S. For more action bar fun, check out Kevin Pettitt's much cooler post about Two-Row View Action Bars


Nathan T. Freeman said...

Sweet. Kudos on making it right aligned, man. Most people have a fetish for the left side for branding , where it DOES NOT BELONG!!!

I've been tinkering with the idea of using horizontal outlines in form headers instead of actual action bars. There's a lot of other run-time calcs that can be done that way. Then you get DRAG TARGETS on your "action bad"

But I haven't really fleshed it out yet.

Gerry said...

once again you deliver a beautiful solution for beautifying the notes client interface. Contrary to nathan however I think it could belong on the left side depending on the application. Mostly because I tend to put the close button on the right since users are used to closing their window in windows that way. Probably both methods have pros and cons but good job getting it to show right aligned.

Stephanie Boissonnas said...

Darn you, Chris Blatnick! Every time I think I'm doing better with my UIs, you come along and post something so simple, so elegant, that I'm left smacking my forehead in a combined "Aha!" moment and utter frustration with my own obtuseness.

Once again, thank you for such a beautiful, helpful tip. :)

Kevin Pettitt said...

Hey Chris,

Thx for the plug and nice post!

The next version of SuperNTF will demo my 2-row action bars with graphical backgrounds. I'm recycling several ibm form header background graphics such as shown here:

Details later, but Nathan's nre discovery may make bigger changes to that technique.