Replacing the HTML drop-down control

by Krishna on January 12, 2008

The standard HTML drop-down control is convenient for allowing users to easily select from a set of choices. It is preferable to using multiple radio buttons for selection because it helps reduce screen real-estate needs. It is not only a data entry field, but is also frequently used for providing a set of user actions or screen navigation.

However, it has a few shortcomings that make it inadequate for many purposes:

  1. As the number of choices increases, the drop-down control becomes more difficult to use. The user has to spend more time and effort scrolling to find the right choice. Ordering the values alphabetically only helps to some extent. When the number of records increases into the thousands, it presents technical difficulties, such as performance issues.
  2. Although the user can type a few letters to bring the focus to a particular selection, those letters are not displayed on the screen. If the user wants to cancel their input, they cannot hit the backspace key, because the browser would go to the previous page. Instead the user has to wait for 1-2 seconds and start typing again from the start. Also, not having a regular text input prevents the application from using user input to filter the records in the drop-down instead of simply navigating to the record.
  3. The drop-down control cannot easily display a columnar format for multiple fields (say Serial Number, Product Name and Vendor) for a single record. You could resort to pseudo-formatting by appending the fields, padding them with spaces and using a fixed width font, but that would conflict with the fonts on other fields. Even if you manage to show multiple values on a single choice, the user cannot sort them as they could normally by clicking on the header column.
  4. Although users can manage drop-down records in an administrative section, they frequently request the ability to do so in any screen where those records appear. Users find it inconvenient to cancel their work on a form because a drop-down value was missing and have to go to another screen to enter the record.The standard drop-down control does not allow any easy way of adding a new value.  One way around this is to provide a link to a modal window that would allow the user to add, update and delete records in the table referenced by the drop-down. However, those changes must then show up back in the drop-down control choices in the parent form.
  5. Sometimes, users have the need to “expire” choices in the drop-down control so that they are not available for selection in future data entry. An example would be “East Germany” in a country selection. However, when the user wants to edit a prior record, the country drop-down no longer has the previous value and it cannot be used to display the value in the form. This even if the user may have no intention of editing that field.
  6. This last one is more a browser issue: In some versions of Internet Explorer, the drop-down control prevents any DIV controls to be overlaid over them. If you had a floating layer, the drop-down would show through the layer, resulting in an ugly and unusable display. Developers have to come with various code workarounds to solve this problem.

This is not an exhaustive list, but let me stop here. I think there is a real need for programmers to stop using the default HTML drop-down control. The better option would be to design a combo-like control that has the following features:

  1. Text box: This can be used to filter the values in the drop-down or directly enter the value. For example, a product id can be entered using a barcode scanner instead of scrolling through a long list. The text box could be used to display “expired” choices that may not be available in the drop-down list.
  2. Drop-down list: The display could be configured in different values – a simple list, a hierarchical list, a sort-able table, etc. The values themselves could be directly edited or deleted in the display itself, and new records added. The display could be a static pre-loaded list (if there are only a few records), an asynchronously loaded list (to reduce start-up delays) or an incomplete list that displays a few records and more on request. Searching can bring the right records to the top of the incomplete list for easier selection.

This is not the same as the standard Windows combo-box control as the drop-down list is more configurable in terms of display and event handling. It also goes without saying that keyboard and mouse interaction with this combo control should try to retain the efficiencies of the simpler drop-down control. These include keyboard events such as ENTER, ESC, TAB, SHIFT-TAB, arrow keys, etc. and mouse events like scrolling, clicking (inside and outside the control), etc.

One key design principle when creating this control should be that it should have the capability to entirely displace all instances of the standard drop-down control. This is required for the sake of consistency and uniformity in user interface to avoid user confusion.

{ 3 comments }

Kalpesh January 12, 2008 at 10:01 pm

HTML based controls serves a purpose for core functions. However, for extended functionality – set of user-controls would be of great help.

To give an example, how many web-applications have html for input text box & validation logic for numbers & email address. And, all of them would differ in one or the other way – hence, there should be some consistency in using controls & what they can do. We are trying to do the same thing again & again.

For now, AJAX based controls could do lot of it.

Krish January 12, 2008 at 11:18 pm

Ajax is definitely the technology to leverage. Your point about input text boxes is very valid. I believe that we need a greater subset of controls than what HTML offers out of the box.

Different frameworks, like Ajax.Asp.Net, offer more controls, but it is time to introduce more complex controls into the HTML standard. It is not like today’s browsers are incapable of implementing them.

table top displays April 27, 2010 at 8:28 pm

I’m starting up a blog related to trade show displays. I’m searching for information to add to the site. I found your site by searching for table top displays. Thought you might want to know. 🙂

Comments on this entry are closed.

Previous post:

Next post: