This article is an excerpt from Chapter 1 of the SitePoint book Fancy Form Design,. If you’d like to read more you can download the sample PDF, containing the first 2 chapters of the book, totally free.
Before you dive into building your form, it’s important to do your homework first. Forms are powerful, but without proper planning and design, they can make tasks overbearing or difficult. It’s also good to look around for inspiration, for both the interaction and visual aspects of form design.
In Fancy Form Design, we work through the concepts in the book by building a fictional social networking site, Fit and Awesome, for people that are into health and fitness. Members of the Fit and Awesome community will be able to store their statistics and training journals on the site, and share their fitness goals and activities with other members. Naturally, a site like this will require a number of different forms and widgets—there’s plenty to sink our teeth into here!
Take a look at what web sites and applications similar to yours are doing. It’s an ideal way to understand what’s successful in other sites or to work out what fails to perform. If you’re designing a social network, check out other social networks. How do different companies handle editing a profile? Or privacy settings? If you’re working on an ecommerce web site, take a look at some of the successful competitors. Is their checkout process quick and easy, or is it tedious? Do you find yourself entering the same information over and over again?
As you’re looking at competitors, take note of issues you come across as you try to use their product, as well as what works well. This information will be helpful in your brainstorming process. Look for possible areas of innovation while still considering established conventions; examine the reasons why a technique is effective or not.
In Figure 1, “The registration screens for Gimme20, SELF, Fitness.com, and Fitness Magazine”, I’ve collected the registration forms for four different sites—Gimme20, Fitness Magazine, Fitness.com, and SELF Magazine. Each form has different features, questions, and interface elements, all of which are useful to consider.
Desktop software can be a worthwhile place to look for inspiration. These days, more and more web applications are beginning to look and feel like software. This can be good or bad—a poorly chosen desktop widget could confuse a user, and there are some interactions that just work better on the desktop than in a browser. When you’re thinking about including a desktop-like widget in your site, try to be sure that you’ve chosen it because it’s the right tool for the job, rather than because it’s fashionable in desktop applications. Consider whether it’s necessary. If you could do without it, chances are that you should leave it out.
Figure 2, “Microsoft Word’s view size menu” shows the view size menu in Microsoft Word for the Mac; in many ways it resembles a regular select menu, which is hardly notable, but the range of choices and the order in which they’re arranged could be a useful technique to emulate or improve upon.
Shown below, in Figure 3, “Coda’s new site panel, with collapsible sections”, Coda’s new site panel uses a series of collapsible sections to help a user make more sense of the various requirements. The form itself occupies only a small amount of space, and makes use of a scroll bar at the right. These are both suitable ways to help make sense of a larger form.
Jina BoltonJina Bolton is an interaction designer at Crush + Lovely. Previously, Jina worked at Apple, Inc. as a visual interaction designer and front-end web developer. Jina Bolton is a visual interaction designer in Silicon Valley living in San Francisco. She is a co-author of The Art & Science Of CSS and holds a BFA in Computer Arts and Graphic Design from Memphis College of Art.
