One of the most common tasks that I struggle with on a frequent
basis is the effective design of web input forms. Strangely,
even though I am often frustrated by the difficulty in creating
these forms, I thoroughly enjoy the process. A bit of a
disclaimer; I'm no expert at this, but believe I am learning to be
an expert as I work with these elements on a daily
basis, on a variety of websites, and with a few people who
are very talented in this area.
Most recently, for our reference implementation of our Umbraco based
content platform (planetmold.com), I set out to design a brief
form that mold professionals use to 'claim' a listing on the planetmold.com
site. Initially I set out to simply represent the data
elements as simply as possible. Next I sat down to sketch a
landing page that would reduce the number of steps required to
'claim' a listing to the absolute minimum.
At this point I realized this was a terrific success - only two
required fields! - but it also wasn't going to work. So I sat
down with my favorite landing page design guide and revised
again. See, I neglected to factor in two of the requirements;
1) users must log in using Windows Live ID and 2) users must submit
payment via PayPal for paid listings. If you're familiar with
either of the these processes you'll know that these requirements
really mess with an effective design - namely because they send the
user to 3rd-party sites.
I should note here that even though my initial forms were not
optimized in any way they weren't wholly ineffective. We did
see more than 100 mold professional complete the process on the planetmold.com
What I've come up with is the following - shown here without the
final styling. It has the required elements, an additional
field for categorization (based on feedback) and an option to skip
the PayPal process if you have a Promo Code (pretty much everyone
should have a code, if not let me know). The Windows Live ID
sign in process remains at this point.
My next step is to take this basic design (which has been quite
successful in terms of the number of mold professionals who
complete it) and apply an appealing style to it for use on the planetmold.com
landing pages. It's a process I enjoy and one that adds value to
these sites, and to my education.