Form design patterns book

About the book

Without forms, the web is just a passive experience, where content is only consumed. But, with forms, the web can become collaborative, creative and productive. We can create, edit, delete and categorise large amounts of data such as email; advertise and sell unwanted products; buy a plane ticket, apply for a driving license and so much more.

Forms are at the center of every meaningful interaction, so it's imperative that we invest ample time in getting them right.

On first glance, forms are simple to learn. Made up of just a handful of inputs, you can create a form in little time. But when we consider the journeys we need to design, the users we need to design for, the browsers and devices of varying sizes, capabilities and bugs being used; and ensuring that the result is simple and inclusive, form design becomes a far more interesting and bigger challenge.

The book contains ten chapters (shown later). Each one represents a real-world and common problem that we’ll solve together step by step. Design is just as much about asking and understanding questions, as it is about creating solutions. So we’ll spend time doing just that: discussing the problem, weighing up the options and creating technical solutions that are simple and inclusive.

Each chapter revolves around a specific problem because that’s how we solve problems in real life. But don’t be concerned, many of the styles, components and patterns born out of each chapter are reusable and applicable well beyond the specifics and you’ll see examples of this as we move through the book.

By the end of the book, you’ll have a close-to exhaustive list of ready-to-go components, delivered as a design system that you can fork, contribute to and use immediately on your projects. But more than that, you’ll have the mindset and rationale behind when or when not to use each solution, which is just as important as the solution itself.

Ultimately, this book is about understanding what users need. Users are people and people are different. So we’ll be considering multiple interaction modalities and how to help users work under situational—temporary or permanent—and environmental circumstances. That’s why we’ll be looking at every problem through an inclusive design lens: because good design is inclusive.

Underpinning this notion will mean designing simple, robust, light-weight, responsive, accessible, progressively-enhanced, interoperable and easy to understand (and learn) interfaces that let users get stuff done no matter the situation.

Contents

The book has ten chapters each representing one big problem:

1. A registration form

We’ll start with a basic registration form and take a look at the foundational qualities of a well-designed form and how to think about them. By applying something called a question protocol, we’ll look at how to reduce friction without even touching the interface. Then we’ll look at some crucial patterns, including validation, that we’ll want to use for every form.

2. A checkout form

The one thing per page design pattern is a cornerstone of creating well-designed forms. We’ll look at why that is before applying it to a checkout flow. After that, we’ll consider flow and order with a view to breaking down each step of the checkout flow. Then we’ll look at several input types and how they affect the user experience on mobile and desktop browsers, all the while looking at ways to help both first-time and returning customers order quickly and simply.

3. A flight booking form

We’ll dive into the world of progressively enhanced, custom form components using ARIA. We’ll do this by exploring the best way to let users select destinations, pick dates, add passengers, and choose seats. We’ll analyze native form controls at length, and look at breaking away from convention when it becomes necessary.

4. A login form

We’ll look at the ubiquitous login form. Despite its simple appearance, there’s a bunch of usability failures that so many sites suffer from. Social media login hasn’t necessarily helped matters so we’ll cover that too.

5. An inbox

We’ll design ways to manage and action email in bulk. This comes with its own set of challenges and patterns, including a responsive ARIA-described action menu, multiple selection, and same-page messaging.

6. A search form

We’ll create a responsive search form that is readily available to users on all pages, and we’ll also consider the importance of the search mechanism that powers it. Together, they can make search discoverable, simple, and useful.

7. A filter form

Users often need to filter a large set of unwieldy search results. Without a well-designed filter, users are bound to give up. Filters pose a number of interesting and unique design problems that may force us to challenge best practice to give users a better experience.

8. An upload form

Many services, like photo sharing, messaging, and many back-office applications, let users upload images and documents. We’ll study the file input and how we can use it to upload multiple files at once. Then we’ll look at the intricacies of a drag-and-drop, Ajax-enhanced interface that is inclusive of keyboard and screen reader users.

9. An expense form

We’ll investigate the special problem of needing to create and add lots of expenses (or anything else) into a system. This is really an excuse to cover the add another pattern, which is often useful in repeat-use interfaces.

10. A really long and complicated form

Some forms are very long and take hours to complete. We’ll look at some of the patterns we can use to make long forms easier to manage.

That’s all

The books out now but you can sign up to my newsletter – I write about nailing the basics, avoiding complexity and making things that work for everyone.

Sign up to Good Design