Thursday, December 27, 2007

SnTT: Using @Abstract To Enhance A View

Have you ever wanted to spice up a view a little by adding abstract information to it? That is, to include some of the text of the document in the view itself so the user doesn't have to open it to determine if it is worth reading? This is pretty simple to do using the @Abstract formula.

@Abstract allows you to abbreviate the content of a field in a Notes document. What I find cool is that it can also work on Rich Text fields. Now, @Abstract is very powerful and can allow you to do some interesting transformations with information in a field, but for the purposes of exposing some abstract information in a view, we'll just use the simple stuff.

In order to maintain good performance in your application, you shouldn't use @Abstract in the view itself. Instead, create a new field on the form in question in order to capture the abstract information. You can then refer to this field in the view column. Let's say you want to add this functionality to a document library. Open the 'Document' form and add a new field called "BodyAbstract". This should be a computed text field. The formula for this field would be something like:

@Abstract( [TextOnly]:[TrimWhite]; 1000 ; "" ; "Body" ).

As used here, this will capture the text of the "Body" rt field, trimming out whitespace and grabbing the first 1000 characters (Check out the help file to see how you can enhance @Abstract with additional keyword parameters).

In the view, in order to allow the user to decide whether or not the abstract should be visible for a particular document, I made the "Subject" column categorized, then included the abstract in a regular column. Here's what it looks like in design mode:



And here it is in action:

Click to enlarge


@Abstract is useful for many purposes, and this simple technique exposes just one of those. I think this idea makes sense for a lot of document-based repositories and as a bonus is really easy to implement.

Sunday, December 23, 2007

Check Out Lotus Note-ables!

Hi all...Hope you're all enjoying the holidays!

I frequently think of or run across Lotus related things that I'd like to post here, but I tend to hesitate, as I'd really like to keep Interface | Matters focused squarely on a specific topic. Since I'm also often toying with different technologies, I setup a new blog to capture these random thoughts. So, if you want yet another site to add to your RSS reader, head on over to Lotus Note-ables and check it out. :-)



I'll be including little snippets about Lotus Notes, and other Lotus products such as Quickr, Connections, Forms, etc. Sometimes I might include a little code (such as the pseudo-code formula language test post I made today).

The site is hosted on Tumblr, which is more like a micro-blogging site. Thus, there are no comments or fancy gadgets to get in the way...just a method for me to drop in quick thoughts. Hope to see you there.

Friday, December 21, 2007

SnTT: A Simple Notes Based Document Rating Idea

Today, I wanted to whip up a simple document rating system that could be used in the Notes client. We see these all the time on the web. Netflix, a site I use regularly, has a nice implementation, as do many others. Jake showed us a nice version using Domino just recently too. I wanted to come up with a pure Notes solution, so I decided to make use of the editable view column property to accomplish this and it turns out it is very easy. I'll refer you back to this post, where I first discussed the concept of using an editable view column to perform an action. Before I review the specifics of the implementation, here's a quick movie to see how it works.


Click for animated demo


This is just a first pass, but I can see that this could be very handy. Basically all that is happening is that we are checking which star (column) is being clicked in the InViewEdit event. Then, we're equating this column to a value, which we add on to the total votes count to date divided by the number of votes. Then, in the final step of the InViewEdit code, we write the new rating value back to the document. I even added a simple check to make sure the user doesn't vote more than once.

Let's break it down step by step:

Step 1: Add columns to your view. I created a separate column for each star, since I want to know explicitly which one was clicked. Set the column to be editable and set it to "Display values as icons".



Step 2: The column value checks the current rating and based on the position of the column determines if it should show the filled or unfilled star.

@If(num_Rating >= 1; "star_red"; "star_open")

Step 3: Add the code to the InViewEdit event. I've included a bunch of comments so you can see what I was going for


Sub Inviewedit(Source As Notesuiview, Requesttype As Integer, Colprogname As Variant, Columnvalue As Variant, Continue As Variant)

Dim session As New NotesSession
Dim db As NotesDatabase
Dim doc As NotesDocument
Dim caret As String

'Get the CaretNoteID - exit if it does not point at a document
caret = Source.CaretNoteID
If caret = "0" Then Exit Sub

'Get the current database and document
Set db = Source.View.Parent
Set doc = db.GetDocumentByID(caret)

'Check if user already voted by looking if the user's name is in the nam_UsersRated field
'This is just one possible approach. Not sure how this will scale...might want to create a
'new doc in the backend that just records the user's vote for this doc. Have to explore...
Dim alreadyRated As NotesItem
Dim check As Variant
Dim currentUser As String

currentUser = session.UserName
check = Evaluate ( |@IsMember("| & currentUser & |" ; nam_UsersRated)| , doc )
If check(0) = 1 Then
Messagebox "Sorry...you've already voted for this document"
Exit Sub
End If

'If we got this far, the user hasn't voted yet, so we'll take their entry
Dim numRatings As Double '# of users who have rated doc
Dim voteTotal As Double 'numeric total of votes
Dim newRating As Integer 'the new rating for the doc (1 to 5)

numRatings = doc.num_NumberOfRatings(0) + 1
voteTotal = doc.num_VoteTotal(0)

Select Case Colprogname(0)
Case "Star1"
voteTotal = voteTotal + 1
Case "Star2"
voteTotal = voteTotal + 2
Case "Star3"
voteTotal = voteTotal + 3
Case "Star4"
voteTotal = voteTotal + 4
Case "Star5"
voteTotal = voteTotal + 5
End Select

newRating = Round((voteTotal / numRatings), 1)

doc.num_Rating = newRating
doc.num_VoteTotal = voteTotal
doc.num_NumberOfRatings = numRatings

'Add the user's name to the list of people that voted
Set item = doc.GetFirstItem( "nam_UsersRated" )
Call item.AppendToTextList( session.UserName )

Call doc.Save(True, False, True)

End Sub

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


Voila!



Of course, before you implement something like this, you need to think through the implications of it in a production database. Do all users have the ability to edit documents? If not, perhaps you could use stub documents instead. Also, do you want to give the users the ability to see their vote vs. the actual vote? All of these things can be done...this is just the tip of the iceberg.

While this is really rough and I can think of several enhancements to be made, please feel free to download the sample database if you want to play around with it. If you actually use this technique or enhance it, please let me know...I'd be interested to see it.



Have a great holiday everyone!

Thursday, December 20, 2007

Quick Tip: Add To Folder...

Well...this is short and sweet! :-)

Recently, I was surprised to find several people that did not know this little tidbit, so I thought I'd share. Plus, it's a nice addition to my last post about drag and drop in case you use a folder for the target.

If you want to add a Lotus Notes document to a folder while keeping it in the current folder, just press the "Ctrl" key while you do so. Just like in Windows Explorer, you'll notice that the cursor changes slightly to denote that you are "copying" the document to the new folder rather than just moving it.

