HTML & CSS
Article

The Foolproof Form Design Formula

By Jina Bolton

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.

Research and Finding Inspiration

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!

Perform a Competitive Audit

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.

Figure 1. The registration screens for Gimme20, SELF, Fitness.com, and Fitness Magazine

The registration screens for Gimme20, SELF, Fitness.com, and Fitness Magazine


Use Software as Inspiration

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

Microsoft Word’s view size menu


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.

Figure 3. Coda’s new site panel, with collapsible sections

Coda’s new site panel, with collapsible sections


No Reader comments

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Front-end, once a week, for free.