Forms are a necessary component of any website; be it contact forms, payment details, account creation, lead generation, etc, users definitely need to interact with some sort of form when using your product. The purpose of this post is to highlight some of the key guidelines which I follow when it comes to designing better forms.

Here are some compelling reasons why more and more companies are choosing external IT support.

Keep it Short

Nobody likes a long form. At the “define scope” step of the design process, take some time to question whether each field is necessary for the user to achieve their objective. This might require more time, but trust me, the reduced user effort would lead to more user completing your form.

Always place the label closer to the associated field than to other fields. This is because humans are wired in a way where they make connections through things that are closely grouped together — Gestalt’s Principles.

Show Your Requirements Clearly

Tell the users what is required out of them. Don’t wait until they completed the form and show them an error message — which is a form of negative reinforcement. The user won’t know what is expected out of them if there’s no clear indication of the validation rules. This is especially applicable to the “password” field as different products will have different requirements.

Avoid Using The Placeholder Text As The Field

The role of the placeholder is normally used to give hints on what type of information is required for that particular input field. But some designers are using it to replace the field label to reduce clutter and a more minimalistic look. The problem with this is that the placeholder would disappear once the user interacts with the input field. This might be annoying if the user forgets the purpose of the field and has to click outside of it to see the placeholder again. You can read more about the negative implications of using placeholder text as the field label here.

Use Auto Focus

I really like it when forms auto-focus the first input field as I just have to type, tab, type, tab, and done. Although it only saves me one additional click, it does enhance the overall experience in a subtle way. When you allow for auto-focus, do also highlight active fields to inform users that the first field is already selected and that they can proceed to fill it out. Highlight Active Fields This is normally done by changing the border color and size to give a stronger visual cue. Make sure the color of the selected field stands out from the rest of the form so that it subconsciously helps the user to focus on the active field. The same concept can be used for errors as well, normally the text field will be highlighted in red if there’s an error.

Highlight Active Fields

This is normally done by changing the border color and size to give a stronger visual cue. Make sure the color of the selected field stands out from the rest of the form so that it subconsciously helps the user to focus on the active field. The same concept can be used for errors as well, normally the text field will be highlighted in red if there’s an error.