If you've ever signed up for something, you've used a form.

Forms collect info from people in exchange for access. Seems pretty straightforward, but when it comes to writing form UX, there's an art and a science to doing it right.

Forms most typically show up in the sign-up experience. It’s, as it sounds, when someone signs up to use your product. A form looks something like this:

form ux
Image credit: UX Planet

For a communication vehicle to be a form, there has to be something to fill out.

Forms can be super short, like this:

forms ux
Image credit: Instapage

Or they can be super long, like this:

form ux
Image credit: givelify

Long forms create a poor user experience, which we’ll dive more into shortly.

Why does form UX writing matter?

If you’re like most people, you hate signing up for things. I sure do. Everything requires an account nowadays, so much so, we live in a world with password managers.

When someone is signing up for something with a form, they’re giving you their time, energy, attention. And that’s a big deal.

People don’t go looking for opportunities to hand over their email and private information — they only do so if the opportunity is worth it and will yield a solid return on investment.

Signing up is a hassle, and it’s our responsibility to make sure the commitment is worthwhile for the user. If it’s worthwhile, they’ll stick around and be happy users. If it’s not, they’ll churn and have a bad memory of our product.

And this all starts with the sign-up form, so as you can see, it’s pretty darn important.

How do you make sure the commitment is worthwhile for the user? You can start by designing an effective form…

What makes form UX writing effective?

Effective form UX writing:

Effective forms use progressive disclosure

Remember progressive disclosure from UXW#23? It’s the technical term for when I talk about how everything is an onion.

As a refresher, progressive disclosure discloses information in a sequence of logical events, not all at once. Using progressive disclosure helps you convey one task at a time, which is pretty critical for creating effective forms.

It’s important to disclose only a few tasks at a time in forms, so you keep the cognitive load, or the amount of information that working memory can hold at one time, manageable.

For example, here’s an example of a long form with a high cognitive load:

form ux

Because all the questions are asked all at once, it’s a lot to fill out, and there’s not a clear reason why they need certain information, like our birthdate.

Now, applying progressive disclosure, we can break out this form into 3 separate steps:

form ux

Here, I chunked the content into tasks:

  1. Sign up
  2. Create an account
  3. Get a birthday gift

By chunking the content into different layers of the onion, so to speak, it’s easier for someone to make a judgment on each step.

Speaking of making life easier for people…

Effective forms show progress

Have you ever signed up for something and had no idea when they were gonna stop asking you questions? It asked question after question, and you eventually dropped off because you have a whole day to do.

There’s an easy way to avoid people (reasonably) dropping off like that — showing progress, and it’s the perfect complement to progressive disclosure.

We’re going to deep dive into communicating progress in UXW#32, but for now, when you show progress, you show where someone is in the process of signing up. Kind of like the “you are here” mall map we talked about when learning the “visibility of system status” heuristic in UXW#18.

This is just that — keeping users informed about what’s going on through appropriate feedback within a reasonable amount of time.

Showing progress is important because it keeps users motivated and helps them set expectations for what the next number of minutes looks like.

Here’s how we could show progress in our foodie example:

form ux

By adding “Step X or 3,” we let the user know where they are in the journey and how close they are to the end.

Another way to show progress is with a progress bar, like this sign-up form does:

form ux
Image credit: bbbootstrap.com

Effective forms are crystal clear on what’s in it for the user

Again, filling out forms isn’t something people enjoy doing. There has to be something in it for them, and it must be worthwhile.

Continuing with our Foodie example, our latest version doesn’t offer any incentive to sign up:

form ux

We need to spell out why someone should sign up for Foodie, what they get out of it, and why they should continue every step of the way. Here’s what that looks like in action:

form ux

By putting the benefit to the user clearly stated on each step in the form, it becomes clear what’s in it for them and why they should continue.

This may lead to the user not feeling like the benefit is worth it, and that’s OK. It’s better to be upfront with the facts and let the user decide for themselves than force them into an experience that doesn’t align with their expectations.

Effective forms erase hesitations and lingering questions

