I recently had to do some work on the recruitment system and as part of it decided that we were overdue for the redesign of a key data entry form. The form itself is a critical form for the entire system - it's the one that manages the recruit's biographical information.

As we were developing the system. we kept finding more and more fields that needed to be added to the form. That's never a good thing when you're trying to balance functionality and usability without putting things in yet another tabbed panel. We've been hesitant to redo it because there are some who are very (how shall we put it)...resistant to change. especially when it comes to a key feature like this. I figured I better go for broke and build it. get them to review it. then roll it out. Unlike the dudes at 37Signals. I do tend to run things by users before dropping wholesale changes on them :-)

Here's the old form:

Hopelessly ugly - and desperately in need of a bit of design work.

Using some of the techniques I blogged about on Monday. I was able to clean up the form and make some pretty significant improvements. Behind the old form was a 3 column table. The new layout is pure xhtml/css using label elements extensively. I also took this opportunity to make the required fields even more obvious.

They're meeting to discuss the cosmetic change today. If they approve (which I'm sure they will). we'll probably launch it tonight. One template and a few hours can make a heck of a difference in usabilty!