In our Udacity course “Building High Conversion Web Forms” we talk a lot on how to think on the friction that forms create and what to do in order to smooth it. One of the outcomes from our source was this checklist that you can use in order to make sure you are on the right path. In this post, I will cover the first 2 topics: form design and inputs types. In the future, I’ll cover validation and touch.
FORM DESIGN
- The best form is no form – That’s an easy one. You want to enable your users to achieve their goal without the need to type. Amazon ‘one click’ is one example, but even a better one is the new way that Android pay is giving you to buy something without the need to slide a card, get your wallet or type something. You can see below how it’s working in the real world and the goal is to mimic it on the web.
- Think mobile first. Prioritize, simplify and consolidate questions.
- Make fast forms – Speed equal conversions so remove unnecessary questions or pre-populate fields with existing data.
- Forms are a constant process, not a final product. Test, research, iterate and improve conversions over time.
- Users feeling lost? Add visual indicators to illuminate their progress.
INPUTS
- A well-chosen input type goes a long way – In many cases, there are much better options than ‘drop downs’. In a lot of cases, you can guide your users by using datalist. For more details, read this post.
- Enable autofill with autocomplete and name attributes – This is one of the most important features you can have in your forms. you can try this live example.
Btw, you can also try this ‘Autocomplete code-lab‘ which will teach you everything about autocomplete and Autofill. - Keep your users informed with labels. It’s important to make sure they’re visible when the input is in focus.
- Don’t use dropdowns – Unless you really, really have to and you got a great reason to do it.
- Need to make a suggestion? Try a datalist. It’s working on all modern browsers and it’s always a good idea to guide your users and help them fill the correct information. I really like Lea Verou’s ‘Awesomplete’ project. You can see it in action in this live example.
If you wish to print and hang the full checklist on your wall.
Please feel free.
Happy holidays!
