Curious Brand
Curiosity - Brand - Experiences
blog_header_3.png

Curious About Brand & Design

11 form design guidelines

Form design can be boring, and users invariably hate filling them out.

illustration by  Ouch.pics

illustration by Ouch.pics

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.

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.

ASOS sign up screen is unnecessarily long and include redundant fields.

ASOS sign up screen is unnecessarily long and include redundant fields.


Visually group fields and their labels

Labels should be close to their respective fields. Make use of white space to clearly separate them, especially if the label is above the field.

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.

Amazon sign up form uses enough white space between each field to make it easy to scan through

Amazon sign up form uses enough white space between each field to make it easy to scan through


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.

Not only does Mailchimp’s experience mitigate password error friction, but it also provides positive momentum for users creating a new account.

Not only does Mailchimp’s experience mitigate password error friction, but it also provides positive momentum for users creating a new account.


Avoid using the placeholder text as the field label

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.

Google uses a smart micro-interaction to overcome this problem

Google uses a smart micro-interaction to overcome this problem

When the user clicks on the input field, the placeholder text fades out and becomes a mini field label on the top left.


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.

By highlighting the active field, it makes it easy to focus on it

By highlighting the active field, it makes it easy to focus on it


Inform user that caps lock is on

This is such a simple feature yet not many products implemented it. There were times when I didn’t realize that the caps lock was on, and was frustrated when I kept getting rejected. Worst still, the error message didn’t even tell me that my caps lock was on, it just kept saying that my password was wrong. This can be really annoying for users.

The Mac OS does a good job in informing users if their caps lock is on

The Mac OS does a good job in informing users if their caps lock is on


Use visual constraints

Visual constraints help to reinforce the information required by users. For example, if only two characters are required for the “month” field then there’s no need for it to be as long as the “name” field or else it might cause confusion for the user.

Invision does a good job by having different field length sizes based on the required information.

Invision does a good job by having different field length sizes based on the required information.


Don’t hide your error messages

Some designs use tooltips to relay error messages. This is done by having an alert icon next to the text field and when users hover on the icon, the error message will appear. This is really bad UX as it requires more effort from the user to correct their mistake. Some users might not even know that they are required to take an extra step (hover over the icon) to view the error message.

Wouldn’t it be better to just show the error message at the bottom of the text field?

Wouldn’t it be better to just show the error message at the bottom of the text field?


If you like to learn more about designing error messages within forms, you can read more about it here.

Mark option fields clearly

If you do ignore the first tip (keeping your forms short) and use optional fields, make sure that they are clearly marked as being optional. It would give a stronger visual cue to mark the fields with the text “optional” rather than just using asterisks. Some users might also not understand the meaning being the asterisk, as it is sometimes used to indicate a validation error.

Using the optional text makes it clear compared to using asterisks.

Using the optional text makes it clear compared to using asterisks.


Use images to increase engagement

When it makes sense, use images for selection to improve the user experience. This is good if you want to better explain each selection using text, icons, and/ or images.

Google ads use images to portray their campaign types.

Google ads use images to portray their campaign types.


Use Predictive Search Whenever Possible

This mainly works when users are asked to input information that has a lot of predefined option, such as their holiday destination. This would allow the user to only enter a few letters to find their destination city, rather than typing out the entire name — a task that can be quite irritating.

It also reduces the odds of a failed search as the user is less likely to misspell their search term.

Airbnb uses predictive search to help their users easily find their holiday destination.

Airbnb uses predictive search to help their users easily find their holiday destination.

I know that designing a form can be a boring process and most users invariably hate to fill them out. But following the above guidelines and injecting some humor into your UX copy, you can improve the user’s experience and elicit an emotional reaction.

Doing so will undoubtedly increase the completion rate which is one of the objectives as the role of a UX designer.

If you want to collaborate, talk about UI/UX design, or just want to chat, you can connect with me via LinkedIn. Happy designing!

Thanks to Fabricio Teixeira.

Source: https://uxdesign.cc