Forms are the main ‘entry barrier’ to anything meaningful on the web. It might be a registration form, sign-up form or a shopping cart. In all of them, you wish to do the best in order to delight your users and lower the friction.
In the slides below, we will cover the best practices so your forms will rock.
Rules to remember
* Use big font size and provide easily touch buttons
* Take advantage of Autofill – See it in action in this live demo.
* Size the fields according to their expected length.
* Use the correct HTML5 input types.
* Provide both a general error message and a field specific one.
* Use the autofocus to direct the user to the problematic field.
* Make it clear what is optional and what is not
* Break forms to sections and show the user their progress.
The future
- Polymer has built a dedicated set of ECommerce elements, a.k.a. “Gold Elements” which you should use in any application.
- Check this Live Example.
More
- Read how to implement all these in my last post of “forms best practices”
- Leverage Autofill with autocomplete attributes: developers.google.com/web/updates/2015/06/checkout-faster-with-autofill
- Luke Wroblewski’s post on why you should avoid dropdowns and his excellent talk (part-1 and part-2).
Ido Green 