I was recently involved in a project where there were two multi-select lists involved, with a big number of options – around 300 in each.

These things are a usability nightmare:

• The user has to ctrl-click to select multiple options (‘where’s the central key?’)
• A stray click will unselect everything already selected (Critically important on a site sign-up form)
• They are just plain ugly

So the workarounds I’ve been trialling?

Jquery multiselect plugin – Very nice plugin that solves all three of the problems above. One problem however – it was taking over a minute for my page to load in Firefox!

Interestingly, Chrome displayed the page in under 5 seconds. Guess that new javascript engine is a fast as they say…

Half-assed Jquery solution I cobbled together for fun – This lets the user use a single click instead of a control click on multi-select lists. Solves problem one and two, problem three would still need someone with more artistic leanings working on it. Oh, and it doesn’t work in IE. Told you it was half-assed.

Current favourite option – A div with overflow hidden, full of checkboxes. Sort of solves the main problems, but still not ideal.

How would you deal with this interface problem? I’d love to hear your suggestions.