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.