Thursday, June 15, 2006

Heading to the Wild West...

Hi all! It will probably be quiet around here for a couple of weeks. Tomorrow, I'm packing the family on a plane and heading to Arizona for the beginning of an almost three week vacation. We'll be visiting family for a few days, then leaving on a 10 day camping trip that will take us from Tucson, through Arizona and Utah and up to Wyoming... hitting Yellowstone, Zion and many other national parks/monuments along the way. Should be cool.

Assuming I don't get eaten by a bear, I'll be back here in early July. Enjoy the summer...I know I will! :-)

Cheers...Chris

permalink | leave a comment

Sin City...Here I Come (In a few months)...

THE VIEW is putting on another great conference for developers this year. You can see dates and some other handy info at the official website: Lotus Developer2006. It's in Vegas, so a fun and educational time will be had by all!



Oh yeah...check out the "Speakers" page. :-) More to come soon...

permalink | leave a comment

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 explain...so 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 too...cool! :-) 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: ,

permalink | leave a comment

Wednesday, June 07, 2006

Formatting Sub Actions?

Last Thursday, I talked about using Action buttons to create a cascading vertical menu for navigation. I received some comments and e-mails inquiring as to how I got the color of the drop down for the sub-actions to be white. While I would love to be able to let you in on some cool unknown hack, I must admit that I don't think it's possible to style this menu at all (at least in version 6). As some visitors mentioned, the color is derived from Windows system properties, specifically the "Menu" option, that can be found in the "Advanced Appearance" tab of "Display Properties".



In my case, I am working with Windows XP Tablet Edition and using the Energy Blue color theme. The drop-down menu color for this theme just happens to be white, hence what was shown in my screen shot. If you change this property, it is applicable for the sub-action drop down, but also ALL other drop down menus in Windows (example below).



Sorry I don't have better news for you. It would certainly allow us to create more consistent and compelling interfaces in our Notes apps if we were able to style the drop down. Anybody at Lotus listening? :-)

permalink | leave a comment

Monday, June 05, 2006

Jake is at it again...

Over at Codestore, Jake is working on further enhancements to his Form Validator database. As I mentioned before, his work has been invaluable to many of us in bringing powerful and simple forms validation to our Domino applications. The new and improved functionality looks great! Jake is asking for people to help shake down this new version to see if there are any bugs. Check it out if you can.

permalink | leave a comment

Thursday, June 01, 2006

SnTT: Cascading Navigation in Notes

Hi again. I'm often asked by fellow developers how a particular UI technique can be applied in Notes. I really enjoy the challenge of rethinking how certain design elements can be used. A few days ago, a former colleague of mine asked about creating a horizontal cascading menu for her application that mimics a lot of web applications (like the example below).


In her case, however, this was only for the Notes client. While there are probably several highly exotic ways to implement this, I opt for simplicity wherever possible. With that in mind, I let her know about the following technique, which fit her needs perfectly.

The solution: Cascading Actions. The action bar provides us with a very nice and simple way to present dynamic drop-down menus. The way I would implement this to replicate the web functionality is to create a page that is used to house the actions. Then, this page can be inserted into the frameset just below the database header. In the figure below, the area I highlighted in green shows the position of the "HomeNavBar" page in relation to the rest of the frameset.

Click for larger version...

The "HomeNavBar" page just consists of cascaded actions, with nothing else on the page (although you could add more if you wanted to).


And here is the finished product...

Click for larger version...

Now you have a static element that is always available for switching to different views, composing documents, etc. In the case of this example, I was able to do away with the common navigation on the left-side of the screen, which was essential since the views had many columns and I wanted to prevent the users from having to scroll.

The great thing about this technique besides its simplicity is the fact that it can be styled almost anyway you would like, so if your database UI standards are updated, you just have to make a quick change to the Action Bar properties in one design element. Below is a sample I whipped up stealing some icons from Yahoo! You can download the database if you want to check it out in more detail.


Thanks for stopping by...have a great weekend!

Technorati tags: ,

Labels: , , ,

permalink | leave a comment