What Makes a Web Form Irresistible and Easy-to-Use?

Mike Ibberson on Apr 04, 2017

Almost every website uses forms. For generating leads, initiating contact and fulfilling purchase orders, everything begins with user input. That said, the form often (undeservingly) receives less attention than other elements of a website during the design and development phases. Considering it’s the pinnacle of a user’s interaction, all design choices should work towards getting the user to that form.

Although appearances affect how and when users choose to interact with a form, we’re going to focus on larger principles in this article instead of details like colour and font selections. These will provide the building blocks for a successful form, allowing webmasters to then style their forms more effectively afterwards.

Where Is the Best Position for a Web Form?

The location of your form impacts its visibility. The sidebar is a common space for it; however, your visitors are likely aware of this convention, rendering it ineffective. We won’t spend much time explaining why the sidebar doesn’t work, but it relates to banner blindness. Conventionally, sidebars are reserved for ads and navigational elements—not conversion points.

Heatmaps in support of the banner blindness theory.

There’s great debate over leading versus ending with a conversion form. Some vehemently argue that the form should rest above the fold (the scrolling point) while others believe it should proceed the content. The arguments follow as such:

  • Leading with a form ensures its visibility;
  • Leading with a form gives a convenient conversion point to those ready to convert;
  • Leading with a form can intimate users that aren’t yet action-ready;
  • Ending with a form creates an informed user, having served all essential information before requesting an action.

Some sites compromise with anchor scrolling—a button above the fold that scrolls to the bottom form. Doing so balances the pros and cons above.

Another position for forms can be a modal. However, pop-ups are intrusive and can frustrate users who can’t figure out how to close them. Perhaps, modals are better last-ditch efforts to capture information (i.e. newsletter subscriptions and promotion signups when users exit).

Amazon autofocuses the first field in the registration form.

Relating to modals, some designers like to autofocus HTML input fields. Amazon does this during its registration process quite effectively. Really, the only appropriate time to use autofocus is when the form takes the centre stage; otherwise, it can lead to usability blunders. Disabling common keyboard shortcuts in the browser is one such blunder.

Descriptions Should Act More Like Instructions

Your labels affect the persuasiveness of your inputs. Form titles and labels must be concise and punchy—just a couple of words that prompt an action. There should never be ambiguity surrounding what information the form expects.

Despite the importance of labels and field descriptions, designers commonly stuff these details into placeholders to save space. While a visual win, this strategy comes with a few caveats:

  • Placeholder text challenges a user’s short-term memory because the description disappears as the user types;
  • Some users mistake placeholder text for real data, leading them to believe the form is complete and no further action is required.

Placeholder text provides a clean UI experience, but sometimes the cost of that UI is great.

Submission Text

The most important description appears in the submit button. Non-actionable words like “submit” or “continue” have been criticised in numerous usability studies for being too lackluster. We won’t link to them because there’s so many.

Inline Form Validation Messages

Inline form validators indicate when a field contains unacceptable data. A thought-provoking article on Medium uses the term dirty—so we’ll use that moving forward.

Essentially, there are three ways to mark dirty input fields—on focus, off focus and after submission. Focus refers to the state of the input; when the user clicks on it, the field focuses in. Validating at this point doesn’t give the user a chance to fill out the information. Validating afterwards, though, gives the user the opportunity to make a mistake.

Regardless which focus state the form listens for, too much inline validation can lengthen the completion time of a form, contributing to higher abandonment rates.

A form should always display validation errors on submission too. Should something go awry, the user needs to know where. Real-time validation is not always reliable, so submission checking is essential. For example, required fields are often verified in this way.

Twitter Input Indicators and Inline Validation

A screenshot of Twitter’s inline validation messages and input indicators.

Input Indicators

The above screenshot exemplifies a use for an input indicator—password strength. When there are minimum requirements for a field, letting the user know them with a small progress bar or checklist can markedly improve the chances he or she will successfully fill out that field. Checklists are common below the field but consume a lot of space.

When to Add Custom Interactions to a Web Form

A nice form can still be challenging to complete. Optimizing a form deals with much more than just labelling correctly and placing it in a good spot. Even once engaged, users can still drop off and abandon the form. Thus, a successful form needs to reduce completion barriers as much as possible.

Easy Inputs

An effective way to take the burden off a user is to make data selection easy. For example, consider a simple Date Picker prompt. Rather than asking for three different fields—day, month and year (possible times too)—there’s only one selection necessary.

Custom Form Interactions

An example of a Material Date Picker.

A similar logic applies to selects (dropdowns) and radio buttons. That said, a select works best with 15 options or less and a radio with under five. Anything more, a regular input field becomes preferable. If you want to get fancy, then maybe a hybrid text/select field with auto-predicting.

Animations

Animating parts of your form can draw the reader’s eye and guide them through the fields. Animations can breathe new life into stale form patterns. That said, use animations sparingly. A good example includes the shake effect on incorrect user inputs. Such an animation enhances usability. Additionally, submission effects can reward users and indicate submission successes and failures.

Multi-Step Forms for Streamlining Data Entry

For lengthy forms, breaking the fields into multiple steps can positively affect conversions. Rather than asking for everything up front, posing the lowest friction questions first can ease users into the form. For multi-step forms, it is imperative to use a progress bar or counter so that the user (a) knows how far along he or she has gotten and (b) the approximate length of the overall form.

Multistep Form Example

A gorgeous multi-step form demoed on Tympanus.

Previous Post
Next Post