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.
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.
Table of Contents
- 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.
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 Twitter @smashingmag — 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.
- Delivery times to my country?+
All books will be shipped via airmail to keep delivery times as short as possible. You can find the anticipated delivery time for your country in the delivery times.
- Is the eBook included?+
Yes, the eBook is included when you buy a printed book, so you can start reading the eBook right away. We support PDF, ePub and Amazon Kindle formats.
- What payment methods are accepted?+
We accept 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.
- Is there a money-back guarantee?+
Yes, absolutely! No risk is involved. Our 100-day full money-back guarantee keeps you safe. Don’t hesitate to return your purchase. You’ll get your money back with no ifs, ands, or buts!
- I have a question that is not covered here.+
That’s it, everyone! We sincerely appreciate your support and trust, and we’ll make sure to deliver the book to you as soon as possible. Cheers!