Tuesday, January 30, 2007

Lotusphere Demo: Drag, Drop and More

One of my cooler demos from BP101 (in my opinion), was the drag and drop processing demo. This was in no way as cool as Nathan's, but there are some fun little tricks here which you might find useful. Again I'm making the non-polished version available right now so you can play with it, but I'll emphasize that this really hasn't been tested too much.

For those of you who couldn't make it to the session, here's the scenario I envisioned and the functionality that is available. Basically, I came up with the idea of a corporate "library" where you can browse through the books and if you want to "check one out", you do so by utilizing a drag and drop function to put it in your "basket". When you are finished, you can click a single button, which will check all the books out to you. Once again, I wanted to show you that it's not just the Web 2.0 crowd that can do cool interfaces. For this example, I chose to replicate the drag and drop functionality demoed by the script.aculo.us javascript library. Not only did I want to copy the functionality, but also wanted to show that the look and feel in the Notes client could be very similar. Here's what I ended up with:

There's a lot going on in this little demo, so I'll walk you through each feature (uggghh...why do I keep doing this to myself...lots of screenshots to make! ;-)

(1) First up is the drag and drop processing itself. To add a book to your "shopping cart", you grab the doc from the embedded view and drag it over to the icon on the right side of the screen. You can see a sweet little Flash version of this by clicking the image below.

Click for animated demo

Effective use of drag and drop is a balancing act. The physical action of moving something from one place to another is a good metaphor from the real world, but in the electronic realm this presents some difficulties, at least the very first time the user sees your app. In cognitive psychology, there's a concept known as affordance. Affordance basically deals with whether the actions that an object can perform are obvious based on the object's physical properties. As it relates to our interface design, being able to drag an object (something on the screen) is usually not obvious.

Many of us know from past experience that we can drag a document to a folder in Notes, but if you were seeing this for the first time you would not have a clue this is possible unless you started playing around. Thus, if you decide to use drag and drop document processing, make sure you provide some kind of visual clue that this is possible. On the web, you can usually manipulate the properties of an object much easier than you can in the Notes client, so for client work, you'll probably have to settle for a message that tells the user what to do.

In this example, there's some text that says "Drag a book from the list and drop it on the button below to add it to your Shopping Cart". As long as the user sees this message, they'll be good to go. Once they perform this action the first time, they won't need help anymore. Drag and drop is a simple act that users remember quite well...and it's usually one they like too! (Don't forget to do usability testing to make sure your users concur). One interesting fact about drag and drop is that it is actually a slower process than the equivalent action of clicking a button. Usually, slowing the user down is the opposite of what we want to accomplish, but in this instance, it is a common and memorable action that many users prefer.

(2) "Check Out" is performed via the button under the items listed in your cart. Clicking this button gets all of the documents that you have placed in the cart (a private folder) and sets a field with your user name. The embedded view is then updated to reflect that the documents are now checked out.

(3) I wanted to provide the users with a little abstract about the book they are interested in. If the user double-clicks on a book in the view, a little popup appears (done via a layer, of course) with this content. Ohhh...ahhhh.... I like it! :-)

Click for animated demo

What's that you ask? Why, yes...yes there is a sample database available. Here you go...I hope you find some useful ideas within. If you are interested, here are some of the tricks I used.

* We don't get much in the way of drag and drop controls within Notes. However, we can drag documents from one folder or view to another easily enough. I utilized this fact to accomplish everything you see in the demo. The "Shopping Cart" is an embedded outline with a single entry that references a folder called "ShoppingCart". Since there's some logic I wanted to invoke when you try to drop a document on this outline, there is code in the QueryAddToFolder event of the embedded view. This code is responsible for things like checking if you are trying to add a document that is already checked out, making sure you only try to drop a document into the Shopping Cart, etc. Because I wanted to display the books added to the cart, I used a second folder called "ViewCart". The code in the QueryAddToFolder event actually adds the document being dragged to that folder if it is not checked out. Thus, we get the effect of the document immediately appearing in the area below the Shopping Cart drag target if the action is allowed.

* I didn't want users to be able to open the "ShoppingCart" folder directly, so this folder has a single line of code (Continue = False) in its QueryOpen event.

* If the users want to remove items from their cart, there is a place under the view where they can drag the documents out. This area is just another embedded outline, this time referencing a folder called "DropRemove". Since you can drag docs from one folder to another, this provides an elegant way to "remove" an item from the user's basket. Although I didn't do it since this is a demo, you'd probably want to provide some code to periodically clean that folder out. I also set Continue = False for the QueryOpen event of this folder so the user doesn't click the outline control and accidentally open the folder.