Like I said...short and sweet [insert obligatory short Notes developer/admin joke here...there's a bunch to choose from! ;-D ]

Sunday, December 16, 2007

Quote of the Day

From my daughter Haleigh (she's 9 and autistic) in reply to her brother who asked if we had any Canadian Bacon:

"Do we have to go to Canada to kill a pig to get Canadian Bacon?"

Made us laugh...

Friday, December 14, 2007

Want to work with me?

Well...not directly with me, but on the same team (which I guess sometimes could mean directly with me).

Anyway, if you're keen to join me in the wonderful world of technical sales for Lotus Software *AND* you live in either Columbus, Cleveland or Pittsburgh *AND* you have strong Portal skills, then we want to talk to you! :-)

Here's the gist of the job:

Responsible for technical product/solution presentations and demonstrations of IBM's Messaging, Portal and Collaboration solutions, conducting Proof of Concepts and Proof of Technology workshops, responding to RFIs/RFPs, interfacing with IBM Support, development, cross-brand solution teams, and supporting post-sales support situations. Must have a strong track record of effective teaming and leadership, excellent communication and project management skills, hands-on experience with WPLC solutions, and client facing skills.


Cool stuff, eh? If you are interested, please send me an e-mail and we'll talk.

Drag & Drop From One Database To Another

I recently had someone ask me a question about some of the drag and drop techniques I use in my applications. One of the questions was whether or not you could drag and drop between databases. I can't recall ever having done that before, but with a little clever coding, it can be achieved. Here's how:

To accomplish this, I actually use the same technique that you may have seen in the presentation Nathan and I gave at Lotusphere last year.

The first step is to create a new folder that will serve as the target for the drag and drop action. The design of this folder doesn't really matter unless you want to use it as a folder in your source database. Once your folder is created, you want to add an entry for the folder on either an existing outline or create a new one. In the outline, reference the folder and add an icon if desired.

In order to get the documents being dragged from the source database to the target database, it is necessary to add code to the Queryaddtofolder event of the view/folder in which the document originally resides (not the one you are dragging it to). This code will perform the work of copying the source document to the destination database. Of course, there's lots of flexibility with how you could write this code (and it's probably best to throw it into a script library and use it in the views/folders you need it), but here's a sample I put into my mail file.


Sub Queryaddtofolder(Source As Notesuiview, Target As Variant, Continue As Variant)

'Here you could branch code based on the target folder.
'In my case, I don't want anything special to happen unless I'm dragging to the "DragTarget" folder.
If Target <> "DragTarget" Then Exit Sub

'In the case of my mail file, I don't want any docs actually going into this folder, so we'll set Continue to false, which will prevent this.
Continue = False

Dim session As New NotesSession
Dim collection As NotesDocumentCollection 'The documents selected (i.e. being dragged)
Dim doc As NotesDocument 'The doc in the source database
Dim newDoc As NotesDocument 'The doc in the target database

'Hardcoding is bad...don't do it! :-)
Dim targetDB As New NotesDatabase ( "", "mail1\gtd.nsf" )

'Get the collection of docs selected and iterate through...sending them to the target db and moving them to the appropriate folder
Set collection = Source.Documents
Set doc = collection.GetFirstDocument

Do While Not (doc Is Nothing)
Set newDoc= doc.CopyToDatabase( targetDB )
Call newDoc.PutInFolder("($Inbox)")
Set doc = collection.GetNextDocument(doc)
Loop


End Sub


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

This is a look at the implementation from my mail file. I have another database where I keep my to do lists. Often, an e-mail initiates some kind of action on my part, so rather than copying and pasting from my mail file to my Task database, I can just use the drag and drop feature. This is how it appears in Notes 8 integrated into the new look and feel. (Nothing exciting...looks like it's just part of the interface...which is what I wanted)


I made it look a little different in Notes 7 by using a bigger graphic to serve as the drop target. Again, this is just an outline embedded on a page, so you could use any kind of graphic you want.


Pretty handy and easy to implement as well. Enjoy!

Friday, December 07, 2007

Introducing Raj...

Hi Folks. You know that the User Experience design team for Notes 8 used personas extensively in their development cycles. Well...I am really pleased to see the first of the application developer personas for Domino Designer, which was unveiled today. This is such a great persona...I expect we'll see a lot of good stuff come out of this. Congrats to the UE team! So what are you waiting for...go meet Raj! :-)

Print Anywhere...YEP...Anywhere!

Besides being a self-styled Lotus evangelist (I just bought a new car and am going to get some personalized plates...and I'm considering things like IM LOTUS, NOTES8 or QUICKR...man, what a geek!), I'm also a productivity junkie. Anything that can make me more productive while allowing me to maintain high quality output is considered for part of my standard toolkit. I wanted to tell you about one of those tools that has just entered my arsenal.

Say you are at the office and you want to print something out but don't want to use work printers to do it. Maybe you'll e-mail it home or save it to a USB key, then bring it up on your home machine and send it to the printer. Yeah...that works, but sometimes it's a chore. Perhaps you don't have the same program on your machine at home, or the kids are hogging the PC chatting with their friends.

All of these potential time wasting issues are now a thing of the past thanks to Printer Anywhere. Printer Anywhere is an incredibly useful tool that allows you to print to a remote printer using the internet. Thus, in the scenario above, you could print directly from your work PC to your printer on the desk at home. The service works by installing their software on the machines you want to print to and from. It automatically recognizes printers connected to your computer and gives you the option of sharing them. When you want to print a document, you simply issue the print command, pick "Printer Anywhere" as the printer and then choose the remote printer from a list (you can search by user ID, name, etc.). The item to be printed gets packaged up and sent across the internet to the other device, where it rolls off just as if it was printed from the local machine. That's the simplified version anyway. You can find out all the details, plus cool features such as encryption and the like, by exploring the Printer Anywhere homepage.

I can see many unique ways to use this service and plan on exploring it more in the future. Thought you might be interested in checking it out too. Cheers!

Improved Layers Would Rock

It's no secret that I love using layers. So do Nathan, Ben, and a bunch of other people. Thus, I was quite excited to see Don posting this great tip on Idea Jam.



Please go vote it UP...I think you should! :-)

Monday, November 26, 2007

Rounded Corners Are Nice

Quick tool tip of the day: If you have a (ahem) rounded corner fetish but aren't so handy with Photoshop or Paint Shop Pro, there's an online tool that will allow you to quickly add rounded corners to any photo or graphic.

Just head to RoundPic.com and either select a photo from your computer or enter in a URL. Click the "Round It!" button and your anti-aliased, rounded corner image will magically appear. You can even select the amount of rounding you want and the background color that will define the space "behind" the image. A downloadable image is then made available for your use. A perfect solution from a website that focuses on one common problem. Enjoy!

Wednesday, November 21, 2007

Viral Upgrading

Hi All. Long time, no see. I haven't been writing a lot of code lately since I'm still ramping up my knowledge at IBM, but I *am* working on some stuff for Lotusphere. I'll be doing three sessions this year; two with Nathan and one with Bruce. How I end up lucky enough to speak with these guys, I do not know. Anyway, more on that to come. For now, I want to talk about "Viral Upgrading".

The Notes 8 client represents a significant shift in the way IBM views the user experience. Over the years, I've made my name as a consultant and in-house developer by working to develop good looking, easy to use applications on top of a client that was never very attractive or user-friendly. That has changed greatly, my friends, and it's time to capitalize on this fact. One thing I've observed over time is that in many IT environments, if the users start clamoring about something enough, they usually get their way. I suggest using this to your advantage within your company if you're traditionally kind of slow on doing upgrades. Start rallying the ground troops by exposing them to the new features of Notes 8 as much as possible. One great way to start is to point them at this new video on YouTube.



Other things you might try: Leave fliers showing the new interface and features lying around in conference rooms, organize "lunch and learn" sessions to show off the new look, share blogs like Alan's Lotus Notes Hints, Tips & Tricks.

The more you can get users excited about the new functionality available in Notes 8, the more they will want to upgrade. I've been talking to customers and a lot are really looking forward to getting the new version of Lotus Notes! That's pretty exciting in my book, and I hope you find it so as well. So kick off your viral upgrade campaign...and best of luck to you!

Thursday, November 01, 2007

Eeekkk...What A Wretched UI!!!

Hello, my friends! Long time, no see. That's because my new employer has me signed up for so many training courses, I can barely come up for air! :-D One thing I can unequivocally guarantee...if you work for IBM, you will never be bored...haha!

Anyway, my next couple of posts will be asking for your help. I really think (and hope) that you will be able to come through on this one. Here's the deal. I am working on a new project and am looking to gather examples of really bad user interface designs. Now, bad color choices and related types of problems are pretty prevalent in Notes applications (and I certainly welcome those), but what I'm really hoping to find are those things that go beyond the surface. Do you have an application that is just incredibly hard to use for one reason or another? Is there a particular interface element used in a way that completely goes against its intended purpose? Basically, if the UI is poor in any way, I'm interested in seeing it. The worse it is, the better for me! :-)

Here are the ground rules:

1. All information you send me will be kept completely confidential. I'll credit you as contributing to the project if you'd like, but things will be modified so that the original design won't necessarily be identifiable when I show it.

2. Make sure you delete any company data from the application. Send me a clean database copy and populate it with some fake data if you can (just enough so we can see the problem).

3. If you want, go ahead and clean out any identifying company logos, names, etc.. If you don't want to do this, that's fine...I'll make sure I do it in Photoshop when I create my screenshots.

4. Send all submissions to chris@interfacematters.com. Please use the subject "Bad UI Design Submission".

Basically, this project will be something that can be shared with the community and will be for educational purposes. The intent is not to point out bad developers or anything of the kind. I'm sure *ALL* of us can find some applications that we'd rather hide in the closet than let anyone see today. However, I think they'll be some great benefits that come out of this, so I really welcome and respectfully request your submissions. That's all I can say about it for now, but I think it will be fun.

If you have any questions about this, please let me know, either in the comments here or via e-mail. Thanks in advance for your help!!! :-)

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.

