Home > Web Designer Wall > The New Rules of Form Design

The New Rules of Form Design

Every day, we use forms for essential online activity. We fill them out to complete purchases; to sign up for email lists, social networks, and more; to participate in discussions; and to describe that oh-so-delicious looking photo of our lunch. It’s hardly hyperbole to say they’re the lifeblood of digital information sharing. For many years, however, with few improvements to be found, forms have been mired in working “well enough” but not exactly well. Now, modern techniques—when used correctly—allow designers to produce faster, easier, and more productive form experiences.

The sacred cow when it comes to form user experience is that shorter is better. And though this certainly seems logical—that less user effort will lead to higher conversion—this guideline fails to account for other factors such as which fields are used, how they’re designed, and how engaging the form experience is.

As one example, the study I found referenced far more than any other, quoted as gospel in slew of articles and presentations, was shockingly limited. Conducted nearly 10 years ago by Imaginary Landscape (an open-source web development agency), it shows how an 11-field form, cut to 4 fields, drove a conversion increase of 160%. But this was simply one page, one test, two variables. That’s it. Did they try different groups of 4 fields, for example? No. What about 10 fields vs. 11? 5 vs 4? Nope. In this one particular case, yes, cutting the amount of required information by 64% made the form easier to fill out.

In a presentation at Call To Action 2015, Michael Aagaard of Unbounce shared a study of similar focus. Tasked with improving lead conversion on a particular form, he first cut the amount of fields from 9 to 6. Conversion dropped by 14%. Digging into the research, he discovered that the most engaging fields to users were the removed fields, resulting in a less compelling experience. In round two, he tweaked the original form for clarity and organization, but kept all 9 fields. Conversion increased by 19%. Turns out shorter isn’t always better.

So, if it isn’t just making them shorter, how do we use modern technology to create the best forms? Let’s consider some new rules:

  • Prioritize Scannability
  • Provide Effortless Formatting
  • Limit Typing
  • Leverage Location

Prioritize Scannability

Jakob Nielsen told us long ago that users scan web pages rather than reading them carefully from top to bottom. Even when filling out forms—though their creators might hope for full attention—the same rules apply. Allowing for efficient, effective scanning is crucial to limiting errors or missed fields, especially when the form is intended to be filled out one time per person (ecommerce address forms, signup forms, etc).

Label Location

Much research has been done on label location, yet this debate endures. Form guru Luke Wroblewski writes of a study that determined top-aligned labels result in the shortest completion times, due to the reduced amount of eye movement needed. For forms with commonly understood labels, right-aligned is the next fastest, and recommended when page height is a constraint. Though left-aligned labels produce the slowest completion time, this style improves comprehension when the data requests are less commonly understood.

Hints

Placeholder text (a.k.a. hint text), on the other hand, is generally agreed to be the opposite of helpful. Including the label as placeholder causes it to disappear once the field gains focus, meaning the user can no longer view it. This causes strain on short-term memory and increases the chances of error.

Even if the label is separate, adding a hint suggests, at a glance, that the field is filled out. NN Group eyetracking studies, as one example, have illustrated how empty fields draw more attention than those with text, and that users are more likely to skip fields with placeholders than those without. In other words, supposedly helpful hint text within a field does more harm than good, and is especially problematic for scanners.

Good: an empty form field

Bad: a form field obscured with help text

In some cases, placeholder text is designed to be lighter in color than regular text, which may alleviate the above issue. This technique, however, creates a contrast problem, in that light gray text on white typically fails to meet the universally accepted guidelines for web accessibility (A ratio of 4.5:1 for normal text). In addition, according to the W3C, placeholder text is not widely supported by assistive technologies, making it more difficult for these users to fill out forms accurately.

Floating Labels

There’s a newer interaction design style—the floating (or adaptive) label—that’s rapidly gaining in popularity. In these designs, label text begins as placeholder text, then shifts above the field once the user starts typing, eliminating the aforementioned concern about disappearing labels.

Though this can help decrease page length, which is especially helpful on mobile, it does not address the aforementioned issue of text suggesting the field has already been filled out. As such, NN Group also recommends to avoid this practice, keeping the label above unless page length is of major concern.

Read Full Article

This article was adapted from uxbooth.com

admin
The WebRecital is a dedicated User Interface/User Experience professionals who come together to provide design and research workshops, portfolio reviews, and educational outreach to the greater Seattle area.
http://webrecital.com/

Leave a Reply

Your email address will not be published. Required fields are marked *