Wednesday, January 04, 2012

The Oatmeal Does UI

Unless you are a little squeamish about bad language, you should check out the latest offering from The Oatmeal: "How to make your shopping cart suck less".  While he uses some blue humor, there are very valid UI design points that he points out, not only for shopping carts, but for form design in general.  It's worth a few minutes of your time...and funny too!


Tuesday, March 02, 2010

Don't Assume...Your UI Should Help Guide, Not Hinder

Today I was working with an internal system. I was filling out a web-based form and got to a required field in which I could not enter any data. It was rather annoying and at the time I couldn't figure out what the problem was. I knew I was probably working on one too many things at once, so I left it to come back and try to figure it out later. Sure enough I did, but even on second glance it wasn't obvious. The sad thing was, I had filled out this form once before and had the same problem, but because some time had passed, I had forgotten all about it!

Here's what it looked like.


Since you are probably a little more astute than me, you've likely guessed that in order to populate the field, you have to click on the label! Once you click the 'Product' link, a list of possible values appears in a modal dialog. So what's wrong with this? Sure it works and once I figured that out, all was fine. However, I wasted time that was completely unnecessary.

While the label is in a different color, it wasn't underlined, even when I hovered over it. There were no tool tips, so basically I had no idea that this text was actionable until I clicked it. The cursor changed at least, but when users are in a hurry, this is easy to miss. I've talked about the idea of affordance before. This is the concept that an object's properties or characteristics imply the functionality of that object. In this case, the label did not have any affordances that I normally attribute to actionable text except for the color, which explains why I missed it at first. I just thought the field was being highlighted for some purpose I was not yet aware of. The designer assumed I would take it's meaning one way, but I assumed something completely different. The old warning about assuming is definitely true in interface design!

In addition to the affordance problem, another glaring deficiency here was the poor learnability of the system. Learnability is a measure of how quickly the user can figure out the system and remember the functionality for next time. Because the designer used non-intuitive functionality, it was difficult to learn and then hard to remember. Now that this has happened twice, I THINK I should remember this, but if I don't revist this application for another 6 months, it's quite possible I won't.

When you are building your interface, remember that your goal is to gently guide the user through the task before them. Each element that requires input should be blindingly obvious and if not, you need to take some steps to make it so. The designer could easily fix the problem in this example by adding some text telling the user that they must click the field label to view the list of choices. Perhaps more elegant would be a button next to the field or in modern UIs, the ability to just start typing and using auto-suggest functionality. Any of these options would be fairly trivial to implement, but would go a long way toward increasing the form's usability.

As a designer, I challenge you to approach these constructs through a user's eyes. Better yet, make sure you are doing testing from the very beginning so that you can capture these issues before you write any code. Test early, test often and don't assume. Your users will love you for it.

Thursday, February 11, 2010

See All Of Your Facebook Friends

Just a quick public service message for you Facebook users out there. Most people have received the new user interface by now. I only just received it myself, so I haven't lived with it long enough to render judgment. However, one of the things I noticed right away (besides the fact that they broke the Blackberry app for a few days...grrrr) was that I was not seeing all of my friends' status updates. So, after remembering what they did last time, I checked and indeed they throttled back the number of friends appearing in the feed to 250. I'm not sure if those 250 are random or somehow ordered, but it doesn't matter because I want to see all of my friends. Let me make the decision about who I want to ignore, Facebook! ;-)

So, the resolution is quick and easy:

1. From the homepage, click the "Most Recent" link so you are seeing the real-time friend feed.


2. Scroll down to the very bottom of the feed and you'll find a link labeled 'Edit Options'. Click this link.


3. In the resulting dialog box, you'll see that they are setting the number of friends you can see to the default value of 250. Change this to a higher number, up to 5000, which is currently the maximum number of friends you can have. Click the 'Save' button.


That's it. Once you complete these three simple steps, you will be back to seeing all of your friends' farm updates, mafia scores, news on their pets, etc. On second thought, maybe you want to set that number to 0. ;-D

Pass it on...

Tuesday, January 12, 2010

