I was originally going to write this up in the style of an A List Apart article with lots of detail, but I am going to try to stick with a more tumblelog-friendly version.
Sometimes when I’m designing a user interface, I feel that the standard form controls don’t give me enough flexibility for coming up with a good solution. Or I feel that if I did use only the vanilla controls, the presentation would be cluttered and intimidating to the user. With some CSS and simple Javascript (and optionally, some Photoshop chops), our only limitations are our imaginations.
Take this common pattern: you’ve got a few categories where users can pick any number of options within it. This screenshot is from a recent project I worked on. The user can choose any number of colors from a bucket of over 50 of them.
There are also similar choices for garment type and design style, so having all of these presented at all times would take up tons of screen space and would be frightening to many users. The solution I chose was to only show those dozens of checkboxes when the user wants to update their choices. Otherwise, the panel is hidden.
This way, the user can still see which options they have chosen without having to visually parse all of the checkboxes for their checked state. In addition, we’ve saved a huge amount of space.
That was a sort of extreme case, but this concept can even be helpful on a smaller scale. Here is a case where we’ve got five categories for a search filter and each one has a handful of options. The search interface is quite full-featured, but remains clean by hiding the numerous choices until requested.
Opened:
To build something like this, you just need to design the entire control in Photoshop (or the like). You’d then cut it in half to create a bottom piece like this:
The top piece is then lengthened height-wise to accommodate additional text in the control.
The dropdown toggle - 
- is just overlaid over the whole thing on the right. This is linked to a Javascript call to toggle the options panel. After clicking the save button, the label for the closed dropdown should be updated immediately with the updated choices.
To learn more, feel free to try the example and dissect the code.
Do you Digg?
