Building Great Form Experiences

Introduction #

This is the first post in a short series on building great form experiences in React (web) and React Native (mobile). In this post I'll cover the subject at a high level and set the stage for a more detailed deep-dive into implementing some of the suggestions contained herein.

Context #

It wasn't too long ago that the internet was simply a huge collection of static content, hyperlinks, and forms. The latter has been the central mechanism for capturing input on the web virtually since its inception. But a lot has changed over the last 30 years: users' expectations are higher, the complexity of information captured is growing, and the tools we have to provide a great user experience are more numerous and sophisticated.

Before the rise of JavaScript there was no good mechanism for giving a user feedback about the state of a form submission without actually sending that data to the server for validation. These days, however, we have many opportunities to make this process as easy and painless as possible. If you look at a handful of your most-used websites nearly all of them have forms. And while there are many well-established best practices there's also a great deal of Really Bad Forms™ out there in the wild today.

There's already a ton of good information out there related to building great form experiences including a substantial body of research along with mountains of posts espousing best practices. I recommend scouring these to discover the most common guidelines and best practices that have evolved regarding UI/UX. But to take it to the next level you need to be meticulous when it comes to the engineering side of the system.

Why are forms so hard? #

Humans are impatient. We want things to be as easy and familiar as possible. When they are easy and familiar, it takes fewer brain cycles to complete a task and that's good. Interacting with a form requires much more attention and focus than simply consuming content. It may require the user to recall information ("What is the name of the street you grew up on?"), make decisions ("Do you want to receive our amazing newsletter?"), and generate new data ("Choose a username."). Furthermore, our forms have rules and logic which must be satisfied by the answers provided. When they aren't we must concisely and clearly describe to the user what they've done wrong.

With that in mind we also have to consider how we are going to handle the following: surfacing good error messages amongst complex and possibly asynchronous validation logic, designing intuitive multi-step forms, handling persistence and multi-session form completion, accounting for relational and hierarchical data, and providing real-time validation feedback without being intrusive or annoying.

What's the value in a good form? #

Forms can make or break a user's visit to your site. A well-built and easy to use form yields more submissions, fewer abandonments, and greater user satisfaction. It is a true opportunity to demonstrate to your users that your company values their time and attention. If you nail this you've likely cultivated a loyal customer. People love to hate on poorly executed and aggravating form experiences. Conversely, when we have great form experiences we often become advocates for that company. Because it is such a pivotal touchpoint with customers we should be extremely diligent and intentional about crafting the experience.

On the other hand, poorly built forms can and will frustrate and confuse users: when they lose data, when you waste their time with hidden constraints or requirements, or when you don't provide clear validation feedback.

Oh okay, then how? #

In order to build Good Forms™ we should carefully consider the following decisions:

1. How to provide clear, actionable feedback when a field fails validation
2. In what context the user is likely to be interacting with the form
   • in one sitting
   • over multiple sessions (long/multi-page forms)
   • on a mobile phone/tablet vs. desktop/laptop
   • in a state of distraction (or not)
3. For consistency, ensure client-side validations match back-end validation logic
4. The need to provide additional metadata / context / hints for individual fields or groups of fields
5. Grouping and ordering the fields according to a logical flow within your domain
6. Leaning on UX research to decide how to present each field (e.g. label style, field grouping) - more on this next time
7. consider exactly when validation should occur
   • validate on submit (most obvious)
   • validate on field change: it can be nice to validate a field as a user types, but can also be annoying if error messages are popping up while a user is trying to focus
   • validate on blur: a common enhancement is to validate a field when a user moves focus away from it in order to provide immediate feedback

Conclusion #

• Forms are high-stakes; get it right and build customer loyalty.
• Lean on well-established best practices related to form UI/UX.
• To build the most effective forms, the engineering decisions need to be as carefully considered as the UI/UX decisions.

But taking all that into account isn't easy -- forms are hard, remember? -- in a future post I'll dig into the specifics of how I build forms with React to achieve the highest possible engagement and lowest abandonment rate.