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.
Today I had the pleasure to present at codemotion TLV. It was a great opportunity to meet so many good friends that are pushing the web forward.
TL;DR
Here are some of the rules that will help you build better forms. As we know, it’s a mobile world, so we wish our forms to be responsive and mobile first by nature. Let’s see how to do it right.
Here it’s simple, when you have doubt, make things bigger and check. In other words, you wish your fonts to look great both on mobile and desktop. For mobile, a rule of at least 16px will be a good start. Why? because it’s big enough in most cases for mobile. Plus, this minimum size will prevent all iPhones from zooming into the fields. For buttons and touch areas, start with at least a size of 32px for the input field height. This will ensure it’s not too small. However, check it both on mobile (few devices from 4″ to 6″) and on larger screens (=desktop or large tablets). Both Foundation and Bootstrap gives you a default size for such elements that is good for mobile.
This will enable your users an easy way to complete forms with pre-populated data. Look for opportunities to pre-fill information you already know (e.g. Geolocation to fill the zip code), or may anticipated to save the user from having to provide it. For example, pre-populate the shipping address with the last shipping address supplied by the user. See it in action at: greenido.github.io/form-example.html Continue reading
Ido Green 