Tuesday, October 16, 2007

Bruce Has This Thing...

You may have heard about it by now! :-D




Traveling again...no time to blog...but just wanted to say congrats to Bruce and his team for a job WELL DONE!!!

Thursday, October 04, 2007

IBM WebSphere Portal Technical Conference - Orlando



Hi all...I'll be attending the IBM WebSphere Portal Technical Conference next week in Orlando, Fl. If you are going, please try to find me and say hello.

Should be a lot of great information to soak up! I wonder if there will be any UI sessions? ;-)

Thursday, September 27, 2007

"Getting" Design

Hi All. Sorry for the long absence. I'm an official IBMer now and I've been heads down learning the ropes. It's been intense to say the least and it's only been a few days! :-)

Today, I wanted to head back up to the 30,000 foot level and discuss a little about Design (yes...a capital D...because it's so important) and how it is a subject you can learn about from many different sources.

It's a pretty well-known fact that we ("we" in this case meaning humans) enjoy beautiful things. We admire the "beautiful people", we seek out beauty in museums, at the symphony and in the library. This search for beauty applies to all aspects of our lives, including our work. People enjoy tasks more when they get to work with beautiful things. An elegant new pen may provide you with inspiration to sit down and write in your journal. The Michael Graves designed toilet bowl brush just might make that cleaning job a bit more bearable. In the same way, that well-designed accounting application that you built has the potential to turn a mundane monthly reporting project into a job that the accountants don't dread so much anymore.

If we take it for a given that people like beautiful things, then how can we logically extend this fact to make our applications better? One of the interesting things that interface designers have figured out is that a user's perception of the quality of an application is proportional to its adherence to good design principals. That is, things seem to "work better" when they are well designed. This has profound implications in our work and I think this emphasizes why design of the visual aspects of our applications should not be an afterthought.

I have found in the past that computer people tend to be less concerned with how something looks that the general population (yes...I am using a blatant stereotype here ;-) In reality, we should strive to become well-versed in the hows and whys of good design because we're actually building stuff people have to use. Apple is a company that has embraced this idea. They certainly did not invent the mp3 player, but many people think they did. They set the standard in the category by building a beautifully designed device with an interface that is just a pleasure to use.

Beauty in an application does not necessarily have to be skin deep either. Just having a pretty interface won't help if the users have a hard time actually *using* the program. Thus, in my mind, beauty in application design is comprised of an attractive interface as well as a simple and intuitive user experience. Gmail comes to mind as a perfect example of this. It's not necessarily a work of art in visual terms (although I like the clean design), but the user experience is so well thought out that I can't think of going back to another e-mail program for my personal accounts.

All of the above is just a long, roundabout way of suggesting that if you are not already concerned with the aesthetics of design in your applications, you should start planning to head down this path. I've said it several times before, but it bears repeating. These ideas become even more important as you move your company to Notes 8 (why are you waiting? It's real and it's spectacular!) This is a beautiful environment (I *love* saying that about a Lotus product), but your old way of building apps will still make them look like old apps unless you start formulating a way to build a truly modern design.

So, if you've never fancied yourself a designer, how can you start down that path? One thing I recommend is looking for ideas all over the place. Subscribe to a magazine about interior design or fashion. Watch design shows on HGTV (guys...your wife will love this). Observe the form and function of things you work with everyday, such as your microwave, vacuum cleaner and TV. Note what features you enjoy using and those that annoy you. If you are so inclined, get a nice hard-bound notebook and keep a design journal, adding notes about your user experience with different products, clippings of things you like from magazines, etc. Just the act of doing these exercises will start to enhance your knowledge of good design and will train your eye on what to look for. Then, armed with this newfound information, you can start enhancing the design of your own applications. Even small, incremental design improvements will make a big difference to your users. I've received many testimonials from other developers that speak to this fact. A focus on beauty in your applications is a direct reflection of your caring for the user and remember, that's why we're all here. Now go on and get out there...Help make the world a more beautiful place. (And start using Notes 8, will ya? ;-)

Tuesday, September 04, 2007

Happy, Happy...Joy Joy

Things have been a bit quiet here lately, and even though I've been *thinking* about some cool new things, I haven't actually been able to *execute* said cool things because real life has a way of playing havoc with the best laid plans. Sorry about that.

I've basically been in support mode at work the last two months. Some massive changes in the company has meant a lot of support to end users, fixing broken apps, etc. Unfortunately, that means no new development, so no new "direct from production" tips to share. I am happy to say that there were no critical, impact-to-the-business kind of issues, so we weathered the storm pretty well. I'm also really happy because I'm starting a new phase in my career.

Even though I was strongly tempted by some evildoers, I just couldn't go to the Dark Side and in fact strengthened my resolve to fight for Good. Yep...I got a new job!!!

Starting on the 17th, I will officially be a Senior IT Specialist at IBM!!! I couldn't think of a better place to continue in the ways of the Lotus evangelist and now I've kind of "put my money where my mouth is". I'm joining the Lotus Technical Sales team here in the Cleveland/Pittsburgh area. In that role, I'll be doing pre-sales work, lots of presentations, proof-of-concept projects, etc. It's a bit of a different path than the one I've been on, but it should be an excellent opportunity for growth. My favorite part of the job has always been interacting with customers, so I can't wait to get started!

I still plan on focusing on the same things I always have on this blog, so don't tune out yet. I love the field of user experience and user centered design because it is ever changing and there is always new stuff to learn. Taking this knowledge and making incremental changes for the better is a great feeling and I hope that so far I've been able to provide you with some good starting points or at least piqued your curiosity to explore what you can do with your Notes UI. Stayed tuned, 'cause there's a lot more to come.

Woot!...I'm going to IBM! Yep...I'm excited... :-)

Wednesday, August 22, 2007

Ultimate Cool Man Bag

After a long search, I finally found a man bag/murse/gadget bag that fit my criteria for a perfect portable utility carrying device. Since a couple of my friends asked, and the general voyeuristic masses on the internet love to see this stuff (and I include myself in that category), I thought I'd share my find.

My general criteria was:

Requirement 1: Manly looking...shouldn't look like a purse! :-)

