Adam Silver

Form Design Patterns

Without forms, the web is a passive experience where content is just consumed. But with forms the web can be collaborative, creative and productive. Forms are at the center of every meaningful interaction, so they’re worth getting a firm handle on. Jump to table of contents.

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.

Published on October 2018
Tags: Design, Accessibility

Print + eBook

$ 48.75 $ 63.00

Quality hardcover. Free worldwide shipping. 100 days money-back-guarantee.

eBook

$ 19.00

DRM-free, of course. ePUB, Kindle, PDF.
Included with your Smashing Membership.

“In a world of horribly marked up forms, this book is a beacon of light illuminating the way to more accessible user experiences. I highly recommend it to anyone designing or developing user interfaces to avoid the common form accessibility pitfalls we see all too often.”

Marcy Sutton, Accessibility Advocate

About The Book

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. To the excerpt →

The book contains ten chapters. 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.

384 pages. Written by Adam Silver. Quality hardcover. October 2018.

Print + eBook

$ 48.75 $ 63.00

Quality hardcover. Free worldwide shipping. 100 days money-back-guarantee.

eBook

$ 19.00

DRM-free, of course. ePUB, Kindle, PDF.
Included with your Smashing Membership.

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, our first look at administrative interfaces. As such, 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 administrative 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.

About The Author

Adam Silver is an interaction designer focused on design systems and inclusive design. He loves to help organizations deliver products and services so that they’re more efficient, simpler, faster and easier to use. He also wrote a little book called Form Design Patterns.

Print + eBook

$ 48.75 $ 63.00

Quality hardcover. Free worldwide shipping. 100 days money-back-guarantee.

eBook

$ 19.00

DRM-free, of course. ePUB, Kindle, PDF.
Included with your Smashing Membership.

Frequently Asked Questions

If you have any questions, we are right here to answer them. We love our customers, and we’d love to help you in any way or just listen to your story. So please feel free to ask questions via @smashingmag on Twitter — we’ll get back to you right away. Just in case: here are answers to some frequently asked questions.

How much does shipping cost to my country? +: No shipping costs — wherever you are in the world! We ship everywhere, worldwide, via airmail shipping. What you see is what you pay. No ifs or buts.
Delivery times to my country? +: All books are shipped via airmail to keep delivery times as short as possible. You can check the anticipated delivery times for your country.
Is the eBook included with print? +: When you purchase a printed book, you’ll get a friendly discount on the eBook. All eBooks are available in usual formats — PDF, ePUB, and Amazon Kindle.
What payment methods are accepted? +: PayPal, VISA, MasterCard and American Express. Of course, we use a secure connection, with 256-bit AES encryption and a green GeoTrust Extended Validation SSL CA certificate. And no, we don’t store your credit card data on our servers. (Obviously.)
Is there a money-back guarantee? +: Yes, absolutely! No risk at all — our 100-day full money-back guarantee keeps you safe. Don’t hesitate to return your purchase. You’ll get your money back without ifs or buts!
I have a question that is not covered here. +: No worries! Please get in touch with us via the contact form. We would love to help you as soon as we possibly can!