By Meg McMahon

Recently, I have conducted two studies about online web forms. One study was for an internal form related to managing e-resource acquisition and maintenance. The other study was to create a better form experience for special borrowers on our website’s Visitor Access page. After both of these studies were conducted I attended a presentation by the NC State User Experience Research team. The talk was called "Better Web Forms: Practical tips for evaluation, accessibility, and design", and it reflected insights about online web forms similar to those that came up in our studies.

The knowledge gained from these experiences has led me to create this guide for best practices of web forms at Harvard Library.

Use an action-oriented title

The title of a web form should be clear, concise, and action-oriented. Using an action verb in the title can help set clear expectations for the user about what the form can help them achieve. 

In the Special Borrowers study, the previous Visitor Access page had eight forms each named after a specific type of special borrower. After finding that this confused the study participants, we condensed these into a single form with the title "Request Harvard Library Access.” 

Use plain language

Plain language means using simple, clear, and straightforward language that your users can easily understand. Avoid using jargon, technical terms, or complex language that might confuse your users. Instead, choose language similar to your users' everyday speech.

In the Special Borrowers study, we found that the form field labeled "HUID" was confusing to study participants because this is an acronym very specific to the context of Harvard. We changed it to “HUID (Harvard ID)” to give additional context to a user.  

Only ask what’s required

One of the key principles of effective web form design is to only ask for the information that is absolutely necessary. Every additional field makes it more likely that users will choose not to finish filling out the form. Therefore, always consider why you are requesting certain information from the user and how you will use it. 

In the internal e-resource acquisition and management study the form originally included all fields related to e-resources even though the information was not needed by the person filling out the form. To counteract this the form was restructured to have required fields easily identifiable. 

Use help text

If a user is presented with a form field name that could be ambiguous, it is ideal to have help text. Help text gives users a clue on what is important to include in their response and it allows you as the creator to get accurate information. 

In the internal e-resource acquisition and management study the users were unsure about what the correct input was for many fields. For example, there was a field to upload documents but the users didn’t know what documents should be uploaded. We chose to add the following help text: “Documents can include an email exchange with a vendor, a vendor agreement, etc.” With this change, users were able to understand what was required.

Explain what happens next

It's important to inform users about what will happen after they submit the form. This can be done through a confirmation page or an email. An example of text on a confirmation page is "Thank you for reaching out! We'll send you a confirmation email within the next two business days.”

In the Special Borrowers study participants let us know they wanted the submission form of the page to include a timeframe for when a librarian would get back to them. By adding this to the submission page and adding a follow-up email we made it easier for a user to have an expectation of when the library can reach back out. 

Final thoughts

Web form design is a critical aspect of user experience. By following these best practices, you can create web forms that are user-friendly.

References

Babich N. (2017, June 1). Designing Efficient Web Forms: On Structure, Inputs, Labels And Actions. Smashing Magazine. https://www.smashingmagazine.com/2017/06/designing-efficient-web-forms/ 

Birkett, A. (2022, December 29). Form Design Principles: 13 Empirically Backed Best Practices. CXL. https://cxl.com/blog/form-design-best-practices/ 

Davis, R. and Olson, E. (2023, March). Better Web Forms: Practical tips for evaluation, accessibility, and design. [Conference presentation]. Designing for Digital, Austin, TX, United States. https://docs.google.com/presentation/d/1D7hKWpi_G8Nf_h3ExVEx5JE7Qdfn2oluHtcWn8_7htU/edit#slide=id.p