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.
Also available as eBook.
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 This Book
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.
386 pages. Written by Adam Silver. Quality hardcover. October 2018.
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.
About The Author
Adam Silver is an interaction designer with over 15 years experience working on the web for a range of companies including Tesco, BBC, Just Eat, Financial Times, the Department for Work and Pensions and many others. He’s particularly interested in inclusive design and design systems and writes about this on his blog and popular design publications such as A List Apart. This isn’t his first book either: he previously wrote Maintainable CSS which is about crafting maintainable interfaces with CSS.
It has been our goal to make the book as practical and useful as possible. We’ve been honored to receive very positive reviews from people making websites on small and large scale.
“I have been writing forms in HTML for over 20 years. This book captures the essence of what it is to embrace standards, progressively enhance and deliver simple, accessible forms. By formalising design patterns we can all use and implement, developers and designers can focus on their website and product. I wish this was available 20 years ago!” — Paul Duncan, Design Technologists and Accessibility Teacher
“Forms. It’s no coincidence that the word rhymes with “yawns” - forms are dull to code and even duller for your visitors to fill in. So make them work better for everyone, using the concrete tips, code and microcopy in this book. And take away your own yawns, as Adam Silver has done all the research and coding for you.” — Bruce Lawson, Web standards Advocate
“Form Design Patterns is setting out common sense and inclusive solutions for forms both simple and potentially complex. It’s your companion as you strive to create a simpler and easier interactive web.” — Heydon Pickering, UX and accessibility consultant
Why This Book Is For You
This book is a practical guide for anyone who needs to design, prototype and build all sorts of forms for digital services, products and websites. You’ll learn:
- All about the available native form elements and their powers, limitations and constraints.
- When and how to create accessible custom form components that can give users a better experience in comparison to their native equivalents.
- How to significantly reduce friction in forms with careful use of language, flow and order.
- Ways (and ways not) to help users fix form errors easily.
- How to deal with complex interfaces that let users upload files and add multiple items of any sort.
- Ways to let users search and filter a large set of results according to their own mental model.
- How to help users fill out especially long and complex forms that may take weeks to fill out.
- 386 pages, 14 × 21 cm (5.5 × 8.25 inches)
- ISBN: 978-3-945749-73-9 (print), 978-3-945749-74-6 (ePUB), 978-3-945749-75-3 (Kindle),
- Quality hardcover with stitched binding and a ribbon page marker,
- The eBook is available in PDF, EPUB, and Amazon Kindle formats,
- Shipped via free worldwide airmail shipping from Germany.