We’re getting somewhere, but there’s more we can do. Our current iteration still leaves you with some hesitations and lingering questions, like:

  1. What time do you email me the recipes? Does it make sense for my schedule?
  2. Will you also send me marketing emails, or just this newsletter?
  3. What if I don’t want to create an account?
  4. Why do you need to know my gender to give me a birthday treat?

This is why it’s important to erase hesitations and lingering questions in forms.

There are 4 questions on the top of our heads that are all reasons to not complete the form. Here’s how we can resolve them:

form ux
  1. What time do you email me the recipes? Does it make sense for my schedule? Resolution: Add they’re emailed at 4pm ET daily
  2. Will you also send me marketing emails, or just this newsletter Resolution: Add a separate marketing and promotions opt-in
  3. What if I don’t want to create an account? Resolution: Add a “skip” option
  4. Why do you need to know my gender to give me a birthday treat Resolution: Note gender as optional

By answering these lingering questions, we erase hesitations, and make it that much more incentivizing to complete the sign-up process.

There’s one last thing we can do to make a delectable form…

Effective forms have specific, actionable calls-to-action

Right now, the calls-to-action in our journey aren’t as clear as could be:

form ux

“Sign up” makes it sound like there’s nothing coming next, “Next” doesn’t tell me anything about what’s coming, and “Create account” doesn’t have much to do with getting a special recipe on our birthday.

Specific, actionable calls-to-action are the thread that stitch together usable, easily-understood forms. With a clear string of calls-to-action, a user can easily get confused as to what hitting the button actually does.

Here’s how we can make the calls-to-action in the Foodie example specific and actionable:

form ux

It’s important to utilize “Next” to note the continuation of questioning, and together with the context of what’s coming, it becomes crystal clear to the user where they’re going next and this isn’t the end of the road. We end using “complete” in the CTA to make it clear the user is finishing the task.

Good examples of form UX writing

Shopify

form ux
Image credit: Dropship Academy

This form from Shopify is successful because it’s very clear why you’re filling out the form (to start your free trial) and what filling out the form accomplishes (creating your store.)

That said, Shopify could enhance their form in two ways:

  1. Adding the benefit of creating a Shopify store — what will the user gain from the trial?
  2. Disclosing if the user can change the store name later to eliminate hesitations and naming paralysis

Basecamp

form ux
Image credit: Chanty

Basecamp’s sign-up form hits on most of the things:

  • It sets expectations that it’ll be “quick” to set up your account
  • It shows progress and how many steps you’ll go through
  • There are no lingering questions or areas to have hesitations about

That said, if Basecamp made a more actionable CTA and explained why they need this info, it’d be a five-star sign-up form.

Bad examples of form UX writing

Stripe

form ux
Image credit: arengu

Stripe’s sign-up form is unsuccessful in many ways:

  • It gives you no expectation of what’s to come, giving you hesitations
  • It doesn’t communicate progress
  • It has a dark pattern email opt-in
  • They’re benefits bullet points list features instead of what’s in it for the user

What Stripe does well is they have an action-oriented CTA. They might use progressive disclosure, but it’s unclear looking at just this one screen.

Notion

form ux
Image credit: arengu

There’s very little to Notion’s sign-up form. You have no idea what comes next or what’s in it for you, leaving you with tons of unanswered questions and hesitations.

They do have a specific, action-oriented CTA, though, which is good.

Notion could improve their sign-up form by simply changing the header to something more benefit-oriented, like, “Start organizing your life,” and adding a progress indicator.

Microsoft Teams

form ux

This is actually the first screen you see when you go to sign up for Microsoft Teams. There’s no convincing going on here done by Microsoft, and it feels like they expect users to sign up without sharing what’s in it for the user.

Microsoft also doesn’t indicate progress, share what steps are to follow, or utilize an action-oriented call-to-action.


If you're a member of the Architect's Edition(+), let's make this click… Apply what you learned about writing forms in EX#16 👇

If you're a member of the Architect's Edition, head to the next members-only lesson, UXW#30: How to write labels.

Otherwise, hop to the next free lesson, UXW#31: How to write placeholder text.

Happy UX writing 🖖