Thursday, November 16, 2006

Quick Tip: Caption Tables

Caption tables were introduced in Notes 6 as another type of table format. Basically, a caption table creates expandable/collapsible rows. The expand/collapse functionality is activated by clicking on the header for each row. Caption tables are analogous to accordion tables on the web. When they were first made available, I didn't do much with caption tables...I just didn't love them as a UI element. However, not long ago, I was presented with a design situation for which caption tables are ideally suited.

In this example, I had several "control" fields on a form. These fields serve as indicators for the workflow process. I was working with limited screen real estate and wanted a way to make the workflow controls very evident and allow the user to rapidly navigate through them. It was at this point that I struck on the idea of creating a fixed width caption table that could hold these fields. I liked this concept very much, since it provides a separate "container" for each of the controls. By offsetting the fields from one another, the user is free to focus on one element at a time, which was important in this application because we wanted them to think about the choices they were making for each workflow option. The end result was a nice UI element that proved to be very usable...a win-win combo.

Here's what it looks like in action:

If you've not used a caption table before, it's quite easy. When you create a new table, specify the number of rows and columns and then choose the "Caption Table" option. The number of rows corresponds to the number of accordion sections that you will have, with each section containing the specified number of columns.

Most of the standard formatting properties for tables still apply with a caption table. To add the caption labels, use the "Special Row Options" tab of the table properties dialog. This process is very similar to setting up the labels for a tabbed table.

That's about all there is to it. For far more inspiring design uses of this UI feature, a quick search on Google will probably turn up some nice examples. If you want to do the same thing on the web, look no further than Rico, which provides a very nice and easy to use accordion effect (I use Rico as an example in one of my Lotus Developer2006 sessions).

For some additional caption table goodness, check out the following posts from Ben and William.

Ben Langhinrichs - SNTT: Accordion style views in Lotus Notes client
William Beh - Lotus Notes Categorized View using Rico Accordion


Jane Griscti said...

That's so compact. Very nice :)

Nathan T. Freeman said...

Minimum height on rows is your friend with caption tables. You don't want the lower captions to move AT ALL as you flip between them.

In general, I have very mixed feelings about caption tables. You've used one perfectly here, because your sectional labels are so long. But usually, tabs are move obvious to the user and consume less overall screen real estate. Plus the bounding box on tabs makes them, I think, a little more obvious on the grouping.

I'd probably change my tune if we got more control on the actual caption formatting. If I could do a gradient in the caption background, for instance, so it would look rounded. (I need to send you some screenies of some aqua-style headers I've been doing lately, by the way.)

Julian Robichaux said...

That's a nice looking form right there. I will definitely be attending your session at Lotusphere.

Don McNally said...

Very cool stuff! How do you get the caption rows to display a colored background?

Don McNally said...

I think I figured it out. You put the caption table inside of another table cell and change the color of that cell. Right? (among other possible ways, of course - this is Notes after all!)

Chris Blatnick said...

@Don...yep, pretty much. In this case, I think the caption table color is blue and I placed new tables within each row. These tables have a white background, giving the effect you see.