* The popup abstract is accomplished with an embedded editor placed on a layer. All of the content on the main book form is hidden when embedded except for the abstract field itself. The layer anchor is hidden and only displayed when the user double-clicks the document. To accomplish this, I placed code in the QueryOpenDocument event of the embedded view. First, I grab the container uidocument and set a field called "txt_ShowDetails" to "1" and refresh the hide formulas. In order to prevent the document from opening, I just use Continue = False again. The hide-when property of the layer anchor references the "txt_ShowDetails" field and only displays when this value is set to "1". Depending on your situation, it may be more advantageous to use environment variables. For this demo, all of the action is taking place on a form that doesn't get saved, so I chose to use a field.

* Notice that the embedded view has rounded corners (woo hoo!). Too bad it's not really an option in the client. This is accomplished by using an image for the embedded view's border property.

* In case you didn't know (I had a few people ask at Lotusphere), you can have graphics in your view...they just need to be set as Image Resources. Here's some additional detail... And here's some more.

* Just for fun, I wanted to see how to maneuver through the view without scroll bars. Check out the action buttons which move you up and down. Also, notice the formatting of the embedded view, which I think is kind of nice. This is accomplished using categorization. If anyone can tell me how to prevent the categories from collapsing when clicked on, that would be really cool. Obviously the utility of this idea is limited, but it works nicely if you only have a handful of documents to deal with.

* For your testing purposes, I added an action in the embedded view to "return" a book. If you've ever had a problem targeting a document that is highlighted in a view, you might want to check out the code in this action button. The trick is to use CaretNoteID of NotesUIView.

Well...I think that about wraps it up. Have fun playing around and, as always, if you find any good uses for these techniques, I'd love to hear about it.

Labels: , ,

permalink | leave a comment

Recorded Here For Posterity...

The stunning interface we came up with on the fly for BP101 - Designing The User Experience! ;-)

And of course we go to 11!

Thanks to Michael Kohn for capturing it in action!


permalink | leave a comment

Monday, January 29, 2007

Lotusphere Demo: Enhancing A Template UI

My perfectionist tendencies usually keep me from posting things until I'm almost completely satisfied with them. However, since so many of you have been clamoring for the demos from Lotusphere, I'm going to start putting them here, even though they are far from perfect. First up is the remake of the Document Library template that I started working with on the plane down to Lotusphere. We showed this one really fast, so let me preface this with some quick background. Sitting in the airport, I was thinking about the idea that I bring up often regarding interfaces in Notes. Basically, I think you can really push the boundaries of what you have seen with the UI...you just have to be willing to put forth the effort. Sometimes, it's not really even that hard. By the time I got on the plane, I decided that I wanted to take a stab at modifying one of the default templates that Lotus provides us. I chose the standard Document Library.

Now don't get me wrong. I think the out of the box templates are very powerful and are a great way to get up and running with Notes. The user experience, however, leaves something to be desired. They worked great 10 years ago, but are now beginning to show their age. I specifically chose the Document Library because...ug...look at that color. Yikes! :-) In case you forgot, here's what it looks like populated with some documents.

I love the color scheme even more with the pink unread marks! :-D

Anyway, this isn't the worst Notes UI I've seen by far, but there is much improvement that can be made. I decided to model the new UI after a commercially available app, just so you could see how easily the UI can be tweaked to look like almost anything. I'm a big fan of the work the guys at 37signals do, so this updated Document Library is a homage to their Basecamp app. By the time we were in the air and laptops could be turned on, I had a rough idea of the changes to make. I fired up my machine and worked for the next couple of hours on the main layout. Since I returned from Lotusphere, I had a couple of ideas to tweak it a little more, adding in some neat functionality (although whether or not this would be practical in the real world would of course depend on user testing). After all is said and done, I ended up with something like this:

While I made a few underlying changes to the design, I tried mostly not to touch any of the existing things. Looks a bit nicer I think.

Alright...here's the database so you can open it up and play around with it. Again...I'll throw out the disclaimer that this isn't close to done, but if you had to wait until I felt comfortable with it, you'd be waiting a long time! :-)

I did come up with one cool new technique that I'd like to point out (new for me anyway). Check out the little "Abstract" box to the right of the view. I did this, of course, with an embedded editor/embedded view combo. I wanted to make sure, however, that only the abstract appeared in this box. Luckily, there is a hide-when property to hide information when it is embedded. This becomes problematic, unfortunately, when you have a rich-text field, since each paragraph of the rich text has it's own hide-when property. Another challenge I had here was that I wanted to format the abstract text in a particular way, with a fixed width and with a little gradient shading. I didn't want this to appear when the user opened the document though, but there's not an option to "show information only when embedded". After I thought about it for a little while, I remembered one of my favorite design elements...programmable tables!

To get the functionality I was looking for, I created a programmable table with 2 rows. The first row should be visible when the user opens the document for reading and editing. The second row contains the formatted abstract area and should only be visible when the document is embedded. Here's where a handy trick comes into play. In the PostOpen event of the "Document" form, I placed the following code:

