Bill's Blog

If you've been following my blog in the last few weeks, you'll have seen that I've not been updating it as much as I could - its been busy around here. Its starting to get back to "sane" now, so its now time for my much overdue SNTT for this week.

A common complaint about Notes applications is that they look like - well - Notes applications. A lot of folks like writing web-based notes applications because the "notes" look and feel can be hidden...

Now - in our product we've tried hard to at least give the user a slightly better user experience than just a Notes v3 standard form - you know the ones. The ones that have been in our faces for 10+ years, and look horrible by todays standards. Green Text, yellow background, seven fonts, and a road accident of text all over the place. (Actually, I'll be careful here and not name and shame really ugly commercial Notes applications at this point..)

How do you make Notes applications better ? One technique that we like to use is something called "Progressive Disclosure" - you give the end-user a simple series of choices, and based on the decision tree, ask them for little pieces of information at a time. So the users are prompted for few fields in a clear consise manner.

This isnt a new technique of course - most folks call them "wizards". Folks have told us that our UI is good, so we must be doing something right. (There's an animated GIF below showing this in action, and we have various video's on our site. So how to easily do Wizards in Notes ?

In version six five, there was a new table property - "show only one row at a time". It displays in a tabbed table - the names along the top. You can then set "Switch Rows Programmatically" and then have it use a fieldname to decide which table row to display. This means that the "name" of the tab is no longer visible. (You have to futz with the "also show tabs so user can pick them" to SET the "name" of the table row, and then deselect it to hide the tabs again.). As you can see on the right, I've got a table just behind that properties box, and the tab names have been set to "1", "2" and so on. (You dont have to use descriptive names - the user never sees them).

You then define in the table properties the "name" of the table, and then create a field starting with a dollar sign, followed by that name. You set the field to the value you want, and it opens the correct table row, and the user sees what you want him to see. As you can see, I've called our table "Request" and so need a field called "$Request".

Lastly, you then in lotusscript:

• Create a temporary notes document
• Set the table name "field" to the correct row name
• Use "NotesUiWorkplace.DialogBox" to display the temporary document using our form - and set the "only display the table."
• Each time the user presses forward and back, the form "closes", your back end code decides what to do next, and then reopens the form.. For example, our wizard "forward" button sets a status flag - "direction=forward" and then closes the screen. The business logic then decides what button press happens (based on the value in the temporary document) and displays the next page, etc.

Now there's a few advantages to doing this

• The user does NOT have to see all the possible wizards screens. For instance, when our user in our application decides to create a new user, the business logic looks up a view to decide how many "profiles" that the user can choose from. If he is only allowed to see one profile, then we dont prompt the user - we just choose it and move on.
• You do NOT have to end up putting horrible business logic on the form itself - since your only using the form to collect data. So no extensive @formula validation stuff in the fields - you can collect the whole data set. This is an important point. The code that displays the form need not be in the form itself. Ours is based on Object Oriented lotusscript libraries, etc. So the business logic is separated from the presentation layer. Another good example is the transition on the user create wizard from the "please enter the names" to the "submit" page. We can do all sorts of really complex business logic in our back-end code, and not litter that all over the form itself.
• The user thinks its a lot easier..
• Did I mention that once you understand this, its a lot easier to write good code and then re-use most of that code with this technique? Yup. Simple, easy, looks good and saves you hassle.

How do you make your Notes applications look good ?

Technorati Tags: Show-n-Tell Thursday, Lotus Notes, SnTT