Putting the Form in Uniform

Despite their major role in the web experience, forms are frequently overlooked. Whether it’s a contact form or a log-in panel, form styling often falls short of the mark. The style of your form should coincide with the style of your web page. This continuity will improve the quality of feedback you receive.

First, ask yourself these questions: “Who is going to be completing this form?” and “What is the most important data I wish to obtain?” Users don’t want to be burdened with typing a lot of information. Be tactful if you decide to force users into completing a form, as you may risk losing their attention.

Simplify your form to its most basic level

• Ask only for essential information. Review a form several times to eliminate unnecessary requests.

• Consider breaking a form down into shorter steps if instructions seem too verbose. Keep in mind: Users prefer not to think, and lengthy instructions require thinking.

Version App’s purchase form is condensed by grouping related fields
and setting field values as each corresponding description.

Gathering accurate information is critical, and you should strive to achieve this while requiring the least amount of work from a user. Guide users to submit valid information, avoiding any potential mistakes.

Obtain valid information from your user

• Tool tips are an excellent way of providing users with hints for completing forms.
• Empty space around a field can be used to depict examples.
• Auto format fields with special characters (phone numbers)
• Require users to repeat an entry (passwords/email addresses)
• Don’t forget to validate!

Wishlistr’s registration form provides tips in the far right column
and displays an error message below for invalid field entries.

Aesthetics

• Practical use of shapes, patterns and hard edges are great ways to direct the human eye.
• Eliminate clutter by limiting visuals and spacing elements appropriately.
• Graphics are sometimes more distracting than helpful, so remember that excess space can lend to good structure.
• Consider placing focus only on the contact form (lightbox effect), and making irrelevant content appear out of focus.

Grooveshark’s registration form is a pop up that sits on top of a black mask,
hiding the page content that lays beneath.

It’s no surprise that web users find forms to be a nuisance. It is your job to reduce the user’s workload and successfully obtain valid information by minimizing the chance of human error. With thoughtful form design, we facilitate clarity in communication, resulting in a pleasant user experience.