Post Image

Web Form Design Best Practices: 5 Useful UI Patterns

by
Ben Gremillion
Ben Gremillion

From a technical standpoint, forms are easy. A dollop of HTML, a dash of CSS, a serving of your favorite back-end code, and you’re ready to go. But your users aren’t.

User experience requires more than good-looking visuals with robust code. They need to guide users along a path, hint at what’s expected, and deliver on what’s promised.

People don’t use forms for the fun of it. Whether it’s to get information, sign up for a service, or buy a product, they want results for their efforts. The best forms guide users along with minimal fuss.

Here are 5 effective UI patterns for improving UX and conversions.

1. Mad Libs Forms

OKCupid

image14

Oscar

image04

Problem

Entry fields are too vague or too mundane.

Solution

A fill-in-the-blank format provides context to the information and lightens the mood. This style adjusts to natural thought processes, rather than appearing like a data-collection machine. Mad libs are more relaxed and explain the function clearly to avoid confusion, especially compared to single-word descriptions of other form fields. They also provide the opportunity to showcase your site’s personality. Studies even suggest this pattern can lead to an increase in conversions.

Tips

  • Underlining the input field is more natural and informal than a form box, reminiscent of mad libs and other games.
  • Phrase as a first person narrative, or as the user’s command to the system.
  • While this pattern adds life to standard data entry like sign-ups, it can have the opposite effect with too much information. If you need more than a few sentences, a more traditional form field strategy would be faster.

2. Forgiving Formats

Airbnb

image00

IMDb

image07

Problem

It’s unclear which format to use for a form field.

Solution

Accept multiple formats.

Forgiving formats provide users a great deal of freedom and convenience, reducing the likelihood that they blame themselves for the system’s UX shortcomings.

Tips

  • Typically, this works best with in-line hints so the user knows they have options. You can bypass this step, however, if the input hints add unnecessary length. For example, Airbnb does not include input hints since writing “ZIP, Country, State, Province…” etc. would defeat the purpose.
  • Works great for logins, where users can choose between their username, email, etc., depending on which is easiest for them to remember.
  • A must for database sites (like IMDb), which specialize in different categories of content.
  • Verify with your developers whether the scope of information is narrow enough for the system to handle.

3. Stepped Forms (Wizards)

Amazon

image08

Problem

A service or function requires a large amount of data input.

Solution

When there’s a large amount of data entry, as with certain services or purchases, break up the process into smaller sections presented one at a time. As recommended in Interaction Design Best Practices, this makes inputting much more manageable, even though it’s the same amount of information.

Moreover, sometimes early data influences later data. For example, choosing between international or domestic delivery will change the shipping options. For these situations, a stepped form creates the right pace by preventing unnecessary information.

Tips

  • Use the completeness meter pattern (described next) to show users how long the total process will take.
  • Large amounts of input are taxing on users, even with the stepped form. Eliminate any data that isn’t necessary, and keep the number of steps to the bare minimum.
  • If your form requires 5+ steps, consider adding a “Steps Left” pattern to show how many remain.

4. Completeness Meters (Progress Bar)

Quora

image03

UXPin

image13

LinkedIn

image12

Fitocracy

image10

Problem

The user is anxious about how long certain processes take, and may leave because it’s taking too long.

Solution

Inform users of progress with a completeness meter.

Completeness meters are commonly used for:

  1. Onboarding/tutorials
  2. Profile completion
  3. Form completion
  4. eCommerce checkout

Percentages or number of steps are standard, although there’s room for creativity. LinkedIn, for example, gives nicknames like “All Star” to match the amount of the profile the user filled in.

Completeness meters alleviate user concerns about time commitment, and incentivizes them by creating a sense of “incompleteness”.

Tips

  • If your metric is the number of steps, try phrasing such as “Step # out of #” to concisely tell both how many steps there are total, and how far along the user is at the moment.
  • If the amount of steps is daunting, consider sub-steps. For example, Amazon’s checkout completeness meter lists only four steps (“sign in,” “shipping & payment,” “gift options,” “place order”). However, the “shipping & payment” step breaks down into three smaller steps.

5. Emphasize the Benefits

Problem

So your site or app has convinced people to act. That’s great, but users are a fickle bunch. Smart forms find subtle ways to remind people why they’re providing information, even as they do so.

Solution

Add messaging to the form that reminds people what they’re getting at every step. You can do so with instructions — “fill out this form so we can mail you a free gift” — or with the UI itself.

Tips

  • Put messaging into buttons. For example, if your form signs people into a service, say “join us” instead of merely “submit.”
  • Keep messaging short. People who’ve decided to fill out the form often gloss over instructions. Try to keep the promise to one sentence.

A Practical Example

Now it’s time to put these techniques into practice. In this lesson we’ll tackle a common design problem: convincing users to fill out a form. We used UXPin to build out the medium fidelity prototype below, although the concepts apply to any design process or tool.

With the medium fidelity prototype below, our goal is to create a smooth flow of content on the form – pixel perfection comes later.

1. Choose the right fields. The less effort people have to expend, the better. For example, use “name” instead of separate “first name” and “last name” fields if your database allows. In this case, we ask for three things: their name, email address and what they want to learn.

image02

2. Spell out the benefits with copy. Even if the user arrives knowing what they’re after, reiterate the “Sign up to receive helpful productivity tips every week” is stronger than “sign up to receive our newsletter.” Notice that even the submit button reinforces the benefit, not the action.

image06

3. Don’t hide anything — but don’t overwhelm. People appreciate knowing that there are no hidden fees, unintended product signups, or other gotchas. Walls of text will impede signups.

image11

4. Simplify and clarify. Spell out what’s expected in each field while removing labels from as many form fields as you can.

image09

5. Flesh it out. Once you’ve iterated with feedback from your team and client, turn your wireframe into a high-fi prototype with colors and typography. Notice that we’ve waited until this point to use the “mad lib” technique, and have filled in the text fields, making them less mundane.

image05

6. Follow up with a great “thanks!” message and, if possible, an extra gimme to keep them engaged. “Here’s your first tip … ”

image01

The result? We now have a visually engaging form that indicates what formats users should use, all in a two-step signup process. Cheers!

Conclusion

There’s more to form construction than code and visuals. Best practice is to put the steps in context, simple messaging, and generally convincing people that using the form is in their best interest.

In the end, it’s about making decisions that make things easy for the user. Forms that convert are forms they don’t mind.

Join the world's best designers who use UXPin.

Sign up for a free trial.
Ben Gremillion

by Ben Gremillion

Ben Gremillion is a Content Strategist at UXPin. He’s worked as both a web designer and a back-end developer. On the side he builds and maintains a CMS for webcomic artists, and participates in annual NaNoWriMo challenges.

Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you