Requirement 2: Not as big as a messenger bag...not as small as a pouch. Must be able to hold a wallet, Blackberry, Grail diary, small Moleskine notebook, pen, bullwhip, Sony Cybershot digital camera, Dell DJ.

Requirement 3: Over the shoulder only. I'm not secure enough to carry a clutch!

Final Decision: A WWII Mark VII Gas Mask Bag! Just so happens that this is the bag that Indiana Jones had in the movies (although in reality it wasn't yet invented in that time period). If Indiana Jones used it, then it's good enough for me!!!



Unfortunately, finding the real deal at a good price is hard, at least here in the States. I checked out some military surplus stores, but to no avail. I found some on eBay, but they were pretty tattered and dirty. Well, proving once again that you can get anything on the internet, even if it's just a replica, I found a guy in Singapore who creates these new. Doesn't have quite the cachet of the real thing, but it gets the job done.

Manly and functional! :-D

Also cool that I ended up paying around $30 total rather than the $150 I was going to spend on the runner up. I'll include some pictures in a future post. Now if I could just get my autistic daughter to stop telling everyone that "my dad bought a purse!" :-)

UI Best Practice: If They Can't Do It, Don't Show It

Following up on my post regarding UI best practices, here's one of my favorites:

If you have a certain action, section, field, etc., that should only be accessible to a certain user/role, then please, please, please do not show that construct to someone that doesn't have the rights to do something with it.

I cringe every time I encounter a database with an "Edit" action button always visible when I know full well that there is security enabled and most users will click this button only to get an error message. It's really very simple...Spend the extra few seconds/minutes it takes you as a developer to write a hide-when formula to make sure that only people that can really edit the document see the button.

Remember: If they can't do it, don't show it!

Tuesday, August 21, 2007

Use Editable Columns To Trigger Actions

Did you ever want to include a little icon or picture directly next to a document in a view that you could click on to initiate an action? You see this on the web all the time, especially in the "Web 2.0" world. This tip will show you how to accomplish this within the Lotus Notes client. I think it's a pretty cool little trick and I hope you will as well.

Here's the scenario. Remember the Super Burrito Configurator? Well, one part of this (over the top) demo is the ability to construct your meal by dragging the ingredients to the burrito image. This generates a list, which is just a folder that you are adding new documents to. Since I'm using an embedded folder, I didn't want to pollute it with action bars, selection margins or other view riffraff. What we are looking for here is a nice, clean and obvious solution. Notes views don't provide many affordances. Unless you are trained in the software, you don't know that you can select a document, go up to the Actions menu and select Folder - Remove From Folder. Even if you know how to do it, who wants to??!!! It's too cumbersome. So, what I ended up with is something that looks like this:



Notice the icon with the word 'Delete' directly next to each burrito filing? Clicking on the icon does exactly what you would expect...deletes the ingredient from your burrito. In Notes terminology, it just removes the document from the folder. Pretty cool, eh?

The secret here is to take advantage of the view's InViewEdit event. When you click on an editable column, the code in this event will run. Since I'm just removing the doc from the folder, it's very simple LotusScript: I don't have to mess with the various cases that you typically encounter with InViewEdit and I don't have to worry about doing any kind of validation. All that matters is that when the user clicks the column, the code runs. Here it is:



Sub Inviewedit(Source As Notesuiview, Requesttype As Integer, Colprogname As Variant, Columnvalue As Variant, Continue As Variant)

Dim doc As NotesDocument
Dim caret As String

REM Get the CaretNoteID - exit if it does not point at a document
caret = Source.CaretNoteID
If caret = "0" Then Exit Sub

REM Get the current database and document
Set db = Source.View.Parent
Set doc = db.GetDocumentByID(caret)

REM OK...we can ditch it
Call doc.RemoveFromFolder(Source.View.Name)


End Sub


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



To configure this for your own use, just follow these steps:

1. Add the above code to the InViewEdit of your folder

2. Select the column you want to use for the action and set it's properties for "Display values as icons" and "Editable column"to true



3. Set the value of the column to the icon you want to use (either the number or the name of an image resource)

4. Bask in the glory as your users tell you how awesome you are! :-)


That's all there is to it. This is another seemingly trivial but very high value technique. It allows you to simplify the UI greatly and follows the rule "don't make me think!" to the letter. Of course, you're not limited to just removing the document from a folder. Basically you can code anything you'd like in the InViewEdit. How about marking the document as a favorite? Adding the author to your address book? There are probably a lot of cool uses for this idea. Now it's up to you to try it and figure out where it might work for you. If you use this technique in an innovative way, please let me know so I can share with everyone.

Cheers!

Monday, August 20, 2007

Cleveland Get Together For Ed Brill

My friends at Berbee put together a very nice reception this evening at Shula's in honor of Ed's visit to Cleveland. Noticeably absent from the event was Ed Brill, but we still had a great time! :-)

OK...so Ed was stuck in an airport, but we were getting frequent updates thanks to his colleague Sara Koeth. In the end, it was unfortunate that he couldn't make it. Since Ed was noticeably absent, also noticeably absent was talk of Notes 8, Quickr, Connections or all the other good stuff. Instead, topics of conversation included (but were certainly not limited to):

-High School Musical 2
-5 Card vs 6 Card Euchre (yikes...it got vicious! ;-)
-Spoiled kids
-Dream Theater
-Strip Go Fish (and why no one ever wants to play with me)
-An as yet unheard of musical which will be BIG BIG BIG! :-D

The Cleveland Blogging Contingent was out in force. Bloggers in attendance included Gregg Eldred, Ben Langhinrichs, Phil Randolph, Rory Wohl and yours truly.

It was great company and great conversation all the way around. Say what you will about Cleveland (although it really is a beautiful place), but we've got some of the nicest people you'll ever meet!

Thanks again to the folks at Berbee for inviting us. Have a safe trip back home, Ed...Maybe we'll see ya next time.

See...Usability Applies To Everything!!!

Even the Office 2007 box has a learning curve (Joel on Software)

There are so many packaged products that have this problem, but it's pretty sad when it's a company that obviously has a usability staff! :-)

If you start out frustrated even opening the box, the user experience is already tarnished. Try to remember this fact, as it is true for what we do as well. In our case, it might be the initial way your customer contacts you, the first meeting you have with them, your website, etc. First impressions mean a lot...make yours the best you can!

Friday, August 17, 2007

Friday Link-O-Rama


The Microsoft Exchange Team Gets Hip (Gee...did you know that the Exchange team originally developed AJAX...*rolls eyes*)

The lovely and talented Francie Whitlock directed me to this great read on "Creating User Friendly 404 Pages". Reminds me of way back in '99 when I created a "De-Nile" page with a picture of the river itself. ;-)

Andrei Herasimchuk discusses the trials of interface designers being limited by the constraints of technology.

Tommy Valand has a Notes-related blog with a lot of great info out there. He pointed out this interesting FieldListener class which details a way to do in LotusScript what I blogged about using JavaScript...Pressing enter in a field and triggering an action.

Hmmm...Telecommute. Kill a career? Given my current situation (all my colleagues and customers are nowhere near me), this might not be such a good thing!

Finally...a must read book if you are interested in design-->Understanding Comics: The Invisible Art, by Scott McCloud. Even if you are not a fan of comic books (Geek alert...I am!), there are some powerful concepts in here which I think can be leveraged by designers. Bonus points: It's a book about comic books written and drawn as a comic book...Sweet!

Have a great weekend everyone. And for all those dads watching High School Musical 2 tonight...my condolences! ;-D

Friday Night Fun



*Sigh* Sometimes, it's hard being a cool dad!!! :-)

Wednesday, August 15, 2007

Hive Mind: What's Your Favorite User Experience Tip?