Sub Postopen(Source As Notesuidocument)

Dim workspace As New NotesUIWorkspace
Dim uidoc As NotesUIDocument
Dim doc As NotesDocument

Set uidoc = workspace.CurrentDocument
If uidoc.Document.UniversalID <> Source.Document.UniversalID Then 'Doc is embedded editor
Set doc=Source.document
doc.~$AbstractTable = "Row2"
Call Source.RefreshHideFormulas
Call doc.removeitem("$AbstractTable")
End If

End Sub

This LotusScript was converted to HTML using the ls2html routine,
provided by Julian Robichaux at nsftools.com.

When a document is in an embedded editor, uidoc refers to the container document, while Source refers to the document that is embedded. If the document is opened and it is not embedded, then these two objects reference the same thing. So, I check the UNID and if they are different, I assume that the document is embedded and thus show "Row2" instead of "Row1". Pretty cool, eh?

There's probably some major deficiencies in this that I haven't encountered, but so far in playing around with it, it seems to work pretty well. In any event, the technique may have some useful applications in the future. Let me know your thoughts.

OK...I'll sign out for now. Enjoy playing around with the demo and feel free to share any comments or modifications that you've made. Note that I didn't make any changes to the form yet. That is a challenge unto itself. First I want to get some of the other things out there. The drag and drop demo is coming up tomorrow...keep an eye out for that. Cheers!

Labels: ,

permalink | leave a comment

Sunday, January 28, 2007

Speaking at Lotusphere: Some Final Thoughts

I just posted my overall wrap up of Lotusphere 2007 and what an incredible experience it was. Next time, I am going to try and do a lot better job of recording my thoughts at the time, since I probably forgot half of the things I wanted to talk about.

The highlight of this Lotusphere for me, of course, was getting to speak at the conference for the first time. I had the pleasure of working with one of the greats in this business, Mr. Nathan T. Freeman. Nathan's breadth and depth of knowledge in Notes is incredible. He is a really funny and entertaining guy and has a great presence on stage. He said that he was anxious before our sessions, but he seemed totally natural and spot on from my point of view. I really hope we'll get to work together again in the future! I want to publicly thank him here...It was great presenting with you Nathan! :-)

Our first gig of the show was BOF202 - Designer's Unite. This was 7 AM on Tuesday morning, so I wasn't sure we'd get many attendees. About 20 people actually showed up. We had an excellent discussion and Nathan and I didn't have to do all the talking. It was great to put a few more faces with names as well (Kevin, Curt, Richard). As soon as we came into the room, Nathan started rearranging the chairs, having everyone pull them into a circle. :-) It was a great idea, really, as it helped to stimulate the conversation.

Now on to BP101 - Designing the User Experience. I am overwhelmed by the response to this session. I thought it went pretty well, but evidently our lack of being able to rehearse in person didn't put a damper on the enthusiasm of the attendees in receiving the information. Nathan and I were reading through your comments in the evaluations and I am very humbled by the praise you heaped upon us...keep it coming! :-D (hehe...just kidding)

For those of you who attended, thanks very much for showing up. Please remember that the whole point of this session was to inspire you to try and start experimenting with UI constructs. You definitely can create compelling interfaces in Notes...it just takes some persistence. Several attendees commented to me afterwards that they just "can't do UI", but I think if you keep at it and continue to study sites with good design, you most certainly can improve your skills.

If you are here looking for the full slide pack and my demos, please just give me a couple of days to catch up and I will post them (although Nathan is so on the ball he probably already has them up). I will be doing several follow up articles in the new few weeks to drill into much of the theory in more detail, so keep an eye out for that as well. I also invite you to share with the community. If you have a UI that you'd like to show off, send me some screenshots along with a short description. I'll start profiling them here and maybe together we can start to assemble a nice gallery of UI material.

Finally, it was a pleasure getting to meet so many new people this year...thanks for coming over and introducing yourselves. For those of you finding this blog for the first time, Welcome! Below is a quick index to a few of my past postings which relate to some of the topics covered in the session. Cheers!

It's Got Layers
Embedded Editors That Work
Rethink Your Interface
Cascading Navigation In Notes
Using Border Captions To Make Better Use Of Your Screen
Quick Tip: Simulating A Frozen Column
Sometimes, It's About What's Not There


permalink | leave a comment

Lotusphere 2007: That's A Wrap...

