Cleartrip Blog

Better dropdown menus in forms

Hrush

10 responses

A lot of us at Cleartrip use Bookmyshow.com to book movie tickets–it’s a great site that lets you quickly see what movies are playing where and when and then lets you book at the theatre of your choice with a wide variety of online payment options.

It’s slightly more expensive than booking directly with the theatre, but the convenience offered by the site is well worth the little bit extra. At Cleartrip, we’re big supporters of paying for convenience and quality; and besides, why should anyone work for free?

We just had one gripe with the site’s usage of dropdown menus–they’re quite confusing to navigate because they’re not coded or designed properly. This is the dropdown menu they use for movie selection.

There’s two basic reasons the above form widget doesn’t work as well as it should:

  1. Movies aren’t listed alphabetically
  2. Options are not grouped properly–there’s two ‘groups’ of items here, Hindi movies and English movies, but it’s near impossible to distinguish the names of the groups from the names of the movies; there’s no real visual distinction.

Designing web site forms is a black art, so we’d like to share these two tips on getting your dropdown menus to work as best as possible:

  1. All items in a dropdown list should be listed alphabetically. Not listing things in alphabetical order is just lazy, sloppy coding and forces users to hunt through the menu to find what they’re looking for. There’s simply NO excuse for not doing this.
  2. If you have groups of items, use the optgroup tag to group like items together–this provides a nice visual distinction as well as being the correct way to code for groups in dropdown menus.

After following the above two rules, here’s what the dropdown would look like.

So much easier to use and so much more elegant–little things make a big difference in design, never stop paying attention to them.

10 Responses