DoP Deep - The UX of forms explored
Exploring the form design of top tier companies including Airbnb, Linear, OpenTable, Mixpanel and more
🔒DoP Deep goes deeper into the concepts and ideas that are covered in the Weekly Briefing to help you learn lessons from the experiences of top tech companies. If you’d like to upgrade to receive them you can do so below. Or you can find out more about what you get as a paid subscriber here.
Hi product people 👋,
When you stop to think about it, a surprising number of our product interactions are through forms. User registration and authentication, submitting a search query, generating leads, booking a table at a restaurant would all be impossible without the humble form. And getting form design right can have a significant impact on conversion.
In this Deep dive, we’re going deep on how top tier tech companies like Airbnb, Linear, Uber, OpenTable and others design their form UX so that you can use this as inspiration for your own product’s features that are reliant upon forms.
We’ll look at how form fields are designed, how error messages are displayed, validation techniques, button design trends and more. Plus, we’ll share some of the key UX trends and takeaways in form design to ensure your product’s form interactions are up to date.
Coming up:
How this analysis is structured
Modern use cases for forms explored
Company deep dives - a deeper look at the UX of forms from companies including: Airbnb, Figma, Linear, OpenTable, Mixpanel, Apple, Robinhood and more
How to build a consistent form UX across different products
Key UX trends and takeaways in form design to shape your product’s implementation of forms
The companies featured in full
How this analysis is structured
To help us structure this analysis, we’ve used specific criteria to assess each of the company’s form designs.
Here’s a snapshot of some of the companies featured. The list of companies in full is available at the end of this post.
The assessment criteria includes:
Form fields - how do the form fields work? Are the labels inside or outside of the form? How do the form fields behave when a user interacts with them? Is there any placeholder text in the form fields before a user interacts with the form?
Styles - what visual styles are applied to the form?
UI animations and UX patterns - does the form use any specific animations when a user interacts with it? Are there any notable, innovative or distinctive UX patterns that the form uses that are worth knowing about which could be used for inspiration?
Required fields - are required fields marked with an asterix or any other type of symbol to indicate that the field is required?
Error messages - how does the form show error messages to the user? Is inline validation used or are there distinct dialogue boxes to show error messages?
Button styles and text - what types of buttons are the companies shortlisted using? What styles are applied to the button? What hover effects does the button use? Are there any other notable characteristics of the button?
UI examples - visual examples of each of the forms highlighted including error states that you can use as inspiration for your own product.