Sunday, April 20, 2008

Simulating Fieldset and Legend In The Notes Client

You may have noticed that the signal-to-noise ratio of UI posts on this blog has been rather low the last few months. This is, unfortunately, a bi-product of my current job at IBM. While I'm cranking away on a development project, the ideas are coming fast and furious. When I'm not, it's much harder to come up with ideas. It's really the fact that solving a business problem spurs creativity, while actively trying to come up with new ideas as you stare at a blank page doesn't result in much useful stuff to share. I don't really create applications in this new gig, thus no great interface revelations. I do know that I really miss it, however, and I expect I'll find a way back. In the meantime, I am trying to squeeze in the occasional work on some personal projects, but my free time to do this seems to be ever shrinking. Please stick around, because I do have some ideas to share as soon as I can get around to fleshing them out. I've actually got several draft posts partially done, so it's just a matter of getting away from the wife, kids, horses, chores, work, et. al and doing it! ;-). That said, here's a cool tip but one that is simple favorite kind!

In the HTML world, a Fieldset allows you to group thematically related fields on a form together with a visual line bordering them to denote their relationship. In addition, you can use the Legend tag to give the Fieldset a title. These tags serve two purposes in that they visually show the relationship between the items and they make the form more accessible. Here's an example:

Of course you could get more fancy with CSS, styling both the Fieldset and the Legend.

So...a pretty simple construct, but I think you can see it's usefulness. Great...that's fine for the web, but how do we do it in the Notes client? Actually, there are a whole bunch of ways to accomplish this using standard Notes dev techniques. The two I've found most useful for my purposes are to either create a graphic for my Fieldset and Legend so that they look exactly like I want them to OR use a...wait for it...wait for it...LAYER! :-)

Let's look at the graphic approach first. In your favorite graphic editing program, create the top of the Fieldset with the Legend. Make sure to match the color of the border and text with the visual theme of your form. You should get something that looks like this:

Now go to Domino Designer and create a table that will serve as your Fieldset. Paste the graphic into the first row of the table (you might need to merge cells first) or paste it directly above the table (I'll do that for this example). In order to make everything line up, first size the table so that it matches the width of your Fieldset graphic. Then, turn OFF the top border of the table. Finally, set the Picture properties of the Fieldset graphic so that the Text Wrap is "Don't wrap, align bottom". This will drop the graphic so it fits snugly against the table, appearing to complete the border and giving you a Fieldset with a Label.

If you like using layers like I do, then you'll find that they are an even easier way to add a simulated Fieldset to your form. To do this, you simply need to create a new layer and position it on the top line of your table so that it looks like a Fieldset. This allows for easier maintenance as well, since if you want to change the label, you simply type the new value in the layer. You can also resize it, change the color, etc.

There are other ways to approach this idea as well. Daniel Soares suggested creating an inner table within an outer table. The inner table would take care of the formatting for your field elements and the outer table, which would be a single cell, would contain a background image. This background image would be the entire Fieldset border. You could make some fancy effects with this one.

If I did a poor job explaining this or if you'd just like to explore it in more detail, I've put a Notes client database out there for you to download. There is a single form in the db that shows examples of each of these techniques and you can deconstruct them to see how they are put together.

Labels: , , ,

permalink | leave a comment

Sunday, October 21, 2007

Quick Tip: Start Thinking About Accessibility

One aspect of usability that I haven't spent a lot of time exploring here is accessibility. Depending on your company or industry, this is a subject that may or may not mean a lot to you. A simple definition of accessibility is that it is concerned with making all of the functions of your application readily available to as many people as possible, regardless of ability. This may take the form of a well-designed webpage that behaves properly when accessed by a screen reader device for a visually handicapped user or making sure that if you design a drag & drop feature that there is an equivalent way to carry out the action for a user that is unable to use a mouse. Certainly making your applications completely accessible can add an entirely new dimension of complexity to the design process, but you can start by taking small steps when you are working in your prototype phase (you *are* using LFPs, right?). When you are working on an initial design for an application, take some time to consider any challenges various user types might encounter when working with your application. Then, try to figure out ways to mitigate these challenges while still providing a compelling experience for the majority of your users.

Let's take a very common example from Lotus Notes applications. Almost everyone can find at least one app in their environment that has views that utilize colored icons to denote some kind of status. Maybe it is a project tracking program and the adherence to the project schedule is represented by a red, green or yellow icon. Pretty standard, right, and easy to understand? Yep, most certainly...unless you are color blind. In this case, those icons might all look the same and without some other type of indicator, that user cannot determine which projects are in trouble and which are doing well.

How might we rectify this situation for our color blind user while maintaining our simple paradigm of using icons to denote status (which allows us to effectively use our screen real estate to show other important info)? One idea would be a slight redesign to use different shape icons in addition to different colors. Thus, our initial design becomes:

With this very simple tweak, we can still make effective use of icons to relay document information, still use color (which in this case is a powerful metaphor) and enhance the accessibility of our application for our visually challenged friend. Not a bad day's work for a small investment in time.

Accessibility is, as you would expect, a very broad topic and I've just scratched the surface with a simple example. What I hope to accomplish with this post is to get you thinking about the topic so it can be in the back of your mind the next time your start working on a design. Anytime you can overcome these small hurdles, your application is on its way to better usability. Good for you!

The screenshot here was respectfully taken from Automation Centre's excellent Tracker suite. Check 'em out.

Labels: ,

permalink | leave a comment