Looking back on it now, Lotusphere week was absolutely amazing and the best one I've attended yet! For one thing, this is the first Lotusphere where I feel that there was so much good stuff to see and do that I probably missed out on half of it. You most likely have already read the announcements of upcoming new products like Quickr and Connections. Both look exciting and promise to help bring in the next wave of collaboration. They do look like true "Enterprise 2.0" applications! I still need to sit down and get my head around them more before I can offer up any helpful opinions, but I do know that after this week, any thoughts of getting out of this business have been banished from my mind! Now the trick is to find the company that will embrace these new technologies and exploit them to their full potential. Composite applications were very much on everyone's mind at this Lotusphere and this is a space that promises to revolutionize our current work in Notes. Once again, this is an area that I really need to study in more detail before I can comment in a meaningful way.

The Blogger Q&A with Mike Rhodin, Doug Wilson, Carol Jones and Jeff Schick was a first time event that I hope will be repeated in the future. It was great to have direct access to these people, but it was unfortunate that we only had 30 minutes, which is far to short of a time for the Lotus blogging community, who we know have an issue with brevity (although Mr. Rhodin had that problem too)! ;-) Mike reiterated the point that 99% of the stuff they are introducing at Lotusphere will be shipping by summer, which is pretty exciting. He also mentioned that the new product announcements represent the largest expansion of the IBM Lotus product line in the company's history! Important to many of us is a question asked by John Head. He inquired as to how Lotus will be bringing the world of Web 2.0 to Domino and the answer was that a strategy is being developed but that backward compatibility has to be at the forefront of this work. This is a great point I think people sometimes lose sight of as they complain about Domino's web framework, but it is absolutely essential for the large enterprises that rely on it. In case you missed it, Mike Rhodin also just started blogging!

Gurupalooza was a fun event, although the time sure does fly. Some of the speakers obviously love getting a hold of the microphone, although no names will be mentioned... ;-) Kevin Pettitt was live blogging the session, so make sure to check that out.

The OpenNTF booth crew were great and I'm glad I finally got to shake hands with the amazing Bruce Elgort. I know they gave out all of their T-shirts, so I hope that all of the folks who grabbed them also take the time to check out what OpenNTF has to offer. Speaking of OpenNTF, the BOF had a great turnout, completely filling the room and generating some neat ideas for continued expansion and collaboration.

I had the pleasure to meet up with Jess in the hallway outside the product showcase for a quick "2 Minutes with the Gurus" podcast (although refering to me as a guru is probably stretching it quite a bit!) :-)

I didn't get a chance to get to as many sessions as I thought I would, but best ones would be:

  • Alan Lepofsky's ID109 - IBM Lotus Notes Hints, Tips, and Tricks
  • Ed and Julian's ID212 - How to "Sell" IBM Lotus Notes and Domino Inside Your Organization
  • John and Sean's BP304 - Blog It Up, Baby! Extending the New IBM Lotus Domino Blog Template
  • John and Alan's BP204 - Integration of OpenOffice.org and IBM Lotus Notes and Domino and
  • Julian and Rob's BP312 - Trap and Manage Your Errors Easily, Efficiently and Reliably.

There's some amazing stuff coming in OpenLog. If you are not already using this awesome, FREE tool to manage your errors, get on over to OpenNTF and download it today!!!

If I had to sum up Lotusphere in a couple of sentences...I would have to say that one of the coolest things is that there were tons of smart people there and I'm not just talking about the speakers. So many of the attendees had great ideas and have given me many things to think about. The Lotus space is more energized than I've ever experienced and it's quite exciting to be a part of it. I can't wait until next year!!!


permalink | leave a comment

Sunday, January 21, 2007

Dateline: Sunday - Lotusphere 2007

Wow...Lotusphere is off to a great start! The place seemed pretty packed throughout the day. No wonder...according to Ed, there were a lot more folks here than expected for a Sunday. This is great news...can't wait to hear the official tally of attendees.

Only got to attend one session today, as Nathan and I were working on our presentation. We're really excited to introduce this material to people and hope that they are equally excited to check us out. (Here's a hint: If you come to our session, you'll learn the secret to getting a cool Lotusphere goody.)

I met some great folks today (Jess, Tom, John...very nice to meet you all) and had a chance to reconnect with several old colleagues. That's one of the great things about the 'sphere...the chance to meet friends both old and new.

Keep an eye on this space in the coming weeks, as I hope to bring you some cool UI ideas from our session. Cheers!


permalink | leave a comment

Wednesday, January 17, 2007

Interface Matters When Taking Notes...

Thanks to Nathan's unmentionable favors, last night we were the featured guests on the latest edition of the Taking Notes podcast. We had the opportunity to discuss a little of our user experience philosophy and give listeners a sneak peek into what we'll be covering in our Lotusphere sessions. Please kick back and take a listen.

Thanks to Bruce and Julian for the opportunity!


Interface | Matters @ Lotusphere

BP101 - Designing The User Experience: Why Your Interface Matters
BOF202 - Designer's Unite: Developing Innovative Interfaces In IBM Lotus Notes

Labels: , ,

permalink | leave a comment