Selecting country names in forms
All too often when I want to order something online or find information related to a specific region, I am faced with a badly designed order or search form. One of the common hurdles I have to jump over is a huge drop-down select box with country or municipality names. “Sweden” is rarely at the top of country lists, and picking “Övertorneå” from a select box containing Swedish municipalities would require me to select the last of 290 options.
Some browsers let you navigate drop-down lists by typing letters on your keyboard. Others don’t, so depending on which browser you’re using there is plenty of scrolling or keypressing ahead. Then there’s the amount of HTML generated by a couple of really big select boxes. It can easily be tens of kilobytes, which is not negligible if you’re on dialup or using a mobile phone. Select boxes are clearly not the optimal solution in these cases.
Jakob Nielsen notes that select boxes are often more trouble than they are worth in his Alertbox Drop-Down Menus: Use Sparingly:
Very long menus that require scrolling make it impossible for users to see all their choices in one glance. It’s often better to present such long lists of options as a regular HTML list of traditional hypertext links.
Putting the options in a regular list of links is often difficult to do in a form, which may contain several such long lists of options. Normal hypertext links don’t work very well for letting the user select an option either, and will probably generate even more markup than a corresponding select box.
So is there an even better way? Bruce Lawson has been thinking about this, and in Forms: inputting country names suggests letting the user type their response into a text field. The problem with that is the need for server-side validation of the user input to correct typos and recognise synonyms used for countries. And the last part is where Bruce is looking for help. Check out his post and give him any suggestions you might have.
Subscribe / follow
DreamHost web hosting
Use the promo code 456BEREASTREET3 to save USD 20 when you sign up for DreamHost