Friday, February 23, 2007

More Embedded Editor Fun

While playing around with embedded editors today, I came up with another cool idea. When you have an embedded view and you want to programmatically change documents, what can you do? Sure, you can put some action buttons on the embedded view, but that's kind of limited. What if, instead, you wanted to do something like in Gmail, where you can select a pulldown value to trigger some action on a document? Actions aren't going to help you too much then. Enter the embedded editor. On your form, simply add the design elements you want to use to modify the document. In the example below, I have two buttons and a select box. All of the form elements are hidden when embedded except for this line. When the embedded view is wired to the embedded editor and the user selects the document in the view, the buttons and select box appear. The code behind the elements can be as simple or complex as you want...they are just running on the selected doc. A simple yet elegant solution...

Click on the graphic for an animated version of this technique in action.

Enjoy the weekend everyone!

Sunday, February 18, 2007

You Only Get One Chance To Make A First Impression

Scenario: It's the day of the big application rollout. You've spent countless hours designing one of the best apps you've ever built. Not only have you written some great backend code, but you've worked hard to construct an awesome UI that you're sure will win the users over. The business process owner has asked you to inform the user community of the availability of the new program. You have your trusty admin sidekick (sorry..."hero support*") tweak the ACL and you're in business...the app is live! You click the 'Send' button on your e-mail message and off it goes around the country, perhaps around the world. Your colleagues start receiving the message and open it up, only to be greeted by the following:

Inspiring? Ummm...not so much. Think they are excited to get started using it? Probably'll be lucky if it doesn't go right to the trash.

As Nathan and I discussed at Lotusphere, when we talk about the user experience, we're not just addressing the UI of an application, but all aspects of the user's interaction with it. This means the help file, bug reporting, community discussion, and yes...even the introductory e-mail. In fact, this e-mail can be one of the most important things you design. Let me explain.

With the cognitive overload that most users experience when looking at their inbox, your message needs to stand out and gain their interest. Kathy Sierra once talked about how companies get things backwards. They spend a lot of time and money making really cool, slick glossy brochures to sell a product and once you get it, you open the box to find a boring, black and white manual. This is somewhat analogous to the introductory e-mail. You may have impressed the application owner with your "mad skillz" and got them quite excited about the app, only to disappoint them when they see the mail you've sent to everyone in the company. How many times have you sent a link to a user and later heard something like "oh...I didn't know what I was supposed to do with that, so I just threw it away"? This is to be avoided if you hope to build a passionate user community around your application.

Unless you work in a very small environment, chances are that most of your application's audience will not see the actual application until the day of release. In fact, many of them may not even be aware of the initiative and your e-mail will be the very first contact they have with it. Thus, it's really important that the e-mail contain some key details. At a minimum, you should include:

* Name of the application
* A brief description
* Name of the application owner
* Instructions for getting started

Depending on your user audience and their skill level, your e-mail may need to include more details and step-by-step help, or you might be able to get by on just the basics. As with all of the things I talk about, it's up to you as the developer to make a judgement call to determine what is best for your given situation.

Here's an example from an application rollout I was involved with to give you a better idea of what I'm getting at:

Notice that some care was taken to build this e-mail. Attention was paid to the layout and some nice graphics were added to give it a more professional appearance. In this example, a new database was being deployed and a training session for the application was planned about a week out. It was desired to have a hands-on training session, so it was important that the end users have the database locally replicated to their laptops. In this scenario, they were well aware of the application and it's purpose, so this e-mail was intended to assist them with the process of creating the replica, setting up the bookmark, etc. It was divided into a series of easy to understand steps, so that even new users (of which there were several), could figure out what to do. We even performed some quick user testing on the e-mail and some small modifications to the text were made as a result of the tests.

The extra time it took to construct this e-mail was negligible when viewed as part of the overall project, However, the initial impression it gave to the future users was that this was a professional initiative. Post rollout feedback was very good and the ease of performing the initial setup by following the e-mail instructions was mentioned by several users.

When all is said and done, this is just another small step you can take to improve the user experience in your applications. It doesn't take much effort and may seem to be rather insignificant in the grand scheme of things, but remember that the little things can add up and you'd rather have them add up to a positive than a negative.

*A little reference to "Sky High"...a great Disney movie for the family.

Sunday, February 11, 2007

Quick Tip: Layers In Tabbed Tables

Color me (not so) surprised...we found a little issue with layers! :-D I have to give credit to Deborah Byrd, who brought this to my attention and pointed out the exact cause. She was having a problem placing a layer within a particular row in a tabbed table. I know I had done this before so I thought perhaps it was a version issue. I asked her to send me a copy of the form and sure enough, I was able to place a layer on the exact tab she wanted it in. I erroneously replied to her that I thought it was accomplished via the hack of creating the layer outside of the table and then pasting it in the appropriate tab. I sent it back to her, thinking how cool I was for figuring it out so fast! ;-D Ah...of course I should have known better. Turns out, when Deb tried to place the layer anchor where she wanted it, it wouldn't work! The problem was trying to place the anchor inside of a table that is nested in the tabbed table! You can put the layer anchor there, alright, but the layer seems to fall outside the table and doesn't respect the positioning of the tabs. Really weird! This was an unknown layer issue to me, so thanks to Deb for finding it. I hope this post helps you if you are having a similar issue. Cheers!

Monday, February 05, 2007

Come Talk About UI Goodness...

Hi Everyone! The good folks over at have asked me to be a forum moderator once again. When I did it last September, the announcement kind of fell through the cracks, so I didn't get any questions. Now is your chance to discuss the topic with others or ask me questions about UI design. I'll be checking out the forum all week (probably at night) and doing the best I can to give you answers that you can use. Please head over to the 'Designing The User Experience' forum to join in on the fun! :-)

Speaking of, make sure you check out the site and register for the newsletters. This is your opportunity to be part of the Lotus community and there are some great people working on making the experience a valuable one for all of us. The LotusUserGroup website, along with OpenNTF, should be a regular stop for all Notes and Domino professionals.

Friday, February 02, 2007

Some Good User Experience Reads...

Hi everyone! One of the things I've been planning to do for a while is create a reference area where I point out the books, articles, etc. that I feel are essential reading if you are interested in the user experience and interface design. Well...this isn't it, but I AM working on it. In the meantime, I wanted to point out a couple of good recent articles that I came across that are definitely worth a read.

Heuristics for Modern Web Application Development by Andy Budd

Paradox of the active user by Matt Linderman

And finally...don't let your manager get involved with your designs unless he or she knows what they are doing! :-)

Have a great weekend!!!