Tom is our user here and even before we go through this one, we have to accept a fact:

Forms are really complicated.

There are many perspectives to improve conversions, reduce length of the form,completion time, subconscious irritation level and complexity.

• Every action that Tom performs in a form, he looses his patience slowly and the chances to drop from the flow increases. — Imagine a form with 15 dropdowns.
• Try to make the job easier for Tom, if there is a way of filling out the form by using the data entered initially, it would be really good. In this way Tom will just need to reconfirm the details. — If I choose a 2-door Audi in a form, you can automatically show ‘automatic transmission’ in choosing your transmission.
• Disabling the CTA and notifying the fields just that Tom has to complete will inform him about the missing mandatory fields. The notification can be just before the CTA so that he get to know the list that he needs to fill up.

To achieve all that lets brush through the elements and their number of interactions.

Input-field (2)

The most frequently used element. To give a helping hand for Tom, The autocomplete or suggest functionality is quite useful. Another quick tip for numeric fields like price, age etc its good to show the numeric keyboard. This will save an interaction.

However personally feel that they will make the page quite boring when used repeatedly.

Textarea (2)

Best recommended for notes, Its advisable not to include any styles or WYSIWYG editors as it would give your website literally a roller coaster ride of font-weights. On the other hand basecamp uses a really neat open source editor. So use it wisely.

Radio buttons and Checkboxes (1 )

You know the drill. Just a quick suggestion, a checkbox always visually gives a positive feedback. Also consider the fact that Tom tends to interact with the radio button or checkbox column itself mostly and not with the value(text) next to it. He might find it quite irritating in his subconscious level. Let’s see an example:

a. Tom interacts with the box of the checkbox. This was quite hard as he had to do a precise interaction.

b. Tom initially interacted with the box but later with the text because the border around it acted as a signifier.

c. Tom interacts with the texts as there was no checkbox. This didn’t give him a positive feedback but he was able to choose many options quickly.

Note: The above example is a result of many iterations. Both b and c had a learning curve but once achieved, it was clear sky.

Slider (1)

If there’s anything thats got to do with choosing a range, thats where this boy would come into play. That said, a slider would highly depend on the visual design and touch target

Button a.k.a CTA (1 )

The gatekeeper of forms. This guy will decide whether all the mandatory fields are filled before you move to the next action.

Dropdown (2)

Only use it when you have to choose a value from ‘n’ values where n is greater than 4. That sounded mathematical. ☺

Basically it says that use a dropdown only if you have more than four data. This is because the minimum interactions to select the data here is two. If we display all four data using a checkbox, Tom can access it in a single interaction.

Switch (1)

These are used to change a group of elements or trigger an important action. Their functionality pretty much work like radio buttons but visually they are way different and that’s the best part. Colors play a superior role in switches.

However using text inside the switch may not be a good idea because :
- you are always restricted to small words.
- a switch with a long text inside it acts slightly like a tab.

Luke’s tips on mobile design was a huge inspiration for me to write this one. And thanks to Julian Burford for Free vector gestures