webforms_zipBoard

Good practices that one must follow when designing web forms

Web forms are ubiquitous and are a part and parcel of almost every website. Users interact with websites most commonly via forms. Be it to enter credit card details, fill in personal details, or sign up for a service. They act as a user interface for your web application. Hence, the user interface for web forms has to be as simple and as intuitive as possible. This will simplify one of the most common user interactions with any website and make it more endearing.

The challenge then in designing web forms is that they cast a significant impression on the user with regard to the overall UI of the application. No matter what the underlying complexity of the application is, the web form must be abstracted to be as user-friendly as possible.

Here are some of the points that you must keep in mind while designing a user-friendly web form.

Use concise labels

It is better to design a web form having short and simple labels. It enhances better understanding of the users and avoids frustration among them.

Amazon has created a new user registration form which includes short, clear labels. It has resulted in increased UX and a much better user engagement.

amazon_forms
LEFT: New web form designed by Amazon with short and clear labels. RIGHT: Previously designed web form having long labels, thus making it hard to comprehend.

Avoid all uppercase labels

You must avoid all uppercase labels in your web forms since they are difficult to read and acts as annoying figures to the users.

upper_case_labels_zipBoard
LEFT: Labels in all uppercase are hard to read, scan, and creates an irritation among users. RIGHT: webform designed with camel case labels enhancing proper readability to the users.

Avoid placeholder text as labels

placeholder
LEFT: Label is used as a placeholder which is totally a bad practice; MIDDLE: The hint is used as a placeholder text which is somewhat better than the first; RIGHT: Here placeholder text is avoided and the hint is given along with the label.

While designing a web form, you should avoid placeholder text as label due to the following reasons:-

  • Including label or hint as a placeholder text would mean the information is less glance-able to the user. It is nearly impossible for the user to revise the form after completion when labels are not present.
  • If a user forgets the label you included as a placeholder text, he has to either delete the entry in order to view that placeholder text again or click outside the box.

Nielsen Norman Group, a leader in the UX field, has clearly stated the reasons why you should avoid using placeholder text as labels in their article.

Placement of labels

Web forms designed with top-aligned labels are more accurately completed and easy to comprehend in comparison to left align and right align labels. In addition to this, top-aligned levels have close proximity to the input fields. Forms designed with top label alignment are a boon to mobile screens as they do not require much horizontal space.

alignment_zipBoard
LEFT: Top-aligned labels are easier to scan and have close proximity to the input fields. MIDDLE: Right-aligned labels that are somewhat better than Left align fields. RIGHT: Least suitable of all labels aligned.

Here is an article by SitePoint that mentions the position of labels while designing a web form. It also focuses on the pros and cons of the alignment of labels in a web form.

Help the user with hints

Sometimes, there arise situations where just providing labels to the fields is not enough. The hints help the user to know about the format of the input field, conditions to follow. This makes your web form easy to comprehend and also prevents the user from doing mistakes while filling the form. The hints can be displayed as a sub-label.

For example Threadless, in its payment form, has provided a meaningful description for fields such as name, card number, CVV number.

payment_info_zipBoard
https://blog.kissmetrics.com/form-data-profile/

The user while filling up the form should be supported with appropriate hints to give users an idea related to the context of the field. These hints can be displayed in the form of a popup box, tooltip text, etc.

For example, Google displays hints in the form of a popup box when the user enters the password in a field. The pop-up provides information about the minimum length of a password, password strength, and other information.

google_popups
Google displays hints in a box pointing to the currently active field regarding information about the input.

Proper spacing between elements

The position of labels with their field entries is an important thing to keep in mind when designing your web form. The inappropriate spacing between a label and its input field can cause confusion among users as to which field the label points.

label_points
Source: https://uxdesign.cc/design-better-forms-96fadca0f49c

Modify field size according to entry

While designing a web form, you must ensure that the column size justifies the field entry. Form entries such as phone number, zip code, the city, etc. should have a limited field size. The field size must speak for the form entry itself.

For example, United States Postal Service(USPS) has the field size of zip code based on its character length. This technique ensures a better structure of your web form and provides the user with an idea about the size of characters which he would enter.

USPS_zipBoard
USPS has a field size in accordance with the length of the zip code.

