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 hardcover.
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 eBook
The eBook 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 eBook.
By the end of the eBook, 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 eBook 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.
- 386 pages,
- The eBook is available in PDF, EPUB, and Amazon Kindle formats,
- ISBN: 978-3-945749-73-9 (PDF), 978-3-945749-74-6 (ePUB), 978-3-945749-75-3 (Kindle),
- Also available as hardcover.