Checklist for Custom Form Controls in Your wep App

Recently I had a privilege of reviewing a web app that is directly relevant to my work field. It is in fact an iteration on the system we are actively using at the company. After having a poke here and there, I was surprised to find that the custom controls epidemic was not over for some people.

All popup menus on the system (all select elements) were implemented as custom HTML controls with custom event handling. I hate this kind of thing not because it doesn’t look like a native control - this is in fact secondary. Most of the apps I use daily (Flame, Smoke, Syntheyes, Nuke) do not use the native UI controls at all.

What I hate is a substantial reduction in useful behavior compared to a native control. There is a load of stuff humanity has put into menu implementations for the past 40 years. Every custom select implementation is bound to be reinventing the wheel, in a bad way.

Imagine you are all giggly and want to make a custom select element - a menu. Or your boss does not get UX and lives in the art-directorial LSD fuckfest of the late nineties, and absolutely requires a custom control. Alright then, roll up your sleeves.

Your mission with such a control is to make something that satisfies the art direction requirements (I will not open the can of worms questioning how sane an art director wanting a custom select is), but at the same time is discoverable using the standard operating system idioms. And usable. Let’s hit it:

Your custom select implementation must:

• Be tabbable and atomatically obtain a tab index
• Open the menu positioned so that it does not end up off-screen unless it has to
• Resize the menu to it’s longest item, outside of the parent element
• Allow the opened menu to be semi-collapsed if it’s near the edge of the screen and some items do not fit
• Respond to typing the beginning of the text in the menu item.
• Respond to arrows for going up and down the menu item once it’s activated, including cycling
• Respond to “Enter” and “Return” keys that activate the popup
• Respond to “Enter” and “Return” keys to activate the selected item and close the popup
• Not close when the mouse is moved outside of the popup area while the popup is open
• All of the above on all supported browsers
• Activate the right selection menu on touch devices (you have a touch-friendly site right?)

On top of it it has to look like a menu that you can use as a menu (should be discoverable), but since this is an artistic requirement we will assume that your clueless art director already took care of that.

This is just a small list of what the OS does for you, for free. Have fun implementing these and see you in a week or two. Or, if you are a sane person, say “fuck it” and go make features that can make your app really shine. And use a friggin’ select.