The WildFire Is Spreading...And It's Hot! Update Your Status Across Multiple Networks From Lotus Notes!

A new OpenNTF project hit the ground running today and it is hot! I installed it this morning and think it's a great piece of work. The project is WildFire, a Lotus Notes 8.5 sidebar application that allows the user to update status messages across a ton of different social platforms. Networks supported in this initial release include Facebook, Twitter, Lotus Sametime, Lotus Connections and many more! While this type of client for allowing simultaneous updates of your micro-conversations is not new, the implementation, interface and integration with the Notes client is top notch. Installation was smooth and it worked as expected right out of the box. Having the ability to selectively update given services or all at once right from the Notes sideshelf is a great value proposition, especially considering that it's free!

Here's a screenshot of WildFire from my Notes client with the services I've configured so far. I love the fact that you are not locked into a single instance of a given service. For example, I have my embedded Sametime client configured for 7 different communities, and if I wanted to, WildFire would allow me to update my status across all of those.


Configuration of WildFire is extremely simple. Once installed, the application options appear in the standard Notes Preferences dialog. You simply add a new service and select the Account Type (Sametime, Connections, Facebook, etc.). Each account type can be given a unique name and it is this name that appears in the WildFire UI. For a given account type, the credentials required vary somewhat, but it is all very easy to understand. You can also group your various accounts together (e.g. Personal, Work, Friends, etc.). This allows you to selectively send that hilarious, NSFW video to your buddies from school but not to your work associates with just a single click. I especially like how it pulls in your information for Sametime from the communities you already have configured. Making it easy to get up and running quickly is a great user experience feature!


To update your status, you type your message, select the service(s) you want to update and hit the Post button. Simple stuff, but the simple tools are sometimes the best. I believe I'll find this over time to be a big time saver.

Check out some other screenshots of WildFire:








So who is behind this awesome piece of work? It's available on OpenNTF, the Lotus Notes open source community, courtesy of ISW, a Premier IBM Business Partner located in Australia. Thanks to Andrew Welch, Adam Brown, Joel Thirgood and anyone else involved in this great project.

There's a lot to like about this application and if you use more than one of the many social networking tools out there today, it is worth your time to check out WildFire.

Friday, January 08, 2010

Folder Name Issue Causing Java UI Rendering Problem In Notes 8 Mail File

I was working with one of my customers and was told about an interesting problem. They are currently in the process of upgrading to Notes 8.5.1 and so far, most of the client upgrades have been nice and smooth. One user had an unusual issue that was causing a bit of angst. After being upgraded and getting the new mail template, most of his folders were not visible in the UI. Here's what it looked like. Notice anything odd?


A quick check using File - Go To confirmed that the folders were indeed still in the database. However, this was the only way the user could navigate to these folders. Looking at the folders in the Admin client did not give us any additional information. Without digging into it too much, we first performed the normal triage procedures (compact, fixup, etc.). These did not yield any positive results. Neither did replacing the design or creating a new database copy. In fact, I went as far as to replace the design to something totally different, then replaced back to the mail template. Nope...same result. Time to get sleuthy.

I received a design copy of the database and began to look at it a little more closely. One odd fact was that some automatically generated folders that Mail Attender created were there, but that was it. These were prefixed with a "-", so I tried adding a new folder with a "-" in front. One worked (-A Test) and one didn't (-Test). Ah...interesting. This caused me to look at the navigation in a little more detail and I realized that the entire UI was not rendering. There should have been some additional options under the folders like "Archive", "Tools", etc. Since the first folder I created appeared under the folder list in the navigation pane but the other did not, this clued me in that perhaps Notes was hitting a folder name it did not like and that caused it to cease rendering the rest of the UI elements at that point. I opened the database in the Notes 8 Basic client and everything appeared fine, so I was pretty confident that this was a bad name or corrupted folder. Sure enough, when I opened the design, I found the offending folders.

There were two folders that used a nested name and each of them were wrapped in parenthesis. They were named:

-To Be Deleted\(-To Be Deleted)\(--ToBeAutoDeleted\Meetings)

-To Be Deleted\(-To Be Deleted)\(All Documents)



As soon as I renamed these folders to remove the parenthesis, everything started working as expected and the entire navigation UI was rendered correctly.

I started playing around a bit and it seems it is the second set of parenthesis after the second backslash that cause the problem. So,

Interface\(Matters)

doesn't cause things to break, although it still results in strange behavior in that "Interface" appears but doesn't do anything.


Interface\(Matters)\(Rocks)

breaks everything. No folders or additional UI elements below "Interface" show up at all.

Interface\Matters\(Rocks)

is OK, as is

Interface\Matters\(Rocks)(Hard)

But

Interface\Matters\(Rocks)\(Hard)

blows everything up again.

So...there you have it. Avoid making folder names with multiple levels that are surrounded in parenthesis when using the Java UI. I just wanted to document this in case anyone comes across it again in the future. I haven't checked if this is a known issue yet, but I'll be sure to pass it on to development.

Friday, December 18, 2009

Changes Ahead For Interface Matters

The winds of change are blowing here at Interface Matters and in my opinion are way, way overdue. The only excuse I have is lack of time to devote to these changes (or at least lack of desire to devote the time since other things have been occupying my attention of late). I have been wanting to make some changes here for quite some time, and as the new year rolls around, it's probably as good a time as any to make the leap.

First, I want Interface Matters to expand beyond a single voice. This has always been my plan and I have just failed to execute. This site was never designed to be my personal blog. If it had been, I would have called it chrisblatnick.com. This is the reason I've tried to limit the amount of personal content and why more posts are article length rather than quick blurbs. My original vision was that this site would serve as a good resource for UI ideas for Lotus Notes developers, something that could be referred to now and again like a well-worn book on your shelf. Although I check traffic very, very infrequently, the notifications I get on occasion show me that people are still downloading the sample databases, so there must be at least some value here. The last couple of years have been light on content in this space, though, since I am not doing day-to-day development anymore. This brings me to the first change.

I'm looking to expand the authorship of Interface Matters and I'm looking to you out there in the Lotus community to help me. I believe there is a lot of richness and value in getting multiple viewpoints on user interface and user experience concepts, and I'd love for this to be the place to get it. There are many innovations happening in the collaborative development space lately and along with these new technologies (e.g. XPages), there are new design and interface challenges. I hope we don't fall into the same trap we did with Notes client apps and make every XPage look exactly like OneUI. I hope these other voices are out there and ready to step up and share with the rest of us. So, the concept is simple. If you have an idea for an article that would fit the mission of Interface Matters and you would like to have it posted here, just send me an e-mail and we'll put it on the map. For now, I'll maintain editorial duties and will still contribute too, but I'd definitely love to open Interface Matters up to more contributors. I've tested the waters a bit in the past with a guest author or two and think it works quite nicely.

That brings me to the second change. I would finally like to move this blog to the Domino platform. I originally started using Blogger because I wanted to explore what other blog engines were out there and Blogger was one of the most popular. I never changed because quite frankly it is so simple to use, but along with this move to mutliple contributors, I'd like to finally design a decent looking blog template. To do so, I need to ask a couple of questions:

1. Any suggestions for Domino hosting?

2. I might open up the design to someone that wants to tackle it. Hmmm...perhaps a contest? Any thoughts?

I really do hope to hear from some of you. I think this site has more potential that it's been showing lately and these updates might just be the thing to spice it up a bit.

With that, I'll sign off and wish you all a fantastic holiday season!

Thursday, December 17, 2009

On Productivity: My Paper Processing Workflow

