Form Design Patterns

by Adam Silver, Smashing Magazine (Editor)

Forms. It’s no coincidence that the word rhymes with “yawns” — web forms are dull to code and even duller for your visitors to fill in. But without forms, the web would just be a library. They let us comment, collect, book, buy, share, and a host of other verbs. And mostly they enable us to do these things in an awkward, opaque, confusing, odd, frustrating, alarming, or alienating way. Forms are such an important part of the web, but we design them poorly all the time. When they’re not over-engineered they’re usually not engineered at all.
The Form Design Patterns book tackles this problem. By going through common real-world problems step by step, you’ll learn how to design simple, robust, lightweight, responsive, accessible, progressively enhanced, interoperable and intuitive forms that let users get stuff done no matter what. And by the end of the book you’ll have a close-to exhaustive list of components delivered as a design system that you can use immediately in your own projects.
Table Of Contents

Genres: Design, Technology, Website Design, Nonfiction, Web

378 pages, Kindle Edition

Published October 9, 2018

Reviews

[Jonathan Perry · Rating 5 out of 5]

All of the examples in Adam's book are "real world" -- at least, as far as my real world is concerned: I've had to deal with all of them at one time or another, but never before with such a straightforward and easily referenceable book to hand. I've been reading this during my daily commute and have already found myself more than once in a meeting saying, "let's see how Adam's book deals with this," and then finding an answer.

It's a long book, and while it can be dipped into, I think it benefits from being read cover to cover: his approach and thinking are set out in the first third, confirmed in the second, then elaborated in the third. When in a later chapter he styles a label as a button on an upload form, you understand why he has made that decision, when in earlier chapters that might have seemed anathema.

This isn't dogma, its practical guidance: user research and commercial implementation support him. His approaches work, but your needs and -- most importantly -- your users might tell you otherwise, in which case, you should listen to them.

I have some complaints: it's long, and his JavaScript seems a little old-fashioned already given his use of jQuery and constructor functions (presumably, his research says that this is the style his audience will most appreciate) but, really, these are nonsensical issues to take and mostly inspired by professional jealousy.

Use this as a reference. Ask "what does Adam say about this?" and then go to the book. Why must I, yet again, rehearse the reasons about how elements should be placed and styled, why colour contrast should conform to particular ratios, what is the use of content for screen readers? I have Adam's book.

I've read lots of books about web development and this is the first I recommend without hesitation. It's human and it's useful; it isn't flawless. Read it. Keep a copy on your desk and recommend it to others.

[Find me on The Storygraph · Rating 4 out of 5]

Elke webnerd wordt een betere webnerd van dit boek. Prima voorbeelden. Het beste van dit boek is dat het -als je goed oplet- je een betere manier van denken aanleert. Dat is: als je goed tussen de regels door kunt lezen. Ik dubte een beetje tussen drie of vier sterren.

[Sashko Valyus · Rating 3 out of 5]

Доволі скупий набір пат тернів для верстки форм. Варто розглядати більше як кукбук прикладів для верстки і скріптування доступних форм різної складності.
Відповідно книга буде в пригоді вже якщо у вас поставлена така задача

[Kristján Oddsson · Rating 3 out of 5]

There’s a lot of solid advice and guidance in Form Design Patterns but I would argue that some of it, along with the code examples, are pretty outdated.

Still a recommended reading to any web developer out there.

[Nadya Tsech · Rating 3 out of 5]

I liked the structure and the first chapter of the book. But every time I consulted the book to find practical information it was too generic or wasn't applicable to my case.

[Rézina Dějová · Rating 4 out of 5]

Kniha zaměřená čistě na tvorbu přístupných webových formulářů. V několika kapitolách krok za krokem vysvětlí nejlepší UI pro tvorbu příkladových formulářů jako je registrace, rezervace letu, nákupní košík, nebo třeba výsledky vyhledávání (včetně filtrů). Práce je zaměřená spíš na frontendisty než na UI designery (hodně technické, dlouhé kusy kódů), ale i designer, pokud přeskočí technikálie, si v knize určitě najde svoje. Já v ní občas v rámci práce zalistuju a odhledám relevantní informaci.

Vydal Smashing Magazine. Při objednání přes e-shop papírová kniha dorazila překvapivě rychle a jako bonus ještě poskytují e-knihu v několika formátech, což velmi kvituji kvůli snazšímu vyhledání části, která mne zrovna zajímá.

[Ian · Rating 4 out of 5]

A nice and easy read that is up to date (at least at the moment) on best practices. It's rare that a book covers solid UX principles while also showcasing real-world coding examples. It's fairly general, so if there's something ultra-specific or an odd edge-case, this manual might not help. Overall, a practical resource to keep around for quick reference.

My main complaint is with the epub version. For some reason, the code examples were formatted oddly on my Nook and difficult to read. It views better on iBooks, but it still could've used some tighter design for better readability.

[Morgan CUGERONE · Rating 5 out of 5]

Form Design Patterns is so insightful it makes you a better developer at each section you read from it!
Not only in regards to learning tips and tricks about delivering a more inclusive experience but also in regards to sharpen a solid agile mindset. Indeed each pattern is covered in an empirical and iterative approach in my opinion.
The focus given on Progressive Enhancement really opens your eyes on what to focus on, as well as fostering a mindset to build simple and resilient UI/UX, even for complex patterns.
What is hard though, is to look back and realize how you did it wrong all these years. But as we often say it is never too late.
This book constitutes a perfect addition to Resilient Web Design by Jeremy Keith and to Inclusive Design Patterns by Heydon Pickering.

[Alberto Garcia Ariza · Rating 4 out of 5]

I thought it was going to give a more comprehensive list of deign patterns for forms, but it goes through 10 in depth forms case studies. The javascript parts were too much for me, and that's the reason of my disappointment as i wished it could be more design centered. Nevertheless it's a very good book, and you can learn a lot about making robust and inclusive forms

[Nikita Goncharov · Rating 4 out of 5]

It is not an ultimate guide on how to build forms. You’ll also face many age cases in real work when this guide just not covering it. Also from my pov it’s a weird idea to take space of the book about design patterns with code examples: patterns are remaining relevant, and code is rather getting old.

However, I think it’s a good book to start learning how forms work and what people expect.

[Nawel · Rating 3 out of 5]

good

[Jose Luis Rodriguez · Rating 4 out of 5]

Good balance of UX and Frontend development

[Andrew Boswell · Rating 5 out of 5]

A very clear text book on how to design a form. I have used it in the design of my app TaskAngel To-Do List

[Icaro Ferracini · Rating 3 out of 5]

Boas referências de padrões em design e código

[Giacomo Debidda · Rating 5 out of 5]

Excellent book that made me realize how complex is to design a HTML form that works well for every user.

Each chapter describes a different form for a particular use case (e.g. checkout form, login form, etc), so the chapters can be read independently one from the other. For each form, Adam describes the best practices, the things to avoid, provides links to demos and additional resources.

There is no use of JS/CSS frameworks, so the book has great re-readability and I think the knowledge it contains is pretty much timeless.