Wednesday, June 14, 2006

SnTT: Using Border Captions To Make Better Use Of Your Screen

In the real world and the virtual world, real estate is a valuable commodity. When speaking of applications, screen real estate is very precious. Typically we have more information and options that we'd like to display than we have space for on the screen. In this and future entries, I'd like to touch on a few simple techniques for making the most of the screen real estate in your applications. Keep in mind that this doesn't mean cramming as much as you can into a single screen. Rather, it means logically grouping items and using some of the often neglected or relatively unknown elements in Notes design to their full advantage.

I talked last week about creating a horizontal drop down menu using actions, which can be cool when used in the correct situation. More often than not, however, Notes apps use some kind of navigation pane. This is usually located on the left side of the screen (a la the majority of Notes templates), but I'm starting to experiment with placing them on the right, which can also work well. In any case, these navigation elements are a necessary evil. When we make a lot of views available to our users, this is probably the easiest way to allow them to switch between the views.

If you do any kind of usability studies, or even just observe your users on occasion, I think you'll find that the overall percentage of time that a user is engaged with your navigation panel is relatively small. I haven't formally tested this, but my guess is somewhere around 10 - 15% of the time. Hopefully it's not more than this and ideally it would be less. Remember, we want the interface to "get out of the way" so the user can do their job. With the help of a handy Notes feature, we can do just that...Get the navigation panel out of the way.

If the user only interacts with this control on occasion, the rest of the time it is taking up valuable screen real estate. If we give the user the ability to completely hide the navigation pane until they need it, we can reclaim that space and put it to better use. How can we do this? If you are utilizing framesets in your application, you can implement a Border Caption on your navigation frame. A Border Caption in essence creates a collapsible/expandable frame. A picture can show this better than I can check out the graphics below (you can click to enlarge them).

By clicking on the green bar with the left facing arrow, the user can completely collapse that border, hiding the navigation pane. When they need it, they simply click the border again to expand it.

The good thing about this tip is that you can implement it immediately in a lot of your databases with just a small amount of effort. Try it out in a test file or your mail database first. Here's how:

The first step is to open your frameset and locate the frame used for your navigation. I'll bet most of you use a page with an embedded outline right? Yep...we do that! :-) Click on the frame and bring up the properties dialog.

On the third tab (which deals with border formatting), you'll find the "Border Caption" properties. You can play with these options to see what each does, but the gist of it is that you should set the "Show" property to "Arrows only". This will create the left pointing arrow that you see in the screens. The "Caption Formula" cannot be used here, since text can only be displayed on the top or bottom edge of a horizontal frame (such as in your mailfile). For Border Captions to work properly, you also have to make sure that the particular frame you are putting the border caption on is set to "Allow Resizing" (found on the second tab of the Frame Properties dialog).

Based on your UI design scheme, you will probably want to change the colors of the text and background color of the border. Even though you cannot include text in your caption (if your caption is for a vertical frame), you can adjust the size of the caption border by increasing or decreasing the font size.

I hope this tip helps you begin to make better use of YOUR screen real estate. If you have screenshots from your applications that use any of these tips, please feel free to share with the class. Post them on your site and leave a comment or drop me a line and I'll make sure to post them here. Adios!

Technorati tags: ,


Laurette Rynne said...

What a great tip - this is one of those things that I didn't even know existed.

Definately handy when dealing with complex views or small screen resolutions.

Nathan T. Freeman said...

Did you notice on my screen shots at my blog that I had the border caption for my navigator? :-)

Frames are underrated.

Chris Blatnick said...

@Nathan: I did now! :-) I was so impressed by the layers stuff that I missed that completely.

Nathan is referring to this post, which is a must read if you want to see an awesome Notes UI idea using layers.

I agree...frames are underrated (IN THE NOTES CLIENT). Of course, frames on the web are still evil! :-D

CSantoriello said...

I love it! Thank you! I had a problem implementing it in the db I'm working on, however. Maybe you can help. The frame I'm using it on is my 'navigator' - consisting of a page with two outlines. Each has a static text heading centered above it. When I click the arrow to collapse the frame the static text ends up arranged vertically along the left side of the frame. Very odd!

Chris Blatnick said...

Wow...that is odd! But, there is a way to fix that. Create a 1 row by 1 column table that is fit to margins and put your static text within that. When you close and then open the caption, the table will be resized correctly and your text should be centered exactly as you want. Hope this helps...

CSantoriello said...

That certainly did fix it, Chris!!Thank you once again!!!

Anonymous said...


is it possible to close nad open the border caption frame automatically by script or fomular ?


Chris Blatnick said...

@note-man: Sorry...I don't think that there is a way to open or close the border caption programatically. At least I haven't been able to find one.