When you’re knee deep in web technology as I am, you sometimes can’t help but think about how to bring innovation to the work you do. A lot of what the UD team does revolves around donation forms, giving forms, the “ask” string, membership renewals – and a few variations of the same thing. It’s age old problem: connecting with people and encouraging them to take the big step and pull out their wallet for your cause.

So what does the 2.0 of this look like? A lot of client/partners have leveraged things like social networking, widgets, Flash, and even a refrigerator metaphor! Aside from those innovative approaches, I think the basic donation form still has a few more miles on it. I think the best treatment of form design is Luke Wroblewski’s article on Web Application Form Design. Keeping the primary action clear can be quite a challenge on a form as things like premiums, sustained giving options, and other widgets require a user’s interaction. On top of that, throw in the wealth of personal information (and the corresponding labels) you need in order to process the donation, the challenges are numerous.

And these days, there’s a whole array of mobile platforms to design for. Treos, Blackberry, and iPhones, oh my! How can we balance function and minimalism?

Okay, that’s the problem, what are some best practices? Here are some factors I think can contribute to a great donation form:

• Left-aligned field labels - donation forms are more than just name and credit card number. We have a lot of non-standard labels like installment plans, payment levels, opt-in interests, etc. So, the goal here is to maximize scanning between label and widget. Left-aligned labels do that the best.
• You can always scroll – with everybody comfortable with the scroll wheel, having a design go past the fold a bit is ok now. Traditional web design dictated that everything important be above the fold. But with a continuous form, it’s now okay to bend the rule a little.
• Two-column design – this is the best way to get a donor to know the kind of information they need to provide. We like to put the basic information like name, address on the left, and things like the “ask” string and credit card information on the right.
• AJAX submission – I think submitting a form via AJAX makes more sense than doing inline AJAX validation. Often inline validation doesn’t work well for things like credit card numbers. It’s also easier to notice/fix things at a confirm step, such as a mistyped honoree name. Having to repost from the confirm page to make changes is painful. Instead, show the confirm page via AJAX, and give the user the ability to go back easily without having to fill out their form again.
• Dynamic display of elements – this came up on the discussion forums recently. You can display things like sustained giving, honor/memorials, gift membership, and such dynamically on a single form, rather than have separate forms. We really like that idea and are interested to hear what folks things about this approach.

Those are our thoughts. Chime in with your thoughts…we’re eager to hear what you think.