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:

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.