I've never liked the standard implementation almost every web site uses to select your State or Province in a web form. Selecting one out of 50 or more items from your traditional dropdown list is a pain in the butt. This morning, I've come across a simple and elegant solution that I'd like to share with you.

Let's begin by reviewing the issues associated with gathering State-Province data in a web form.

Why not use a text input box?

Well, that is a viable option, but then you must deal with typos, capitalization, validation and error display. It requires at least two keystrokes from the user and is inherently more prone to error.

OK, so that leaves a dropdown list or combobox.

Semantically, there can be a slight difference between the two. A dropdown list forces you to make a selection from a predetermined list. A combobox can be configured to permit text entry NOT in the presented list. (e.g. like the suggested search terms in Google's search box.)

It's just too long a list!

Trying to present the 50+ options in a list simply makes it physically too long, requiring scrolling. Scrolling means extra clicks. Extra clicks means extra work for the users. Extra work for your users, creates both an unpleasant experience, and a higher abandonment rate. That's bad.

Incorrectly sorted?

Many users like filling forms using only the keyboard. In fact, some of your site visitors may have an impairment that makes the use of a mouse difficult. Here's an example of a keyboard-only session:

I'm filling out the text entry fields, and I've tabbed over to the State/Province selector field. I want to select "Maryland". The standard behavior of a normal html dropdown list is as follows.

I hit "M" on the keyboard to select Maryland and "MA" Massachusets is selected. What do I do next?

1. If I hit "A" to continue spelling Maryland, I end up selecting "AK" Alaska.
   
   
2. If I hit "D" to continue spelling "MD", the two-letter abbreviation for Maryland, I get "DE" Delaware.

How many users know you need to keep hitting "M" to cycle through the items that start with "M"?

Even if you knew that, it can still be a problem. Is the list sorted by the full state name or by the two-letter abbreviation? Of course they don't match.

An elegant solution

I ran across this solution on HGTV's website. The state selector looks like a traditional selector box when first viewed. However, rather than presenting a long, scrolling list of items when clicked, instead, an attractive, compact panel displays a 6 by 10 array of all 56 US two-letter postal abbreviations.

These can easily be scanned by the user without scrolling, and the desired value quickly selected with a single click. A close dialog "X" hint is also displayed in the top-right corner to cancel selection.

Unfortunately, keyboard selection behaves the same as a regular drop-down list. My suggestion would be to instead use the first keystroke as a filter.

For example, pressing "M" would open the panel displaying only the States-Provinces that begin with "M". The second keystroke would complete the selection.

Is it compatible and accessible?

A quick scan of the source code reveals that there is a standard selector in the underlying code. That means it should be quite compatible, degrade gracefully, and is likely accessible by screen readers.

I found this implementation to be a great improvement over the traditional State-Province selector in both visual appeal and usability. I will start implementing State-Province selectors and other long lists this way in my own site designs.

If anyone finds or can recommend a JQuery plugin to accomplish this, please leave a comment.

Technorati Claim: RF8VQR6QR74X

This post will cover how to integrate Alex Gorbatchev's excellent SyntaxHighlighter javascript tool so that any code snippets you include in your blog post will by nicely formatted with line numbers, color-coding and more. This is also known as pretty-printing your source code.

This technique works for source code in any of the following languages: ActionScript, Ada, Assembler, ASM/NASM/MASM2, AppleScript, AutoHotKey, Bash/Shell, Batch, C#, C++, Clojure, ColdFusion, CSS, Delphi, Diff, Erlang, F#, Groovy, Java, JavaFX, JavaScript, LaTeX, LSL, Lua, Mathematica, MATLAB, Objective-C/Cocoa, Oxygene, Perl, PHP, Plain Text, PowerShell, Processing, Python, RouterOS, RPG/ILE-RPG, Ruby, Sahi, Scala, SQL, Visual Basic, YAML, XML

1. Download the latest version of SyntaxHighlighter

From: http://alexgorbatchev.com/SyntaxHighlighter/download/

Support for different source languages is enabled through individual "brush" files. Some come bundled with the download, others must be downloaded separately. See the brushes page.

2. Create a directory in your SquareSpace Storage

Create a directory called syntaxhighlighter in your storage folder.

3. Upload the ZIP file to your SquareSpace Storage

Upload the previously downloaded file to the syntaxhighlighter folder created in the previous step. Make sure that Decompress Zip Files After Uploading is checked.

4. Remove unneeded files

You can delete the folder called src to save storage space.

5. Insert the javascript Extra Header Code.

Using the SquareSpace Code Injection feature under Website Settings, add the following code to the Extra Header Code section.

6. Insert the javascript Post-canvas HTML.

Using the SquareSpace Code Injection feature again, add the following code to the Post-canvas HTML section.

Creating and Editing a Journal Post with Formatted Source Code

Your SquareSpace site is now ready for journal entries with formatted code. First you need to finish writing your journal entry without the source code sections. Once ready for the source code segments, do the following:

A - Replace all < symbols in your source code with <

Fire up your favorite text editor and replace all those < characters with < to ensure your post will display correctly in RSS readers. (Note: MS Word is NOT a text editor, Notepad is.)

B - Switch the SquareSpace Post editor to Raw HTML Mode

This prevents SquareSpace from reformatting the raw source code you paste within your journal entry.

C - Insert your code wrapped in

Paste your code inside of

    function foo() {
    	var s = 'Hello World!';
        alert(s);
    }

Ensure the correct brush alias is applied as a class to properly format your code based on the desired syntax.

Important: from this point forward, all edits must be done and saved in Raw HTML mode to preserve your source code formatting.

D - (Optional) Modify configuration Options or Theme

Refer to the Configuration Docs to modify features or to change themes.

SyntaxHighlighter is licenced under LGPL 3 and while being free of charge is a work of one man who needs beer, ie if you are using SyntaxHighlighter, please donate.

Remember as a kid getting one of those little plastic toy mazes as a cheap prize at a birthday party? You know, the kind with the cardboard back and malformed little ball? Basically, they were not fun at all because even with excellent manual dexterity, you couldn't make the ball go where you wanted because of the poor manufacturing quality.

That's what many of the "on-hover" drop-down website navigation menus remind me of. By "on-hover" I mean those websites where you float your mouse over a menu item, and submenus appear for you to select from.

In this post, I'll cover the reasons why in most cases, you should trash that on-hover navigation from your website just like you trashed that 5 cent plastic toy.

Don't Make Me Think!

Not only is that the title of Steve Krug's excellent book on web usability, but it also applies to the design of the navigation for your website.

For example, how often have you visited a site where you hover your mouse over the first menu element and sub-elements appear. Now you need to stop and think. Can I click the top-level element? Or is that just a place-holder to open the sub-menus?

Confusing the site visitor is always bad. Period. When you click a navigation item, you expect new content to appear.

Steady as she goes Mr Sulu

As long as we're on the topic of cheesy kids games, remember the game "Operation"? You had to have a steady hand to "operate" on your "patient". A loud buzzer would sound and your patient's nose would flash if you touched the sides.

So unless you want to play games with your site visitors, why do I keep seeing these narrow, elongated submenus where you have to exactly follow it with your mouse to get to the last submenu item? And, if your mouse falls outside the submenu, it disappears (or a different menu appears) and you need to start again at the beginning.

It's pretty obvious that you shouldn't require your site visitors to perform dexterity tricks to get to your content. It's a sure-fire way to annoy them.

Can you give me a hint?

In researching the subject, I was lucky to find a perfect bad example of an on-hover navigation menu. It was being sold as a code package to easily add "deluxe" menus to your website. Here is a picture of the sample menu they used to describe and demonstrate their product:

OK, a basic tab menu. Typically, when encountering a tab menu, you expect the content below the tab area to display what was promised by the tab label. OK, so I'll click "Product Info" to get Product Info, right?

Wrong! Clicking "Product Info" doesn't do anything. However, when my mouse hovers over the tab, a submenu appears. (I guess they haven't read Steve Krug's book.)

Not only that, but the submenus have even more submenus! See below.

I had to cut off that last submenu, because it was so long it scrolled past the edge of my screen. So here I am clicking and playing the "maze" game. I'm three levels deep and I still don't know which versions of Internet Explorer are supported.

Below this, they also listed some "features" which actually are reasons why you DON'T want to use this type of navigation code.

Accessibility - Navigating with the Keyboard

For various reasons, not all of your site visitors will have a mouse. This product says "Use Ctrl+ to access the top menu!". That's not accessibility! Who would know to use that keyboard combination? Then, how do you access the submenus? Not surprisingly, when I hit Ctrl+ on my keyboard, nothing happened.

At it's simplest, you should be able to tab through the available links/menus items on a web page to select the item you want, without using a mouse.

Mobile Browsers - I have no mouse

Ever increasing numbers of people are using mobile devices to access the web. Almost all mobile devices do not support the "onmouseover" event that triggers these hovering submenus to appear.

Don't leave your mobile visitors stranded.

JavaScript + Menus = bad idea

Another "feature" this product was touting was JavaScript-loaded and AJAX-loaded menus. Simply stated, the reasons you don't want to do this are:

1. The Google, Bing, Yahoo!, etc, search engine spiders visiting your website to make it searchable are not able to navigate across JavaScript-created menus. (That means AJAX too.) Basically, you're preventing Google from reading the content beyond the home page, so those pages will never appear in search results.
2. Many site visitors will have JavaScript disabled by default (mostly for security reasons). They will never see your submenus appear at all.

BTW, Flash-based menus also suffer the same fate for the same reasons listed above. Search engine spiders cannot follow flash-based menus, and many users are beginning to block Flash altogether by default.

Too many choices

Another reason to avoid submenus is that the choices simply start becoming overwhelming. Give your users too many choices and they don't choose any at all.

This was demonstrated in an oft-quoted supermarket experiment conducted by economists Mark Lepper and Sheena Iyengar. In this experiment, they set up two tables in a supermarket to allow the shoppers to sample and purchase different flavors of jam. One table was set up with 24 flavors of jam, the other with 6. Of the shoppers who visited the table with 24 flavors, only 3% went on to buy jam. Of the shoppers who visited the table with 6 flavors, a whopping 30% bought jam!

This seems to indicate that when faced with too many choices, we choose not to choose at all, or at least get diverted from the primary task at hand.

So, are all dropdown menus bad?

No, they're just difficult to design and implement correctly.

As per the title of this site, whenever you can, SIMPLIFY! I often see drop-down menus implemented when they aren't even necessary. If you find yourself considering using a drop-down menu for your navigation, here are some questions to ask yourself:

• Do I really need all those submenus? Or can I incorporate all those items as subsections of a single page?
• Would all those secondary navigation items work as links in my site's footer section instead?
• Would an accordion-type navigation be more appropriate where submenus stay on the screen until a menu item is clicked?
• Does my navigation work without a mouse? Does it matter?
• Will my navigation work on mobile devices? Does it matter?
• Will the navigation work with JavaScript disabled? With Flash disabled?
• Are my drop-down menus search engine friendly? Do they need to be?
• Does my navigation work on all the major browsers my website visitors use?

Drop-down menu best practices

If you find that your site's content and workflow indicates that drop-down menus would be appropriate, here are some best-practices to consider to ensure a good user experience with your navigation.

1. For maximum compatibility, ensure that all menu items are text-based links of actual text and not images (which search engines can't read). Use CSS to style your menus.
2. Avoid relying solely on JavaScript or Flash-generated menus. (Again, search engines can't spider them).
3. Ensure your top-menu item labels hint that submenus are available. An inverted triangle next to the text will indicate to the user that a submenu exists.
4. Avoid using onmouseover events (i.e. hovering the mouse) to trigger submenus, since it causes accessibility issues for some. Use a direct click of the top level item to open the submenu.
5. Once a submenu is displayed, leave it onscreen until something is clicked.
6. Make sure the clickable target area for your menu and submenu items is large enough. The larger the clickable area is, the easier it will be to click. The clickable area should be the entire menu element block, not just the text.
7. Do not use submenus in submenus. Rethink your navigation if using submenus more than one level deep.
8. Using large two-dimensional drop-down panels can be effective in presenting a site visitor multiple navigation options. See the Jakob Nielsen study Mega Drop-Down Navigation Menus Work Well
9. Use icons in menu item labels to provide quick visual cues for the content type. Be careful not to over-clutter with images.

A few good drop-down menu examples

Google's uses a clean, simple and obvious submenu. Note that the item labeled "even more »" does not open another submenu, but instead opens a new page with multiple links display the additional options.

HGTV makes good use of large 2D panels to present submenus.

The BBC website avoids using drop-down menus at all! Very simple top-level navigation does not interfere with the site visitor getting straight to the news.

Secondary navigation is relegated to a well designed footer navigation structure. Note the grouping, hierarchy and separate sections used to visually guide the user.

Usability Testing

Lastly, it's really simple to perform at least some basic usability testing of your navigation. Simply observe a test subject's behavior when prompted to perform a given task on your website. If the user frequently selects the wrong item, or takes a longer than expected time to complete the task, it may be time to revisit and simplify your navigation.

If you've encountered particularly poor or particularly well done drop down menus, please add a comment to this post with the site's url.

If you'd like me to evaluate your navigation, check out the Free Website Evaluation offer we have going on our website.