Hello Friends! I thought it would be fun to try a little experiment here and develop a group writing project that would allow us to define best practices around the user experience using the Lotus Notes client. While I don't believe in absolutes, there are many ideas which will almost universally improve the user experience. Let's see if we can document some of those.

Here's what I propose. Like all the things I work on, this is pretty simple! ;-)

1. Pick one (and only one) idea or technique that you'd like to represent as a user experience best practice. What we are looking for here is to focus on the Notes client, as there's tons of stuff out there regarding UX best practices for the web. (Many of those are applicable in any software environment, actually, so it's good to be aware of them).

2. Share this idea via your blog, leave a comment here, or send me an e-mail. I'll create a special area (perhaps a wiki?) where this information can be consolidated after people have had a chance to comment on the various concepts.

This will be a community controlled effort to get the initial entries together, so if your entry generates a lot of "boo hiss", we'll choose to leave it out. If we get enough people to participate, we'll end up with a nice little resource that the entire community can use.

I believe a focus on the user experience from the standpoint of the everyday Notes developer is even more important now than ever before due to the efforts that IBM is putting into this area. The last thing we want to do is expose our ugly old apps in the beautiful new Notes 8 shell. It will be like "putting lipstick on a pig"!!! Perhaps this group resource will be a place where developers can go to draw inspiration for their next project.

Along with the "Best Practices Guide for the User Experience", I was thinking of creating a "Lotus Notes Interface Gallery". Think of this as a place to show off your best work, again with the goal of providing inspiration (and perhaps some bragging rights) to other developers who might not be comfortable in anything other than the 3-pane UI model. For all its warts, there are some excellent examples of Notes UIs out there, and I think it would be cool to get them all together in one place. What do you think? A dedicated sub site here or something more generic, such as Flickr? Let me know your thoughts and feel free to send me submissions.

Well...This is a community all about collaboration and it's what we do best. So, please, if you are interested, consider playing along. This could be fun AND educational! Cheers...

Tuesday, August 07, 2007

Using an Embedded View as a Picklist

[Hi Everybody...Chris here. I'm very happy to be able to present to you the first guest post on Interface Matters. I thought this was a cool technique and since it was demonstrated to me using the Kwik-E-Mart database, how could I refuse! ;-) So, please welcome Keil Wilson with a great post on using an embedded view as a picklist. Take it away, Keil...]

The problem…
I’ve built dozens of applications that included Picklists (either @Picklist or NotesUIWorkspace.Picklist) to allow the users to select one or more documents from a list of documents. Generally, this Picklist is called from a button on a form that tests if the user pressed ‘OK’ or ‘Cancel’ and then performs some action using the selected document(s). The Picklist function in Notes is very cool for a number of reasons, but one of the biggest is that it just uses a Notes View to display a list of documents from which the user can pick. This gives you all of the formatting controls available to Notes Views and can help provide a consistent user experience so that the list of documents displayed in the Picklist looks just like the lists of documents displayed in your Notes Views. You can include the view icons or graphics, categories, and you can filter that list of documents displayed using view categories.

What if your users want to select documents from one of two or three different categories, though? What if, for instance, the users want the Picklist to show all accounts sometimes, current accounts sometimes, and past accounts sometimes? You have three different buttons on your form, right? If the user presses the wrong button, then they have to push Cancel to close that Picklist and then click the correct button. What if you could just have one Picklist that can display all three categories depending on which radio button or combo box selection the user chooses? We all work with similar dialogs on a regular basis, like the “Choose address book” combo box on the Select Addresses dialog in the mail file or the “Server” selection combo box in the open database dialog.

This was my challenge recently, and while the solution I developed wasn’t without compromise, I think it gets pretty close to a Picklist with multiple options for the documents displayed in the list.

About this example…
This review will use Chris’ Kwik-E-Mart Squishee Order System as an example (get the database now). The challenge here was to add an action on to the “Kwik-E-Mart Squishee Order Form” form that would allow the user to copy an existing Squishee order item. To do this, the user would select the existing item from a Picklist like control that could be filtered to show only those Squishee order items on the current order form, or show all Squishee order items in the whole system.

  

Check out the video demo of this in action...

The above dialog box is triggered from a simple action hotspot on the “Kwik-E-Mart Squishee Order Form.” There are six design elements involved in the technique I used here. There are two embedded views (Current Customers & All Customers), two shared actions (OK & Cancel), the “Copy an Order” dialog box (on which the two views are embedded in a programmable table), and the modified “Kwik-E-Mart Squishee Order Form” originally created by Chris (the only change was the addition of the “Copy Order” action hotspot). The key concepts here are: 1) a dialog box with a two row programmable table that displays each embedded view based on a radio button selection, 2) the use of the action button bar on the embedded views to create/display the “OK” and “Cancel” buttons, and 3) storing of the selected document’s NoteID in the Notes.ini file for later use after the dialog box has gone out of scope. All of these are simple concepts (often discussed before by Chris and other developers), but they come together to make a flexible and functional solution.

So let’s start with the views…
In the Kwik-E-Mart Squishee Order System, there was an existing view that did almost exactly what I wanted. So I did what any good coder does…I copied it, modified it slightly, and am now taking credit for its form and function. In fact, I did that twice. So the embedded view on Chris’ “Kwik-E-Mart Squishee Order From” has been adapted to work in the “Copy an Order” dialog box. It is important to note here, that because I’m working with essentially the same view that Chris had already taken the time to create, test, and format beautifully, not only did that lighten my work load, but it also provides a pretty consistent look and feel on my new dialog when compared to the existing system. Once I had modified the views’ selection formulas and columns to meet my needs, I cleared all of the action buttons from the view. Now all I needed were my two new action buttons.

Actions are the key…
The view action buttons are the key to this whole solution, as well as the weakest point. In order to determine which document(s) were selected in the embedded view, I needed a way to trigger some event within the embedded view. I tried several different things, like Queryclose (which doesn’t fire in an embedded view), but nothing worked. Finally, after some research on the developerWorks forums (and reading posts like this one from Jamie Grant), I decided to try replacing the dialog box form’s “OK” and “Cancel” buttons with view action buttons. Notes gives developers a lot of control of the look of view action buttons, but their placement above the view is pretty much locked down. It is this unorthodox placement for the “OK” and “Cancel” buttons that gave me the biggest pause about this approach.

Because both embedded views display the same type of documents and I wanted to do the same thing with the selected document regardless of which view was displayed, I was able to create two shared actions (one for “OK” and one for “Cancel”) that would go on both views. I had to do a lot of tweaking on the format of the view action bar for each view. If you’ve never tweaked the action bar properties (accessing these properties is less than intuitive), you can right-click in the Action Pane in Domino Designer and select “Action Bar Properties…”, or you can click anywhere in the Action Pane and select “Action Bar” in the properties box list. Use the Notes help and take some time exploring all the action bar properties options and what they do. I’ll explain what the buttons do, but you can download the sample database to see the code.

The code behind these action buttons is very simple. The OK button does four things:
1. Get a handle to the parent form/document currently open in the UI (our dialog box).
2. Get a handle to the document that is currently selected in the embedded view.
3. Copy the NoteID of the selected document to an environment variable in the Notes.ini.
4. Close the dialog box using the UI handle we got earlier.

The “Cancel” button does three things:
1. Get a handle to the parent form/document currently open in the UI (our dialog box).
2. Clear any value in the Notes.ini variable (this indicates the user pressed “Cancel”).
3. Close the dialog box using the UI handle we got earlier.

Using the environment…