I've always been a fan of performing tasks as efficiently as possible and eliminating the drudgery of those tasks that don't add a lot of value to my work or personal life. One of those tasks which is a necessary evil is the maintenance of paper-based documents. Everyone has them...bills that need to be paid, bank statements, tax documents, owner's manuals, receipts. As much as possible, many of us have tried to digitize these things so we don't receive them as paper in the first place. I've pretty much successfully eliminated any kind of bill coming to me in the mail and have turned every monthly payment into an automated one. Technology is a great enabler for managing a lot of this "stuff", but if you are like me, you probably have a legacy of paper filed away in some part of your house. For me, my paper legacy takes the form of two file cabinets full of the paperwork that makes up my life since I started college. A great majority of the paper is content that I will never likely have to revisit, but feel the need to keep in case it is required for some reason. Financial and legal documents seem to be the most prevalent in this category. In the 10 years I've been in my current house, I've never had to go to the file cabinet and physically pull my mortgage papers, yet there they are, taking up valuable space and stuffing the drawer so it makes it harder to get to the stuff I really do need to see. Earlier in the year, I decided to start tackling the paper problem in my house. Ironically, as a collaboration architect working with Lotus technologies, I've helped many companies eliminate paper from business processes through the years, but never really took action on it in my own life. The cobbler's children and all...

Anyway, in order to get rid of paper, I knew that I would have to digitize it and then store it in such a way as to find it as easily as I could find information in my physical file cabinet. To do this, I would need a scanner. Now I've had a flat-bed scanner for many years, but I understood from using it that it was in no way up to the task of digitizing my life. The process of individually putting each page of a document on the bed would be far too cumbersome to manage in a timely fashion. No...what I needed was a scanner than provided a paper-feed mechanism and that could handle paper fast. From doing research over the years, I had one and only one device in mind and the only reason I hadn't pulled the trigger yet was cost. That device was the Fujitsu ScanSnap and let me tell you, it is the best money I have ever spent on a piece of computer hardware, bar none. My only regret was not having picked this thing up sooner. To do it justice, I don't just want to explain the ScanSnap, I want to show it to you. More on that in a minute.

So I recognized a problem: too much paper. That was the first step. Now I needed to make an actionable plan to deal with it. That's where the ScanSnap came in. I started using it to scan papers in when they came in the mail. As soon as I came across something I needed to keep (my monthly bank statement, for instance), I digitized it and stored it on my hard drive and then shredded the document. Ah...a great feeling. I've been doing this for several months now and it has been very successful. However, nagging at the back of my mind (even though it was on my Someday/Maybe GTD list) was the massive task of tackling those file cabinets. Over the Thanksgiving break, I finally took the plunge and mapped out my paper processing workflow. This is my first attempt at the process, and I'm sure it will be enhanced and refined over time. In any case, based on a couple of e-mails I received in regards to my tweets about "Operation: Paperless Office", I thought I would share a video with you on how I am doing this. This also gives me a chance to showcase the Fujitsu ScanSnap, which I think is just a phenomenal device!

First up, here is a brief note I made when I was thinking through the process. (Yes...I believe in the power of prototyping and visual rendering even when I'm not doing application development!).


It turns out that so far this is working nicely. The following videos describe the ScanSnap functionality and show you my paper processing workflow in action. A couple of notes about the videos. First, I have a face for radio and a voice for print, so try to ignore the narrator and focus on the content. Second, I used my son's Flip video for this rather than my hi-def camcorder. I was kind of giving the Flip a trial run to test some things out and after going through the entire process, I thought it flowed pretty well and I was afraid if I tried to re-record it to be more "professional" then it would just come off feeling scripted and contrived. What you get here is me just trying to describe the process as if I was talking with you face to face. Take that as you will. :-)

Paper Processing Workflow with the Fujitsu ScanSnap - Part 1 from Chris Blatnick on Vimeo.


Paper Processing Workflow with the Fujitsu ScanSnap - Part 2 from Chris Blatnick on Vimeo.


As you'll see if you check out the videos, another important component of my paper processing workflow is Dropbox. This service is an excellent way to replicate data across systems and functions as a temporary to permanent backup system. With it, I feel comfortable knowing that I can destroy a document as soon as the ScanSnap captures it. Dropbox provides a free and premium service. Check out their website to learn more and get started with a free account. If you use my referral link, you'll get an additional 250 MB of space on top of the 2 GB they give you for free (so will I...thanks!).

If you have questions or suggestions, I'd love to hear them. Cheers!

Check out DropBox and get 250 MB extra

Order the Fujitsu ScanSnap from Amazon: Windows version | Mac version