• About
• Projects
• Articles
• Contact

Helpful Forms with Lookup Lists

Using the right type of form for the right kind of user

People are lazy. They want things easy. Knowing this can make you a better designer, and ignoring it will help you make some painful user interfaces.

I started toying with this idea a few months ago, but a recent post by Andy Budd made me decide to write about it.

I want to address a problem with poorly designed forms and lazy developers. I'm not completely familiar with every operating system out there but I am unfortunate enough to use OS X most of the time. Don't get me wrong, its an outstanding operating system. But if you're a Mac user, how many times have you visited a website where you need to fill out a form with your address? Probably many, and I'm sure you've had a similar point of frustration as I have. Here it is:
Alabama Alaska Arizona Arkansas California Colorado Connecticut Delaware District of Columbia Florida Georgia Hawaii Idaho Illinois Indiana Iowa Kansas Kentucky Louisiana Maine Maryland Massachusetts Michigan Minnesota Mississippi Missouri Montana Nebraska Nevada New Hampshire New Jersey New Mexico New York North Carolina North Dakota Ohio Oklahoma Oregon Pennsylvania Rhode Island South Carolina South Dakota Tennessee Texas Utah Vermont Virginia Washington West Virginia Wisconsin Wyoming
If you live outside of the US, the same problem crops up in long country lists, so don't walk away thinking this won't apply to you too.

On Internet Explorer (and Firefox) that list will appear as a scrollable list allowing you to take your time reading each option before you select it. That's much better than an almost endless list that can span the entire height of your screen in Safari on OS X. Internet Explorer on Windows XP makes it easier, but it's not quite easy enough.

Depending on where you are in that list, you may have a very different experience from another person. I, for example, live in Virginia so I know that every time I see a list like that it means more added time and that I'll need to move my hands from the keyboard to the mouse and then back to the keyboard. OK, perhaps some of you may know how to select an option from that list without using the mouse, but we need to assume that most users don't, and from what I've seen from people around me that's a safe assumption.

This article covers a solution that would allow users to easily enter their state or country code. It's accessible, it uses unobtrusive scripts, and best of all it makes using a form easier.

Simplifying the form

It really is a bother to have to use a mouse and the keyboard. If I could go to a form and simply type VA for my state code and move on, I'd be much happier. Its not hard to remember my state code and its very likely that most people know their own state's code too, so let's just let them enter it. Of course, after that statement, the complaints from the server-side developers come rolling in because, if you are one, you'll need to validate any form entries and forcing the user to select an entry from a pre-defined list makes your job much easier. You're right. Most of the time if you want to make something easier for the user it means more work for the developer, but in the end if you concentrate on the user you'll have a better product.

So let's make it simple:

Live in Virginia? Then just type 'VA' and move on. We could stop there and just leave it at that, but what if the user isn't sure of their state code? Or what if you're creating an interface for a call center where the user has to enter information from someone else, perhaps someone from another state? Personally, I rarely need to know the state codes for Michigan, Misouri, Mississippi, Maine, or Massachusetts, and I'm not really sure what their codes are. So, for people like me, maybe we should add some information where we can look it up.

In the vein of keeping it simple, let's just call this a lookup list.

The reason I want to add a lookup list instead of keeping the drop-down select list is that the form will be much easier to understand when a user can easily view their options for a given field. In this situation we have a large number of options available, over fifty, and that's a bit too much for a user to sort through on a list that requires interaction with your mouse. In my opinion, let's just give them a nicely formatted list to read when they need it.

Yikes! That's long.

Keeping it simple

This is a helpful list, but it's reminding me of the benefit the drop-down select list: its compact. Well, I don't want to go back to the previous option because it still has the same annoyances and we're just trying to allow the user to type in what they already know. This list is just for assistance, so let's do some ever popular progressive enhancement with unobtrusive javascript to allow for graceful degradation. Did I get all the buzzwords in there? Check. What does all that mean? It means we'll be providing the lookup list to everyone, and for those that have a modern browser, we'll shrink it down to save some space and make it available to them when they need it.

We used a little bit of CSS to make the list compact already, but what I want to do is hide the whole thing and simply add a link next to the form field telling the user that there's help available.

Enter: Javascript.

We'll write a simple script to grab the list, set a new CSS class (which we'll use to hide it), and insert a link to show the list again (by changing the class).

Here it is:

That script helped to get the list out of the way of those who don't need it, but we're still moving our hands from the keyboard to the mouse just to hide the list when we're done. There's a more intuitive solution for our users.

We'll add to our script so that when a user has completed the entry, the lookup list will automatically hide itself out of the way. (In addition to that, it would make a whole lot of sense to allow the user to select an item from the lookup list and populate the text field, so we'll do that too).

To top it off, we'll use some CSS for positioning so the lookup list doesn't push our whole page down

Use it!

That's basically all there is to it. There's plenty more you could do to this with CSS and Javascript, but I'll leave that up to you. The basic priciple here is that you should design according to your audience and the easier you make it for them, the better your application will be.

I don't make any claims about this being special code. This is only a proof of concept so copy it and use it. If you make changes, corrections or additions, let me know about it!. In fact, I haven't done a whole lot of testing on it, so please let me know if you have a tip for me. Email me at jim at saturnflyer.com.

commenting closed for this article

Help - I'm Outgrowing My Server!