Using form elements wisely

Nijil David
Jul 17, 2014 · 4 min read

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.

There are many form elements as per W3C. I just picked the most used ones

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.

Good use of the numeric keyboard

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.

a radio button, slider and a CTA

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

    Nijil David

    Written by

    Lover of tea and transparency.

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade