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!