I was on a mailing list today, and this came across:

“Use red asterisks — they’re the standard for showing required fields.”

Standards are wonderful, but if I asked my mom with is the international symbol for a required field, she would look at me like I was on drugs (not much different than today, but still).

This was something even the great Jared Spool mentioned at an event as gospel, and showed an example in his PowerPoint (which I still haven’t received, but that’s another blog post). He was explaining how another client had used asterisks to show optional fields.

Here’s a few truths about form design that I’ve discovered in my time by testing actual users.

Most forms are hard to read.

Does anyone find it interesting the note for required fields is after the fields?

There have been a few books and web posts, but for the most part, web form design hasn’t changed that much since 1996. Form fields are left on a white background with a grey line around them (some sites, like this WordPress blog software I’m using, has a lighter grey line around the form fields for design purposes).

On some sites, form fields are in columns so they’re next to each other so the user really has to work at it.

Given eight form fields, users will fill out all eight.

I’ve run countless tests, and the result in most of them is users will try to fill out every single form field. This includes  the second address field we all know so well even if they don’t have a second address.

Form fields are one of those things that users expect to fill out every single field, because they don’t want to have to figure out error messages when they are wrong. Because they have been trained that most web forms are ineffective, they do as much work as possible (bad solution number 1) or walk away (worse solution number 2), leaving either a frustrated user, a lost sale, or both.

The red asterisk, and even the explanation text that reads “Required fields are marked as (*)? No one’s going to read it.

It’s usually at the top of the form, in line, and all users skip it right to dig in. Users rarely read instruction text, and because most form design is so poorly thought out, users rush through it to make it as painless as possible. Users need visual cues next to the field or at the field they are working on, not 300 pixels (at least) away.

Additionally, the Required Field line is usually small and hard to read (read: Designers License), so in the grand scheme of watching users browse the site, they skip right over it.

A solutions to the required field paradox

Disney Shopping

This was a solution we used at Disney Shopping: the word Optional was placed to the right of the field, and required fields were colored yellow so users could spot them.

I’m using this particular design pattern on other sites because at Disney Shopping and a few other sites I’ve worked on, this is the design pattern I’ve enforced. It’s simple, doesn’t interfere with the form because error messages are usually below the form field, and it’s easy to scan for it.

Why am I enforcing it?

Because changing it from the asterisk to this example, form completions are up, across the board. We’ve tested it, and it works.

Any questions?

Similar Posts You Might Like

• QuickTip Sundays: Mac And Jac
• CMS Fridays: Documenting Content Types
• CMS Fridays: Do End Users Really Care It’s SharePoint?
• CMS Fridays: Site Maps Vs. Meta Data Information Architecture
• CMS Fridays: First Take On BuddyPress

Trackback URL | Comments RSS Feed Both comments and pings are currently closed.