Forms are at the center of every meaningful interaction, so they’re worth getting a firm handle on. That’s why we published Form Design Patterns, a new printed book about accessible and well-designed web forms. With the new Form Design Patterns book, you will go through common real-world problems step by step, and 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. Jump to table of contents or get the book right away.
Read more…
We’re happy to announce Adam Silver’s new book Form Design Patterns. In this excerpt from the book, Adam takes a look at the foundational qualities of a well-designed form and how to think about them.
Read more…
Users can be hesitant to fill out forms. That is why it is our goal as designers to make the process of filling out a form as easy as possible. The primary goal with every form is completion. Two factors have a major impact on completion rate: Perception of complexity and Interaction cost. In this article, Nick shares some techniques that can help you design effective forms. He will help you cover many aspects related to structure, input fields, labels, action buttons and validation.
Read more…
This is the second part in a series on enhancing mobile forms for users. In the first part, we saw some general guidelines on how to improve form readability for mobile users, label placement and size, interaction cost and dealing with errors. HTML5 has brought us a lot of really cool features to help users fill in mobile forms and format their data, so today, Stéphanie Walter will show you in detail how HTML5 attributes can help you with that.
Read more…
Do you test your forms on real users and real devices? If not, you should. Let’s take a look at some of the techniques that can help you take your forms to the next level and help users fill them in. In this first part of a series of two articles, Stéphanie Walter will sum up some essential best practices to improve your mobile forms, including scannability and readability. She will guide you through label and input placement, size and optimization.
Read more…
With the help of this article, you will finally be able to learn the basics of Amazon Web Services (AWS) Lambda and Simple Email Service (SES) APIs to help you build your own static site mailer on the Serverless Framework. Today, Brian Holt will show you the basics of Amazon Web Services (AWS) Lambda and Simple Email Service (SES) APIs to build your own static site mailer on the Serverless Framework. The full service will take form data submitted from an AJAX request, hit the Lambda endpoint and return a response for our users. Brian will guide you through getting Serverless set up for the first time through deployment. It should take under an hour to complete, so let’s get started!
Read more…
Designing a good signup form is tricky. UX design does matter. To improve UX, the designer needs to put themselves in the user’s shoes. Make your form clear from the start, with visible labels placed outside of empty form fields. There’s always room for improvement. In this article, Kate Sipkina & Olga Ratinova will show you how to improve your contact forms — those crucial elements before users make a purchase or subscribe to a newsletter.
Read more…
Uploading an entire folder or folders of files is usually quite a hassle, as files in each folder have to be selected manually. And then some folders might contain sub-folders as well. You can use webkitdirectory, a non-standard attribute that allows users to pick a directory via a file input. Currently supported in Chrome, Firefox and Edge. It’s important to note that the attribute is non-standard, so it will not work for everybody. However, it doesn’t break anything as browsers that don’t support it will just ignore it, so you can easily progressively enhance your file upload without relying on the feature being supported everywhere.
Read more…
Users can be reluctant to fill out forms, so make the process as easy as possible. Minor changes can significantly increase usability. Forms remain one of the most important types of interactions for users on the web and in apps. In this article, Nick Babich will show you practical techniques that have been gleaned from usability testing, field testing, eye-tracking studies and actual complaints from disgruntled users. These techniques enable designers to produce faster, easier and more productive form experiences. All you need to do is to download Adobe XD and get started right away. At the end of the article, you’ll also find new ways to design forms.
Read more…
Adam Silver redesigned Boots.com so that each panel became its own page, removing the need for accordions and AJAX. This inconspicuous and humble UX pattern is flexible, performant and inclusive by design. Having a lot on one page might give the illusion of simplicity, but like algebraic equations, they are difficult to deal with unless they are broken down. Adam Silver has not come across another design pattern that has as many benefits as this one. This is one of those times when simple is just that: simple.
Read more…
