Saturday, November 18, 2006

Caption Table Update!

One of the cool things about having a blog is that you can get your thoughts out there and then people smarter than you can comment on them to help you improve! :-D Thus, I tip my hat to Nathan, who posted that "Minimum height on rows is your friend with caption tables." Indeed, I had to slap myself upside the head when I read that. Seems so obvious now! ;-)

To be honest, the one thing I didn't like on my form was the resizing of the caption table as you switch from one row to another. Normally, I'm pretty good with form layout, so it was frustrating. I guess I didn't think about it long enough. But I'll say this now...Minimum height IS your friend. As soon as I saw Nathan's comment, I went back to the form and made some quick updates. The new and improved version is below. Much nicer!



I've actually got some tables setup within the caption table itself to allow for coloring the caption headings and aligning things correctly, so it was a little tricky at first. Just remember to set the minimum height on the actual content part of your table and you should be good to go.



Have a great weekend everyone!

Labels: ,

permalink | leave a comment

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

Labels: ,

permalink | leave a comment