Avoid asterisks(*) for mandatory fields

You should avoid marking fields with asterisks as many users wouldn’t know what the asterisk actually implies. It is much better to use an optional keyword for inessential fields. With this, users can easily identify which fields are optional and which are not.

astericks_in_forms
LEFT: Fields marked with asterisks convey less information that the fields are mandatory. RIGHT: fields with optional keywords describe that the particular field could be left empty.

Highlight the currently active field

To really optimize user experience, consider highlighting the field which is active in the web form. It not only helps in better presentation of your web form but also reduces the time it takes for the user to track the location of the cursor.

highlight_active
Here the Name field is currently highlighted which helps in giving information about cursor location.

Context-awareness

Making a web form such that it is aware of the context and reacts to expected input makes it easier for users to complete details. This is the principle at play when the cursor moves to the next field when you’ve entered the expiry month of your credit card and the form automatically switches to the corresponding year field. This small addition creates a delightful experience for the user and eases the interaction.

For example, Google Analytics has designed its web form brilliantly keeping in mind the user actions. In their date range section, when the user finishes entering the beginning date, the cursor automatically jumps to the last date field. This helps the user save their time and effort of manually selecting the last date field.

date_field
http://www.wordstream.com/blog/ws/2014/05/15/google-analytics-tips

Inline validation for incorrect details

Inline validation for fields such as username, email, zip code, password, card credentials, etc. should occur after user pauses. This method gives users feedback based on the information they entered. You can increase the user experience of your web form by giving a message regarding the problem and also providing suggestions for alternate options. Twitter utilizes username suggestions in the sign-up form.

verification
An Inline error along with alternate options to a username.

For example in the image given below an error message displays when the user pauses after entering the incorrect card number. The message displays that the entered card number is invalid and alerts the user to enter valid card details.

verification
Source: https://medium.com/@101/improve-your-credit-card-form-ux-16bed55df668
verification
An error describing the entered zip code is invalid.

Password strength indicators

Password strength indicators act as a visual display to encourage users to create strong passwords for better security. It helps the users know about the strength of the password created thus results in a better user experience. LastPass utilizes these indicators while creating the account to give users better judgment about the entered password

password_stregth_indicators
An indicator showing weak passwords.
password_strength_indicators
 The password strength is good.

Handling input errors

You can increase user experience by resolving common email address input errors which save the time of user.

input_errors
The system automatically catches the error and provides the solution.

Grouping of related fields

It is an effective technique when designing a long-form. The multiple form entries can be grouped together into sections to give a better understanding to the users. It reduces the complexity of the form and provides a better sense of information to the user.

For example in the web form shown below the input entries are categorized on the basis of personal information, account information, and contact information. It provides information to the user in a structured manner, reduces the complexity of the form, and thus increases user experience.

grouping_related_fields
https://www.nngroup.com/articles/form-design-white-space/

Use of Tabs

This is an alternate option to the grouping of related fields and is a much better option to follow to present your web form to the users in a more convenient way. Tabs are an excellent way to indicate form completion progress to the user. This technique increases user experience as users are aware of the form completion status. Users are guided with structured information when filling the form.

github
GitHub uses tabs to represent its web form. It leads to a much better user experience as it provides structured information to the users and reduces complexity.

Social login

If you want to make the process of user login quick and effortless, then you should include social sign-in in your web form to avoid users wasting their time in creating a separate account for your site. You can directly use your existing account on Google, Facebook, Twitter to create your account on third-party websites. It serves as an alternate to the sign-in forms.

social_login
Pinterest, in its web form, includes social sign-in via Facebook and Google.

Conclusion

Web forms are a key element of the user interface. The ease of completing a web form can translate to how comfortable a user feels when using the application. Before designing a web form, you should be aware of your business goals and be precise about the information you want the user to enter. Web forms must not be a source of annoyance to your users otherwise it might lead to a terrible user experience. Good practices to design web forms like the ones mentioned above make your form clear, explicit, and easy to comprehend. The bottom line is that a clear, descriptive, and trustworthy web form wins you user appreciation.

Written for the zipBoard blog by Shubham Gupta

Request Demo

Request a personalized demo of zipBoard to ensure web design collaboration is smooth between all team members

Get Demo

Related Post

Leave a Comment