Having been in the internet for long enough to know my timezone, I was taken off guard when Guru.com presented me with the following dropdown list:

Naturally, knowing my own timezone and expecting the list to be sorted by timezone, I started scrolling down to approximately where my zone would be in the list. As I started visually scanning the list to find my zone, I noticed that there was no order to the timezones. And all this time I hadn’t looked at the location names — oh, it’s sorted by location name.

Fortunately, my timezone is sufficiently unique that I was able to find it without much trouble. But shouldn’t a list of timezones be sorted by timezone?

The script, which uses jQuery and is currently only usable for one field at a time, takes the select element (via its id) and loops through its option elements. For each option, its backend (the value=”" part) and visible (between the option tags) values are read into an array, and the select element is replaced with a hidden field and a text field. Entering text into the text field triggers the suggestion script, which matches the entry against the list of options (using both backend and visible options), and builds a list of the matches, with most likely matches at the top. Once the suggestions list is built, the script displays the top options in a google-suggest-style box directly beneath the text input. The number of suggestions shown is customizable, with values between one and unlimited (value of 0). Once suggestions are shown, they can be navigated using the up and down arrow keys, and selected using the enter key. Unfortunately, I haven’t been able to capture the enter key for this action, to prevent the form from submitting. As such, using “enter” to select the highlighted option will submit the form. Suggestions can also be selected using the mouse, complete with hover effects.

If the field is blurred (that is, the cursor leaves the field, such as with the tab key), then the script tries to choose the most likely option. If the field is blank on blur, nothing is set. If a suggestion was selected with the arrow keys or mouse before the blur, then that option is set as the value. Otherwise, the top suggestion in the list is selected (in the case of tabbing through the form: tab in, type two-letter state abbreviation, tab out).

When an option is selected, the input field’s value is set to the option’s visible value, and the previously mentioned hidden field is set to the option’s backend value. This method is used to retain the aspects of dropdowns: present the user with human-readable data, but use computer-readable data in back. That, and it makes it so you can use the same server-side processing script (and/or client-side validation script) for both JS and non-JS users, since the hidden field inherits the select’s “name” field (the text input doesn’t have a “name” field).

Like I mentioned before, this script is not limited to State dropdowns. Any dropdown list will work, but I would suggest you only use it in cases where the field’s values are already known to the users (”Select package” is not a good place for this!). Just provide the script with an ID, and off it goes.

Oh, and each line of suggestion is customizable via a simple template parsing bit .

Anyway, check the example out: replacing a State dropdown and replacing a Country dropdown. All the code (other than the jQuery include) is on that page; the javascript at the top is pretty well documented. Feedback and suggestions are most welcome.

Circular menus are superior in usability to the typical rectangular slide-out menu. Why? Because, ideally, each menu item is the same distance from the initial pointer position as each other item. Look at the iPod buttons, for example. Play/Pause, the most common function, is in the middle, and the other functions are equal distances from there.

Also check out the SecondLife context “spin menu”. The pie pops up surrounding the cursor, and all the available options are an equal twitch away from the center.

Submenus? Just expand the circle. For example, here’s a quick mockup I made converting much of my current FireFox context menu into a pie menu:

But how feasible would such menus be inside a website? WebToolkit.info has a mostly-working demo that uses images exclusively. I tried substituting text for the images, but the menu simply disappeared.

Credit for image: iPod image and SecondLife image