Back on the “Kwik-E-Mart Squishee Order From” our “Copy An Order” button has called our dialog box and is waiting for the user to select their Squishee order item to copy. Then the user presses “OK” (or “Cancel”), the dialog box closes and control comes back to the “Copy An Order” code. This code does the following three things (again, download the database to see actual code):
1. Test the return from the dialog box to see if the user selected something. This is done by checking if the environment variable we set earlier has a valid NoteID in it. If there’s nothing but an empty string (“”), then the user pressed “Cancel.” If there’s anything but an empty string or a valid NoteID in that variable, then we’ve got an error.
2. Assuming the user has pressed “OK”, we then create a new copy of the selected document and associate it with the current “Kwik-E-Mart Squishee Order Form.”
3. Finally, we refresh the embedded view and the current UI document. This causes the new document to be displayed in the embedded view.

And Then?!
So how could I have done this better? I was a bit uncomfortable about writing/reading stuff in the Notes.ini file (maybe that’s just a hold over from my R4 past), but everything seems to be pretty stable. The other major concern I had was about the location of the “OK” and “Cancel” buttons. Does anyone find the non-standard layout of the buttons unappealing or problematic? I tested this with the users and no one commented on it at all. Is it possible that button location is a bigger deal to me than it is to my users? I’m interested to hear how others could (or already have) improved on this approach. Thanks for reading.


About The Author: I've been a Notes/Domino developer and consultant in Nebraska for about 10 years. I've spent the last several years working on a Notes Client focused development project for a government agency in Nebraska. The scope of this project requires innovative solutions to typical Notes Client limitations (one of the reasons I love Interface Matters). In my past lives I spent time at several small companies managing networks, manning help desks, implementing Crystal Reports/Crystal Enterprise solutions, developing and administering training, and writing code in Notes, VB6, SQL, Java, and C#.


Taking Notes - Episode 64: Viral Edition

The new Taking Notes podcast is available! Check out another episode chock full o' goodness.

Once again, I'm honored to have a segment on the podcast. This time, I look at the five facets of usability as put forth by Jakob Nielsen:

1. Learnability
2. Memorability
3. Efficiency
4. Reliability
5. User Satisfaction

Thanks for listening!

Monday, August 06, 2007

Ed Gave Lotus Notes To You

Gave Lotus Notes To You
Gave Lotus Notes To Everyone...

Not content to just get down with Notes 8, Ed pulls out his spandex and rocks all night and parties everyday...especially today!


Happy Birthday Ed!!!

Friday, August 03, 2007

Wednesday, August 01, 2007

Deconstructing The User Experience: A Website Download

A few days back, I found a good example of what NOT to do when providing a download on your website. Unfortunately, this was on an IBM site, but then again, I don't think that will really come as a shock to anyone here. Too much of the IBM web presence seems like it was designed by engineers. Of course, much of their target audience are tech heads, but that's still not an excuse for a poor user experience.

In this particular instance, I was going to get the Lotus Connections Reviewer's Guide (which I'm really glad they made available). Below you can see the actual download page. My annotations are on the screen shot. To be clear, this isn't a criticism of the Reviewer's Guide...just the mechanism used to distribute it (which I'm sure the Connections team has no control over).



Just by looking at it, you may not see all the problems you might actually experience, so if you'd like, head on over to the download page and check it out. Here were my immediate thoughts when I got there.

1. First, I believe most users would figure that a link called "Get the download" would actually do just that. Instead, it's actually an anchor link which jumps down to the true download area. This has a jarring effect that leaves many users confused about what just happened, especially if they were anticipating something entirely different (e.g. the dialog to ask them where to save the file).

2. While the table is potentially useful, I imagine that the general user doesn't really care about the filename at this point and they may or may not really care about the file size. On other IBM pages, this table sometimes has multiple options, giving the user the choice of a PDF, Powerpoint file, Word doc, etc. What really irks me about this setup, however, is the "Download method". Here we see we only have one option: HTTP. You might also have the choice of FTP, but the real question is this: How many users actually know what this means? The term is meaningless to most people and even if they know what it means, there's nothing here that indicates that there is an action to be taken. Having only one option here is advantageous actually. Can you imagine the average user seeing two links, one for HTTP and one for FTP. My guess is that this would generate a call or have a high abandonment rate since users would be unsure of what to do. If you confuse your users or make them think too hard, you've failed the user experience test.

So...let's have a little fun with this shall we? We'll do a redesign, but we'll keep it very simple. Assume that we can't really modify the layout of the page other than the links. If I could make that one simple change, I would probably start with something like this:



A subtle change, but one that improves the user experience quite a bit. First, we give the user a chance to get in and get out by providing a download button as one of the first things they see after the title. If the user chooses to stick around a little more, they can still use this button after they've read the first couple paragraphs on the page. The button is repeated in the "Download" table as well. Notice I eliminated the choice of download method. I really see no use for giving the user an option here. The actual text for the buttons is debatable but what is important is that the text implies an action. There's no ambiguity here. That is, the button and text combined make it obvious that this is the way you get the item in question.

At this point, if I was designing the site, I'd open it up to usability testing. So, let's do that. Please leave your thoughts in the comments. If you want to be a little more ambitious and redesign it even more (don't forget all the politics usually involved in something like that! ;-), then feel free to send me a screenshot or post a link in your comment. Cheers!

Sunday, July 22, 2007

Congratulations To ILLEGALLY LOUD...

...on the completion of this Rock School session and a great concert to round it out! Great job you guys!!!

Friday, July 20, 2007

Branding The Action Bar

When you are designing a Lotus Notes client application and are using action bars with your forms and views, you should take care to format the action bar so that it becomes a harmonious part of your design. That is, make sure you use colors and borders that complement the layout of your UI rather than compete with it. If you normally just leave the default settings (especially "System" gray), then I'm definitely talking to you. ;-)

Nathan and I have talked a lot about color palettes, complementary colors and stuff like that in the past, so I'm not going to say anymore about that here. However, I did want to present an idea that might be interesting to you in certain cases.

Sometimes, it is desirable to create a certain "brand" for an application. Perhaps it is a CRM suite or some other application that you want to make a little unique. One way you can accomplish this in a fairly easy and unobtrusive way is to use the real estate of the action bar to display a logo, picture, etc. Here's an example...




A Close Up

Now that's just a quick example I threw together to demonstrate the idea. Normally, I'd use a more subtle color and graphic. Here's an shot from a real application, in this case my modified document library template.




Another Close Up


Adding this image to the action bar is very easy. Probably most of you know that in the Action Bar properties, you can specify an image resource that will be used for the background of the action bar. If you want to align the image along the right edge as I have done here, there are a few requirements:

1. Make sure that the graphics that you place within the image are in the last 1/3 of the total image width.

2. Select "Center Based Tiling" as the Repeat option.

3. Adjust the height of your action bar as necessary.



OK...that first requirement is strange, but it works.



As soon as you overlap 33% of the width, it leads to undesirable behavior like that shown below.



If you want the color of the action bar to show through, make it a transparent graphic. Here's the same example as before, with a transparent image and the background color of the action bar set to a light purple (yeah it's ugly ;-).



If the image is the correct size, then you can re-size the Notes client window and the image will stay right aligned as you do so. It might take a little playing around with at first, but if you follow the three rules above, this can be a neat little trick to add to your client UI design bag.

Have Fun!

P.S. For more action bar fun, check out Kevin Pettitt's much cooler post about Two-Row View Action Bars


Wednesday, July 18, 2007

And Then There Were Two...

And then I was broke... ;-)

Top 5 - Side 1 Track 1 - My Personal List

Off topic but fun...

Being a huge music fan, I have to profess my enjoyment of High Fidelity, not so much for all of the relationship stuff, but for the music store scenes and discussion of music in general, especially any scene with Jack Black in it! ;-) Well, Nathan was watching this movie the other day and started a new meme based on the movie, your top 5 side 1 track 1 tunes of all time. John Head tagged me, so here's my list:

6:00 -- Dream Theater's Awake (Amazing drum acrobatics from Mike Portnoy kick off this album in a dramatic way. One of my favorite DT tracks.)

Hungry Freaks, Daddy -- The Mothers of Invention's Freak Out (Frank Zappa's debut to the world...couldn't leave this out, since it represents the beginnings of an incredible musical legacy. I'd like to imagine that had I been alive at this time, I would be picking this up on vinyl from the record store and running home to throw it on the turntable! ;-)

Used -- Pain of Salvation's The Perfect Element, Part I (This is such an emotionally draining release. A concept album about two people (Him and Her) that have been abused in life, physically and sexually and their experiences as their lives become intertwined. It explores the various facets of a person who is deeply damaged. The opening tune is so visceral, it pulls you in and won't let you go.)

Aces High -- Iron Maiden's Powerslave (Love the subject matter...about the Battle of Britain during the summer of 1940...and the bombastic Iron Maiden sound here.)

Of Sin & Shadows -- Symphony X's The Divine Wings of Tragedy (My introduction to the band...never been the same since.)

How about yours?

OK...Bar Charts In Views...Last Time (I Promise)

Wow...little did I know that posting such an innocent little tip about bar charts in views would spark all the great collaboration between everyone in the community. I made a faux paux in my original post by referring to my technique as Gantt charts while in fact they are really just bar charts. Luckily, this inspired Nathan to both correct me, and better yet, got him to go off and create a real implementation of Gantt charts in Notes views. Ulrich Krause made some of his own modifications to Nathan's work as well. Quite a community effort!

In case you missed it, this isn't just proof of concept, as Warren commented that they are actually using Gantt charts in his company's own internal pipeline database. Very cool! Thanks to everyone for your comments and contributions.

I don't have anything new to add to the discussion myself, but I did want to highlight one other technique that was brought to my attention. Noel Tigcal sent me a sample database that used a neat variation of the idea. Instead of using image resources for the bars, Noel uses the "█" symbol with @Repeat. This allows you to easily change the styling of the bar by modifying the text properties of the column. In the example database, Noel uses Arial Black as the font type.



Quite a smart idea and probably one of the easiest to implement, as you don't have to mess with graphics at all. Nice job, Noel...thanks for sharing!

With that, I'll leave this topic to rest. I'm not 100% convinced that true Gantt charts in Notes views are such a good idea (might be better relegated to a traditional project management tool or to a composite application), but still I hope you see that the underlying technique could have many possible uses.

Oh...by the way...in case you wondered how all this started, you can thanks Mr. Elgort for asking the question. :-)

Wednesday, July 11, 2007

Bar Charts In Views Revisited

I find it interesting that the simple posts around here generate the most interest from the community. This just goes to show that people are continually trying to find those subtle ways to improve the UI of their Lotus Notes client based applications. Either that or we're all lazy! :-D

Since I posted my little tip about Bar Charts in views using color columns, several folks have added some great comments and even shown their own implementations. Rather than rehash their content here, I'll just point you their way. Please check them out since there are some really super ideas that you can use in place of (or to enhance) my contribution.

First up is Theo Heselmans' implementation using image resources. He made some very attractive graphics to highlight his technique. If you don't mind firing up the graphics program and want to perhaps add a little bling to your application, then this is an excellent approach.

Vitor Pereira then picked up the torch and added his take on Theo's technique. This one blew me away because I learned something new. Turns out you can have more than one image in a single column in a view by specifying the column value as a list of image resources. How cool is that!

(P.S. This works with a list of column icon numbers as well. 1:2:3:4:5 will thus yield )

To round it all out, Mr. Kevin Pettitt provides us with a very nice summary of the whole affair.

Neither my technique nor the others mentioned here provide a 100% fool-proof solution for the perfectionist, but they all can greatly enhance the visual appearance of your views where some kind of progress indicator is needed. Try them out and see which one you like the best.

Thanks to Theo, Vitor and Kevin for the posts! Cheers, guys...

Update: Christian Petters shares his thoughts as well.

Update 2: Doh! Nathan smacked me upside the head in the comments and rightly noted that these aren't really Gantt charts but simple bar charts. Gantt charts are used in project planning and help you spatially see relationships and dependencies among tasks (yuck...my project manager training is flashing before my eyes). Thus, I have updated the title of this post. Thanks, Nathan...may I have another! :-D


Monday, July 09, 2007

Using Color Columns To Make A Gantt Chart

I love simple solutions. For me, application development is about solving a problem as efficiently and elegantly as possible. Some people like to write code just to write code, but I prefer getting my job done so that my users can do theirs. Today, I wanted to share a quick and simple solution that also looks cool and is very easy to implement.

You've seen several of my applications that make use of color columns. I even blogged about them awhile back. You've all probably also seen an application somewhere along the line that included a view with a "gantt chart". There are a million different ways to go about building this functionality into a view, but I like the solution of using color columns due to their simplicity. Here's an example:



The trick I used here was to create 10 color columns whose values are checked (in increments of 10) against the value on the document that shows percent complete. Here's the formula for the first color column:

@If(PercentComplete >= 10;
224:255:223:224:255:223;
255:255:255:255:255:255)

and the second:

@If(PercentComplete >= 20;
224:255:223:224:255:223;
255:255:255:255:255:255)

and so on, incrementing the check by 10 each time. Of course, if you wanted to get more granular, you could create columns in increments of 5 or even 1 (if you are a real glutton for punishment!).



As you can see, if the value of the field is greater than the column being checked, it is colored. The background and text are set to the same color values. If PercentComplete is less than the column we are checking against, the color column resets the background text and color to white.*

If you want to show the actual percentage value in the middle of the chart (as in the picture above), then make column #5 hidden and set column #6 to display the value. In order to make the text of column #6 visible, the preceding column formula is slightly different, setting the text color to black (or whatever color complements your graphic scheme).

@If(PercentComplete >= 50;
224:255:223:0:0:0;
255:255:255:0:0:0)




That's all there is to it really. Just don't forget to check the "Use value as color" property on your color columns.

Do you have a variation on this or other clever uses for color columns in your apps? If so, please feel free to share with the class. Cheers!

*Notice that this looks less than perfect if you are using alternating row colors. Extra Bonus Points to the person that can figure out how to set the color column to "transparent". If you are using subtle colors for your alternating rows (you should be), then it doesn't look horrible, but it would sure be nice if we could have a little more granular control over this.


Tuesday, June 26, 2007

Our New Addition...

No...not the kid...the other one. Oh boy, does Walmart have any openings for the night shift? I see my paycheck flashing before my eyes!


A Horse Named Sandy

Monday, June 25, 2007

Speaking of Mind Maps...

After I posted my Notes URL mind map last week, Tim Tripcony did some "tinkering" for a few minutes (man...the brain power of some of you people really scares me! :-) and he came up with some LotusScript that allowed him to generate a mind map of his mail file. Sweet!



Nice work, Tim...

Sunday, June 24, 2007

"Low-Fidelity" Prototyping With Electronic Tools

Do you like the idea of low-fidelity prototyping, but don't relish the idea of dealing with all that paper? It's certainly possible to get the great benefits of the low-fidelity prototype without all those annoying paper cuts by using some creative electronic tools.

One of the ways I sometimes "cheat" in this area is by taking advantage of my Tablet PC. I use Microsoft OneNote as my "blank pad" and create my low-fidelity prototype directly on the screen with my tablet pen. Although I really enjoy working with pencil and paper (and crayons, markers, etc.), I find the tablet solution to be a good one when I'm pressed for time. If I want to make changes, I can simply erase an area of the screen or create a copy of the current page and make the modifications on the new version. Taking advantage of OneNote allows me to group related prototype pages by project, perform searches on keywords, backup my work easily, etc.


Using OneNote on the tablet is also a great help to me when I'm further along in the design process. I can use the program to perform a quick screen capture, then use digital ink to annotate the changes needed directly on a picture of the screen in question. This aids me greatly in remembering what we were doing if I go back to find some details in the future.


Another promising tool for quick "low-fidelity" prototyping is the DENIM project. DENIM allows you to create actual working prototypes that maintain the spirit of quick, iterative low-fidelity methods. With this tool, you draw your prototype as you normally would. The cool part is that the system is very smart and can identify common design patters, such as text boxes, labels, radio buttons, etc.


Check out the videos on the project site to see it in action. I think you'll agree it has some merit. I have to admit that I haven't tried DENIM yet, but it's certainly on my to do list. If you check it out, let me know what you think.

I'm sure there are other creative developers out there that use electronic tools to perform quick and dirty prototyping. If you've got some ideas you'd like to share, please post them in the comments. No matter how you go about it, the important thing is that you prototype often and early. This will help you deliver better systems to your users!

--------------------
Wow...just realised as I was saving that this is my 100th post. Didn't think I'd make it this long, especially since I sometime get a bit long-winded! :-D Thanks for sticking around everyone!!!

Wednesday, June 20, 2007

ActiveWords...Making Notes (and More!) Easier To Use

In my post from a few weeks ago, I briefly talked about one of my favorite productivity tools, ActiveWords. In this post, I want to introduce you to ActiveWords in a little more detail. At the end, I'll hit you up for some ideas that we can use to make ActiveWords even more compelling for Lotus Notes users.

First, a little about how I use ActiveWords in my daily work. The program is set to load when I start my computer, so as soon as I jump into my work it is ready to go. Usually, the first thing I do is start launching programs and ActiveWords is perfect for this task. It doesn't matter where I am within Windows (at my desktop, in another program, etc.), I can trigger an action just by typing its ActiveWord and using the activation key (by default it is F8 but there is an option to use 'space' 'space' as a trigger, which I really like). So, as soon as my PC loads up, I type 'n' at the desktop and hit the spacebar twice. This command launches Notes. The really powerful part comes into play when I am actively engaged in a work task. Let's say I'm typing an e-mail and I want to pull up Microsoft Excel. As I'm typing (directly in the memo where I get the thought), I can enter 'xl' and then double space. As soon as I type the first space, ActiveWords is aware that I used one of my words and the next press of the spacebar actually activates the action. Excel then launches as I desired and the letters I typed in the memo to trigger the ActiveWord are deleted (pretty smart, eh?). The screenshots below show you some of the options you have when setting up such a trigger word.





Just with the option to launch programs by keywords wherever I am, ActiveWords provided me with a productivity boost. However, ActiveWords is no one trick pony. It can do far more than just act as a program launcher. "What else?", you may ask. How about:

- Substitute a word you type with a another word, phrase or even multiple paragraphs
- Navigate to a specific Windows folder
- Open a website (or any URL really...think notes://)
- Open a document (this is what I use to launch .ndl files)
- Open a Windows Setting
- etc., etc.

You really need to experience it for yourself (hint: download the free trial), but here are some examples of ActiveWords that I use for the categories shown above.

Test Substitutions
* I now have my e-mail/message board signature line defined as a text substitution (multiple lines complete with a quote and all). My ActiveWord for this is 'sig', so I just type this and hit the spacebar twice to insert my signature wherever I am. No longer do I have to keep a signature line defined in multiple programs.
* I have ActiveWords for my 'name', 'address', 'phone', etc. If I need to enter those values in a field, I use the applicable ActiveWord, which is a lot faster than typing the whole thing.
* When I am doing application testing, I absolutely hate typing dummy text in fields. I put the opening couple paragraphs of the Gettysburg Address into an ActiveWord called 'test' and voilĂ , instant development testing text.

Opening A Website
Well this is pretty self-explanatory, but very useful. Example ActiveWords in my WordBase include 'bank', 'wiki', 'gm' (Gmail), 'r6' (Notes 6 & 7 forum...i.e notes.net! :-) Since this function within ActiveWords supports any URLs that are registered in Windows (*I think*), the notes URL protocols work too!

Navigating To A Folder/Opening A Windows Setting
I use this for quick access to My Documents and other folders on my hard drive ('projects', 'expenses', 'pics', etc.), Opening a Windows setting allows me to launch the control panel ('cp'), add/remove programs ('add'), etc. with just a couple keystrokes.

I think you get the idea.

Now, imagine extending these basic uses. For example, what if you wanted to quickly send a link to your calendar to another user? Maybe you do this often and it would be worthwhile to create an ActiveWord for the action. There's not an option for this out of the box, so what do you do? Being the really cool program it is, ActiveWords provides you with a scripting language that you can use to automate many tasks. Basically, if it's something you can do in Windows, you should be able to write a script to accomplish it. So, how could we automate the calendar link? Something like the following would do the trick:



You can see here that there are several commands built into the scripting language. Commands in the scripting language are delimited by < and >. In the example here, I am navigating to the Calendar view, pausing for a second, then emulating the press of the 'alt' key, followed by e (Edit), n (Copy As Link) and v (View Link). I then use the shortcut to create a new memo (Ctrl-m), tab down 4 times to get to the body and then do a Ctrl-v to paste the view link. Of course, this could be extended to include standard text, a signature line, etc.

The scripting language is quite advanced and allows you to use compound commands as well. As you can imagine, this can lead to some very complex actions that you can control with just a key or two. If you are concerned about being more productive and you are an ActiveWords user, you owe it to yourself to explore this feature in more detail. I'm really just starting to discover the power of ActiveWords scripting and I'm loving it.


That's right, Bob...there IS more! If you are a Tablet PC user like I am, you might find it a little difficult to trigger ActiveWords by using the keyboard when there's no keyboard available to you (i.e. when the tablet is in slate mode)! Enter the ActiveWords InkPad. This totally cool, totally free addition to ActiveWords provides you with a little floating widget that you can use to enter the trigger words with your pen! There are several options available for placement of the widget, size of the InkPad, etc. I have mine set to always be visible on the screen (whoops...sorry for leaving that on during my presentation at Lotusphere...my bad!). The ActiveWords icon floats on top of all windows (I've got it set to be semi-transparent) and only when I hover over the icon does the InkPad input area appear. Then, I simply write in my ActiveWord and move my pen out of the input area and the command is triggered. This is a very valuable addition to this program, since I maintain all of my standard ActiveWords functionality without having access to my keyboard!


In addition to all of the functionality built in to ActiveWords, there are several free modules available as add-ins that help extend the power of the tool even further. In ActiveWords lingo, these add-ins are known as "WordBases". Available WordBases include one that makes taking advantage of Google search and services very easy, an emoticon replacement function (e.g. type 'flower' and get @}->--), in-place spelling corrections, standard Windows commands and automation, etc. You can see all of the available add-ins here.

So...all of this leads me to a couple of calls to action. First, I encourage you to check out ActiveWords and see if you find it as compelling as I do. They have a 60-day trial available, so this gives you plenty of time to get a feel for the application and explore how it can make you more productive. Second, if you already use ActiveWords or if I've intrigued you enough to try it, you might want to participate in helping the fine folks at ActiveWords make a standard WordBase for Lotus Notes. Since I'm always harping on the UI of the client, I have a keen interest in leveraging ActiveWords to make using Notes easier. I've seen this in action in my own work and I think we could do the community of users a great service by helping in this space. If you want to explore what I've done so far and offer any of your own ideas, critiques, etc., please check out this post on the ActiveWords forum.

Ready? Go...